From 246e8a14061eb1e11ff5a5400909374b89d6d8bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=80=9D=E8=AF=BA=E7=89=B9?= <jefferyhcool@gmail.com>
Date: Sun, 27 Apr 2025 21:55:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=B8=83=E5=B1=80=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=9D=A2=E6=9D=BF=20fixes=20#123?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 react-resizable-panels 实现可调整大小的面板
- 重新布局首页结构，分为左、中、右三个可调整区域
- 更新 NoteForm 和 NoteHistory 组件以适应新布局
- 调整 History 组件样式，优化滚动体验
- 更新项目依赖，添加 react-resizable-panels
---
 BillNote_frontend/package.json                |   1 +
 .../src/components/ui/resizable.tsx           |  54 ++
 BillNote_frontend/src/index.css               |   4 +-
 BillNote_frontend/src/layouts/HomeLayout.tsx  |  91 ++--
 .../src/pages/HomePage/components/History.tsx |   2 +-
 .../pages/HomePage/components/NoteForm.tsx    | 499 +++++++++---------
 .../pages/HomePage/components/NoteHistory.tsx |   2 +-
 7 files changed, 355 insertions(+), 298 deletions(-)
 create mode 100644 BillNote_frontend/src/components/ui/resizable.tsx

diff --git a/BillNote_frontend/package.json b/BillNote_frontend/package.json
index 7ab46a7..f38bae3 100644
--- a/BillNote_frontend/package.json
+++ b/BillNote_frontend/package.json
@@ -39,6 +39,7 @@
     "react-hook-form": "^7.55.0",
     "react-hot-toast": "^2.5.2",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.8",
     "react-router-dom": "^7.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "1.0.0",
diff --git a/BillNote_frontend/src/components/ui/resizable.tsx b/BillNote_frontend/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..569328f
--- /dev/null
+++ b/BillNote_frontend/src/components/ui/resizable.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/BillNote_frontend/src/index.css b/BillNote_frontend/src/index.css
index 2f2aaed..d1bcf28 100644
--- a/BillNote_frontend/src/index.css
+++ b/BillNote_frontend/src/index.css
@@ -2,10 +2,10 @@
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
-html,body{
+html, body, #root {
   height: 100%;
-  width: 100%;
 }
