成长报告助手

+ + + + +

大模型配置

+ + +

+ + + +

+ + updateModelConfig('provider', event.target.value)} + placeholder="OpenAI Compatible" + /> + + + updateModelConfig('model', event.target.value)} + placeholder="输入或从候选模型中选择" + /> + + {modelOptions.map((model) => ( + + +

+ + + updateModelConfig('baseUrl', event.target.value)} + placeholder="https://api.openai.com/v1" + /> + + + +

+ + updateModelConfig('apiKey', event.target.value)} + placeholder="sk-..." + /> +

+ +

+ + +

+ +

+ 根据接口地址和 API Key 获取可用模型后，再选择模型名称。 +

+ +

+ + updateModelConfig('temperature', event.target.value)} + placeholder="0.7" + /> +

+ + + updateModelConfig('maxTokens', event.target.value)} + placeholder="1200" + /> + +

+ + +

updateModelConfig('systemPrompt', event.target.value)}
+                placeholder="请输入生成评语时使用的系统提示词"
+              />
+            </Field>
+
+            <p className="border-t pt-5 text-sm text-muted-foreground">
+              当前配置将作为“生成评语”工具的大模型参数来源。
+            </p>
+          </CardContent>
+        </ScrollArea>
+      </Card>
+    </section>
+  )
+}
diff --git a/src/renderer/src/components/ui/alert-dialog.tsx b/src/renderer/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..7eeb946
--- /dev/null
+++ b/src/renderer/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { buttonVariants } from '@renderer/components/ui/button'
+import { cn } from '@renderer/lib/utils'
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogCancel = AlertDialogPrimitive.Cancel
+const AlertDialogAction = AlertDialogPrimitive.Action
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-slate-950/45', className)}
+    {...props}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-1/2 top-1/2 z-50 grid w-[min(420px,92vw)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md border bg-card p-6 text-card-foreground shadow-2xl outline-none',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return <div className={cn('grid gap-2 text-left', className)} {...props} />
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return (
+    <div
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm leading-6 text-muted-foreground', className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogCancelButton = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogCancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), className)}
+    {...props}
+  />
+))
+AlertDialogCancelButton.displayName = AlertDialogPrimitive.Cancel.displayName
+
+const AlertDialogActionButton = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogAction
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'destructive' }), className)}
+    {...props}
+  />
+))
+AlertDialogActionButton.displayName = AlertDialogPrimitive.Action.displayName
+
+export {
+  AlertDialog,
+  AlertDialogActionButton as AlertDialogAction,
+  AlertDialogCancelButton as AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+}
diff --git a/src/renderer/src/components/ui/badge.tsx b/src/renderer/src/components/ui/badge.tsx
new file mode 100644
index 0000000..2b3ebed
--- /dev/null
+++ b/src/renderer/src/components/ui/badge.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@renderer/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-emerald-100 text-emerald-700',
+        warning: 'border-transparent bg-amber-100 text-amber-700'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/src/renderer/src/components/ui/button.tsx b/src/renderer/src/components/ui/button.tsx
new file mode 100644
index 0000000..a0e56db
--- /dev/null
+++ b/src/renderer/src/components/ui/button.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@renderer/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  }
+)
+
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
new file mode 100644
index 0000000..8ee75f1
--- /dev/null
+++ b/src/renderer/src/components/ui/card.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+import { cn } from '@renderer/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+  )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-3', className)} {...props} />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('font-semibold leading-none tracking-normal', className)} {...props} />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/renderer/src/components/ui/dialog.tsx b/src/renderer/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..8bced42
--- /dev/null
+++ b/src/renderer/src/components/ui/dialog.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+
+import { cn } from '@renderer/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-slate-950/45', className)}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100vh-2rem)] w-[min(760px,94vw)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-hidden rounded-md border bg-card p-6 text-card-foreground shadow-2xl outline-none',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring">
+        <X className="size-4" />
+        <span className="sr-only">关闭</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return <div className={cn('grid gap-2 text-left', className)} {...props} />
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return (
+    <div
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm leading-6 text-muted-foreground', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+}
diff --git a/src/renderer/src/components/ui/drawer.tsx b/src/renderer/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..779e50a
--- /dev/null
+++ b/src/renderer/src/components/ui/drawer.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@renderer/lib/utils'
+
+function Drawer({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+}
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn('fixed inset-0 z-50 bg-slate-950/30', className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>): React.JSX.Element {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          'fixed inset-y-0 right-0 z-50 flex h-full w-[min(440px,92vw)] flex-col border-l bg-card shadow-2xl outline-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return <div className={cn('border-b p-6 text-left', className)} {...props} />
+}
+
+function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return <div className={cn('mt-auto flex flex-col gap-2 p-6', className)} {...props} />
+}
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none', className)} {...props} />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+}
diff --git a/src/renderer/src/components/ui/dropdown-menu.tsx b/src/renderer/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..6119ada
--- /dev/null
+++ b/src/renderer/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+
+import { cn } from '@renderer/lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 6, align = 'end', ...props }, ref) => (
+  <DropdownMenuPortal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      align={align}
+      className={cn(
+        'z-50 min-w-44 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg outline-none',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPortal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-xs font-medium text-muted-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+}
diff --git a/src/renderer/src/components/ui/input.tsx b/src/renderer/src/components/ui/input.tsx
new file mode 100644
index 0000000..074a5c0
--- /dev/null
+++ b/src/renderer/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import { cn } from '@renderer/lib/utils'
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/src/renderer/src/components/ui/pagination.tsx b/src/renderer/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..8da13c7
--- /dev/null
+++ b/src/renderer/src/components/ui/pagination.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { Button, type ButtonProps } from '@renderer/components/ui/button'
+import { cn } from '@renderer/lib/utils'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>): React.JSX.Element => (
+  <nav
+    role="navigation"
+    aria-label="分页"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  )
+)
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />
+)
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'button'>
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps): React.JSX.Element => (
+  <Button
+    aria-current={isActive ? 'page' : undefined}
+    className={className}
+    size={size}
+    variant={isActive ? 'outline' : 'ghost'}
+    {...props}
+  />
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element => (
+  <PaginationLink
+    aria-label="上一页"
+    className={cn('w-auto px-2.5', className)}
+    size="default"
+    {...props}
+  >
+    <ChevronLeft className="size-4" />
+    <span>上一页</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element => (
+  <PaginationLink
+    aria-label="下一页"
+    className={cn('w-auto px-2.5', className)}
+    size="default"
+    {...props}
+  >
+    <span>下一页</span>
+    <ChevronRight className="size-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): React.JSX.Element => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="size-4" />
+    <span className="sr-only">更多页面</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+}
diff --git a/src/renderer/src/components/ui/scroll-area.tsx b/src/renderer/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..a689186
--- /dev/null
+++ b/src/renderer/src/components/ui/scroll-area.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@renderer/lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/renderer/src/components/ui/select.tsx b/src/renderer/src/components/ui/select.tsx
new file mode 100644
index 0000000..e939bcc
--- /dev/null
+++ b/src/renderer/src/components/ui/select.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@renderer/lib/utils'
+
+const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <select
+      ref={ref}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none transition-colors focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+  )
+)
+Select.displayName = 'Select'
+
+export { Select }
diff --git a/src/renderer/src/components/ui/separator.tsx b/src/renderer/src/components/ui/separator.tsx
new file mode 100644
index 0000000..b881a68
--- /dev/null
+++ b/src/renderer/src/components/ui/separator.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@renderer/lib/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className)}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/renderer/src/components/ui/sonner.tsx b/src/renderer/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..bb16e93
--- /dev/null
+++ b/src/renderer/src/components/ui/sonner.tsx
@@ -0,0 +1,7 @@
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+
+function Toaster(props: ToasterProps): React.JSX.Element {
+  return <Sonner richColors closeButton position="top-center" {...props} />
+}
+
+export { Toaster }
diff --git a/src/renderer/src/components/ui/table.tsx b/src/renderer/src/components/ui/table.tsx
new file mode 100644
index 0000000..a51eb08
--- /dev/null
+++ b/src/renderer/src/components/ui/table.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+import { cn } from '@renderer/lib/utils'
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+)
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  )
+)
+TableBody.displayName = 'TableBody'
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  )
+)
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground', className)}
+      {...props}
+    />
+  )
+)
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => <td ref={ref} className={cn('p-2 align-middle', className)} {...props} />
+)
+TableCell.displayName = 'TableCell'
+
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell }
diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..582c849
--- /dev/null
+++ b/src/renderer/src/components/ui/tabs.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@renderer/lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn('inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className)}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn('mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className)}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/renderer/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/renderer/src/layouts/AppLayout.tsx b/src/renderer/src/layouts/AppLayout.tsx
new file mode 100644
index 0000000..ebcb40c
--- /dev/null
+++ b/src/renderer/src/layouts/AppLayout.tsx
@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom'
+
+import { AppHeader } from '@renderer/components/layout/AppHeader'
+import { AppSidebar } from '@renderer/components/layout/AppSidebar'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+
+export function AppLayout(): React.JSX.Element {
+  return (
+    <div className="grid h-screen min-w-0 grid-cols-[clamp(220px,20vw,248px)_minmax(0,1fr)] bg-background text-foreground max-[760px]:grid-cols-[76px_minmax(0,1fr)]">
+      <AppSidebar />
+
+      <section className="flex min-h-0 flex-col">
+        <AppHeader />
+        <ScrollArea className="min-h-0 flex-1">
+          <main className="space-y-5 p-6 max-[760px]:p-4">
+            <Outlet />
+          </main>
+        </ScrollArea>
+      </section>
+    </div>
+  )
+}
diff --git a/src/renderer/src/lib/utils.ts b/src/renderer/src/lib/utils.ts
new file mode 100644
index 0000000..b057456
--- /dev/null
+++ b/src/renderer/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
new file mode 100644
index 0000000..4f61af3
--- /dev/null
+++ b/src/renderer/src/main.tsx
@@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { HashRouter } from 'react-router-dom'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </StrictMode>
+)
diff --git a/src/renderer/src/pages/ClassPage.tsx b/src/renderer/src/pages/ClassPage.tsx
new file mode 100644
index 0000000..403bea1
--- /dev/null
+++ b/src/renderer/src/pages/ClassPage.tsx
@@ -0,0 +1,845 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  Camera,
+  Construction,
+  FolderPlus,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  Upload,
+  X
+} from 'lucide-react'
+
+import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@renderer/components/ui/alert-dialog'
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle
+} from '@renderer/components/ui/drawer'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@renderer/components/ui/dropdown-menu'
+import { Input } from '@renderer/components/ui/input'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { Select } from '@renderer/components/ui/select'
+import {
+  classTypeOptions,
+  createUuid,
+  getClassTypeLabel
+} from '@renderer/student/classes'
+import {
+  readChildProfilesFromSpreadsheet,
+  replaceProfilesForClass
+} from '@renderer/student/children'
+import type { ChildProfile, ClassProfile, ClassType } from '@renderer/types/app'
+
+type EditingClass = {
+  id: string
+  name: string
+  type: ClassType
+  familyPhoto?: string
+}
+
+export function ClassPage(): React.JSX.Element {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const classPhotoInputRef = useRef<HTMLInputElement>(null)
+  const editPhotoInputRef = useRef<HTMLInputElement>(null)
+  const [classes, setClasses] = useState<ClassProfile[]>([])
+  const [profiles, setProfiles] = useState<ChildProfile[]>([])
+  const [className, setClassName] = useState('')
+  const [classType, setClassType] = useState<ClassType>('cheap')
+  const [classFamilyPhoto, setClassFamilyPhoto] = useState('')
+  const [query, setQuery] = useState('')
+  const [createDrawerOpen, setCreateDrawerOpen] = useState(false)
+  const [exportingId, setExportingId] = useState('')
+  const [editingClass, setEditingClass] = useState<EditingClass | null>(null)
+  const [uploadingClass, setUploadingClass] = useState<ClassProfile | null>(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [isDragActive, setIsDragActive] = useState(false)
+
+  useEffect(() => {
+    async function loadStudentData(): Promise<void> {
+      const response = await window.api.loadStudentData()
+
+      if (!response.ok) {
+        showError('读取数据库失败', response.message)
+        return
+      }
+
+      setClasses(response.classes)
+      setProfiles(response.profiles)
+    }
+
+    loadStudentData()
+  }, [])
+
+  const profileCountByClass = useMemo(() => {
+    const countMap = new Map<string, number>()
+
+    for (const profile of profiles) {
+      countMap.set(profile.classId, (countMap.get(profile.classId) ?? 0) + 1)
+    }
+
+    return countMap
+  }, [profiles])
+
+  const filteredClasses = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+
+    if (!keyword) {
+      return classes
+    }
+
+    return classes.filter((classItem) =>
+      [classItem.name, classItem.id, getClassTypeLabel(classItem.type)]
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword)
+    )
+  }, [classes, query])
+
+  function getProfilesByClass(classId: string): ChildProfile[] {
+    return profiles.filter((profile) => profile.classId === classId)
+  }
+
+  function showSuccess(message: string, description?: string): void {
+    toast.success(message, description ? { description } : undefined)
+  }
+
+  function showError(message: string, description?: string): void {
+    toast.error(message, description ? { description } : undefined)
+  }
+
+  function readImageFile(file: File, onLoad: (dataUrl: string) => void): void {
+    if (!file.type.startsWith('image/')) {
+      showError('请选择图片文件')
+      return
+    }
+
+    const reader = new FileReader()
+    reader.addEventListener('load', () => {
+      if (typeof reader.result === 'string') {
+        onLoad(reader.result)
+      }
+    })
+    reader.readAsDataURL(file)
+  }
+
+  function handleCreatePhotoChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const file = event.target.files?.[0]
+
+    if (!file) {
+      return
+    }
+
+    readImageFile(file, setClassFamilyPhoto)
+  }
+
+  function handleEditPhotoChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const file = event.target.files?.[0]
+
+    if (!file || !editingClass) {
+      return
+    }
+
+    readImageFile(file, (dataUrl) =>
+      setEditingClass({
+        ...editingClass,
+        familyPhoto: dataUrl
+      })
+    )
+  }
+
+  async function handleCreateClass(): Promise<void> {
+    const nextName = className.trim()
+
+    if (!nextName) {
+      showError('请输入班级名称')
+      return
+    }
+
+    const existingClass = classes.find((classItem) => classItem.name === nextName)
+
+    if (existingClass) {
+      showError('班级已存在', '可以编辑类型或直接上传幼儿信息')
+      return
+    }
+
+    const nextClasses = [
+      ...classes,
+      {
+        id: createUuid(),
+        name: nextName,
+        type: classType,
+        familyPhoto: classFamilyPhoto || undefined
+      }
+    ]
+    const response = await window.api.saveClasses(nextClasses)
+
+    if (!response.ok) {
+      showError('新建班级失败', response.message)
+      return
+    }
+
+    setClasses(nextClasses)
+    setClassName('')
+    setClassType('cheap')
+    setClassFamilyPhoto('')
+    if (classPhotoInputRef.current) {
+      classPhotoInputRef.current.value = ''
+    }
+    setCreateDrawerOpen(false)
+    showSuccess('班级已新建')
+  }
+
+  function handleOpenEdit(classItem: ClassProfile): void {
+    setEditingClass({
+      id: classItem.id,
+      name: classItem.name,
+      type: classItem.type,
+      familyPhoto: classItem.familyPhoto
+    })
+  }
+
+  async function handleSaveEdit(): Promise<void> {
+    if (!editingClass) {
+      return
+    }
+
+    const nextName = editingClass.name.trim()
+
+    if (!nextName) {
+      showError('班级名称不能为空')
+      return
+    }
+
+    const duplicateClass = classes.find(
+      (classItem) => classItem.id !== editingClass.id && classItem.name === nextName
+    )
+
+    if (duplicateClass) {
+      showError('班级名称已存在')
+      return
+    }
+
+    const nextClasses = classes.map((classItem) =>
+      classItem.id === editingClass.id
+        ? {
+            ...classItem,
+            name: nextName,
+            type: editingClass.type,
+            familyPhoto: editingClass.familyPhoto
+          }
+        : classItem
+    )
+    const nextProfiles = profiles.map((profile) =>
+      profile.classId === editingClass.id
+        ? {
+            ...profile,
+            className: nextName
+          }
+        : profile
+    )
+
+    const saveClassesResponse = await window.api.saveClasses(nextClasses)
+
+    if (!saveClassesResponse.ok) {
+      showError('保存班级失败', saveClassesResponse.message)
+      return
+    }
+
+    setClasses(nextClasses)
+    setProfiles(nextProfiles)
+    setEditingClass(null)
+    showSuccess('班级已更新')
+  }
+
+  async function handleDeleteClass(classItem: ClassProfile): Promise<void> {
+    const response = await window.api.deleteClass(classItem.id)
+
+    if (!response.ok) {
+      showError('删除班级失败', response.message)
+      return
+    }
+
+    setClasses(classes.filter((item) => item.id !== classItem.id))
+    setProfiles(profiles.filter((profile) => profile.classId !== classItem.id))
+    showSuccess(`已删除班级「${classItem.name}」及其幼儿数据`)
+  }
+
+  function selectImportFile(file?: File): void {
+    if (!file) {
+      return
+    }
+
+    if (!/\.(xlsx|xls)$/i.test(file.name)) {
+      showError('请选择 .xlsx 或 .xls 文件')
+      return
+    }
+
+    setSelectedFile(file)
+  }
+
+  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    selectImportFile(event.target.files?.[0])
+  }
+
+  function handleDrop(event: React.DragEvent<HTMLButtonElement>): void {
+    event.preventDefault()
+    setIsDragActive(false)
+    selectImportFile(event.dataTransfer.files[0])
+  }
+
+  function openUploadDrawer(classItem: ClassProfile): void {
+    setUploadingClass(classItem)
+    setSelectedFile(null)
+    setIsDragActive(false)
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  async function handleUploadSubmit(): Promise<void> {
+    if (!uploadingClass) {
+      return
+    }
+
+    if (!selectedFile) {
+      showError('请选择要上传的 xlsx 文件')
+      return
+    }
+
+    try {
+      const nextProfiles = await readChildProfilesFromSpreadsheet(selectedFile, uploadingClass)
+      const response = await window.api.replaceClassProfiles({
+        classItem: uploadingClass,
+        profiles: nextProfiles
+      })
+
+      if (!response.ok) {
+        showError('保存幼儿信息失败', response.message)
+        return
+      }
+
+      setProfiles(replaceProfilesForClass(profiles, uploadingClass, nextProfiles))
+      setUploadingClass(null)
+      setSelectedFile(null)
+      setIsDragActive(false)
+      showSuccess(`已上传「${uploadingClass.name}」幼儿信息`, `共 ${nextProfiles.length} 条`)
+    } catch (error) {
+      console.error(error)
+      showError('上传失败', '请确认表头和示例一致，并使用 .xlsx 文件')
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+
+  async function handleExportClass(classItem: ClassProfile): Promise<void> {
+    setExportingId(classItem.id)
+
+    try {
+      const result = await window.api.exportEmptyClassFolder({
+        classId: classItem.id,
+        className: classItem.name,
+        childNames: getProfilesByClass(classItem.id).map(
+          (profile) => profile.name || profile.englishName
+        )
+      })
+
+      if (result.ok) {
+        showSuccess(
+          '已导出压缩包',
+          `${result.zipPath}，包含 ${result.childFolderCount} 个幼儿文件夹`
+        )
+        return
+      }
+
+      if (!result.canceled) {
+        showError(result.message)
+      }
+    } finally {
+      setExportingId('')
+    }
+  }
+
+  return (
+    <>
+      <section className="space-y-4 bg-white px-4 py-4 ">
+        <div className="fle flex-col gap-3">
+          <CardTitle>
+            <div className="flex items-center gap-2">
+              <Construction className="size-5 text-primary" />
+              班级管理
+            </div>
+          </CardTitle>
+          <CardDescription>管理班级信息</CardDescription>
+        </div>
+        <div className="grid gap-3 rounded-md border border-dashed bg-muted/30 p-4">
+          <div className="relative min-w-0">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="pl-9"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="搜索班级名称、类型或 UUID"
+            />
+          </div>
+          <div className="flex justify-end">
+            <Button onClick={() => setCreateDrawerOpen(true)}>
+              <Plus />
+              新建班级
+            </Button>
+          </div>
+        </div>
+
+        <ScrollArea className="h-140">
+          <div className="grid gap-3 pr-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredClasses.map((classItem) => {
+              const childCount = profileCountByClass.get(classItem.id) ?? 0
+
+              return (
+                <Card key={classItem.id} className="shadow-none">
+                  <div className="aspect-video overflow-hidden rounded-t-lg bg-muted">
+                    {classItem.familyPhoto ? (
+                      <img
+                        className="h-full w-full object-cover"
+                        src={classItem.familyPhoto}
+                        alt={classItem.name}
+                      />
+                    ) : (
+                      <div className="grid h-full place-items-center text-sm text-muted-foreground">
+                        <Camera className="mb-2 size-6" />
+                        暂无班级全家福
+                      </div>
+                    )}
+                  </div>
+                  <CardHeader className="space-y-3 pb-3">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <CardTitle className="truncate text-base">{classItem.name}</CardTitle>
+                        <CardDescription className="mt-1 break-all font-mono text-xs">
+                          {classItem.id}
+                        </CardDescription>
+                      </div>
+                      <Badge variant={classItem.type === 'noble' ? 'warning' : 'secondary'}>
+                        {getClassTypeLabel(classItem.type)}
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">幼儿数据</p>
+                        <p className="mt-1 text-xl font-semibold">{childCount} 条</p>
+                      </div>
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">班级类型</p>
+                        <p className="mt-1 font-medium">{getClassTypeLabel(classItem.type)}</p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-end gap-2">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button size="sm" variant="outline">
+                            <MoreHorizontal />
+                            操作
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          <DropdownMenuLabel>班级操作</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem onSelect={() => openUploadDrawer(classItem)}>
+                            <Upload />
+                            上传幼儿信息
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            disabled={exportingId === classItem.id}
+                            onSelect={() => handleExportClass(classItem)}
+                          >
+                            <FolderPlus />
+                            {exportingId === classItem.id ? '导出中' : '导出 ZIP'}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onSelect={() => handleOpenEdit(classItem)}>
+                            <Pencil />
+                            编辑班级
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button size="sm" variant="destructive">
+                            <Trash2 />
+                            删除
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>删除「{classItem.name}」？</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              当前班级是{getClassTypeLabel(classItem.type)}，共有 {childCount}{' '}
+                              条幼儿数据。确认删除后，这个班级和班级里的幼儿数据都会被删除。
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>取消</AlertDialogCancel>
+                            <AlertDialogAction onClick={() => handleDeleteClass(classItem)}>
+                              确认删除
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+
+            {filteredClasses.length === 0 && (
+              <div className="col-span-full grid h-28 place-items-center rounded-md border text-sm text-muted-foreground">
+                暂无匹配班级，请先新建班级
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </section>
+
+      <Drawer direction="right" open={createDrawerOpen} onOpenChange={setCreateDrawerOpen}>
+        <DrawerContent>
+          <DrawerHeader>
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <DrawerTitle>新建班级</DrawerTitle>
+                <DrawerDescription className="mt-1">
+                  填写班级名称、类型，并上传班级全家福。
+                </DrawerDescription>
+              </div>
+              <Button
+                size="icon"
+                variant="ghost"
+                aria-label="关闭新建班级"
+                onClick={() => setCreateDrawerOpen(false)}
+              >
+                <X />
+              </Button>
+            </div>
+          </DrawerHeader>
+          <div className="space-y-5 p-6">
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="new-class-name">
+                班级名称
+              </label>
+              <Input
+                id="new-class-name"
+                value={className}
+                onChange={(event) => setClassName(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    handleCreateClass()
+                  }
+                }}
+                placeholder="输入班级名称，例如：星星二班"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="new-class-type">
+                班级类型
+              </label>
+              <Select
+                id="new-class-type"
+                value={classType}
+                onChange={(event) => setClassType(event.target.value as ClassType)}
+              >
+                {classTypeOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <p className="text-sm font-medium">班级全家福</p>
+              <button
+                type="button"
+                className="relative grid aspect-video overflow-hidden rounded-md border border-dashed bg-muted transition-colors hover:border-primary"
+                onClick={() => classPhotoInputRef.current?.click()}
+              >
+                {classFamilyPhoto ? (
+                  <img
+                    className="h-full w-full object-cover"
+                    src={classFamilyPhoto}
+                    alt="班级全家福预览"
+                  />
+                ) : (
+                  <span className="grid place-items-center gap-2 p-4 text-center text-sm text-muted-foreground">
+                    <Camera className="mx-auto size-5" />
+                    上传班级全家福
+                  </span>
+                )}
+              </button>
+              <input
+                ref={classPhotoInputRef}
+                className="hidden"
+                type="file"
+                accept="image/*"
+                onChange={handleCreatePhotoChange}
+              />
+              {classFamilyPhoto && (
+                <div className="flex justify-end">
+                  <Button size="sm" variant="outline" onClick={() => setClassFamilyPhoto('')}>
+                    移除全家福
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setCreateDrawerOpen(false)}>
+                取消
+              </Button>
+              <Button onClick={handleCreateClass}>
+                <Plus />
+                确认新建
+              </Button>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer
+        direction="right"
+        open={Boolean(editingClass)}
+        onOpenChange={() => setEditingClass(null)}
+      >
+        <DrawerContent>
+          {editingClass && (
+            <>
+              <DrawerHeader>
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <DrawerTitle>编辑班级</DrawerTitle>
+                    <DrawerDescription className="mt-1">
+                      修改班级名称或类型，班级下已有幼儿数据会同步班级名称。
+                    </DrawerDescription>
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label="关闭编辑班级"
+                    onClick={() => setEditingClass(null)}
+                  >
+                    <X />
+                  </Button>
+                </div>
+              </DrawerHeader>
+              <div className="space-y-5 p-6">
+                <div className="grid gap-2">
+                  <label className="text-sm font-medium" htmlFor="edit-class-name">
+                    班级名称
+                  </label>
+                  <Input
+                    id="edit-class-name"
+                    value={editingClass.name}
+                    onChange={(event) =>
+                      setEditingClass({
+                        ...editingClass,
+                        name: event.target.value
+                      })
+                    }
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <label className="text-sm font-medium" htmlFor="edit-class-type">
+                    班级类型
+                  </label>
+                  <Select
+                    id="edit-class-type"
+                    value={editingClass.type}
+                    onChange={(event) =>
+                      setEditingClass({
+                        ...editingClass,
+                        type: event.target.value as ClassType
+                      })
+                    }
+                  >
+                    {classTypeOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+                <div className="grid gap-2">
+                  <p className="text-sm font-medium">班级全家福</p>
+                  <button
+                    type="button"
+                    className="relative grid aspect-[16/9] overflow-hidden rounded-md border border-dashed bg-muted transition-colors hover:border-primary"
+                    onClick={() => editPhotoInputRef.current?.click()}
+                  >
+                    {editingClass.familyPhoto ? (
+                      <img
+                        className="h-full w-full object-cover"
+                        src={editingClass.familyPhoto}
+                        alt="班级全家福预览"
+                      />
+                    ) : (
+                      <span className="grid place-items-center gap-2 p-4 text-center text-sm text-muted-foreground">
+                        <Camera className="mx-auto size-5" />
+                        上传班级全家福
+                      </span>
+                    )}
+                  </button>
+                  <input
+                    ref={editPhotoInputRef}
+                    className="hidden"
+                    type="file"
+                    accept="image/*"
+                    onChange={handleEditPhotoChange}
+                  />
+                  {editingClass.familyPhoto && (
+                    <div className="flex justify-end">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          setEditingClass({
+                            ...editingClass,
+                            familyPhoto: undefined
+                          })
+                        }
+                      >
+                        移除全家福
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button variant="outline" onClick={() => setEditingClass(null)}>
+                    取消
+                  </Button>
+                  <Button onClick={handleSaveEdit}>保存</Button>
+                </div>
+              </div>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+
+      <Drawer
+        direction="right"
+        open={Boolean(uploadingClass)}
+        onOpenChange={() => setUploadingClass(null)}
+      >
+        <DrawerContent>
+          {uploadingClass && (
+            <>
+              <DrawerHeader>
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <DrawerTitle>上传幼儿信息</DrawerTitle>
+                    <DrawerDescription className="mt-1">
+                      当前班级：{uploadingClass.name}，上传后会替换该班级已有幼儿数据。
+                    </DrawerDescription>
+                  </div>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label="关闭上传幼儿信息"
+                    onClick={() => setUploadingClass(null)}
+                  >
+                    <X />
+                  </Button>
+                </div>
+              </DrawerHeader>
+              <div className="space-y-5 p-6">
+                <button
+                  type="button"
+                  className={[
+                    'grid min-h-[180px] place-items-center rounded-md border border-dashed bg-muted/30 p-6 text-center transition-colors',
+                    isDragActive
+                      ? 'border-primary bg-accent'
+                      : 'hover:border-primary hover:bg-muted/50'
+                  ].join(' ')}
+                  onClick={() => fileInputRef.current?.click()}
+                  onDragEnter={(event) => {
+                    event.preventDefault()
+                    setIsDragActive(true)
+                  }}
+                  onDragOver={(event) => event.preventDefault()}
+                  onDragLeave={() => setIsDragActive(false)}
+                  onDrop={handleDrop}
+                >
+                  <div className="space-y-3">
+                    <div className="mx-auto grid size-12 place-items-center rounded-full bg-primary text-primary-foreground">
+                      <Upload className="size-5" />
+                    </div>
+                    <div>
+                      <p className="font-medium">
+                        {selectedFile ? selectedFile.name : '点击或拖拽 XLSX 文件到这里'}
+                      </p>
+                      <p className="mt-1 text-sm text-muted-foreground">支持 .xlsx 和 .xls 文件</p>
+                    </div>
+                  </div>
+                </button>
+                <input
+                  ref={fileInputRef}
+                  className="hidden"
+                  type="file"
+                  accept=".xlsx,.xls"
+                  onChange={handleFileChange}
+                />
+                <div className="flex justify-end gap-2">
+                  <Button variant="outline" onClick={() => setUploadingClass(null)}>
+                    取消
+                  </Button>
+                  <Button onClick={handleUploadSubmit}>
+                    <Upload />
+                    确认上传
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+
+      <DashboardFooter />
+    </>
+  )
+}
diff --git a/src/renderer/src/pages/PlaceholderPage.tsx b/src/renderer/src/pages/PlaceholderPage.tsx
new file mode 100644
index 0000000..a79ded2
--- /dev/null
+++ b/src/renderer/src/pages/PlaceholderPage.tsx
@@ -0,0 +1,31 @@
+import { Construction } from 'lucide-react'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@renderer/components/ui/card'
+
+export function PlaceholderPage({
+  title,
+  description = '该功能页面已预留，后续可以在这里接入具体业务。'
+}: {
+  title: string
+  description?: string
+}): React.JSX.Element {
+  return (
+    <Card className="shadow-none">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Construction className="size-5 text-primary" />
+          <CardTitle>{title}</CardTitle>
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid min-h-[360px] place-items-center rounded-md border border-dashed bg-muted/30 p-8 text-center">
+          <div className="max-w-[360px] space-y-2">
+            <p className="text-lg font-semibold">{title}</p>
+            <p className="text-sm text-muted-foreground">空页面占位已生成，可以继续补充表单、列表或批处理入口。</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/renderer/src/pages/ReportPage.tsx b/src/renderer/src/pages/ReportPage.tsx
new file mode 100644
index 0000000..4fb96c8
--- /dev/null
+++ b/src/renderer/src/pages/ReportPage.tsx
@@ -0,0 +1,373 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  ExternalLink,
+  File,
+  FileSpreadsheet,
+  FileText,
+  Files,
+  Presentation,
+  Search,
+  Trash2,
+  Wand2
+} from 'lucide-react'
+import { toast } from 'sonner'
+
+import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import { Input } from '@renderer/components/ui/input'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { Select } from '@renderer/components/ui/select'
+import type { ClassProfile, ReportFormat, ReportItem, TemplateItem } from '@renderer/types/app'
+
+const formatOptions: Array<{ value: ReportFormat | 'all'; label: string }> = [
+  { value: 'all', label: '全部格式' },
+  { value: 'word', label: 'Word' },
+  { value: 'ppt', label: 'PPT' },
+  { value: 'pdf', label: 'PDF' },
+  { value: 'excel', label: 'Excel' }
+]
+
+function getReportFormatLabel(format: ReportFormat): string {
+  const option = formatOptions.find((item) => item.value === format)
+
+  return option?.label ?? '文件'
+}
+
+function getReportIcon(format: ReportFormat): typeof FileText {
+  if (format === 'ppt') {
+    return Presentation
+  }
+
+  if (format === 'excel') {
+    return FileSpreadsheet
+  }
+
+  if (format === 'pdf') {
+    return File
+  }
+
+  return FileText
+}
+
+function formatDateTime(value: string): string {
+  const date = new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return value || '未生成'
+  }
+
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+export function ReportPage(): React.JSX.Element {
+  const [classes, setClasses] = useState<ClassProfile[]>([])
+  const [templates, setTemplates] = useState<TemplateItem[]>([])
+  const [reports, setReports] = useState<ReportItem[]>([])
+  const [query, setQuery] = useState('')
+  const [selectedClassId, setSelectedClassId] = useState('all')
+  const [selectedFormat, setSelectedFormat] = useState<ReportFormat | 'all'>('all')
+  const [selectedTemplateId, setSelectedTemplateId] = useState('')
+  const [generating, setGenerating] = useState(false)
+  const [openingId, setOpeningId] = useState('')
+  const [deletingId, setDeletingId] = useState('')
+
+  useEffect(() => {
+    async function loadPageData(): Promise<void> {
+      const [studentResponse, templateResponse, reportResponse] = await Promise.all([
+        window.api.loadStudentData(),
+        window.api.loadTemplates(),
+        window.api.loadReports()
+      ])
+
+      if (!studentResponse.ok) {
+        toast.error('读取班级失败', { description: studentResponse.message })
+      } else {
+        setClasses(studentResponse.classes)
+      }
+
+      if (!templateResponse.ok) {
+        toast.error('读取模板失败', { description: templateResponse.message })
+      } else {
+        setTemplates(templateResponse.templates)
+        setSelectedTemplateId(
+          templateResponse.templates.find((template) => template.fileExtension === '.pptx')?.id ??
+            ''
+        )
+      }
+
+      if (!reportResponse.ok) {
+        toast.error('读取报告失败', { description: reportResponse.message })
+      } else {
+        setReports(reportResponse.reports)
+      }
+    }
+
+    loadPageData()
+  }, [])
+
+  const pptxTemplates = templates.filter((template) => template.fileExtension === '.pptx')
+
+  const filteredReports = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+
+    return reports.filter((report) => {
+      const matchesKeyword =
+        !keyword ||
+        [
+          report.title,
+          report.className,
+          report.studentName,
+          report.originalFileName,
+          getReportFormatLabel(report.format)
+        ]
+          .join(' ')
+          .toLowerCase()
+          .includes(keyword)
+      const matchesClass = selectedClassId === 'all' || report.classId === selectedClassId
+      const matchesFormat = selectedFormat === 'all' || report.format === selectedFormat
+
+      return matchesKeyword && matchesClass && matchesFormat
+    })
+  }, [query, reports, selectedClassId, selectedFormat])
+
+  async function handleGenerateReports(): Promise<void> {
+    if (!selectedTemplateId) {
+      toast.error('请先选择 PPTX 报告模板')
+      return
+    }
+
+    if (selectedClassId === 'all') {
+      toast.error('请选择要生成报告的班级')
+      return
+    }
+
+    setGenerating(true)
+
+    try {
+      const response = await window.api.generateReports({
+        templateId: selectedTemplateId,
+        classId: selectedClassId
+      })
+
+      if (!response.ok) {
+        toast.error('生成报告失败', { description: response.message })
+        return
+      }
+
+      setReports((currentReports) => [...response.reports, ...currentReports])
+      toast.success('报告生成完成', {
+        description:
+          response.skipped.length > 0
+            ? `成功 ${response.reports.length} 份，跳过 ${response.skipped.length} 份`
+            : `成功 ${response.reports.length} 份`
+      })
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  async function handleOpenReport(report: ReportItem): Promise<void> {
+    setOpeningId(report.id)
+
+    try {
+      const response = await window.api.openReport(report.filePath)
+
+      if (!response.ok) {
+        toast.error('打开报告失败', { description: response.message })
+      }
+    } finally {
+      setOpeningId('')
+    }
+  }
+
+  async function handleDeleteReport(report: ReportItem): Promise<void> {
+    setDeletingId(report.id)
+
+    try {
+      const response = await window.api.deleteReport(report.id)
+
+      if (!response.ok) {
+        toast.error('删除报告失败', { description: response.message })
+        return
+      }
+
+      setReports((currentReports) =>
+        currentReports.filter((currentReport) => currentReport.id !== report.id)
+      )
+      toast.success(`已删除报告「${report.title}」`)
+    } finally {
+      setDeletingId('')
+    }
+  }
+
+  return (
+    <>
+      <section className="space-y-4 bg-white px-4 py-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div>
+            <CardTitle>
+              <div className="flex items-center gap-2">
+                <Files className="size-5 text-primary" />
+                报告管理
+              </div>
+            </CardTitle>
+            <CardDescription className="mt-1">
+              管理已生成的成长报告，支持按班级、学生姓名和文件格式筛选。
+            </CardDescription>
+          </div>
+          <Badge variant={filteredReports.length > 0 ? 'success' : 'secondary'}>
+            {filteredReports.length} 份报告
+          </Badge>
+        </div>
+
+        <div className="grid gap-3 rounded-md border border-dashed bg-muted/30 p-4">
+          <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_180px]">
+            <div className="relative min-w-0">
+              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                className="pl-9"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="搜索学生姓名、班级、报告名称或文件名"
+              />
+            </div>
+            <Select
+              value={selectedClassId}
+              onChange={(event) => setSelectedClassId(event.target.value)}
+            >
+              <option value="all">全部班级</option>
+              {classes.map((classItem) => (
+                <option key={classItem.id} value={classItem.id}>
+                  {classItem.name}
+                </option>
+              ))}
+            </Select>
+            <Select
+              value={selectedFormat}
+              onChange={(event) => setSelectedFormat(event.target.value as ReportFormat | 'all')}
+            >
+              {formatOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
+            <Select
+              value={selectedTemplateId}
+              onChange={(event) => setSelectedTemplateId(event.target.value)}
+            >
+              <option value="">选择 PPTX 报告模板</option>
+              {pptxTemplates.map((template) => (
+                <option key={template.id} value={template.id}>
+                  {template.name} - {template.originalFileName}
+                </option>
+              ))}
+            </Select>
+            <Button
+              disabled={generating || selectedClassId === 'all' || !selectedTemplateId}
+              onClick={handleGenerateReports}
+            >
+              <Wand2 />
+              {generating ? '生成中' : '生成当前班级报告'}
+            </Button>
+          </div>
+        </div>
+
+        <ScrollArea className="h-140">
+          <div className="grid gap-3 pr-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredReports.map((report) => {
+              const ReportIcon = getReportIcon(report.format)
+
+              return (
+                <Card key={report.id} className="shadow-none">
+                  <CardHeader className="space-y-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="grid size-11 shrink-0 place-items-center rounded-md bg-muted text-primary">
+                        <ReportIcon className="size-5" />
+                      </div>
+                      <Badge variant="secondary">{getReportFormatLabel(report.format)}</Badge>
+                    </div>
+                    <div className="min-w-0">
+                      <CardTitle className="truncate text-base">{report.title}</CardTitle>
+                      <CardDescription className="mt-2 truncate">
+                        {report.originalFileName}
+                      </CardDescription>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">班级</p>
+                        <p className="mt-1 truncate font-medium">{report.className}</p>
+                      </div>
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">学生</p>
+                        <p className="mt-1 truncate font-medium">{report.studentName}</p>
+                      </div>
+                      <div className="col-span-2 rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">生成时间</p>
+                        <p className="mt-1 truncate text-sm">{formatDateTime(report.createdAt)}</p>
+                      </div>
+                    </div>
+
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        size="sm"
+                        disabled={openingId === report.id}
+                        onClick={() => handleOpenReport(report)}
+                      >
+                        <ExternalLink />
+                        {openingId === report.id ? '打开中' : '打开报告'}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        disabled={deletingId === report.id}
+                        onClick={() => handleDeleteReport(report)}
+                      >
+                        <Trash2 />
+                        {deletingId === report.id ? '删除中' : '删除'}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+
+            {filteredReports.length === 0 && (
+              <div className="col-span-full grid min-h-52 place-items-center rounded-md border bg-background p-6 text-center text-sm text-muted-foreground">
+                <div className="space-y-3">
+                  <div className="mx-auto grid size-12 place-items-center rounded-full bg-muted text-primary">
+                    <Files className="size-5" />
+                  </div>
+                  <div>
+                    <p className="font-medium text-foreground">暂无报告</p>
+                    <p className="mt-1">选择班级和 PPTX 模板生成报告后，会以卡片形式显示在这里。</p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </section>
+
+      <DashboardFooter />
+    </>
+  )
+}
diff --git a/src/renderer/src/pages/SettingsPage.tsx b/src/renderer/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..0d93675
--- /dev/null
+++ b/src/renderer/src/pages/SettingsPage.tsx
@@ -0,0 +1,5 @@
+import { ModelSettingsForm } from '@renderer/components/settings/ModelSettingsForm'
+
+export function SettingsPage(): React.JSX.Element {
+  return <ModelSettingsForm />
+}
diff --git a/src/renderer/src/pages/StudentPage.tsx b/src/renderer/src/pages/StudentPage.tsx
new file mode 100644
index 0000000..dd70f93
--- /dev/null
+++ b/src/renderer/src/pages/StudentPage.tsx
@@ -0,0 +1,855 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Bot,
+  Construction,
+  FileSearch,
+  MoreHorizontal,
+  Pencil,
+  Presentation,
+  Save,
+  Search,
+  Trash2,
+  UserRound,
+  Wand2,
+  X
+} from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+
+import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@renderer/components/ui/alert-dialog'
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle
+} from '@renderer/components/ui/drawer'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@renderer/components/ui/dropdown-menu'
+import { Input } from '@renderer/components/ui/input'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+} from '@renderer/components/ui/pagination'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { Select } from '@renderer/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@renderer/components/ui/table'
+import { getClassTypeLabel } from '@renderer/student/classes'
+import type { ChildProfile, ClassProfile } from '@renderer/types/app'
+
+function formatList(items: string[]): string {
+  return items.length > 0 ? items.join('、') : '未填写'
+}
+
+function parseList(value: string): string[] {
+  return value
+    .split(/[、,，]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+function getVisiblePages(currentPage: number, totalPages: number): Array<number | 'ellipsis'> {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, index) => index + 1)
+  }
+
+  const pages = new Set([1, totalPages, currentPage - 1, currentPage, currentPage + 1])
+  const validPages = Array.from(pages)
+    .filter((page) => page >= 1 && page <= totalPages)
+    .sort((first, second) => first - second)
+  const visiblePages: Array<number | 'ellipsis'> = []
+
+  for (const page of validPages) {
+    const previousPage = visiblePages[visiblePages.length - 1]
+
+    if (typeof previousPage === 'number' && page - previousPage > 1) {
+      visiblePages.push('ellipsis')
+    }
+
+    visiblePages.push(page)
+  }
+
+  return visiblePages
+}
+
+export function StudentPage(): React.JSX.Element {
+  const navigate = useNavigate()
+  const [profiles, setProfiles] = useState<ChildProfile[]>([])
+  const [classes, setClasses] = useState<ClassProfile[]>([])
+  const [totalProfiles, setTotalProfiles] = useState(0)
+  const [studentDataReady, setStudentDataReady] = useState(false)
+  const [selectedId, setSelectedId] = useState<string>('')
+  const [selectedProfileIds, setSelectedProfileIds] = useState<string[]>([])
+  const [generatingIds, setGeneratingIds] = useState<string[]>([])
+  const [editingProfile, setEditingProfile] = useState<ChildProfile | null>(null)
+  const [query, setQuery] = useState('')
+  const [selectedClassFilter, setSelectedClassFilter] = useState('all')
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+
+  useEffect(() => {
+    async function loadStudentData(): Promise<void> {
+      const response = await window.api.loadStudentData()
+
+      if (!response.ok) {
+        toast.error('读取数据库失败', { description: response.message })
+        return
+      }
+
+      setClasses(response.classes)
+      setStudentDataReady(true)
+    }
+
+    loadStudentData()
+  }, [])
+
+  useEffect(() => {
+    async function loadPagedStudentProfiles(): Promise<void> {
+      if (!studentDataReady) {
+        return
+      }
+
+      const response = await window.api.listStudentProfiles({
+        page,
+        pageSize,
+        query,
+        classId: selectedClassFilter
+      })
+
+      if (!response.ok) {
+        toast.error('读取学生列表失败', { description: response.message })
+        return
+      }
+
+      setProfiles(response.profiles)
+      setTotalProfiles(response.total)
+    }
+
+    loadPagedStudentProfiles()
+  }, [page, pageSize, query, selectedClassFilter, studentDataReady])
+
+  const classOptions = useMemo(() => {
+    const classMap = new Map<string, ClassProfile>()
+
+    for (const classItem of classes) {
+      classMap.set(classItem.id, classItem)
+    }
+
+    for (const profile of profiles) {
+      if (profile.classId && profile.className) {
+        classMap.set(profile.classId, {
+          id: profile.classId,
+          name: profile.className,
+          type: 'cheap'
+        })
+      }
+    }
+
+    return Array.from(classMap.values())
+  }, [classes, profiles])
+
+  const selectedProfile = profiles.find((profile) => profile.id === selectedId)
+  const activeProfile = editingProfile ?? selectedProfile
+  const selectedProfileClass = selectedProfile
+    ? classOptions.find((classItem) => classItem.id === selectedProfile.classId)
+    : undefined
+  const totalPages = Math.max(Math.ceil(totalProfiles / pageSize), 1)
+  const visiblePages = getVisiblePages(page, totalPages)
+  const currentStart = totalProfiles === 0 ? 0 : (page - 1) * pageSize + 1
+  const currentEnd = Math.min(page * pageSize, totalProfiles)
+
+  function changePage(nextPage: number): void {
+    setPage(Math.min(Math.max(nextPage, 1), totalPages))
+  }
+
+  function closeProfilePanel(): void {
+    setSelectedId('')
+    setEditingProfile(null)
+  }
+
+  function handleDrawerOpenChange(open: boolean): void {
+    if (!open) {
+      closeProfilePanel()
+    }
+  }
+
+  function updateProfileInPage(nextProfile: ChildProfile): void {
+    setProfiles((currentProfiles) =>
+      currentProfiles.map((profile) => (profile.id === nextProfile.id ? nextProfile : profile))
+    )
+    setEditingProfile((currentProfile) =>
+      currentProfile?.id === nextProfile.id ? nextProfile : currentProfile
+    )
+  }
+
+  function toggleSelectedProfile(profileId: string): void {
+    setSelectedProfileIds((currentIds) =>
+      currentIds.includes(profileId)
+        ? currentIds.filter((currentId) => currentId !== profileId)
+        : [...currentIds, profileId]
+    )
+  }
+
+  function toggleSelectedPageProfiles(checked: boolean): void {
+    const pageProfileIds = profiles.map((profile) => profile.id)
+
+    setSelectedProfileIds((currentIds) => {
+      if (!checked) {
+        return currentIds.filter((profileId) => !pageProfileIds.includes(profileId))
+      }
+
+      return Array.from(new Set([...currentIds, ...pageProfileIds]))
+    })
+  }
+
+  async function handleGenerateComment(profile: ChildProfile): Promise<boolean> {
+    setGeneratingIds((currentIds) => [...currentIds, profile.id])
+
+    try {
+      const response = await window.api.generateStudentComment({ profileId: profile.id })
+
+      if (!response.ok) {
+        toast.error(`生成「${profile.name || profile.englishName || '学生'}」评语失败`, {
+          description: response.message
+        })
+        return false
+      }
+
+      updateProfileInPage(response.profile)
+      toast.success(`已生成「${response.profile.name || '学生'}」评语`)
+      return true
+    } finally {
+      setGeneratingIds((currentIds) => currentIds.filter((profileId) => profileId !== profile.id))
+    }
+  }
+
+  async function handleBatchGenerateComments(): Promise<void> {
+    const selectedProfiles = profiles.filter((profile) => selectedProfileIds.includes(profile.id))
+
+    if (selectedProfiles.length === 0) {
+      toast.error('请先选择要生成评语的学生')
+      return
+    }
+
+    let successCount = 0
+    let failedCount = 0
+
+    for (const profile of selectedProfiles) {
+      const ok = await handleGenerateComment(profile)
+
+      if (ok) {
+        successCount += 1
+      } else {
+        failedCount += 1
+      }
+    }
+
+    toast.success('批量生成完成', {
+      description: `成功 ${successCount} 个，失败 ${failedCount} 个`
+    })
+  }
+
+  function hasGeneratedReport(profile: ChildProfile): boolean {
+    const profileWithReport = profile as ChildProfile & {
+      reportPath?: string
+      reportGeneratedAt?: string
+      reportFilePath?: string
+    }
+
+    return Boolean(
+      profileWithReport.reportPath ||
+      profileWithReport.reportGeneratedAt ||
+      profileWithReport.reportFilePath
+    )
+  }
+
+  function handleGenerateReport(profile: ChildProfile): void {
+    navigate('/tools/reports', {
+      state: {
+        profileId: profile.id
+      }
+    })
+  }
+
+  function handleViewReport(profile: ChildProfile): void {
+    if (!hasGeneratedReport(profile)) {
+      return
+    }
+
+    navigate('/tools/reports', {
+      state: {
+        profileId: profile.id,
+        mode: 'view'
+      }
+    })
+  }
+
+  async function handleDeleteProfile(profile: ChildProfile): Promise<void> {
+    const response = await window.api.deleteStudentProfile(profile.id)
+
+    if (!response.ok) {
+      toast.error('删除学生失败', { description: response.message })
+      return
+    }
+
+    setProfiles((currentProfiles) =>
+      currentProfiles.filter((currentProfile) => currentProfile.id !== profile.id)
+    )
+    setSelectedProfileIds((currentIds) =>
+      currentIds.filter((profileId) => profileId !== profile.id)
+    )
+    setTotalProfiles((currentTotal) => Math.max(currentTotal - 1, 0))
+
+    if (selectedId === profile.id) {
+      closeProfilePanel()
+    }
+
+    toast.success(`已删除「${profile.name || profile.englishName || '学生'}」`)
+  }
+
+  async function handleSaveProfile(): Promise<void> {
+    if (!editingProfile) {
+      return
+    }
+
+    const response = await window.api.updateStudentProfile(editingProfile)
+
+    if (!response.ok) {
+      toast.error('保存学生信息失败', { description: response.message })
+      return
+    }
+
+    updateProfileInPage(response.profile)
+    setEditingProfile(null)
+    toast.success('学生信息已保存')
+  }
+
+  return (
+    <>
+      <section>
+        <Card className="shadow-none">
+          <CardHeader className="gap-3">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="fle flex-col gap-3">
+                <CardTitle>
+                  <div className="flex items-center gap-2">
+                    <Construction className="size-5 text-primary" />
+                    幼儿信息
+                  </div>
+                </CardTitle>
+                <CardDescription>查看已上传的幼儿档案，按班级或关键词快速筛选。</CardDescription>
+              </div>
+              <Badge variant={totalProfiles > 0 ? 'success' : 'warning'}>
+                {totalProfiles} 条档案
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-3 rounded-md border border-dashed bg-muted/30 p-4">
+              <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px]">
+                <div className="relative min-w-0">
+                  <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    className="pl-9"
+                    value={query}
+                    onChange={(event) => {
+                      setQuery(event.target.value)
+                      setPage(1)
+                    }}
+                    placeholder="搜索姓名、英文名、爱好、朋友或表现特征"
+                  />
+                </div>
+                <Select
+                  value={selectedClassFilter}
+                  onChange={(event) => {
+                    setSelectedClassFilter(event.target.value)
+                    setPage(1)
+                  }}
+                >
+                  <option value="all">全部班级</option>
+                  {classOptions.map((classItem) => (
+                    <option key={classItem.id} value={classItem.id}>
+                      {classItem.name}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <div className="flex justify-end">
+                <Button
+                  size="sm"
+                  disabled={selectedProfileIds.length === 0 || generatingIds.length > 0}
+                  onClick={handleBatchGenerateComments}
+                >
+                  <Wand2 />
+                  批量生成评语
+                </Button>
+              </div>
+            </div>
+
+            <div className="overflow-hidden rounded-md border">
+              <Table className="min-w-[1080px]">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-12">
+                      <input
+                        className="size-4 rounded border-input accent-primary"
+                        type="checkbox"
+                        checked={
+                          profiles.length > 0 &&
+                          profiles.every((profile) => selectedProfileIds.includes(profile.id))
+                        }
+                        onChange={(event) => toggleSelectedPageProfiles(event.target.checked)}
+                        aria-label="选择当前页学生"
+                      />
+                    </TableHead>
+                    <TableHead>班级</TableHead>
+                    <TableHead>姓名</TableHead>
+                    <TableHead>英文名</TableHead>
+                    <TableHead>性别</TableHead>
+                    <TableHead>生日</TableHead>
+                    <TableHead>属相</TableHead>
+                    <TableHead>爱好</TableHead>
+                    <TableHead>评语</TableHead>
+                    <TableHead className="w-36 pr-6 text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {profiles.map((profile) => {
+                    const isGenerating = generatingIds.includes(profile.id)
+                    const reportReady = hasGeneratedReport(profile)
+
+                    return (
+                      <TableRow
+                        key={profile.id}
+                        className={profile.id === selectedProfile?.id ? 'bg-muted/70' : undefined}
+                      >
+                        <TableCell>
+                          <input
+                            className="size-4 rounded border-input accent-primary"
+                            type="checkbox"
+                            checked={selectedProfileIds.includes(profile.id)}
+                            onChange={() => toggleSelectedProfile(profile.id)}
+                            aria-label={`选择${profile.name || profile.englishName || '学生'}`}
+                          />
+                        </TableCell>
+                        <TableCell>{profile.className || '未分班'}</TableCell>
+                        <TableCell className="font-medium">{profile.name || '未填写'}</TableCell>
+                        <TableCell>{profile.englishName || '未填写'}</TableCell>
+                        <TableCell>{profile.gender || '未填写'}</TableCell>
+                        <TableCell>{profile.birthday || '未填写'}</TableCell>
+                        <TableCell>{profile.zodiac || '未填写'}</TableCell>
+                        <TableCell className="max-w-[160px] truncate">
+                          {formatList(profile.hobbies)}
+                        </TableCell>
+                        <TableCell className="max-w-[260px] truncate">
+                          {profile.comment || '未生成'}
+                        </TableCell>
+                        <TableCell className="pr-6 text-right">
+                          <div className="flex justify-end gap-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => {
+                                setSelectedId(profile.id)
+                                setEditingProfile(null)
+                              }}
+                            >
+                              查看
+                            </Button>
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button size="sm" variant="outline">
+                                  <MoreHorizontal />
+                                  操作
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent>
+                                <DropdownMenuLabel>学生操作</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                  onSelect={() => {
+                                    setSelectedId(profile.id)
+                                    setEditingProfile(profile)
+                                  }}
+                                >
+                                  <Pencil />
+                                  编辑学生信息
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                  disabled={isGenerating}
+                                  onSelect={() => handleGenerateComment(profile)}
+                                >
+                                  <Bot />
+                                  {isGenerating ? '生成中' : '生成评语'}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={() => handleGenerateReport(profile)}>
+                                  <Presentation />
+                                  生成报告
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                  disabled={!reportReady}
+                                  onSelect={() => handleViewReport(profile)}
+                                >
+                                  <FileSearch />
+                                  查看报告
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <AlertDialog>
+                                  <AlertDialogTrigger asChild>
+                                    <DropdownMenuItem
+                                      className="text-destructive focus:text-destructive"
+                                      onSelect={(event) => event.preventDefault()}
+                                    >
+                                      <Trash2 />
+                                      删除学生
+                                    </DropdownMenuItem>
+                                  </AlertDialogTrigger>
+                                  <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                      <AlertDialogTitle>
+                                        删除「{profile.name || profile.englishName || '学生'}」？
+                                      </AlertDialogTitle>
+                                      <AlertDialogDescription>
+                                        确认删除后，这名学生的幼儿信息和已生成评语会从当前数据库中移除。
+                                      </AlertDialogDescription>
+                                    </AlertDialogHeader>
+                                    <AlertDialogFooter>
+                                      <AlertDialogCancel>取消</AlertDialogCancel>
+                                      <AlertDialogAction
+                                        onClick={() => handleDeleteProfile(profile)}
+                                      >
+                                        确认删除
+                                      </AlertDialogAction>
+                                    </AlertDialogFooter>
+                                  </AlertDialogContent>
+                                </AlertDialog>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                  {profiles.length === 0 && (
+                    <TableRow>
+                      <TableCell className="h-28 text-center text-muted-foreground" colSpan={10}>
+                        暂无匹配数据，请先在班级管理中上传幼儿 xlsx 表格
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+
+            <div className="grid gap-3 rounded-md border bg-background px-3 py-3 lg:grid-cols-[1fr_auto_1fr] lg:items-center">
+              <div className="hidden lg:block" />
+
+              <Pagination className="justify-center">
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious disabled={page <= 1} onClick={() => changePage(page - 1)} />
+                  </PaginationItem>
+                  {visiblePages.map((visiblePage, index) => (
+                    <PaginationItem key={`${visiblePage}-${index}`}>
+                      {visiblePage === 'ellipsis' ? (
+                        <PaginationEllipsis />
+                      ) : (
+                        <PaginationLink
+                          isActive={visiblePage === page}
+                          onClick={() => changePage(visiblePage)}
+                        >
+                          {visiblePage}
+                        </PaginationLink>
+                      )}
+                    </PaginationItem>
+                  ))}
+                  <PaginationItem>
+                    <PaginationNext
+                      disabled={page >= totalPages}
+                      onClick={() => changePage(page + 1)}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+
+              <div className="flex flex-wrap items-center justify-center gap-3 text-sm text-muted-foreground lg:justify-end">
+                <span>
+                  显示 {currentStart}-{currentEnd} 条，共 {totalProfiles} 条
+                </span>
+                <label className="flex items-center gap-2">
+                  每页
+                  <Select
+                    className="h-8 w-24"
+                    value={String(pageSize)}
+                    onChange={(event) => {
+                      setPageSize(Number(event.target.value))
+                      setPage(1)
+                    }}
+                  >
+                    <option value="10">10 条</option>
+                    <option value="20">20 条</option>
+                    <option value="50">50 条</option>
+                  </Select>
+                </label>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      <Drawer direction="right" open={Boolean(activeProfile)} onOpenChange={handleDrawerOpenChange}>
+        <DrawerContent>
+          {activeProfile && (
+            <>
+              <DrawerHeader>
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <UserRound className="size-5 text-primary" />
+                      <DrawerTitle>幼儿信息</DrawerTitle>
+                    </div>
+                    <DrawerDescription className="mt-1">查看当前幼儿的完整档案。</DrawerDescription>
+                  </div>
+                  <div className="flex gap-2">
+                    {editingProfile ? (
+                      <Button size="sm" onClick={handleSaveProfile}>
+                        <Save />
+                        保存
+                      </Button>
+                    ) : null}
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      aria-label="关闭幼儿信息"
+                      onClick={closeProfilePanel}
+                    >
+                      <X />
+                    </Button>
+                  </div>
+                </div>
+              </DrawerHeader>
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="space-y-5 p-6">
+                  <div className="rounded-md bg-muted p-4">
+                    <p className="text-2xl font-semibold">{activeProfile.name || '未填写姓名'}</p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {activeProfile.englishName || '未填写英文名'} ·{' '}
+                      {activeProfile.gender || '未填写性别'} ·{' '}
+                      {activeProfile.birthday || '未填写生日'}
+                    </p>
+                  </div>
+
+                  {editingProfile ? (
+                    <StudentProfileForm profile={editingProfile} onChange={setEditingProfile} />
+                  ) : (
+                    <dl className="grid gap-3 text-sm">
+                      <ProfileField label="班级" value={activeProfile.className || '未分班'} />
+                      <ProfileField
+                        label="班级类型"
+                        value={
+                          selectedProfileClass
+                            ? getClassTypeLabel(selectedProfileClass.type)
+                            : '未记录'
+                        }
+                      />
+                      <ProfileField label="班级 UUID" value={activeProfile.classId || '未记录'} />
+                      <ProfileField label="属相" value={activeProfile.zodiac || '未填写'} />
+                      <ProfileField label="我的好朋友" value={formatList(activeProfile.friends)} />
+                      <ProfileField label="我的爱好" value={formatList(activeProfile.hobbies)} />
+                      <ProfileField
+                        label="喜欢的游戏"
+                        value={formatList(activeProfile.favoriteGames)}
+                      />
+                      <ProfileField
+                        label="喜欢吃的食物"
+                        value={formatList(activeProfile.favoriteFoods)}
+                      />
+                      <ProfileField label="表现特征" value={activeProfile.traits || '未填写'} />
+                      <ProfileField label="评语" value={activeProfile.comment || '未生成评语'} />
+                      <ProfileField
+                        label="评语生成时间"
+                        value={activeProfile.commentGeneratedAt || '未生成'}
+                      />
+                      <ProfileField label="导入时间" value={activeProfile.importedAt} />
+                    </dl>
+                  )}
+                </div>
+              </ScrollArea>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+
+      <DashboardFooter />
+    </>
+  )
+}
+
+function ProfileField({ label, value }: { label: string; value: string }): React.JSX.Element {
+  return (
+    <div className="grid gap-1 rounded-md border bg-background p-3">
+      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
+      <dd className="leading-6">{value}</dd>
+    </div>
+  )
+}
+
+function StudentProfileForm({
+  profile,
+  onChange
+}: {
+  profile: ChildProfile
+  onChange: (profile: ChildProfile) => void
+}): React.JSX.Element {
+  function updateTextField(field: keyof ChildProfile, value: string): void {
+    onChange({
+      ...profile,
+      [field]: value
+    })
+  }
+
+  function updateListField(
+    field: 'friends' | 'hobbies' | 'favoriteGames' | 'favoriteFoods',
+    value: string
+  ): void {
+    onChange({
+      ...profile,
+      [field]: parseList(value)
+    })
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-3 sm:grid-cols-2">
+        <EditableField
+          label="姓名"
+          value={profile.name}
+          onChange={(value) => updateTextField('name', value)}
+        />
+        <EditableField
+          label="英文名"
+          value={profile.englishName}
+          onChange={(value) => updateTextField('englishName', value)}
+        />
+        <EditableField
+          label="性别"
+          value={profile.gender}
+          onChange={(value) => updateTextField('gender', value)}
+        />
+        <EditableField
+          label="生日"
+          value={profile.birthday}
+          onChange={(value) => updateTextField('birthday', value)}
+        />
+        <EditableField
+          label="属相"
+          value={profile.zodiac}
+          onChange={(value) => updateTextField('zodiac', value)}
+        />
+        <EditableField
+          label="班级"
+          value={profile.className}
+          onChange={(value) => updateTextField('className', value)}
+        />
+      </div>
+
+      <EditableField
+        label="我的好朋友"
+        value={profile.friends.join('、')}
+        onChange={(value) => updateListField('friends', value)}
+      />
+      <EditableField
+        label="我的爱好"
+        value={profile.hobbies.join('、')}
+        onChange={(value) => updateListField('hobbies', value)}
+      />
+      <EditableField
+        label="喜欢的游戏"
+        value={profile.favoriteGames.join('、')}
+        onChange={(value) => updateListField('favoriteGames', value)}
+      />
+      <EditableField
+        label="喜欢吃的食物"
+        value={profile.favoriteFoods.join('、')}
+        onChange={(value) => updateListField('favoriteFoods', value)}
+      />
+      <EditableField
+        label="表现特征"
+        value={profile.traits}
+        multiline
+        onChange={(value) => updateTextField('traits', value)}
+      />
+      <EditableField
+        label="评语"
+        value={profile.comment}
+        multiline
+        onChange={(value) => updateTextField('comment', value)}
+      />
+    </div>
+  )
+}
+
+function EditableField({
+  label,
+  value,
+  multiline = false,
+  onChange
+}: {
+  label: string
+  value: string
+  multiline?: boolean
+  onChange: (value: string) => void
+}): React.JSX.Element {
+  return (
+    <label className="grid gap-2 text-sm">
+      <span className="font-medium">{label}</span>
+      {multiline ? (
+        <textarea
+          className="min-h-24 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      ) : (
+        <Input value={value} onChange={(event) => onChange(event.target.value)} />
+      )}
+    </label>
+  )
+}
diff --git a/src/renderer/src/pages/TemplatePage.tsx b/src/renderer/src/pages/TemplatePage.tsx
new file mode 100644
index 0000000..27fa398
--- /dev/null
+++ b/src/renderer/src/pages/TemplatePage.tsx
@@ -0,0 +1,977 @@
+import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  ExternalLink,
+  FileSpreadsheet,
+  FileText,
+  LayoutPanelTop,
+  ListTree,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Presentation,
+  Search,
+  Trash2,
+  Upload,
+  X
+} from 'lucide-react'
+
+import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@renderer/components/ui/alert-dialog'
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@renderer/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle
+} from '@renderer/components/ui/drawer'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@renderer/components/ui/dropdown-menu'
+import { Input } from '@renderer/components/ui/input'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+import { Select } from '@renderer/components/ui/select'
+import type {
+  TemplateFieldMapping,
+  TemplateItem,
+  TemplatePlaceholder,
+  TemplateSemester,
+  TemplateType
+} from '@renderer/types/app'
+
+type TemplateForm = {
+  id?: string
+  name: string
+  grade: string
+  semester: TemplateSemester
+  type: TemplateType
+  sourceFilePath: string
+  fileName: string
+  fieldMappings: TemplateFieldMapping
+}
+
+const emptyTemplateForm: TemplateForm = {
+  name: '',
+  grade: '',
+  semester: 'first',
+  type: 'portrait',
+  sourceFilePath: '',
+  fileName: '',
+  fieldMappings: {}
+}
+
+type MappingDialogState = {
+  open: boolean
+  template: TemplateItem | null
+  placeholders: TemplatePlaceholder[]
+  fieldMappings: TemplateFieldMapping
+}
+
+const emptyMappingDialog: MappingDialogState = {
+  open: false,
+  template: null,
+  placeholders: [],
+  fieldMappings: {}
+}
+
+const templateTypeOptions: Array<{ value: TemplateType; label: string }> = [
+  { value: 'portrait', label: '竖版' },
+  { value: 'landscape', label: '横版' }
+]
+
+const templateSemesterOptions: Array<{ value: TemplateSemester; label: string }> = [
+  { value: 'first', label: '上学期' },
+  { value: 'second', label: '下学期' }
+]
+
+const studentFieldOptions: Array<{ key: string; label: string; kind: 'text' | 'image' }> = [
+  { key: 'name', label: '中文姓名', kind: 'text' },
+  { key: 'englishName', label: '英文名', kind: 'text' },
+  { key: 'gender', label: '性别', kind: 'text' },
+  { key: 'birthday', label: '生日', kind: 'text' },
+  { key: 'zodiac', label: '生肖', kind: 'text' },
+  { key: 'friends', label: '好朋友', kind: 'text' },
+  { key: 'hobbies', label: '兴趣爱好', kind: 'text' },
+  { key: 'favoriteGames', label: '喜欢的游戏', kind: 'text' },
+  { key: 'favoriteFoods', label: '喜欢的食物', kind: 'text' },
+  { key: 'traits', label: '表现特征', kind: 'text' },
+  { key: 'comment', label: '成长评语', kind: 'text' },
+  { key: 'className', label: '班级名称', kind: 'text' },
+  { key: 'familyPhoto', label: '班级图片', kind: 'image' }
+]
+
+function getTemplateTypeLabel(type: TemplateType): string {
+  return type === 'landscape' ? '横版' : '竖版'
+}
+
+function getTemplateSemesterLabel(semester: TemplateSemester): string {
+  return semester === 'second' ? '下学期' : '上学期'
+}
+
+function isSupportedTemplateFile(fileName: string): boolean {
+  return /\.(ppt|pptx|doc|docx|xls|xlsx)$/i.test(fileName)
+}
+
+function getFileKind(extension: string): string {
+  if (['.ppt', '.pptx'].includes(extension)) {
+    return 'PPT'
+  }
+
+  if (['.doc', '.docx'].includes(extension)) {
+    return 'Word'
+  }
+
+  if (['.xls', '.xlsx'].includes(extension)) {
+    return 'Excel'
+  }
+
+  return '文件'
+}
+
+function getFileIcon(extension: string): typeof Presentation {
+  if (['.ppt', '.pptx'].includes(extension)) {
+    return Presentation
+  }
+
+  if (['.xls', '.xlsx'].includes(extension)) {
+    return FileSpreadsheet
+  }
+
+  return FileText
+}
+
+function getStudentFieldLabel(fieldKey?: string): string {
+  return studentFieldOptions.find((field) => field.key === fieldKey)?.label ?? ''
+}
+
+function getCompatibleStudentFields(kind: TemplatePlaceholder['kind']): typeof studentFieldOptions {
+  return studentFieldOptions.filter((field) => field.kind === kind)
+}
+
+function formatDateTime(value: string): string {
+  const date = new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return value
+  }
+
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+export function TemplatePage(): React.JSX.Element {
+  const [templates, setTemplates] = useState<TemplateItem[]>([])
+  const [query, setQuery] = useState('')
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [templateForm, setTemplateForm] = useState<TemplateForm>(emptyTemplateForm)
+  const [mappingDialog, setMappingDialog] = useState<MappingDialogState>(emptyMappingDialog)
+  const [saving, setSaving] = useState(false)
+  const [mappingSaving, setMappingSaving] = useState(false)
+  const [openingId, setOpeningId] = useState('')
+  const [deletingTemplate, setDeletingTemplate] = useState<TemplateItem | null>(null)
+  const [isDragActive, setIsDragActive] = useState(false)
+
+  useEffect(() => {
+    async function loadTemplatesOnMount(): Promise<void> {
+      const response = await window.api.loadTemplates()
+
+      if (!response.ok) {
+        showError('读取模板失败', response.message)
+        return
+      }
+
+      setTemplates(response.templates)
+    }
+
+    loadTemplatesOnMount()
+  }, [])
+
+  const filteredTemplates = useMemo(() => {
+    const keyword = query.trim().toLowerCase()
+
+    if (!keyword) {
+      return templates
+    }
+
+    return templates.filter((template) =>
+      [
+        template.name,
+        template.grade,
+        getTemplateSemesterLabel(template.semester),
+        getTemplateTypeLabel(template.type),
+        template.originalFileName,
+        getFileKind(template.fileExtension)
+      ]
+        .join(' ')
+        .toLowerCase()
+        .includes(keyword)
+    )
+  }, [templates, query])
+
+  function showSuccess(message: string, description?: string): void {
+    toast.success(message, description ? { description } : undefined)
+  }
+
+  function showError(message: string, description?: string): void {
+    toast.error(message, description ? { description } : undefined)
+  }
+
+  function openCreateDrawer(): void {
+    setTemplateForm(emptyTemplateForm)
+    setDrawerOpen(true)
+  }
+
+  function openEditDrawer(template: TemplateItem): void {
+    setTemplateForm({
+      id: template.id,
+      name: template.name,
+      grade: template.grade,
+      semester: template.semester,
+      type: template.type,
+      sourceFilePath: template.filePath,
+      fileName: template.originalFileName,
+      fieldMappings: template.fieldMappings
+    })
+    setDrawerOpen(true)
+  }
+
+  async function openMappingDialog(template: TemplateItem): Promise<void> {
+    setMappingDialog({
+      open: true,
+      template,
+      placeholders: template.placeholders,
+      fieldMappings: template.fieldMappings
+    })
+
+    const placeholders = await parsePlaceholdersForFile(template.filePath)
+
+    setMappingDialog((currentDialog) => {
+      if (currentDialog.template?.id !== template.id) {
+        return currentDialog
+      }
+
+      return {
+        ...currentDialog,
+        placeholders,
+        fieldMappings: mergeFieldMappings(placeholders, currentDialog.fieldMappings)
+      }
+    })
+  }
+
+  async function parsePlaceholdersForFile(filePath: string): Promise<TemplatePlaceholder[]> {
+    const response = await window.api.parseTemplatePlaceholders(filePath)
+
+    if (!response.ok) {
+      showError('解析占位符失败', response.message)
+      return []
+    }
+
+    return response.placeholders
+  }
+
+  function mergeFieldMappings(
+    placeholders: TemplatePlaceholder[],
+    currentMappings: TemplateFieldMapping
+  ): TemplateFieldMapping {
+    const placeholderNames = new Set(placeholders.map((placeholder) => placeholder.name))
+
+    return Object.fromEntries(
+      Object.entries(currentMappings).filter(
+        ([placeholder, fieldKey]) => placeholderNames.has(placeholder) && Boolean(fieldKey)
+      )
+    )
+  }
+
+  async function handleSelectFile(): Promise<void> {
+    const response = await window.api.selectTemplateFile()
+
+    if (!response.ok) {
+      if (!response.canceled) {
+        showError('选择模板失败', response.message)
+      }
+      return
+    }
+
+    const placeholders = await parsePlaceholdersForFile(response.filePath)
+
+    setTemplateForm((currentForm) => ({
+      ...currentForm,
+      sourceFilePath: response.filePath,
+      fileName: response.fileName,
+      fieldMappings: mergeFieldMappings(placeholders, currentForm.fieldMappings)
+    }))
+  }
+
+  async function selectDroppedTemplateFile(file?: File): Promise<void> {
+    if (!file) {
+      return
+    }
+
+    if (!isSupportedTemplateFile(file.name)) {
+      showError('请选择 PPT、Word、Excel 模板文件')
+      return
+    }
+
+    const filePath = window.api.getDroppedFilePath(file)
+
+    if (!filePath) {
+      showError('无法读取拖拽文件路径')
+      return
+    }
+
+    const placeholders = await parsePlaceholdersForFile(filePath)
+
+    setTemplateForm((currentForm) => ({
+      ...currentForm,
+      sourceFilePath: filePath,
+      fileName: file.name,
+      fieldMappings: mergeFieldMappings(placeholders, currentForm.fieldMappings)
+    }))
+  }
+
+  function handleDrop(event: React.DragEvent<HTMLButtonElement>): void {
+    event.preventDefault()
+    setIsDragActive(false)
+    void selectDroppedTemplateFile(event.dataTransfer.files[0])
+  }
+
+  function updateFieldMapping(placeholder: string, fieldKey: string): void {
+    setMappingDialog((currentDialog) => {
+      const fieldMappings = { ...currentDialog.fieldMappings }
+
+      if (fieldKey) {
+        fieldMappings[placeholder] = fieldKey
+      } else {
+        delete fieldMappings[placeholder]
+      }
+
+      return {
+        ...currentDialog,
+        fieldMappings
+      }
+    })
+  }
+
+  async function handleSaveFieldMappings(): Promise<void> {
+    const template = mappingDialog.template
+
+    if (!template) {
+      return
+    }
+
+    setMappingSaving(true)
+
+    try {
+      const response = await window.api.saveTemplate({
+        id: template.id,
+        name: template.name,
+        grade: template.grade,
+        semester: template.semester,
+        type: template.type,
+        sourceFilePath: template.filePath,
+        fieldMappings: mappingDialog.fieldMappings
+      })
+
+      if (!response.ok) {
+        showError('保存字段关联失败', response.message)
+        return
+      }
+
+      setTemplates((currentTemplates) =>
+        currentTemplates.map((currentTemplate) =>
+          currentTemplate.id === response.template.id ? response.template : currentTemplate
+        )
+      )
+      setMappingDialog(emptyMappingDialog)
+      showSuccess('字段关联已保存')
+    } finally {
+      setMappingSaving(false)
+    }
+  }
+
+  function handleFieldDragStart(event: React.DragEvent<HTMLButtonElement>, fieldKey: string): void {
+    event.dataTransfer.setData('application/x-student-field', fieldKey)
+    event.dataTransfer.effectAllowed = 'copy'
+  }
+
+  function handlePlaceholderDrop(
+    event: React.DragEvent<HTMLDivElement>,
+    placeholder: TemplatePlaceholder
+  ): void {
+    event.preventDefault()
+    const fieldKey = event.dataTransfer.getData('application/x-student-field')
+    const field = studentFieldOptions.find((item) => item.key === fieldKey)
+
+    if (!field) {
+      return
+    }
+
+    if (field.kind !== placeholder.kind) {
+      showError('字段类型不匹配')
+      return
+    }
+
+    updateFieldMapping(placeholder.name, field.key)
+  }
+
+  async function handleSaveTemplate(): Promise<void> {
+    const name = templateForm.name.trim()
+    const grade = templateForm.grade.trim()
+
+    if (!name) {
+      showError('请输入模板名称')
+      return
+    }
+
+    if (!grade) {
+      showError('请输入适用年级')
+      return
+    }
+
+    if (!templateForm.sourceFilePath) {
+      showError('请选择模板文件')
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      const response = await window.api.saveTemplate({
+        id: templateForm.id,
+        name,
+        grade,
+        semester: templateForm.semester,
+        type: templateForm.type,
+        sourceFilePath: templateForm.sourceFilePath,
+        fieldMappings: templateForm.fieldMappings
+      })
+
+      if (!response.ok) {
+        showError('保存模板失败', response.message)
+        return
+      }
+
+      setTemplates((currentTemplates) => {
+        const exists = currentTemplates.some((template) => template.id === response.template.id)
+        const nextTemplates = exists
+          ? currentTemplates.map((template) =>
+              template.id === response.template.id ? response.template : template
+            )
+          : [response.template, ...currentTemplates]
+
+        return nextTemplates.sort((first, second) =>
+          second.updatedAt.localeCompare(first.updatedAt)
+        )
+      })
+      setDrawerOpen(false)
+      setTemplateForm(emptyTemplateForm)
+      showSuccess(templateForm.id ? '模板已更新' : '模板已添加')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleOpenTemplate(template: TemplateItem): Promise<void> {
+    setOpeningId(template.id)
+
+    try {
+      const response = await window.api.openTemplate(template.filePath)
+
+      if (!response.ok) {
+        showError('打开模板失败', response.message)
+      }
+    } finally {
+      setOpeningId('')
+    }
+  }
+
+  async function handleDeleteTemplate(template: TemplateItem): Promise<void> {
+    const response = await window.api.deleteTemplate(template.id)
+
+    if (!response.ok) {
+      showError('删除模板失败', response.message)
+      return
+    }
+
+    setTemplates((currentTemplates) =>
+      currentTemplates.filter((currentTemplate) => currentTemplate.id !== template.id)
+    )
+    setDeletingTemplate(null)
+    showSuccess(`已删除模板「${template.name}」`)
+  }
+
+  return (
+    <>
+      <section className="space-y-4 bg-white px-4 py-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div>
+            <CardTitle>
+              <div className="flex items-center gap-2">
+                <LayoutPanelTop className="size-5 text-primary" />
+                模板管理
+              </div>
+            </CardTitle>
+            <CardDescription className="mt-1">
+              管理报告模板文件，支持 PPT、Word、Excel。
+            </CardDescription>
+          </div>
+          <Button onClick={openCreateDrawer}>
+            <Plus />
+            添加模板
+          </Button>
+        </div>
+
+        <div className="grid gap-3 rounded-md border border-dashed bg-muted/30 p-4">
+          <div className="relative min-w-0">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="pl-9"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="搜索模板名称、年级、学期、类型或文件名"
+            />
+          </div>
+        </div>
+
+        <ScrollArea className="h-140">
+          <div className="grid gap-3 pr-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredTemplates.map((template) => {
+              const FileIcon = getFileIcon(template.fileExtension)
+              const fileKind = getFileKind(template.fileExtension)
+
+              return (
+                <Card key={template.id} className="shadow-none">
+                  <CardHeader className="space-y-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="grid size-11 shrink-0 place-items-center rounded-md bg-muted text-primary">
+                        <FileIcon className="size-5" />
+                      </div>
+                      <div className="flex flex-wrap justify-end gap-2">
+                        <Badge variant="secondary">{fileKind}</Badge>
+                        <Badge variant={template.type === 'landscape' ? 'warning' : 'outline'}>
+                          {getTemplateTypeLabel(template.type)}
+                        </Badge>
+                        <Badge variant="outline">
+                          {getTemplateSemesterLabel(template.semester)}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="min-w-0">
+                      <CardTitle className="truncate text-base">{template.name}</CardTitle>
+                      <CardDescription className="mt-2 truncate">
+                        {template.originalFileName}
+                      </CardDescription>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">适用年级</p>
+                        <p className="mt-1 truncate font-medium">{template.grade}</p>
+                      </div>
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">学期</p>
+                        <p className="mt-1 truncate font-medium">
+                          {getTemplateSemesterLabel(template.semester)}
+                        </p>
+                      </div>
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">更新时间</p>
+                        <p className="mt-1 truncate text-sm">
+                          {formatDateTime(template.updatedAt)}
+                        </p>
+                      </div>
+                      <div className="rounded-md bg-muted px-3 py-2">
+                        <p className="text-xs text-muted-foreground">字段对照</p>
+                        <p className="mt-1 truncate text-sm">
+                          {Object.keys(template.fieldMappings).length}/
+                          {template.placeholders.length}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        size="sm"
+                        disabled={openingId === template.id}
+                        onClick={() => handleOpenTemplate(template)}
+                      >
+                        <ExternalLink />
+                        {openingId === template.id ? '打开中' : '打开模板'}
+                      </Button>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button size="sm" variant="outline">
+                            <MoreHorizontal />
+                            操作
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          <DropdownMenuLabel>模板操作</DropdownMenuLabel>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem onSelect={() => openEditDrawer(template)}>
+                            <Pencil />
+                            编辑信息
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            disabled={template.fileExtension !== '.pptx'}
+                            onSelect={() => void openMappingDialog(template)}
+                          >
+                            <ListTree />
+                            字段关联
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onSelect={() => setDeletingTemplate(template)}
+                          >
+                            <Trash2 />
+                            删除
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+
+            {filteredTemplates.length === 0 && (
+              <div className="col-span-full grid h-32 place-items-center rounded-md border text-sm text-muted-foreground">
+                暂无模板，请添加模板文件
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </section>
+
+      <Drawer direction="right" open={drawerOpen} onOpenChange={setDrawerOpen}>
+        <DrawerContent>
+          <DrawerHeader>
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <DrawerTitle>{templateForm.id ? '编辑模板' : '添加模板'}</DrawerTitle>
+                <DrawerDescription className="mt-1">
+                  填写模板名称、适用年级、学期、版式类型，并上传 Office 模板文件。
+                </DrawerDescription>
+              </div>
+              <Button
+                size="icon"
+                variant="ghost"
+                aria-label="关闭模板表单"
+                onClick={() => setDrawerOpen(false)}
+              >
+                <X />
+              </Button>
+            </div>
+          </DrawerHeader>
+          <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-6">
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="template-name">
+                模板名称
+              </label>
+              <Input
+                id="template-name"
+                value={templateForm.name}
+                onChange={(event) =>
+                  setTemplateForm({
+                    ...templateForm,
+                    name: event.target.value
+                  })
+                }
+                placeholder="例如：大班成长报告横版模板"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="template-grade">
+                适用年级
+              </label>
+              <Input
+                id="template-grade"
+                value={templateForm.grade}
+                onChange={(event) =>
+                  setTemplateForm({
+                    ...templateForm,
+                    grade: event.target.value
+                  })
+                }
+                placeholder="例如：小班、中班、大班"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="template-semester">
+                学期
+              </label>
+              <Select
+                id="template-semester"
+                value={templateForm.semester}
+                onChange={(event) =>
+                  setTemplateForm({
+                    ...templateForm,
+                    semester: event.target.value as TemplateSemester
+                  })
+                }
+              >
+                {templateSemesterOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="template-type">
+                模板类型
+              </label>
+              <Select
+                id="template-type"
+                value={templateForm.type}
+                onChange={(event) =>
+                  setTemplateForm({
+                    ...templateForm,
+                    type: event.target.value as TemplateType
+                  })
+                }
+              >
+                {templateTypeOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <p className="text-sm font-medium">模板文件</p>
+              <button
+                type="button"
+                className={[
+                  'grid min-h-[150px] place-items-center rounded-md border border-dashed bg-muted/30 p-5 text-center transition-colors',
+                  isDragActive
+                    ? 'border-primary bg-accent'
+                    : 'hover:border-primary hover:bg-muted/50'
+                ].join(' ')}
+                onClick={handleSelectFile}
+                onDragEnter={(event) => {
+                  event.preventDefault()
+                  setIsDragActive(true)
+                }}
+                onDragOver={(event) => event.preventDefault()}
+                onDragLeave={() => setIsDragActive(false)}
+                onDrop={handleDrop}
+              >
+                <div className="space-y-3">
+                  <div className="mx-auto grid size-12 place-items-center rounded-full bg-primary text-primary-foreground">
+                    <Upload className="size-5" />
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      {templateForm.fileName || '点击或拖拽 PPT、Word、Excel 文件到这里'}
+                    </p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      支持 .ppt、.pptx、.doc、.docx、.xls、.xlsx
+                    </p>
+                  </div>
+                </div>
+              </button>
+            </div>
+
+            <div className="sticky bottom-0 -mx-6 flex justify-end gap-2 border-t bg-card px-6 py-4">
+              <Button variant="outline" onClick={() => setDrawerOpen(false)}>
+                取消
+              </Button>
+              <Button disabled={saving} onClick={handleSaveTemplate}>
+                <Upload />
+                {saving ? '保存中' : '保存模板'}
+              </Button>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <Dialog
+        open={mappingDialog.open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setMappingDialog(emptyMappingDialog)
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>字段关联</DialogTitle>
+            <DialogDescription>
+              {mappingDialog.template
+                ? `为「${mappingDialog.template.name}」选择模板占位符和学生字段的对应关系。`
+                : '选择模板占位符和学生字段的对应关系。'}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="min-h-0 flex-1 overflow-hidden rounded-md border">
+            <div className="grid grid-cols-[minmax(0,1fr)_220px] border-b bg-muted/30 px-4 py-2 text-xs font-medium text-muted-foreground">
+              <span>模板占位符</span>
+              <span>绑定学生字段</span>
+            </div>
+            <div className="max-h-[42vh] overflow-y-auto">
+              {mappingDialog.placeholders.map((placeholder) => {
+                const mappedField = mappingDialog.fieldMappings[placeholder.name] ?? ''
+
+                return (
+                  <div
+                    key={placeholder.name}
+                    className="grid grid-cols-[minmax(0,1fr)_220px] items-center gap-3 border-b px-4 py-3 last:border-b-0"
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={(event) => handlePlaceholderDrop(event, placeholder)}
+                  >
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <Badge variant={placeholder.kind === 'image' ? 'warning' : 'outline'}>
+                          {placeholder.kind === 'image' ? '图片' : '文本'}
+                        </Badge>
+                        <p className="truncate text-sm font-medium">{placeholder.name}</p>
+                      </div>
+                      <p className="mt-1 truncate text-xs text-muted-foreground">
+                        {mappedField ? `已绑定：${getStudentFieldLabel(mappedField)}` : '未绑定'}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Select
+                        value={mappedField}
+                        onChange={(event) =>
+                          updateFieldMapping(placeholder.name, event.target.value)
+                        }
+                      >
+                        <option value="">选择字段</option>
+                        {getCompatibleStudentFields(placeholder.kind).map((field) => (
+                          <option key={field.key} value={field.key}>
+                            {field.label}
+                          </option>
+                        ))}
+                      </Select>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={!mappedField}
+                        onClick={() => updateFieldMapping(placeholder.name, '')}
+                      >
+                        清空
+                      </Button>
+                    </div>
+                  </div>
+                )
+              })}
+
+              {mappingDialog.placeholders.length === 0 && (
+                <div className="grid min-h-40 place-items-center px-4 text-center text-sm text-muted-foreground">
+                  当前模板没有解析到可关联的占位符
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="shrink-0 rounded-md border bg-muted/20 p-3">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <p className="text-xs font-medium text-muted-foreground">可拖拽的学生字段</p>
+              <p className="text-xs text-muted-foreground">
+                已匹配 {Object.keys(mappingDialog.fieldMappings).length}/
+                {mappingDialog.placeholders.length}
+              </p>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {studentFieldOptions.map((field) => (
+                <button
+                  key={field.key}
+                  type="button"
+                  draggable
+                  className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-2 text-xs transition-colors hover:border-primary hover:bg-accent"
+                  onDragStart={(event) => handleFieldDragStart(event, field.key)}
+                >
+                  <span>{field.label}</span>
+                  <Badge variant={field.kind === 'image' ? 'warning' : 'secondary'}>
+                    {field.kind === 'image' ? '图' : '文'}
+                  </Badge>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter className="shrink-0">
+            <Button variant="outline" onClick={() => setMappingDialog(emptyMappingDialog)}>
+              取消
+            </Button>
+            <Button
+              disabled={mappingSaving || !mappingDialog.template}
+              onClick={handleSaveFieldMappings}
+            >
+              <Upload />
+              {mappingSaving ? '保存中' : '保存关联'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={Boolean(deletingTemplate)} onOpenChange={() => setDeletingTemplate(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除「{deletingTemplate?.name}」？</AlertDialogTitle>
+            <AlertDialogDescription>
+              删除后，这个模板记录和已导入的模板文件副本都会被移除。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (deletingTemplate) {
+                  void handleDeleteTemplate(deletingTemplate)
+                }
+              }}
+            >
+              确认删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <DashboardFooter />
+    </>
+  )
+}
diff --git a/src/renderer/src/pages/ToolsPage.tsx b/src/renderer/src/pages/ToolsPage.tsx
new file mode 100644
index 0000000..bd4ffbe
--- /dev/null
+++ b/src/renderer/src/pages/ToolsPage.tsx
@@ -0,0 +1,56 @@
+import { Settings } from 'lucide-react'
+
+import { DashboardFooter } from '@renderer/components/dashboard/DashboardFooter'
+import { MetricsGrid } from '@renderer/components/dashboard/MetricsGrid'
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@renderer/components/ui/card'
+import { statusVariant, tools } from '@renderer/student/mockData'
+
+export function ToolsPage(): React.JSX.Element {
+  return (
+    <>
+      <MetricsGrid />
+
+      <section className="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-4">
+        {tools.map((tool) => {
+          const Icon = tool.icon
+
+          return (
+            <Card key={tool.title} className="shadow-none">
+              <CardHeader className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div className="grid size-10 place-items-center rounded-md bg-muted text-primary">
+                    <Icon className="size-5" />
+                  </div>
+                  <Badge variant={statusVariant[tool.status]}>{tool.status}</Badge>
+                </div>
+                <div>
+                  <CardTitle className="text-base">{tool.title}</CardTitle>
+                  <CardDescription className="mt-2 min-h-10 leading-6">
+                    {tool.description}
+                  </CardDescription>
+                </div>
+              </CardHeader>
+              <CardContent className="flex gap-2">
+                <Button size="sm">打开</Button>
+                <Button size="sm" variant="outline">
+                  <Settings className="size-4" />
+                  配置
+                </Button>
+              </CardContent>
+            </Card>
+          )
+        })}
+      </section>
+
+      <DashboardFooter />
+    </>
+  )
+}
diff --git a/src/renderer/src/student/children.ts b/src/renderer/src/student/children.ts
new file mode 100644
index 0000000..feebb8d
--- /dev/null
+++ b/src/renderer/src/student/children.ts
@@ -0,0 +1,154 @@
+import * as XLSX from 'xlsx'
+
+import type { ChildProfile, ClassProfile } from '@renderer/types/app'
+
+export const CHILD_PROFILES_STORAGE_KEY = 'growth-report:student-profiles'
+const LEGACY_CHILD_PROFILES_STORAGE_KEY = 'growth-report:child-profiles'
+
+type SpreadsheetRow = Record<string, unknown>
+
+function asText(value: unknown): string {
+  if (value === null || value === undefined) {
+    return ''
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString().slice(0, 10)
+  }
+
+  return String(value).trim()
+}
+
+function splitList(value: unknown): string[] {
+  return asText(value)
+    .split(/[、,，]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+function createChildId(profile: Omit<ChildProfile, 'id'>, index: number): string {
+  return [profile.classId, profile.name, profile.englishName, profile.birthday, index]
+    .filter(Boolean)
+    .join('-')
+}
+
+function mapRowToChild(
+  row: SpreadsheetRow,
+  index: number,
+  importedAt: string,
+  selectedClass: ClassProfile
+): ChildProfile | null {
+  const profile = {
+    classId: selectedClass.id,
+    className: selectedClass.name,
+    name: asText(row['姓名']),
+    englishName: asText(row['英文名']),
+    gender: asText(row['性别']),
+    birthday: asText(row['生日']),
+    zodiac: asText(row['属相']),
+    friends: splitList(row['我的好朋友']),
+    hobbies: splitList(row['我的爱好']),
+    favoriteGames: splitList(row['喜欢的游戏']),
+    favoriteFoods: splitList(row['喜欢吃的食物']),
+    traits: asText(row['表现特征']),
+    comment: '',
+    commentGeneratedAt: '',
+    importedAt
+  }
+
+  if (!profile.name && !profile.englishName) {
+    return null
+  }
+
+  return {
+    ...profile,
+    id: createChildId(profile, index)
+  }
+}
+
+export function loadProfiles(): ChildProfile[] {
+  const rawProfiles =
+    window.localStorage.getItem(CHILD_PROFILES_STORAGE_KEY) ??
+    window.localStorage.getItem(LEGACY_CHILD_PROFILES_STORAGE_KEY)
+
+  if (!rawProfiles) {
+    return []
+  }
+
+  try {
+    const profiles = JSON.parse(rawProfiles)
+    return Array.isArray(profiles)
+      ? profiles
+          .map(normalizeProfile)
+          .filter((profile): profile is ChildProfile => profile !== null)
+      : []
+  } catch {
+    return []
+  }
+}
+
+function normalizeProfile(profile: Partial<ChildProfile>): ChildProfile | null {
+  if (!profile.id) {
+    return null
+  }
+
+  return {
+    id: profile.id,
+    classId: profile.classId ?? '',
+    className: profile.className ?? '',
+    name: profile.name ?? '',
+    englishName: profile.englishName ?? '',
+    gender: profile.gender ?? '',
+    birthday: profile.birthday ?? '',
+    zodiac: profile.zodiac ?? '',
+    friends: Array.isArray(profile.friends) ? profile.friends : [],
+    hobbies: Array.isArray(profile.hobbies) ? profile.hobbies : [],
+    favoriteGames: Array.isArray(profile.favoriteGames) ? profile.favoriteGames : [],
+    favoriteFoods: Array.isArray(profile.favoriteFoods) ? profile.favoriteFoods : [],
+    traits: profile.traits ?? '',
+    comment: profile.comment ?? '',
+    commentGeneratedAt: profile.commentGeneratedAt ?? '',
+    importedAt: profile.importedAt ?? ''
+  }
+}
+
+export function loadLocalProfilesForMigration(): ChildProfile[] {
+  return loadProfiles()
+}
+
+export function clearLocalProfilesForMigration(): void {
+  window.localStorage.removeItem(CHILD_PROFILES_STORAGE_KEY)
+  window.localStorage.removeItem(LEGACY_CHILD_PROFILES_STORAGE_KEY)
+}
+
+export function saveProfiles(profiles: ChildProfile[]): void {
+  window.localStorage.setItem(CHILD_PROFILES_STORAGE_KEY, JSON.stringify(profiles))
+}
+
+export async function readChildProfilesFromSpreadsheet(
+  file: File,
+  selectedClass: ClassProfile
+): Promise<ChildProfile[]> {
+  const buffer = await file.arrayBuffer()
+  const workbook = XLSX.read(buffer, { cellDates: false })
+  const worksheet = workbook.Sheets[workbook.SheetNames[0]]
+  const importedAt = new Date().toLocaleString('zh-CN', { hour12: false })
+  const rows = XLSX.utils.sheet_to_json<SpreadsheetRow>(worksheet, { defval: '' })
+
+  return rows
+    .map((row, index) => mapRowToChild(row, index, importedAt, selectedClass))
+    .filter((profile): profile is ChildProfile => profile !== null)
+}
+
+export function replaceProfilesForClass(
+  profiles: ChildProfile[],
+  selectedClass: ClassProfile,
+  nextProfiles: ChildProfile[]
+): ChildProfile[] {
+  const otherClassProfiles = profiles.filter((profile) => profile.classId !== selectedClass.id)
+  return [...otherClassProfiles, ...nextProfiles]
+}
+
+export function deleteProfilesForClass(profiles: ChildProfile[], classId: string): ChildProfile[] {
+  return profiles.filter((profile) => profile.classId !== classId)
+}
diff --git a/src/renderer/src/student/classes.ts b/src/renderer/src/student/classes.ts
new file mode 100644
index 0000000..7ab5e5e
--- /dev/null
+++ b/src/renderer/src/student/classes.ts
@@ -0,0 +1,103 @@
+import type { ClassProfile, ClassType } from '@renderer/types/app'
+
+export const CLASSES_STORAGE_KEY = 'growth-report:student-classes'
+const LEGACY_CLASSES_STORAGE_KEY = 'growth-report:classes'
+export const classTypeOptions: { value: ClassType; label: string }[] = [
+  { value: 'cheap', label: '便宜班' },
+  { value: 'noble', label: '贵族班' }
+]
+
+const defaultClassNames = ['云朵一班', '星星二班', '彩虹三班']
+
+export function createUuid(): string {
+  return crypto.randomUUID()
+}
+
+export function createDefaultClasses(): ClassProfile[] {
+  return defaultClassNames.map((name) => ({
+    id: createUuid(),
+    name,
+    type: 'cheap'
+  }))
+}
+
+export function normalizeClass(classItem: Partial<ClassProfile>): ClassProfile | null {
+  if (!classItem.id || !classItem.name) {
+    return null
+  }
+
+  return {
+    id: classItem.id,
+    name: classItem.name,
+    type: classItem.type === 'noble' ? 'noble' : 'cheap',
+    familyPhoto: classItem.familyPhoto
+  }
+}
+
+export function getClassTypeLabel(type: ClassType): string {
+  return classTypeOptions.find((item) => item.value === type)?.label ?? '便宜班'
+}
+
+export function loadClasses(): ClassProfile[] {
+  const rawClasses =
+    window.localStorage.getItem(CLASSES_STORAGE_KEY) ??
+    window.localStorage.getItem(LEGACY_CLASSES_STORAGE_KEY)
+
+  if (!rawClasses) {
+    const classes = createDefaultClasses()
+    saveClasses(classes)
+    return classes
+  }
+
+  try {
+    const classes = JSON.parse(rawClasses)
+    if (Array.isArray(classes) && classes.length > 0) {
+      const normalizedClasses = classes
+        .map((classItem) => normalizeClass(classItem))
+        .filter((classItem): classItem is ClassProfile => classItem !== null)
+
+      if (normalizedClasses.length > 0) {
+        saveClasses(normalizedClasses)
+        return normalizedClasses
+      }
+    }
+
+    const nextClasses = createDefaultClasses()
+    saveClasses(nextClasses)
+    return nextClasses
+  } catch {
+    const nextClasses = createDefaultClasses()
+    saveClasses(nextClasses)
+    return nextClasses
+  }
+}
+
+export function loadLocalClassesForMigration(): ClassProfile[] {
+  const rawClasses =
+    window.localStorage.getItem(CLASSES_STORAGE_KEY) ??
+    window.localStorage.getItem(LEGACY_CLASSES_STORAGE_KEY)
+
+  if (!rawClasses) {
+    return []
+  }
+
+  try {
+    const classes = JSON.parse(rawClasses)
+    return Array.isArray(classes)
+      ? classes
+          .map((classItem) => normalizeClass(classItem))
+          .filter((classItem): classItem is ClassProfile => classItem !== null)
+      : []
+  } catch {
+    return []
+  }
+}
+
+export function clearLocalClassesForMigration(): void {
+  window.localStorage.removeItem(CLASSES_STORAGE_KEY)
+  window.localStorage.removeItem(LEGACY_CLASSES_STORAGE_KEY)
+}
+
+export function saveClasses(classes: ClassProfile[]): void {
+  window.localStorage.setItem(CLASSES_STORAGE_KEY, JSON.stringify(classes))
+}
diff --git a/src/renderer/src/student/menu.ts b/src/renderer/src/student/menu.ts
new file mode 100644
index 0000000..f80979d
--- /dev/null
+++ b/src/renderer/src/student/menu.ts
@@ -0,0 +1,97 @@
+import {
+  Bot,
+  Database,
+  FileArchive,
+  FileImage,
+  FileSignature,
+  Files,
+  FolderPlus,
+  FolderOpen,
+  Presentation,
+  Settings,
+  UserRound,
+  Wand2
+} from 'lucide-react'
+
+import type { MenuItem } from '@renderer/types/app'
+
+export const menuTree: MenuItem[] = [
+  {
+    id: 'tools',
+    title: '小工具',
+    icon: Wand2,
+    children: [
+      {
+        id: 'tool-image-paths',
+        title: '生成图片路径',
+        path: '/tools/image-paths',
+        icon: FileImage
+      },
+      { id: 'tool-comments', title: '生成评语', path: '/tools/comments', icon: Bot },
+      { id: 'tool-reports', title: '生成报告', path: '/tools/reports', icon: Presentation },
+      { id: 'tool-convert', title: '格式转换', path: '/tools/convert', icon: FileArchive },
+      { id: 'tool-signature', title: '园长签名', path: '/tools/signature', icon: FileSignature }
+    ]
+  },
+  {
+    id: 'student',
+    title: '学生管理',
+    icon: Database,
+    children: [
+      { id: 'classes', title: '班级管理', path: '/student/classes', icon: FolderPlus },
+      { id: 'students', title: '学生数据', path: '/student/list', icon: UserRound },
+      { id: 'template', title: '模板管理', path: '/student/templates', icon: FolderOpen },
+      { id: 'reports', title: '报告管理', path: '/student/reports', icon: Files },
+      { id: 'backup', title: '备份恢复', path: '/student/backup', icon: FileArchive }
+    ]
+  },
+  {
+    id: 'settings',
+    title: '设置',
+    path: '/settings',
+    icon: Settings
+  }
+]
+
+export function findMenuItemByPath(
+  pathname: string,
+  menuItems: MenuItem[] = menuTree
+): MenuItem | undefined {
+  for (const item of menuItems) {
+    if (item.path === pathname) {
+      return item
+    }
+
+    const childMatch = item.children ? findMenuItemByPath(pathname, item.children) : undefined
+
+    if (childMatch) {
+      return childMatch
+    }
+  }
+
+  return undefined
+}
+
+export function getOpenMenuIds(
+  pathname: string,
+  menuItems: MenuItem[] = menuTree,
+  parents: string[] = []
+): string[] {
+  for (const item of menuItems) {
+    const nextParents = [...parents, item.id]
+
+    if (item.path === pathname) {
+      return parents
+    }
+
+    if (item.children) {
+      const childOpenIds = getOpenMenuIds(pathname, item.children, nextParents)
+
+      if (childOpenIds.length > 0) {
+        return childOpenIds
+      }
+    }
+  }
+
+  return []
+}
diff --git a/src/renderer/src/student/mockData.ts b/src/renderer/src/student/mockData.ts
new file mode 100644
index 0000000..706c983
--- /dev/null
+++ b/src/renderer/src/student/mockData.ts
@@ -0,0 +1,122 @@
+import {
+  BadgeCheck,
+  Bot,
+  CalendarDays,
+  Database,
+  FileArchive,
+  FileImage,
+  FileSignature,
+  FileText,
+  Loader2,
+  Presentation,
+  ShieldCheck
+} from 'lucide-react'
+
+import type { LogEntry, SectionKey, Status, StudentDataItem, ToolItem } from '@renderer/types/app'
+
+export const sectionTitle: Record<SectionKey, string> = {
+  tools: '小工具',
+  student: '学生管理',
+  settings: '设置'
+}
+
+export const statusVariant: Record<Status, 'success' | 'secondary' | 'warning' | 'outline'> = {
+  可运行: 'success',
+  待配置: 'secondary',
+  待导入: 'warning',
+  待审核: 'outline'
+}
+
+export const levelClass = {
+  INFO: 'text-sky-400',
+  SUCCESS: 'text-emerald-400',
+  WARNING: 'text-amber-300',
+  ERROR: 'text-red-400'
+} as const
+
+export const tools: ToolItem[] = [
+  {
+    title: '生成图片路径',
+    description: '批量扫描幼儿照片目录，生成可用于报告模板的图片路径数据。',
+    icon: FileImage,
+    status: '待配置'
+  },
+  {
+    title: '生成评语',
+    description: '根据幼儿观察记录、关键词和模板要求生成成长评语。',
+    icon: Bot,
+    status: '可运行'
+  },
+  {
+    title: '生成报告',
+    description: '将幼儿资料、图片和评语合成为成长报告 PPT。',
+    icon: Presentation,
+    status: '可运行'
+  },
+  {
+    title: '格式转换',
+    description: '把 PPT、Word 等报告文件批量转换为 PDF 归档文件。',
+    icon: FileArchive,
+    status: '可运行'
+  },
+  {
+    title: '生肖生成',
+    description: '依据出生日期自动生成生肖、年龄和学期信息。',
+    icon: CalendarDays,
+    status: '待导入'
+  },
+  {
+    title: '园长签名',
+    description: '为已审核的成长报告批量追加园长签名或签章。',
+    icon: FileSignature,
+    status: '待审核'
+  }
+]
+
+export const studentDataItems: StudentDataItem[] = [
+  {
+    title: '幼儿基础数据',
+    description: '姓名、班级、生日、学号、家长联系方式等核心档案。',
+    amount: '128 条记录',
+    updatedAt: '今天 09:12'
+  },
+  {
+    title: '报告模板',
+    description: 'PPT 模板、封面模板、签名模板和导出规则。',
+    amount: '6 个模板',
+    updatedAt: '昨天 18:40'
+  },
+  {
+    title: '素材目录',
+    description: '幼儿照片、班级活动图片和临时生成文件。',
+    amount: '3 个目录',
+    updatedAt: '今天 08:30'
+  },
+  {
+    title: '备份与恢复',
+    description: '导出当前配置与数据快照，支持后续恢复。',
+    amount: '今日未备份',
+    updatedAt: '2026-06-23'
+  }
+]
+
+export const logs: LogEntry[] = [
+  { time: '09:29:17', level: 'SUCCESS', message: '学生：刘逸喻，评语生成完毕' },
+  { time: '09:29:18', level: 'INFO', message: '正在生成第 7 份成长评语' },
+  { time: '09:29:18', level: 'ERROR', message: '生成评语失败：response choices 为空' },
+  { time: '09:29:19', level: 'INFO', message: '正在生成第 8 份成长评语' },
+  { time: '09:29:20', level: 'WARNING', message: '任务正在停止中，正在中断' }
+]
+
+export const metrics = [
+  { title: '幼儿档案', value: '128', description: '已导入基础数据', icon: Database },
+  { title: '报告任务', value: '20', description: '本轮待生成', icon: FileText },
+  { title: '完成率', value: '72%', description: '今日批处理进度', icon: BadgeCheck },
+  { title: '异常', value: '2', description: '需要人工确认', icon: ShieldCheck }
+]
+
+export const recentTasks = [
+  { icon: Bot, title: '生成评语', value: '8/20' },
+  { icon: Presentation, title: '生成报告', value: '3/20' },
+  { icon: Loader2, title: '格式转换', value: '排队中' }
+]
diff --git a/src/renderer/src/types/app.ts b/src/renderer/src/types/app.ts
new file mode 100644
index 0000000..efada99
--- /dev/null
+++ b/src/renderer/src/types/app.ts
@@ -0,0 +1,115 @@
+import type { LucideIcon } from 'lucide-react'
+
+export type SectionKey = 'tools' | 'student' | 'settings'
+export type Status = '可运行' | '待配置' | '待导入' | '待审核'
+export type LogLevel = 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR'
+export type SettingKey = 'model'
+
+export type MenuItem = {
+  id: string
+  title: string
+  path?: string
+  icon?: LucideIcon
+  children?: MenuItem[]
+}
+
+export type ToolItem = {
+  title: string
+  description: string
+  icon: LucideIcon
+  status: Status
+}
+
+export type StudentDataItem = {
+  title: string
+  description: string
+  amount: string
+  updatedAt: string
+}
+
+export type ChildProfile = {
+  id: string
+  classId: string
+  className: string
+  name: string
+  englishName: string
+  gender: string
+  birthday: string
+  zodiac: string
+  friends: string[]
+  hobbies: string[]
+  favoriteGames: string[]
+  favoriteFoods: string[]
+  traits: string
+  comment: string
+  commentGeneratedAt: string
+  importedAt: string
+}
+
+export type ClassType = 'cheap' | 'noble'
+
+export type ClassProfile = {
+  id: string
+  name: string
+  type: ClassType
+  familyPhoto?: string
+}
+
+export type TemplateType = 'portrait' | 'landscape'
+export type TemplateSemester = 'first' | 'second'
+
+export type TemplatePlaceholder = {
+  name: string
+  kind: 'text' | 'image'
+}
+
+export type TemplateFieldMapping = Record<string, string>
+
+export type TemplateItem = {
+  id: string
+  name: string
+  grade: string
+  semester: TemplateSemester
+  type: TemplateType
+  originalFileName: string
+  filePath: string
+  fileExtension: string
+  placeholders: TemplatePlaceholder[]
+  fieldMappings: TemplateFieldMapping
+  createdAt: string
+  updatedAt: string
+}
+
+export type ReportFormat = 'word' | 'ppt' | 'pdf' | 'excel'
+
+export type ReportItem = {
+  id: string
+  title: string
+  classId: string
+  className: string
+  studentId: string
+  studentName: string
+  format: ReportFormat
+  originalFileName: string
+  filePath: string
+  fileExtension: string
+  templateId: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type LogEntry = {
+  time: string
+  level: LogLevel
+  message: string
+}
+
+export type ModelConfig = {
+  provider: string
+  baseUrl: string
+  apiKey: string
+  model: string
+  temperature: string
+  maxTokens: string
+  systemPrompt: string
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..31bac6e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..db23a68
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
+  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["electron-vite/node"]
+  }
+}
diff --git a/tsconfig.web.json b/tsconfig.web.json
new file mode 100644
index 0000000..9c16b66
--- /dev/null
+++ b/tsconfig.web.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
+  "include": [
+    "src/renderer/src/env.d.ts",
+    "src/renderer/src/**/*",
+    "src/renderer/src/**/*.tsx",
+    "src/preload/*.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@renderer/*": [
+        "src/renderer/src/*"
+      ]
+    }
+  }
+}