fix(extension): improve title display and mindmap export

BillNote_extension/src/background/main.ts

@@ -3,6 +3,7 @@ import type { Settings, TaskRecord } from '~/logic/types'
 import { DEFAULT_SETTINGS, MAX_TASKS, SETTINGS_KEY, TASKS_KEY } from '~/logic/constants'
 import { detectPlatform } from '~/logic/platform'
 import { fetchBilibiliSubtitle } from '~/logic/bilibili-subtitle'
+import { normalizeVideoTitle } from '~/logic/task-display'
 
 // only on dev mode
 if (import.meta.hot) {
@@ -58,6 +59,7 @@ async function upsertTask(record: TaskRecord) {
 
 async function startTask(url: string, title?: string): Promise<{ ok: boolean, taskId?: string, error?: string }> {
   const platform = detectPlatform(url)
+  const displayTitle = normalizeVideoTitle(title)
   if (!platform)
     return { ok: false, error: '当前链接不是支持的视频平台' }
 
@@ -107,7 +109,7 @@ async function startTask(url: string, title?: string): Promise<{ ok: boolean, ta
       message: '已提交',
       createdAt: Date.now(),
       updatedAt: Date.now(),
-      title,
+      title: displayTitle,
     })
     return { ok: true, taskId: body.data.task_id }
   }

BillNote_extension/src/components/MindMap.vue

@@ -1,32 +1,181 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Transformer } from 'markmap-lib'
 import { Markmap } from 'markmap-view'
 import { absolutizeMarkdownImages, stripSourceLink } from '~/logic/api'
 
 const props = defineProps<{ markdown: string }>()
 
+const wrapRef = ref<HTMLDivElement | null>(null)
 const svgRef = ref<SVGSVGElement | null>(null)
 let mm: Markmap | null = null
+let resizeObserver: ResizeObserver | null = null
 const transformer = new Transformer()
+const MIN_EXPORT_FONT_PX = 256
+const MIN_EXPORT_WIDTH = 12800
+const MAX_EXPORT_SCALE = 24
+const MAX_CANVAS_SIDE = 32767
 
-function render() {
-  if (!svgRef.value)
-    return
-  const md = absolutizeMarkdownImages(stripSourceLink(props.markdown || ''))
-  const { root } = transformer.transform(md)
-  if (!mm)
-    mm = Markmap.create(svgRef.value, undefined, root)
-  else
-    mm.setData(root).then(() => mm?.fit())
+function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob)
+        resolve(blob)
+      else
+        reject(new Error('导出思维导图图片失败'))
+    }, 'image/png')
+  })
 }
 
