feat: playing music displayed in the Pages area

pages/resume/index.vue

@@ -115,7 +115,7 @@
         </div>
 
         <div mt-2>
-          <Pages />
+          <Pages :music />
         </div>
       </div>
 
@@ -133,14 +133,16 @@
 </template>
 
 <script lang="ts" setup>
+import type { MusicInfo } from './types'
+
 import BlogArchives from './lists/BlogArchives.vue'
 import Company from './lists/Company.vue'
 import Gadgets from './lists/Gadgets.vue'
 import OpenSource from './lists/OpenSource.vue'
 import Pages from './lists/Pages.vue'
 import TechnologyStack from './lists/TechnologyStack.vue'
 
-const music = reactive({
+const music = reactive<MusicInfo>({
   playing: false,
   name: '',
   artist: '',

pages/resume/lists/Pages.vue

@@ -1,23 +1,32 @@
 <template>
   <BaseList>
     <li>
-      <div>
-        <IxIconText icon-class="i-ph-music-note-simple-duotone h-5 w-5" href="/playing">
+      <div v-if="visiblePlayingMusic" pr top-1 fyc gap-1>
+        <IxIconText
+          :icon-class="[
+            'size-6.25 rounded-full',
+            props.music.playing ? 'animate-spin animate-duration-30000' : ''
+          ].join(' ')" :src="props.music.image" href="/playing"
+        >
           我正在听的音乐
         </IxIconText>
+
+        <div v-show="props.music.playing" pr top="0.5" text="3 gray-3">
+          ( {{ props.music.name }} - {{ props.music.artist }} )
+        </div>
       </div>
     </li>
 
     <li>
-      <div>
+      <div pr top-1>
         <IxIconText src="https://introxd.com/favicon.png" icon-class="size-5" href="https://introxd.com">
           Introxd 定制个人简介
         </IxIconText>
       </div>
     </li>
 
     <li>
-      <div>
+      <div pr top-1>
         <IxIconText src="https://introxd.com/favicon.png" icon-class="size-5" href="https://docs.introxd.com">
           Introxd 组件库
         </IxIconText>
@@ -27,5 +36,22 @@
 </template>
 
 <script lang="ts" setup>
+import type { MusicInfo } from '../types'
+
 import BaseList from './BaseList.vue'
+
+const props = defineProps<{
+  music: MusicInfo
+}>()
+
+const visiblePlayingMusic = ref(false)
+
+watch(() => props.music, () => {
+  visiblePlayingMusic.value = false
+  nextTick(() => {
+    visiblePlayingMusic.value = true
+  })
+}, {
+  deep: true
+})
 </script>

pages/resume/types.ts

@@ -0,0 +1,6 @@
+export interface MusicInfo {
+  playing: boolean
+  name: string
+  artist: string
+  image: string
+}