feat(TopBar): show vip icon when hover avatar (#879)

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,

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幣