feat(extension): 侧边栏与 popup 用视频标题替代链接显示

在任务未完成的早期阶段(PENDING/DOWNLOADING 等),侧边栏和 popup
只能回退到 videoUrl,用户看到的是一长串链接,难以辨认。

改动:
- TaskRecord 新增 title 字段,用于存储浏览器标签页标题
- popup 创建任务时保存 tab.title
- background startTask 接收可选 title,右键菜单和悬浮按钮均传入
- 显示优先级:result.audio_meta.title > title > videoUrl
- 所有平台(Bilibili / YouTube / Douyin / Kuaishou)均受益

测试:
- pnpm typecheck 通过
- pnpm build 通过
- 在 B 站、YouTube 视频页提交任务,侧边栏和 popup 均显示标题而非链接
This commit is contained in:
techotaku39
2026-05-24 00:06:21 +08:00
parent 717df2af7b
commit 1eb213e215
5 changed files with 24 additions and 11 deletions
+8 -3
View File
@@ -43,6 +43,7 @@ async function poll(taskId: string) {
createdAt: activeTask.value?.createdAt ?? Date.now(),
updatedAt: Date.now(),
result: res.result ?? activeTask.value?.result,
title: activeTask.value?.title,
})
if (res.status !== 'SUCCESS' && res.status !== 'FAILED')
pollTimer = setTimeout(() => poll(taskId), 3000)
@@ -94,6 +95,7 @@ async function start() {
message: '已提交',
createdAt: Date.now(),
updatedAt: Date.now(),
title: tabTitle.value || undefined,
})
poll(task_id)
// 提交后顺手把侧边栏拉起来,免得用户来回切窗口
@@ -142,7 +144,10 @@ function selectTask(id: string) {
}
const activeCover = computed(() => activeTask.value?.result?.audio_meta?.cover_url as string | undefined)
const activeTitle = computed(() => (activeTask.value?.result?.audio_meta?.title as string | undefined) || tabTitle.value)
const activeTitle = computed(() =>
(activeTask.value?.result?.audio_meta?.title as string | undefined)
|| activeTask.value?.title
|| tabTitle.value)
function fmtTime(ts?: number) {
if (!ts)
@@ -331,8 +336,8 @@ onUnmounted(() => {
:class="{ 'bg-blue-50': t.taskId === activeTaskId }"
@click="selectTask(t.taskId)"
>
<span class="truncate flex-1" :title="t.videoUrl">
{{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.videoUrl }}
<span class="truncate flex-1" :title="t.title || t.videoUrl">
{{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.title || t.videoUrl }}
</span>
<span class="text-gray-500 shrink-0">{{ t.status }}</span>
</li>