From 0319d9a6ae3dd6b27cd6fcdfd3083d28ea565ea3 Mon Sep 17 00:00:00 2001
From: imba97 <mail@imba97.cn>
Date: Tue, 26 Nov 2024 23:06:19 +0800
Subject: [PATCH] feat: playing music displayed in the Pages area

---
 pages/resume/index.vue       |  6 ++++--
 pages/resume/lists/Pages.vue | 34 ++++++++++++++++++++++++++++++----
 pages/resume/types.ts        |  6 ++++++
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 pages/resume/types.ts

diff --git a/pages/resume/index.vue b/pages/resume/index.vue
index 58aed4c..a4ac1ec 100644
--- a/pages/resume/index.vue
+++ b/pages/resume/index.vue
@@ -115,7 +115,7 @@
         </div>
 
         <div mt-2>
-          <Pages />
+          <Pages :music />
         </div>
       </div>
 
@@ -133,6 +133,8 @@
 </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'
@@ -140,7 +142,7 @@ 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: '',
diff --git a/pages/resume/lists/Pages.vue b/pages/resume/lists/Pages.vue
index 01b94b5..9c7206c 100644
--- a/pages/resume/lists/Pages.vue
+++ b/pages/resume/lists/Pages.vue
@@ -1,15 +1,24 @@
 <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>
@@ -17,7 +26,7 @@
     </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>
diff --git a/pages/resume/types.ts b/pages/resume/types.ts
new file mode 100644
index 0000000..4ea79b5
--- /dev/null
+++ b/pages/resume/types.ts
@@ -0,0 +1,6 @@
+export interface MusicInfo {
+  playing: boolean
+  name: string
+  artist: string
+  image: string
+}