-onMounted(render)
+function createSvgElement<K extends keyof SVGElementTagNameMap>(tag: K): SVGElementTagNameMap[K] {
+  return document.createElementNS('http://www.w3.org/2000/svg', tag)
+}
+
+function sanitizeSvgForCanvas(svg: SVGSVGElement): SVGSVGElement {
+  const cloned = svg.cloneNode(true) as SVGSVGElement
+
+  cloned.querySelectorAll('image').forEach(el => el.remove())
+  cloned.querySelectorAll('foreignObject').forEach((foreignObject) => {
+    const textContent = foreignObject.textContent?.replace(/\s+/g, ' ').trim()
+    if (!textContent) {
+      foreignObject.remove()
+      return
+    }
+
+    const x = Number(foreignObject.getAttribute('x') || 0)
+    const y = Number(foreignObject.getAttribute('y') || 0)
+    const height = Number(foreignObject.getAttribute('height') || 20)
+    const text = createSvgElement('text')
+    text.setAttribute('x', String(x))
+    text.setAttribute('y', String(y + height / 2))
+    text.setAttribute('dominant-baseline', 'middle')
+    text.setAttribute('font-size', '14')
+    text.setAttribute('font-family', 'Arial, "Microsoft YaHei", sans-serif')
+    text.setAttribute('fill', '#333')
+    text.textContent = textContent
+    foreignObject.replaceWith(text)
+  })
+
+  return cloned
+}
+
+function getExportFontSize(svg: SVGSVGElement): number {
+  const text = svg.querySelector('text, foreignObject')
+  if (!text)
+    return 14
+
+  const fontSize = Number.parseFloat(getComputedStyle(text).fontSize || '')
+  if (Number.isFinite(fontSize) && fontSize > 0)
+    return fontSize
+
+  const attrSize = Number.parseFloat(text.getAttribute('font-size') || '')
+  return Number.isFinite(attrSize) && attrSize > 0 ? attrSize : 14
+}
+
+function stripMindmapNoise(md: string): string {
+  return absolutizeMarkdownImages(stripSourceLink(md || ''))
+    // 笔记里的截图/封面图片在思维导图中会被当作超大 SVG foreignObject，
+    // 容易把导图挤成截图里那种“只剩半框/一条竖线”的效果。导图只保留文字层级。
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+    .replace(/<img\b[^>]*>/gi, '')
+}
+
+async function fit() {
+  await nextTick()
+  requestAnimationFrame(() => mm?.fit())
+}
+
+async function render() {
+  if (!svgRef.value)
+    return
+  const { root } = transformer.transform(stripMindmapNoise(props.markdown))
+  if (!mm)
+    mm = Markmap.create(svgRef.value, { autoFit: true }, root)
+  else
+    await mm.setData(root)
+  await fit()
+}
+
+async function toPngBlob(): Promise<Blob> {
+  await fit()
+  await nextTick()
+  if (!svgRef.value)
+    throw new Error('思维导图尚未渲染完成')
+
+  const svg = svgRef.value
+  const bbox = svg.getBBox()
+  const padding = 48
+  const x = Math.floor(bbox.x - padding)
+  const y = Math.floor(bbox.y - padding)
+  const width = Math.max(Math.ceil(bbox.width + padding * 2), 1)
+  const height = Math.max(Math.ceil(bbox.height + padding * 2), 1)
+  const cloned = sanitizeSvgForCanvas(svg)
+
+  cloned.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  cloned.setAttribute('width', String(width))
+  cloned.setAttribute('height', String(height))
+  cloned.setAttribute('viewBox', `${x} ${y} ${width} ${height}`)
+  cloned.insertAdjacentHTML('afterbegin', `<rect width="100%" height="100%" fill="#fff"/>`)
+
+  const svgText = new XMLSerializer().serializeToString(cloned)
+  const url = URL.createObjectURL(new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' }))
+
+  try {
+    const img = new Image()
+    img.decoding = 'async'
+    img.src = url
+    await img.decode()
+
+    // 不写死某个导出宽度：按导图内容和文字字号动态反推 PNG 倍率。
+    // 目标是让导出的正文至少有 MIN_EXPORT_FONT_PX 像素高，小图自动放大，
+    // 大图则按内容尺寸导出；同时限制最大边长，避免复杂导图撑爆内存。
+    const fontScale = MIN_EXPORT_FONT_PX / getExportFontSize(svg)
+    const widthScale = MIN_EXPORT_WIDTH / width
+    const rawScale = Math.max(window.devicePixelRatio || 1, fontScale, widthScale)
+    const sideLimitScale = Math.min(MAX_CANVAS_SIDE / width, MAX_CANVAS_SIDE / height)
+    const scale = Math.max(1, Math.min(rawScale, MAX_EXPORT_SCALE, sideLimitScale))
+    const canvas = document.createElement('canvas')
+    canvas.width = Math.ceil(width * scale)
+    canvas.height = Math.ceil(height * scale)
+    const ctx = canvas.getContext('2d')
+    if (!ctx)
+      throw new Error('当前浏览器不支持 Canvas 导出')
+    ctx.fillStyle = '#fff'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    ctx.scale(scale, scale)
+    ctx.drawImage(img, 0, 0, width, height)
+    return await canvasToBlob(canvas)
+  }
+  finally {
+    URL.revokeObjectURL(url)
+  }
+}
+
+defineExpose({
+  toPngBlob,
+})
+
+onMounted(() => {
+  render()
+  if (wrapRef.value) {
+    resizeObserver = new ResizeObserver(() => fit())
+    resizeObserver.observe(wrapRef.value)
+  }
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  mm?.destroy()
+  mm = null
+})
+
 watch(() => props.markdown, render)
+
 </script>
 
 <template>
-  <div class="w-full h-full bg-white rounded border overflow-hidden">
-    <svg ref="svgRef" class="w-full h-full" />
+  <div ref="wrapRef" class="w-full h-full min-h-[360px] bg-white rounded border overflow-hidden">
+    <svg ref="svgRef" class="w-full h-full min-h-[360px]" />
   </div>
 </template>

BillNote_extension/src/logic/task-display.ts

@@ -0,0 +1,21 @@
+import type { TaskRecord } from './types'
+
+const SITE_SUFFIX_RE = /\s*[-_—–|｜]\s*(哔哩哔哩|bilibili|youtube|抖音|douyin|快手|kuaishou)\s*$/i
+
+export function normalizeVideoTitle(title: string | undefined | null): string | undefined {
+  const value = title?.trim()
+  if (!value)
+    return undefined
+  return value
+    .replace(SITE_SUFFIX_RE, '')
+    .trim() || value
+}
+
+export function getTaskDisplayTitle(task: TaskRecord | undefined | null, fallbackTitle?: string): string {
+  if (!task)
+    return normalizeVideoTitle(fallbackTitle) || ''
+  return normalizeVideoTitle((task.result?.audio_meta as { title?: string } | undefined)?.title)
+    || normalizeVideoTitle(task.title)
+    || normalizeVideoTitle(fallbackTitle)
+    || task.videoUrl
+}

BillNote_extension/src/popup/Popup.vue

@@ -5,6 +5,7 @@ import { settings, settingsReady, tasks, tasksReady, upsertTask } from '~/logic/
 import { generateNote, getTaskStatus, resolveImageUrl } from '~/logic/api'
 import { fetchBilibiliSubtitle } from '~/logic/bilibili-subtitle'
 import { NOTE_FORMATS, NOTE_STYLES, type NoteFormat, type TaskRecord } from '~/logic/types'
+import { getTaskDisplayTitle, normalizeVideoTitle } from '~/logic/task-display'
 
 const tabUrl = ref<string>('')
 const tabTitle = ref<string>('')
@@ -43,7 +44,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,
+      title: activeTask.value?.title || normalizeVideoTitle(tabTitle.value),
     })
     if (res.status !== 'SUCCESS' && res.status !== 'FAILED')
       pollTimer = setTimeout(() => poll(taskId), 3000)
