From dea393e71329f0fb826d12f5d2ae06837c7cc8a4 Mon Sep 17 00:00:00 2001
From: huangjianwu <huangjianwu@ynyuc.com>
Date: Mon, 23 Mar 2026 15:20:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E9=97=AE=E7=AD=94=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=94=AF=E6=8C=81=E5=8D=8A=E5=B1=8F=E5=92=8C=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E4=B8=A4=E7=A7=8D=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 半屏模式：ChatPanel 与 markdown 各占一半并排显示
- 全屏模式：ChatPanel 占满整个内容区域，隐藏 markdown
- Header 新增两个按钮（问答 / 全屏问答），点击切换，再次点击关闭
- 当前激活的模式按钮高亮显示

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../HomePage/components/MarkdownHeader.tsx    | 56 ++++++++++++-------
 .../HomePage/components/MarkdownViewer.tsx    | 16 +++++-
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx b/BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx
index 631dc3b..4cccbba 100644
--- a/BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/MarkdownHeader.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Copy, Download, BrainCircuit, MessageSquare } from 'lucide-react'
+import { Copy, Download, BrainCircuit, MessageSquare, PanelRight, Maximize2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -28,8 +28,8 @@ interface NoteHeaderProps {
   onDownload: () => void
   createAt?: string | Date
   setShowTranscribe: (show: boolean) => void
-  showChat?: boolean
-  setShowChat?: (show: boolean) => void
+  showChat?: false | 'half' | 'full'
+  setShowChat?: (mode: false | 'half' | 'full') => void
 }
 
 export function MarkdownHeader({
@@ -188,22 +188,40 @@ export function MarkdownHeader({
           </Tooltip>
         </TooltipProvider>
         {setShowChat && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  onClick={() => setShowChat(!showChat)}
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 px-2"
-                >
-                  <MessageSquare className="mr-1.5 h-4 w-4" />
-                  <span className="text-sm">AI 问答</span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>基于笔记内容的 AI 问答</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <div className="flex items-center gap-0.5 ml-1">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={() => setShowChat(showChat === 'half' ? false : 'half')}
+                    variant={showChat === 'half' ? 'default' : 'ghost'}
+                    size="sm"
+                    className="h-8 px-2"
+                  >
+                    <PanelRight className="mr-1.5 h-4 w-4" />
+                    <span className="text-sm">问答</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>侧边问答（半屏）</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={() => setShowChat(showChat === 'full' ? false : 'full')}
+                    variant={showChat === 'full' ? 'default' : 'ghost'}
+                    size="sm"
+                    className="h-8 px-2"
+                  >
+                    <Maximize2 className="mr-1.5 h-4 w-4" />
+                    <span className="text-sm">全屏问答</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>全屏问答</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         )}
       </div>
     </div>
diff --git a/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx b/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
index a9e8d6a..68e5887 100644
--- a/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
@@ -61,7 +61,7 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
   const retryTask = useTaskStore.getState().retryTask
   const isMultiVersion = Array.isArray(currentTask?.markdown)
   const [showTranscribe, setShowTranscribe] = useState(false)
-  const [showChat, setShowChat] = useState(false)
+  const [showChat, setShowChat] = useState<false | 'half' | 'full'>(false)
   const [viewMode, setViewMode] = useState<'map' | 'preview'>('preview')
   const svgRef = useRef<SVGSVGElement>(null)
   // 多版本内容处理
@@ -221,6 +221,13 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
         <div className="flex flex-1 overflow-hidden bg-white py-2">
           {selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
             <>
+              {/* 全屏问答模式：隐藏 markdown，ChatPanel 占满 */}
+              {showChat === 'full' && currentTask ? (
+                <div className="h-full w-full">
+                  <ChatPanel taskId={currentTask.id} />
+                </div>
+              ) : (
+              <>
               <ScrollArea className="min-w-0 flex-1">
                 <div className={'markdown-body w-full px-2'}>
                   <ReactMarkdown
@@ -476,11 +483,14 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
                   <TranscriptViewer />
                 </div>
               )}
-              {showChat && currentTask && (
-                <div className="ml-2 h-full w-2/5 shrink-0">
+              {/* 侧边问答模式：markdown + ChatPanel 各占一半 */}
+              {showChat === 'half' && currentTask && (
+                <div className="ml-2 h-full w-1/2 shrink-0">
                   <ChatPanel taskId={currentTask.id} />
                 </div>
               )}
+              </>
+              )}
             </>
           ) : (
             <div className="flex h-full w-full items-center justify-center">