From 5729c0b81aa7a1cabcffb2bfd857ee14b991fd4d Mon Sep 17 00:00:00 2001
From: zyH <hzy18023@gmail.com>
Date: Fri, 5 Jul 2024 00:01:00 +0800
Subject: [PATCH] feat(TopBar): show vip icon when hover avatar (#879)

---
 src/components/TopBar/TopBar.vue | 16 +++++++++++++++-
 src/components/TopBar/types.ts   |  3 +++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 0255faa0..31193806 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -487,7 +487,7 @@ defineExpose({
         <div
           v-if="isLogin"
           ref="avatar"
-          class="avatar right-side-item"
+          class="avatar right-side-item relative"
           shadow="$bew-shadow-2" rounded-full
         >
           <a
@@ -522,6 +522,12 @@ defineExpose({
             rounded-full
             w-40px h-40px
           />
+          <div
+            v-if="userInfo.vip?.status === 1"
+            class="vip-img bg-[url(https://i0.hdslb.com/bfs/seed/jinkela/short/user-avatar/big-vip.svg)] bg-cover bg-no-repeat w-27.5% h-27.5% z-111"
+            :class="{ hover: popupVisible.userPanel }"
+            :style="{ opacity: popupVisible.userPanel ? 1 : 0 }"
+          />
           <Transition name="slide-in">
             <UserPanelPop
               v-if="popupVisible.userPanel"
@@ -837,6 +843,14 @@ defineExpose({
         --uno: "opacity-60";
       }
     }
+
+    .vip-img {
+      --uno: "absolute bottom-0 right-0 transition-all duration-300";
+
+      &.hover {
+        --uno: "transform scale-180 translate-y-55px translate-15px";
+      }
+    }
   }
 
   .others.inactive,
diff --git a/src/components/TopBar/types.ts b/src/components/TopBar/types.ts
index 251e49e9..b4dc01c5 100644
--- a/src/components/TopBar/types.ts
+++ b/src/components/TopBar/types.ts
@@ -10,6 +10,9 @@ export interface UserInfo {
   mid: number
   money: number // 硬幣
   uname: string // username
+  vip: {
+    status: number // 1 is vip
+  }
   wallet: {
     mid: number
     bcoin_balance: number // b幣