feat(音频播放器): 添加音频播放器组件及功能

新增音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能。添加了FontAwesome图标库依赖，并更新了相关路由和页面配置。

@@ -8,6 +8,9 @@
       "name": "vue-vite",
       "name": "vue-vite",
       "version": "0.0.0",
       "version": "0.0.0",
       "dependencies": {
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/vue-fontawesome": "^3.0.5",
         "@heroicons/vue": "^2.2.0",
         "@heroicons/vue": "^2.2.0",
         "@vant/touch-emulator": "^1.4.0",
         "@vant/touch-emulator": "^1.4.0",
         "@vant/use": "^1.6.0",
         "@vant/use": "^1.6.0",
@@ -830,6 +833,48 @@
         "node": ">=18"
         "node": ">=18"
       }
       }
     },
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.5.tgz",
+      "integrity": "sha512-isZZ4+utQH9qg9cWxWYHQ9GwI3r5FeO7GnmzKYV+gbjxcptQhh+F99iZXi1Y9AvFUEgy8kRpAdvDlbb3drWFrw==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@heroicons/vue": {
     "node_modules/@heroicons/vue": {
       "version": "2.2.0",
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
       "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",

@@ -15,6 +15,9 @@
     "dev_upload": "npm run build_tar && npm run scp-dev && npm run dec-dev && npm run remove_tar"
     "dev_upload": "npm run build_tar && npm run scp-dev && npm run dec-dev && npm run remove_tar"
   },
   },
   "dependencies": {
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@heroicons/vue": "^2.2.0",
     "@heroicons/vue": "^2.2.0",
     "@vant/touch-emulator": "^1.4.0",
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
     "@vant/use": "^1.6.0",

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
   export interface GlobalComponents {
     ActivityCard: typeof import('./components/ui/ActivityCard.vue')['default']
     ActivityCard: typeof import('./components/ui/ActivityCard.vue')['default']
     AppLayout: typeof import('./components/layout/AppLayout.vue')['default']
     AppLayout: typeof import('./components/layout/AppLayout.vue')['default']
+    AudioPlayer: typeof import('./components/ui/AudioPlayer.vue')['default']
     BottomNav: typeof import('./components/layout/BottomNav.vue')['default']
     BottomNav: typeof import('./components/layout/BottomNav.vue')['default']
     CheckInDialog: typeof import('./components/ui/CheckInDialog.vue')['default']
     CheckInDialog: typeof import('./components/ui/CheckInDialog.vue')['default']
     ConfirmDialog: typeof import('./components/ui/ConfirmDialog.vue')['default']
     ConfirmDialog: typeof import('./components/ui/ConfirmDialog.vue')['default']

 /*
 /*
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 23:32:16
+ * @LastEditTime: 2025-04-07 14:24:50
  * @FilePath: /mlaj/src/main.js
  * @FilePath: /mlaj/src/main.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -13,10 +13,21 @@ import axios from '@/utils/axios';
 import 'vant/lib/index.css'
 import 'vant/lib/index.css'
 import '@vant/touch-emulator';
 import '@vant/touch-emulator';
 
 
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core'
+/* import font awesome icon component */
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+/* import specific icons */
+import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark } from '@fortawesome/free-solid-svg-icons'
+
+/* add icons to the library */
+library.add(faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark)
+
 const app = createApp(App)
 const app = createApp(App)
 // 屏蔽警告信息
 // 屏蔽警告信息
 app.config.warnHandler = () => null;
 app.config.warnHandler = () => null;
 
 
 app.config.globalProperties.$http = axios; // 关键语句
 app.config.globalProperties.$http = axios; // 关键语句
+app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(router)
 app.use(router)
 app.mount('#app')
 app.mount('#app')

@@ -163,6 +163,12 @@ export const routes = [
     meta: { title: '修改密码' },
     meta: { title: '修改密码' },
   },
   },
   {
   {
+    path: '/profile/settings/audio',
+    name: 'AudioPlayer',
+    component: () => import('../views/profile/settings/AudioPlayerPage.vue'),
+    meta: { title: '音频播放' },
+  },
+  {
     path: '/profile/learning-records',
     path: '/profile/learning-records',
     name: 'LearningRecords',
     name: 'LearningRecords',
     component: () => import('../views/profile/LearningRecordsPage.vue'),
     component: () => import('../views/profile/LearningRecordsPage.vue'),

+/*
+ * @Date: 2025-04-07 12:41:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-04-07 12:42:05
+ * @FilePath: /mlaj/src/utils/time.js
+ * @Description: 文件描述
+ */
+/**
+ * 格式化时间戳为 mm:ss 或 hh:mm:ss 格式
+ * @param {number} seconds - 总秒数（支持小数）
+ * @returns {string} 格式化后的时间字符串
+ */
+export function formatTime(seconds) {
+  if (isNaN(seconds) || seconds < 0) return '0:00'
+
+  const hours = Math.floor(seconds / 3600)
+  seconds %= 3600
+  const minutes = Math.floor(seconds / 60)
+  seconds = Math.floor(seconds % 60)
+
+  const pad = (n) => n.toString().padStart(2, '0')
+  if (hours > 0) {
+    return `${hours}:${pad(minutes)}:${pad(seconds)}`
+  }
+  return `${minutes}:${pad(seconds)}`
+}

@@ -64,6 +64,17 @@
                 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
                 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
               </div>
               </div>
             </div>
             </div>
+
+            <!-- 音频播放 -->
+            <div class="p-4" @click="router.push('/profile/settings/audio')">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h3 class="text-base font-medium text-gray-900">音频播放</h3>
+                  <p class="text-sm text-gray-500">播放音频文件</p>
+                </div>
+                <ChevronRightIcon class="w-5 h-5 text-gray-400" />
+              </div>
+            </div>
           </div>
           </div>
         </FrostedGlass>
         </FrostedGlass>
       </div>
       </div>

+<!--
+ * @Date: 2025-03-24 13:04:21
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-04-07 14:06:35
+ * @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
+ * @Description: 音频播放页面
+-->
+<template>
+  <AppLayout>
+    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
+      <div class="px-4 py-6">
+        <FrostedGlass class="rounded-xl overflow-hidden">
+          <AudioPlayer :songs="audioList" />
+        </FrostedGlass>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import AppLayout from '@/components/layout/AppLayout.vue';
+import FrostedGlass from '@/components/ui/FrostedGlass.vue';
+import AudioPlayer from '@/components/ui/AudioPlayer.vue';
+
+// 测试音频数据
+const audioList = ref([
+  {
+    id: 1,
+    title: '示例音频 1',
+    artist: '演唱者 1',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
+  },
+  {
+    id: 2,
+    title: '示例音频 2',
+    artist: '演唱者 2',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
+  },
+  {
+    id: 3,
+    title: '示例音频 3',
+    artist: '演唱者 3',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
+  },
+  {
+    id: 4,
+    title: '示例音频 4',
+    artist: '演唱者 4',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
+  },
+  {
+    id: 5,
+    title: '示例音频 5',
+    artist: '演唱者 5',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
+  },
+  {
+    id: 6,
+    title: '示例音频 6',
+    artist: '演唱者 6',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
+  },
+  {
+    id: 7,
+    title: '示例音频 7',
+    artist: '演唱者 7',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
+  },
+  {
+    id: 8,
+    title: '示例音频 8',
+    artist: '演唱者 8',
+    cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
+    url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
+  },
+]);
+</script>

 <!--
 <!--
- * @Date: 2025-03-20 19:53:12
+ * @Date: 2025-03-21 13:12:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-20 23:56:05
- * @FilePath: /mlaj/src/App.vue
+ * @LastEditTime: 2025-04-07 12:57:28
+ * @FilePath: /mlaj/src/views/test.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
-<script setup>
-const arr = [];
-arr.push({ a: '1' });
-arr.push({ a: '2', b: 'random1' });
-arr.push({ a: '3', b: 'random2', c: true });
-arr.push({ a: '4', b: 'random3', d: 123 });
-arr.push({ a: '5', b: 'random4', e: new Date() });
-
-const arr2 = arr.map(item => {
-  return {
-    ...item,
-    b: 'random5'
-  }
-})
-
-console.warn(arr2);
-</script>
-
-<template>
-</template>
-
-<style>
-
-</style>