:feat 新增模型配置页面和相关功能

- 新增模型配置页面组件和路由 - 实现模型配置表单和相关逻辑- 添加全局配置入口和功能- 优化首页布局和样式- 新增 404 页面组件 - 更新部分组件样式和结构
2026-05-06 20:42:52 +08:00 · 2025-04-22 17:01:02 +08:00
parent 2aad103a77
commit bb974b0b89
95 changed files with 7723 additions and 1697 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -315,4 +315,5 @@ cython_debug/
 /backend/logs/
 /backend/note_results
 /backend/models
-/backend/.idea
+/backend/.idea/*
+/backend/bili_note.db
--- a/BillNote_frontend/.env
+++ b/BillNote_frontend/.env
@@ -1,3 +0,0 @@
-# 前端专用
-VITE_API_BASE_URL=http://127.0.0.1:8000
-VITE_SCREENSHOT_BASE_URL=http://127.0.0.1:8000/static/screenshots
--- a/BillNote_frontend/.prettierignore
+++ b/BillNote_frontend/.prettierignore
@@ -0,0 +1,8 @@
+dist
+build
+node_modules
+*.svg
+*.lock
+*.png
+public
+coverage
--- a/BillNote_frontend/.prettierrc
+++ b/BillNote_frontend/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
--- a/BillNote_frontend/Dockerfile
+++ b/BillNote_frontend/Dockerfile
@@ -1,32 +1,13 @@
-# === 前端构建阶段 ===
 FROM node:18-alpine AS build

-# 安装 pnpm
-RUN npm install -g pnpm
-
-# 设置工作目录
 WORKDIR /app

-# 拷贝前端源码
 COPY ./BillNote_frontend /app

-# 安装依赖并构建
-RUN pnpm install && pnpm run build
+RUN npm install && npm run build

-# === nginx 运行阶段 ===
 FROM nginx:alpine

-# 拷贝模板配置
-COPY ./BillNote_frontend/deploy/default.conf.template /etc/nginx/templates/default.conf.template
-
-# 拷贝构建产物
 COPY --from=build /app/dist /usr/share/nginx/html

-# 拷贝启动脚本
-COPY ./BillNote_frontend/deploy/start.sh /start.sh
-RUN chmod +x /start.sh
-
 EXPOSE 80
-
-# 使用启动脚本启动容器
-CMD ["/start.sh"]
--- a/BillNote_frontend/components.json
+++ b/BillNote_frontend/components.json
@@ -18,4 +18,4 @@
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
-}
+}
--- a/BillNote_frontend/deploy/default.conf.template
+++ b/BillNote_frontend/deploy/default.conf.template
@@ -1,18 +0,0 @@
-server {
-  listen 80;
-  resolver 127.0.0.11 valid=10s;
-
-  location / {
-    root /usr/share/nginx/html;
-    index index.html;
-    try_files $uri $uri/ /index.html;
-  }
-
-  location /api/ {
-    proxy_pass http://backend:${BACKEND_PORT}; 
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_set_header X-Forwarded-Proto $scheme;
-}
-}
--- a/BillNote_frontend/deploy/start.sh
+++ b/BillNote_frontend/deploy/start.sh
@@ -1,20 +0,0 @@
-#!/bin/sh
-###
- # @Author: Jefferyhcool 1063474837@qq.com
- # @Date: 2025-04-16 01:57:05
- # @LastEditors: Jefferyhcool 1063474837@qq.com
- # @LastEditTime: 2025-04-16 01:59:37
- # @FilePath: /hotfix-dev/BillNote_frontend/deploy/start.sh
- # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-### 
-# 等待后端健康检查通过
-until curl -s "http://backend:${BACKEND_PORT}/health" > /dev/null; do
-    echo "等待后端服务就绪..."
-    sleep 2
-done
-
-# 生成 nginx 配置文件（动态变量替换）
-envsubst '${BACKEND_HOST} ${BACKEND_PORT}' < /etc/nginx/templates/default.conf.template > /etc/nginx/conf.d/default.conf
-
-# 启动 Nginx（在前台运行）
-exec nginx -g 'daemon off;'
--- a/BillNote_frontend/eslint.config.js
+++ b/BillNote_frontend/eslint.config.js
@@ -19,10 +19,7 @@ export default tseslint.config(
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
-  },
+  }
 )
--- a/BillNote_frontend/package.json
+++ b/BillNote_frontend/package.json
@@ -11,12 +11,17 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
+    "@lobehub/icons": "^1.97.1",
+    "@lobehub/icons-static-svg": "^1.45.0",
    "@lottiefiles/dotlottie-react": "^0.13.3",
    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.7",
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-scroll-area": "^1.2.3",
    "@radix-ui/react-select": "^2.1.6",
    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.4",
    "@radix-ui/react-tooltip": "^1.1.8",
    "@tailwindcss/vite": "^4.1.3",
    "@uiw/react-markdown-preview": "^5.1.3",
@@ -33,6 +38,7 @@
    "react-hook-form": "^7.55.0",
    "react-hot-toast": "^2.5.2",
    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.5.1",
    "react-syntax-highlighter": "^15.6.1",
    "remark-gfm": "1.0.0",
    "sonner": "^2.0.3",
@@ -54,6 +60,8 @@
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
--- a/BillNote_frontend/postcss.config.cjs
+++ b/BillNote_frontend/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: {
-        '@tailwindcss/postcss': {},
-        autoprefixer: {},
-    },
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
 }
--- a/BillNote_frontend/src/App.tsx
+++ b/BillNote_frontend/src/App.tsx
@@ -1,16 +1,36 @@
-
 import './App.css'
-import {HomePage} from "./pages/Home.tsx";
-import {useTaskPolling} from "@/hooks/useTaskPolling.ts";
-
+import { HomePage } from './pages/HomePage/Home.tsx'
+import { useTaskPolling } from '@/hooks/useTaskPolling.ts'
+import SettingPage from './pages/SettingPage/index.tsx'
+import { BrowserRouter, Navigate, Routes } from 'react-router-dom'
+import { Route } from 'react-router-dom'
+import Index from '@/pages/Index.tsx'
+import NotFoundPage from '@/pages/NotFoundPage' //
+import Model from '@/pages/SettingPage/Model.tsx'
+import ProviderForm from '@/components/Form/modelForm/Form.tsx'
 function App() {
-    useTaskPolling(3000) // 每 3 秒轮询一次
+  useTaskPolling(3000) // 每 3 秒轮询一次

-    return (
-        <>
-            <HomePage></HomePage>
-        </>
-    )
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />}>
+            <Route index element={<HomePage />} />
+            <Route path="settings" element={<SettingPage />}>
+              <Route index element={<Navigate to="model" replace />} />
+              <Route path="model" element={<Model />}>
+                <Route index element={<Navigate to="openai" replace />} />
+                <Route path=":id" element={<ProviderForm />} />
+              </Route>
+              <Route path="*" element={<NotFoundPage />} />
+            </Route>
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  )
 }

 export default App
--- a/BillNote_frontend/src/assets/Lottie/idle.json
+++ b/BillNote_frontend/src/assets/Lottie/idle.json
--- a/BillNote_frontend/src/assets/Lottie/loading.json
+++ b/BillNote_frontend/src/assets/Lottie/loading.json
--- a/BillNote_frontend/src/components/Form/modelForm/Form.tsx
+++ b/BillNote_frontend/src/components/Form/modelForm/Form.tsx
@@ -0,0 +1,153 @@
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useParams } from 'react-router-dom';
+import { useProviderStore } from '@/store/providerStore';
+import {useEffect, useState} from 'react';
+
+// ✅ 表单校验 schema
+const ProviderSchema = z.object({
+  name: z.string().min(2, '名称不能少于 2 个字符'),
+  apiKey: z.string().optional(),
+  baseUrl: z.string().url('必须是合法 URL'),
+  type: z.string(), // 只展示，不可改
+});
+
+type ProviderFormValues = z.infer<typeof ProviderSchema>;
+
+const ProviderForm = () => {
+  const rawId= useParams();
+  console.log('rawId',rawId)
+  // @ts-ignore
+  const [providerName, idPart] = rawId.id.split('&');
+  const [id,setId ]= useState(Number(idPart?.split('=')[1])) // => "1"
+  const getProviderById = useProviderStore((state) => state.getProviderById);
+  const provider = getProviderById(id);
+
+  const form = useForm<ProviderFormValues>({
+    resolver: zodResolver(ProviderSchema),
+    defaultValues: {
+      name: '',
+      apiKey: '',
+      baseUrl: '',
+      type: '',
+    },
+  });
+
+  useEffect(() => {
+    console.log(provider)
+    // if (provider) {
+    //   form.reset({
+    //     name: provider.name,
+    //     apiKey: provider.apiKey,
+    //     baseUrl: provider.baseUrl,
+    //     type: provider.type,
+    //   });
+    // }
+  }, [id,provider, form]);
+
+  const isBuiltIn = provider?.type === 'built-in';
+
+  const onSubmit = (values: ProviderFormValues) => {
+    console.log('📝 提交表单数据:', values);
+    // TODO: 提交接口 /update_provider
+  };
+
+  // if (!provider) return <div className="p-4">加载中...</div>;
+
+  return (
+
+      <Form {...form}>
+
+        <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-full max-w-xl p-4 flex flex-col gap-4"
+        >
+          <div className="text-lg font-bold">模型供应商配置</div>
+
+          {/* 名称 */}
+          <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                  <FormItem className="flex items-center gap-4">
+                    <FormLabel className="w-24 text-right">名称</FormLabel>
+                    <FormControl>
+                      <Input {...field} disabled={isBuiltIn} className="flex-1" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+              )}
+          />
+
+          {/* API Key */}
+          <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                  <FormItem className="flex items-center gap-4">
+                    <FormLabel className="w-24 text-right">API Key</FormLabel>
+                    <FormControl>
+                      <Input placeholder={'sk-xxx'} {...field} className="flex-1" />
+                    </FormControl>
+                    <FormMessage />
+
+
+                  </FormItem>
+
+
+
+              )}
+          />
+
+          {/* Base URL */}
+          <FormField
+              control={form.control}
+              name="baseUrl"
+              render={({ field }) => (
+                  <FormItem className="flex items-center gap-4">
+                    <FormLabel className="w-24 text-right">API 代理地址</FormLabel>
+                    <FormControl>
+                      <Input {...field} className="flex-1" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+              )}
+          />
+
+          {/* 类型 */}
+          <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                  <FormItem className="flex items-center gap-4">
+                    <FormLabel className="w-24 text-right">类型</FormLabel>
+                    <FormControl>
+                      <Input {...field} disabled className="flex-1" />
+                    </FormControl>
+                  </FormItem>
+              )}
+          />
+
+          <div className="pt-2">
+            <Button type="submit" disabled={!form.formState.isDirty}>
+              保存修改
+            </Button>
+          </div>
+        </form>
+      </Form>
+  );
+};
+
+export default ProviderForm;
--- a/BillNote_frontend/src/components/Form/modelForm/Provider.tsx
+++ b/BillNote_frontend/src/components/Form/modelForm/Provider.tsx
@@ -0,0 +1,33 @@
+import ProviderCard from '@/components/Form/modelForm/components/providerCard.tsx'
+import { Button } from '@/components/ui/button.tsx'
+import { useProviderStore } from '@/store/providerStore'
+
+const Provider = () => {
+    const providers = useProviderStore(state => state.provider)
+
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className={'search flex gap-1 py-1.5'}>
+        <Button type={'button'} className="w-full">
+          添加模型供应商
+        </Button>
+      </div>
+      <div className="text-sm font-light">模型供应商列表</div>
+      <div>
+        {providers &&
+            providers.map((provider, index) => {
+            return (
+              <ProviderCard
+                key={index}
+                providerName={provider.name}
+                Icon={provider.logo}
+                id={provider.id}
+              />
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+export default Provider
--- a/BillNote_frontend/src/components/Form/modelForm/components/index.module.css
+++ b/BillNote_frontend/src/components/Form/modelForm/components/index.module.css
@@ -0,0 +1,6 @@
+.card {
+  transition: all 0.2s ease-in-out;
+}
+.card:hover {
+  background-color: #f7f7f7;
+}
--- a/BillNote_frontend/src/components/Form/modelForm/components/providerCard.tsx
+++ b/BillNote_frontend/src/components/Form/modelForm/components/providerCard.tsx
@@ -0,0 +1,43 @@
+import { Switch } from '@/components/ui/switch'
+import { FC } from 'react'
+import styles from './index.module.css'
+import {useNavigate, useParams} from 'react-router-dom'
+import AILogo from "@/components/Icons";
+export interface IProviderCardProps {
+  id: string
+  providerName: string
+  Icon: string
+}
+const ProviderCard: FC<IProviderCardProps> = ({ providerName, Icon, id }: IProviderCardProps) => {
+  const navigate = useNavigate()
+  const handleClick = () => {
+    navigate(`/settings/model/${providerName}&id=${id}`)
+  }
+  const rawId= useParams();
+  console.log('rawId',rawId)
+  // @ts-ignore
+  const { id: currentId } = useParams();
+  const isActive = currentId === id
+  return (
+    <div
+      onClick={() => {
+        handleClick()
+      }}
+      className={
+        styles.card + ' flex h-14 items-center justify-between rounded border border-[#f3f3f3] p-2'
+          +(isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
+      }
+    >
+      <div className="flex items-center text-lg">
+        <div className="h-9 w-9 flex  items-center">
+          <AILogo name={Icon}  />
+        </div>
+        <div className="font-semibold">{providerName}</div>
+      </div>
+      <div>
+        <Switch />
+      </div>
+    </div>
+  )
+}
+export default ProviderCard
--- a/BillNote_frontend/src/components/Icons/iconMap.ts
+++ b/BillNote_frontend/src/components/Icons/iconMap.ts
@@ -0,0 +1,4 @@
+// iconMap.ts
+import * as Icons from '@lobehub/icons'
+
+export const IconMap = Icons;
--- a/BillNote_frontend/src/components/Icons/index.tsx
+++ b/BillNote_frontend/src/components/Icons/index.tsx
@@ -0,0 +1,24 @@
+import * as Icons from '@lobehub/icons';
+
+interface AILogoProps {
+    name: string;               // 图标名称（区分大小写！如 OpenAI、DeepSeek）
+    style?: 'Color' | 'Text' | 'Outlined' | 'Glyph';
+    size?: number;
+}
+
+const AILogo = ({ name, style = 'Color', size = 24 }: AILogoProps) => {
+    const Icon = Icons[name as keyof typeof Icons];
+    if (!Icon) {
+        console.error(`❌ 图标组件不存在: ${name}`);
+        return <span style={{ fontSize: size }}>🚫</span>;
+    }
+
+    const Variant = Icon[style as keyof typeof Icon];
+    if (!Variant) {
+        return <Icon size={size} />;
+    }
+
+    return <Variant size={size} />;
+};
+
+export default AILogo;
--- a/BillNote_frontend/src/components/Lottie/404.tsx
+++ b/BillNote_frontend/src/components/Lottie/404.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import Lottie from 'lottie-react'
+import Animation from '@/assets/Lottie/404.json'
+
+const NotFound: FC = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <Lottie animationData={Animation} loop autoplay />
+    </div>
+  )
+}
+
+export default NotFound
--- a/BillNote_frontend/src/components/Lottie/Idle.tsx
+++ b/BillNote_frontend/src/components/Lottie/Idle.tsx
@@ -3,16 +3,11 @@ import Lottie from 'lottie-react'
 import loadingJson from '@/assets/Lottie/idle.json'

 const Idle: FC = () => {
-    return (
-        <div className="flex justify-center items-center ">
-            <Lottie
-                animationData={loadingJson}
-                loop
-                autoplay
-                style={{ width: 350, height: 350 }}
-            />
-        </div>
-    )
+  return (
+    <div className="flex items-center justify-center">
+      <Lottie animationData={loadingJson} loop autoplay style={{ width: 350, height: 350 }} />
+    </div>
+  )
 }

 export default Idle
--- a/BillNote_frontend/src/components/Lottie/Loading.tsx
+++ b/BillNote_frontend/src/components/Lottie/Loading.tsx
@@ -3,16 +3,11 @@ import Lottie from 'lottie-react'
 import loadingJson from '@/assets/Lottie/loading.json'

 const Loading: FC = () => {
-    return (
-        <div className="flex justify-center items-center ">
-            <Lottie
-                animationData={loadingJson}
-                loop
-                autoplay
-                style={{ width: 150, height: 150 }}
-            />
-        </div>
-    )
+  return (
+    <div className="flex items-center justify-center">
+      <Lottie animationData={loadingJson} loop autoplay style={{ width: 150, height: 150 }} />
+    </div>
+  )
 }

 export default Loading
--- a/BillNote_frontend/src/components/ui/badge.tsx
+++ b/BillNote_frontend/src/components/ui/badge.tsx
@@ -1,26 +1,24 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
-      variant: "default",
+      variant: 'default',
    },
  }
 )
@@ -30,17 +28,10 @@ function Badge({
  variant,
  asChild = false,
  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'

-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
 }

 export { Badge, badgeVariants }
--- a/BillNote_frontend/src/components/ui/button.tsx
+++ b/BillNote_frontend/src/components/ui/button.tsx
@@ -1,36 +1,33 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
      },
    },
    defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
    },
  }
 )
