fix: 性能优化、前端转写器配置、任务进度丢失及 MLX Whisper 回退问题修复

### 性能优化
- 后端任务执行从串行锁改为 ThreadPoolExecutor 并发执行（默认3线程）
- 添加 GZipMiddleware 响应压缩 + Nginx gzip 配置
- 数据库连接池参数优化（pool_size=10, max_overflow=20）
- 视频帧提取并行化（ThreadPoolExecutor）
- LLM 重试配置缓存到实例，避免每次请求读 env var
- 前端路由级代码拆分（React.lazy + Suspense）
- Vite manualChunks 拆分 markdown/markmap/vendor
- MarkdownViewer 用 React.memo + useMemo 减少不必要渲染
- NoteHistory Fuse.js 实例 useMemo 缓存
- useTaskPolling 无待处理任务时跳过轮询
- 移除 antd 依赖（NoteForm Alert、modelForm Tag），改用 shadcn/ui

### 前端转写器配置（新功能）
- 新增 TranscriberConfigManager（JSON 文件存储，替代环境变量）
- 新增 GET/POST /transcriber_config API 端点
- 新增 GET /transcriber_models_status 模型下载状态查询
- 新增 POST /transcriber_download 后台模型下载触发
- 前端转写器设置页面：引擎选择、模型大小选择、模型下载管理
- deploy_status 端点同步从配置文件读取

### Bug 修复
- 修复任务进行中切换页面后进度丢失：Home.tsx status 派生逻辑补全中间状态
- 修复 MLX Whisper 静默回退 fast-whisper：移除环境变量门控，macOS 下自动尝试导入
- MLX Whisper 不可用时抛出 RuntimeError 而非静默回退
- 前端展示 MLX Whisper 可用性状态，不可用时禁用保存

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

BillNote_frontend/src/App.tsx

@@ -1,21 +1,23 @@
 import './App.css'
-import { HomePage } from './pages/HomePage/Home.tsx'
+import { lazy, Suspense, useEffect } from 'react'
+import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom'
 import { useTaskPolling } from '@/hooks/useTaskPolling.ts'
-import SettingPage from './pages/SettingPage/index.tsx'
-import { BrowserRouter, Navigate, Routes } from 'react-router-dom'
-import { Route } from 'react-router-dom'
-import Index from '@/pages/Index.tsx'
-import NotFoundPage from '@/pages/NotFoundPage'
-import Model from '@/pages/SettingPage/Model.tsx'
-import ProviderForm from '@/components/Form/modelForm/Form.tsx'
-import AboutPage from '@/pages/SettingPage/about.tsx'
-import Monitor from '@/pages/SettingPage/Monitor.tsx'
-import Downloader from '@/pages/SettingPage/Downloader.tsx'
-import DownloaderForm from '@/components/Form/DownloaderForm/Form.tsx'
-import { useEffect } from 'react'
-import { systemCheck } from '@/services/system.ts'
 import { useCheckBackend } from '@/hooks/useCheckBackend.ts'
+import { systemCheck } from '@/services/system.ts'
 import BackendInitDialog from '@/components/BackendInitDialog'
