first commit

2026-05-28 15:12:19 +08:00 · 2025-04-13 17:44:54 +08:00
commit 0e0b8da317
112 changed files with 4397 additions and 0 deletions
--- a/BillNote_frontend/src/App.css
+++ b/BillNote_frontend/src/App.css
--- a/BillNote_frontend/src/App.tsx
+++ b/BillNote_frontend/src/App.tsx
@@ -0,0 +1,16 @@
+
+import './App.css'
+import {HomePage} from "./pages/Home.tsx";
+import {useTaskPolling} from "@/hooks/useTaskPolling.ts";
+
+function App() {
+    useTaskPolling(3000) // 每 3 秒轮询一次
+
+    return (
+        <>
+            <HomePage></HomePage>
+        </>
+    )
+}
+
+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/assets/react.svg
+++ b/BillNote_frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/BillNote_frontend/src/components/Lottie/Idle.tsx
+++ b/BillNote_frontend/src/components/Lottie/Idle.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+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>
+    )
+}
+
+export default Idle
--- a/BillNote_frontend/src/components/Lottie/Loading.tsx
+++ b/BillNote_frontend/src/components/Lottie/Loading.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+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>
+    )
+}
+
+export default Loading
--- a/BillNote_frontend/src/components/ui/badge.tsx
+++ b/BillNote_frontend/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+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"
+
+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",
+  {
+    variants: {
+      variant: {
+        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",
+        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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  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
@@ -0,0 +1,59 @@
+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"
+
+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",
+        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",
+        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",
+      },
+      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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/BillNote_frontend/src/components/ui/card.tsx
+++ b/BillNote_frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+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
+      )}
+      {...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">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/BillNote_frontend/src/components/ui/checkbox.tsx
+++ b/BillNote_frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+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",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/BillNote_frontend/src/components/ui/form.tsx
+++ b/BillNote_frontend/src/components/ui/form.tsx
@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+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}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+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)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+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)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/BillNote_frontend/src/components/ui/input.tsx
+++ b/BillNote_frontend/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/BillNote_frontend/src/components/ui/label.tsx
+++ b/BillNote_frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/BillNote_frontend/src/components/ui/scroll-area.tsx
+++ b/BillNote_frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      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",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/BillNote_frontend/src/components/ui/select.tsx
+++ b/BillNote_frontend/src/components/ui/select.tsx
@@ -0,0 +1,183 @@
+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"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <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",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <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"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+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)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/BillNote_frontend/src/components/ui/sonner.tsx
+++ b/BillNote_frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/BillNote_frontend/src/components/ui/tooltip.tsx
+++ b/BillNote_frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        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",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/BillNote_frontend/src/hooks/useTaskPolling.ts
+++ b/BillNote_frontend/src/hooks/useTaskPolling.ts
@@ -0,0 +1,46 @@
+// hooks/useTaskPolling.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"
+            )
+
+            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
+
+                            updateTaskContent(task.id, {
+                                status,
+                                markdown,
+                                transcript,
+                                audioMeta: audio_meta,
+                            })
+                        } else {
+                            updateTaskStatus(task.id, status)
+                        }
+                    }
+                } catch (e) {
+                    console.error("❌ 任务轮询失败：", e)
+                    removeTask(task.id)
+
+                }
+            }
+        }, interval)
+
+        return () => clearInterval(timer)
+    }, [interval, tasks])
+}
--- a/BillNote_frontend/src/index.css
+++ b/BillNote_frontend/src/index.css
@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #3C77FB;
+  --primary-light: #e0eeff;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #e6f7ff;
+  --input: oklch(0.922 0 0);
+  --ring: #096dd9;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --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-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: #e6f7ff;
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/BillNote_frontend/src/indexa.css
+++ b/BillNote_frontend/src/indexa.css
@@ -0,0 +1,124 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #3C77FB;
+  --primary-light: #e0eeff;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #e6f7ff;
+  --input: oklch(0.922 0 0);
+  --ring: #096dd9;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --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-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: #e6f7ff;
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/BillNote_frontend/src/layouts/HomeLayout.tsx
+++ b/BillNote_frontend/src/layouts/HomeLayout.tsx
@@ -0,0 +1,43 @@
+import type { FC, ReactNode } from 'react'
+import { Button } from "@/components/ui/button.tsx"
+
+interface HomeLayoutProps {
+    form: ReactNode
+    preview: ReactNode
+}
+
+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>
+            </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
@@ -0,0 +1,32 @@
+import type { ReactNode, FC } from "react"
+// import "@/global.css"
+import { Toaster } from 'react-hot-toast'
+
+interface RootLayoutProps {
+    children: ReactNode
+}
+
+export const metadata = {
+    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>
+    )
+}
+
+export default RootLayout
--- a/BillNote_frontend/src/lib/utils.ts
+++ b/BillNote_frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+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
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import RootLayout from "./layouts/RootLayout.tsx";
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <RootLayout>
+            <App />
+        </RootLayout>
+    </StrictMode>,
+)
--- a/BillNote_frontend/src/pages/Home.tsx
+++ b/BillNote_frontend/src/pages/Home.tsx
@@ -0,0 +1,42 @@
+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/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
@@ -0,0 +1,168 @@
+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
@@ -0,0 +1,287 @@
+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
@@ -0,0 +1,15 @@
+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
@@ -0,0 +1,100 @@
+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/note.ts
+++ b/BillNote_frontend/src/services/note.ts
@@ -0,0 +1,97 @@
+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"
+}
+
+export const generateNote = async (data: {
+    video_url: string;
+    link: undefined | boolean;
+    screenshot: undefined | boolean;
+    platform: string;
+    quality: string
+}) => {
+    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 // 抛出错误以便调用方处理
+    }
+}
+
+
+
+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)
+
+        if (response.data.code==0 && response.data.status=='SUCCESS') {
+            // toast.success("笔记生成成功")
+        }
+        console.log('res',response)
+        // 成功提示
+
+        return response.data
+    }
+    catch (e){
+        console.error("❌ 请求出错", e)
+
+        // 错误提示
+        toast.error(
+            "笔记生成失败，请稍后重试"
+        )
+
+        throw e // 抛出错误以便调用方处理
+    }
+}
--- a/BillNote_frontend/src/store/taskStore/index.ts
+++ b/BillNote_frontend/src/store/taskStore/index.ts
@@ -0,0 +1,124 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+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
+}
+
+export interface Segment {
+    start: number
+    end: number
+    text: string
+}
+
+export interface Transcript {
+    full_text: string
+    language: string
+    raw: any
+    segments: Segment[]
+}
+
+export interface Task {
+    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
+}
+
+export const useTaskStore = create<TaskStore>()(
+    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
+            },
+            removeTask: async (id) => {
+                const task = get().tasks.find((t) => t.id === id)
+
+                // 更新 Zustand 状态
+                set((state) => ({
+                    tasks: state.tasks.filter((task) => task.id !== id),
+                    currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
+                }))
+
+                // 调用后端删除接口（如果找到了任务）
+                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/utils/request.ts
+++ b/BillNote_frontend/src/utils/request.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+
+const request = axios.create({
+    baseURL: "/api", // 默认请求路径前缀
+    timeout: 10000,
+})
+
+export default request
--- a/BillNote_frontend/src/vite-env.d.ts
+++ b/BillNote_frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>