Merge pull request #375 from techotaku39/feature/extension-show-title-instead-of-url

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

BillNote_extension/src/background/main.ts

@@ -56,7 +56,7 @@ async function upsertTask(record: TaskRecord) {
 
 // ---------- 启动任务 ----------
 
-async function startTask(url: string): Promise<{ ok: boolean, taskId?: string, error?: string }> {
+async function startTask(url: string, title?: string): Promise<{ ok: boolean, taskId?: string, error?: string }> {
   const platform = detectPlatform(url)
   if (!platform)
     return { ok: false, error: '当前链接不是支持的视频平台' }
@@ -107,6 +107,7 @@ async function startTask(url: string): Promise<{ ok: boolean, taskId?: string, e
       message: '已提交',
       createdAt: Date.now(),
       updatedAt: Date.now(),
+      title,
     })
     return { ok: true, taskId: body.data.task_id }
   }
@@ -129,8 +130,8 @@ async function openSidePanelInTab(tabId?: number) {
 
 // ---------- 消息桥 ----------
 
-onMessage<{ url: string }, 'bilinote-start'>('bilinote-start', async ({ data, sender }) => {
+onMessage<{ url: string; title?: string }, 'bilinote-start'>('bilinote-start', async ({ data, sender }) => {
-  const result = await startTask(data.url)
+  const result = await startTask(data.url, data.title)
   // 成功就把侧边栏拉起来给用户看进度
   if (result.ok)
     await openSidePanelInTab(sender?.tabId)
@@ -168,7 +169,7 @@ browser.contextMenus?.onClicked.addListener(async (info, tab) => {
   const url = info.linkUrl || tab?.url
   if (!url)
     return
-  const result = await startTask(url)
+  const result = await startTask(url, tab?.title)
   if (result.ok)
     await openSidePanelInTab(tab?.id)
   else

BillNote_extension/src/contentScripts/views/App.vue

@@ -19,6 +19,7 @@ async function trigger() {
     const res = await sendMessage('bilinote-start', {
       url: window.location.href,
       platform,
+      title: document.title,
     }, 'background')
     const ok = res && (res as any).ok
     toast.value = ok

BillNote_extension/src/logic/types.ts

@@ -79,6 +79,8 @@ export interface TaskRecord {
   createdAt: number
   updatedAt: number
   result?: NoteResult
+  // 从浏览器 tab.title 抓取，任务完成前用来替代 videoUrl 显示
+  title?: string
 }
 
 // 与 backend/app/gpt/prompt_builder.py note_styles 一一对齐

BillNote_extension/src/popup/Popup.vue

@@ -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">
+          <span class="truncate flex-1" :title="t.title || t.videoUrl">
-            {{ (t.result?.audio_meta as { title?: string } | undefined)?.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>

BillNote_extension/src/sidepanel/Sidepanel.vue

@@ -41,6 +41,7 @@ async function poll(taskId: string) {
         message: res.message,
         result: res.result ?? cur.result,
         updatedAt: Date.now(),
+        title: cur.title,
       })
     }
     if (res.status !== 'SUCCESS' && res.status !== 'FAILED')
@@ -89,7 +90,10 @@ function downloadMarkdown() {
 }
 
 const activeTitle = computed(() =>
-  (activeTask.value?.result?.audio_meta as { title?: string } | undefined)?.title || activeTask.value?.videoUrl || '')
+  (activeTask.value?.result?.audio_meta as { title?: string } | undefined)?.title
+  || activeTask.value?.title
+  || activeTask.value?.videoUrl
+  || '')
 
 const activeCover = computed(() =>
   (activeTask.value?.result?.audio_meta as { cover_url?: string } | undefined)?.cover_url)
@@ -140,8 +144,8 @@ onUnmounted(() => {
           :class="{ 'bg-white border': t.taskId === activeTaskId }"
           @click="selectTask(t.taskId)"
         >
-          <span class="truncate flex-1" :title="t.videoUrl">
+          <span class="truncate flex-1" :title="t.title || t.videoUrl">
-            {{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.videoUrl }}
+            {{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.title || t.videoUrl }}
           </span>
           <span class="text-gray-400 shrink-0">{{ STAGE_LABELS[t.status] || t.status }}</span>
         </li>
@@ -170,7 +174,7 @@ onUnmounted(() => {
           class="text-sm font-medium leading-tight line-clamp-1 break-all flex-1 min-w-0 hover:text-blue-600"
           :href="activeTask.videoUrl"
           target="_blank"
-          :title="activeTask.videoUrl"
+          :title="activeTitle || activeTask.videoUrl"
         >{{ activeTitle }}</a>
         <span
           v-if="isDone"