+import Index from '@/pages/Index.tsx'
+import { HomePage } from './pages/HomePage/Home.tsx'
+
+// 非首屏页面使用 React.lazy 按需加载
+const SettingPage = lazy(() => import('./pages/SettingPage/index.tsx'))
+const Model = lazy(() => import('@/pages/SettingPage/Model.tsx'))
+const ProviderForm = lazy(() => import('@/components/Form/modelForm/Form.tsx'))
+const AboutPage = lazy(() => import('@/pages/SettingPage/about.tsx'))
+const Monitor = lazy(() => import('@/pages/SettingPage/Monitor.tsx'))
+const Downloader = lazy(() => import('@/pages/SettingPage/Downloader.tsx'))
+const DownloaderForm = lazy(() => import('@/components/Form/DownloaderForm/Form.tsx'))
+const TranscriberPage = lazy(() => import('@/pages/SettingPage/transcriber.tsx'))
+const NotFoundPage = lazy(() => import('@/pages/NotFoundPage'))
 
 function App() {
   useTaskPolling(3000) // 每 3 秒轮询一次
@@ -41,28 +43,31 @@ function App() {
   return (
     <>
       <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Index />}>
-            <Route index element={<HomePage />} />
-            <Route path="settings" element={<SettingPage />}>
-              <Route index element={<Navigate to="model" replace />} />
-              <Route path="model" element={<Model />}>
-                <Route path="new" element={<ProviderForm isCreate />} />
-                <Route path=":id" element={<ProviderForm />} />
+        <Suspense fallback={<div className="flex h-screen items-center justify-center">加载中…</div>}>
+          <Routes>
+            <Route path="/" element={<Index />}>
+              <Route index element={<HomePage />} />
+              <Route path="settings" element={<SettingPage />}>
+                <Route index element={<Navigate to="model" replace />} />
+                <Route path="model" element={<Model />}>
+                  <Route path="new" element={<ProviderForm isCreate />} />
+                  <Route path=":id" element={<ProviderForm />} />
+                </Route>
+                <Route path="download" element={<Downloader />}>
+                  <Route path=":id" element={<DownloaderForm />} />
+                </Route>
+                <Route path="transcriber" element={<TranscriberPage />} />
+                <Route path="monitor" element={<Monitor />}></Route>
+                <Route path="about" element={<AboutPage />}></Route>
+                <Route path="*" element={<NotFoundPage />} />
               </Route>
-              <Route path="download" element={<Downloader />}>
-                <Route path=":id" element={<DownloaderForm />} />
-              </Route>
-              <Route path="monitor" element={<Monitor />}></Route>
-              <Route path="about" element={<AboutPage />}></Route>
               <Route path="*" element={<NotFoundPage />} />
             </Route>
-            <Route path="*" element={<NotFoundPage />} />
-          </Route>
-        </Routes>
+          </Routes>
+        </Suspense>
       </BrowserRouter>
     </>
   )
 }
 
-export default App
+export default App

BillNote_frontend/src/components/Form/modelForm/Form.tsx

@@ -27,7 +27,7 @@ import {
 import { ModelSelector } from '@/components/Form/modelForm/ModelSelector.tsx'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert.tsx'
 import { Tags } from 'lucide-react'
-import { Tag } from 'antd'
+import { X } from 'lucide-react'
 import { useModelStore } from '@/store/modelStore'
 
 // ✅ Provider表单schema
@@ -312,12 +312,12 @@ const ProviderForm = ({ isCreate = false }: { isCreate?: boolean }) => {
             {
               models && models.map(model => {
                 return (
-                  <>
-                    <Tag onClose={()=>{
-                      handelDelete(model.id)
-                    }} key={model.id} closable color={'blue'}>
-                      {model.model_name}
-                    </Tag></>
+                  <span key={model.id} className="inline-flex items-center gap-1 rounded-md bg-blue-100 px-2 py-0.5 text-sm text-blue-700">
+                    {model.model_name}
+                    <button type="button" onClick={() => handelDelete(model.id)} className="hover:text-blue-900">
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
 
                 )
               })

BillNote_frontend/src/hooks/useTaskPolling.ts

@@ -22,9 +22,11 @@ export const useTaskPolling = (interval = 3000) => {
         task => task.status != 'SUCCESS' && task.status != 'FAILED'
       )
 
+      // 无活跃任务时跳过轮询
+      if (pendingTasks.length === 0) return
+
       for (const task of pendingTasks) {
         try {
-          console.log('🔄 正在轮询任务：', task.id)
           const res = await get_task_status(task.id)
           const { status } = res
 
@@ -47,9 +49,7 @@ export const useTaskPolling = (interval = 3000) => {
           }
         } catch (e) {
           console.error('❌ 任务轮询失败：', e)
-          // toast.error(`生成失败 ${e.message || e}`)
           updateTaskContent(task.id, { status: 'FAILED' })
-          // removeTask(task.id)
         }
       }
     }, interval)

BillNote_frontend/src/pages/HomePage/Home.tsx

@@ -18,14 +18,15 @@ export const HomePage: FC = () => {
   useEffect(() => {
     if (!currentTask) {
       setStatus('idle')
-    } else if (currentTask.status === 'PENDING') {
-      setStatus('loading')
     } else if (currentTask.status === 'SUCCESS') {
       setStatus('success')
     } else if (currentTask.status === 'FAILED') {
       setStatus('failed')
+    } else {
+      // PENDING、PARSING、DOWNLOADING、TRANSCRIBING、SUMMARIZING 等所有进行中状态
+      setStatus('loading')
     }
-  }, [currentTask])
+  }, [currentTask, currentTask?.status])
 
   // useEffect( () => {
   //     get_task_status('d4e87938-c066-48a0-bbd5-9bec40d53354').then(res=>{

BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useMemo, memo, FC } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button.tsx'
 import { Copy, Download, ArrowRight, Play, ExternalLink } from 'lucide-react'
@@ -16,7 +16,6 @@ import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
 import 'katex/dist/katex.min.css'
 import 'github-markdown-css/github-markdown-light.css'
-import { FC } from 'react'
 import { ScrollArea } from '@/components/ui/scroll-area.tsx'
 import { useTaskStore } from '@/store/taskStore'
 import { noteStyles } from '@/constant/note.ts'
@@ -45,7 +44,228 @@ const steps = [
   { label: '保存完成', key: 'SUCCESS' },
 ]
 
-const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
+const remarkPlugins = [gfm, remarkMath]
+const rehypePlugins = [rehypeKatex]
+
+/**
+ * 构建 ReactMarkdown components 对象，baseURL 用于修正图片路径。
+ * 使用函数 + useMemo 避免每次渲染都创建新的函数实例。
+ */
+function createMarkdownComponents(baseURL: string) {
+  return {
+    h1: ({ children, ...props }: any) => (
+      <h1
+        className="text-primary my-6 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"
+        {...props}
+      >
+        {children}
+      </h1>
+    ),
+    h2: ({ children, ...props }: any) => (
+      <h2
+        className="text-primary mt-10 mb-4 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
+        {...props}
+      >
+        {children}
+      </h2>
+    ),
+    h3: ({ children, ...props }: any) => (
+      <h3
+        className="text-primary mt-8 mb-4 scroll-m-20 text-xl font-semibold tracking-tight"
+        {...props}
+      >
+        {children}
+      </h3>
+    ),
+    h4: ({ children, ...props }: any) => (
+      <h4
+        className="text-primary mt-6 mb-2 scroll-m-20 text-lg font-semibold tracking-tight"
+        {...props}
+      >
+        {children}
+      </h4>
+    ),
+    p: ({ children, ...props }: any) => (
+      <p className="leading-7 [&:not(:first-child)]:mt-6" {...props}>
+        {children}
+      </p>
+    ),
+    a: ({ href, children, ...props }: any) => {
+      const isOriginLink =
+        typeof children[0] === 'string' &&
+        (children[0] as string).startsWith('原片 @')
+
+      if (isOriginLink) {
+        const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
+        const timeText = timeMatch ? timeMatch[1] : '原片'
+
+        return (
+          <span className="origin-link my-2 inline-flex">
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+              {...props}
+            >
+              <Play className="h-3.5 w-3.5" />
+              <span>原片（{timeText}）</span>
+            </a>
+          </span>
+        )
+      }
+
+      return (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary hover:text-primary/80 inline-flex items-center gap-0.5 font-medium underline underline-offset-4"
+          {...props}
+        >
+          {children}
+          {href?.startsWith('http') && (
+            <ExternalLink className="ml-0.5 inline-block h-3 w-3" />
+          )}
+        </a>
+      )
+    },
+    img: ({ node, ...props }: any) => {
+      let src = props.src
+      if (src.startsWith('/')) {
+        src = baseURL + src
+      }
+      props.src = src
+
+      return (
+        <div className="my-8 flex justify-center">
+          <Zoom>
+            <img
+              {...props}
+              className="max-w-full cursor-zoom-in rounded-lg object-cover shadow-md transition-all hover:shadow-lg"
+              style={{ maxHeight: '500px' }}
+            />
+          </Zoom>
+        </div>
+      )
+    },
+    strong: ({ children, ...props }: any) => (
+      <strong className="text-primary font-bold" {...props}>
+        {children}
+      </strong>
+    ),
+    li: ({ children, ...props }: any) => {
+      const rawText = String(children)
+      const isFakeHeading = /^(\*\*.+\*\*)$/.test(rawText.trim())
+
+      if (isFakeHeading) {
+        return (
+          <div className="text-primary my-4 text-lg font-bold">{children}</div>
+        )
+      }
+
+      return (
+        <li className="my-1" {...props}>
+          {children}
+        </li>
+      )
+    },
+    ul: ({ children, ...props }: any) => (
+      <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props}>
+        {children}
+      </ul>
+    ),
+    ol: ({ children, ...props }: any) => (
+      <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props}>
+        {children}
+      </ol>
+    ),
+    blockquote: ({ children, ...props }: any) => (
+      <blockquote
+        className="border-primary/20 text-muted-foreground mt-6 border-l-4 pl-4 italic"
+        {...props}
+      >
+        {children}
+      </blockquote>
+    ),
+    code: ({ inline, className, children, ...props }: any) => {
+      const match = /language-(\w+)/.exec(className || '')
+      const codeContent = String(children).replace(/\n$/, '')
+
+      if (!inline && match) {
+        return (
+          <div className="group bg-muted relative my-6 overflow-hidden rounded-lg border shadow-sm">
+            <div className="bg-muted text-muted-foreground flex items-center justify-between px-4 py-1.5 text-sm font-medium">
+              <div>{match[1].toUpperCase()}</div>
+              <button
+                onClick={() => {
+                  navigator.clipboard.writeText(codeContent)
+                  toast.success('代码已复制')
+                }}
+                className="bg-background/80 hover:bg-background flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors"
+              >
+                <Copy className="h-3.5 w-3.5" />
+                复制
+              </button>
+            </div>
+            <SyntaxHighlighter
+              style={codeStyle}
+              language={match[1]}
+              PreTag="div"
+              className="!bg-muted !m-0 !p-0"
+              customStyle={{
+                margin: 0,
+                padding: '1rem',
+                background: 'transparent',
+                fontSize: '0.9rem',
+              }}
+              {...props}
+            >
+              {codeContent}
+            </SyntaxHighlighter>
+          </div>
+        )
+      }
+
+      return (
+        <code
+          className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
+          {...props}
+        >
+          {children}
+        </code>
+      )
+    },
+    table: ({ children, ...props }: any) => (
+      <div className="my-6 w-full overflow-y-auto">
+        <table className="w-full border-collapse text-sm" {...props}>
+          {children}
+        </table>
+      </div>
+    ),
+    th: ({ children, ...props }: any) => (
+      <th
+        className="border-muted-foreground/20 border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
+        {...props}
+      >
+        {children}
+      </th>
+    ),
+    td: ({ children, ...props }: any) => (
+      <td
+        className="border-muted-foreground/20 border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+        {...props}
+      >
+        {children}
+      </td>
+    ),
+    hr: ({ ...props }: any) => (
+      <hr className="border-muted-foreground/20 my-8" {...props} />
+    ),
+  }
+}
+
+const MarkdownViewer: FC<MarkdownViewerProps> = memo(({ status }) => {
   const [copied, setCopied] = useState(false)
   const [currentVerId, setCurrentVerId] = useState<string>('')
   const [selectedContent, setSelectedContent] = useState<string>('')
@@ -62,6 +282,10 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
   const [showTranscribe, setShowTranscribe] = useState(false)
   const [viewMode, setViewMode] = useState<'map' | 'preview'>('preview')
   const svgRef = useRef<SVGSVGElement>(null)
+
+  // 缓存 ReactMarkdown components，仅在 baseURL 变化时重建
+  const markdownComponents = useMemo(() => createMarkdownComponents(baseURL), [baseURL])
+
   // 多版本内容处理
   useEffect(() => {
     if (!currentTask) return
@@ -160,7 +384,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
       <div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
         <Idle />
         <div className="text-center">
-          <p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
+          <p className="text-lg font-bold">输入视频链接并点击"生成笔记"</p>
           <p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 、抖音等视频平台</p>
         </div>
       </div>
@@ -220,248 +444,9 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
               <ScrollArea className="w-full">
                 <div className={'markdown-body w-full px-2'}>
                   <ReactMarkdown
-                    remarkPlugins={[gfm, remarkMath]}
-                    rehypePlugins={[rehypeKatex]}
-                    components={{
-                      // Headings with improved styling and anchor links
-                      h1: ({ children, ...props }) => (
-                        <h1
-                          className="text-primary my-6 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"
-                          {...props}
-                        >
-                          {children}
-                        </h1>
-                      ),
-                      h2: ({ children, ...props }) => (
-                        <h2
-                          className="text-primary mt-10 mb-4 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
-                          {...props}
-                        >
-                          {children}
-                        </h2>
-                      ),
-                      h3: ({ children, ...props }) => (
-                        <h3
-                          className="text-primary mt-8 mb-4 scroll-m-20 text-xl font-semibold tracking-tight"
-                          {...props}
-                        >
-                          {children}
-                        </h3>
-                      ),
-                      h4: ({ children, ...props }) => (
-                        <h4
-                          className="text-primary mt-6 mb-2 scroll-m-20 text-lg font-semibold tracking-tight"
-                          {...props}
-                        >
-                          {children}
-                        </h4>
-                      ),
-
-                      // Paragraphs with better line height
-                      p: ({ children, ...props }) => (
-                        <p className="leading-7 [&:not(:first-child)]:mt-6" {...props}>
-                          {children}
-                        </p>
-                      ),
-
-                      // Enhanced links with special handling for "原片" links
-                      a: ({ href, children, ...props }) => {
-                        const isOriginLink =
-                          typeof children[0] === 'string' &&
-                          (children[0] as string).startsWith('原片 @')
-
-                        if (isOriginLink) {
-                          const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
-                          const timeText = timeMatch ? timeMatch[1] : '原片'
-
-                          return (
-                            <span className="origin-link my-2 inline-flex">
-                              <a
-                                href={href}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
-                                {...props}
-                              >
-                                <Play className="h-3.5 w-3.5" />
-                                <span>原片（{timeText}）</span>
-                              </a>
-                            </span>
-                          )
-                        }
-
-                        // Default link styling with external indicator
-                        return (
-                          <a
-                            href={href}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-primary hover:text-primary/80 inline-flex items-center gap-0.5 font-medium underline underline-offset-4"
-                            {...props}
-                          >
-                            {children}
-                            {href?.startsWith('http') && (
-                              <ExternalLink className="ml-0.5 inline-block h-3 w-3" />
-                            )}
-                          </a>
-                        )
-                      },
-
-                      // Enhanced image with zoom capability
-                      img: ({ node, ...props }) =>{
-                        // Fix the URL by removing the 'undefined' prefix if it exists
-                        let src = props.src
-                        if (src.startsWith('/')) {
-                          src = baseURL + src
-                        }
-                        props.src = src
-
-                     return(
-                      <div className="my-8 flex justify-center">
-                          <Zoom>
-                            <img
-                              {...props}
-                              className="max-w-full cursor-zoom-in rounded-lg object-cover shadow-md transition-all hover:shadow-lg"
-                              style={{ maxHeight: '500px' }}
-                            />
-                          </Zoom>
-                        </div>
-                      )},
-
-                      // Better strong/bold text
-                      strong: ({ children, ...props }) => (
-                        <strong className="text-primary font-bold" {...props}>
-                          {children}
-                        </strong>
-                      ),
-
-                      // Enhanced list items with support for "fake headings"
-                      li: ({ children, ...props }) => {
-                        const rawText = String(children)
-                        const isFakeHeading = /^(\*\*.+\*\*)$/.test(rawText.trim())
-
-                        if (isFakeHeading) {
-                          return (
-                            <div className="text-primary my-4 text-lg font-bold">{children}</div>
-                          )
-                        }
-
-                        return (
-                          <li className="my-1" {...props}>
-                            {children}
-                          </li>
-                        )
-                      },
-
-                      // Enhanced unordered lists
-                      ul: ({ children, ...props }) => (
-                        <ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props}>
-                          {children}
-                        </ul>
-                      ),
-
-                      // Enhanced ordered lists
-                      ol: ({ children, ...props }) => (
-                        <ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props}>
-                          {children}
-                        </ol>
-                      ),
-
-                      // Enhanced blockquotes
-                      blockquote: ({ children, ...props }) => (
-                        <blockquote
-                          className="border-primary/20 text-muted-foreground mt-6 border-l-4 pl-4 italic"
-                          {...props}
-                        >
-                          {children}
-                        </blockquote>
-                      ),
-
-                      // Enhanced code blocks with syntax highlighting and copy button
-                      code: ({ inline, className, children, ...props }) => {
-                        const match = /language-(\w+)/.exec(className || '')
-                        const codeContent = String(children).replace(/\n$/, '')
-
-                        if (!inline && match) {
-                          return (
-                            <div className="group bg-muted relative my-6 overflow-hidden rounded-lg border shadow-sm">
-                              <div className="bg-muted text-muted-foreground flex items-center justify-between px-4 py-1.5 text-sm font-medium">
-                                <div>{match[1].toUpperCase()}</div>
-                                <button
-                                  onClick={() => {
-                                    navigator.clipboard.writeText(codeContent)
-                                    toast.success('代码已复制')
-                                  }}
-                                  className="bg-background/80 hover:bg-background flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors"
-                                >
-                                  <Copy className="h-3.5 w-3.5" />
-                                  复制
-                                </button>
-                              </div>
-                              <SyntaxHighlighter
-                                style={codeStyle}
-                                language={match[1]}
-                                PreTag="div"
-                                className="!bg-muted !m-0 !p-0"
-                                customStyle={{
-                                  margin: 0,
-                                  padding: '1rem',
-                                  background: 'transparent',
-                                  fontSize: '0.9rem',
-                                }}
-                                {...props}
-                              >
-                                {codeContent}
-                              </SyntaxHighlighter>
-                            </div>
-                          )
-                        }
-
-                        // Inline code styling
-                        return (
-                          <code
-                            className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
-                            {...props}
-                          >
-                            {children}
-                          </code>
-                        )
-                      },
-
-                      // Enhanced tables
-                      table: ({ children, ...props }) => (
-                        <div className="my-6 w-full overflow-y-auto">
-                          <table className="w-full border-collapse text-sm" {...props}>
-                            {children}
-                          </table>
-                        </div>
-                      ),
-
-                      // Table headers
-                      th: ({ children, ...props }) => (
-                        <th
-                          className="border-muted-foreground/20 border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
-                          {...props}
-                        >
-                          {children}
-                        </th>
-                      ),
-
-                      // Table cells
-                      td: ({ children, ...props }) => (
-                        <td
-                          className="border-muted-foreground/20 border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
-                          {...props}
-                        >
-                          {children}
-                        </td>
-                      ),
-
-                      // Horizontal rule
-                      hr: ({ ...props }) => (
-                        <hr className="border-muted-foreground/20 my-8" {...props} />
-                      ),
-                    }}
+                    remarkPlugins={remarkPlugins}
+                    rehypePlugins={rehypePlugins}
+                    components={markdownComponents}
                   >
                     {selectedContent}
                   </ReactMarkdown>
@@ -488,6 +473,8 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
       )}
     </div>
   )
