fix(markdown): 修复 Markdown 组件以提高可读性和维护性

- 格式化代码以提高可读性
-优化组件结构以提高维护性- 调整样式和布局以提升用户体验

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

@@ -1,11 +1,11 @@
-"use client"
+'use client'
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
-import { Copy, Download } from "lucide-react"
+import { Copy, Download } from 'lucide-react'
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button'
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Badge } from "@/components/ui/badge"
+import { Badge } from '@/components/ui/badge'
 
 interface VersionNote {
   ver_id: string
@@ -42,8 +42,8 @@ export function MarkdownHeader({
   onDownload,
   createAt,
   showTranscribe,
-                                   setShowTranscribe
+  setShowTranscribe,
-                               }: NoteHeaderProps) {
+}: NoteHeaderProps) {
   const [copied, setCopied] = useState(false)
 
   useEffect(() => {
@@ -59,28 +59,29 @@ export function MarkdownHeader({
     setCopied(true)
   }
 
-    const styleName = noteStyles.find((v) => v.value === style)?.label || style
+  const styleName = noteStyles.find(v => v.value === style)?.label || style
 
-    const reversedMarkdown: VersionNote[] =
+  const reversedMarkdown: VersionNote[] = Array.isArray(currentTask?.markdown)
-        Array.isArray(currentTask?.markdown) ? [...currentTask!.markdown].reverse() : []
+    ? [...currentTask!.markdown].reverse()
+    : []
 
   const formatDate = (date: string | Date | undefined) => {
-        if (!date) return ""
+    if (!date) return ''
-        const d = typeof date === "string" ? new Date(date) : date
+    const d = typeof date === 'string' ? new Date(date) : date
-        if (isNaN(d.getTime())) return ""
+    if (isNaN(d.getTime())) return ''
     return d
-            .toLocaleString("zh-CN", {
+      .toLocaleString('zh-CN', {
-                year: "numeric",
+        year: 'numeric',
-                month: "2-digit",
+        month: '2-digit',
-                day: "2-digit",
+        day: '2-digit',
-                hour: "2-digit",
+        hour: '2-digit',
-                minute: "2-digit",
+        minute: '2-digit',
       })
-            .replace(/\//g, "-")
+      .replace(/\//g, '-')
   }
 
   return (
-        <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b bg-white/95 py-2 px-4 backdrop-blur-sm">
+    <div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b bg-white/95 px-4 py-2 backdrop-blur-sm">
       {/* 左侧区域：版本 + 标签 + 创建时间 */}
       <div className="flex flex-wrap items-center gap-3">
         {isMultiVersion && (
@@ -89,7 +90,7 @@ export function MarkdownHeader({
               <div className="flex items-center">
                 {(() => {
                   const idx = currentTask?.markdown.findIndex(v => v.ver_id === currentVerId)
-                                    return idx !== -1 ? `版本（${currentVerId.slice(0, 6)}）` : ''
+                  return idx !== -1 ? `版本（${currentVerId.slice(-6)}）` : ''
                 })()}
               </div>
             </SelectTrigger>
@@ -115,9 +116,7 @@ export function MarkdownHeader({
         </Badge>
 
         {createAt && (
-                    <div className="text-sm text-muted-foreground">
+          <div className="text-muted-foreground text-sm">创建时间: {formatDate(createAt)}</div>
-                        创建时间: {formatDate(createAt)}
-                    </div>
         )}
       </div>
 
@@ -128,7 +127,7 @@ export function MarkdownHeader({
             <TooltipTrigger asChild>
               <Button onClick={handleCopy} variant="ghost" size="sm" className="h-8 px-2">
                 <Copy className="mr-1.5 h-4 w-4" />
-                                <span className="text-sm">{copied ? "已复制" : "复制"}</span>
+                <span className="text-sm">{copied ? '已复制' : '复制'}</span>
               </Button>
             </TooltipTrigger>
             <TooltipContent>复制内容</TooltipContent>
@@ -149,16 +148,19 @@ export function MarkdownHeader({
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-                            <Button onClick={
+              <Button
-                                () => {
+                onClick={() => {
                   setShowTranscribe(!showTranscribe)
-                                }
+                }}
-                            } variant="ghost" size="sm" className="h-8 px-2">
+                variant="ghost"
+                size="sm"
+                className="h-8 px-2"
+              >
                 {/*<Download className="mr-1.5 h-4 w-4" />*/}
                 <span className="text-sm">原文参照</span>
               </Button>
             </TooltipTrigger>
-                        <TooltipContent >原文参照</TooltipContent>
+            <TooltipContent>原文参照</TooltipContent>
           </Tooltip>
         </TooltipProvider>
       </div>

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button.tsx'
-import { Copy, Download, ArrowRight,Play,ExternalLink  } from 'lucide-react'
+import { Copy, Download, ArrowRight, Play, ExternalLink } from 'lucide-react'
 import { toast } from 'react-hot-toast'
 import Error from '@/components/Lottie/error.tsx'
 import Loading from '@/components/Lottie/Loading.tsx'
@@ -21,7 +21,7 @@ import { ScrollArea } from '@/components/ui/scroll-area.tsx'
 import { useTaskStore } from '@/store/taskStore'
 import { noteStyles } from '@/constant/note.ts'
 import { MarkdownHeader } from '@/pages/HomePage/components/MarkdownHeader.tsx'
-import TranscriptViewer from "@/pages/HomePage/components/transcriptViewer.tsx";
+import TranscriptViewer from '@/pages/HomePage/components/transcriptViewer.tsx'
 
 interface VersionNote {
   ver_id: string
@@ -57,10 +57,10 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
   const taskStatus = currentTask?.status || 'PENDING'
   const retryTask = useTaskStore.getState().retryTask
   const isMultiVersion = Array.isArray(currentTask?.markdown)
-  const [showTranscribe, setShowTranscribe]=useState(false)
+  const [showTranscribe, setShowTranscribe] = useState(false)
   // 多版本内容处理
   useEffect(() => {
-    if (!currentTask) return;
+    if (!currentTask) return
 
     if (!isMultiVersion) {
       setCurrentVerId('') // 清空旧版本 ID
@@ -69,12 +69,17 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
       setCreateTime(currentTask.createdAt)
       setSelectedContent(currentTask?.markdown)
     } else {
-      const latestVerId = currentTask.markdown[currentTask.markdown.length - 1]?.ver_id
+      const latestVersion = [...currentTask.markdown].sort(
-      setCurrentVerId(latestVerId) // 重置为最新版本
+        (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      )[0]
+
+      if (latestVersion) {
+        setCurrentVerId(latestVersion.ver_id)
       }
-  }, [currentTask?.id,taskStatus])
+    }
+  }, [currentTask?.id, taskStatus])
   useEffect(() => {
-    if (!currentTask || !isMultiVersion) return;
+    if (!currentTask || !isMultiVersion) return
 
     const currentVer = currentTask.markdown.find(v => v.ver_id === currentVerId)
     if (currentVer) {
@@ -139,13 +144,14 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
         <div className="text-center">
           <p className="text-lg font-bold text-red-500">笔记生成失败</p>
           <p className="mt-2 mb-2 text-xs text-red-400">请检查后台或稍后再试</p>
-            <Button onClick={() => retryTask(currentTask.id)} size="lg">重试</Button>
+          <Button onClick={() => retryTask(currentTask.id)} size="lg">
+            重试
+          </Button>
         </div>
       </div>
     )
   }
 
-
   return (
     <div className="flex h-screen w-full flex-col overflow-hidden">
       <MarkdownHeader
@@ -164,13 +170,11 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
       />
 
       {/* 中间内容区域：滚动容器 */}
-        <div className="flex-1 flex overflow-hidden bg-white  py-2">
+      <div className="flex flex-1 overflow-hidden bg-white py-2">
         {selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
           <>
-              <ScrollArea className="w-full ">
+            <ScrollArea className="w-full">
-              <div className={"w-full px-2 markdown-body"}>
+              <div className={'markdown-body w-full px-2'}>
-
-
                 <ReactMarkdown
                   remarkPlugins={[gfm, remarkMath]}
                   rehypePlugins={[rehypeKatex]}
@@ -178,7 +182,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     // Headings with improved styling and anchor links
                     h1: ({ children, ...props }) => (
                       <h1
-                                  className="scroll-m-20 text-3xl font-extrabold tracking-tight text-primary lg:text-4xl my-6"
+                        className="text-primary my-6 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"
                         {...props}
                       >
                         {children}
@@ -186,7 +190,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     ),
                     h2: ({ children, ...props }) => (
                       <h2
-                                  className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight text-primary first:mt-0 mt-10 mb-4"
+                        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}
@@ -194,7 +198,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     ),
                     h3: ({ children, ...props }) => (
                       <h3
-                                  className="scroll-m-20 text-xl font-semibold tracking-tight text-primary mt-8 mb-4"
+                        className="text-primary mt-8 mb-4 scroll-m-20 text-xl font-semibold tracking-tight"
                         {...props}
                       >
                         {children}
@@ -202,7 +206,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     ),
                     h4: ({ children, ...props }) => (
                       <h4
-                                  className="scroll-m-20 text-lg font-semibold tracking-tight text-primary mt-6 mb-2"
+                        className="text-primary mt-6 mb-2 scroll-m-20 text-lg font-semibold tracking-tight"
                         {...props}
                       >
                         {children}
@@ -218,19 +222,21 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
 
                     // Enhanced links with special handling for "原片" links
                     a: ({ href, children, ...props }) => {
-                            const isOriginLink = typeof children[0] === 'string' && (children[0] as string).startsWith('原片 @')
+                      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 inline-flex my-2">
+                          <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 hover:bg-blue-100 transition-colors"
+                              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" />
@@ -246,11 +252,13 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                           href={href}
                           target="_blank"
                           rel="noopener noreferrer"
-                                    className="font-medium text-primary underline underline-offset-4 hover:text-primary/80 inline-flex items-center gap-0.5"
+                          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="h-3 w-3 inline-block ml-0.5" />}
+                          {href?.startsWith('http') && (
+                            <ExternalLink className="ml-0.5 inline-block h-3 w-3" />
+                          )}
                         </a>
                       )
                     },
@@ -261,7 +269,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                         <Zoom>
                           <img
                             {...props}
-                                      className="rounded-lg shadow-md max-w-full cursor-zoom-in object-cover transition-all hover:shadow-lg"
+                            className="max-w-full cursor-zoom-in rounded-lg object-cover shadow-md transition-all hover:shadow-lg"
                             style={{ maxHeight: '500px' }}
                           />
                         </Zoom>
@@ -270,7 +278,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
 
                     // Better strong/bold text
                     strong: ({ children, ...props }) => (
-                              <strong className="font-bold text-primary" {...props}>
+                      <strong className="text-primary font-bold" {...props}>
                         {children}
                       </strong>
                     ),
@@ -281,11 +289,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                       const isFakeHeading = /^(\*\*.+\*\*)$/.test(rawText.trim())
 
                       if (isFakeHeading) {
-                              return (
+                        return <div className="text-primary my-4 text-lg font-bold">{children}</div>
-                                  <div className="text-lg font-bold my-4 text-primary">
-                                    {children}
-                                  </div>
-                              )
                       }
 
                       return (
@@ -312,7 +316,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     // Enhanced blockquotes
                     blockquote: ({ children, ...props }) => (
                       <blockquote
-                                  className="mt-6 border-l-4 border-primary/20 pl-4 italic text-muted-foreground"
+                        className="border-primary/20 text-muted-foreground mt-6 border-l-4 pl-4 italic"
                         {...props}
                       >
                         {children}
@@ -326,15 +330,15 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
 
                       if (!inline && match) {
                         return (
-                                  <div className="group relative my-6 overflow-hidden rounded-lg border bg-muted shadow-sm">
+                          <div className="group bg-muted relative my-6 overflow-hidden rounded-lg border shadow-sm">
-                                    <div className="flex items-center justify-between bg-muted px-4 py-1.5 text-sm font-medium text-muted-foreground">
+                            <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="flex items-center gap-1 rounded-md bg-background/80 px-2 py-1 text-xs font-medium hover:bg-background transition-colors"
+                                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" />
                                 复制
@@ -344,7 +348,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                               style={codeStyle}
                               language={match[1]}
                               PreTag="div"
-                                        className="!m-0 !bg-muted !p-0"
+                              className="!bg-muted !m-0 !p-0"
                               customStyle={{
                                 margin: 0,
                                 padding: '1rem',
@@ -362,7 +366,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                       // Inline code styling
                       return (
                         <code
-                                    className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm"
+                          className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
                           {...props}
                         >
                           {children}
@@ -382,7 +386,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     // Table headers
                     th: ({ children, ...props }) => (
                       <th
-                                  className="border border-muted-foreground/20 px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
+                        className="border-muted-foreground/20 border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
                         {...props}
                       >
                         {children}
@@ -392,7 +396,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                     // Table cells
                     td: ({ children, ...props }) => (
                       <td
-                                  className="border border-muted-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+                        className="border-muted-foreground/20 border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
                         {...props}
                       >
                         {children}
@@ -401,25 +405,19 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
 
                     // Horizontal rule
                     hr: ({ ...props }) => (
-                              <hr className="my-8 border-muted-foreground/20" {...props} />
+                      <hr className="border-muted-foreground/20 my-8" {...props} />
                     ),
                   }}
                 >
                   {selectedContent}
                 </ReactMarkdown>
-
               </div>
             </ScrollArea>
-                {
+            {showTranscribe && (
-                    showTranscribe && (
               <div className={'ml-2 w-2/4'}>
-                          <TranscriptViewer/>
+                <TranscriptViewer />
               </div>
-
+            )}
-                    )
-
-                }
-
           </>
         ) : (
           <div className="flex h-full w-full items-center justify-center">