feat: 实现全局音频播放器功能并优化播放体验

- 新增全局音频播放器组件，支持播放队列管理、播放控制、进度调整等功能
- 重构听书、文章列表等页面的音频播放逻辑，统一使用全局播放器
- 添加播放速率调节、播放列表展示等实用功能
- 为AI学习圈页面增加文章详情跳转和官网链接功能
- 修复路由跳转和错误处理中的若干问题

Author: yann0917

backend/app/download.go

@@ -287,7 +287,7 @@ func extractCourseDownloadData(articles *services.ArticleList, aid int, flag int
 			continue
 		}
 
-		if article.VideoStatus == 0 && len(article.AudioAliasIds) > 0 {
+		if article.Audio.Mp3PlayURL != "" && len(article.AudioAliasIds) > 0 {
 			audioIds[article.ID] = article.Audio.AliasID
 
 			var urls []downloader.URL

backend/app/oob.go

@@ -13,6 +13,14 @@ func AudioDetail(id string) (detail *services.AudioInfoResp, err error) {
 	return
 }
 
+func AudioDetailAlias(aliasID string) (detail *services.Audio, err error) {
+	detail, err = getService().AudioDetailAlias(aliasID)
+	if err != nil {
+		return
+	}
+	return
+}
+
 // OdobShelfAdd 听书加入书架
 func OdobShelfAdd(enIDs []string) (resp *services.EbookShelfAddResp, err error) {
 	resp, err = getService().OdobShelfAdd(enIDs)

backend/course.go

@@ -63,6 +63,15 @@ func (a *App) ArticleDetail(aType int, aEnid string) (markdown string, err error
 	return
 }
 
+func (a *App) GetArticleIntro(aType int, enid string) (intro *services.ArticleIntro, err error) {
+	info, err := Instance.ArticleInfo(enid, aType)
+	if err != nil {
+		return
+	}
+	intro = &info.ArticleInfo
+	return
+}
+
 func (a *App) GetVolcPlayAuthToken(mediaID, securityToken string) (info *services.MediaVolc, err error) {
 	info, err = Instance.GetVolcPlayAuthToken(mediaID, securityToken)
 	// fmt.Println(info)

backend/odob.go

@@ -15,6 +15,15 @@ func (a *App) AudioDetail(id string) (detail *services.AudioInfoResp, err error)
 	return
 }
 
+// AudioDetailAlias 听书音频播放信息（包含 mp3_play_url）
+func (a *App) AudioDetailAlias(aliasID string) (detail *services.Audio, err error) {
+	detail, err = app.AudioDetailAlias(aliasID)
+	if err != nil {
+		return
+	}
+	return
+}
+
 func (a *App) OdobShelfAdd(enids []string) (resp *services.EbookShelfAddResp, err error) {
 	resp, err = app.OdobShelfAdd(enids)
 	if err != nil {

frontend/components.d.ts

@@ -30,6 +30,9 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -51,14 +54,17 @@ declare module 'vue' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    GlobalAudioPlayer: typeof import('./src/components/GlobalAudioPlayer.vue')['default']
     Menu: typeof import('./src/components/Menu.vue')['default']
     MenuItem: typeof import('./src/components/MenuItem.vue')['default']
     NotesItem: typeof import('./src/components/NotesItem.vue')['default']

frontend/src/App.vue

@@ -1,17 +1,81 @@
 <script lang="ts" setup>
-import { onMounted, computed } from 'vue'
+import { onMounted, onUnmounted, computed } from 'vue'
 import Menu from './components/Menu.vue'
+import GlobalAudioPlayer from './components/GlobalAudioPlayer.vue'
 import { ElConfigProvider } from 'element-plus'
 import 'element-plus/es/components/message/style/css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { themeStore } from './stores/theme'
+import { playerStore } from './stores/player'
+import { AudioDetailAlias } from '../wailsjs/go/backend/App'
 
 // 初始化主题
 const store = themeStore()
 onMounted(() => {
   store.initTheme()
 })
 
+const pStore = playerStore()
+const odobCache = new Map<string, { src: string; poster?: string }>()
+const odobPending = new Map<string, Promise<{ src: string; poster?: string }>>()
+
+const globalPlayerHeight = computed(() => {
+  if (!pStore.hasTrack) return 0
+  const h = Number(pStore.barHeight) || 0
+  if (h > 0) return h
+  return pStore.collapsed ? 76 : 120
+})
+
+const mainStyle = computed(() => {
+  return { '--global-player-height': `${globalPlayerHeight.value}px` } as any
+})
+
+const resolveOdobSrc = async (aliasId: string) => {
+  const key = String(aliasId || '').trim()
+  if (!key) return { src: '' }
+  const cached = odobCache.get(key)
+  if (cached) return cached
+  const pending = odobPending.get(key)
+  if (pending) return pending
+  const p = AudioDetailAlias(key)
+    .then((detail) => {
+      const src = String(detail?.mp3_play_url ?? '').trim()
+      const poster = String(detail?.icon ?? '').trim() || undefined
+      const val = { src, poster }
+      if (src) odobCache.set(key, val)
+      return val
+    })
+    .finally(() => {
+      odobPending.delete(key)
+    })
+  odobPending.set(key, p)
+  return p
+}
+
+const onResolveTrack = async (ev: any) => {
+  const detail = ev?.detail || {}
+  const contextKey = String(detail?.contextKey ?? '')
+  if (contextKey !== 'odob:study') return
+  const trackId = String(detail?.trackId ?? '')
+  if (!trackId) return
+  const aliasId = trackId.startsWith('odob:') ? trackId.slice(5) : trackId
+  if (!aliasId) return
+  try {
+    const { src, poster } = await resolveOdobSrc(aliasId)
+    if (!src) return
+    pStore.updateTrackSource(trackId, src, poster)
+  } catch {
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('player:resolveTrack', onResolveTrack as any)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('player:resolveTrack', onResolveTrack as any)
+})
+
 // Element Plus 主题配置
 const elementTheme = computed(() => store.isDark ? 'dark' : 'light')
 </script>
@@ -22,9 +86,10 @@ const elementTheme = computed(() => store.isDark ? 'dark' : 'light')
       <el-header>
         <Menu />
       </el-header>
-      <el-main>
+      <el-main :style="mainStyle">
         <router-view></router-view>
       </el-main>
+      <GlobalAudioPlayer />
       <!-- <el-footer>Footer</el-footer> -->
     </el-container>
   </el-config-provider>
@@ -110,6 +175,7 @@ body {
   color: var(--text-color-secondary);
   width: 100%;
   height: 100%;
+  padding-bottom: calc(var(--global-player-height, 0px) + 10px);
   background-color: var(--bg-color);
   transition: background-color 0.3s ease, color 0.3s ease;
 
@@ -131,4 +197,4 @@ body {
 
 
 }
-</style>
+</style>