From 280fec1990be01f337353da7708dfc73ff2e8064 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 29 Mar 2025 23:19:51 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=BD=91=E6=98=93=E4=BA=91=E9=9F=B3=E4=B9=90=20API=20=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=EF=BC=8C=E6=B7=BB=E5=8A=A0=20B=E7=AB=99=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=92=8C=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cursor/rules/music-vue-rule.mdc              |  90 +++
 package.json                                  |   2 +-
 src/renderer/api/bilibili.ts                  | 128 +++++
 src/renderer/components/BilibiliPlayer.vue    | 519 ++++++++++++++++++
 src/renderer/components/MusicBar.vue          | 410 ++++++++++++++
 .../components/common/BilibiliItem.vue        | 117 ++++
 src/renderer/const/bar-const.ts               |  13 +
 src/renderer/layout/components/MusicFull.vue  |   2 +-
 src/renderer/store/modules/player.ts          |  96 ++--
 src/renderer/type/music.ts                    |  40 +-
 src/renderer/types/bilibili.ts                | 111 ++++
 src/renderer/views/search/index.vue           | 227 +++++---
 12 files changed, 1630 insertions(+), 125 deletions(-)
 create mode 100644 .cursor/rules/music-vue-rule.mdc
 create mode 100644 src/renderer/api/bilibili.ts
 create mode 100644 src/renderer/components/BilibiliPlayer.vue
 create mode 100644 src/renderer/components/MusicBar.vue
 create mode 100644 src/renderer/components/common/BilibiliItem.vue
 create mode 100644 src/renderer/types/bilibili.ts

diff --git a/.cursor/rules/music-vue-rule.mdc b/.cursor/rules/music-vue-rule.mdc
new file mode 100644
index 0000000..4dd9f3d
--- /dev/null
+++ b/.cursor/rules/music-vue-rule.mdc
@@ -0,0 +1,90 @@
+---
+description: 这个规则是项目描述
+globs: 
+alwaysApply: false
+---
+您是 TypeScript、Node.j、Vue3、Electron、naive-ui、VueUse 和 Tailwind 方面的专家。
+
+项目结构
+- 这是 Electron 项目，使用 Vue3 和 Vuex 进行开发的第三方网易云音乐播放器。
+- 使用 Vue3 和 Vuex 进行开发。
+- 使用 Vuex 进行状态管理。
+- 使用 VueUse 进行状态管理。
+- 使用 naive-ui 进行 UI 设计。
+- 使用 Tailwind 进行样式设计。
+- 使用 remixicon 进行图标设计。
+- 使用 vite 进行项目构建。
+- 使用 electron-builder 进行项目打包。
+- 使用 electron-vite 进行项目开发。
+- 使用 netease-cloud-music-api 进行网易云音乐接口调用。
+- 使用 electron-store 进行本地数据存储。
+- 使用 axios 进行网络请求。
+- 使用 @unblockneteasemusic/server 进行网易云音乐解锁。
+- 使用 vue-i18n 进行国际化。目录为 src/i18n
+
+代码风格和结构
+- 编写简洁、技术性的 TypeScript 代码，并提供准确示例。
+- 使用组合 API 和声明性编程模式；避免使用选项 API。
+- 优先使用迭代和模块化，而不是代码重复。
+- 使用带有助动词的描述性变量名称（例如 isLoading、hasError）。
+- 结构文件：导出的组件、可组合项、帮助程序、静态内容、类型。
+
+命名约定
+- 使用带破折号的小写字母表示目录（例如 components/auth-wizard）。
+- 使用 PascalCase 表示组件名称（例如 AuthWizard.vue）。
+- 使用 camelCase 表示可组合项（例如 useAuthState.ts）。
+
+TypeScript 用法
+- 对所有代码使用 TypeScript；优先使用类型而不是接口。
+- 避免使用枚举；改用 const 对象。
+- 将 Vue 3 与 TypeScript 结合使用，利用 defineComponent 和 PropType。
+
+语法和格式
+- 对方法和计算属性使用箭头函数。
+- 避免在条件中使用不必要的花括号；对简单语句使用简洁的语法。
+- 使用模板语法进行声明式渲染。
+
+UI 和样式
+- 使用 naive-ui 和 Tailwind 进行组件和样式设计。
+- 使用 Tailwind CSS 实现响应式设计；采用移动优先方法。
+
+图标
+- 使用 remixicon 作为图标库。
+
+性能优化
+- 对异步组件使用 Suspense。
+- 为路由和组件实现延迟加载。
+
+关键约定
+- 对常见可组合项和实用函数使用 VueUse。
+- 使用 Vuex 进行状态管理。
+- 优化 Web Vitals（LCP、CLS、FID）。
+
+
+Vue 3 和 Composition API 最佳实践
+- 使用 <script setup lang="ts"> 语法进行简洁的组件定义。
+- 利用 ref、reactive 和 computed 进行反应状态管理。
+- 在适当的情况下使用 provide/inject 进行依赖注入。
+- 实现自定义可组合项以实现可重用逻辑。
+
+
+Electron 最佳实践
+- 使用 Electron 和 Vue.js 进行跨平台桌面应用程序开发。
+- 使用 Electron 的 API 和 Vue.js 的组合 API 进行开发。
+- 实现自定义可组合项以实现可重用逻辑。
+
+
+
+组件导入
+- 使用 auto-import 进行组件导入。
+- naive-ui 组件自动导入 不需要手动导入。
+
+关注官方 Electron 和 Vue.js 文档，了解有关数据获取、渲染和路由的最新最佳实践。
+
+
+
+问题修复
+- 思考 5-7 种可能导致问题的来源，并根据可能性、对功能的影响以及在类似问题中的出现频率进行优先排序。仅考虑与错误日志、最近代码变更和系统约束相匹配的来源。忽略外部依赖，除非日志明确指向它们。
+- 一旦缩小到 1-2 个最可能的来源，将其与历史错误日志、相关系统状态和预期行为进行交叉验证。如果发现不一致，调整你的假设。
+- 在添加日志时，确保它们被策略性地放置，以便同时确认或排除多个潜在原因。如果日志不支持你的假设，请先提出替代的调试策略，再继续深入分析。
+- 在实施修复之前，先总结问题现象、经过验证的假设，以及预期的日志输出，以确认问题是否真正得到解决。
\ No newline at end of file
diff --git a/package.json b/package.json
index d504301..823a51c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.7",
     "font-list": "^1.5.1",