@@ -41,11 +38,11 @@ function Button({
  size,
  asChild = false,
  ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
--- a/BillNote_frontend/src/components/ui/card.tsx
+++ b/BillNote_frontend/src/components/ui/card.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
+import * as React from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className
      )}
      {...props}
@@ -15,12 +15,12 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
  )
 }

-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className
      )}
      {...props}
@@ -28,65 +28,48 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  )
 }

-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
 }

-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
 }

-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
      {...props}
    />
  )
 }

-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
 }

-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
 }

-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
--- a/BillNote_frontend/src/components/ui/checkbox.tsx
+++ b/BillNote_frontend/src/components/ui/checkbox.tsx
@@ -1,18 +1,15 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className
      )}
      {...props}
--- a/BillNote_frontend/src/components/ui/form.tsx
+++ b/BillNote_frontend/src/components/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
 import {
  Controller,
  FormProvider,
@@ -9,10 +9,10 @@ import {
  type ControllerProps,
  type FieldPath,
  type FieldValues,
-} from "react-hook-form"
+} from 'react-hook-form'

-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'

 const Form = FormProvider

@@ -23,9 +23,7 @@ type FormFieldContextValue<
  name: TName
 }

-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)

 const FormField = <
  TFieldValues extends FieldValues = FieldValues,
@@ -48,7 +46,7 @@ const useFormField = () => {
  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>')
  }

  const { id } = itemContext
@@ -67,35 +65,26 @@ type FormItemContextValue = {
  id: string
 }

-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)

-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
  const id = React.useId()

  return (
    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
    </FormItemContext.Provider>
  )
 }

-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField()

  return (
    <Label
      data-slot="form-label"
      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
+      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
@@ -109,33 +98,29 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
    <Slot
      data-slot="form-control"
      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
      aria-invalid={!!error}
      {...props}
    />
  )
 }

-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFormField()

  return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
 }

-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const body = error ? String(error?.message ?? '') : props.children

  if (!body) {
    return null
@@ -145,7 +130,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
    <p
      data-slot="form-message"
      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
+      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
--- a/BillNote_frontend/src/components/ui/input.tsx
+++ b/BillNote_frontend/src/components/ui/input.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
+import * as React from 'react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className
      )}
      {...props}
--- a/BillNote_frontend/src/components/ui/label.tsx
+++ b/BillNote_frontend/src/components/ui/label.tsx
@@ -1,19 +1,16 @@
-"use client"
+'use client'

-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className
      )}
      {...props}
