feat(frontend): 重构首页布局并添加生成历史组件

- 新增 History 组件用于展示生成历史记录
- 调整 HomeLayout 布局，增加 History 侧边栏
- 优化 NoteHistory 组件样式和布局- 更新首页样式，调整各个组件的位置和样式

BillNote_frontend/src/index.css

@@ -2,6 +2,30 @@
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
+html,body{
+  height: 100%;
+  width: 100%;
+}
+/* 修改滚动条轨道颜色 */
+::-webkit-scrollbar {
+  width: 8px; /* 控制滚动条的宽度 */
+}
+
+/* 修改滚动条的轨道颜色 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 轨道的背景颜色 */
+}
+
+/* 修改滚动条的滑块颜色 */
+::-webkit-scrollbar-thumb {
+  background-color: #888; /* 滑块的颜色 */
+  border-radius: 4px; /* 圆角 */
+}
+
+/* 当鼠标悬停时，修改滑块颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; /* 悬停时的颜色 */
+}
 
 :root {
   --radius: 0.625rem;
@@ -21,7 +45,7 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: #e6f7ff;
+  --border: var(    --color-neutral-200);
   --input: oklch(0.922 0 0);
   --ring: #096dd9;
   --chart-1: oklch(0.646 0.222 41.116);

BillNote_frontend/src/layouts/HomeLayout.tsx

@@ -13,15 +13,16 @@ import { Link } from 'react-router-dom'
 interface IProps {
   NoteForm: React.ReactNode
   Preview: React.ReactNode
+  History: React.ReactNode
 }
-const HomeLayout: FC<IProps> = ({ NoteForm, Preview }) => {
+const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
   const [, setShowSettings] = useState(false)
 
   return (
-    <div className="flex min-h-screen flex-col bg-white">
+    <div className="flex h-screen flex-col overflow-hidden bg-white">
       <div className="flex flex-1">
         {/* 左侧部分：Header + 表单 */}
-        <aside className="flex w-[400px] flex-col border-r border-neutral-200 bg-white">
+        <aside className="flex w-[340px] flex-col border-r border-neutral-200 bg-white">
           {/* Header */}
           <header className="flex h-16 items-center justify-between px-6">
             <div className="flex items-center gap-2">
@@ -52,6 +53,13 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview }) => {
             {NoteForm}
           </div>
         </aside>
+        <aside className="flex h-full w-[300px] flex-col border-r border-neutral-200 bg-white">
+          {/* Header */}
+
+          {/* 表单内容 */}
+          {/*<NoteForm />*/}
+          {History}
+        </aside>
 
         {/* 右侧预览区域 */}
         <main className="h-screen flex-1 overflow-hidden bg-white p-6">

BillNote_frontend/src/pages/HomePage/Home.tsx

@@ -3,6 +3,7 @@ import HomeLayout from '@/layouts/HomeLayout.tsx'
 import NoteForm from '@/pages/HomePage/components/NoteForm.tsx'
 import MarkdownViewer from '@/pages/HomePage/components/MarkdownViewer.tsx'
 import { useTaskStore } from '@/store/taskStore'
+import History from '@/pages/HomePage/components/History.tsx'
 type ViewStatus = 'idle' | 'loading' | 'success' | 'failed'
 export const HomePage: FC = () => {
   const tasks = useTaskStore(state => state.tasks)
@@ -36,6 +37,7 @@ export const HomePage: FC = () => {
     <HomeLayout
       NoteForm={<NoteForm />}
       Preview={<MarkdownViewer status={status} content={content} />}
+      History={<History />}
     />
   )
 }

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

@@ -0,0 +1,26 @@
+import NoteHistory from '@/pages/HomePage/components/NoteHistory.tsx'
+import { useTaskStore } from '@/store/taskStore'
+import { Info, Clock, Loader2 } from 'lucide-react'
+import { ScrollArea } from '@/components/ui/scroll-area.tsx'
+const History = () => {
+  const currentTaskId = useTaskStore(state => state.currentTaskId)
+  const setCurrentTask = useTaskStore(state => state.setCurrentTask)
+  return (
+    <>
+      <div className={'flex h-full w-full flex-col gap-4 px-2.5 py-1.5'}>
+        {/*生成历史    */}
+        <div className="my-4 flex h-[40px] items-center gap-2">
+          <Clock className="h-4 w-4 text-neutral-500" />
+          <h2 className="text-base font-medium text-neutral-900">生成历史</h2>
+        </div>
+        <ScrollArea className="h-[800px] w-full">
+          {/*<div className="w-full flex-1 overflow-y-auto">*/}
+          <NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
+          {/*</div>*/}
+        </ScrollArea>
+      </div>
+    </>
+  )
+}
+
+export default History

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

@@ -346,7 +346,7 @@ const NoteForm = () => {
                 </div>
 
                 <FormControl>
-                  <div className="flex space-x-1.5">
+                  <div className="flex flex-wrap space-x-1.5">
                     {noteFormats.map(item => (
                       <label key={item.value} className="flex items-center space-x-2">
                         <Checkbox
@@ -383,7 +383,7 @@ const NoteForm = () => {
                           </Tooltip>
                         </TooltipProvider>
                       </div>
-                      <Textarea placeholder={'笔记需要罗列出 xxx 关键点'} />
+                      <Textarea placeholder={'笔记需要罗列出 xxx 关键点'} {...field} />
 
                       {/*<FormDescription className="text-xs text-neutral-500">*/}
                       {/*    质量越高，下载体积越大，速度越慢*/}
@@ -408,44 +408,8 @@ const NoteForm = () => {
         </form>
       </Form>
 
-      {/*生成历史    */}
-      <div className="my-4 flex items-center gap-2">
-        <Clock className="h-4 w-4 text-neutral-500" />
-        <h2 className="text-base font-medium text-neutral-900">生成历史</h2>
-      </div>
-      <div className="min-h-0 flex-1 overflow-auto">
-        <NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
-      </div>
-
       {/* 添加一些额外的说明或功能介绍 */}
-      {showFeatureHint && (
-        <Alert
-          message="功能介绍 v2.0.0"
-          description={
-            <ul className="space-y-2 text-sm text-neutral-600">
-              <li className="flex items-start gap-2">
-                <span className="text-primary font-bold">•</span>
-                <span>自动提取视频内容，生成结构化笔记</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-primary font-bold">•</span>
-                <span>支持多个视频平台，包括哔哩哔哩、YouTube等</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-primary font-bold">•</span>
-                <span>一键复制笔记，支持Markdown格式</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-primary font-bold">•</span>
-                <span>可选择是否插入图片</span>
-              </li>
-            </ul>
-          }
-          type="info"
-          onClose={onClose}
-          closable
-        />
-      )}
+
       {/*<div className="bg-primary-light mt-6 rounded-lg p-4"></div>*/}
     </div>
   )

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

@@ -30,76 +30,102 @@ const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
   }
 
   return (
-    <ScrollArea className="h-auto max-h-[20vh] sm:max-h-[10vh]">
-      <div className="flex flex-col space-y-2">
+    <>
+      <div className="flex flex-col gap-2">
         {tasks.map(task => (
           <div
-            key={task.id}
             className={cn(
-              'flex cursor-pointer items-center gap-4 rounded-md border p-3 transition hover:bg-neutral-50',
+              'flex cursor-pointer flex-col rounded-md border border-neutral-200 p-3',
               selectedId === task.id && 'border-primary bg-primary-light'
             )}
-            onClick={() => onSelect(task.id)}
           >
-            {/* 封面图 */}
-            <img
-              src={
-                task.audioMeta.cover_url
-                  ? `/api/image_proxy?url=${encodeURIComponent(task.audioMeta.cover_url)}`
-                  : '/placeholder.png'
-              }
-              alt="封面"
-              className="h-10 w-16 rounded-md object-cover"
-            />
+            <div
+              key={task.id}
+              className={cn('flex items-center gap-4')}
+              onClick={() => onSelect(task.id)}
+            >
+              {/* 封面图 */}
+              <img
+                src={
+                  task.audioMeta.cover_url
+                    ? `/api/image_proxy?url=${encodeURIComponent(task.audioMeta.cover_url)}`
+                    : '/placeholder.png'
+                }
+                alt="封面"
+                className="h-10 w-12 rounded-md object-cover"
+              />
 
-            {/* 标题 + 状态 */}
+              {/* 标题 + 状态 */}
 
-            <div className="flex w-full min-w-0 items-center justify-between gap-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="max-w-[120px] flex-1 truncate font-medium">
-                      {task.audioMeta.title || '未命名笔记'}
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{task.audioMeta.title || '未命名笔记'}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-              <div className="shrink-0">
-                {task.status === 'SUCCESS' && <Badge variant="default">已完成</Badge>}
-                {task.status === 'PENDING' && <Badge variant="outline">等待中</Badge>}
-                {task.status === 'FAILED' && <Badge variant="destructive">失败</Badge>}
+              <div className="flex w-full items-center justify-between gap-2">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="line-clamp-2 max-w-[180px] flex-1 overflow-hidden text-sm text-ellipsis">
+                        {task.audioMeta.title || '未命名笔记'}
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{task.audioMeta.title || '未命名笔记'}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </div>
             </div>
+            <div className={'mt-2 flex items-center justify-between text-[10px]'}>
+              <div className="shrink-0">
+                {task.status === 'SUCCESS' && (
+                  <div className={'bg-primary w-10 rounded p-0.5 text-center text-white'}>
+                    已完成
+                  </div>
+                )}
+                {task.status !== 'SUCCESS' && task.status !== 'FAILED' ? (
+                  <div className={'w-10 rounded bg-green-500 p-0.5 text-center text-white'}>
+                    等待中
+                  </div>
+                ) : (
+                  <></>
+                )}
+                {task.status === 'FAILED' && (
+                  <div className={'w-10 rounded bg-red-500 p-0.5 text-center text-white'}>失败</div>
+                )}
+              </div>
 
-            {/* 删除按钮 */}
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    size="icon"
-                    variant="ghost"
-                    onClick={e => {
-                      e.stopPropagation()
-                      removeTask(task.id)
-                    }}
-                    className="shrink-0"
-                  >
-                    <Trash className="text-muted-foreground h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>删除</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+              <div>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        size="small"
+                        variant="ghost"
+                        onClick={e => {
+                          e.stopPropagation()
+                          removeTask(task.id)
+                        }}
+                        className="shrink-0"
+                      >
+                        <Trash className="text-muted-foreground h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>删除</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              {/*<div className="shrink-0">*/}
+              {/*  {task.status === 'SUCCESS' && <Badge variant="default">已完成</Badge>}*/}
+              {/*  {task.status !== 'SUCCESS' && task.status === 'FAILED' && (*/}
+              {/*    <Badge variant="outline">等待中</Badge>*/}
+              {/*  )}*/}
+              {/*  {task.status === 'FAILED' && <Badge variant="destructive">失败</Badge>}*/}
+              {/*</div>*/}
+            </div>
           </div>
         ))}
       </div>
-    </ScrollArea>
+    </>
   )
 }
 

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

@@ -41,9 +41,8 @@ const StepBar: FC<StepBarProps> = ({ steps, currentStep }) => {
             <div className="mt-4 text-center text-xs text-gray-700">{step.label}</div>
 
             {/* 连接线 */}
-            {!isLast && (
-              <div className={`h-1 w-full ${isActive ? 'bg-primary' : 'bg-gray-300'}`}></div>
-            )}
+
+            <div className={`h-1 w-full ${isActive ? 'bg-primary' : 'bg-gray-300'}`}></div>
           </div>
         )
       })}