-    "netease-cloud-music-api-alger": "^4.25.0",
+    "netease-cloud-music-api-alger": "^4.26.1",
     "vue-i18n": "9"
   },
   "devDependencies": {
diff --git a/src/renderer/api/bilibili.ts b/src/renderer/api/bilibili.ts
new file mode 100644
index 0000000..51efc00
--- /dev/null
+++ b/src/renderer/api/bilibili.ts
@@ -0,0 +1,128 @@
+import type { IBilibiliPlayUrl, IBilibiliVideoDetail } from '@/types/bilibili';
+import request from '@/utils/request';
+
+interface ISearchParams {
+  keyword: string;
+  page?: number;
+  pagesize?: number;
+  search_type?: string;
+}
+
+/**
+ * 搜索B站视频
+ * @param params 搜索参数
+ */
+export const searchBilibili = (params: ISearchParams) => {
+  console.log('调用B站搜索API，参数:', params);
+  return request.get('/bilibili/search', {
+    params
+  });
+};
+
+interface IBilibiliResponse<T> {
+  code: number;
+  message: string;
+  ttl: number;
+  data: T;
+}
+
+/**
+ * 获取B站视频详情
+ * @param bvid B站视频BV号
+ * @returns 视频详情响应
+ */
+export const getBilibiliVideoDetail = (
+  bvid: string
+): Promise<IBilibiliResponse<IBilibiliVideoDetail>> => {
+  console.log('调用B站视频详情API，bvid:', bvid);
+  return new Promise((resolve, reject) => {
+    request
+      .get('/bilibili/video/detail', {
+        params: { bvid }
+      })
+      .then((response) => {
+        console.log('B站视频详情API响应:', response.status);
+
+        // 检查响应状态和数据格式
+        if (response.status === 200 && response.data && response.data.data) {
+          console.log('B站视频详情API成功，标题:', response.data.data.title);
+          resolve(response.data);
+        } else {
+          console.error('B站视频详情API响应格式不正确:', response.data);
+          reject(new Error('获取视频详情响应格式不正确'));
+        }
+      })
+      .catch((error) => {
+        console.error('B站视频详情API错误:', error);
+        reject(error);
+      });
+  });
+};
+
+/**
+ * 获取B站视频播放地址
+ * @param bvid B站视频BV号
+ * @param cid 视频分P的id
+ * @param qn 视频质量，默认为0
+ * @param fnval 视频格式标志，默认为80
+ * @param fnver 视频格式版本，默认为0
+ * @param fourk 是否允许4K视频，默认为1
+ * @returns 视频播放地址响应
+ */
+export const getBilibiliPlayUrl = (
+  bvid: string,
+  cid: number,
+  qn: number = 0,
+  fnval: number = 80,
+  fnver: number = 0,
+  fourk: number = 1
+): Promise<IBilibiliResponse<IBilibiliPlayUrl>> => {
+  console.log('调用B站视频播放地址API，bvid:', bvid, 'cid:', cid);
+  return new Promise((resolve, reject) => {
+    request
+      .get('/bilibili/playurl', {
+        params: {
+          bvid,
+          cid,
+          qn,
+          fnval,
+          fnver,
+          fourk
+        }
+      })
+      .then((response) => {
+        console.log('B站视频播放地址API响应:', response.status);
+
+        // 检查响应状态和数据格式
+        if (response.status === 200 && response.data && response.data.data) {
+          if (response.data.data.dash?.audio?.length > 0) {
+            console.log(
+              'B站视频播放地址API成功，获取到',
+              response.data.data.dash.audio.length,
+              '个音频地址'
+            );
+          } else if (response.data.data.durl?.length > 0) {
+            console.log(
+              'B站视频播放地址API成功，获取到',
+              response.data.data.durl.length,
+              '个播放地址'
+            );
+          }
+          resolve(response.data);
+        } else {
+          console.error('B站视频播放地址API响应格式不正确:', response.data);
+          reject(new Error('获取视频播放地址响应格式不正确'));
+        }
+      })
+      .catch((error) => {
+        console.error('B站视频播放地址API错误:', error);
+        reject(error);
+      });
+  });
+};
+
+// `http://127.0.0.1:30666/bilibili/stream-proxy?url=${encodeURIComponent(`https:${item.pic}`)}`,
+export const getBilibiliProxyUrl = (url: string) => {
+  const AUrl = url.startsWith('http') ? url : `https:${url}`;
+  return `${import.meta.env.VITE_API}/bilibili/stream-proxy?url=${encodeURIComponent(AUrl)}`;
+};
diff --git a/src/renderer/components/BilibiliPlayer.vue b/src/renderer/components/BilibiliPlayer.vue
new file mode 100644
index 0000000..42aef33
--- /dev/null
+++ b/src/renderer/components/BilibiliPlayer.vue
@@ -0,0 +1,519 @@
+<template>
+  <n-drawer
+    v-model:show="showModal"
+    class="bilibili-player-modal"
+    :mask-closable="true"
+    :auto-focus="false"
+    :to="`#layout-main`"
+    preset="card"
+    height="80%"
+    placement="bottom"
+  >
+    <div class="bilibili-player-wrapper">
+      <div class="bilibili-player-header">
+        <div class="title">{{ videoDetail?.title || '加载中...' }}</div>
+        <div class="actions">
+          <n-button quaternary circle @click="closePlayer">
+            <template #icon>
+              <i class="ri-close-line"></i>
+            </template>
+          </n-button>
+        </div>
+      </div>
+
+      <div v-if="isLoading" class="loading-wrapper">
+        <n-spin size="large" />
+        <p>听书加载中...</p>
+      </div>
+
+      <div v-else-if="errorMessage" class="error-wrapper">
+        <i class="ri-error-warning-line text-4xl text-red-500"></i>
+        <p>{{ errorMessage }}</p>
+        <n-button type="primary" @click="loadVideoSource">重试</n-button>
+      </div>
+
+      <div v-else-if="videoDetail" class="bilibili-info-wrapper">
+        <div class="bilibili-cover">
+          <n-image
+            :src="getBilibiliProxyUrl(videoDetail.pic)"
+            class="cover-image"
+            preview-disabled
+          />
+          <div class="play-button" @click="playCurrentAudio">
+            <i class="ri-play-fill text-4xl"></i>
+          </div>
+        </div>
+
+        <div class="video-info">
+          <div class="author">
+            <i class="ri-user-line mr-1"></i>
+            <span>{{ videoDetail.owner?.name }}</span>
+          </div>
+          <div class="stats">
+            <span><i class="ri-play-line mr-1"></i>{{ formatNumber(videoDetail.stat?.view) }}</span>
+            <span
+              ><i class="ri-chat-1-line mr-1"></i
+              >{{ formatNumber(videoDetail.stat?.danmaku) }}</span
+            >
+            <span
+              ><i class="ri-thumb-up-line mr-1"></i>{{ formatNumber(videoDetail.stat?.like) }}</span
+            >
+          </div>
+          <div class="description">
+            <p>{{ videoDetail.desc }}</p>
+          </div>
+          <div class="duration">
+            <p>总时长: {{ formatTotalDuration(videoDetail.duration) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="videoDetail?.pages && videoDetail.pages.length > 1" class="video-parts">
+        <div class="parts-title">分P列表 (共{{ videoDetail.pages.length }}集)</div>
+        <div class="parts-list">
+          <n-button
+            v-for="page in videoDetail.pages"
+            :key="page.cid"
+            :type="currentPage?.cid === page.cid ? 'primary' : 'default'"
+            size="small"
+            class="part-item"
+            @click="switchPage(page)"
+          >
+            {{ page.part }}
+          </n-button>
+        </div>
+      </div>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { getBilibiliPlayUrl, getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
+import { usePlayerStore } from '@/store/modules/player';
+import type { SongResult } from '@/type/music';
+import type { IBilibiliPage, IBilibiliVideoDetail } from '@/types/bilibili';
+
+const props = defineProps<{
+  show: boolean;
+  bvid?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void;
+  (e: 'close'): void;
+}>();
+
+const playerStore = usePlayerStore();
+const isLoading = ref(true);
+const errorMessage = ref('');
+const videoDetail = ref<IBilibiliVideoDetail | null>(null);
+const currentPage = ref<IBilibiliPage | null>(null);
+const audioList = ref<SongResult[]>([]);
+
+const showModal = computed({
+  get: () => props.show,
+  set: (value) => {
+    emit('update:show', value);
+    if (!value) {
+      emit('close');
+    }
+  }
+});
+
+watch(
+  () => props.bvid,
+  async (newBvid) => {
+    if (newBvid) {
+      await loadVideoDetail(newBvid);
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.show,
+  (newValue) => {
+    console.log('Modal show changed:', newValue);
+    if (newValue && props.bvid && !videoDetail.value) {
+      loadVideoDetail(props.bvid);
+    }
+  }
+);
+
+const closePlayer = () => {
+  showModal.value = false;
+};
+
+const loadVideoDetail = async (bvid: string) => {
+  if (!bvid) return;
+
+  isLoading.value = true;
+  errorMessage.value = '';
+  audioList.value = [];
+
+  try {
+    console.log('加载B站视频详情:', bvid);
+    const res = await getBilibiliVideoDetail(bvid);
+    console.log('B站视频详情数据:', res.data);
+
+    // 确保响应式数据更新
+    videoDetail.value = JSON.parse(JSON.stringify(res.data));
+
+    // 默认加载第一个分P
+    if (videoDetail.value?.pages && videoDetail.value.pages.length > 0) {
+      console.log('视频有多个分P，共', videoDetail.value.pages.length, '个');
+      const [firstPage] = videoDetail.value.pages;
+      currentPage.value = firstPage;
+      await loadVideoSource();
+    } else {
+      console.log('视频无分P或分P数据为空');
+      errorMessage.value = '无法加载视频分P信息';
+    }
+  } catch (error) {
+    console.error('获取视频详情失败', error);
+    errorMessage.value = '获取视频详情失败';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const loadVideoSource = async () => {
+  if (!props.bvid || !currentPage.value?.cid) {
+    console.error('缺少必要参数:', { bvid: props.bvid, cid: currentPage.value?.cid });
+    return;
+  }
+
+  isLoading.value = true;
+  errorMessage.value = '';
+
+  try {
+    console.log('加载音频源:', props.bvid, currentPage.value.cid);
+
+    // 将当前视频转换为音频格式加入播放列表
+    const tempAudio = createSongFromBilibiliVideo(); // 创建一个临时对象，还没有URL
+
+    // 加载当前分P的音频URL
+    const currentAudio = await loadSongUrl(currentPage.value, tempAudio);
+
+    // 将所有分P添加到播放列表
+    if (videoDetail.value?.pages) {
+      audioList.value = videoDetail.value.pages.map((page, index) => {
+        // 第一个分P直接使用已获取的音频URL
+        if (index === 0 && currentPage.value?.cid === page.cid) {
+          return currentAudio;
+        }
+
+        // 其他分P创建占位对象，稍后按需加载
+        return {
+          id: `${videoDetail.value!.aid}--${page.cid}`, // 使用aid+cid作为唯一ID
+          name: `${page.part || ''} - ${videoDetail.value!.title}`,
+          picUrl: getBilibiliProxyUrl(videoDetail.value!.pic),
+          type: 0,
+          canDislike: false,
+          alg: '',
+          source: 'bilibili', // 设置来源为B站
+          song: {
+            name: `${page.part || ''} - ${videoDetail.value!.title}`,
+            id: `${videoDetail.value!.aid}--${page.cid}`,
+            ar: [
+              {
+                name: videoDetail.value!.owner.name,
+                id: videoDetail.value!.owner.mid
+              }
+            ],
+            al: {
+              picUrl: getBilibiliProxyUrl(videoDetail.value!.pic)
+            }
+          } as any,
+          bilibiliData: {
+            bvid: props.bvid,
+            cid: page.cid
+          }
+        } as SongResult;
+      });
+      console.log('已生成音频列表，共', audioList.value.length, '首');
+
+      // 预加载下一集
+      if (audioList.value.length > 1) {
+        const nextIndex = 1; // 默认加载第二个分P
+        const nextPage = videoDetail.value.pages[nextIndex];
+        const nextAudio = audioList.value[nextIndex];
+        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
+      }
+    }
+  } catch (error) {
+    console.error('获取音频播放地址失败', error);
+    errorMessage.value = '获取音频播放地址失败';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const createSongFromBilibiliVideo = (): SongResult => {
+  if (!videoDetail.value || !currentPage.value) {
+    throw new Error('视频详情未加载');
+  }
+
+  const pageName = currentPage.value.part || '';
+  const title = `${pageName} - ${videoDetail.value.title}`;
+
+  return {
+    id: `${videoDetail.value.aid}--${currentPage.value.cid}`, // 使用aid+cid作为唯一ID
+    name: title,
+    picUrl: getBilibiliProxyUrl(videoDetail.value.pic),
+    type: 0,
+    canDislike: false,
+    alg: '',
+    // 设置来源为B站
+    source: 'bilibili',
+    // playMusicUrl属性稍后通过loadSongUrl函数添加
+    song: {
+      name: title,
+      id: `${videoDetail.value.aid}--${currentPage.value.cid}`,
+      ar: [
+        {
+          name: videoDetail.value.owner.name,
+          id: videoDetail.value.owner.mid
+        }
+      ],
+      al: {
+        picUrl: getBilibiliProxyUrl(videoDetail.value.pic)
+      }
+    } as any,
+    bilibiliData: {
+      bvid: props.bvid,
+      cid: currentPage.value.cid
+    }
+  } as SongResult;
+};
+
+const loadSongUrl = async (page: IBilibiliPage, songItem: SongResult) => {
+  if (songItem.playMusicUrl) return songItem; // 如果已有URL则直接返回
+
+  try {
+    console.log(`加载分P音频URL: ${page.part}, cid: ${page.cid}`);
+    const res = await getBilibiliPlayUrl(props.bvid!, page.cid);
+    const playUrlData = res.data;
+    let url = '';
+
+    // 尝试获取音频URL
+    if (playUrlData.dash && playUrlData.dash.audio && playUrlData.dash.audio.length > 0) {
+      url = playUrlData.dash.audio[0].baseUrl;
+      console.log('获取到dash音频URL:', url);
+    } else if (playUrlData.durl && playUrlData.durl.length > 0) {
+      url = playUrlData.durl[0].url;
+      console.log('获取到durl音频URL:', url);
+    } else {
+      throw new Error('未找到可用的音频地址');
+    }
+
+    // 设置代理URL
+    songItem.playMusicUrl = getBilibiliProxyUrl(url);
+    return songItem;
+  } catch (error) {
+    console.error(`加载分P音频URL失败: ${page.part}`, error);
+    return songItem;
+  }
+};
+
+const switchPage = async (page: IBilibiliPage) => {
+  console.log('切换到分P:', page.part);
+  currentPage.value = page;
+
+  // 查找对应的音频项
+  const audioItem = audioList.value.find((item) => item.bilibiliData?.cid === page.cid);
+
+  if (audioItem && !audioItem.playMusicUrl) {
+    // 如果该分P没有音频URL，则先加载
+    try {
+      isLoading.value = true;
+      await loadSongUrl(page, audioItem);
+    } catch (error) {
+      console.error('切换分P时加载音频URL失败:', error);
+      errorMessage.value = '获取音频地址失败，请重试';
+    } finally {
+      isLoading.value = false;
+    }
+  }
+};
+
+const playCurrentAudio = async () => {
+  if (audioList.value.length === 0) {
+    console.error('音频列表为空');
+    errorMessage.value = '音频列表为空，请重试';
+    return;
+  }
+
+  // 获取当前分P的音频
+  const currentIndex = audioList.value.findIndex(
+    (item) => item.bilibiliData?.cid === currentPage.value?.cid
+  );
+
+  if (currentIndex === -1) {
+    console.error('未找到当前分P的音频');
+    errorMessage.value = '未找到当前分P的音频';
+    return;
+  }
+
+  const currentAudio = audioList.value[currentIndex];
+  console.log('准备播放当前选中的分P:', currentAudio.name);
+
+  try {
+    // 加载当前分P的音频URL（如果需要）
+    if (!currentAudio.playMusicUrl) {
+      isLoading.value = true;
+      await loadSongUrl(currentPage.value!, currentAudio);
+
+      if (!currentAudio.playMusicUrl) {
+        throw new Error('获取音频URL失败');
+      }
+    }
+
+    // 预加载下一个分P的音频URL（如果有）
+    const nextIndex = (currentIndex + 1) % audioList.value.length;
+    if (nextIndex !== currentIndex) {
+      const nextAudio = audioList.value[nextIndex];
+      const nextPage = videoDetail.value!.pages.find((p) => p.cid === nextAudio.bilibiliData?.cid);
+
+      if (nextPage && !nextAudio.playMusicUrl) {
+        console.log('预加载下一个分P:', nextPage.part);
+        loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
+      }
+    }
+
+    // 将B站音频列表设置为播放列表
+    playerStore.setPlayList(audioList.value);
+
+    // 播放当前选中的分P
+    console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
+    playerStore.setPlayMusic(currentAudio);
+
+    // 关闭模态框
+    closePlayer();
+  } catch (error) {
+    console.error('播放音频失败:', error);
+    errorMessage.value = error instanceof Error ? error.message : '播放失败，请重试';
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+/**
+ * 格式化总时长
+ */
+const formatTotalDuration = (seconds?: number) => {
+  if (!seconds) return '00:00:00';
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+
+/**
+ * 格式化数字显示
+ */
+const formatNumber = (num?: number) => {
+  if (!num) return '0';
+  if (num >= 10000) {
+    return `${(num / 10000).toFixed(1)}万`;
+  }
+  return num.toString();
+};
+</script>
+
+<style scoped lang="scss">
+.bilibili-player-modal {
+  width: 90vw;
+  max-width: 1000px;
+}
+
+.bilibili-player-wrapper {
+  @apply flex flex-col p-8 pt-4;
+}
+
+.bilibili-player-header {
+  @apply flex justify-between items-center mb-4;
+
+  .title {
+    @apply text-lg font-medium truncate;
+  }
+
+  .actions {
+    @apply flex items-center;
+  }
+}
+
+.bilibili-info-wrapper {
+  @apply flex flex-col md:flex-row gap-4 w-full;
+
+  .bilibili-cover {
+    @apply relative w-full md:w-1/3 aspect-video rounded-lg overflow-hidden;
+
+    .cover-image {
+      @apply w-full h-full object-cover;
+    }
+
+    .play-button {
+      @apply absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 hover:opacity-100 transition-opacity cursor-pointer;
+    }
+  }
+}
+
+.loading-wrapper,
+.error-wrapper {
+  @apply w-full flex flex-col items-center justify-center py-16 rounded-lg bg-gray-100 dark:bg-gray-800;
+  aspect-ratio: 16/9;
+
+  p {
+    @apply mt-4 text-gray-600 dark:text-gray-400;
+  }
+}
+
+.error-wrapper {
+  button {
+    @apply mt-4;
+  }
+}
+
+.video-info {
+  @apply flex-1 p-4 rounded-lg bg-gray-100 dark:bg-gray-800;
+
+  .author {
+    @apply flex items-center text-sm mb-2;
+  }
+
+  .stats {
+    @apply flex gap-4 text-xs text-gray-500 dark:text-gray-400 mb-3;
+  }
+
+  .description {
+    @apply text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap mb-3;
+    max-height: 100px;
+    overflow-y: auto;
+  }
+
+  .duration {
+    @apply text-sm text-gray-600 dark:text-gray-400;
+  }
+}
+
+.video-parts {
+  @apply mt-4;
+
+  .parts-title {
+    @apply text-sm font-medium mb-2;
+  }
+
+  .parts-list {
+    @apply flex flex-wrap gap-2 max-h-60 overflow-y-auto pb-20;
+
+    .part-item {
+      @apply text-xs mb-2;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/MusicBar.vue b/src/renderer/components/MusicBar.vue
new file mode 100644
index 0000000..c904a2a
--- /dev/null
+++ b/src/renderer/components/MusicBar.vue
@@ -0,0 +1,410 @@
+<template>
+  <div
+    class="music-bar-container"
+    :class="{ playing: playerStore.isPlay && playerStore.playMusicUrl }"
+  >
+    <div class="music-bar-left">
+      <div
+        class="music-cover"
+        :class="{ loading: playerStore.currentSong?.playLoading }"
+        @click="openDetailPlayer"
+      >
+        <n-image
+          v-if="playerStore.currentSong && playerStore.currentSong.picUrl"
+          class="cover-image"
+          :src="getSourcePic(playerStore.currentSong)"
+          preview-disabled
+          :object-fit="'cover'"
+        />
+        <n-spin v-if="playerStore.currentSong?.playLoading" size="small" />
+      </div>
+      <div class="music-info">
+        <div class="music-title ellipsis-text">
+          {{ playerStore.currentSong ? playerStore.currentSong.name : '' }}
+        </div>
+        <div class="music-artist ellipsis-text">
+          {{ getArtistName(playerStore.currentSong) }}
+        </div>
+      </div>
+    </div>
+    <div class="music-bar-center">
+      <div class="player-controls">
+        <n-button quaternary circle class="control-button prev-button" @click="handlePrevClick">
+          <template #icon>
+            <i class="ri-skip-back-fill"></i>
+          </template>
+        </n-button>
+        <n-button
+          quaternary
+          circle
+          class="control-button play-button"
+          :disabled="!playerStore.currentSong.id"
+          @click="handlePlayClick"
+        >
+          <template #icon>
+            <i :class="playerStore.isPlay ? 'ri-pause-fill' : 'ri-play-fill'"></i>
+          </template>
+        </n-button>
+        <n-button quaternary circle class="control-button next-button" @click="handleNextClick">
+          <template #icon>
+            <i class="ri-skip-forward-fill"></i>
+          </template>
+        </n-button>
+      </div>
+      <div class="progress-container">
+        <div class="time-text">{{ formatTime(currentTime) }}</div>
+        <n-slider
+          class="progress-slider"
+          :value="playerProgress"
+          :step="0.1"
+          :max="duration"
+          :tooltip="false"
+          @update:value="handleProgressUpdate"
+        />
+        <div class="time-text">{{ formatTime(duration) }}</div>
+      </div>
+    </div>
+    <div class="music-bar-right">
+      <n-button quaternary circle class="control-button mode-button" @click="togglePlayMode">
+        <template #icon>
+          <i v-if="playerStore.playMode === 0" class="ri-repeat-2-line" />
+          <i v-else-if="playerStore.playMode === 1" class="ri-repeat-one-line" />
+          <i v-else-if="playerStore.playMode === 2" class="ri-shuffle-line" />
+        </template>
+      </n-button>
+      <n-button quaternary circle class="control-button list-button" @click="togglePlayList">
+        <template #icon>
+          <i class="ri-play-list-line"></i>
+        </template>
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { getBilibiliProxyUrl } from '@/api/bilibili';
+import { usePlayerStore } from '@/store/modules/player';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const router = useRouter();
+const playerStore = usePlayerStore();
+
+const currentTime = ref(0);
+const duration = ref(0);
+const playerProgress = ref(0);
+const showPlayList = ref(false);
+
+let audioPlayer: HTMLAudioElement | null = null;
+
+// 计算播放进度
+const progress = computed(() => {
+  if (duration.value === 0) return 0;
+  return (currentTime.value / duration.value) * 100;
+});
+
+// 监听播放状态
+watch(
+  () => playerStore.isPlay,
+  (isPlay) => {
+    if (!audioPlayer) return;
+    if (isPlay) {
+      audioPlayer.play().catch((error) => {
+        console.error('播放失败:', error);
+        playerStore.setIsPlay(false);
+      });
+    } else {
+      audioPlayer.pause();
+    }
+  }
+);
+
+// 监听播放URL变化
+watch(
+  () => playerStore.playMusicUrl,
+  (newUrl) => {
+    if (!audioPlayer) return;
+    if (newUrl) {
+      audioPlayer.src = newUrl;
+      if (playerStore.play) {
+        audioPlayer.play().catch((error) => {
+          console.error('播放失败:', error);
+          playerStore.setIsPlay(false);
+        });
+      }
+    }
+  }
+);
+
+// 初始化播放器
+onMounted(() => {
+  audioPlayer = new Audio();
+
+  // 设置初始音频
+  if (playerStore.playMusicUrl) {
+    audioPlayer.src = playerStore.playMusicUrl;
+
+    // 如果应该自动播放
+    if (playerStore.play) {
+      audioPlayer.play().catch((error) => {
+        console.error('播放失败:', error);
+        playerStore.setIsPlay(false);
+      });
+    }
+  }
+
+  // 添加事件监听
+  audioPlayer.addEventListener('timeupdate', handleTimeUpdate);
+  audioPlayer.addEventListener('loadeddata', handleLoadedData);
+  audioPlayer.addEventListener('ended', handleEnded);
+  audioPlayer.addEventListener('pause', () => playerStore.setIsPlay(false));
+  audioPlayer.addEventListener('play', () => playerStore.setIsPlay(true));
+  audioPlayer.addEventListener('error', handleError);
+});
+
+// 处理播放时间更新
+const handleTimeUpdate = () => {
+  if (!audioPlayer) return;
+  currentTime.value = audioPlayer.currentTime;
+  playerProgress.value = currentTime.value;
+
+  // 保存播放进度到localStorage
+  const playProgress = {
+    songId: playerStore.currentSong.id,
+    progress: currentTime.value
+  };
+  localStorage.setItem('playProgress', JSON.stringify(playProgress));
+};
+
+// 处理音频加载完成
+const handleLoadedData = () => {
+  if (!audioPlayer) return;
+  duration.value = audioPlayer.duration;
+
+  // 如果有保存的播放进度，恢复到对应位置
+  if (playerStore.savedPlayProgress !== undefined) {
+    audioPlayer.currentTime = playerStore.savedPlayProgress;
+    playerStore.savedPlayProgress = undefined;
+  }
+};
+
+// 处理播放结束
+const handleEnded = () => {
+  // 根据播放模式决定下一步操作
+  if (playerStore.playMode === 1) {
+    // 单曲循环
+    if (audioPlayer) {
+      audioPlayer.currentTime = 0;
+      audioPlayer.play().catch((error) => {
+        console.error('重新播放失败:', error);
+        playerStore.setIsPlay(false);
+      });
+    }
+  } else {
+    // 列表循环或随机播放
+    playerStore.nextPlay();
+  }
+};
+
+// 处理播放错误
+const handleError = (e: Event) => {
+  console.error('音频播放出错:', e);
+  if (audioPlayer?.error) {
+    console.error('错误码:', audioPlayer.error.code);
+
+    // 如果是B站音频可能链接过期，尝试重新获取
+    if (playerStore.currentSong.source === 'bilibili' && playerStore.currentSong.bilibiliData) {
+      console.log('B站音频播放错误，可能链接过期');
+      // 这里可以添加重新获取B站音频链接的逻辑
+    }
+  }
+};
+
+// 处理播放/暂停按钮点击
+const handlePlayClick = () => {
+  if (!playerStore.currentSong.id) return;
+  playerStore.setPlayMusic(!playerStore.isPlay);
+};
+
+// 处理上一曲按钮点击
+const handlePrevClick = () => {
+  playerStore.prevPlay();
+};
+
+// 处理下一曲按钮点击
+const handleNextClick = () => {
+  playerStore.nextPlay();
+};
+
+// 处理进度条更新
+const handleProgressUpdate = (value: number) => {
+  if (!audioPlayer) return;
+  audioPlayer.currentTime = value;
+  currentTime.value = value;
+};
+
+// 切换播放模式
+const togglePlayMode = () => {
+  playerStore.togglePlayMode();
+};
+
+// 切换播放列表显示
+const togglePlayList = () => {
+  showPlayList.value = !showPlayList.value;
+  // 这里可以添加显示播放列表的逻辑
+};
+
+// 打开详情播放页
+const openDetailPlayer = () => {
+  if (!playerStore.currentSong.id) return;
+  playerStore.setMusicFull(true);
+
+  // 根据来源打开不同的详情页
+  if (playerStore.currentSong.source === 'bilibili') {
+    // 打开B站详情页
+    if (playerStore.currentSong.bilibiliData?.bvid) {
+      // 这里可以跳转到B站详情页或显示B站播放器组件
+    }
+  } else {
+    // 打开网易云音乐详情页
+    router.push({ path: '/lyric' });
+  }
+};
+
+// 格式化时间
+const formatTime = (time: number) => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+// 获取艺术家名称
+const getArtistName = (song?: SongResult) => {
+  if (!song) return '';
+
+  // B站视频
+  if (song.source === 'bilibili' && song.song?.ar?.[0]) {
+    return song.song.ar[0].name || 'B站UP主';
+  }
+
+  // 网易云音乐
+  if (song.song?.artists) {
+    return song.song.artists.map((artist: any) => artist.name).join('/');
+  }
+
+  if (song.song?.ar) {
+    return song.song.ar.map((artist: any) => artist.name).join('/');
+  }
+
+  return '';
+};
+
+// 根据来源获取封面图
+const getSourcePic = (song: SongResult) => {
+  if (!song || !song.picUrl) return '';
+
+  // B站视频
+  if (song.source === 'bilibili') {
+    return song.picUrl; // B站封面已经在创建时使用getBilibiliProxyUrl处理过
+  }
+
+  // 网易云音乐
+  return getImgUrl(song.picUrl, '150y150');
+};
+</script>
+
+<style scoped lang="scss">
+.music-bar-container {
+  @apply flex items-center justify-between px-4 h-20 w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
+
+  &.playing {
+    .music-cover {
+      animation: rotate 20s linear infinite;
+    }
+  }
+}
+
+.music-bar-left {
+  @apply flex items-center;
+  width: 25%;
+
+  .music-cover {
+    @apply relative w-12 h-12 rounded-lg overflow-hidden flex items-center justify-center cursor-pointer;
+
+    .cover-image {
+      @apply w-full h-full object-cover;
+    }
+
+    &.loading {
+      animation-play-state: paused;
+    }
+  }
+
+  .music-info {
+    @apply ml-2 flex flex-col;
+    max-width: calc(100% - 56px);
+
+    .music-title {
+      @apply text-sm font-medium;
+    }
+
+    .music-artist {
+      @apply text-xs text-gray-500 dark:text-gray-400;
+    }
+  }
+}
+
+.music-bar-center {
+  @apply flex flex-col items-center;
+  width: 50%;
+
+  .player-controls {
+    @apply flex items-center justify-center gap-2 mb-2;
+
+    .control-button {
+      @apply text-lg;
+
+      &.play-button {
+        @apply text-xl;
+      }
+    }
+  }
+
+  .progress-container {
+    @apply flex items-center w-full;
+
+    .time-text {
+      @apply text-xs px-2 text-gray-500 dark:text-gray-400 whitespace-nowrap;
+    }
+
+    .progress-slider {
+      @apply flex-1;
+    }
+  }
+}
+
+.music-bar-right {
+  @apply flex items-center justify-end;
+  width: 25%;
+
+  .control-button {
+    @apply text-lg;
+  }
+}
+
+.ellipsis-text {
+  @apply whitespace-nowrap overflow-hidden text-ellipsis;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/renderer/components/common/BilibiliItem.vue b/src/renderer/components/common/BilibiliItem.vue
new file mode 100644
index 0000000..7ef5684
--- /dev/null
+++ b/src/renderer/components/common/BilibiliItem.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="bilibili-item" @click="handleClick">
+    <div class="bilibili-item-img">
+      <n-image class="w-full h-full" :src="item.pic" lazy preview-disabled />
+      <div class="play">
+        <i class="ri-play-fill text-4xl"></i>
+      </div>
+      <div class="duration">{{ formatDuration(item.duration) }}</div>
+    </div>
+    <div class="bilibili-item-info">
+      <p class="bilibili-item-title" v-html="item.title"></p>
+      <p class="bilibili-item-author"><i class="ri-user-line mr-1"></i>{{ item.author }}</p>
+      <div class="bilibili-item-stats">
+        <span><i class="ri-play-line mr-1"></i>{{ formatNumber(item.view) }}</span>
+        <span><i class="ri-chat-1-line mr-1"></i>{{ formatNumber(item.danmaku) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBilibiliSearchResult } from '@/types/bilibili';
+
+const props = defineProps<{
+  item: IBilibiliSearchResult;
+}>();
+
+const emit = defineEmits<{
+  (e: 'play', item: IBilibiliSearchResult): void;
+}>();
+
+const handleClick = () => {
+  emit('play', props.item);
+};
+
+/**
+ * 格式化数字显示
+ */
+const formatNumber = (num?: number) => {
+  if (!num) return '0';
+  if (num >= 10000) {
+    return `${(num / 10000).toFixed(1)}万`;
+  }
+  return num.toString();
+};
+
+/**
+ * 格式化视频时长
+ */
+const formatDuration = (duration?: number | string) => {
+  if (!duration) return '00:00:00';
+
+  // 处理字符串格式 (例如 "4352:29")
+  if (typeof duration === 'string') {
+    // 检查是否是合法的格式
+    if (/^\d+:\d+$/.test(duration)) {
+      // 分解分钟和秒数
+      const [minutes, seconds] = duration.split(':').map(Number);
+
+      // 转换为时:分:秒格式
+      const hours = Math.floor(minutes / 60);
+      const remainingMinutes = minutes % 60;
+
+      return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+    return '00:00:00';
+  }
+
+  // 数字处理逻辑 (秒数转为"时:分:秒"格式)
+  const hours = Math.floor(duration / 3600);
+  const minutes = Math.floor((duration % 3600) / 60);
+  const seconds = duration % 60;
+
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+</script>
+
+<style scoped lang="scss">
+.bilibili-item {
+  @apply rounded-lg flex items-start hover:bg-light-200 dark:hover:bg-dark-200 p-3 transition cursor-pointer border-none;
+
+  &-img {
+    @apply w-40 rounded-lg overflow-hidden relative mr-4;
+    aspect-ratio: 16/9;
+
+    &:hover {
+      .play {
+        @apply opacity-80;
+      }
+    }
+
+    .play {
+      @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity text-white;
+    }
+
+    .duration {
+      @apply absolute bottom-1 right-1 text-xs text-white px-1 py-0.5 rounded-sm bg-black/60 backdrop-blur-sm;
+    }
+  }
+
+  &-info {
+    @apply flex-1 overflow-hidden;
+  }
+
+  &-title {
+    @apply text-gray-800 dark:text-gray-200 text-sm font-medium mb-1 line-clamp-2 leading-tight;
+  }
+
+  &-author {
+    @apply text-gray-500 dark:text-gray-400 text-xs flex items-center mb-1;
+  }
+
+  &-stats {
+    @apply flex items-center text-xs text-gray-500 dark:text-gray-400 gap-3;
+  }
+}
+</style>
diff --git a/src/renderer/const/bar-const.ts b/src/renderer/const/bar-const.ts
index 3040ac5..49f174d 100644
--- a/src/renderer/const/bar-const.ts
+++ b/src/renderer/const/bar-const.ts
@@ -45,6 +45,10 @@ export const SEARCH_TYPES = [
   {
     label: 'MV',
     key: 1004
+  },
+  {
+    label: 'B站',
+    key: 2000
   }
   // {
   //   label: '歌词',
@@ -63,3 +67,12 @@ export const SEARCH_TYPES = [
   //   key: 1018,
   // },
 ];
+
+export const SEARCH_TYPE = {
+  MUSIC: 1, // 单曲
+  ALBUM: 10, // 专辑
+  ARTIST: 100, // 歌手
+  PLAYLIST: 1000, // 歌单
+  MV: 1004, // MV
+  BILIBILI: 2000 // B站视频
+} as const;
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index bafcb19..b4ff89a 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -112,7 +112,7 @@
             </div>
 
             <!-- 无歌词 -->
-            <div v-if="!lrcArray.length" class="music-lrc-text mt-40">
+            <div v-if="!lrcArray.length" class="music-lrc-text">
               <span>{{ t('player.lrc.noLrc') }}</span>
             </div>
           </div>
diff --git a/src/renderer/store/modules/player.ts b/src/renderer/store/modules/player.ts
index 7c33d80..65a34ce 100644
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -24,13 +24,27 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
   }
 }
 
-export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
-  const { data } = await getMusicUrl(id, isDownloaded);
+export const getSongUrl = async (
+  id: string | number,
+  songData: SongResult,
+  isDownloaded: boolean = false
+) => {
+  if (songData.playMusicUrl) {
+    return songData.playMusicUrl;
+  }
+
+  if (songData.source === 'bilibili' && songData.bilibiliData) {
+    console.log('加载B站音频URL');
+    return songData.playMusicUrl || '';
+  }
+
+  const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
+  const { data } = await getMusicUrl(numericId, isDownloaded);
   let url = '';
   let songDetail = null;
   try {
     if (data.data[0].freeTrialInfo || !data.data[0].url) {
-      const res = await getParsingMusicUrl(id, songData);
+      const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
       url = res.data.data.url;
       songDetail = res.data.data;
     } else {
@@ -45,6 +59,7 @@ export const getSongUrl = async (id: number, songData: any, isDownloaded: boolea
   url = url || data.data[0].url;
   return url;
 };
+
 const parseTime = (timeString: string): number => {
   const [minutes, seconds] = timeString.split(':');
   return Number(minutes) * 60 + Number(seconds);
@@ -71,9 +86,18 @@ const parseLyrics = (lyricsString: string): { lyrics: ILyricText[]; times: numbe
   return { lyrics, times };
 };
 
-export const loadLrc = async (playMusicId: number): Promise<ILyric> => {
+export const loadLrc = async (id: string | number): Promise<ILyric> => {
+  if (typeof id === 'string' && id.includes('--')) {
+    console.log('B站音频，无需加载歌词');
+    return {
+      lrcTimeArray: [],
+      lrcArray: []
+    };
+  }
+
   try {
-    const { data } = await getMusicLrc(playMusicId);
+    const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
+    const { data } = await getMusicLrc(numericId);
     const { lyrics, times } = parseLyrics(data.lrc.lyric);
     const tlyric: Record<string, string> = {};
 
@@ -102,8 +126,19 @@ export const loadLrc = async (playMusicId: number): Promise<ILyric> => {
 
 const getSongDetail = async (playMusic: SongResult) => {
   playMusic.playLoading = true;
-  const playMusicUrl =
-    playMusic.playMusicUrl || (await getSongUrl(playMusic.id, cloneDeep(playMusic)));
+
+  if (playMusic.source === 'bilibili') {
+    console.log('处理B站音频详情');
+    const { backgroundColor, primaryColor } =
+      playMusic.backgroundColor && playMusic.primaryColor
+        ? playMusic
+        : await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
+
+    playMusic.playLoading = false;
+    return { ...playMusic, backgroundColor, primaryColor } as SongResult;
+  }
+
+  const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
   const { backgroundColor, primaryColor } =
     playMusic.backgroundColor && playMusic.primaryColor
       ? playMusic
@@ -115,7 +150,6 @@ const getSongDetail = async (playMusic: SongResult) => {
 
 const preloadNextSong = (nextSongUrl: string) => {
   try {
-    // 限制同时预加载的数量
     if (preloadingSounds.value.length >= 2) {
       const oldestSound = preloadingSounds.value.shift();
       if (oldestSound) {
@@ -132,7 +166,6 @@ const preloadNextSong = (nextSongUrl: string) => {
 
     preloadingSounds.value.push(sound);
 
-    // 添加加载错误处理
     sound.on('loaderror', () => {
       console.error('预加载音频失败:', nextSongUrl);
       const index = preloadingSounds.value.indexOf(sound);
@@ -156,8 +189,7 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
     const detailedSongs = await Promise.all(
       songs.map(async (song: SongResult) => {
         try {
-          // 如果歌曲详情已经存在，就不重复请求
-          if (!song.playMusicUrl) {
+          if (!song.playMusicUrl || (song.source === 'netease' && !song.backgroundColor)) {
             return await getSongDetail(song);
           }
           return song;
@@ -168,7 +200,6 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
       })
     );
 
-    // 加载下一首的歌词
     const nextSong = detailedSongs[0];
     if (nextSong && !(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
       try {
@@ -178,14 +209,12 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
       }
     }
 
-    // 更新播放列表中的歌曲详情
     detailedSongs.forEach((song, index) => {
       if (song && startIndex + index < playList.length) {
         playList[startIndex + index] = song;
       }
     });
 
-    // 只预加载下一首歌曲
     if (nextSong && nextSong.playMusicUrl) {
       preloadNextSong(nextSong.playMusicUrl);
     }
@@ -194,7 +223,6 @@ const fetchSongs = async (playList: SongResult[], startIndex: number, endIndex:
   }
 };
 
-// 异步加载歌词的方法
 const loadLrcAsync = async (playMusic: SongResult) => {
   if (playMusic.lyric && playMusic.lyric.lrcTimeArray.length > 0) {
     return;
@@ -204,7 +232,6 @@ const loadLrcAsync = async (playMusic: SongResult) => {
 };
 
 export const usePlayerStore = defineStore('player', () => {
-  // 状态
   const play = ref(false);
   const isPlay = ref(false);
   const playMusic = ref<SongResult>(getLocalStorageItem('currentPlayMusic', {} as SongResult));
@@ -216,7 +243,6 @@ export const usePlayerStore = defineStore('player', () => {
   const favoriteList = ref<number[]>(getLocalStorageItem('favoriteList', []));
   const savedPlayProgress = ref<number | undefined>();
 
-  // 计算属性
   const currentSong = computed(() => playMusic.value);
   const isPlaying = computed(() => isPlay.value);
   const currentPlayList = computed(() => playList.value);
@@ -227,24 +253,36 @@ export const usePlayerStore = defineStore('player', () => {
     playMusic.value = updatedPlayMusic;
     playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
 
-    // 记录当前设置的播放状态
     play.value = isPlay;
 
-    // 每次设置新歌曲时，立即更新 localStorage
     localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
     localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
     localStorage.setItem('isPlaying', play.value.toString());
 
-    // 设置网页标题
-    document.title = `${updatedPlayMusic.name} - ${updatedPlayMusic?.song?.artists?.reduce((prev, curr) => `${prev}${curr.name}/`, '')}`;
+    let title = updatedPlayMusic.name;
+
+    if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
+      title += ` - ${updatedPlayMusic.song.artists.reduce(
+        (prev: string, curr: any) => `${prev}${curr.name}/`,
+        ''
+      )}`;
+    } else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
+      title += ` - ${updatedPlayMusic.song.ar[0].name}`;
+    }
+
+    document.title = title;
+
     loadLrcAsync(playMusic.value);
+
     musicHistory.addMusic(playMusic.value);
-    playListIndex.value = playList.value.findIndex((item: SongResult) => item.id === music.id);
-    // 请求后续五首歌曲的详情
+
+    playListIndex.value = playList.value.findIndex(
+      (item: SongResult) => item.id === music.id && item.source === music.source
+    );
+
     fetchSongs(playList.value, playListIndex.value + 1, playListIndex.value + 6);
   };
 
-  // 方法
   const setPlay = async (song: SongResult) => {
     await handlePlayMusic(song);
     localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
@@ -303,12 +341,10 @@ export const usePlayerStore = defineStore('player', () => {
     let nowPlayListIndex: number;
 
     if (playMode.value === 2) {
-      // 随机播放模式
       do {
         nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
       } while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
     } else {
-      // 列表循环模式
       nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
     }
 
@@ -344,7 +380,6 @@ export const usePlayerStore = defineStore('player', () => {
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
   };
 
-  // 初始化播放状态
   const initializePlayState = async () => {
     const settingStore = useSettingsStore();
     const savedPlayList = getLocalStorageItem('playList', []);
@@ -390,16 +425,13 @@ export const usePlayerStore = defineStore('player', () => {
 
   const initializeFavoriteList = async () => {
     const userStore = useUserStore();
-    // 先获取本地收藏列表
     const localFavoriteList = localStorage.getItem('favoriteList');
     const localList: number[] = localFavoriteList ? JSON.parse(localFavoriteList) : [];
 
-    // 如果用户已登录，尝试获取服务器收藏列表并合并
     if (userStore.user && userStore.user.userId) {
       try {
         const res = await getLikedList(userStore.user.userId);
         if (res.data?.ids) {
-          // 合并本地和服务器的收藏列表，去重
           const serverList = res.data.ids.reverse();
           const mergedList = Array.from(new Set([...localList, ...serverList]));
           favoriteList.value = mergedList;
@@ -414,12 +446,10 @@ export const usePlayerStore = defineStore('player', () => {
       favoriteList.value = localList;
     }
 
-    // 更新本地存储
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
   };
 
   return {
-    // 状态
     play,
     isPlay,
     playMusic,
@@ -431,13 +461,11 @@ export const usePlayerStore = defineStore('player', () => {
     savedPlayProgress,
     favoriteList,
 
-    // 计算属性
     currentSong,
     isPlaying,
     currentPlayList,
     currentPlayListIndex,
 
-    // 方法
     setPlay,
     setIsPlay,
     nextPlay,
diff --git a/src/renderer/type/music.ts b/src/renderer/type/music.ts
index 4388575..3962e15 100644
--- a/src/renderer/type/music.ts
+++ b/src/renderer/type/music.ts
@@ -13,23 +13,26 @@ export interface ILyric {
 }
 
 export interface SongResult {
-  id: number;
-  type: number;
+  id: string | number;
   name: string;
-  copywriter?: any;
   picUrl: string;
-  canDislike: boolean;
-  trackNumberUpdateTime?: any;
-  song: Song;
-  alg: string;
-  count?: number;
+  playCount?: number;
+  song?: any;
+  copywriter?: string;
+  type?: number;
+  canDislike?: boolean;
+  program?: any;
+  alg?: string;
+  playMusicUrl?: string;
   playLoading?: boolean;
-  ar?: Artist[];
-  al?: Album;
+  lyric?: ILyric;
   backgroundColor?: string;
   primaryColor?: string;
-  playMusicUrl?: string;
-  lyric?: ILyric;
+  bilibiliData?: {
+    bvid: string;
+    cid: number;
+  };
+  source?: 'netease' | 'bilibili';
 }
 
 export interface Song {
@@ -214,3 +217,16 @@ interface FreeTrialPrivilege {
   resConsumable: boolean;
   userConsumable: boolean;
 }
+
+export interface IArtists {
+  id: number;
+  name: string;
+  picUrl: string | null;
+  alias: string[];
+  albumSize: number;
+  picId: number;
+  fansGroup: null;
+  img1v1Url: string;
+  img1v1: number;
+  trans: null;
+}
diff --git a/src/renderer/types/bilibili.ts b/src/renderer/types/bilibili.ts
new file mode 100644
index 0000000..93ebbf8
--- /dev/null
+++ b/src/renderer/types/bilibili.ts
@@ -0,0 +1,111 @@
+export interface IBilibiliSearchResult {
+  id: number;
+  bvid: string;
+  title: string;
+  pic: string;
+  duration: number | string;
+  pubdate: number;
+  ctime: number;
+  owner: {
+    mid: number;
+    name: string;
+    face: string;
+  };
+  stat: {
+    view: number;
+    danmaku: number;
+    reply: number;
+    favorite: number;
+    coin: number;
+    share: number;
+    like: number;
+  };
+}
+
+export interface IBilibiliVideoDetail {
+  aid: number;
+  bvid: string;
+  title: string;
+  pic: string;
+  desc: string;
+  duration: number;
+  pubdate: number;
+  ctime: number;
+  owner: {
+    mid: number;
+    name: string;
+    face: string;
+  };
+  stat: {
+    view: number;
+    danmaku: number;
+    reply: number;
+    favorite: number;
+    coin: number;
+    share: number;
+    like: number;
+  };
+  pages: IBilibiliPage[];
+}
+
+export interface IBilibiliPage {
+  cid: number;
+  page: number;
+  part: string;
+  duration: number;
+  dimension: {
+    width: number;
+    height: number;
+    rotate: number;
+  };
+}
+
+export interface IBilibiliPlayUrl {
+  durl?: {
+    order: number;
+    length: number;
+    size: number;
+    ahead: string;
+    vhead: string;
+    url: string;
+    backup_url: string[];
+  }[];
+  dash?: {
+    duration: number;
+    minBufferTime: number;
+    min_buffer_time: number;
+    video: IBilibiliDashItem[];
+    audio: IBilibiliDashItem[];
+  };
+  support_formats: {
+    quality: number;
+    format: string;
+    new_description: string;
+    display_desc: string;
+  }[];
+  accept_quality: number[];
+  accept_description: string[];
+  quality: number;
+  format: string;
+  timelength: number;
+  high_format: string;
+}
+
+export interface IBilibiliDashItem {
+  id: number;
+  baseUrl: string;
+  base_url: string;
+  backupUrl: string[];
+  backup_url: string[];
+  bandwidth: number;
+  mimeType: string;
+  mime_type: string;
+  codecs: string;
+  width?: number;
+  height?: number;
+  frameRate?: string;
+  frame_rate?: string;
+  startWithSap?: number;
+  start_with_sap?: number;
+  codecid: number;
+}
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
index 9c8f0e8..0433c95 100644
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -40,33 +40,52 @@
       </div>
       <div v-loading="searchDetailLoading" class="search-list-box">
         <template v-if="searchDetail">
-          <div
-            v-for="(item, index) in searchDetail?.songs"
-            :key="item.id"
-            :class="setAnimationClass('animate__bounceInRight')"
-            :style="setAnimationDelay(index, 50)"
-          >
-            <song-item :item="item" @play="handlePlay" />
-          </div>
-          <template v-for="(list, key) in searchDetail">
-            <template v-if="key.toString() !== 'songs'">
-              <div
-                v-for="(item, index) in list"
-                :key="item.id"
-                class="mb-3"
-                :class="setAnimationClass('animate__bounceInRight')"
-                :style="setAnimationDelay(index, 50)"
-              >
-                <search-item :item="item" />
-              </div>
-            </template>
+          <!-- B站视频搜索结果 -->
+          <template v-if="searchType === SEARCH_TYPE.BILIBILI">
+            <div
+              v-for="(item, index) in searchDetail?.bilibili"
+              :key="item.bvid"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 50)"
+            >
+              <bilibili-item :item="item" @play="handlePlayBilibili" />
+            </div>
+            <div v-if="isLoadingMore" class="loading-more">
+              <n-spin size="small" />
+              <span class="ml-2">{{ t('search.loading.more') }}</span>
+            </div>
+            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
+          </template>
+          <!-- 原有音乐搜索结果 -->
+          <template v-else>
+            <div
+              v-for="(item, index) in searchDetail?.songs"
+              :key="item.id"
+              :class="setAnimationClass('animate__bounceInRight')"
+              :style="setAnimationDelay(index, 50)"
+            >
+              <song-item :item="item" @play="handlePlay" />
+            </div>
+            <template v-for="(list, key) in searchDetail">
+              <template v-if="key.toString() !== 'songs'">
+                <div
+                  v-for="(item, index) in list"
+                  :key="item.id"
+                  class="mb-3"
+                  :class="setAnimationClass('animate__bounceInRight')"
+                  :style="setAnimationDelay(index, 50)"
+                >
+                  <search-item :item="item" />
+                </div>
+              </template>
+            </template>
+            <!-- 加载状态 -->
+            <div v-if="isLoadingMore" class="loading-more">
+              <n-spin size="small" />
+              <span class="ml-2">{{ t('search.loading.more') }}</span>
+            </div>
+            <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
           </template>
-          <!-- 加载状态 -->
-          <div v-if="isLoadingMore" class="loading-more">
-            <n-spin size="small" />
-            <span class="ml-2">{{ t('search.loading.more') }}</span>
-          </div>
-          <div v-if="!hasMore && searchDetail" class="no-more">{{ t('search.noMore') }}</div>
         </template>
         <!-- 搜索历史 -->
         <template v-else>
@@ -99,22 +118,29 @@
         </template>
       </div>
     </n-layout>
+    <!-- 添加B站视频播放器组件 -->
+    <bilibili-player v-model:show="showBilibiliPlayer" :bvid="currentBvid" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useDateFormat } from '@vueuse/core';
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import { getBilibiliProxyUrl, searchBilibili } from '@/api/bilibili';
 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
+import BilibiliPlayer from '@/components/BilibiliPlayer.vue';
+import BilibiliItem from '@/components/common/BilibiliItem.vue';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
+import { SEARCH_TYPE } from '@/const/bar-const';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSearchStore } from '@/store/modules/search';
 import type { IHotSearch } from '@/type/search';
+import type { IBilibiliSearchResult } from '@/types/bilibili';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
@@ -190,6 +216,10 @@ onMounted(() => {
 
 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
 
+// 显示B站视频播放器
+const showBilibiliPlayer = ref(false);
+const currentBvid = ref('');
+
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
   if (!keywords) return;
 
@@ -215,61 +245,98 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
   }
 
   try {
-    const { data } = await getSearch({
-      keywords: currentKeyword.value,
-      type: type || searchType.value,
-      limit: ITEMS_PER_PAGE,
-      offset: page.value * ITEMS_PER_PAGE
-    });
+    // B站搜索
+    if ((type || searchType.value) === SEARCH_TYPE.BILIBILI) {
+      const response = await searchBilibili({
+        keyword: currentKeyword.value,
+        page: page.value + 1,
+        pagesize: ITEMS_PER_PAGE
+      });
+      console.log('response', response);
 
-    const songs = data.result.songs || [];
-    const albums = data.result.albums || [];
-    const mvs = (data.result.mvs || []).map((item: any) => ({
-      ...item,
-      picUrl: item.cover,
-      playCount: item.playCount,
-      desc: item.artists.map((artist: any) => artist.name).join('/'),
-      type: 'mv'
-    }));
+      const bilibiliVideos = response.data.data.result.map((item: any) => ({
+        id: item.aid,
+        bvid: item.bvid,
+        title: item.title,
+        author: item.author,
+        pic: getBilibiliProxyUrl(item.pic),
+        duration: item.duration,
+        pubdate: item.pubdate,
+        description: item.description,
+        view: item.play,
+        danmaku: item.video_review
+      }));
 
-    const playlists = (data.result.playlists || []).map((item: any) => ({
-      ...item,
-      picUrl: item.coverImgUrl,
-      playCount: item.playCount,
-      desc: item.creator.nickname,
-      type: 'playlist'
-    }));
+      if (isLoadMore && searchDetail.value) {
+        // 合并数据
+        searchDetail.value.bilibili = [...searchDetail.value.bilibili, ...bilibiliVideos];
+      } else {
+        searchDetail.value = {
+          bilibili: bilibiliVideos
+        };
+      }
 
-    // songs map 替换属性
-    songs.forEach((item: any) => {
-      item.picUrl = item.al.picUrl;
-      item.artists = item.ar;
-    });
-    albums.forEach((item: any) => {
-      item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
-    });
-
-    if (isLoadMore && searchDetail.value) {
-      // 合并数据
-      searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
-      searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
-      searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
-      searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
-    } else {
-      searchDetail.value = {
-        songs,
-        albums,
-        mvs,
-        playlists
-      };
+      // 判断是否还有更多数据
+      hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
     }
+    // 音乐搜索
+    else {
+      const { data } = await getSearch({
+        keywords: currentKeyword.value,
+        type: type || searchType.value,
+        limit: ITEMS_PER_PAGE,
+        offset: page.value * ITEMS_PER_PAGE
+      });
 
-    // 判断是否还有更多数据
-    hasMore.value =
-      songs.length === ITEMS_PER_PAGE ||
-      albums.length === ITEMS_PER_PAGE ||
-      mvs.length === ITEMS_PER_PAGE ||
-      playlists.length === ITEMS_PER_PAGE;
+      const songs = data.result.songs || [];
+      const albums = data.result.albums || [];
+      const mvs = (data.result.mvs || []).map((item: any) => ({
+        ...item,
+        picUrl: item.cover,
+        playCount: item.playCount,
+        desc: item.artists.map((artist: any) => artist.name).join('/'),
+        type: 'mv'
+      }));
+
+      const playlists = (data.result.playlists || []).map((item: any) => ({
+        ...item,
+        picUrl: item.coverImgUrl,
+        playCount: item.playCount,
+        desc: item.creator.nickname,
+        type: 'playlist'
+      }));
+
+      // songs map 替换属性
+      songs.forEach((item: any) => {
+        item.picUrl = item.al.picUrl;
+        item.artists = item.ar;
+      });
+      albums.forEach((item: any) => {
+        item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
+      });
+
+      if (isLoadMore && searchDetail.value) {
+        // 合并数据
+        searchDetail.value.songs = [...searchDetail.value.songs, ...songs];
+        searchDetail.value.albums = [...searchDetail.value.albums, ...albums];
+        searchDetail.value.mvs = [...searchDetail.value.mvs, ...mvs];
+        searchDetail.value.playlists = [...searchDetail.value.playlists, ...playlists];
+      } else {
+        searchDetail.value = {
+          songs,
+          albums,
+          mvs,
+          playlists
+        };
+      }
+
+      // 判断是否还有更多数据
+      hasMore.value =
+        songs.length === ITEMS_PER_PAGE ||
+        albums.length === ITEMS_PER_PAGE ||
+        mvs.length === ITEMS_PER_PAGE ||
+        playlists.length === ITEMS_PER_PAGE;
+    }
 
     page.value++;
   } catch (error) {
@@ -332,6 +399,12 @@ const handlePlay = () => {
 const handleSearchHistory = (keyword: string) => {
   loadSearch(keyword, 1);
 };
+
+// 处理B站视频播放
+const handlePlayBilibili = (item: IBilibiliSearchResult) => {
+  currentBvid.value = item.bvid;
+  showBilibiliPlayer.value = true;
+};
 </script>
 
 <style lang="scss" scoped>

From 477f8bb99b95b02dee08435f847ab0851b4097fe Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 30 Mar 2025 00:18:44 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=B9=E8=BF=9B?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8E=86=E5=8F=B2=E7=AE=A1=E7=90=86=E5=92=8C?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/layout/components/SearchBar.vue | 26 +++++++-
 src/renderer/views/search/index.vue          | 65 +++++++++++++-------
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/src/renderer/layout/components/SearchBar.vue b/src/renderer/layout/components/SearchBar.vue
index 33e3375..57259be 100644
--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -105,7 +105,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watchEffect } from 'vue';
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -191,6 +191,18 @@ const isDark = computed({
 
 // 搜索词
 const searchValue = ref('');
+
+// 使用 watch 代替 watchEffect 监听搜索值变化，确保深度监听
+watch(
+  () => searchStore.searchValue,
+  (newValue) => {
+    if (newValue) {
+      searchValue.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
 const search = () => {
   const { value } = searchValue;
   if (value === '') {
@@ -215,7 +227,17 @@ const search = () => {
 const selectSearchType = (key: number) => {
   searchStore.searchType = key;
   if (searchValue.value) {
-    search();
+    if (router.currentRoute.value.path === '/search') {
+      search();
+    } else {
+      router.push({
+        path: '/search',
+        query: {
+          keyword: searchValue.value,
+          type: key
+        }
+      });
+    }
   }
 };
 
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
index 0433c95..38cd402 100644
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -111,7 +111,7 @@
                 @click="handleSearchHistory(item)"
                 @close="handleCloseSearchHistory(item)"
               >
-                {{ item }}
+                {{ item.keyword }}
               </n-tag>
             </div>
           </div>
@@ -155,7 +155,7 @@ const searchStore = useSearchStore();
 const searchDetail = ref<any>();
 const searchType = computed(() => searchStore.searchType as number);
 const searchDetailLoading = ref(false);
-const searchHistory = ref<string[]>([]);
+const searchHistory = ref<Array<{ keyword: string; type: number }>>([]);
 
 // 添加分页相关的状态
 const ITEMS_PER_PAGE = 30; // 每页数量
@@ -170,17 +170,17 @@ const loadSearchHistory = () => {
   searchHistory.value = history ? JSON.parse(history) : [];
 };
 
-// 保存搜索历史
-const saveSearchHistory = (keyword: string) => {
+// 保存搜索历史，改为保存关键词和类型
+const saveSearchHistory = (keyword: string, type: number) => {
   if (!keyword) return;
   const history = searchHistory.value;
   // 移除重复的关键词
-  const index = history.indexOf(keyword);
+  const index = history.findIndex((item) => item.keyword === keyword);
   if (index > -1) {
     history.splice(index, 1);
   }
   // 添加到开头
-  history.unshift(keyword);
+  history.unshift({ keyword, type });
   // 只保留最近的20条记录
   if (history.length > 20) {
     history.pop();
@@ -196,8 +196,8 @@ const clearSearchHistory = () => {
 };
 
 // 删除搜索历史
-const handleCloseSearchHistory = (keyword: string) => {
-  searchHistory.value = searchHistory.value.filter((item) => item !== keyword);
+const handleCloseSearchHistory = (item: { keyword: string; type: number }) => {
+  searchHistory.value = searchHistory.value.filter((h) => h.keyword !== item.keyword);
   localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value));
 };
 
@@ -211,7 +211,7 @@ const loadHotSearch = async () => {
 onMounted(() => {
   loadHotSearch();
   loadSearchHistory();
-  loadSearch(route.query.keyword);
+  // 注意：路由参数的处理已经在 watch route.query 中处理了
 });
 
 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
@@ -223,21 +223,26 @@ const currentBvid = ref('');
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
   if (!keywords) return;
 
+  // 使用传入的类型或当前类型
+  const searchTypeToUse = type !== null ? type : searchType.value;
+
   if (!isLoadMore) {
     hotKeyword.value = keywords;
     searchDetail.value = undefined;
     page.value = 0;
     hasMore.value = true;
     currentKeyword.value = keywords;
+
+    // 保存搜索历史
+    saveSearchHistory(keywords, searchTypeToUse);
+
+    // 始终更新搜索框内容和类型
+    searchStore.searchType = searchTypeToUse;
+    searchStore.searchValue = keywords;
   } else if (isLoadingMore.value || !hasMore.value) {
     return;
   }
 
-  // 保存搜索历史
-  if (!isLoadMore) {
-    saveSearchHistory(keywords);
-  }
-
   if (isLoadMore) {
     isLoadingMore.value = true;
   } else {
@@ -246,7 +251,7 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
 
   try {
     // B站搜索
-    if ((type || searchType.value) === SEARCH_TYPE.BILIBILI) {
+    if (searchTypeToUse === SEARCH_TYPE.BILIBILI) {
       const response = await searchBilibili({
         keyword: currentKeyword.value,
         page: page.value + 1,
@@ -283,7 +288,7 @@ const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) =
     else {
       const { data } = await getSearch({
         keywords: currentKeyword.value,
-        type: type || searchType.value,
+        type: searchTypeToUse,
         limit: ITEMS_PER_PAGE,
         offset: page.value * ITEMS_PER_PAGE
       });
@@ -382,12 +387,21 @@ const handleScroll = (e: any) => {
 };
 
 watch(
-  () => route.path,
-  async (path) => {
-    if (path === '/search') {
-      searchStore.searchValue = route.query.keyword as string;
+  () => route.query,
+  (query) => {
+    if (route.path === '/search' && query.keyword) {
+      const routeKeyword = query.keyword as string;
+      const routeType = query.type ? Number(query.type) : searchType.value;
+
+      // 更新搜索类型和值
+      searchStore.searchType = routeType;
+      searchStore.searchValue = routeKeyword;
+
+      // 加载搜索结果
+      loadSearch(routeKeyword, routeType);
     }
-  }
+  },
+  { immediate: true }
 );
 
 const handlePlay = () => {
@@ -396,8 +410,13 @@ const handlePlay = () => {
 };
 
 // 点击搜索历史
-const handleSearchHistory = (keyword: string) => {
-  loadSearch(keyword, 1);
+const handleSearchHistory = (item: { keyword: string; type: number }) => {
+  // 更新搜索类型
+  searchStore.searchType = item.type;
+  // 先更新搜索值到 store
+  searchStore.searchValue = item.keyword;
+  // 使用关键词和类型加载搜索
+  loadSearch(item.keyword, item.type);
 };
 
 // 处理B站视频播放

From 1a440fad095fa8ea3675795018d7b89d6c4449dc Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 30 Mar 2025 01:20:28 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0B?=
 =?UTF-8?q?=E7=AB=99=E9=9F=B3=E9=A2=91URL=E8=8E=B7=E5=8F=96=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E5=99=A8?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E5=88=A0=E9=99=A4=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84BilibiliPlayer=E5=92=8CMusicBar?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/index.ts                             |   1 -
 src/main/modules/window.ts                    |   7 +-
 src/renderer/api/bilibili.ts                  |  22 +
 src/renderer/components/MusicBar.vue          | 410 ------------------
 src/renderer/components/common/SongItem.vue   |  31 +-
 src/renderer/hooks/MusicHook.ts               |  24 +
 src/renderer/hooks/MusicListHook.ts           |   4 +-
 .../layout/components/MobilePlayBar.vue       |   6 +-
 src/renderer/layout/components/PlayBar.vue    |  55 ++-
 src/renderer/router/other.ts                  |  11 +
 src/renderer/store/modules/player.ts          |  83 +++-
 src/renderer/type/music.ts                    |   3 +
 src/renderer/types/bilibili.ts                |   3 +
 .../bilibili}/BilibiliPlayer.vue              | 395 ++++++++++-------
 src/renderer/views/favorite/index.vue         |   4 +-
 src/renderer/views/history/index.vue          |   2 +-
 src/renderer/views/search/index.vue           |  14 +-
 17 files changed, 464 insertions(+), 611 deletions(-)
 delete mode 100644 src/renderer/components/MusicBar.vue
 rename src/renderer/{components => views/bilibili}/BilibiliPlayer.vue (54%)

diff --git a/src/main/index.ts b/src/main/index.ts
index 371b7aa..0a4d111 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -106,7 +106,6 @@ if (!isSingleInstance) {
 
   // 监听语言切换
   ipcMain.on('change-language', (_, locale: Language) => {
-    console.log('locale',locale)
     // 更新主进程的语言设置
     i18n.global.locale = locale;
     // 更新托盘菜单
diff --git a/src/main/modules/window.ts b/src/main/modules/window.ts
index ce3f5b8..04b0c99 100644
--- a/src/main/modules/window.ts
+++ b/src/main/modules/window.ts
@@ -1,5 +1,5 @@
 import { is } from '@electron-toolkit/utils';
-import { app, BrowserWindow, ipcMain, session, shell } from 'electron';
+import { app, BrowserWindow, globalShortcut, ipcMain, session, shell } from 'electron';
 import Store from 'electron-store';
 import { join } from 'path';
 
@@ -112,6 +112,11 @@ export function createMainWindow(icon: Electron.NativeImage): BrowserWindow {
   if (is.dev && process.env.ELECTRON_RENDERER_URL) {
     mainWindow.webContents.openDevTools({ mode: 'detach' });
     mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL);
+
+    // 注册快捷键 打开开发者工具
+    globalShortcut.register('CommandOrControl+Shift+I', () => {
+      mainWindow.webContents.openDevTools({ mode: 'detach' });
+    });
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'));
   }
diff --git a/src/renderer/api/bilibili.ts b/src/renderer/api/bilibili.ts
index 51efc00..b16a11d 100644
--- a/src/renderer/api/bilibili.ts
+++ b/src/renderer/api/bilibili.ts
@@ -126,3 +126,25 @@ export const getBilibiliProxyUrl = (url: string) => {
   const AUrl = url.startsWith('http') ? url : `https:${url}`;
   return `${import.meta.env.VITE_API}/bilibili/stream-proxy?url=${encodeURIComponent(AUrl)}`;
 };
+
+export const getBilibiliAudioUrl = async (bvid: string, cid: number): Promise<string> => {
+  console.log('获取B站音频URL', { bvid, cid });
+  try {
+    const res = await getBilibiliPlayUrl(bvid, cid);
+    const playUrlData = res.data;
+    let url = '';
+
+    if (playUrlData.dash && playUrlData.dash.audio && playUrlData.dash.audio.length > 0) {
+      url = playUrlData.dash.audio[0].baseUrl;
+    } else if (playUrlData.durl && playUrlData.durl.length > 0) {
+      url = playUrlData.durl[0].url;
+    } else {
+      throw new Error('未找到可用的音频地址');
+    }
+
+    return getBilibiliProxyUrl(url);
+  } catch (error) {
+    console.error('获取B站音频URL失败:', error);
+    throw error;
+  }
+};
diff --git a/src/renderer/components/MusicBar.vue b/src/renderer/components/MusicBar.vue
deleted file mode 100644
index c904a2a..0000000
--- a/src/renderer/components/MusicBar.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<template>
-  <div
-    class="music-bar-container"
-    :class="{ playing: playerStore.isPlay && playerStore.playMusicUrl }"
-  >
-    <div class="music-bar-left">
-      <div
-        class="music-cover"
-        :class="{ loading: playerStore.currentSong?.playLoading }"
-        @click="openDetailPlayer"
-      >
-        <n-image
-          v-if="playerStore.currentSong && playerStore.currentSong.picUrl"
-          class="cover-image"
-          :src="getSourcePic(playerStore.currentSong)"
-          preview-disabled
-          :object-fit="'cover'"
-        />
-        <n-spin v-if="playerStore.currentSong?.playLoading" size="small" />
-      </div>
-      <div class="music-info">
-        <div class="music-title ellipsis-text">
-          {{ playerStore.currentSong ? playerStore.currentSong.name : '' }}
-        </div>
-        <div class="music-artist ellipsis-text">
-          {{ getArtistName(playerStore.currentSong) }}
-        </div>
-      </div>
-    </div>
-    <div class="music-bar-center">
-      <div class="player-controls">
-        <n-button quaternary circle class="control-button prev-button" @click="handlePrevClick">
-          <template #icon>
-            <i class="ri-skip-back-fill"></i>
-          </template>
-        </n-button>
-        <n-button
-          quaternary
-          circle
-          class="control-button play-button"
-          :disabled="!playerStore.currentSong.id"
-          @click="handlePlayClick"
-        >
-          <template #icon>
-            <i :class="playerStore.isPlay ? 'ri-pause-fill' : 'ri-play-fill'"></i>
-          </template>
-        </n-button>
-        <n-button quaternary circle class="control-button next-button" @click="handleNextClick">
-          <template #icon>
-            <i class="ri-skip-forward-fill"></i>
-          </template>
-        </n-button>
-      </div>
-      <div class="progress-container">
-        <div class="time-text">{{ formatTime(currentTime) }}</div>
-        <n-slider
-          class="progress-slider"
-          :value="playerProgress"
-          :step="0.1"
-          :max="duration"
-          :tooltip="false"
-          @update:value="handleProgressUpdate"
-        />
-        <div class="time-text">{{ formatTime(duration) }}</div>
-      </div>
-    </div>
-    <div class="music-bar-right">
-      <n-button quaternary circle class="control-button mode-button" @click="togglePlayMode">
-        <template #icon>
-          <i v-if="playerStore.playMode === 0" class="ri-repeat-2-line" />
-          <i v-else-if="playerStore.playMode === 1" class="ri-repeat-one-line" />
-          <i v-else-if="playerStore.playMode === 2" class="ri-shuffle-line" />
-        </template>
-      </n-button>
-      <n-button quaternary circle class="control-button list-button" @click="togglePlayList">
-        <template #icon>
-          <i class="ri-play-list-line"></i>
-        </template>
-      </n-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { getBilibiliProxyUrl } from '@/api/bilibili';
-import { usePlayerStore } from '@/store/modules/player';
-import type { SongResult } from '@/type/music';
-import { getImgUrl } from '@/utils';
-
-const router = useRouter();
-const playerStore = usePlayerStore();
-
-const currentTime = ref(0);
-const duration = ref(0);
-const playerProgress = ref(0);
-const showPlayList = ref(false);
-
-let audioPlayer: HTMLAudioElement | null = null;
-
-// 计算播放进度
-const progress = computed(() => {
-  if (duration.value === 0) return 0;
-  return (currentTime.value / duration.value) * 100;
-});
-
-// 监听播放状态
-watch(
-  () => playerStore.isPlay,
-  (isPlay) => {
-    if (!audioPlayer) return;
-    if (isPlay) {
-      audioPlayer.play().catch((error) => {
-        console.error('播放失败:', error);
-        playerStore.setIsPlay(false);
-      });
-    } else {
-      audioPlayer.pause();
-    }
-  }
-);
-
-// 监听播放URL变化
-watch(
-  () => playerStore.playMusicUrl,
-  (newUrl) => {
-    if (!audioPlayer) return;
-    if (newUrl) {
-      audioPlayer.src = newUrl;
-      if (playerStore.play) {
-        audioPlayer.play().catch((error) => {
-          console.error('播放失败:', error);
-          playerStore.setIsPlay(false);
-        });
-      }
-    }
-  }
-);
-
-// 初始化播放器
-onMounted(() => {
-  audioPlayer = new Audio();
-
-  // 设置初始音频
-  if (playerStore.playMusicUrl) {
-    audioPlayer.src = playerStore.playMusicUrl;
-
-    // 如果应该自动播放
-    if (playerStore.play) {
-      audioPlayer.play().catch((error) => {
-        console.error('播放失败:', error);
-        playerStore.setIsPlay(false);
-      });
-    }
-  }
-
-  // 添加事件监听
-  audioPlayer.addEventListener('timeupdate', handleTimeUpdate);
-  audioPlayer.addEventListener('loadeddata', handleLoadedData);
-  audioPlayer.addEventListener('ended', handleEnded);
-  audioPlayer.addEventListener('pause', () => playerStore.setIsPlay(false));
-  audioPlayer.addEventListener('play', () => playerStore.setIsPlay(true));
-  audioPlayer.addEventListener('error', handleError);
-});
-
-// 处理播放时间更新
-const handleTimeUpdate = () => {
-  if (!audioPlayer) return;
-  currentTime.value = audioPlayer.currentTime;
-  playerProgress.value = currentTime.value;
-
-  // 保存播放进度到localStorage
-  const playProgress = {
-    songId: playerStore.currentSong.id,
-    progress: currentTime.value
-  };
-  localStorage.setItem('playProgress', JSON.stringify(playProgress));
-};
-
-// 处理音频加载完成
-const handleLoadedData = () => {
-  if (!audioPlayer) return;
-  duration.value = audioPlayer.duration;
-
-  // 如果有保存的播放进度，恢复到对应位置
-  if (playerStore.savedPlayProgress !== undefined) {
-    audioPlayer.currentTime = playerStore.savedPlayProgress;
-    playerStore.savedPlayProgress = undefined;
-  }
-};
-
-// 处理播放结束
-const handleEnded = () => {
-  // 根据播放模式决定下一步操作
-  if (playerStore.playMode === 1) {
-    // 单曲循环
-    if (audioPlayer) {
-      audioPlayer.currentTime = 0;
-      audioPlayer.play().catch((error) => {
-        console.error('重新播放失败:', error);
-        playerStore.setIsPlay(false);
-      });
-    }
-  } else {
-    // 列表循环或随机播放
-    playerStore.nextPlay();
-  }
-};
-
-// 处理播放错误
-const handleError = (e: Event) => {
-  console.error('音频播放出错:', e);
-  if (audioPlayer?.error) {
-    console.error('错误码:', audioPlayer.error.code);
-
-    // 如果是B站音频可能链接过期，尝试重新获取
-    if (playerStore.currentSong.source === 'bilibili' && playerStore.currentSong.bilibiliData) {
-      console.log('B站音频播放错误，可能链接过期');
-      // 这里可以添加重新获取B站音频链接的逻辑
-    }
-  }
-};
-
-// 处理播放/暂停按钮点击
-const handlePlayClick = () => {
-  if (!playerStore.currentSong.id) return;
-  playerStore.setPlayMusic(!playerStore.isPlay);
-};
-
-// 处理上一曲按钮点击
-const handlePrevClick = () => {
-  playerStore.prevPlay();
-};
-
-// 处理下一曲按钮点击
-const handleNextClick = () => {
-  playerStore.nextPlay();
-};
-
-// 处理进度条更新
-const handleProgressUpdate = (value: number) => {
-  if (!audioPlayer) return;
-  audioPlayer.currentTime = value;
-  currentTime.value = value;
-};
-
-// 切换播放模式
-const togglePlayMode = () => {
-  playerStore.togglePlayMode();
-};
-
-// 切换播放列表显示
-const togglePlayList = () => {
-  showPlayList.value = !showPlayList.value;
-  // 这里可以添加显示播放列表的逻辑
-};
-
-// 打开详情播放页
-const openDetailPlayer = () => {
-  if (!playerStore.currentSong.id) return;
-  playerStore.setMusicFull(true);
-
-  // 根据来源打开不同的详情页
-  if (playerStore.currentSong.source === 'bilibili') {
-    // 打开B站详情页
-    if (playerStore.currentSong.bilibiliData?.bvid) {
-      // 这里可以跳转到B站详情页或显示B站播放器组件
-    }
-  } else {
-    // 打开网易云音乐详情页
-    router.push({ path: '/lyric' });
-  }
-};
-
-// 格式化时间
-const formatTime = (time: number) => {
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-};
-
-// 获取艺术家名称
-const getArtistName = (song?: SongResult) => {
-  if (!song) return '';
-
-  // B站视频
-  if (song.source === 'bilibili' && song.song?.ar?.[0]) {
-    return song.song.ar[0].name || 'B站UP主';
-  }
-
-  // 网易云音乐
-  if (song.song?.artists) {
-    return song.song.artists.map((artist: any) => artist.name).join('/');
-  }
-
-  if (song.song?.ar) {
-    return song.song.ar.map((artist: any) => artist.name).join('/');
-  }
-
-  return '';
-};
-
-// 根据来源获取封面图
-const getSourcePic = (song: SongResult) => {
-  if (!song || !song.picUrl) return '';
-
-  // B站视频
-  if (song.source === 'bilibili') {
-    return song.picUrl; // B站封面已经在创建时使用getBilibiliProxyUrl处理过
-  }
-
-  // 网易云音乐
-  return getImgUrl(song.picUrl, '150y150');
-};
-</script>
-
-<style scoped lang="scss">
-.music-bar-container {
-  @apply flex items-center justify-between px-4 h-20 w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
-
-  &.playing {
-    .music-cover {
-      animation: rotate 20s linear infinite;
-    }
-  }
-}
-
-.music-bar-left {
-  @apply flex items-center;
-  width: 25%;
-
-  .music-cover {
-    @apply relative w-12 h-12 rounded-lg overflow-hidden flex items-center justify-center cursor-pointer;
-
-    .cover-image {
-      @apply w-full h-full object-cover;
-    }
-
-    &.loading {
-      animation-play-state: paused;
-    }
-  }
-
-  .music-info {
-    @apply ml-2 flex flex-col;
-    max-width: calc(100% - 56px);
-
-    .music-title {
-      @apply text-sm font-medium;
-    }
-
-    .music-artist {
-      @apply text-xs text-gray-500 dark:text-gray-400;
-    }
-  }
-}
-
-.music-bar-center {
-  @apply flex flex-col items-center;
-  width: 50%;
-
-  .player-controls {
-    @apply flex items-center justify-center gap-2 mb-2;
-
-    .control-button {
-      @apply text-lg;
-
-      &.play-button {
-        @apply text-xl;
-      }
-    }
-  }
-
-  .progress-container {
-    @apply flex items-center w-full;
-
-    .time-text {
-      @apply text-xs px-2 text-gray-500 dark:text-gray-400 whitespace-nowrap;
-    }
-
-    .progress-slider {
-      @apply flex-1;
-    }
-  }
-}
-
-.music-bar-right {
-  @apply flex items-center justify-end;
-  width: 25%;
-
-  .control-button {
-    @apply text-lg;
-  }
-}
-
-.ellipsis-text {
-  @apply whitespace-nowrap overflow-hidden text-ellipsis;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/renderer/components/common/SongItem.vue b/src/renderer/components/common/SongItem.vue
index 11ef719..b6b94aa 100644
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -140,7 +140,7 @@ const dropdownY = ref(0);
 
 const isDownloading = ref(false);
 
-const openPlaylistDrawer = inject<(songId: number) => void>('openPlaylistDrawer');
+const openPlaylistDrawer = inject<(songId: number | string) => void>('openPlaylistDrawer');
 
 const { navigateToArtist } = useArtist();
 
@@ -285,7 +285,7 @@ const downloadMusic = async () => {
   try {
     isDownloading.value = true;
 
-    const data = (await getSongUrl(props.item.id, cloneDeep(props.item), true)) as any;
+    const data = (await getSongUrl(props.item.id as number, cloneDeep(props.item), true)) as any;
     if (!data || !data.url) {
       throw new Error(t('songItem.message.getUrlFailed'));
     }
@@ -358,6 +358,7 @@ const imageLoad = async () => {
 
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
+  // 如果是当前正在播放的音乐，则切换播放/暂停状态
   if (playMusic.value.id === item.id) {
     if (play.value) {
       playerStore.setPlayMusic(false);
@@ -368,23 +369,37 @@ const playMusicEvent = async (item: SongResult) => {
     }
     return;
   }
-  await playerStore.setPlay(item);
-  playerStore.isPlay = true;
-  emits('play', item);
+
+  try {
+    // 使用store的setPlay方法，该方法已经包含了B站视频URL处理逻辑
+    const result = await playerStore.setPlay(item);
+    if (!result) {
+      throw new Error('播放失败');
+    }
+    playerStore.isPlay = true;
+    emits('play', item);
+  } catch (error) {
+    console.error('播放出错:', error);
+  }
 };
 
 // 判断是否已收藏
 const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(props.item.id);
+  // 将id转换为number，兼容B站视频ID
+  const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+  return playerStore.favoriteList.includes(numericId);
 });
 
 // 切换收藏状态
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
+  // 将id转换为number，兼容B站视频ID
+  const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+
   if (isFavorite.value) {
-    playerStore.removeFromFavorite(props.item.id);
+    playerStore.removeFromFavorite(numericId);
   } else {
-    playerStore.addToFavorite(props.item.id);
+    playerStore.addToFavorite(numericId);
   }
 };
 
diff --git a/src/renderer/hooks/MusicHook.ts b/src/renderer/hooks/MusicHook.ts
index 6e8bae7..d76c2e2 100644
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -2,6 +2,7 @@ import { createDiscreteApi } from 'naive-ui';
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 import i18n from '@/../i18n/renderer';
+import { getBilibiliAudioUrl } from '@/api/bilibili';
 import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
 import pinia, { usePlayerStore } from '@/store';
@@ -235,6 +236,29 @@ watch(
           initialPosition = savedProgress.progress;
         }
 
+        // 对于B站视频，检查URL是否有效
+        if (playMusic.value.source === 'bilibili' && (!newVal || newVal === 'undefined')) {
+          console.log('B站视频URL无效，尝试重新获取');
+
+          // 需要重新获取B站视频URL
+          if (playMusic.value.bilibiliData) {
+            try {
+              const proxyUrl = await getBilibiliAudioUrl(
+                playMusic.value.bilibiliData.bvid,
+                playMusic.value.bilibiliData.cid
+              );
+
+              // 设置URL到播放器状态
+              (playMusic.value as any).playMusicUrl = proxyUrl;
+              playerStore.playMusicUrl = proxyUrl;
+              newVal = proxyUrl;
+            } catch (error) {
+              console.error('获取B站音频URL失败:', error);
+              return;
+            }
+          }
+        }
+
         // 播放新音频，传递是否应该播放的状态
         const newSound = await audioService.play(newVal, playMusic.value, shouldPlay);
         sound.value = newSound as Howl;
diff --git a/src/renderer/hooks/MusicListHook.ts b/src/renderer/hooks/MusicListHook.ts
index 79c42a3..574a4a8 100644
--- a/src/renderer/hooks/MusicListHook.ts
+++ b/src/renderer/hooks/MusicListHook.ts
@@ -12,7 +12,7 @@ import { getImageLinearBackground } from '@/utils/linearColor';
 const musicHistory = useMusicHistory();
 
 // 获取歌曲url
-export const getSongUrl = async (id: number, songData: any, isDownloaded: boolean = false) => {
+export const getSongUrl = async (id: any, songData: any, isDownloaded: boolean = false) => {
   const { data } = await getMusicUrl(id, isDownloaded);
   let url = '';
   let songDetail = null;
@@ -247,7 +247,7 @@ export const useMusicListHook = () => {
   };
 
   // 异步加载歌词的方法
-  const loadLrcAsync = async (state: any, playMusicId: number) => {
+  const loadLrcAsync = async (state: any, playMusicId: any) => {
     if (state.playMusic.lyric && state.playMusic.lyric.lrcTimeArray.length > 0) {
       return;
     }
diff --git a/src/renderer/layout/components/MobilePlayBar.vue b/src/renderer/layout/components/MobilePlayBar.vue
index 6162626..b0c703d 100644
--- a/src/renderer/layout/components/MobilePlayBar.vue
+++ b/src/renderer/layout/components/MobilePlayBar.vue
@@ -217,15 +217,15 @@ const scrollToPlayList = (val: boolean) => {
 
 // 收藏功能
 const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id);
+  return playerStore.favoriteList.includes(playMusic.value.id as number);
 });
 
 const toggleFavorite = () => {
   console.log('isFavorite.value', isFavorite.value);
   if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id);
+    playerStore.removeFromFavorite(playMusic.value.id as number);
   } else {
-    playerStore.addToFavorite(playMusic.value.id);
+    playerStore.addToFavorite(playMusic.value.id as number);
   }
 };
 
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index 35e4573..404cc2e 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -176,6 +176,7 @@
 
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
+import { useMessage } from 'naive-ui';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -204,6 +205,7 @@ import MusicFull from './MusicFull.vue';
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
 const { t } = useI18n();
+const message = useMessage();
 // 是否播放
 const play = computed(() => playerStore.isPlay);
 // 播放列表
@@ -315,33 +317,43 @@ const MusicFullRef = ref<any>(null);
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
-    // 检查是否有有效的音乐对象和 URL
-    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playMusic.value);
+    // 检查是否有有效的音乐对象
+    if (!playMusic.value?.id) {
+      console.warn('没有有效的播放对象');
       return;
     }
 
+    // 当前处于播放状态 -> 暂停
     if (play.value) {
-      // 暂停播放
       if (audioService.getCurrentSound()) {
         audioService.pause();
         playerStore.setPlayMusic(false);
       }
-    } else {
-      // 开始播放
-      if (audioService.getCurrentSound()) {
-        // 如果已经有音频实例，直接播放
-        audioService.play();
-      } else {
-        // 如果没有音频实例，重新创建并播放
-        await audioService.play(playerStore.playMusicUrl, playMusic.value);
-      }
+      return;
+    }
+
+    // 当前处于暂停状态 -> 播放
+    // 有音频实例，直接播放
+    if (audioService.getCurrentSound()) {
+      audioService.play();
       playerStore.setPlayMusic(true);
+      return;
+    }
+
+    // 没有音频实例，重新获取并播放（包括重新获取B站视频URL）
+    try {
+      // 复用当前播放对象，但强制重新获取URL
+      const result = await playerStore.setPlay({ ...playMusic.value, playMusicUrl: undefined });
+      if (result) {
+        playerStore.setPlayMusic(true);
+      }
+    } catch (error) {
+      console.error('重新获取播放链接失败:', error);
+      message.error(t('player.playFailed'));
     }
   } catch (error) {
     console.error('播放出错:', error);
-    playerStore.nextPlay();
+    message.error(t('player.playFailed'));
   }
 };
 
@@ -366,15 +378,22 @@ const scrollToPlayList = (val: boolean) => {
 };
 
 const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id);
+  // 将id转换为number，兼容B站视频ID
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+  return playerStore.favoriteList.includes(numericId);
 });
 
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
+  // 将id转换为number，兼容B站视频ID
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+
   if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id);
+    playerStore.removeFromFavorite(numericId);
   } else {
-    playerStore.addToFavorite(playMusic.value.id);
+    playerStore.addToFavorite(numericId);
   }
 };
 
diff --git a/src/renderer/router/other.ts b/src/renderer/router/other.ts
index c526dac..b9f8498 100644
--- a/src/renderer/router/other.ts
+++ b/src/renderer/router/other.ts
@@ -42,6 +42,17 @@ const otherRouter = [
       back: true
     },
     component: () => import('@/views/artist/detail.vue')
+  },
+  {
+    path: '/bilibili/:bvid',
+    name: 'bilibiliPlayer',
+    meta: {
+      title: 'B站听书',
+      keepAlive: true,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/bilibili/BilibiliPlayer.vue')
   }
 ];
 export default otherRouter;
diff --git a/src/renderer/store/modules/player.ts b/src/renderer/store/modules/player.ts
index 65a34ce..6e61261 100644
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -2,6 +2,7 @@ import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 
+import { getBilibiliAudioUrl } from '@/api/bilibili';
 import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
@@ -24,6 +25,8 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
   }
 }
 
+// 提取公共函数：获取B站视频URL
+
 export const getSongUrl = async (
   id: string | number,
   songData: SongResult,
@@ -35,6 +38,18 @@ export const getSongUrl = async (
 
   if (songData.source === 'bilibili' && songData.bilibiliData) {
     console.log('加载B站音频URL');
+    if (!songData.playMusicUrl && songData.bilibiliData.bvid && songData.bilibiliData.cid) {
+      try {
+        songData.playMusicUrl = await getBilibiliAudioUrl(
+          songData.bilibiliData.bvid,
+          songData.bilibiliData.cid
+        );
+        return songData.playMusicUrl;
+      } catch (error) {
+        console.error('重启后获取B站音频URL失败:', error);
+        return '';
+      }
+    }
     return songData.playMusicUrl || '';
   }
 
@@ -249,6 +264,27 @@ export const usePlayerStore = defineStore('player', () => {
   const currentPlayListIndex = computed(() => playListIndex.value);
 
   const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
+    // 处理B站视频，确保URL有效
+    if (music.source === 'bilibili' && music.bilibiliData) {
+      try {
+        console.log('处理B站视频，检查URL有效性');
+        // 清除之前的URL，强制重新获取
+        music.playMusicUrl = undefined;
+
+        // 重新获取B站视频URL
+        if (music.bilibiliData.bvid && music.bilibiliData.cid) {
+          music.playMusicUrl = await getBilibiliAudioUrl(
+            music.bilibiliData.bvid,
+            music.bilibiliData.cid
+          );
+          console.log('获取B站URL成功:', music.playMusicUrl);
+        }
+      } catch (error) {
+        console.error('获取B站音频URL失败:', error);
+        throw error; // 向上抛出错误，让调用者处理
+      }
+    }
+
     const updatedPlayMusic = await getSongDetail(music);
     playMusic.value = updatedPlayMusic;
     playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
@@ -284,9 +320,15 @@ export const usePlayerStore = defineStore('player', () => {
   };
 
   const setPlay = async (song: SongResult) => {
-    await handlePlayMusic(song);
-    localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
-    localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+    try {
+      await handlePlayMusic(song);
+      localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
+      localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
+      return true;
+    } catch (error) {
+      console.error('设置播放失败:', error);
+      return false;
+    }
   };
 
   const setIsPlay = (value: boolean) => {
@@ -349,7 +391,18 @@ export const usePlayerStore = defineStore('player', () => {
     }
 
     playListIndex.value = nowPlayListIndex;
-    await handlePlayMusic(playList.value[playListIndex.value]);
+
+    // 获取下一首歌曲
+    const nextSong = playList.value[playListIndex.value];
+
+    // 如果是B站视频，确保重新获取URL
+    if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
+      // 清除之前的URL，确保重新获取
+      nextSong.playMusicUrl = undefined;
+      console.log('下一首是B站视频，已清除URL强制重新获取');
+    }
+
+    await handlePlayMusic(nextSong);
   };
 
   const prevPlay = async () => {
@@ -359,7 +412,18 @@ export const usePlayerStore = defineStore('player', () => {
     }
     const nowPlayListIndex =
       (playListIndex.value - 1 + playList.value.length) % playList.value.length;
-    await handlePlayMusic(playList.value[nowPlayListIndex]);
+
+    // 获取上一首歌曲
+    const prevSong = playList.value[nowPlayListIndex];
+
+    // 如果是B站视频，确保重新获取URL
+    if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
+      // 清除之前的URL，确保重新获取
+      prevSong.playMusicUrl = undefined;
+      console.log('上一首是B站视频，已清除URL强制重新获取');
+    }
+
+    await handlePlayMusic(prevSong);
     await fetchSongs(playList.value, playListIndex.value - 5, nowPlayListIndex);
   };
 
@@ -392,8 +456,17 @@ export const usePlayerStore = defineStore('player', () => {
 
     if (savedPlayMusic && Object.keys(savedPlayMusic).length > 0) {
       try {
+        console.log('恢复上次播放的音乐:', savedPlayMusic.name);
         console.log('settingStore.setData', settingStore.setData);
         const isPlaying = settingStore.setData.autoPlay;
+
+        // 如果是B站视频，确保播放URL能够在重启后正确恢复
+        if (savedPlayMusic.source === 'bilibili' && savedPlayMusic.bilibiliData) {
+          console.log('恢复B站视频播放', savedPlayMusic.bilibiliData);
+          // 清除之前可能存在的播放URL，确保重新获取
+          savedPlayMusic.playMusicUrl = undefined;
+        }
+
         await handlePlayMusic({ ...savedPlayMusic, playMusicUrl: undefined }, isPlaying);
 
         if (savedProgress) {
diff --git a/src/renderer/type/music.ts b/src/renderer/type/music.ts
index 3962e15..0d277e9 100644
--- a/src/renderer/type/music.ts
+++ b/src/renderer/type/music.ts
@@ -23,6 +23,9 @@ export interface SongResult {
   canDislike?: boolean;
   program?: any;
   alg?: string;
+  ar: Artist[];
+  al: Album;
+  count: number;
   playMusicUrl?: string;
   playLoading?: boolean;
   lyric?: ILyric;
diff --git a/src/renderer/types/bilibili.ts b/src/renderer/types/bilibili.ts
index 93ebbf8..00769fe 100644
--- a/src/renderer/types/bilibili.ts
+++ b/src/renderer/types/bilibili.ts
@@ -6,6 +6,9 @@ export interface IBilibiliSearchResult {
   duration: number | string;
   pubdate: number;
   ctime: number;
+  author: string;
+  view: number;
+  danmaku: number;
   owner: {
     mid: number;
     name: string;
diff --git a/src/renderer/components/BilibiliPlayer.vue b/src/renderer/views/bilibili/BilibiliPlayer.vue
similarity index 54%
rename from src/renderer/components/BilibiliPlayer.vue
rename to src/renderer/views/bilibili/BilibiliPlayer.vue
index 42aef33..5dcd7ea 100644
--- a/src/renderer/components/BilibiliPlayer.vue
+++ b/src/renderer/views/bilibili/BilibiliPlayer.vue
@@ -1,150 +1,174 @@
 <template>
-  <n-drawer
-    v-model:show="showModal"
-    class="bilibili-player-modal"
-    :mask-closable="true"
-    :auto-focus="false"
-    :to="`#layout-main`"
-    preset="card"
-    height="80%"
-    placement="bottom"
-  >
-    <div class="bilibili-player-wrapper">
-      <div class="bilibili-player-header">
-        <div class="title">{{ videoDetail?.title || '加载中...' }}</div>
-        <div class="actions">
-          <n-button quaternary circle @click="closePlayer">
-            <template #icon>
-              <i class="ri-close-line"></i>
-            </template>
-          </n-button>
+  <div class="bilibili-player-page">
+    <n-scrollbar class="content-scrollbar">
+      <div class="content-wrapper">
+        <div v-if="isLoading" class="loading-wrapper">
+          <n-spin size="large" />
+          <p>听书加载中...</p>
         </div>
-      </div>
 
-      <div v-if="isLoading" class="loading-wrapper">
-        <n-spin size="large" />
-        <p>听书加载中...</p>
-      </div>
+        <div v-else-if="errorMessage" class="error-wrapper">
+          <i class="ri-error-warning-line text-4xl text-red-500"></i>
+          <p>{{ errorMessage }}</p>
+          <n-button type="primary" @click="loadVideoSource">重试</n-button>
+        </div>
 
-      <div v-else-if="errorMessage" class="error-wrapper">
-        <i class="ri-error-warning-line text-4xl text-red-500"></i>
-        <p>{{ errorMessage }}</p>
-        <n-button type="primary" @click="loadVideoSource">重试</n-button>
-      </div>
+        <div v-else-if="videoDetail" class="bilibili-info-wrapper" :class="mainContentAnimation">
+          <div class="bilibili-cover">
+            <n-image
+              :src="getBilibiliProxyUrl(videoDetail.pic)"
+              class="cover-image"
+              preview-disabled
+            />
+            <!-- 悬浮的播放按钮 -->
+            <div class="play-overlay">
+              <div class="play-icon-bg" @click="playCurrentAudio">
+                <i class="ri-play-fill"></i>
+              </div>
+              <!-- 固定在右下角的大型播放按钮 -->
+              <n-button
+                type="primary"
+                size="large"
+                class="corner-play-button"
+                :loading="partLoading"
+                @click="playCurrentAudio"
+              >
+                <template #icon>
+                  <i class="ri-play-fill"></i>
+                </template>
+                立即播放
+              </n-button>
+            </div>
+          </div>
 
-      <div v-else-if="videoDetail" class="bilibili-info-wrapper">
-        <div class="bilibili-cover">
-          <n-image
-            :src="getBilibiliProxyUrl(videoDetail.pic)"
-            class="cover-image"
-            preview-disabled
-          />
-          <div class="play-button" @click="playCurrentAudio">
-            <i class="ri-play-fill text-4xl"></i>
+          <div class="video-info">
+            <div class="title">{{ videoDetail?.title || '加载中...' }}</div>
+
+            <div class="author">
+              <i class="ri-user-line mr-1"></i>
+              <span>{{ videoDetail.owner?.name }}</span>
+            </div>
+            <div class="stats">
+              <span
+                ><i class="ri-play-line mr-1"></i>{{ formatNumber(videoDetail.stat?.view) }}</span
+              >
+              <span
+                ><i class="ri-chat-1-line mr-1"></i
+                >{{ formatNumber(videoDetail.stat?.danmaku) }}</span
+              >
+              <span
+                ><i class="ri-thumb-up-line mr-1"></i
+                >{{ formatNumber(videoDetail.stat?.like) }}</span
+              >
+            </div>
+            <div class="description">
+              <p>{{ videoDetail.desc }}</p>
+            </div>
+            <div class="duration">
+              <p>总时长: {{ formatTotalDuration(videoDetail.duration) }}</p>
+            </div>
           </div>
         </div>
 
-        <div class="video-info">
-          <div class="author">
-            <i class="ri-user-line mr-1"></i>
-            <span>{{ videoDetail.owner?.name }}</span>
+        <div
+          v-if="videoDetail?.pages && videoDetail.pages.length > 1"
+          class="video-parts"
+          :class="partsListAnimation"
+        >
+          <div class="parts-title">
+            分P列表 (共{{ videoDetail.pages.length }}集)
+            <n-spin v-if="partLoading" size="small" class="ml-2" />
           </div>
-          <div class="stats">
-            <span><i class="ri-play-line mr-1"></i>{{ formatNumber(videoDetail.stat?.view) }}</span>
-            <span
-              ><i class="ri-chat-1-line mr-1"></i
-              >{{ formatNumber(videoDetail.stat?.danmaku) }}</span
+          <div class="parts-list">
+            <n-button
+              v-for="page in videoDetail.pages"
+              :key="page.cid"
+              :type="isCurrentPlayingPage(page) ? 'primary' : 'default'"
+              :disabled="partLoading"
+              size="small"
+              class="part-item"
+              @click="switchPage(page)"
             >
-            <span
-              ><i class="ri-thumb-up-line mr-1"></i>{{ formatNumber(videoDetail.stat?.like) }}</span
-            >
-          </div>
-          <div class="description">
-            <p>{{ videoDetail.desc }}</p>
-          </div>
-          <div class="duration">
-            <p>总时长: {{ formatTotalDuration(videoDetail.duration) }}</p>
+              {{ page.part }}
+            </n-button>
           </div>
         </div>
-      </div>
 
-      <div v-if="videoDetail?.pages && videoDetail.pages.length > 1" class="video-parts">
-        <div class="parts-title">分P列表 (共{{ videoDetail.pages.length }}集)</div>
-        <div class="parts-list">
-          <n-button
-            v-for="page in videoDetail.pages"
-            :key="page.cid"
-            :type="currentPage?.cid === page.cid ? 'primary' : 'default'"
-            size="small"
-            class="part-item"
-            @click="switchPage(page)"
-          >
-            {{ page.part }}
-          </n-button>
-        </div>
+        <!-- 底部留白 -->
+        <div class="pb-20"></div>
       </div>
-    </div>
-  </n-drawer>
+    </n-scrollbar>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getBilibiliPlayUrl, getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
 import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
 import type { IBilibiliPage, IBilibiliVideoDetail } from '@/types/bilibili';
+import { setAnimationClass } from '@/utils';
 
-const props = defineProps<{
-  show: boolean;
-  bvid?: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:show', value: boolean): void;
-  (e: 'close'): void;
-}>();
+defineOptions({
+  name: 'BilibiliPlayer'
+});
 
+// 使用路由获取参数
+const route = useRoute();
+const router = useRouter();
+const message = useMessage();
 const playerStore = usePlayerStore();
-const isLoading = ref(true);
+
+// 从路由参数获取bvid
+const bvid = computed(() => route.params.bvid as string);
+
+const isLoading = ref(true); // 初始加载状态
+const partLoading = ref(false); // 分P加载状态，仅影响分P选择
 const errorMessage = ref('');
 const videoDetail = ref<IBilibiliVideoDetail | null>(null);
 const currentPage = ref<IBilibiliPage | null>(null);
 const audioList = ref<SongResult[]>([]);
 
-const showModal = computed({
-  get: () => props.show,
-  set: (value) => {
-    emit('update:show', value);
-    if (!value) {
-      emit('close');
-    }
+// 只在初始加载时应用动画
+const initialLoadDone = ref(false);
+const mainContentAnimation = computed(() => {
+  if (!initialLoadDone.value) {
+    return setAnimationClass('animate__fadeInDown');
   }
+  return '';
 });
 
+const partsListAnimation = computed(() => {
+  if (!initialLoadDone.value) {
+    return setAnimationClass('animate__fadeInUp');
+  }
+  return '';
+});
+
+// 监听bvid变化
 watch(
-  () => props.bvid,
+  () => bvid.value,
   async (newBvid) => {
     if (newBvid) {
+      // 新的视频ID，重置初始加载状态
+      initialLoadDone.value = false;
       await loadVideoDetail(newBvid);
     }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.show,
-  (newValue) => {
-    console.log('Modal show changed:', newValue);
-    if (newValue && props.bvid && !videoDetail.value) {
-      loadVideoDetail(props.bvid);
-    }
   }
 );
 
-const closePlayer = () => {
-  showModal.value = false;
-};
+// 组件挂载时加载数据
+onMounted(async () => {
+  if (bvid.value) {
+    await loadVideoDetail(bvid.value);
+  } else {
+    message.error('视频ID无效');
+    router.back();
+  }
+});
 
 const loadVideoDetail = async (bvid: string) => {
   if (!bvid) return;
@@ -176,12 +200,14 @@ const loadVideoDetail = async (bvid: string) => {
     errorMessage.value = '获取视频详情失败';
   } finally {
     isLoading.value = false;
+    // 标记初始加载完成
+    initialLoadDone.value = true;
   }
 };
 
 const loadVideoSource = async () => {
-  if (!props.bvid || !currentPage.value?.cid) {
-    console.error('缺少必要参数:', { bvid: props.bvid, cid: currentPage.value?.cid });
+  if (!bvid.value || !currentPage.value?.cid) {
+    console.error('缺少必要参数:', { bvid: bvid.value, cid: currentPage.value?.cid });
     return;
   }
 
@@ -189,7 +215,7 @@ const loadVideoSource = async () => {
   errorMessage.value = '';
 
   try {
-    console.log('加载音频源:', props.bvid, currentPage.value.cid);
+    console.log('加载音频源:', bvid.value, currentPage.value.cid);
 
     // 将当前视频转换为音频格式加入播放列表
     const tempAudio = createSongFromBilibiliVideo(); // 创建一个临时对象，还没有URL
@@ -228,7 +254,7 @@ const loadVideoSource = async () => {
             }
           } as any,
           bilibiliData: {
-            bvid: props.bvid,
+            bvid: bvid.value,
             cid: page.cid
           }
         } as SongResult;
@@ -283,18 +309,22 @@ const createSongFromBilibiliVideo = (): SongResult => {
       }
     } as any,
     bilibiliData: {
-      bvid: props.bvid,
+      bvid: bvid.value,
       cid: currentPage.value.cid
     }
   } as SongResult;
 };
 
-const loadSongUrl = async (page: IBilibiliPage, songItem: SongResult) => {
-  if (songItem.playMusicUrl) return songItem; // 如果已有URL则直接返回
+const loadSongUrl = async (
+  page: IBilibiliPage,
+  songItem: SongResult,
+  forceRefresh: boolean = false
+) => {
+  if (songItem.playMusicUrl && !forceRefresh) return songItem; // 如果已有URL且不强制刷新则直接返回
 
   try {
     console.log(`加载分P音频URL: ${page.part}, cid: ${page.cid}`);
-    const res = await getBilibiliPlayUrl(props.bvid!, page.cid);
+    const res = await getBilibiliPlayUrl(bvid.value, page.cid);
     const playUrlData = res.data;
     let url = '';
 
@@ -319,23 +349,32 @@ const loadSongUrl = async (page: IBilibiliPage, songItem: SongResult) => {
 };
 
 const switchPage = async (page: IBilibiliPage) => {
+  if (partLoading.value || currentPage.value?.cid === page.cid) return;
+
   console.log('切换到分P:', page.part);
+  // 立即更新UI选中状态
   currentPage.value = page;
 
   // 查找对应的音频项
   const audioItem = audioList.value.find((item) => item.bilibiliData?.cid === page.cid);
 
-  if (audioItem && !audioItem.playMusicUrl) {
-    // 如果该分P没有音频URL，则先加载
+  if (audioItem) {
+    // 设置局部加载状态
     try {
-      isLoading.value = true;
-      await loadSongUrl(page, audioItem);
+      partLoading.value = true;
+      // 每次切换分P都强制重新加载音频URL，以解决之前的URL可能失效的问题
+      await loadSongUrl(page, audioItem, true);
+      // 切换后自动播放
+      playCurrentAudio();
     } catch (error) {
       console.error('切换分P时加载音频URL失败:', error);
-      errorMessage.value = '获取音频地址失败，请重试';
+      message.error('获取音频地址失败，请重试');
     } finally {
-      isLoading.value = false;
+      partLoading.value = false;
     }
+  } else {
+    console.error('未找到对应的音频项');
+    message.error('未找到对应的音频，请重试');
   }
 };
 
@@ -361,14 +400,12 @@ const playCurrentAudio = async () => {
   console.log('准备播放当前选中的分P:', currentAudio.name);
 
   try {
-    // 加载当前分P的音频URL（如果需要）
-    if (!currentAudio.playMusicUrl) {
-      isLoading.value = true;
-      await loadSongUrl(currentPage.value!, currentAudio);
+    // 每次播放前都强制重新加载当前分P的音频URL（解决可能的URL失效问题）
+    partLoading.value = true;
+    await loadSongUrl(currentPage.value!, currentAudio, true);
 
-      if (!currentAudio.playMusicUrl) {
-        throw new Error('获取音频URL失败');
-      }
+    if (!currentAudio.playMusicUrl) {
+      throw new Error('获取音频URL失败');
     }
 
     // 预加载下一个分P的音频URL（如果有）
@@ -377,7 +414,7 @@ const playCurrentAudio = async () => {
       const nextAudio = audioList.value[nextIndex];
       const nextPage = videoDetail.value!.pages.find((p) => p.cid === nextAudio.bilibiliData?.cid);
 
-      if (nextPage && !nextAudio.playMusicUrl) {
+      if (nextPage) {
         console.log('预加载下一个分P:', nextPage.part);
         loadSongUrl(nextPage, nextAudio).catch((e) => console.warn('预加载下一个分P失败:', e));
       }
@@ -390,13 +427,13 @@ const playCurrentAudio = async () => {
     console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
     playerStore.setPlayMusic(currentAudio);
 
-    // 关闭模态框
-    closePlayer();
+    // 播放后通知用户已开始播放
+    message.success('已开始播放');
   } catch (error) {
     console.error('播放音频失败:', error);
     errorMessage.value = error instanceof Error ? error.message : '播放失败，请重试';
   } finally {
-    isLoading.value = false;
+    partLoading.value = false;
   }
 };
 
@@ -423,27 +460,61 @@ const formatNumber = (num?: number) => {
   }
   return num.toString();
 };
+
+// 判断是否是当前正在播放的分P
+const isCurrentPlayingPage = (page: IBilibiliPage) => {
+  // 只根据播放器状态判断，不再使用UI选中状态
+  const currentPlayingMusic = playerStore.playMusic as any;
+  if (
+    currentPlayingMusic &&
+    typeof currentPlayingMusic === 'object' &&
+    currentPlayingMusic.bilibiliData
+  ) {
+    // 比较当前播放的音频的cid与此分P的cid
+    return (
+      currentPlayingMusic.bilibiliData.cid === page.cid &&
+      currentPlayingMusic.bilibiliData.bvid === bvid.value
+    );
+  }
+
+  // 如果没有正在播放的音乐，则使用UI选择状态
+  return currentPage.value?.cid === page.cid;
+};
+
+// 监听播放器状态变化，保持分P列表选中状态同步
+watch(
+  () => playerStore.playMusic,
+  (newMusic: any) => {
+    if (
+      newMusic &&
+      typeof newMusic === 'object' &&
+      newMusic.bilibiliData &&
+      newMusic.bilibiliData.bvid === bvid.value
+    ) {
+      // 查找对应的分P
+      const playingPage = videoDetail.value?.pages?.find(
+        (p) => p.cid === newMusic.bilibiliData.cid
+      );
+
+      // 无条件更新UI状态以确保UI状态与播放状态一致
+      if (playingPage) {
+        currentPage.value = playingPage;
+      }
+    }
+  }
+);
 </script>
 
 <style scoped lang="scss">
-.bilibili-player-modal {
-  width: 90vw;
-  max-width: 1000px;
-}
+.bilibili-player-page {
+  @apply h-full flex flex-col;
 
-.bilibili-player-wrapper {
-  @apply flex flex-col p-8 pt-4;
-}
-
-.bilibili-player-header {
-  @apply flex justify-between items-center mb-4;
-
-  .title {
-    @apply text-lg font-medium truncate;
+  .content-scrollbar {
+    @apply flex-1 overflow-hidden;
   }
 
-  .actions {
-    @apply flex items-center;
+  .content-wrapper {
+    @apply flex flex-col p-4;
   }
 }
 
@@ -457,8 +528,28 @@ const formatNumber = (num?: number) => {
       @apply w-full h-full object-cover;
     }
 
-    .play-button {
-      @apply absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 hover:opacity-100 transition-opacity cursor-pointer;
+    .play-overlay {
+      @apply absolute inset-0;
+
+      .play-icon-bg {
+        @apply absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 hover:opacity-100 transition-opacity cursor-pointer;
+
+        i {
+          @apply text-4xl;
+        }
+      }
+
+      .corner-play-button {
+        @apply absolute right-3 bottom-3 shadow-lg flex items-center gap-1 px-4 py-1 text-sm transition-all duration-200;
+
+        &:hover {
+          @apply transform scale-110;
+        }
+
+        i {
+          @apply text-xl;
+        }
+      }
     }
   }
 }
@@ -482,6 +573,10 @@ const formatNumber = (num?: number) => {
 .video-info {
   @apply flex-1 p-4 rounded-lg bg-gray-100 dark:bg-gray-800;
 
+  .title {
+    @apply text-lg font-medium mb-4 text-gray-900 dark:text-white;
+  }
+
   .author {
     @apply flex items-center text-sm mb-2;
   }
@@ -505,11 +600,11 @@ const formatNumber = (num?: number) => {
   @apply mt-4;
 
   .parts-title {
-    @apply text-sm font-medium mb-2;
+    @apply text-sm font-medium mb-2 flex items-center;
   }
 
   .parts-list {
-    @apply flex flex-wrap gap-2 max-h-60 overflow-y-auto pb-20;
+    @apply flex flex-wrap gap-2 max-h-60 overflow-y-auto pb-4;
 
     .part-item {
       @apply text-xs mb-2;
diff --git a/src/renderer/views/favorite/index.vue b/src/renderer/views/favorite/index.vue
index 370f32e..79dd3ea 100644
--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -63,7 +63,7 @@
             :class="setAnimationClass('animate__bounceInLeft')"
             :style="getItemAnimationDelay(index)"
             :selectable="isSelecting"
-            :selected="selectedSongs.includes(song.id)"
+            :selected="selectedSongs.includes(song.id as number)"
             @play="handlePlay"
             @select="handleSelect"
           />
@@ -319,7 +319,7 @@ const isIndeterminate = computed(() => {
 // 处理全选/取消全选
 const handleSelectAll = (checked: boolean) => {
   if (checked) {
-    selectedSongs.value = favoriteSongs.value.map((song) => song.id);
+    selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
   } else {
     selectedSongs.value = [];
   }
diff --git a/src/renderer/views/history/index.vue b/src/renderer/views/history/index.vue
index 43e4880..e731905 100644
--- a/src/renderer/views/history/index.vue
+++ b/src/renderer/views/history/index.vue
@@ -71,7 +71,7 @@ const getHistorySongs = async () => {
     const endIndex = startIndex + pageSize;
     const currentPageItems = musicList.value.slice(startIndex, endIndex);
 
-    const currentIds = currentPageItems.map((item) => item.id);
+    const currentIds = currentPageItems.map((item) => item.id as number);
     const res = await getMusicDetail(currentIds);
 
     if (res.data.songs) {
diff --git a/src/renderer/views/search/index.vue b/src/renderer/views/search/index.vue
index 38cd402..e4929c9 100644
--- a/src/renderer/views/search/index.vue
+++ b/src/renderer/views/search/index.vue
@@ -118,8 +118,6 @@
         </template>
       </div>
     </n-layout>
-    <!-- 添加B站视频播放器组件 -->
-    <bilibili-player v-model:show="showBilibiliPlayer" :bvid="currentBvid" />
   </div>
 </template>
 
@@ -127,12 +125,11 @@
 import { useDateFormat } from '@vueuse/core';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getBilibiliProxyUrl, searchBilibili } from '@/api/bilibili';
 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
-import BilibiliPlayer from '@/components/BilibiliPlayer.vue';
 import BilibiliItem from '@/components/common/BilibiliItem.vue';
 import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
@@ -149,6 +146,7 @@ defineOptions({
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const playerStore = usePlayerStore();
 const searchStore = useSearchStore();
 
@@ -216,10 +214,6 @@ onMounted(() => {
 
 const hotKeyword = ref(route.query.keyword || t('search.title.searchList'));
 
-// 显示B站视频播放器
-const showBilibiliPlayer = ref(false);
-const currentBvid = ref('');
-
 const loadSearch = async (keywords: any, type: any = null, isLoadMore = false) => {
   if (!keywords) return;
 
@@ -421,8 +415,8 @@ const handleSearchHistory = (item: { keyword: string; type: number }) => {
 
 // 处理B站视频播放
 const handlePlayBilibili = (item: IBilibiliSearchResult) => {
-  currentBvid.value = item.bvid;
-  showBilibiliPlayer.value = true;
+  // 使用路由导航到B站播放页面
+  router.push(`/bilibili/${item.bvid}`);
 };
 </script>
 

From ee6e9d43fd2a5491a9dda98cc8dfde848cf5449f Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 30 Mar 2025 12:40:39 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=9F=B3=E9=A2=91URL=E8=BF=87=E6=9C=9F=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=EF=BC=8C=E8=87=AA=E5=8A=A8=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96B=E7=AB=99=E5=92=8C=E7=BD=91=E6=98=93?=
 =?UTF-8?q?=E4=BA=91=E9=9F=B3=E4=B9=90=E9=9F=B3=E9=A2=91URL=E5=B9=B6?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/hooks/MusicHook.ts       | 94 +++++++++++++++++++++++++++
 src/renderer/services/audioService.ts |  4 ++
 2 files changed, 98 insertions(+)

diff --git a/src/renderer/hooks/MusicHook.ts b/src/renderer/hooks/MusicHook.ts
index d76c2e2..952f8ab 100644
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -866,3 +866,97 @@ export const initAudioListeners = async () => {
     console.error('初始化音频监听器失败:', error);
   }
 };
+
+// 监听URL过期事件，自动重新获取URL并恢复播放
+audioService.on('url_expired', async (expiredTrack) => {
+  if (!expiredTrack) return;
+
+  console.log('检测到URL过期事件，准备重新获取URL', expiredTrack.name);
+
+  try {
+    const currentPosition = nowTime.value; // 保存当前播放进度
+    console.log('保存当前播放进度:', currentPosition);
+
+    // 处理B站视频
+    if (expiredTrack.source === 'bilibili' && expiredTrack.bilibiliData) {
+      console.log('重新获取B站视频URL');
+      try {
+        // 使用API中的函数获取B站音频URL
+        const newUrl = await getBilibiliAudioUrl(
+          expiredTrack.bilibiliData.bvid,
+          expiredTrack.bilibiliData.cid
+        );
+
+        console.log('成功获取新的B站URL:', newUrl);
+
+        // 更新存储
+        (expiredTrack as any).playMusicUrl = newUrl;
+        playerStore.playMusicUrl = newUrl;
+
+        // 重新播放并设置进度
+        const newSound = await audioService.play(newUrl, expiredTrack);
+        sound.value = newSound as Howl;
+
+        // 恢复播放进度
+        if (currentPosition > 0) {
+          newSound.seek(currentPosition);
+          nowTime.value = currentPosition;
+          console.log('恢复播放进度:', currentPosition);
+        }
+
+        // 如果之前是播放状态，继续播放
+        if (playerStore.play) {
+          newSound.play();
+          playerStore.setIsPlay(true);
+        }
+
+        message.success('已自动恢复播放');
+      } catch (error) {
+        console.error('重新获取B站URL失败:', error);
+        message.error('重新获取音频地址失败，请手动点击播放');
+      }
+    } else if (expiredTrack.source === 'netease') {
+      // 处理网易云音乐，重新获取URL
+      console.log('重新获取网易云音乐URL');
+      try {
+        const { getSongUrl } = await import('@/store/modules/player');
+        const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);
+
+        if (newUrl) {
+          console.log('成功获取新的网易云URL:', newUrl);
+
+          // 更新存储
+          (expiredTrack as any).playMusicUrl = newUrl;
+          playerStore.playMusicUrl = newUrl;
+
+          // 重新播放并设置进度
+          const newSound = await audioService.play(newUrl, expiredTrack);
+          sound.value = newSound as Howl;
+
+          // 恢复播放进度
+          if (currentPosition > 0) {
+            newSound.seek(currentPosition);
+            nowTime.value = currentPosition;
+            console.log('恢复播放进度:', currentPosition);
+          }
+
+          // 如果之前是播放状态，继续播放
+          if (playerStore.play) {
+            newSound.play();
+            playerStore.setIsPlay(true);
+          }
+
+          message.success('已自动恢复播放');
+        } else {
+          throw new Error('获取URL失败');
+        }
+      } catch (error) {
+        console.error('重新获取网易云URL失败:', error);
+        message.error('重新获取音频地址失败，请手动点击播放');
+      }
+    }
+  } catch (error) {
+    console.error('处理URL过期事件失败:', error);
+    message.error('恢复播放失败，请手动点击播放');
+  }
+});
diff --git a/src/renderer/services/audioService.ts b/src/renderer/services/audioService.ts
index ceb8684..45aaa77 100644
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -422,6 +422,8 @@ class AudioService {
                 console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
                 setTimeout(tryPlay, 1000 * retryCount);
               } else {
+                // 发送URL过期事件，通知外部需要重新获取URL
+                this.emit('url_expired', this.currentTrack);
                 reject(new Error('音频加载失败，请尝试切换其他歌曲'));
               }
             },
@@ -432,6 +434,8 @@ class AudioService {
                 console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
                 setTimeout(tryPlay, 1000 * retryCount);
               } else {
+                // 发送URL过期事件，通知外部需要重新获取URL
+                this.emit('url_expired', this.currentTrack);
                 reject(new Error('音频播放失败，请尝试切换其他歌曲'));
               }
             },

From 9ce872eebed89060c3ab33a6a1ee36f0d9651439 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 30 Mar 2025 12:56:42 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E6=9D=A1=E6=BB=91=E5=9D=97=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=BB=91=E5=9D=97?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/index.css                     |  2 +-
 src/renderer/layout/components/PlayBar.vue | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/renderer/index.css b/src/renderer/index.css
index 34a3616..0555b7e 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -11,7 +11,7 @@
 }
 
 .n-slider-handle-indicator--top {
-  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 dark:text-[#ffffffdd] text-[#000000dd]  !important;
+  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 text-white bg-dark-300 dark:bg-gray-800 bg-opacity-80 rounded-lg  !important;
   mix-blend-mode: difference !important;
 }
 
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index 404cc2e..25bdc0b 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -25,6 +25,9 @@
         :max="allTime"
         :min="0"
         :format-tooltip="formatTooltip"
+        :show-tooltip="showSliderTooltip"
+        @mouseenter="showSliderTooltip = true"
+        @mouseleave="showSliderTooltip = false"
       ></n-slider>
     </div>
     <div class="play-bar-img-wrapper" @click="setMusicFull">
@@ -313,6 +316,7 @@ function handlePrev() {
 }
 
 const MusicFullRef = ref<any>(null);
+const showSliderTooltip = ref(false);
 
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
@@ -657,8 +661,16 @@ const isEQVisible = ref(false);
       opacity: 0;
     }
 
-    &:hover .n-slider-handle {
-      opacity: 1;
+    &:hover {
+      .n-slider-handle {
+        opacity: 1;
+      }
+    }
+
+    // 确保悬停时提示样式正确
+    .n-slider-tooltip {
+      @apply bg-gray-800 text-white text-xs py-1 px-2 rounded;
+      z-index: 999999;
     }
   }
 }