+
 /* 修改滚动条轨道颜色 */
 ::-webkit-scrollbar {
   width: 8px; /* 控制滚动条的宽度 */
diff --git a/BillNote_frontend/src/layouts/HomeLayout.tsx b/BillNote_frontend/src/layouts/HomeLayout.tsx
index 8aa300c..7bb55f5 100644
--- a/BillNote_frontend/src/layouts/HomeLayout.tsx
+++ b/BillNote_frontend/src/layouts/HomeLayout.tsx
@@ -9,6 +9,7 @@ import {
 
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
+import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'
 
 interface IProps {
   NoteForm: React.ReactNode
@@ -19,59 +20,53 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
   const [, setShowSettings] = useState(false)
 
   return (
-    <div className="flex h-screen flex-col overflow-hidden bg-white">
-      <div className="flex flex-1">
-        {/* 左侧部分：Header + 表单 */}
-        <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">
-              <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
-                <img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
+    <div className="flex h-screen flex-col overflow-hidden">
+      <ResizablePanelGroup direction="horizontal" className="h-full w-full">
+        {/* 左边表单 */}
+        <ResizablePanel defaultSize={18} minSize={10} maxSize={35}>
+          <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">
+                <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
+                  <img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
+                </div>
+                <div className="text-2xl font-bold text-gray-800">BiliNote</div>
               </div>
-              <div className="text-2xl font-bold text-gray-800">BiliNote</div>
-            </div>
-            <div>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger onClick={() => setShowSettings(true)}>
-                    <Link to={'/settings'}>
-                      <SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
-                    </Link>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <span>全局配置</span>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </header>
+              <div>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger onClick={() => setShowSettings(true)}>
+                      <Link to={'/settings'}>
+                        <SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
+                      </Link>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <span>全局配置</span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            </header>
+            <div className="flex-1 overflow-auto p-4">{NoteForm}</div>
+          </aside>
+        </ResizablePanel>
 
-          {/* 表单内容 */}
-          <div className="flex-1 overflow-auto p-4">
-            {/*<NoteForm />*/}
-            {NoteForm}
-          </div>
-        </aside>
-        <aside className="flex h-full w-[300px] flex-col border-r border-neutral-200 bg-white">
-          {/* Header */}
+        <ResizableHandle />
 
-          {/* 表单内容 */}
-          {/*<NoteForm />*/}
-          {History}
-        </aside>
+        {/* 中间历史 */}
+        <ResizablePanel defaultSize={16} minSize={10} maxSize={30}>
+          <aside className="flex h-full flex-col overflow-hidden border-r border-neutral-200 bg-white">
+            <div className="flex-1 overflow-auto p-4">{History}</div>
+          </aside>
+        </ResizablePanel>
 
-        {/* 右侧预览区域 */}
-        <main className="h-screen flex-1 overflow-hidden bg-white p-6">
-          {/*<Outlet />*/}
-          {Preview}
-        </main>
-      </div>
+        <ResizableHandle />
 
-      {/* 页脚 */}
-      {/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
-      {/*    © 2025 BiliNote. All rights reserved.*/}
-      {/*</footer>*/}
+        {/* 右边预览 */}
+        <ResizablePanel defaultSize={55} minSize={30}>
+          <main className="flex h-full flex-col overflow-hidden bg-white p-6">{Preview}</main>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   )
 }
diff --git a/BillNote_frontend/src/pages/HomePage/components/History.tsx b/BillNote_frontend/src/pages/HomePage/components/History.tsx
index 6f33d35..3f34ae8 100644
--- a/BillNote_frontend/src/pages/HomePage/components/History.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/History.tsx
@@ -13,7 +13,7 @@ const History = () => {
           <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">
+        <ScrollArea className="w-full sm:h-[480px] md:h-[720px] lg:h-[92%]">
           {/*<div className="w-full flex-1 overflow-y-auto">*/}
           <NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
           {/*</div>*/}
diff --git a/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx b/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
index 04934cb..1aef1bb 100644
--- a/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
@@ -34,6 +34,7 @@ import NoteHistory from '@/pages/HomePage/components/NoteHistory.tsx'
 import { useModelStore } from '@/store/modelStore'
 import { Alert } from 'antd'
 import { Textarea } from '@/components/ui/textarea.tsx'
+import { ScrollArea } from '@/components/ui/scroll-area.tsx'
 // ✅ 定义表单 schema
 const formSchema = z.object({
   video_url: z.string().url('请输入正确的视频链接'),
@@ -150,263 +151,269 @@ const NoteForm = () => {
   }, [])
 
   return (
-    <div className="flex h-full flex-col">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          <div className="space-y-2">
-            <div className="my-3 flex items-center justify-between">
-              <h2 className="block">视频链接</h2>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">输入视频链接，支持哔哩哔哩、YouTube等平台</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
+    <div className="flex h-full w-full flex-col overflow-hidden p-4">
+      <div className="flex w-full items-center gap-2 py-1.5">
+        <Button type="submit" className="bg-primary w-full sm:w-full" disabled={isGenerating()}>
+          {isGenerating() && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {isGenerating() ? '正在生成…' : '生成笔记'}
+        </Button>
+      </div>
+      <ScrollArea className="sm:h-[400px] md:h-[800px]">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+            <div className="space-y-2">
+              <div className="my-3 flex items-center justify-between">
+                <h2 className="block">视频链接</h2>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="text-xs">输入视频链接，支持哔哩哔哩、YouTube等平台</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
 
-            <div className="flex gap-2">
-              {/* 平台选择 */}
-              <FormField
-                control={form.control}
-                name="platform"
-                render={({ field }) => (
-                  <FormItem>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger className="w-32">
-                          <SelectValue placeholder="选择平台" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="bilibili">哔哩哔哩</SelectItem>
-                        <SelectItem value="youtube">Youtube</SelectItem>
-                        {/*<SelectItem value="local">本地视频</SelectItem>*/}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* 视频地址 */}
-              <FormField
-                control={form.control}
-                name="video_url"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormControl>
-                      <Input placeholder="视频链接" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-            {/*<p className="text-xs text-neutral-500">*/}
-            {/*    支持哔哩哔哩视频链接，例如：*/}
-            {/*    https://www.bilibili.com/video/BV1vc25YQE9X/*/}
-            {/*</p>*/}
-            <FormField
-              control={form.control}
-              name="quality"
-              render={({ field }) => (
-                <FormItem>
-                  <div className="my-3 flex items-center justify-between">
-                    <h2 className="block">音频质量</h2>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p className="max-w-[200px] text-xs">质量越高，下载体积越大，速度越慢</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </div>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="选择质量" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="fast">快速（压缩）</SelectItem>
-                      <SelectItem value="medium">中等（推荐）</SelectItem>
-                      <SelectItem value="slow">高质量（清晰）</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  {/*<FormDescription className="text-xs text-neutral-500">*/}
-                  {/*    质量越高，下载体积越大，速度越慢*/}
-                  {/*</FormDescription>*/}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="model_name"
-              render={({ field }) => (
-                <FormItem>
-                  <div className="my-3 flex items-center justify-between">
-                    <h2 className="block">模型选择</h2>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p className="max-w-[200px] text-xs">不同模型返回质量不同，可自行测试</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </div>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="选择配置好的模型" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {modelList.map(item => {
-                        return <SelectItem value={item.model_name}>{item.model_name}</SelectItem>
-                      })}
-                    </SelectContent>
-                  </Select>
-                  {/*<FormDescription className="text-xs text-neutral-500">*/}
-                  {/*    质量越高，下载体积越大，速度越慢*/}
-                  {/*</FormDescription>*/}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-
-          <FormField
-            control={form.control}
-            name="style"
-            render={({ field }) => (
-              <FormItem>
-                <div className="my-3 flex items-center justify-between">
-                  <h2 className="block">笔记风格</h2>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p className="max-w-[200px] text-xs">选择你希望生成的笔记风格</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-
-                <Select onValueChange={field.onChange} defaultValue={field.value}>
-                  <FormControl>
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="选择笔记风格" />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {noteStyles.map(item => (
-                      <SelectItem key={item.value} value={item.value}>
-                        {item.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="format"
-            render={({ field }) => (
-              <FormItem>
-                <div className="my-3 flex items-center justify-between">
-                  <h2 className="block">笔记格式</h2>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p className="text-xs">选择要包含的笔记元素，比如时间戳、截图提示或总结</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-
-                <FormControl>
-                  <div className="flex flex-wrap space-x-1.5">
-                    {noteFormats.map(item => (
-                      <label key={item.value} className="flex items-center space-x-2">
-                        <Checkbox
-                          checked={field.value?.includes(item.value)}
-                          onCheckedChange={checked => {
-                            const currentValue = field.value ?? [] // ✨ 保底是数组
-                            if (checked) {
-                              field.onChange([...currentValue, item.value])
-                            } else {
-                              field.onChange(currentValue.filter(v => v !== item.value))
-                            }
-                          }}
-                        />
-                        <span>{item.label}</span>
-                      </label>
-                    ))}
-                  </div>
-                </FormControl>
+              <div className="flex gap-2">
+                {/* 平台选择 */}
                 <FormField
                   control={form.control}
-                  name="extras"
+                  name="platform"
                   render={({ field }) => (
                     <FormItem>
-                      <div className="my-3 flex items-center justify-between">
-                        <h2 className="block">备注</h2>
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p className="text-xs">会把这段加入到Prompt最后 可自行测试</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                      <Textarea placeholder={'笔记需要罗列出 xxx 关键点'} {...field} />
-
-                      {/*<FormDescription className="text-xs text-neutral-500">*/}
-                      {/*    质量越高，下载体积越大，速度越慢*/}
-                      {/*</FormDescription>*/}
+                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                        <FormControl>
+                          <SelectTrigger className="w-32">
+                            <SelectValue placeholder="选择平台" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="bilibili">哔哩哔哩</SelectItem>
+                          <SelectItem value="youtube">Youtube</SelectItem>
+                          {/*<SelectItem value="local">本地视频</SelectItem>*/}
+                        </SelectContent>
+                      </Select>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
 
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+                {/* 视频地址 */}
+                <FormField
+                  control={form.control}
+                  name="video_url"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormControl>
+                        <Input placeholder="视频链接" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              {/*<p className="text-xs text-neutral-500">*/}
+              {/*    支持哔哩哔哩视频链接，例如：*/}
+              {/*    https://www.bilibili.com/video/BV1vc25YQE9X/*/}
+              {/*</p>*/}
+              <FormField
+                control={form.control}
+                name="quality"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="my-3 flex items-center justify-between">
+                      <h2 className="block">音频质量</h2>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p className="max-w-[200px] text-xs">
+                              质量越高，下载体积越大，速度越慢
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="选择质量" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="fast">快速（压缩）</SelectItem>
+                        <SelectItem value="medium">中等（推荐）</SelectItem>
+                        <SelectItem value="slow">高质量（清晰）</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    {/*<FormDescription className="text-xs text-neutral-500">*/}
+                    {/*    质量越高，下载体积越大，速度越慢*/}
+                    {/*</FormDescription>*/}
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <div className={'flex w-full items-center gap-2 py-1.5'}>
-            {/* 提交按钮 */}
-            <Button type="submit" className="bg-primary w-full" disabled={isGenerating()}>
-              {isGenerating() && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {isGenerating() ? '正在生成…' : '生成笔记'}
-            </Button>
-          </div>
-        </form>
-      </Form>
+              <FormField
+                control={form.control}
+                name="model_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="my-3 flex items-center justify-between">
+                      <h2 className="block">模型选择</h2>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p className="max-w-[200px] text-xs">
+                              不同模型返回质量不同，可自行测试
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="选择配置好的模型" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {modelList.map(item => {
+                          return <SelectItem value={item.model_name}>{item.model_name}</SelectItem>
+                        })}
+                      </SelectContent>
+                    </Select>
+                    {/*<FormDescription className="text-xs text-neutral-500">*/}
+                    {/*    质量越高，下载体积越大，速度越慢*/}
+                    {/*</FormDescription>*/}
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="style"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="my-3 flex items-center justify-between">
+                    <h2 className="block">笔记风格</h2>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="max-w-[200px] text-xs">选择你希望生成的笔记风格</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="选择笔记风格" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {noteStyles.map(item => (
+                        <SelectItem key={item.value} value={item.value}>
+                          {item.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="format"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="my-3 flex items-center justify-between">
+                    <h2 className="block">笔记格式</h2>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="text-xs">
+                            选择要包含的笔记元素，比如时间戳、截图提示或总结
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+
+                  <FormControl>
+                    <div className="flex flex-wrap space-x-1.5">
+                      {noteFormats.map(item => (
+                        <label key={item.value} className="flex items-center space-x-2">
+                          <Checkbox
+                            checked={field.value?.includes(item.value)}
+                            onCheckedChange={checked => {
+                              const currentValue = field.value ?? [] // ✨ 保底是数组
+                              if (checked) {
+                                field.onChange([...currentValue, item.value])
+                              } else {
+                                field.onChange(currentValue.filter(v => v !== item.value))
+                              }
+                            }}
+                          />
+                          <span>{item.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                  </FormControl>
+                  <FormField
+                    control={form.control}
+                    name="extras"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="my-3 flex items-center justify-between">
+                          <h2 className="block">备注</h2>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p className="text-xs">会把这段加入到Prompt最后 可自行测试</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                        <Textarea placeholder={'笔记需要罗列出 xxx 关键点'} {...field} />
+
+                        {/*<FormDescription className="text-xs text-neutral-500">*/}
+                        {/*    质量越高，下载体积越大，速度越慢*/}
+                        {/*</FormDescription>*/}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+      </ScrollArea>
 
       {/* 添加一些额外的说明或功能介绍 */}
 
diff --git a/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx b/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
index 7c11516..7cc2e4a 100644
--- a/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
@@ -31,7 +31,7 @@ const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
 
   return (
     <>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 overflow-hidden">
         {tasks.map(task => (
           <div
             className={cn(