--- a/BillNote_frontend/src/components/ui/scroll-area.tsx
+++ b/BillNote_frontend/src/components/ui/scroll-area.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 function ScrollArea({
  className,
@@ -11,7 +11,7 @@ function ScrollArea({
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
@@ -28,7 +28,7 @@ function ScrollArea({

 function ScrollBar({
  className,
-  orientation = "vertical",
+  orientation = 'vertical',
  ...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
@@ -36,11 +36,9 @@ function ScrollBar({
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
        className
      )}
      {...props}
--- a/BillNote_frontend/src/components/ui/select.tsx
+++ b/BillNote_frontend/src/components/ui/select.tsx
@@ -1,34 +1,28 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
 }

-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
 }

-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
 }

 function SelectTrigger({
  className,
-  size = "default",
+  size = 'default',
  children,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: 'sm' | 'default'
 }) {
  return (
    <SelectPrimitive.Trigger
@@ -51,7 +45,7 @@ function SelectTrigger({
 function SelectContent({
  className,
  children,
-  position = "popper",
+  position = 'popper',
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
@@ -59,9 +53,9 @@ function SelectContent({
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className
        )}
        position={position}
@@ -70,9 +64,9 @@ function SelectContent({
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
          )}
        >
          {children}
@@ -83,14 +77,11 @@ function SelectContent({
  )
 }

-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
@@ -127,7 +118,7 @@ function SelectSeparator({
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
@@ -140,10 +131,7 @@ function SelectScrollUpButton({
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
@@ -158,10 +146,7 @@ function SelectScrollDownButton({
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
--- a/BillNote_frontend/src/components/ui/sonner.tsx
+++ b/BillNote_frontend/src/components/ui/sonner.tsx
@@ -1,18 +1,18 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'

 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme()

  return (
    <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
      className="toaster group"
      style={
        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
        } as React.CSSProperties
      }
      {...props}
--- a/BillNote_frontend/src/components/ui/tooltip.tsx
+++ b/BillNote_frontend/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'

-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'

 function TooltipProvider({
  delayDuration = 0,
@@ -16,9 +16,7 @@ function TooltipProvider({
  )
 }

-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -26,9 +24,7 @@ function Tooltip({
  )
 }

-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }

@@ -44,7 +40,7 @@ function TooltipContent({
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className
        )}
        {...props}
--- a/BillNote_frontend/src/hooks/useTaskPolling.ts
+++ b/BillNote_frontend/src/hooks/useTaskPolling.ts
@@ -1,46 +1,45 @@
 // hooks/useTaskPolling.ts
-import { useEffect } from "react"
-import { useTaskStore } from "@/store/taskStore"
-import {get_task_status} from "@/services/note.ts";
+import { useEffect } from 'react'
+import { useTaskStore } from '@/store/taskStore'
+import { get_task_status } from '@/services/note.ts'

 export const useTaskPolling = (interval = 3000) => {
-    const tasks = useTaskStore(state => state.tasks)
-    const updateTaskContent = useTaskStore(state => state.updateTaskContent)
-    const removeTask=useTaskStore(state=>state.removeTask)
-    useEffect(() => {
-        const timer = setInterval(async () => {
-            const pendingTasks = tasks.filter(
-                (task) => task.status === "PENDING" || task.status === "running"
-            )
+  const tasks = useTaskStore(state => state.tasks)
+  const updateTaskContent = useTaskStore(state => state.updateTaskContent)
+  const removeTask = useTaskStore(state => state.removeTask)
+  useEffect(() => {
+    const timer = setInterval(async () => {
+      const pendingTasks = tasks.filter(
+        task => task.status === 'PENDING' || task.status === 'running'
+      )

-            for (const task of pendingTasks) {
-                try {
-                    console.log(task)
-                    const res = await get_task_status(task.id)
-                    const {status}=res.data
+      for (const task of pendingTasks) {
+        try {
+          console.log(task)
+          const res = await get_task_status(task.id)
+          const { status } = res.data

-                    if (status && status !== task.status) {
-                        if (status === "SUCCESS") {
-                            const {  markdown, transcript, audio_meta } = res.data.result
+          if (status && status !== task.status) {
+            if (status === 'SUCCESS') {
+              const { markdown, transcript, audio_meta } = res.data.result

-                            updateTaskContent(task.id, {
-                                status,
-                                markdown,
-                                transcript,
-                                audioMeta: audio_meta,
-                            })
-                        } else {
-                            updateTaskStatus(task.id, status)
-                        }
-                    }
-                } catch (e) {
-                    console.error("❌ 任务轮询失败：", e)
-                    removeTask(task.id)
-
-                }
+              updateTaskContent(task.id, {
+                status,
+                markdown,
+                transcript,
+                audioMeta: audio_meta,
+              })
+            } else {
+              updateTaskStatus(task.id, status)
            }
-        }, interval)
+          }
+        } catch (e) {
+          console.error('❌ 任务轮询失败：', e)
+          removeTask(task.id)
+        }
+      }
+    }, interval)

-        return () => clearInterval(timer)
-    }, [interval, tasks])
+    return () => clearInterval(timer)
+  }, [interval, tasks])
 }
--- a/BillNote_frontend/src/index.css
+++ b/BillNote_frontend/src/index.css
@@ -1,5 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@@ -11,7 +11,7 @@
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
-  --primary: #3C77FB;
+  --primary: #3c77fb;
  --primary-light: #e0eeff;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
@@ -46,8 +46,8 @@
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
-  --primary: #3C77FB;
-  --primary-light:#e0eeff;
+  --primary: #3c77fb;
+  --primary-light: #e0eeff;
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
--- a/BillNote_frontend/src/indexa.css
+++ b/BillNote_frontend/src/indexa.css
@@ -12,7 +12,7 @@
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
-  --primary: #3C77FB;
+  --primary: #3c77fb;
  --primary-light: #e0eeff;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
@@ -47,8 +47,8 @@
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
-  --primary: #3C77FB;
-  --primary-light:#e0eeff;
+  --primary: #3c77fb;
+  --primary-light: #e0eeff;
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
--- a/BillNote_frontend/src/layouts/HomeLayout.tsx
+++ b/BillNote_frontend/src/layouts/HomeLayout.tsx
@@ -1,43 +1,71 @@
-import type { FC, ReactNode } from 'react'
-import { Button } from "@/components/ui/button.tsx"
+import React, { FC } from 'react'
+import { SlidersHorizontal } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'

-interface HomeLayoutProps {
-    form: ReactNode
-    preview: ReactNode
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+interface IProps {
+  NoteForm: React.ReactNode
+  Preview: React.ReactNode
 }
+const HomeLayout: FC<IProps> = ({ NoteForm, Preview }) => {
+  const [, setShowSettings] = useState(false)

-const HomeLayout: FC<HomeLayoutProps> = ({ form, preview }) => {
-    return (
-        <div className="min-h-screen  flex flex-col bg-white">
-            <div className="flex flex-1">
-                {/* 左侧部分：Header + 表单 */}
-                <aside className="w-[400px] bg-white border-r border-neutral-200 flex flex-col">
-                    {/* Header */}
-                    <header className="h-16  flex items-center px-6 gap-2">
-                        <div className="w-10 h-10 rounded-2xl overflow-hidden flex justify-center items-center">
-                            <img src="/icon.svg" alt="logo" className="w-full h-full object-contain" />
-                        </div>
-                        <div className="text-2xl font-bold text-gray-800">BiliNote</div>
-                    </header>
-
-                    {/* 表单内容 */}
-                    <div className="flex-1 p-4 overflow-auto">
-                        {form}
-                    </div>
-                </aside>
-
-                {/* 右侧预览区域 */}
-                <main className="flex-1 h-screen p-6 bg-white overflow-hidden">
-                    {preview}
-                </main>
+  return (
+    <div className="flex min-h-screen flex-col bg-white">
+      <div className="flex flex-1">
+        {/* 左侧部分：Header + 表单 */}
+        <aside className="flex w-[400px] 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>
+              <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>

-            {/* 页脚 */}
-            {/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
-            {/*    © 2025 BiliNote. All rights reserved.*/}
-            {/*</footer>*/}
-        </div>
-    )
+          {/* 表单内容 */}
+          <div className="flex-1 overflow-auto p-4">
+            {/*<NoteForm />*/}
+            {NoteForm}
+          </div>
+        </aside>
+
+        {/* 右侧预览区域 */}
+        <main className="h-screen flex-1 overflow-hidden bg-white p-6">
+          {/*<Outlet />*/}
+          {Preview}
+        </main>
+      </div>
+
+      {/* 页脚 */}
+      {/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
+      {/*    © 2025 BiliNote. All rights reserved.*/}
+      {/*</footer>*/}
+    </div>
+  )
 }

 export default HomeLayout
--- a/BillNote_frontend/src/layouts/RootLayout.tsx
+++ b/BillNote_frontend/src/layouts/RootLayout.tsx
@@ -1,32 +1,32 @@
-import type { ReactNode, FC } from "react"
+import type { ReactNode, FC } from 'react'
 // import "@/global.css"
 import { Toaster } from 'react-hot-toast'

 interface RootLayoutProps {
-    children: ReactNode
+  children: ReactNode
 }

 export const metadata = {
-    title: "BiliNote - 视频笔记生成器",
-    description: "通过视频链接结合大模型自动生成对应的笔记",
+  title: 'BiliNote - 视频笔记生成器',
+  description: '通过视频链接结合大模型自动生成对应的笔记',
 }

 const RootLayout: FC<RootLayoutProps> = ({ children }) => {
-    return (
-        <div className="min-h-screen bg-neutral-100 text-neutral-900 font-sans">
-            <Toaster
-                position="top-center" // 顶部居中显示
-                toastOptions={{
-                    style: {
-                        borderRadius: '8px',
-                        background: '#333',
-                        color: '#fff',
-                    },
-                }}
-            />
-            {children}
-        </div>
-    )
+  return (
+    <div className="min-h-screen bg-neutral-100 font-sans text-neutral-900">
+      <Toaster
+        position="top-center" // 顶部居中显示
+        toastOptions={{
+          style: {
+            borderRadius: '8px',
+            background: '#333',
+            color: '#fff',
+          },
+        }}
+      />
+      {children}
+    </div>
+  )
 }

 export default RootLayout
--- a/BillNote_frontend/src/layouts/SettingLayout.tsx
+++ b/BillNote_frontend/src/layouts/SettingLayout.tsx
@@ -0,0 +1,63 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'
+import { Link, Outlet } from 'react-router-dom'
+import { SlidersHorizontal } from 'lucide-react'
+import React from 'react'
+interface ISettingLayoutProps {
+  Menu: React.ReactNode
+}
+const SettingLayout = ({ Menu }: ISettingLayoutProps) => {
+  return (
+    <div
+      className="h-full w-full"
+      style={{
+        backgroundColor: 'var(--color-muted)',
+      }}
+    >
+      <div className="flex flex-1">
+        {/* 左侧部分：Header + 表单 */}
+        <aside className="flex w-[300px] 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>
+              <div className="text-2xl font-bold text-gray-800">BiliNote</div>
+            </div>
+            <div>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Link to={'/'}>
+                      <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 />*/}
+            {Menu}
+          </div>
+        </aside>
+
+        {/* 右侧预览区域 */}
+        <main className="h-screen flex-1 overflow-hidden">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
+export default SettingLayout
--- a/BillNote_frontend/src/lib/utils.ts
+++ b/BillNote_frontend/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
--- a/BillNote_frontend/src/main.tsx
+++ b/BillNote_frontend/src/main.tsx
@@ -2,12 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import RootLayout from "./layouts/RootLayout.tsx";
+import RootLayout from './layouts/RootLayout.tsx'

 createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-        <RootLayout>
-            <App />
-        </RootLayout>
-    </StrictMode>,
+  <StrictMode>
+    <RootLayout>
+      <App />
+    </RootLayout>
+  </StrictMode>
 )
--- a/BillNote_frontend/src/pages/Home.tsx
+++ b/BillNote_frontend/src/pages/Home.tsx
@@ -1,42 +0,0 @@
-import React,{FC,useEffect,useState}  from "react";
-import HomeLayout from "@/layouts/HomeLayout.tsx";
-import NoteForm from '@/pages/components/NoteForm'
-import MarkdownViewer from '@/pages/components/MarkdownViewer'
-import NoteFormWrapper from "@/pages/components/NoteFormWrapper.tsx";
-import {get_task_status} from "@/services/note.ts";
-import {useTaskStore} from "@/store/taskStore";
-type ViewStatus = 'idle' | 'loading' | 'success'
-export const HomePage:FC =()=>{
-    const tasks = useTaskStore((state) => state.tasks)
-    const currentTaskId = useTaskStore((state) => state.currentTaskId)
-
-    const currentTask = tasks.find((t) => t.id === currentTaskId)
-
-    const [status, setStatus] = useState<ViewStatus>('idle')
-
-    const content = currentTask?.markdown || ''
-
-    useEffect(() => {
-        if (!currentTask) {
-            setStatus('idle')
-        } else if (currentTask.status === 'PENDING') {
-            setStatus('loading')
-        } else if (currentTask.status === 'SUCCESS') {
-            setStatus('success')
-        }
-    }, [currentTask])
-
-    // useEffect( () => {
-    //     get_task_status('d4e87938-c066-48a0-bbd5-9bec40d53354').then(res=>{
-    //         console.log('res1',res)
-    //         setContent(res.data.result.markdown)
-    //     })
-    // }, [tasks]);
-    return (
-        <HomeLayout
-            form={<NoteForm/>}
-            preview={<MarkdownViewer status={status} content={content} />}
-
-        />
-    )
-}
--- a/BillNote_frontend/src/pages/HomePage/Home.tsx
+++ b/BillNote_frontend/src/pages/HomePage/Home.tsx
@@ -0,0 +1,39 @@
+import { FC, useEffect, useState } from 'react'
+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'
+type ViewStatus = 'idle' | 'loading' | 'success'
+export const HomePage: FC = () => {
+  const tasks = useTaskStore(state => state.tasks)
+  const currentTaskId = useTaskStore(state => state.currentTaskId)
+
+  const currentTask = tasks.find(t => t.id === currentTaskId)
+
+  const [status, setStatus] = useState<ViewStatus>('idle')
+
+  const content = currentTask?.markdown || ''
+
+  useEffect(() => {
+    if (!currentTask) {
+      setStatus('idle')
+    } else if (currentTask.status === 'PENDING') {
+      setStatus('loading')
+    } else if (currentTask.status === 'SUCCESS') {
+      setStatus('success')
+    }
+  }, [currentTask])
+
+  // useEffect( () => {
+  //     get_task_status('d4e87938-c066-48a0-bbd5-9bec40d53354').then(res=>{
+  //         console.log('res1',res)
+  //         setContent(res.data.result.markdown)
+  //     })
+  // }, [tasks]);
+  return (
+    <HomeLayout
+      NoteForm={<NoteForm />}
+      Preview={<MarkdownViewer status={status} content={content} />}
+    />
+  )
+}
--- a/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/MarkdownViewer.tsx
@@ -0,0 +1,165 @@
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Button } from '@/components/ui/button.tsx'
+import { Copy, Download, FileText, ArrowRight } from 'lucide-react'
+import { toast } from 'sonner' // 你可以换成自己的通知组件
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { solarizedlight as codeStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import 'github-markdown-css/github-markdown-light.css'
+import { FC } from 'react'
+import Loading from '@/components/Lottie/Loading.tsx'
+import Idle from '@/components/Lottie/Idle.tsx'
+import { useTaskStore } from '@/store/taskStore'
+interface MarkdownViewerProps {
+  content: string
+  status: 'idle' | 'loading' | 'success'
+}
+
+const MarkdownViewer: FC<MarkdownViewerProps> = ({ content, status }) => {
+  const [copied, setCopied] = useState(false)
+  const getCurrentTask = useTaskStore.getState().getCurrentTask
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopied(true)
+      toast.success('已复制到剪贴板')
+      setTimeout(() => setCopied(false), 2000)
+    } catch (e) {
+      toast.error(`复制失败${e}`)
+      toast.error('复制失败', e)
+    }
+  }
+
+  const handleDownload = () => {
+    const currentTask = getCurrentTask()
+    const currentTaskName = currentTask?.audioMeta.title
+    const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = `${currentTaskName}.md`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+  if (status === 'loading') {
+    return (
+      <div className="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
+        <Loading className="h-5 w-5" />
+        <div className="text-center text-sm">
+          <p className="text-lg font-bold">正在生成笔记，请稍候…</p>
+          <p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
+        </div>
+      </div>
+    )
+  } else if (status === 'idle') {
+    return (
+      <div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
+        <Idle></Idle>
+
+        <div className="text-center">
+          <p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
+          <p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 等视频平台</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      {/* 顶部操作栏 */}
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="flex items-center gap-2 text-xl font-semibold text-neutral-900">
+          <FileText className="text-primary h-5 w-5" />
+          笔记内容
+        </h2>
+        <div className="flex items-center gap-2">
+          <Button onClick={handleCopy} variant="outline" size="sm">
+            <Copy className="mr-1 h-4 w-4" />
+            {copied ? '已复制' : '复制'}
+          </Button>
+          <Button onClick={handleDownload} variant="outline" size="sm">
+            <Download className="mr-1 h-4 w-4" />
+            导出 Markdown
+          </Button>
+        </div>
+      </div>
+
+      {/* 滚动容器 */}
+
+      <div className="overflow-y-auto">
+        {(content && content != 'loading') || content != 'empty' ? (
+          <div className="markdown-body flex-1 bg-white">
+            {' '}
+            <ReactMarkdown
+              components={{
+                code({ node, inline, className, children, ...props }) {
+                  const match = /language-(\w+)/.exec(className || '')
+                  const codeContent = String(children).replace(/\n$/, '')
+
+                  if (!inline && match) {
+                    return (
+                      <div className="group relative">
+                        <SyntaxHighlighter
+                          style={codeStyle}
+                          language={match[1]}
+                          PreTag="div"
+                          {...props}
+                        >
+                          {codeContent}
+                        </SyntaxHighlighter>
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(codeContent)
+                            toast.success('代码已复制')
+                          }}
+                          className="absolute top-2 right-2 hidden items-center gap-1 rounded border border-gray-300 bg-white/70 px-2 py-1 text-xs shadow-sm transition group-hover:flex hover:bg-white"
+                        >
+                          <Copy className="h-3 w-3" />
+                          复制
+                        </button>
+                      </div>
+                    )
+                  }
+
+                  return (
+                    <code className="rounded bg-gray-100 px-1 py-0.5 text-sm" {...props}>
+                      {children}
+                    </code>
+                  )
+                },
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <div className="flex h-screen w-full items-center justify-center">
+            <div className="w-[300px] flex-col justify-items-center">
+              <div className="bg-primary-light mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+                <ArrowRight className="text-primary h-8 w-8" />
+              </div>
+              <p className="mb-2 text-neutral-600">输入视频链接并点击"生成笔记"按钮</p>
+              <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
+            </div>
+          </div>
+        )}
+      </div>
+      {/*<div className="markdown-body flex-1 overflow-y-auto bg-white">*/}
+      {/*    {content ? (*/}
+      {/*      */}
+      {/*    ) : (*/}
+      {/*        <>*/}
+      {/*            <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">*/}
+      {/*                <ArrowRight className="h-8 w-8 text-primary" />*/}
+      {/*            </div>*/}
+      {/*            <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>*/}
+      {/*            <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube、腾讯视频和爱奇艺</p>*/}
+      {/*        </>*/}
+      {/*    )}*/}
+      {/*</div>*/}
+    </div>
+  )
+}
+
+export default MarkdownViewer
--- a/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
@@ -0,0 +1,263 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form.tsx'
+import { Input } from '@/components/ui/input.tsx'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.tsx'
+import { Button } from '@/components/ui/button.tsx'
+import { Checkbox } from '@/components/ui/checkbox.tsx'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Info, Clock, Loader2 } from 'lucide-react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'
+import { generateNote } from '@/services/note.ts'
+import { useTaskStore } from '@/store/taskStore'
+import NoteHistory from '@/pages/HomePage/components/NoteHistory.tsx'
+
+// ✅ 定义表单 schema
+const formSchema = z.object({
+  video_url: z.string().url('请输入正确的视频链接'),
+  platform: z.string().nonempty('请选择平台'),
+  quality: z.enum(['fast', 'medium', 'slow'], {
+    required_error: '请选择音频质量',
+  }),
+  screenshot: z.boolean().optional(),
+  link: z.boolean().optional(),
+})
+
+type NoteFormValues = z.infer<typeof formSchema>
+
+const NoteForm = () => {
+  useTaskStore(state => state.tasks)
+  const setCurrentTask = useTaskStore(state => state.setCurrentTask)
+  const currentTaskId = useTaskStore(state => state.currentTaskId)
+  const getCurrentTask = useTaskStore(state => state.getCurrentTask)
+  const form = useForm<NoteFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      video_url: '',
+      platform: 'bilibili',
+      quality: 'medium', // 默认中等质量
+      screenshot: false,
+    },
+  })
+
+  const isGenerating = () => {
+    console.log('🚀 isGenerating', getCurrentTask()?.status)
+    return getCurrentTask()?.status === 'PENDING'
+  }
+
+  const onSubmit = async (data: NoteFormValues) => {
+    console.log('🎯 提交内容：', data)
+    await generateNote({
+      video_url: data.video_url,
+      platform: data.platform,
+      quality: data.quality,
+      screenshot: data.screenshot,
+      link: data.link,
+    })
+  }
+
+  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 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>
+              )}
+            />
+          </div>
+
+          {/* 是否需要原片位置 */}
+          <FormField
+            control={form.control}
+            name="link"
+            render={({ field }) => (
+              <FormItem className="flex items-center space-x-2">
+                {/* Tooltip 部分 */}
+
+                <FormControl>
+                  <Checkbox checked={field.value} onCheckedChange={field.onChange} id="link" />
+                </FormControl>
+
+                <FormLabel htmlFor="link" className="text-sm leading-none font-medium">
+                  是否插入内容跳转链接
+                </FormLabel>
+              </FormItem>
+            )}
+          />
+          {/* 是否需要下载 */}
+          <FormField
+            control={form.control}
+            name="screenshot"
+            render={({ field }) => (
+              <FormItem className="flex items-center space-x-2">
+                {/* Tooltip 部分 */}
+
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                    id="screenshot"
+                  />
+                </FormControl>
+
+                <FormLabel htmlFor="screenshot" className="text-sm leading-none font-medium">
+                  是否插入视频截图
+                </FormLabel>
+              </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>
+
+      {/*生成历史    */}
+      <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>
+
+      {/* 添加一些额外的说明或功能介绍 */}
+      <div className="bg-primary-light mt-6 rounded-lg p-4">
+        <h3 className="text-primary mb-2 font-medium">功能介绍</h3>
+        <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>
+      </div>
+    </div>
+  )
+}
+
+export default NoteForm
--- a/BillNote_frontend/src/pages/HomePage/components/NoteFormWrapper.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/NoteFormWrapper.tsx
@@ -0,0 +1,15 @@
+import { useForm } from 'react-hook-form'
+import { Form } from '@/components/ui/form.tsx'
+import NoteForm from './NoteForm.tsx'
+
+const NoteFormWrapper = () => {
+  const form = useForm()
+
+  return (
+    <Form {...form}>
+      <NoteForm />
+    </Form>
+  )
+}
+
+export default NoteFormWrapper
--- a/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
+++ b/BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
@@ -0,0 +1,106 @@
+import { useTaskStore } from '@/store/taskStore'
+import { FC } from 'react'
+import { ScrollArea } from '@/components/ui/scroll-area.tsx'
+import { Badge } from '@/components/ui/badge.tsx'
+import { cn } from '@/lib/utils.ts'
+import { Trash } from 'lucide-react'
+import { Button } from '@/components/ui/button.tsx'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'
+
+interface NoteHistoryProps {
+  onSelect: (taskId: string) => void
+  selectedId: string | null
+}
+
+const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
+  const tasks = useTaskStore(state => state.tasks)
+  const removeTask = useTaskStore(state => state.removeTask)
+
+  if (tasks.length === 0) {
+    return (
+      <div className="rounded-md border border-neutral-200 bg-neutral-50 py-6 text-center">
+        <p className="text-sm text-neutral-500">暂无历史记录</p>
+      </div>
+    )
+  }
+
+  return (
+    <ScrollArea className="h-auto max-h-[20vh] sm:max-h-[10vh]">
+      <div className="flex flex-col space-y-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',
+              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 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>
+            </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>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
+
+export default NoteHistory
--- a/BillNote_frontend/src/pages/Index.tsx
+++ b/BillNote_frontend/src/pages/Index.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom'
+
+const Index = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  )
+}
+export default Index
--- a/BillNote_frontend/src/pages/NotFoundPage/index.tsx
+++ b/BillNote_frontend/src/pages/NotFoundPage/index.tsx
@@ -0,0 +1,25 @@
+// src/pages/NotFoundPage.tsx
+import NotFound from '@/components/Lottie/404.tsx'
+import { Button } from '@/components/ui/button.tsx'
+import { useNavigate } from 'react-router-dom'
+
+const NotFoundPage = () => {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center text-gray-500">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">你好像走丢了哦！～～</h1>
+        <p className="mb-4 text-lg">请检查你的网址是否正确，或者点击下面的按钮返回首页。</p>
+        <Button onClick={() => navigate('/')} className="hover:underline">
+          返回首页
+        </Button>
+      </div>
+      <div>
+        <NotFound />
+      </div>
+    </div>
+  )
+}
+
+export default NotFoundPage
--- a/BillNote_frontend/src/pages/SettingPage/Menu.tsx
+++ b/BillNote_frontend/src/pages/SettingPage/Menu.tsx
@@ -0,0 +1,48 @@
+import { BotMessageSquare, Captions, HardDriveDownload, Wrench } from 'lucide-react'
+import MenuBar, { IMenuProps } from '@/pages/SettingPage/components/menuBar.tsx'
+
+const Menu = () => {
+  const menuList: IMenuProps[] = [
+    {
+      id: 'model',
+      name: 'AI 模型设置',
+      icon: <BotMessageSquare />,
+      path: '/settings/model',
+    },
+    {
+      id: ' transcriber',
+      name: '音频转译配置',
+      icon: <Captions />,
+      path: '/settings/transcriber',
+    },
+    //下载配置
+    {
+      id: 'download',
+      name: '下载配置',
+      icon: <HardDriveDownload />,
+      path: '/settings/download',
+    },
+    //其他配置
+    {
+      id: 'other',
+      name: '其他配置',
+      icon: <Wrench />,
+      path: '/settings/other',
+    },
+  ]
+  return (
+    <div className="flex h-full flex-col">
+      <div className={'flex w-full flex-col gap-2'}>
+        <div className="text-2xl font-medium">设置</div>
+        <div className="text-sm font-light text-gray-800">全局配置与模型设置</div>
+      </div>
+      <div className="mt-6 flex-1">
+        {menuList &&
+          menuList.map(item => {
+            return <MenuBar key={item.id} menuItem={item} />
+          })}
+      </div>
+    </div>
+  )
+}
+export default Menu
--- a/BillNote_frontend/src/pages/SettingPage/Model.tsx
+++ b/BillNote_frontend/src/pages/SettingPage/Model.tsx
@@ -0,0 +1,16 @@
+import Provider from '@/components/Form/modelForm/Provider.tsx'
+import { Outlet } from 'react-router-dom'
+
+const Model = () => {
+  return (
+    <div className={'flex h-full bg-white'}>
+      <div className={'flex-1/5 border-r border-neutral-200 p-2'}>
+        <Provider></Provider>
+      </div>
+      <div className={'flex-4/5'}>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+export default Model
--- a/BillNote_frontend/src/pages/SettingPage/components/index.module.css
+++ b/BillNote_frontend/src/pages/SettingPage/components/index.module.css
@@ -0,0 +1,7 @@
+.menuBar {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.menuBar:hover {
+  background-color: #f7f7f7;
+}
--- a/BillNote_frontend/src/pages/SettingPage/components/menuBar.tsx
+++ b/BillNote_frontend/src/pages/SettingPage/components/menuBar.tsx
@@ -0,0 +1,37 @@
+import styles from './index.module.css'
+import { FC, JSX } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+export interface IMenuProps {
+  id: string
+  name: string
+  icon: JSX.Element
+  path: string
+}
+
+interface IMenuItem {
+  menuItem: IMenuProps
+}
+
+const MenuBar: FC<IMenuItem> = ({ menuItem }) => {
+  const location = useLocation()
+  const isActive = location.pathname.startsWith(menuItem.path + '/')
+      || location.pathname === menuItem.path
+
+  return (
+    <Link to={menuItem.path} className="w-full">
+      <div
+        className={
+          styles.menuBar +
+          ' flex h-12 w-full items-center gap-1 rounded px-2' +
+          (isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
+        }
+      >
+        <div className="h-6 w-6">{menuItem.icon}</div>
+        <div className="text-[16px]">{menuItem.name}</div>
+      </div>
+    </Link>
+  )
+}
+
+export default MenuBar
--- a/BillNote_frontend/src/pages/SettingPage/index.tsx
+++ b/BillNote_frontend/src/pages/SettingPage/index.tsx
@@ -0,0 +1,17 @@
+import SettingLayout from '@/layouts/SettingLayout.tsx'
+import Menu from '@/pages/SettingPage/Menu'
+import { useProviderStore } from '@/store/providerStore'
+import { useEffect } from 'react'
+
+const SettingPage = () => {
+  const fetchProviderList = useProviderStore(state => state.fetchProviderList)
+  useEffect(() => {
+    fetchProviderList()
+  }, [])
+  return (
+    <div className="h-full w-full">
+      <SettingLayout Menu={<Menu />} />
+    </div>
+  )
+}
+export default SettingPage
--- a/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
@@ -1,168 +0,0 @@
-import { useState } from "react"
-import ReactMarkdown from "react-markdown"
-import { Button } from "@/components/ui/button"
-import { Copy, Download, FileText,ArrowRight } from "lucide-react"
-import { toast } from "sonner" // 你可以换成自己的通知组件
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { solarizedlight as codeStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-import 'github-markdown-css/github-markdown-light.css'
-import {FC} from 'react'
-import Loading from "@/components/Lottie/Loading.tsx";
-import Idle from "@/components/Lottie/Idle.tsx";
-import {useTaskStore} from "@/store/taskStore";
-interface MarkdownViewerProps {
-    content: string
-    status: 'idle' | 'loading' | 'success'
-}
-
-const MarkdownViewer: FC<MarkdownViewerProps> = ({ content, status }) => {
-    const [copied, setCopied] = useState(false)
-    const getCurrentTask =useTaskStore.getState().getCurrentTask
-    const handleCopy = async () => {
-        try {
-            await navigator.clipboard.writeText(content)
-            setCopied(true)
-            toast.success("已复制到剪贴板")
-            setTimeout(() => setCopied(false), 2000)
-        } catch (e) {
-            toast.error(`复制失败${e}`)
-            toast.error("复制失败",e)
-        }
-    }
-
-    const handleDownload = () => {
-        const currentTask=getCurrentTask()
-        const currentTaskName=currentTask?.audioMeta.title
-        const blob = new Blob([content], { type: "text/markdown;charset=utf-8" })
-        const link = document.createElement("a")
-        link.href = URL.createObjectURL(blob)
-        link.download = `${currentTaskName}.md`
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-    }
-    if (status === 'loading') {
-        return (
-            <div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-4">
-                <Loading className='h-5 w-5' />
-                <div className="text-center text-sm">
-                    <p className="text-lg font-bold">正在生成笔记，请稍候…</p>
-                    <p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
-                </div>
-            </div>
-
-        )
-    }
-    else if (status === 'idle'){
-        return (
-            <div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-3">
-
-                    <Idle ></Idle>
-
-                <div className="text-center">
-                    <p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
-                    <p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 等视频平台</p>
-                </div>
-            </div>
-
-        )
-    }
-
-    return (
-        <div className="w-full h-full flex flex-col">
-            {/* 顶部操作栏 */}
-            <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold text-neutral-900 flex items-center gap-2">
-                    <FileText className="w-5 h-5 text-primary" />
-                    笔记内容
-                </h2>
-                <div className="flex items-center gap-2">
-                    <Button onClick={handleCopy} variant="outline" size="sm">
-                        <Copy className="w-4 h-4 mr-1" />
-                        {copied ? "已复制" : "复制"}
-                    </Button>
-                    <Button onClick={handleDownload} variant="outline" size="sm">
-                        <Download className="w-4 h-4 mr-1" />
-                        导出 Markdown
-                    </Button>
-                </div>
-            </div>
-
-            {/* 滚动容器 */}
-
-            <div className='overflow-y-auto'>
-                {
-                    content && content!='loading' || content!='empty'?(
-                        <div className="markdown-body flex-1  bg-white">  <ReactMarkdown
-
-                            components={{
-                                code({ node, inline, className, children, ...props }) {
-                                    const match = /language-(\w+)/.exec(className || '')
-                                    const codeContent = String(children).replace(/\n$/, '')
-
-                                    if (!inline && match) {
-                                        return (
-                                            <div className="relative group">
-                                                <SyntaxHighlighter
-                                                    style={codeStyle}
-                                                    language={match[1]}
-                                                    PreTag="div"
-                                                    {...props}
-                                                >
-                                                    {codeContent}
-                                                </SyntaxHighlighter>
-                                                <button
-                                                    onClick={() => {
-                                                        navigator.clipboard.writeText(codeContent)
-                                                        toast.success("代码已复制")
-                                                    }}
-                                                    className="absolute top-2 right-2 hidden group-hover:flex items-center gap-1 text-xs px-2 py-1 bg-white/70 border border-gray-300 rounded hover:bg-white shadow-sm transition"
-                                                >
-                                                    <Copy className="w-3 h-3" />
-                                                    复制
-                                                </button>
-                                            </div>
-                                        )
-                                    }
-
-                                    return (
-                                        <code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>
-                                            {children}
-                                        </code>
-                                    )
-                                }
-                            }}
-                        >
-                            {content}
-                        </ReactMarkdown></div>
-                    ):(
-                        <div className='w-full h-screen flex justify-center items-center'>
-                           <div className='w-[300px] flex-col justify-items-center '>
-                               <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">
-                                    <ArrowRight className="h-8 w-8 text-primary" />
-                               </div>
-                               <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>
-                               <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
-                           </div>
-                        </div>
-                    )
-                }
-            </div>
-            {/*<div className="markdown-body flex-1 overflow-y-auto bg-white">*/}
-            {/*    {content ? (*/}
-            {/*      */}
-            {/*    ) : (*/}
-            {/*        <>*/}
-            {/*            <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">*/}
-            {/*                <ArrowRight className="h-8 w-8 text-primary" />*/}
-            {/*            </div>*/}
-            {/*            <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>*/}
-            {/*            <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube、腾讯视频和爱奇艺</p>*/}
-            {/*        </>*/}
-            {/*    )}*/}
-            {/*</div>*/}
-        </div>
-    )
-}
-
-export default MarkdownViewer
--- a/BillNote_frontend/src/pages/components/NoteForm.tsx
+++ b/BillNote_frontend/src/pages/components/NoteForm.tsx
@@ -1,287 +0,0 @@
-import {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Info,Clock } from "lucide-react"
-
-import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
-import {generateNote} from "@/services/note.ts";
-import {useTaskStore} from "@/store/taskStore";
-import { useState } from "react"
-import NoteHistory from "@/pages/components/NoteHistory.tsx";
-
-// ✅ 定义表单 schema
-const formSchema = z.object({
-    video_url: z.string().url("请输入正确的视频链接"),
-    platform: z.string().nonempty("请选择平台"),
-    quality: z.enum(["fast", "medium", "slow"], {
-        required_error: "请选择音频质量",
-    }),
-    screenshot: z.boolean().optional(),
-    link:z.boolean().optional(),
-})
-
-
-type NoteFormValues = z.infer<typeof formSchema>
-
-const NoteForm = () => {
-    const [selectedTaskId] = useState<string | null>(null)
-
-    const tasks = useTaskStore((state) => state.tasks)
-    const setCurrentTask=useTaskStore((state)=>state.setCurrentTask)
-    const currentTaskId=useTaskStore(state=>state.currentTaskId )
-    tasks.find((t) => t.id === selectedTaskId);
-    const form = useForm<NoteFormValues>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            video_url: "",
-            platform: "bilibili",
-            quality: "medium", // 默认中等质量
-            screenshot: false,
-        },
-    })
-
-
-    const isGenerating = false
-
-    const onSubmit = async (data: NoteFormValues) => {
-        console.log("🎯 提交内容：", data)
-        await generateNote({
-            video_url: data.video_url,
-            platform: data.platform,
-            quality: data.quality,
-            screenshot:data.screenshot,
-            link:data.link
-        });
-    }
-
-    return (
-        <div className="flex flex-col h-full">
-            <Form {...form}>
-                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-                    <div className="space-y-2">
-                        <div className="flex items-center justify-between my-3">
-                            <h2 className="block  ">视频链接</h2>
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
-                                    </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="flex items-center justify-between my-3">
-                                        <h2 className="block  ">音频质量</h2>
-                                        <TooltipProvider>
-                                            <Tooltip>
-                                                <TooltipTrigger asChild>
-                                                    <Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
-                                                </TooltipTrigger>
-                                                <TooltipContent>
-                                                    <p className="text-xs max-w-[200px]">质量越高，下载体积越大，速度越慢</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>
-
-                    {/* 是否需要原片位置 */}
-                    <FormField
-                        control={form.control}
-                        name="link"
-                        render={({ field }) => (
-                            <FormItem className="flex items-center space-x-2">
-                                {/* Tooltip 部分 */}
-
-
-                                <FormControl>
-                                    <Checkbox
-                                        checked={field.value}
-                                        onCheckedChange={field.onChange}
-                                        id="link"
-                                    />
-                                </FormControl>
-
-                                <FormLabel
-                                    htmlFor="link"
-                                    className="text-sm font-medium leading-none"
-                                >
-                                    是否插入内容跳转链接
-                                </FormLabel>
-                            </FormItem>
-                        )}
-                    />
-                    {/* 是否需要下载 */}
-                    <FormField
-                        control={form.control}
-                        name="screenshot"
-                        render={({ field }) => (
-                            <FormItem className="flex items-center space-x-2">
-                                {/* Tooltip 部分 */}
-
-
-                                <FormControl>
-                                    <Checkbox
-                                        checked={field.value}
-                                        onCheckedChange={field.onChange}
-                                        id="screenshot"
-                                    />
-                                </FormControl>
-
-                                <FormLabel
-                                    htmlFor="screenshot"
-                                    className="text-sm font-medium leading-none"
-                                >
-                                    是否插入视频截图
-                                </FormLabel>
-                            </FormItem>
-                        )}
-                    />
-
-                    {/* 提交按钮 */}
-                    <Button
-                        type="submit"
-                        className="w-full bg-primary cursor-pointer"
-                    >
-                        {isGenerating ? "正在生成…" : "生成笔记"}
-                    </Button>
-                </form>
-            </Form>
-
-
-            {/*生成历史    */}
-            <div className="flex items-center gap-2 my-4">
-                <Clock className="h-4 w-4 text-neutral-500" />
-                <h2 className="text-base font-medium text-neutral-900">生成历史</h2>
-            </div>
-            <div className="flex-1 min-h-0 overflow-auto">
-                <NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
-
-            </div>
-
-            {/* 添加一些额外的说明或功能介绍 */}
-            <div className="mt-6 p-4 bg-primary-light rounded-lg">
-                <h3 className="font-medium text-primary mb-2">功能介绍</h3>
-                <ul className="text-sm space-y-2 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>
-            </div>
-        </div>
-    )
-}
-
-export default NoteForm
--- a/BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
+++ b/BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
@@ -1,15 +0,0 @@
-import { useForm } from "react-hook-form"
-import { Form } from "@/components/ui/form"
-import NoteForm from "./NoteForm"
-
-const NoteFormWrapper = () => {
-    const form = useForm()
-
-    return (
-        <Form {...form}>
-            <NoteForm />
-        </Form>
-    )
-}
-
-export default NoteFormWrapper
--- a/BillNote_frontend/src/pages/components/NoteHistory.tsx
+++ b/BillNote_frontend/src/pages/components/NoteHistory.tsx
@@ -1,100 +0,0 @@
-import { useTaskStore } from "@/store/taskStore"
-import { FC } from "react"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-import { Trash ,Clock} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-
-interface NoteHistoryProps {
-    onSelect: (taskId: string) => void
-    selectedId: string | null
-}
-
-const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
-    const tasks = useTaskStore((state) => state.tasks)
-    const removeTask = useTaskStore((state) => state.removeTask)
-
-    if (tasks.length === 0) {
-        return (
-            <div className="text-center py-6 bg-neutral-50 rounded-md border border-neutral-200">
-                <p className="text-sm text-neutral-500">暂无历史记录</p>
-            </div>
-        )
-    }
-
-    return (
-        <ScrollArea className="h-auto max-h-[20vh] sm:max-h-[10vh]">
-
-        <div className="flex flex-col space-y-2">
-                {tasks.map((task) => (
-                    <div
-                        key={task.id}
-                        className={cn(
-                            "flex items-center gap-4 p-3 cursor-pointer transition hover:bg-neutral-50 rounded-md border",
-                            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="w-16 h-10 object-cover rounded-md"
-                        />
-
-                        {/* 标题 + 状态 */}
-
-                        <div className="flex items-center justify-between gap-2 min-w-0 w-full">
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <div className="font-medium max-w-[120px] truncate flex-1">{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>
-                        </div>
-
-
-                        {/* 删除按钮 */}
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        type="button"
-                                        size="icon"
-                                        variant="ghost"
-                                        onClick={(e) => {
-                                            e.stopPropagation()
-                                            removeTask(task.id)
-                                        }}
-                                        className="shrink-0"
-                                    >
-                                        <Trash className="w-4 h-4 text-muted-foreground" />
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>删除</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-
-                ))}
-            </div>
-        </ScrollArea>
-    )
-}
-
-export default NoteHistory
--- a/BillNote_frontend/src/services/model.ts
+++ b/BillNote_frontend/src/services/model.ts
@@ -0,0 +1,5 @@
+import request from '@/utils/request.ts'
+
+export const getProviderList = async () => {
+  return await request.get('/get_all_providers')
+}
--- a/BillNote_frontend/src/services/note.ts
+++ b/BillNote_frontend/src/services/note.ts
@@ -1,97 +1,81 @@
-import request from "@/utils/request"
+import request from '@/utils/request'
 import toast from 'react-hot-toast'
-import {useTaskStore} from "@/store/taskStore";
-import request from "@/utils/request"
-interface GenerateNotePayload {
-    video_url: string
-    platform: "bilibili" | "youtube"
-    quality: "fast" | "medium" | "slow"
-}
-
+import { useTaskStore } from '@/store/taskStore'
+import request from '@/utils/request'
 export const generateNote = async (data: {
-    video_url: string;
-    link: undefined | boolean;
-    screenshot: undefined | boolean;
-    platform: string;
-    quality: string
+  video_url: string
+  link: undefined | boolean
+  screenshot: undefined | boolean
+  platform: string
+  quality: string
 }) => {
-    try {
-        const response = await request.post("/generate_note", data)
+  try {
+    const response = await request.post('/generate_note', data)

-        if (response.data.code!=0){
-            if (response.data.msg){
-                toast.error(response.data.msg)
-
-            }
-            return null
-        }
-        toast.success("笔记生成任务已提交！")
-
-        const taskId = response.data.data.task_id
-
-        console.log('res',response)
-        // 成功提示
-        useTaskStore.getState().addPendingTask(taskId, data.platform)
-
-        return response.data
-    } catch (e: any) {
-        console.error("❌ 请求出错", e)
-
-        // 错误提示
-        toast.error(
-             "笔记生成失败，请稍后重试"
-        )
-
-        throw e // 抛出错误以便调用方处理
+    if (response.data.code != 0) {
+      if (response.data.msg) {
+        toast.error(response.data.msg)
+      }
+      return null
    }
+    toast.success('笔记生成任务已提交！')
+
+    const taskId = response.data.data.task_id
+
+    console.log('res', response)
+    // 成功提示
+    useTaskStore.getState().addPendingTask(taskId, data.platform)
+
+    return response.data
+  } catch (e: any) {
+    console.error('❌ 请求出错', e)
+
+    // 错误提示
+    toast.error('笔记生成失败，请稍后重试')
+
+    throw e // 抛出错误以便调用方处理
+  }
 }

-
-
-export const delete_task = async ({video_id, platform}) => {
-    try {
-        const data={
-            video_id,platform
-        }
-        const res = await request.post("/delete_task",
-            data
-        )
-
-        if (res.data.code === 0) {
-            toast.success("任务已成功删除")
-            return res.data
-        } else {
-            toast.error(res.data.message || "删除失败")
-            throw new Error(res.data.message || "删除失败")
-        }
-    } catch (e) {
-        toast.error("请求异常，删除任务失败")
-        console.error("❌ 删除任务失败:", e)
-        throw e
+export const delete_task = async ({ video_id, platform }) => {
+  try {
+    const data = {
+      video_id,
+      platform,
    }
+    const res = await request.post('/delete_task', data)
+
+    if (res.data.code === 0) {
+      toast.success('任务已成功删除')
+      return res.data
+    } else {
+      toast.error(res.data.message || '删除失败')
+      throw new Error(res.data.message || '删除失败')
+    }
+  } catch (e) {
+    toast.error('请求异常，删除任务失败')
+    console.error('❌ 删除任务失败:', e)
+    throw e
+  }
 }

+export const get_task_status = async (task_id: string) => {
+  try {
+    const response = await request.get('/task_status/' + task_id)

-export const get_task_status=async (task_id:string)=>{
-    try {
-        const response = await request.get("/task_status/"+task_id)
-
-        if (response.data.code==0 && response.data.status=='SUCCESS') {
-            // toast.success("笔记生成成功")
-        }
-        console.log('res',response)
-        // 成功提示
-
-        return response.data
+    if (response.data.code == 0 && response.data.status == 'SUCCESS') {
+      // toast.success("笔记生成成功")
    }
-    catch (e){
-        console.error("❌ 请求出错", e)
+    console.log('res', response)
+    // 成功提示

-        // 错误提示
-        toast.error(
-            "笔记生成失败，请稍后重试"
-        )
+    return response.data
+  } catch (e) {
+    console.error('❌ 请求出错', e)

-        throw e // 抛出错误以便调用方处理
-    }
-}
+    // 错误提示
+    toast.error('笔记生成失败，请稍后重试')
+
+    throw e // 抛出错误以便调用方处理
+  }
+}
--- a/BillNote_frontend/src/store/providerStore/index.ts
+++ b/BillNote_frontend/src/store/providerStore/index.ts
@@ -0,0 +1,67 @@
+import { create } from 'zustand'
+import { IProvider } from '@/types'
+import { getProviderList } from '@/services/model.ts'
+
+interface ProviderStore {
+  provider: IProvider[]
+  setProvider: (provider: IProvider) => void
+  setAllProviders: (providers: IProvider[]) => void
+  getProviderById: (id: number) => IProvider | undefined
+  getProviderList: () => IProvider[]
+  fetchProviderList: () => Promise<void>
+}
+
+export const useProviderStore = create<ProviderStore>((set, get) => ({
+  provider: [],
+
+
+  // 添加或更新一个 provider
+  setProvider: newProvider =>
+    set(state => {
+      const exists = state.provider.find(p => p.id === newProvider.id)
+      if (exists) {
+        return {
+          provider: state.provider.map(p => (p.id === newProvider.id ? newProvider : p)),
+        }
+      } else {
+        return { provider: [...state.provider, newProvider] }
+      }
+    }),
+
+  // 设置整个 provider 列表
+  setAllProviders: providers => set({ provider: providers }),
+
+  // 按 id 获取单个 provider
+  getProviderById: id => get().provider.find(p => p.id === id),
+
+  getProviderList: () => get().provider,
+  fetchProviderList: async () => {
+    try {
+      const res = await getProviderList()
+      if (res.data.code === 0) {
+        set({
+          provider: res.data.data.map(
+            (item: {
+              id: string
+              name: string
+              logo: string
+              api_key: string
+              base_url: string
+            }) => {
+              return {
+                id: item.id,
+                name: item.name,
+                logo: item.logo,
+                apiKey: item.api_key,
+                baseUrl: item.base_url,
+                type: item.type,
+              }
+            }
+          ),
+        })
+      }
+    } catch (error) {
+      console.error('Error fetching provider list:', error)
+    }
+  },
+}))
--- a/BillNote_frontend/src/store/taskStore/index.ts
+++ b/BillNote_frontend/src/store/taskStore/index.ts
@@ -1,124 +1,120 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import {delete_task} from "@/services/note.ts";
+import { delete_task } from '@/services/note.ts'

 export type TaskStatus = 'PENDING' | 'RUNNING' | 'SUCCESS' | 'FAILD'

 export interface AudioMeta {
-    cover_url: string
-    duration: number
-    file_path: string
-    platform: string
-    raw_info: any
-    title: string
-    video_id: string
+  cover_url: string
+  duration: number
+  file_path: string
+  platform: string
+  raw_info: any
+  title: string
+  video_id: string
 }

 export interface Segment {
-    start: number
-    end: number
-    text: string
+  start: number
+  end: number
+  text: string
 }

 export interface Transcript {
-    full_text: string
-    language: string
-    raw: any
-    segments: Segment[]
+  full_text: string
+  language: string
+  raw: any
+  segments: Segment[]
 }

 export interface Task {
-    id: string
-    markdown: string
-    transcript: Transcript
-    status: TaskStatus
-    audioMeta: AudioMeta
-    createdAt: string
+  id: string
+  markdown: string
+  transcript: Transcript
+  status: TaskStatus
+  audioMeta: AudioMeta
+  createdAt: string
 }

 interface TaskStore {
-    tasks: Task[]
-    currentTaskId: string | null
-    platform:string|null
-    addPendingTask: (taskId: string, platform: string) => void
-    updateTaskContent: (id: string, data: Partial<Omit<Task, "id" | "createdAt">>) => void
-    removeTask: (id: string) => void
-    clearTasks: () => void
-    setCurrentTask: (taskId: string | null) => void
-    getCurrentTask: () => Task | null
+  tasks: Task[]
+  currentTaskId: string | null
+  addPendingTask: (taskId: string, platform: string) => void
+  updateTaskContent: (id: string, data: Partial<Omit<Task, 'id' | 'createdAt'>>) => void
+  removeTask: (id: string) => void
+  clearTasks: () => void
+  setCurrentTask: (taskId: string | null) => void
+  getCurrentTask: () => Task | null
 }

 export const useTaskStore = create<TaskStore>()(
-    persist(
-        (set,get) => ({
-            tasks: [],
-            currentTaskId: null,
+  persist(
+    (set, get) => ({
+      tasks: [],
+      currentTaskId: null,

-            addPendingTask: (taskId: string,platform: string) =>
-                set((state) => ({
-                    tasks: [
-                        {
-                            id: taskId,
-                            status: "PENDING",
-                            markdown: "",
-                            platform:platform,
-                            transcript: {
-                                full_text: "",
-                                language: "",
-                                raw: null,
-                                segments: [],
-                            },
-                            createdAt: new Date().toISOString(),
-                            audioMeta: {
-                                cover_url: "",
-                                duration: 0,
-                                file_path: "",
-                                platform: '',
-                                raw_info: null,
-                                title: "",
-                                video_id: "",
-                            },
-                        },
-                        ...state.tasks,
-                    ],
-                    currentTaskId: taskId, // 默认设置为当前任务
-                })),
-
-            updateTaskContent: (id, data) =>
-                set((state) => ({
-                    tasks: state.tasks.map((task) =>
-                        task.id === id ? { ...task, ...data } : task
-                    ),
-                })),
-            getCurrentTask: () => {
-                const currentTaskId = get().currentTaskId
-                return get().tasks.find((task) => task.id === currentTaskId) || null
+      addPendingTask: (taskId: string, platform: string) =>
+        set(state => ({
+          tasks: [
+            {
+              id: taskId,
+              status: 'PENDING',
+              markdown: '',
+              platform: platform,
+              transcript: {
+                full_text: '',
+                language: '',
+                raw: null,
+                segments: [],
+              },
+              createdAt: new Date().toISOString(),
+              audioMeta: {
+                cover_url: '',
+                duration: 0,
+                file_path: '',
+                platform: '',
+                raw_info: null,
+                title: '',
+                video_id: '',
+              },
            },
-            removeTask: async (id) => {
-                const task = get().tasks.find((t) => t.id === id)
+            ...state.tasks,
+          ],
+          currentTaskId: taskId, // 默认设置为当前任务
+        })),

-                // 更新 Zustand 状态
-                set((state) => ({
-                    tasks: state.tasks.filter((task) => task.id !== id),
-                    currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
-                }))
+      updateTaskContent: (id, data) =>
+        set(state => ({
+          tasks: state.tasks.map(task => (task.id === id ? { ...task, ...data } : task)),
+        })),
+      getCurrentTask: () => {
+        const currentTaskId = get().currentTaskId
+        return get().tasks.find(task => task.id === currentTaskId) || null
+      },
+      removeTask: async id => {
+        const task = get().tasks.find(t => t.id === id)

-                // 调用后端删除接口（如果找到了任务）
-                if (task) {
-                    await delete_task({
-                        video_id: task.audioMeta.video_id,
-                        platform: task.platform,
-                    })
-                }
-            },
+        // 更新 Zustand 状态
+        set(state => ({
+          tasks: state.tasks.filter(task => task.id !== id),
+          currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
+        }))

-
-            clearTasks: () => set({ tasks: [], currentTaskId: null }),
-
-            setCurrentTask: (taskId) => set({ currentTaskId: taskId }),
-        }),
-        {
-            name: 'task-storage',
+        // 调用后端删除接口（如果找到了任务）
+        if (task) {
+          await delete_task({
+            video_id: task.audioMeta.video_id,
+            platform: task.platform,
+          })
        }
-    )
+      },
+
+      clearTasks: () => set({ tasks: [], currentTaskId: null }),
+
+      setCurrentTask: taskId => set({ currentTaskId: taskId }),
+    }),
+    {
+      name: 'task-storage',
+    }
+  )
 )
--- a/BillNote_frontend/src/types/index.d.ts
+++ b/BillNote_frontend/src/types/index.d.ts
@@ -0,0 +1,8 @@
+export interface IProvider {
+  id: string
+  name: string
+  logo: string
+  type: string
+  apiKey: string
+  baseUrl: string
+}
--- a/BillNote_frontend/src/utils/index.ts
+++ b/BillNote_frontend/src/utils/index.ts
@@ -0,0 +1,9 @@
+// 解析URL
+export function parseUrl(url: string): { protocol: string, host: string, path: string } {
+  const urlObj = new URL(url);
+  return {
+    protocol: urlObj.protocol,
+    host: urlObj.host,
+    path: urlObj.pathname
+  };
+}
--- a/BillNote_frontend/src/utils/request.ts
+++ b/BillNote_frontend/src/utils/request.ts
@@ -1,8 +1,8 @@
-import axios from "axios"
+import axios from 'axios'

 const request = axios.create({
-    baseURL: "/api", // 默认请求路径前缀
-    timeout: 10000,
+  baseURL: '/api', // 默认请求路径前缀
+  timeout: 10000,
 })

-export default request
+export default request
--- a/BillNote_frontend/tailwind.config.cjs
+++ b/BillNote_frontend/tailwind.config.cjs
@@ -1,11 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [
-		'./index.html',
-		'./src/**/*.{vue,js,ts,js,jsx,tsx}'
-	],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-};
+  content: ['./index.html', './src/**/*.{vue,js,ts,js,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/BillNote_frontend/tsconfig.app.json
+++ b/BillNote_frontend/tsconfig.app.json
@@ -24,9 +24,7 @@

    "baseUrl": ".",
    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
--- a/BillNote_frontend/tsconfig.json
+++ b/BillNote_frontend/tsconfig.json
@@ -1,9 +1,6 @@
 {
  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
--- a/BillNote_frontend/vite.config.ts
+++ b/BillNote_frontend/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
-import path from "path"
-import tailwindcss from "@tailwindcss/vite"
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'

 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -13,7 +13,7 @@ export default defineConfig(({ mode }) => {
    plugins: [react(), tailwindcss()],
    resolve: {
      alias: {
-        "@": path.resolve(__dirname, "./src"),
+        '@': path.resolve(__dirname, './src'),
      },
    },
    server: {
@@ -28,4 +28,4 @@ export default defineConfig(({ mode }) => {
      },
    },
  }
-})
+})
--- a/backend/app/init.py
+++ b/backend/app/init.py
@@ -1,8 +1,9 @@
 from fastapi import FastAPI
-from .routers import note
+from .routers import note, provider


 def create_app() -> FastAPI:
    app = FastAPI(title="BiliNote")
    app.include_router(note.router, prefix="/api")
+    app.include_router(provider.router, prefix="/api")
    return app
--- a/backend/app/db/provider_dao.py
+++ b/backend/app/db/provider_dao.py
@@ -0,0 +1,131 @@
+from app.db.sqlite_client import get_connection
+from app.utils.logger import get_logger
+
+logger = get_logger(__name__)
+
+def init_provider_table():
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS providers (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT NOT NULL,
+            logo TEXT NOT NULL,
+            type TEXT NOT NULL,                -- ✅ 新增字段
+            api_key TEXT NOT NULL,
+            base_url TEXT NOT NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    """)
+    try:
+        conn.commit()
+        conn.close()
+        logger.info("provider table created successfully.")
+    except Exception as e:
+        logger.error(f"Failed to create provider table: {e}")
+def insert_provider(name: str, api_key: str, base_url: str, logo: str, type_: str):
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("""
+        INSERT INTO providers (name, api_key, base_url, logo, type)
+        VALUES (?, ?, ?, ?, ?)
+    """, (name, api_key, base_url, logo, type_))
+    try:
+        conn.commit()
+        cursor_id = cursor.lastrowid
+        conn.close()
+        logger.info(f"Provider inserted successfully. name: {name}, type: {type_}")
+        return cursor_id
+    except Exception as e:
+        logger.error(f"Failed to insert provider: {e}")
+        return None
+def get_provider_by_name(name: str):
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("SELECT * FROM providers WHERE name = ?", (name,))
+    try:
+        row = cursor.fetchone()
+        conn.close()
+        if row is None:
+            logger.info(f"Provider not found: {name}")
+            return None
+        logger.info(f"Provider found: {row}")
+        return row
+    except Exception as e:
+        logger.error(f"Failed to get provider by name: {e}")
+
+def get_provider_by_id(id: int):
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("SELECT * FROM providers WHERE id = ?", (id,))
+    try:
+        row = cursor.fetchone()
+        conn.close()
+        if row is None:
+            logger.info(f"Provider not found: {id}")
+            return None
+        logger.info(f"Provider found: {row}")
+        return row
+    except Exception as e:
+        logger.error(f"Failed to get provider by id: {e}")
+
+def get_all_providers():
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("SELECT * FROM providers")
+    try:
+        rows = cursor.fetchall()
+        conn.close()
+        if rows is None:
+            logger.info("No providers found")
+            return None
+        logger.info(f"Providers found: {rows}")
+        return rows
+    except Exception as e:
+        logger.error(f"Failed to get all providers: {e}")
+
+def update_provider(id: int, name: str, api_key: str, base_url: str, logo: str, type_: str):
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("""
+        UPDATE providers 
+        SET name = ?, api_key = ?, base_url = ?, logo = ?, type = ?
+        WHERE id = ?
+    """, (name, api_key, base_url, logo, type_, id))
+    try:
+        conn.commit()
+        conn.close()
+        logger.info(f"Provider updated successfully. id: {id}, type: {type_}")
+    except Exception as e:
+        logger.error(f"Failed to update provider: {e}")
+def delete_provider(id: int):
+    conn = get_connection()
+    if conn is None:
+        logger.error("Failed to connect to the database.")
+        return
+    cursor = conn.cursor()
+    cursor.execute("DELETE FROM providers WHERE id = ?", (id,))
+    try:
+        conn.commit()
+        conn.close()
+        logger.info(f"Provider deleted successfully. id: {id}")
+    except Exception as e:
+        logger.error(f"Failed to delete provider: {e}")
--- a/backend/app/db/sqlite_client.py
+++ b/backend/app/db/sqlite_client.py
@@ -1,4 +1,4 @@
 import sqlite3

 def get_connection():
-    return sqlite3.connect("note_tasks.db")
+    return sqlite3.connect("bili_note.db")
--- a/backend/app/downloaders/bilibili_downloader.py
+++ b/backend/app/downloaders/bilibili_downloader.py
@@ -31,6 +31,13 @@ class BilibiliDownloader(Downloader, ABC):
        ydl_opts = {
            'format': 'bestaudio[ext=m4a]/bestaudio/best',
            'outtmpl': output_path,
+            'postprocessors': [
+                {
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '64',
+                }
+            ],
            'noplaylist': True,
            'quiet': False,
        }
@@ -41,7 +48,7 @@ class BilibiliDownloader(Downloader, ABC):
            title = info.get("title")
            duration = info.get("duration", 0)
            cover_url = info.get("thumbnail")
-            audio_path = os.path.join(output_dir, f"{video_id}.m4a")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")

        return AudioDownloadResult(
            file_path=audio_path,
@@ -69,7 +76,7 @@ class BilibiliDownloader(Downloader, ABC):
        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")

        ydl_opts = {
-            'format': 'bv*+ba/bestvideo+bestaudio/best',
+            'format': 'bv*[ext=mp4]/bestvideo+bestaudio/best',
            'outtmpl': output_path,
            'noplaylist': True,
            'quiet': False,
--- a/backend/app/downloaders/douyin_downloader.py
+++ b/backend/app/downloaders/douyin_downloader.py
@@ -27,6 +27,13 @@ class DouyinDownloader(Downloader, ABC):
        ydl_opts = {
            'format': 'bestaudio[ext=m4a]/bestaudio/best',
            'outtmpl': output_path,
+            'postprocessors': [
+                {
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '64',
+                }
+            ],
            'noplaylist': True,
            'quiet': False,
        }
@@ -37,7 +44,7 @@ class DouyinDownloader(Downloader, ABC):
            title = info.get("title")
            duration = info.get("duration", 0)
            cover_url = info.get("thumbnail")
-            audio_path = os.path.join(output_dir, f"{video_id}.m4a")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")

        return AudioDownloadResult(
            file_path=audio_path,
--- a/backend/app/downloaders/youtube_downloader.py
+++ b/backend/app/downloaders/youtube_downloader.py
@@ -42,7 +42,7 @@ class YoutubeDownloader(Downloader, ABC):
            title = info.get("title")
            duration = info.get("duration", 0)
            cover_url = info.get("thumbnail")
-            audio_path = os.path.join(output_dir, f"{video_id}.m4a")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")

        return AudioDownloadResult(
            file_path=audio_path,
--- a/backend/app/gpt/base.py
+++ b/backend/app/gpt/base.py
@@ -10,4 +10,8 @@ class GPT(ABC):
        :param source: 
        :return:
        '''
+        pass
+    def create_messages(self, segments:list,**kwargs)->list:
+        pass
+    def list_models(self):
        pass
--- a/backend/app/gpt/gpt_factory.py
+++ b/backend/app/gpt/gpt_factory.py
@@ -0,0 +1,13 @@
+from openai import OpenAI
+
+from app.gpt.base import GPT
+from app.gpt.provider.OpenAI_compatible_provider import OpenAICompatibleProvider
+from app.gpt.universal_gpt import UniversalGPT
+from app.models.model_config import ModelConfig
+
+
+class GPTFactory:
+    @staticmethod
+    def from_config(config: ModelConfig) -> GPT:
+        client = OpenAICompatibleProvider(api_key=config.api_key, base_url=config.base_url).get_client()
+        return UniversalGPT(client=client, model=config.model_name)
--- a/backend/app/gpt/openai_gpt.py
+++ b/backend/app/gpt/openai_gpt.py
@@ -2,6 +2,7 @@ from typing import List
 from app.gpt.base import GPT
 from openai import OpenAI
 from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT, LINK
+from app.gpt.provider.OpenAI_compatible_provider import OpenAICompatibleProvider
 from app.gpt.utils import fix_markdown
 from app.models.gpt_model import GPTSource
 from app.models.transcriber_model import TranscriptSegment
@@ -15,7 +16,7 @@ class OpenaiGPT(GPT):
        self.base_url = getenv("OPENAI_API_BASE_URL")
        self.model=getenv('OPENAI_MODEL')
        print(self.model)
-        self.client = OpenAI(api_key=self.api_key, base_url=self.base_url)
+        self.client = OpenAICompatibleProvider(api_key=self.api_key, base_url=self.base_url)
        self.screenshot = False
        self.link=False

@@ -49,17 +50,20 @@ class OpenaiGPT(GPT):

        print(content)
        return [{"role": "user", "content": content + AI_SUM}]
-
+    def list_models(self):
+        return self.client.list_models()
    def summarize(self, source: GPTSource) -> str:
        self.screenshot = source.screenshot
        self.link = source.link
        source.segment = self.ensure_segments_type(source.segment)
        messages = self.create_messages(source.segment, source.title,source.tags)
-        response = self.client.chat.completions.create(
+        response = self.client.chat(
            model=self.model,
            messages=messages,
            temperature=0.7
        )
        return response.choices[0].message.content.strip()

-
+if __name__ == '__main__':
+    gpt = OpenaiGPT()
+    print(gpt.list_models())
--- a/backend/app/gpt/provider/OpenAI_compatible_provider.py
+++ b/backend/app/gpt/provider/OpenAI_compatible_provider.py
@@ -0,0 +1,22 @@
+from typing import Optional, Union
+
+from openai import OpenAI
+
+class OpenAICompatibleProvider:
+    def __init__(self, api_key: str, base_url: str, model: Union[str, None]=None):
+        self.client = OpenAI(api_key=api_key, base_url=base_url)
+        self.model = model
+
+    @property
+    def get_client(self):
+        return self.client
+
+    @staticmethod
+    def test_connection(api_key: str, base_url: str) -> bool:
+        try:
+            client = OpenAI(api_key=api_key, base_url=base_url)
+            client.models.list()
+            return True
+        except Exception as e:
+            print(f"Error connecting to OpenAI API: {e}")
+            return False
--- a/backend/app/gpt/qwen_gpt.py
+++ b/backend/app/gpt/qwen_gpt.py
@@ -2,6 +2,7 @@ from typing import List
 from app.gpt.base import GPT
 from openai import OpenAI
 from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT
+from app.gpt.provider.OpenAI_compatible_provider import OpenAICompatibleProvider
 from app.gpt.utils import fix_markdown
 from app.models.gpt_model import GPTSource
 from app.models.transcriber_model import TranscriptSegment
@@ -15,7 +16,7 @@ class QwenGPT(GPT):
        self.base_url = getenv("QWEN_API_BASE_URL")
        self.model=getenv('QWEN_MODEL')
        print(self.model)
-        self.client = OpenAI(api_key=self.api_key, base_url=self.base_url)
+        self.client = OpenAICompatibleProvider(api_key=self.api_key, base_url=self.base_url)
        self.screenshot = False

    def _format_time(self, seconds: float) -> str:
@@ -44,7 +45,8 @@ class QwenGPT(GPT):
            content += SCREENSHOT
        print(content)
        return [{"role": "user", "content": content + AI_SUM}]
-
+    def list_models(self):
+        return self.client.list_models()
    def summarize(self, source: GPTSource) -> str:
        self.screenshot = source.screenshot
        source.segment = self.ensure_segments_type(source.segment)
@@ -56,4 +58,6 @@ class QwenGPT(GPT):
        )
        return response.choices[0].message.content.strip()

-
+if __name__ == '__main__':
+    gpt = QwenGPT()
+    print(gpt.list_models())
--- a/backend/app/gpt/test.py
+++ b/backend/app/gpt/test.py
@@ -0,0 +1,17 @@
+from app.models.model_config import ModelConfig
+
+if __name__ == '__main__':
+    from app.gpt.gpt_factory import GPTFactory
+    # 构建模型config
+    config=ModelConfig(
+        id='asas',
+        api_key='',
+        base_url='',
+        model_name="gpt-4o",
+        provider='openai',
+        name='gpt-4o'
+    )
+    # 构建GPT
+    gpt=GPTFactory().from_config(config)
+
+
--- a/backend/app/gpt/universal_gpt.py
+++ b/backend/app/gpt/universal_gpt.py
@@ -0,0 +1,62 @@
+from app.gpt.base import GPT
+from app.models.gpt_model import GPTSource
+from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT, LINK
+from app.gpt.utils import fix_markdown
+from app.models.transcriber_model import TranscriptSegment
+from datetime import timedelta
+from typing import List
+
+class UniversalGPT(GPT):
+    def __init__(self, client, model: str, temperature: float = 0.7):
+        self.client = client
+        self.model = model
+        self.temperature = temperature
+        self.screenshot = False
+        self.screenshot = False
+        self.link = False
+
+    def _format_time(self, seconds: float) -> str:
+        return str(timedelta(seconds=int(seconds)))[2:]
+
+    def _build_segment_text(self, segments: List[TranscriptSegment]) -> str:
+        return "\n".join(
+            f"{self._format_time(seg.start)} - {seg.text.strip()}"
+            for seg in segments
+        )
+
+    def ensure_segments_type(self, segments) -> List[TranscriptSegment]:
+        return [TranscriptSegment(**seg) if isinstance(seg, dict) else seg for seg in segments]
+
+    def create_messages(self, segments: List[TranscriptSegment],**kwargs):
+        content = BASE_PROMPT.format(
+            video_title=kwargs.get('title'),
+            segment_text=self._build_segment_text(segments),
+            tags=kwargs.get('tags')
+        )
+        if self.screenshot:
+            print(":需要截图")
+            content += SCREENSHOT
+        if self.link:
+            print(":需要链接")
+            content += LINK
+
+        print(content)
+        return [{"role": "user", "content": content + AI_SUM}]
+
+    def list_models(self):
+        return self.client.list_models()
+    def summarize(self, source: GPTSource) -> str:
+        self.screenshot = source.screenshot
+        self.link = source.link
+        source.segment = self.ensure_segments_type(source.segment)
+        messages = self.create_messages(source.segment, source.title,source.tags)
+        response = self.client.chat(
+            model=self.model,
+            messages=messages,
+            temperature=0.7
+        )
+        return response.choices[0].message.content.strip()
+
+if __name__ == '__main__':
+    print('s')
+
--- a/backend/app/models/model_config.py
+++ b/backend/app/models/model_config.py
@@ -0,0 +1,16 @@
+from dataclasses import dataclass
+from datetime import datetime
+from typing import Optional
+
+
+@dataclass
+class ModelConfig:
+    """
+    存储每个模型提供商的调用参数信息，用于从数据库读取并动态构建 GPT 调用实例。
+    """
+    name: str                   # 展示名，如 "GPT-4 Turbo"（用于前端展示）
+    provider: str               # 模型提供商，如 "openai"、"qwen"、"deepseek"
+    api_key: str                # 调用该模型使用的 API Key
+    base_url: str               # 模型 API 接口地址（OpenAI SDK兼容）
+    model_name: str             # 实际请求用的模型名称，如 "gpt-4-turbo"
+    created_at: Optional[datetime] = None  # 可选：创建时间（从 SQLite 自动生成）
--- a/backend/app/models/provide_model.py
+++ b/backend/app/models/provide_model.py
@@ -0,0 +1,16 @@
+from dataclasses import dataclass
+from datetime import datetime
+from typing import Optional
+
+
+@dataclass
+class ProviderModel:
+    """
+    存储每个模型提供商的调用参数信息，用于从数据库读取并动态构建 GPT 调用实例。
+    """
+    id: str                     # 模型唯一 ID（推荐用 UUID）
+    logo: str                   # 模型图标 URL
+    name: str                   # 展示名，如 "GPT-4 Turbo"（用于前端展示）
+    api_key: str                # 调用该模型使用的 API Key
+    base_url: str               # 模型 API 接口地址（OpenAI SDK兼容）
+    created_at: Optional[datetime] = None  # 可选：创建时间（从 SQLite 自动生成）
--- a/backend/app/routers/provider.py
+++ b/backend/app/routers/provider.py
@@ -0,0 +1,82 @@
+from typing import Optional
+from fastapi import APIRouter
+from pydantic import BaseModel
+from app.utils.response import ResponseWrapper as R
+from app.services.provider import ProviderService
+
+router = APIRouter()
+
+# ✅ 新增 type 字段
+class ProviderRequest(BaseModel):
+    name: str
+    api_key: str
+    base_url: str
+    logo: str
+    type: str
+
+class ProviderUpdateRequest(BaseModel):
+    id: int
+    name: Optional[str] = None
+    api_key: Optional[str] = None
+    base_url: Optional[str] = None
+    logo: Optional[str] = None
+    type: Optional[str] = None
+
+@router.post("/add_provider")
+def add_provider(data: ProviderRequest):
+    try:
+        ProviderService.add_provider(
+            name=data.name,
+            api_key=data.api_key,
+            base_url=data.base_url,
+            logo=data.logo,
+            type_=data.type
+        )
+        return R.success(msg='添加模型供应商成功')
+    except Exception as e:
+        return R.error(msg=e)
+
+@router.get("/get_all_providers")
+def get_all_providers():
+    try:
+        res = ProviderService.get_all_providers()
+        return R.success(data=res)
+    except Exception as e:
+        return R.error(msg=e)
+
+@router.get("/get_provider_by_id/{id}")
+def get_provider_by_id(id: int):
+    try:
+        res = ProviderService.get_provider_by_id(id)
+        return R.success(data=res)
+    except Exception as e:
+        return R.error(msg=e)
+
+@router.get("/get_provider_by_name/{name}")
+def get_provider_by_name(name: str):
+    try:
+        res = ProviderService.get_provider_by_name(name)
+        return R.success(data=res)
+    except Exception as e:
+        return R.error(msg=e)
+
+@router.post("/update_provider/")
+def update_provider(data: ProviderUpdateRequest):
+    try:
+        if all(
+            field is None
+            for field in [data.name, data.api_key, data.base_url, data.logo, data.type]
+        ):
+            return R.error(msg='请至少填写一个参数')
+
+        ProviderService.update_provider(
+            id=data.id,
+            name=data.name or '',
+            api_key=data.api_key or '',
+            base_url=data.base_url or '',
+            logo=data.logo or '',
+            type_=data.type or ''
+        )
+        return R.success(msg='更新模型供应商成功')
+    except Exception as e:
+        return R.error(msg=e)
--- a/backend/app/services/model.py
+++ b/backend/app/services/model.py
@@ -0,0 +1,23 @@
+from app.gpt.gpt_factory import GPTFactory
+from app.models.model_config import ModelConfig
+from app.services.provider import ProviderService
+
+
+class ModelService:
+    @staticmethod
+    def get_model_list(provider_id: int):
+        provider=ProviderService.get_provider_by_id(provider_id)
+        if not provider:
+            return []
+        config=ModelConfig(
+            api_key=provider.api_key,
+            base_url=provider.base_url,
+            provider=provider.name,
+            model_name='',
+            name=provider.name,
+        )
+        GPT=GPTFactory().from_config(config)
+        return GPT.list_models()
+
+if __name__ == '__main__':
+    print(ModelService.get_model_list(1))
--- a/backend/app/services/note.py
+++ b/backend/app/services/note.py
@@ -53,21 +53,18 @@ class NoteGenerator:


    def get_gpt(self) -> GPT:
-        self.provider = self.provider.lower()
        if self.provider == 'openai':
            logger.info("使用OpenAI")
            return OpenaiGPT()
-        elif self.provider == 'deepseek':
+        elif self.provider == 'deepSeek':
            logger.info("使用DeepSeek")
            return DeepSeekGPT()
        elif self.provider == 'qwen':
            logger.info("使用Qwen")
            return QwenGPT()
        else:
-            self.provider = 'openai'
-            logger.warning("不支持的AI提供商，使用 OpenAI 做完GPT")
-            return OpenaiGPT()
-
+            logger.warning("不支持的AI提供商")
+            raise ValueError(f"不支持的AI提供商：{self.provider}")

    def get_downloader(self, platform: str) -> Downloader:
        if platform == "bilibili":
@@ -162,9 +159,9 @@ class NoteGenerator:
        # 1. 选择下载器
        downloader = self.get_downloader(platform)
        gpt = self.get_gpt()
-        logger.info(f'使用{downloader.__class__.__name__}下载器')
-        logger.info(f'使用{gpt.__class__.__name__}GPT')
-        logger.info(f'视频地址：{video_url}')
+        logger.info(f'使用{downloader.__class__.__name__}下载器\n'
+                    f'使用{gpt.__class__.__name__}GPT\n'
+                    f'视频地址：{video_url}')
        if screenshot:

            video_path = downloader.download_video(video_url)
--- a/backend/app/services/provider.py
+++ b/backend/app/services/provider.py
@@ -0,0 +1,54 @@
+from app.db.provider_dao import (
+    insert_provider,
+    init_provider_table,
+    get_all_providers,
+    get_provider_by_name,
+    get_provider_by_id,
+    update_provider,
+    delete_provider,
+)
+
+class ProviderService:
+
+    @staticmethod
+    def add_provider(name: str, api_key: str, base_url: str, logo: str, type_: str):
+        return insert_provider(name, api_key, base_url, logo, type_)
+
+    @staticmethod
+    def get_all_providers():
+        provider_list = []
+        provider = get_all_providers()
+
+        for i in provider:
+            provider_list.append({
+                "id": i[0],
+                "name": i[1],
+                "logo": i[2],
+                "type": i[3],         # ✅ 加上类型
+                "api_key": i[4],
+                "base_url": i[5],
+            })
+        return provider_list
+
+    @staticmethod
+    def get_provider_by_name(name: str):
+        return get_provider_by_name(name)
+
+    @staticmethod
+    def get_provider_by_id(id: int):
+        return get_provider_by_id(id)
+
+    @staticmethod
+    def update_provider(
+        id: int,
+        name: str,
+        api_key: str,
+        base_url: str,
+        logo: str,
+        type_: str
+    ):
+        return update_provider(id, name, api_key, base_url, logo, type_)
+
+    @staticmethod
+    def delete_provider(id: int):
+        return delete_provider(id)
--- a/backend/app/transcriber/bcut.py
+++ b/backend/app/transcriber/bcut.py
@@ -1,250 +0,0 @@
-import json
-import logging
-import time
-from typing import Optional, List, Dict, Union
-
-import requests
-
-from app.decorators.timeit import timeit
-from app.models.transcriber_model import TranscriptSegment, TranscriptResult
-from app.transcriber.base import Transcriber
-from app.utils.logger import get_logger
-from events import transcription_finished
-
-__version__ = "0.0.3"
-
-API_BASE_URL = "https://member.bilibili.com/x/bcut/rubick-interface"
-
-# 申请上传
-API_REQ_UPLOAD = API_BASE_URL + "/resource/create"
-
-# 提交上传
-API_COMMIT_UPLOAD = API_BASE_URL + "/resource/create/complete"
-
-# 创建任务
-API_CREATE_TASK = API_BASE_URL + "/task"
-
-# 查询结果
-API_QUERY_RESULT = API_BASE_URL + "/task/result"
-
-logger = get_logger(__name__)
-
-class BcutTranscriber(Transcriber):
-    """必剪 语音识别接口"""
-    headers = {
-        'User-Agent': 'Bilibili/1.0.0 (https://www.bilibili.com)',
-        'Content-Type': 'application/json'
-    }
-
-    def __init__(self):
-        self.session = requests.Session()
-        self.task_id = None
-        self.__etags = []
-
-        self.__in_boss_key: Optional[str] = None
-        self.__resource_id: Optional[str] = None
-        self.__upload_id: Optional[str] = None
-        self.__upload_urls: List[str] = []
-        self.__per_size: Optional[int] = None
-        self.__clips: Optional[int] = None
-
-        self.__etags: List[str] = []
-        self.__download_url: Optional[str] = None
-        self.task_id: Optional[str] = None
-        
-    def _load_file(self, file_path: str) -> bytes:
-        """读取文件内容"""
-        with open(file_path, 'rb') as f:
-            return f.read()
-
-    def _upload(self, file_path: str) -> None:
-        """申请上传"""
-        file_binary = self._load_file(file_path)
-        if not file_binary:
-            raise ValueError("无法读取文件数据")
-            
-        payload = json.dumps({
-            "type": 2,
-            "name": "audio.mp3",
-            "size": len(file_binary),
-            "ResourceFileType": "mp3",
-            "model_id": "8",
-        })
-
-        resp = self.session.post(
-            API_REQ_UPLOAD,
-            data=payload,
-            headers=self.headers
-        )
-        resp.raise_for_status()
-        resp = resp.json()
-        resp_data = resp["data"]
-
-        self.__in_boss_key = resp_data["in_boss_key"]
-        self.__resource_id = resp_data["resource_id"]
-        self.__upload_id = resp_data["upload_id"]
-        self.__upload_urls = resp_data["upload_urls"]
-        self.__per_size = resp_data["per_size"]
-        self.__clips = len(resp_data["upload_urls"])
-
-        logger.info(
-            f"申请上传成功, 总计大小{resp_data['size'] // 1024}KB, {self.__clips}分片, 分片大小{resp_data['per_size'] // 1024}KB: {self.__in_boss_key}"
-        )
-        self.__upload_part(file_binary)
-        self.__commit_upload()
-
-    def __upload_part(self, file_binary: bytes) -> None:
-        """上传音频数据"""
-        for clip in range(self.__clips):
-            start_range = clip * self.__per_size
-            end_range = min((clip + 1) * self.__per_size, len(file_binary))
-            logger.info(f"开始上传分片{clip}: {start_range}-{end_range}")
-            resp = self.session.put(
-                self.__upload_urls[clip],
-                data=file_binary[start_range:end_range],
-                headers={'Content-Type': 'application/octet-stream'}
-            )
-            resp.raise_for_status()
-            etag = resp.headers.get("Etag", "").strip('"')
-            self.__etags.append(etag)
-            logger.info(f"分片{clip}上传成功: {etag}")
-
-    def __commit_upload(self) -> None:
-        """提交上传数据"""
-        data = json.dumps({
-            "InBossKey": self.__in_boss_key,
-            "ResourceId": self.__resource_id,
-            "Etags": ",".join(self.__etags),
-            "UploadId": self.__upload_id,
-            "model_id": "8",
-        })
-        resp = self.session.post(
-            API_COMMIT_UPLOAD,
-            data=data,
-            headers=self.headers
-        )
-        resp.raise_for_status()
-        resp = resp.json()
-        if resp.get("code") != 0:
-            error_msg = f"上传提交失败: {resp.get('message', '未知错误')}"
-            logger.error(error_msg)
-            raise Exception(error_msg)
-            
-        self.__download_url = resp["data"]["download_url"]
-        logger.info(f"提交成功，下载链接: {self.__download_url}")
-
-    def _create_task(self) -> str:
-        """开始创建转换任务"""
-        resp = self.session.post(
-            API_CREATE_TASK, json={"resource": self.__download_url, "model_id": "8"}, headers=self.headers
-        )
-        resp.raise_for_status()
-        resp = resp.json()
-        if resp.get("code") != 0:
-            error_msg = f"创建任务失败: {resp.get('message', '未知错误')}"
-            logger.error(error_msg)
-            raise Exception(error_msg)
-            
-        self.task_id = resp["data"]["task_id"]
-        logger.info(f"任务已创建: {self.task_id}")
-        return self.task_id
-
-    def _query_result(self) -> dict:
-        """查询转换结果"""
-        resp = self.session.get(
-            API_QUERY_RESULT, 
-            params={"model_id": 7, "task_id": self.task_id}, 
-            headers=self.headers
-        )
-        resp.raise_for_status()
-        resp = resp.json()
-        if resp.get("code") != 0:
-            error_msg = f"查询结果失败: {resp.get('message', '未知错误')}"
-            logger.error(error_msg)
-            raise Exception(error_msg)
-            
-        return resp["data"]
-
-    @timeit
-    def transcript(self, file_path: str) -> TranscriptResult:
-        """执行识别过程，符合 Transcriber 接口"""
-        try:
-            logger.info(f"开始处理文件: {file_path}")
-            
-            # 上传文件
-            logger.info("正在上传文件...")
-            self._upload(file_path)
-            
-            # 创建任务
-            logger.info("提交转录任务...")
-            self._create_task()
-            
-            # 轮询检查任务状态
-            logger.info("等待转录结果...")
-            task_resp = None
-            max_retries = 500
-            for i in range(max_retries):
-                task_resp = self._query_result()
-                
-                if task_resp["state"] == 4:  # 完成状态
-                    break
-                elif task_resp["state"] == 3:  # 失败状态
-                    error_msg = f"B站ASR任务失败，状态码: {task_resp['state']}"
-                    logger.error(error_msg)
-                    raise Exception(error_msg)
-                    
-                # 每隔一段时间打印进度
-                if i % 10 == 0:
-                    logger.info(f"转录进行中... {i}/{max_retries}")
-                    
-                time.sleep(1)
-                
-            if not task_resp or task_resp["state"] != 4:
-                error_msg = f"B站ASR任务未能完成，状态: {task_resp.get('state') if task_resp else 'Unknown'}"
-                logger.error(error_msg)
-                raise Exception(error_msg)
-                
-            # 解析结果
-            logger.info("转录成功，处理结果...")
-            result_json = json.loads(task_resp["result"])
-            
-            # 提取分段数据
-            segments = []
-            full_text = ""
-            
-            for u in result_json.get("utterances", []):
-                text = u.get("transcript", "").strip()
-                # B站ASR返回的时间戳是毫秒，需要转换为秒
-                start_time = float(u.get("start_time", 0)) / 1000.0
-                end_time = float(u.get("end_time", 0)) / 1000.0
-                
-                full_text += text + " "
-                segments.append(TranscriptSegment(
-                    start=start_time,
-                    end=end_time,
-                    text=text
-                ))
-            
-            # 创建结果对象
-            result = TranscriptResult(
-                language=result_json.get("language", "zh"),
-                full_text=full_text.strip(),
-                segments=segments,
-                raw=result_json
-            )
-            
-            # 触发完成事件
-            self.on_finish(file_path, result)
-            
-            return result
-            
-        except Exception as e:
-            logger.error(f"B站ASR处理失败: {str(e)}")
-            raise
-
-    def on_finish(self, video_path: str, result: TranscriptResult) -> None:
-        """转录完成的回调"""
-        logger.info(f"B站ASR转写完成: {video_path}")
-        transcription_finished.send({
-            "file_path": video_path,
-        })
--- a/backend/app/transcriber/kuaishou.py
+++ b/backend/app/transcriber/kuaishou.py
@@ -1,115 +0,0 @@
-import requests
-import logging
-import os
-from typing import Union, List, Dict, Optional
-
-from app.decorators.timeit import timeit
-from app.models.transcriber_model import TranscriptSegment, TranscriptResult
-from app.transcriber.base import Transcriber
-from app.utils.logger import get_logger
-from events import transcription_finished
-
-logger = get_logger(__name__)
-
-class KuaishouTranscriber(Transcriber):
-    """快手语音识别实现"""
-    
-    API_URL = "https://ai.kuaishou.com/api/effects/subtitle_generate"
-    
-    def __init__(self):
-        pass
-
-    def _load_file(self, file_path: str) -> bytes:
-        """读取文件内容"""
-        with open(file_path, 'rb') as f:
-            return f.read()
-
-    def _submit(self, file_path: str) -> dict:
-        """提交识别请求"""
-        try:
-            file_binary = self._load_file(file_path)
-            
-            payload = {
-                "typeId": "1"
-            }
-            
-            # 使用文件名作为上传文件名
-            file_name = os.path.basename(file_path)
-            files = [('file', (file_name, file_binary, 'audio/mpeg'))]
-            
-            logger.info(f"开始向快手API提交请求，文件: {file_name}")
-            response = requests.post(self.API_URL, data=payload, files=files, timeout=300)
-            response.raise_for_status()  # 检查HTTP错误
-            
-            result = response.json()
-            
-            # 检查快手API返回是否包含错误
-            if "data" not in result or result.get("code", 0) != 0:
-                error_msg = f"快手API返回错误: {result.get('message', '未知错误')}"
-                logger.error(error_msg)
-                raise Exception(error_msg)
-                
-            return result
-            
-        except requests.exceptions.RequestException as e:
-            error_msg = f"快手ASR请求网络错误: {str(e)}"
-            logger.error(error_msg)
-            raise
-        except Exception as e:
-            error_msg = f"快手ASR请求处理错误: {str(e)}"
-            logger.error(error_msg)
-            raise
-
-    @timeit
-    def transcript(self, file_path: str) -> TranscriptResult:
-        """执行转录过程，符合 Transcriber 接口"""
-        try:
-            logger.info(f"开始处理文件: {file_path}")
-            
-            # 提交请求并获取结果
-            logger.info("向快手API提交识别请求...")
-            result_data = self._submit(file_path)
-            
-            logger.info("请求成功，处理结果...")
-            
-            # 提取分段数据
-            segments = []
-            full_text = ""
-            
-            # 解析快手API返回的文本段
-            texts = result_data.get('data', {}).get('text', [])
-            for u in texts:
-                text = u.get('text', '').strip()
-                start_time = float(u.get('start_time', 0))
-                end_time = float(u.get('end_time', 0))
-                
-                full_text += text + " "
-                segments.append(TranscriptSegment(
-                    start=start_time,
-                    end=end_time,
-                    text=text
-                ))
-            
-            # 创建结果对象
-            result = TranscriptResult(
-                language="zh",  # 快手API可能不返回语言信息，默认为中文
-                full_text=full_text.strip(),
-                segments=segments,
-                raw=result_data
-            )
-            
-            # 触发完成事件
-            self.on_finish(file_path, result)
-            
-            return result
-            
-        except Exception as e:
-            logger.error(f"快手ASR处理失败: {str(e)}")
-            raise
-
-    def on_finish(self, video_path: str, result: TranscriptResult) -> None:
-        """转录完成的回调"""
-        logger.info(f"快手ASR转写完成: {video_path}")
-        transcription_finished.send({
-            "file_path": video_path,
-        })
--- a/backend/app/transcriber/transcriber_provider.py
+++ b/backend/app/transcriber/transcriber_provider.py
@@ -1,74 +1,19 @@
 from app.transcriber.whisper import WhisperTranscriber
-from app.transcriber.bcut import BcutTranscriber
-from app.transcriber.kuaishou import KuaishouTranscriber
 from app.utils.logger import get_logger
 logger = get_logger(__name__)

-logger.info('初始化转录服务提供器')
+logger.info('实例化transcriber')
+# TODO:后面需要加入逻辑选择
+_transcriber = None

-# 维护各种转录器的单例实例
-_transcribers = {
-    'whisper': None,
-    'bcut': None,
-    'kuaishou': None
-}
+def get_transcriber(model_size="base", device="cuda"):
+    global _transcriber

-def get_whisper_transcriber(model_size="base", device="cuda"):
-    """获取 Whisper 转录器实例"""
-    if _transcribers['whisper'] is None:
-        logger.info(f'创建 Whisper 转录器实例，参数：{model_size}, {device}')
+    if _transcriber is None:
+        logger.info('不存在 transcriber ，开始实例化transcriber。')
        try:
-            _transcribers['whisper'] = WhisperTranscriber(model_size=model_size, device=device)
-            logger.info('Whisper 转录器创建成功')
+            _transcriber = WhisperTranscriber(model_size=model_size, device=device)
+            logger.info(f'实例化transcriber成功。参数：{model_size}, {device} ')
        except Exception as e:
-            logger.error(f"Whisper 转录器创建失败: {e}")
-            raise
-    return _transcribers['whisper']
-
-def get_bcut_transcriber():
-    """获取 Bcut 转录器实例"""
-    if _transcribers['bcut'] is None:
-        logger.info('创建 Bcut 转录器实例')
-        try:
-            _transcribers['bcut'] = BcutTranscriber()
-            logger.info('Bcut 转录器创建成功')
-        except Exception as e:
-            logger.error(f"Bcut 转录器创建失败: {e}")
-            raise
-    return _transcribers['bcut']
-
-def get_kuaishou_transcriber():
-    """获取快手转录器实例"""
-    if _transcribers['kuaishou'] is None:
-        logger.info('创建快手转录器实例')
-        try:
-            _transcribers['kuaishou'] = KuaishouTranscriber()
-            logger.info('快手转录器创建成功')
-        except Exception as e:
-            logger.error(f"快手转录器创建失败: {e}")
-            raise
-    return _transcribers['kuaishou']
-
-def get_transcriber(transcriber_type="whisper", model_size="base", device="cuda"):
-    """
-    获取指定类型的转录器实例
-    
-    参数:
-        transcriber_type: 转录器类型，支持 "whisper", "bcut", "kuaishou"
-        model_size: 模型大小，whisper 特有参数
-        device: 设备类型，whisper 特有参数
-    
-    返回:
-        对应类型的转录器实例
-    """
-    logger.info(f'获取转录器，类型: {transcriber_type}')
-    
-    if transcriber_type == "whisper":
-        return get_whisper_transcriber(model_size, device)
-    elif transcriber_type == "bcut":
-        return get_bcut_transcriber()
-    elif transcriber_type == "kuaishou":
-        return get_kuaishou_transcriber()
-    else:
-        logger.warning(f'未知转录器类型 "{transcriber_type}"，使用默认 whisper')
-        return get_whisper_transcriber(model_size, device)
+            logger.error(f"实例化transcriber失败，请检查是否安装whisper。{e}")
+    return _transcriber
--- a/backend/app/transcriber/whisper.py
+++ b/backend/app/transcriber/whisper.py
@@ -4,19 +4,14 @@ from app.decorators.timeit import timeit
 from app.models.transcriber_model import TranscriptSegment, TranscriptResult
 from app.transcriber.base import Transcriber
 from app.utils.env_checker import is_cuda_available, is_torch_installed
-from app.utils.logger import get_logger
 from app.utils.path_helper import get_model_dir

 from events import transcription_finished
-from pathlib import Path
-import os
-from tqdm import tqdm
-from huggingface_hub import snapshot_download

 '''
 Size of the model to use (tiny, tiny.en, base, base.en, small, small.en, distil-small.en, medium, medium.en, distil-medium.en, large-v1, large-v2, large-v3, large, distil-large-v2, distil-large-v3, large-v3-turbo, or turbo
 '''
-logger=get_logger(__name__)
+

 class WhisperTranscriber(Transcriber):
    # TODO:修改为可配置
@@ -36,25 +31,15 @@ class WhisperTranscriber(Transcriber):

        self.compute_type = compute_type or ("float16" if self.device == "cuda" else "int8")

-        model_dir = get_model_dir("whisper")
-        model_path = os.path.join(model_dir, f"whisper-{model_size}")
-        if not Path(model_path).exists():
-            logger.info(f"模型 whisper-{model_size} 不存在，开始下载...")
-            repo_id = f"guillaumekln/faster-whisper-{model_size}"
-            snapshot_download(
-                repo_id,
-                local_dir=model_path,
-                local_dir_use_symlinks=False,
-            )
-            logger.info("模型下载完成")
-
+        model_path = get_model_dir("whisper")
        self.model = WhisperModel(
            model_size,
            device=self.device,
-            compute_type=self.compute_type,
+            # compute_type="int8",  # 或 "float16"
            cpu_threads=cpu_threads,
-            download_root=model_dir
+            download_root=model_path
        )
+
    @staticmethod
    def is_torch_installed() -> bool:
        try:
--- a/backend/main.py
+++ b/backend/main.py
@@ -3,6 +3,8 @@ import os
 import uvicorn
 from starlette.staticfiles import StaticFiles
 from dotenv import load_dotenv
+
+from app.db.provider_dao import init_provider_table
 from app.utils.logger import get_logger
 from app import create_app
 from app.db.video_task_dao import init_video_task_table
@@ -36,6 +38,7 @@ async def startup_event():
    ensure_ffmpeg_or_raise()
    get_transcriber()
    init_video_task_table()
+    init_provider_table()

 if __name__ == "__main__":
    port = int(os.getenv("BACKEND_PORT", 8000))
--- a/backend/requirements.txt
+++ b/backend/requirements.txt