Merge pull request #300 from JefferyHcool/feature/ui-optimize

feat(ui): 工作区和生成历史面板支持折叠/展开

BillNote_frontend/src/layouts/HomeLayout.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react'
+import React, { FC, useRef, useState } from 'react'
-import { SlidersHorizontal } from 'lucide-react'
+import { SlidersHorizontal, PanelLeftClose, PanelLeftOpen, History as HistoryIcon } from 'lucide-react'
 import {
   Tooltip,
   TooltipContent,
@@ -7,24 +7,39 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip.tsx'
 
-import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'
-import {ScrollArea} from "@/components/ui/scroll-area.tsx";
+import { ScrollArea } from "@/components/ui/scroll-area.tsx"
+import type { ImperativePanelHandle } from 'react-resizable-panels'
 import logo from '@/assets/icon.svg'
+
 interface IProps {
   NoteForm: React.ReactNode
   Preview: React.ReactNode
   History: React.ReactNode
 }
+
 const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
   const [, setShowSettings] = useState(false)
+  const [isLeftCollapsed, setIsLeftCollapsed] = useState(false)
+  const [isMiddleCollapsed, setIsMiddleCollapsed] = useState(false)
+  const leftPanelRef = useRef<ImperativePanelHandle>(null)
+  const middlePanelRef = useRef<ImperativePanelHandle>(null)
 
   return (
     <div className="flex h-screen flex-col overflow-hidden">
       <ResizablePanelGroup direction="horizontal" className="h-full w-full">
         {/* 左边表单 */}
-        <ResizablePanel defaultSize={23} minSize={10} maxSize={35}>
+        <ResizablePanel
+          ref={leftPanelRef}
+          defaultSize={23}
+          minSize={10}
+          maxSize={35}
+          collapsible
+          collapsedSize={0}
+          onCollapse={() => setIsLeftCollapsed(true)}
+          onExpand={() => setIsLeftCollapsed(false)}
+        >
           <aside className="flex h-full flex-col overflow-hidden border-r border-neutral-200 bg-white">
             <header className="flex h-16 items-center justify-between px-6">
               <div className="flex items-center gap-2">
@@ -33,7 +48,22 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
                 </div>
                 <div className="text-2xl font-bold text-gray-800">BiliNote</div>
               </div>
-              <div>
+              <div className="flex items-center gap-1">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => leftPanelRef.current?.collapse()}
+                        className="text-muted-foreground hover:text-primary cursor-pointer rounded p-1 hover:bg-neutral-100"
+                      >
+                        <PanelLeftClose className="h-5 w-5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <span>收起工作区</span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger onClick={() => setShowSettings(true)}>
@@ -49,24 +79,89 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
               </div>
             </header>
             <ScrollArea className="flex-1 overflow-auto">
-              <div className=' p-4' >{NoteForm}</div>
+              <div className="p-4">{NoteForm}</div>
             </ScrollArea>
           </aside>
         </ResizablePanel>
 
         <ResizableHandle />
 
+        {/* 左面板折叠时的展开按钮 */}
+        {isLeftCollapsed && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => leftPanelRef.current?.expand()}
+                  className="flex h-full w-8 shrink-0 items-center justify-center border-r border-neutral-200 bg-white hover:bg-neutral-50"
+                >
+                  <PanelLeftOpen className="h-4 w-4 text-muted-foreground" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <span>展开工作区</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
         {/* 中间历史 */}
-        <ResizablePanel defaultSize={16} minSize={10} maxSize={30}>
+        <ResizablePanel
+          ref={middlePanelRef}
+          defaultSize={16}
+          minSize={10}
+          maxSize={30}
+          collapsible
+          collapsedSize={0}
+          onCollapse={() => setIsMiddleCollapsed(true)}
+          onExpand={() => setIsMiddleCollapsed(false)}
+        >
           <aside className="flex h-full flex-col overflow-hidden border-r border-neutral-200 bg-white">
+            <header className="flex h-10 shrink-0 items-center justify-between border-b border-neutral-100 px-3">
+              <span className="text-sm font-medium text-gray-600">生成历史</span>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => middlePanelRef.current?.collapse()}
+                      className="text-muted-foreground hover:text-primary cursor-pointer rounded p-1 hover:bg-neutral-100"
+                    >
+                      <PanelLeftClose className="h-4 w-4" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <span>收起历史</span>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </header>
             <ScrollArea className="flex-1 overflow-auto">
-            <div className="">{History}</div>
+              <div>{History}</div>
             </ScrollArea>
           </aside>
         </ResizablePanel>
 
         <ResizableHandle />
 
+        {/* 中间面板折叠时的展开按钮 */}
+        {isMiddleCollapsed && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => middlePanelRef.current?.expand()}
+                  className="flex h-full w-8 shrink-0 items-center justify-center border-r border-neutral-200 bg-white hover:bg-neutral-50"
+                >
+                  <HistoryIcon className="h-4 w-4 text-muted-foreground" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <span>展开历史</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
         {/* 右边预览 */}
         <ResizablePanel defaultSize={61} minSize={30}>
           <main className="flex h-full flex-col overflow-hidden bg-white p-6">{Preview}</main>