✨ feat: 添加 Coffee

components.d.ts

@@ -7,6 +7,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Coffee: typeof import('./src/components/Coffee.vue')['default']
+    Cooffee: typeof import('./src/components/Cooffee.vue')['default']
     InstallAppModal: typeof import('./src/components/common/InstallAppModal.vue')['default']
     MPop: typeof import('./src/components/common/MPop.vue')['default']
     MusicList: typeof import('./src/components/MusicList.vue')['default']

src/components/Coffee.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="relative inline-block">
+    <n-popover trigger="hover" placement="top" :show-arrow="true" :raw="true" :delay="100">
+      <template #trigger>
+        <slot>
+          <n-button
+            quaternary
+            class="inline-flex items-center gap-2 px-4 py-2 transition-all duration-300 hover:-translate-y-0.5"
+          >
+            请我喝咖啡
+          </n-button>
+        </slot>
+      </template>
+
+      <div class="p-6 bg-black rounded-lg shadow-lg">
+        <div class="flex gap-6">
+          <div class="flex flex-col items-center gap-2">
+            <n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+            <span class="text-sm text-gray-100">支付宝</span>
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+            <span class="text-sm text-gray-100">微信支付</span>
+          </div>
+        </div>
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<script setup>
+import { NButton, NImage, NPopover } from 'naive-ui';
+
+defineProps({
+  alipayQR: {
+    type: String,
+    required: true,
+  },
+  wechatQR: {
+    type: String,
+    required: true,
+  },
+});
+</script>

src/layout/components/SearchBar.vue

@@ -35,14 +35,14 @@
       />
       <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
     </div>
-    <n-tooltip v-if="!isElectron">
+    <coffee
-      <template #trigger>
+      alipay-q-r="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true"
-        <div class="github" @click="toGithub">
+      wechat-q-r="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true"
-          <i class="ri-github-fill"></i>
+    >
-        </div>
+      <div class="github" @click="toGithub">
-      </template>
+        <i class="ri-github-fill"></i>
-      <div>前往 Github</div>
+      </div>
-    </n-tooltip>
+    </coffee>
   </div>
 </template>
 
@@ -52,8 +52,8 @@ import { useStore } from 'vuex';
 
 import { getSearchKeyword } from '@/api/home';
 import { getUserDetail, logout } from '@/api/login';
+import Coffee from '@/components/Coffee.vue';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
-import { isElectron } from '@/hooks/MusicHook';
 import { getImgUrl } from '@/utils';
 
 const router = useRouter();
@@ -169,6 +169,6 @@ const toGithub = () => {
 }
 
 .github {
-  @apply cursor-pointer text-gray-100 hover:text-gray-400 text-xl ml-4 rounded-full border border-gray-600 flex justify-center items-center px-2;
+  @apply cursor-pointer text-gray-100 hover:text-gray-400 text-xl ml-4 rounded-full border border-gray-600 flex justify-center items-center px-2 h-full;
 }
 </style>