@@ -95,7 +96,7 @@ async function start() {
       message: '已提交',
       createdAt: Date.now(),
       updatedAt: Date.now(),
-      title: tabTitle.value || undefined,
+      title: normalizeVideoTitle(tabTitle.value),
     })
     poll(task_id)
     // 提交后顺手把侧边栏拉起来，免得用户来回切窗口
@@ -144,10 +145,7 @@ 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)
-  || activeTask.value?.title
-  || tabTitle.value)
+const activeTitle = computed(() => getTaskDisplayTitle(activeTask.value, tabTitle.value))
 
 function fmtTime(ts?: number) {
   if (!ts)
@@ -182,8 +180,8 @@ onUnmounted(() => {
       <button class="text-xs text-gray-500 hover:text-gray-800" @click="openOptions">设置</button>
     </header>
 
-    <div class="text-xs text-gray-500 truncate" :title="tabUrl">
-      {{ tabUrl || '当前没有打开的标签页' }}
+    <div class="text-xs text-gray-500 truncate" :title="normalizeVideoTitle(tabTitle) || tabUrl">
+      {{ normalizeVideoTitle(tabTitle) || tabUrl || '当前没有打开的标签页' }}
     </div>
 
     <div v-if="!supported" class="text-xs text-amber-700 bg-amber-50 p-2 rounded">
@@ -336,8 +334,8 @@ onUnmounted(() => {
           :class="{ 'bg-blue-50': t.taskId === activeTaskId }"
           @click="selectTask(t.taskId)"
         >
-          <span class="truncate flex-1" :title="t.title || t.videoUrl">
-            {{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.title || t.videoUrl }}
+          <span class="truncate flex-1" :title="getTaskDisplayTitle(t)">
+            {{ getTaskDisplayTitle(t) }}
           </span>
           <span class="text-gray-500 shrink-0">{{ t.status }}</span>
         </li>

BillNote_extension/src/sidepanel/Sidepanel.vue

@@ -3,14 +3,17 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { getTaskStatus, resolveImageUrl } from '~/logic/api'
 import { tasks, tasksReady, settingsReady, upsertTask } from '~/logic/storage'
 import type { TaskRecord } from '~/logic/types'
+import { getTaskDisplayTitle } from '~/logic/task-display'
 
 type ViewMode = 'markdown' | 'mindmap' | 'chat'
 
 const activeTaskId = ref<string>('')
 const activeTask = computed<TaskRecord | undefined>(() => tasks.value?.find(t => t.taskId === activeTaskId.value))
 const errorMsg = ref('')
+const successMsg = ref('')
 const viewMode = ref<ViewMode>('markdown')
 const showHistory = ref(false)
+const mindMapRef = ref<{ toPngBlob: () => Promise<Blob> } | null>(null)
 
 const isDone = computed(() => activeTask.value?.status === 'SUCCESS')
 const isFailed = computed(() => activeTask.value?.status === 'FAILED')
@@ -41,7 +44,7 @@ async function poll(taskId: string) {
         message: res.message,
         result: res.result ?? cur.result,
         updatedAt: Date.now(),
-        title: cur.title,
+        title: cur.title || getTaskDisplayTitle(cur),
       })
     }
     if (res.status !== 'SUCCESS' && res.status !== 'FAILED')
@@ -75,11 +78,19 @@ async function copyMarkdown() {
     await navigator.clipboard.writeText(md)
 }
 
+function safeFilename(name: string): string {
+  return (name || 'bilinote')
+    .replace(/[\\/:*?"<>|]/g, '_')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 120) || 'bilinote'
+}
+
 function downloadMarkdown() {
   const md = activeTask.value?.result?.markdown
   if (!md)
     return
-  const title = (activeTask.value?.result?.audio_meta as { title?: string } | undefined)?.title || 'bilinote'
+  const title = safeFilename(getTaskDisplayTitle(activeTask.value))
   const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' })
   const url = URL.createObjectURL(blob)
   const a = document.createElement('a')
@@ -89,11 +100,44 @@ function downloadMarkdown() {
   URL.revokeObjectURL(url)
 }
 
-const activeTitle = computed(() =>
-  (activeTask.value?.result?.audio_meta as { title?: string } | undefined)?.title
-  || activeTask.value?.title
-  || activeTask.value?.videoUrl
-  || '')
+async function copyMindMapImage() {
+  try {
+    errorMsg.value = ''
+    successMsg.value = ''
+    const blob = await mindMapRef.value?.toPngBlob()
+    if (!blob)
+      return
+    await navigator.clipboard.write([
+      new ClipboardItem({ [blob.type]: blob }),
+    ])
+    successMsg.value = '思维导图图片已复制'
+    setTimeout(() => { successMsg.value = '' }, 2000)
+  }
+  catch (e) {
+    errorMsg.value = (e as Error).message || '复制思维导图图片失败'
+  }
+}
+
+async function downloadMindMapImage() {
+  try {
+    errorMsg.value = ''
+    successMsg.value = ''
+    const blob = await mindMapRef.value?.toPngBlob()
+    if (!blob)
+      return
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${safeFilename(getTaskDisplayTitle(activeTask.value))}.png`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+  catch (e) {
+    errorMsg.value = (e as Error).message || '下载思维导图图片失败'
+  }
+}
+
+const activeTitle = computed(() => getTaskDisplayTitle(activeTask.value))
 
 const activeCover = computed(() =>
   (activeTask.value?.result?.audio_meta as { cover_url?: string } | undefined)?.cover_url)
@@ -144,8 +188,8 @@ onUnmounted(() => {
           :class="{ 'bg-white border': t.taskId === activeTaskId }"
           @click="selectTask(t.taskId)"
         >
-          <span class="truncate flex-1" :title="t.title || t.videoUrl">
-            {{ (t.result?.audio_meta as { title?: string } | undefined)?.title || t.title || t.videoUrl }}
+          <span class="truncate flex-1" :title="getTaskDisplayTitle(t)">
+            {{ getTaskDisplayTitle(t) }}
           </span>
           <span class="text-gray-400 shrink-0">{{ STAGE_LABELS[t.status] || t.status }}</span>
         </li>
@@ -155,6 +199,9 @@ onUnmounted(() => {
     <div v-if="errorMsg" class="text-xs text-red-600 px-3 py-1 break-words bg-red-50 shrink-0">
       {{ errorMsg }}
     </div>
+    <div v-if="successMsg" class="text-xs text-green-700 px-3 py-1 break-words bg-green-50 shrink-0">
+      {{ successMsg }}
+    </div>
 
     <section v-if="!activeTask" class="flex-1 flex items-center justify-center text-gray-400 text-xs px-4 text-center">
       还没有任务。在视频页点悬浮按钮、在 popup 提交，或右键菜单选「用 BiliNote 总结」。
@@ -228,6 +275,18 @@ onUnmounted(() => {
           title="下载 .md"
           @click="downloadMarkdown"
         >下载</button>
+        <button
+          v-if="viewMode === 'mindmap'"
+          class="text-gray-500 hover:text-gray-800 px-1.5 py-1 rounded hover:bg-gray-100"
+          title="复制思维导图图片"
+          @click="copyMindMapImage"
+        >复制</button>
+        <button
+          v-if="viewMode === 'mindmap'"
+          class="text-gray-500 hover:text-gray-800 px-1.5 py-1 rounded hover:bg-gray-100"
+          title="下载思维导图 PNG"
+          @click="downloadMindMapImage"
+        >下载</button>
       </div>
 
       <!-- 内容区：占满剩余空间 -->
@@ -240,6 +299,7 @@ onUnmounted(() => {
         />
         <MindMap
           v-else-if="isDone && activeTask.result?.markdown && viewMode === 'mindmap'"
+          ref="mindMapRef"
           :markdown="activeTask.result.markdown"
           class="h-full"
         />