-}
+})
+
+MarkdownViewer.displayName = 'MarkdownViewer'
 
 export default MarkdownViewer

BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx

@@ -13,7 +13,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
 import { Info, Loader2, Plus } from 'lucide-react'
-import { message, Alert } from 'antd'
+import { Alert, AlertDescription } from '@/components/ui/alert.tsx'
 import { generateNote } from '@/services/note.ts'
 import { uploadFile } from '@/services/upload.ts'
 import { useTaskStore } from '@/store/taskStore'
@@ -513,17 +513,11 @@ const NoteForm = () => {
                 )}
               />
             </div>
-            <Alert
-              closable
-              type="error"
-              message={
-                <div>
-                  <strong>提示：</strong>
-                  <p>视频理解功能必须使用多模态模型。</p>
-                </div>
-              }
-              className="text-sm"
-            />
+            <Alert variant="warning" className="text-sm">
+              <AlertDescription>
+                <strong>提示：</strong>视频理解功能必须使用多模态模型。
+              </AlertDescription>
+            </Alert>
           </div>
 
           {/* 笔记格式 */}

BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx

@@ -14,7 +14,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip.tsx'
 import LazyImage from "@/components/LazyImage.tsx";
-import {FC, useState ,useEffect } from 'react'
+import {FC, useState, useEffect, useMemo} from 'react'
 
 interface NoteHistoryProps {
   onSelect: (taskId: string) => void
@@ -28,10 +28,10 @@ const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
   const baseURL = (String(import.meta.env.VITE_API_BASE_URL || 'api')).replace(/\/$/, '')
   const [rawSearch, setRawSearch] = useState('')
   const [search, setSearch] = useState('')
-  const fuse = new Fuse(tasks, {
+  const fuse = useMemo(() => new Fuse(tasks, {
     keys: ['audioMeta.title'],
     threshold: 0.4 // 匹配精度（越低越严格）
-  })
+  }), [tasks])
   useEffect(() => {
     const timer = setTimeout(() => {
       if (rawSearch === '') return

BillNote_frontend/src/pages/SettingPage/Menu.tsx

@@ -1,5 +1,6 @@
 import {
   BotMessageSquare,
+  Captions,
   HardDriveDownload,
   Info,
   Activity,
@@ -14,14 +15,12 @@ const Menu = () => {
       icon: <BotMessageSquare />,
       path: '/settings/model',
     },
-    // TODO ：下一版本升级优化
-    // {
-    //   id: ' transcriber',
-    //   name: '音频转译配置',
-    //   icon: <Captions />,
-    //   path: '/settings/transcriber',
-    // },
-    // //下载配置
+    {
+      id: 'transcriber',
+      name: '音频转写配置',
+      icon: <Captions />,
+      path: '/settings/transcriber',
+    },
     {
       id: 'download',
       name: '下载配置',

BillNote_frontend/src/pages/SettingPage/transcriber.tsx

@@ -1,8 +1,255 @@
-const Transcriber = () => {
+import { useState, useEffect, useCallback } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { AudioLines, AlertTriangle, CheckCircle2, Download, Loader2, Save, XCircle } from 'lucide-react'
+import { toast } from 'react-hot-toast'
+import {
+  getTranscriberConfig,
+  updateTranscriberConfig,
+  getModelsStatus,
+  downloadModel,
+  TranscriberConfig,
+  ModelStatus,
+} from '@/services/transcriber'
+
+const isWhisperType = (type: string) =>
+  type === 'fast-whisper' || type === 'mlx-whisper'
+
+export default function Transcriber() {
+  const [config, setConfig] = useState<TranscriberConfig | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [selectedType, setSelectedType] = useState('')
+  const [selectedModelSize, setSelectedModelSize] = useState('')
+  const [modelStatuses, setModelStatuses] = useState<ModelStatus[]>([])
+  const [mlxModelStatuses, setMlxModelStatuses] = useState<ModelStatus[]>([])
+  const [mlxAvailable, setMlxAvailable] = useState(false)
+
+  const fetchModelsStatus = useCallback(async () => {
+    try {
+      const data = await getModelsStatus()
+      setModelStatuses(data.whisper)
+      setMlxModelStatuses(data.mlx_whisper)
+      setMlxAvailable(data.mlx_available)
+    } catch {
+      // 静默失败，不阻塞主流程
+    }
+  }, [])
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await getTranscriberConfig()
+        setConfig(data)
+        setSelectedType(data.transcriber_type)
+        setSelectedModelSize(data.whisper_model_size)
+      } catch {
+        toast.error('获取转写器配置失败')
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+    fetchModelsStatus()
+  }, [fetchModelsStatus])
+
+  // 有下载中的模型时自动轮询状态
+  useEffect(() => {
+    const hasDownloading =
+      modelStatuses.some(m => m.downloading) || mlxModelStatuses.some(m => m.downloading)
+    if (!hasDownloading) return
+
+    const timer = setInterval(fetchModelsStatus, 3000)
+    return () => clearInterval(timer)
+  }, [modelStatuses, mlxModelStatuses, fetchModelsStatus])
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const payload: { transcriber_type: string; whisper_model_size?: string } = {
+        transcriber_type: selectedType,
+      }
+      if (isWhisperType(selectedType)) {
+        payload.whisper_model_size = selectedModelSize
+      }
+      await updateTranscriberConfig(payload)
+      toast.success('转写器配置已保存')
+    } catch {
+      toast.error('保存失败')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDownload = async (modelSize: string, transcriberType: string) => {
+    try {
+      await downloadModel({ model_size: modelSize, transcriber_type: transcriberType })
+      toast.success(`模型 ${modelSize} 开始下载`)
+      // 立即刷新状态
+      setTimeout(fetchModelsStatus, 1000)
+    } catch {
+      toast.error('下载请求失败')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
+      </div>
+    )
+  }
+
+  if (!config) {
+    return <div className="p-6 text-center text-neutral-500">无法加载配置</div>
+  }
+
+  const currentModels = selectedType === 'mlx-whisper' ? mlxModelStatuses : modelStatuses
+
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center">
-      <h1 className="text-center text-4xl font-bold">Transcriber is under development</h1>
+    <div className="space-y-6 p-6">
+      <div>
+        <h2 className="text-2xl font-semibold">音频转写配置</h2>
+        <p className="mt-1 text-sm text-neutral-500">
+          选择视频音频转写为文字所使用的引擎，保存后对新任务立即生效
+        </p>
+      </div>
+
+      {/* 转写引擎选择 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <AudioLines className="h-5 w-5" />
+            转写引擎
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">转写器类型</label>
+            <Select value={selectedType} onValueChange={setSelectedType}>
+              <SelectTrigger className="w-full max-w-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {config.available_types.map(t => (
+                  <SelectItem key={t.value} value={t.value}>
+                    {t.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {isWhisperType(selectedType) && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Whisper 模型大小</label>
+              <Select value={selectedModelSize} onValueChange={setSelectedModelSize}>
+                <SelectTrigger className="w-full max-w-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {config.whisper_model_sizes.map(size => {
+                    const status = currentModels.find(m => m.model_size === size)
+                    return (
+                      <SelectItem key={size} value={size}>
+                        <span className="flex items-center gap-2">
+                          {size}
+                          {status?.downloaded && (
+                            <CheckCircle2 className="h-3 w-3 text-green-500" />
+                          )}
+                        </span>
+                      </SelectItem>
+                    )
+                  })}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-neutral-400">
+                模型越大精度越高，但速度更慢、占用更多显存
+              </p>
+            </div>
+          )}
+
+          {selectedType === 'mlx-whisper' && !config.mlx_whisper_available && (
+            <Alert variant="warning" className="text-sm">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>
+                MLX Whisper 当前不可用。需要 macOS 平台并安装{' '}
+                <code className="rounded bg-neutral-100 px-1">pip install mlx_whisper</code>，
+                安装后重启后端生效。
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <Button onClick={handleSave} disabled={saving || (selectedType === 'mlx-whisper' && !config.mlx_whisper_available)} className="mt-2">
+            {saving ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            保存配置
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Whisper 模型管理 */}
+      {isWhisperType(selectedType) && currentModels.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Download className="h-5 w-5" />
+              模型管理
+              <span className="text-sm font-normal text-neutral-400">
+                {selectedType === 'mlx-whisper' ? 'MLX Whisper' : 'Faster Whisper'}
+              </span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {currentModels.map(model => (
+                <div
+                  key={model.model_size}
+                  className="flex items-center justify-between rounded-md border px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="font-medium">{model.model_size}</span>
+                    {model.downloaded ? (
+                      <Badge variant="default" className="bg-green-500 hover:bg-green-600">
+                        已下载
+                      </Badge>
+                    ) : model.downloading ? (
+                      <Badge variant="secondary" className="flex items-center gap-1">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        下载中
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline">未下载</Badge>
+                    )}
+                  </div>
+                  {!model.downloaded && !model.downloading && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleDownload(model.model_size, selectedType)}
+                    >
+                      <Download className="mr-1 h-4 w-4" />
+                      下载
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }
-export default Transcriber

BillNote_frontend/src/services/transcriber.ts

@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+export interface TranscriberConfig {
+  transcriber_type: string
+  whisper_model_size: string
+  available_types: { value: string; label: string }[]
+  whisper_model_sizes: string[]
+  mlx_whisper_available: boolean
+}
+
+export interface ModelStatus {
+  model_size: string
+  downloaded: boolean
+  downloading: boolean
+}
+
+export interface ModelsStatusResponse {
+  whisper: ModelStatus[]
+  mlx_whisper: ModelStatus[]
+  mlx_available: boolean
+}
+
+export const getTranscriberConfig = async (): Promise<TranscriberConfig> => {
+  return await request.get('/transcriber_config')
+}
+
+export const updateTranscriberConfig = async (data: {
+  transcriber_type: string
+  whisper_model_size?: string
+}) => {
+  return await request.post('/transcriber_config', data)
+}
+
+export const getModelsStatus = async (): Promise<ModelsStatusResponse> => {
+  return await request.get('/transcriber_models_status')
+}
+
+export const downloadModel = async (data: {
+  model_size: string
+  transcriber_type?: string
+}) => {
+  return await request.post('/transcriber_download', data)
+}

BillNote_frontend/vite.config.ts

@@ -18,6 +18,17 @@ export default defineConfig(({ mode }) => {
         '@': path.resolve(__dirname, './src'),
       },
     },
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            markdown: ['react-markdown', 'react-syntax-highlighter', 'remark-gfm', 'remark-math', 'rehype-katex'],
+            markmap: ['markmap-lib', 'markmap-view', 'markmap-toolbar', 'markmap-common'],
+            vendor: ['react', 'react-dom', 'react-router-dom'],
+          },
+        },
+      },
+    },
     server: {
       host: '0.0.0.0',
       port: port,