From 61c1674e439dd791aee4fdc72e5738bbefed13e9 Mon Sep 17 00:00:00 2001
From: shu <nvcsadjkojf@outlook.com>
Date: Sun, 6 Sep 2026 19:13:10 +0800
Subject: 统一路由页面文件的 page 前缀与命名规范
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将首页、关于概览、关于我、表单和 UI Kit 页面改为 page- 前缀的小写横线文件名
- 同步重命名页面 CSS Modules，并更新组件样式引用
- 更新静态路由导入与懒加载路径，保持访问地址和页面行为不变
- 在代理约定中补充文件名称使用小写英文加横线的规范

验证：pnpm build、pnpm lint 和暂存区空白检查均通过。
---
 src/About.tsx              |  19 ---
 src/App.tsx                |  12 --
 src/FormExample.module.css |   3 -
 src/FormExample.tsx        | 309 ---------------------------------------------
 src/Me.tsx                 |  10 --
 src/UiKit.module.css       |  14 --
 src/UiKit.tsx              | 294 ------------------------------------------
 src/page-about-me.tsx      |  10 ++
 src/page-about.tsx         |  19 +++
 src/page-form.module.css   |   3 +
 src/page-form.tsx          | 309 +++++++++++++++++++++++++++++++++++++++++++++
 src/page-home.tsx          |  12 ++
 src/page-ui-kit.module.css |  14 ++
 src/page-ui-kit.tsx        | 294 ++++++++++++++++++++++++++++++++++++++++++
 src/routes.ts              |  10 +-
 15 files changed, 666 insertions(+), 666 deletions(-)
 delete mode 100644 src/About.tsx
 delete mode 100644 src/App.tsx
 delete mode 100644 src/FormExample.module.css
 delete mode 100644 src/FormExample.tsx
 delete mode 100644 src/Me.tsx
 delete mode 100644 src/UiKit.module.css
 delete mode 100644 src/UiKit.tsx
 create mode 100644 src/page-about-me.tsx
 create mode 100644 src/page-about.tsx
 create mode 100644 src/page-form.module.css
 create mode 100644 src/page-form.tsx
 create mode 100644 src/page-home.tsx
 create mode 100644 src/page-ui-kit.module.css
 create mode 100644 src/page-ui-kit.tsx

(limited to 'src')

diff --git a/src/About.tsx b/src/About.tsx
deleted file mode 100644
index 21b4c1e..0000000
--- a/src/About.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ActionIcon, Button, Group, Stack, Text, Title } from '@mantine/core'
-import { SlidersHorizontalIcon } from '@phosphor-icons/react'
-
-function About() {
-  return (
-    <Stack>
-      <Title order={1}>关于</Title>
-      <Text c="dimmed">A React + TypeScript starter built with Vite.</Text>
-      <Group gap="xs">
-        <Button variant="filled">Button</Button>
-        <ActionIcon variant="filled" aria-label="Settings">
-          <SlidersHorizontalIcon />
-        </ActionIcon>
-      </Group>
-    </Stack>
-  )
-}
-
-export default About
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 8b213e6..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Stack, Text, Title } from '@mantine/core'
-
-function App() {
-  return (
-    <Stack>
-      <Title order={1}>欢迎使用 Template React</Title>
-      <Text c="dimmed">从左侧菜单开始，探索你的应用。</Text>
-    </Stack>
-  )
-}
-
-export default App
diff --git a/src/FormExample.module.css b/src/FormExample.module.css
deleted file mode 100644
index 913f3f9..0000000
--- a/src/FormExample.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.fileName {
-  overflow-wrap: anywhere;
-}
diff --git a/src/FormExample.tsx b/src/FormExample.tsx
deleted file mode 100644
index 631bf53..0000000
--- a/src/FormExample.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-import { useState } from 'react'
-import {
-  Alert,
-  Button,
-  Checkbox,
-  Cascader,
-  Code,
-  ColorInput,
-  Container,
-  FileInput,
-  Group,
-  MultiSelect,
-  NumberInput,
-  Paper,
-  PasswordInput,
-  Radio,
-  Select,
-  SimpleGrid,
-  Stack,
-  Switch,
-  TagsInput,
-  Text,
-  Textarea,
-  TextInput,
-  Title,
-  useMatches,
-} from '@mantine/core'
-import { isEmail, useForm } from '@mantine/form'
-import { UploadSimpleIcon } from '@phosphor-icons/react'
-import classes from './FormExample.module.css'
-
-// 仅用于演示联动，不是完整行政区划数据。
-const regions = [
-  {
-    name: '浙江省',
-    cities: [
-      { name: '杭州市', districts: ['西湖区', '拱墅区'] },
-      { name: '宁波市', districts: ['海曙区', '鄞州区'] },
-    ],
-  },
-  {
-    name: '江苏省',
-    cities: [
-      { name: '南京市', districts: ['鼓楼区', '玄武区'] },
-      { name: '苏州市', districts: ['姑苏区', '吴中区'] },
-    ],
-  },
-]
-
-const regionOptions = regions.map((province) => ({
-  value: province.name,
-  children: province.cities.map((city) => ({
-    value: city.name,
-    children: city.districts.map((district) => ({ value: district })),
-  })),
-}))
-
-type FormValues = {
-  name: string
-  email: string
-  role: string | null
-  region: string[] | null
-  contact: string
-  interests: string[]
-  technologies: string[]
-  tags: string[]
-  color: string
-  files: File[]
-  quantity: number | string
-  password: string
-  description: string
-  notifications: boolean
-  acceptedTerms: boolean
-}
-
-const exampleErrors = { email: '邮箱格式不正确，例如 name@example.com' }
-
-export default function FormExample() {
-  const [submitted, setSubmitted] = useState<string | null>(null)
-  const withColumns = useMatches({ base: false, sm: true })
-  const form = useForm<FormValues>({
-    mode: 'controlled',
-    validateInputOnBlur: true,
-    initialErrors: exampleErrors,
-    initialValues: {
-      name: '',
-      email: 'invalid-email',
-      role: null,
-      region: null,
-      contact: 'email',
-      interests: [],
-      technologies: [],
-      tags: [],
-      color: '#228be6',
-      files: [],
-      quantity: 1,
-      password: '',
-      description: '',
-      notifications: false,
-      acceptedTerms: false,
-    },
-    validate: {
-      name: (value) => value.trim() ? null : '请输入名称',
-      email: (value) => !value.trim() ? '请输入邮箱' : isEmail(exampleErrors.email)(value.trim()),
-      role: (value) => value ? null : '请选择角色',
-      quantity: (value) => typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 100
-        ? null : '请输入 0–100 之间的整数',
-      password: (value) => value && value.length < 8 ? '密码至少需要 8 位' : null,
-      color: (value) => /^#[\da-f]{6}$/i.test(value) ? null : '请输入有效的六位 HEX 颜色',
-      acceptedTerms: (value) => value ? null : '请先阅读并同意示例协议',
-    },
-  })
-
-  function submit(values: FormValues) {
-    setSubmitted(JSON.stringify({
-      ...values,
-      password: values.password ? '已填写（不展示密码）' : '未填写',
-      files: values.files.map((file) => ({
-        name: file.name,
-        size: file.size,
-        type: file.type || '未知类型',
-      })),
-    }, null, 2))
-  }
-
-  return (
-    <Container size="xl" px={0}>
-      <Stack gap="lg">
-        <div>
-          <Title order={1}>表单示例</Title>
-          <Text c="dimmed">体验常用表单控件。提交后在本页预览结果，数据和文件不会发送到服务器。</Text>
-        </div>
-
-        <Paper withBorder p="md">
-          <form
-            onSubmit={form.onSubmit(submit, () => setSubmitted(null))}
-            onReset={(event) => {
-              event.preventDefault()
-              form.reset()
-              form.setErrors(exampleErrors)
-              setSubmitted(null)
-            }}
-            noValidate
-          >
-            <Stack gap="lg">
-              <Text size="sm" c="dimmed">带 * 的项目为必填项；离开输入框或提交时会校验。邮箱预填了错误值，用于演示错误提示。</Text>
-              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
-                <TextInput
-                  label="文本输入框"
-                  placeholder="请输入名称"
-                  required
-                  {...form.getInputProps('name')}
-                />
-                <TextInput
-                  label="邮箱（错误提示示例）"
-                  description="修改为有效邮箱后可正常提交"
-                  placeholder="name@example.com"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  {...form.getInputProps('email')}
-                />
-                <Select
-                  label="选择框"
-                  placeholder="请选择角色"
-                  data={['开发者', '设计师', '产品经理']}
-                  searchable
-                  clearable
-                  required
-                  {...form.getInputProps('role')}
-                />
-                <NumberInput
-                  label="数值输入框"
-                  description="数量，范围 0–100"
-                  min={0}
-                  max={100}
-                  allowDecimal={false}
-                  {...form.getInputProps('quantity')}
-                />
-                <PasswordInput
-                  label="密码输入框"
-                  description="选填，填写时至少 8 位"
-                  placeholder="请输入示例密码"
-                  autoComplete="new-password"
-                  {...form.getInputProps('password')}
-                />
-              </SimpleGrid>
-
-              <Cascader
-                label="级联选择框"
-                description="选择省、市、区，使用部分示例地区"
-                placeholder="请选择省 / 市 / 区"
-                data={regionOptions}
-                withColumns={withColumns}
-                searchable
-                clearable
-                closeOnSelect
-                clearButtonProps={{ 'aria-label': '清空地区' }}
-                nothingFoundMessage="没有匹配的地区"
-                {...form.getInputProps('region')}
-              />
-
-              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
-                <MultiSelect
-                  label="下拉多选框"
-                  description="选择多个技术方向"
-                  placeholder="请选择技术方向"
-                  data={['React', 'TypeScript', 'Vite', 'Mantine', 'Node.js']}
-                  searchable
-                  clearable
-                  clearButtonProps={{ 'aria-label': '清空技术方向' }}
-                  nothingFoundMessage="没有匹配的选项"
-                  {...form.getInputProps('technologies')}
-                />
-                <TagsInput
-                  label="标签输入框"
-                  description="输入后按 Enter 或逗号添加标签，也可选择推荐标签"
-                  placeholder="输入或选择标签"
-                  data={['学习', '工作', '个人项目', '开源']}
-                  clearable
-                  clearButtonProps={{ 'aria-label': '清空标签' }}
-                  {...form.getInputProps('tags')}
-                />
-                <Radio.Group label="单选框" description="偏好的联系方式" {...form.getInputProps('contact')}>
-                  <Group mt="xs">
-                    <Radio value="email" label="邮件" />
-                    <Radio value="phone" label="电话" />
-                    <Radio value="message" label="站内消息" />
-                  </Group>
-                </Radio.Group>
-                <Checkbox.Group label="多选框" description="感兴趣的方向" {...form.getInputProps('interests')}>
-                  <Group mt="xs">
-                    <Checkbox value="frontend" label="前端" />
-                    <Checkbox value="backend" label="后端" />
-                    <Checkbox value="design" label="设计" />
-                  </Group>
-                </Checkbox.Group>
-                <ColorInput
-                  label="颜色选择框"
-                  format="hex"
-                  swatches={['#228be6', '#40c057', '#fab005', '#fa5252', '#7950f2']}
-                  {...form.getInputProps('color')}
-                />
-                <FileInput
-                  label="文件上传框"
-                  description="支持选择多个文件，仅展示文件信息"
-                  placeholder="点击选择文件"
-                  leftSection={<UploadSimpleIcon aria-hidden="true" />}
-                  multiple
-                  clearable
-                  {...form.getInputProps('files')}
-                />
-              </SimpleGrid>
-
-              {form.values.files.length > 0 && (
-                <Stack gap="xs" aria-live="polite">
-                  {form.values.files.map((file, index) => (
-                    <Text key={`${file.name}-${index}`} size="sm" className={classes.fileName}>
-                      {file.name} · {(file.size / 1024).toFixed(1)} KB
-                    </Text>
-                  ))}
-                </Stack>
-              )}
-
-              <Textarea
-                label="文本框"
-                description="多行文本，例如个人介绍或备注"
-                placeholder="请输入内容"
-                autosize
-                minRows={3}
-                maxRows={8}
-                {...form.getInputProps('description')}
-              />
-              <Switch
-                label="开关：接收消息通知"
-                {...form.getInputProps('notifications', { type: 'checkbox' })}
-              />
-              <Stack gap="xs">
-                <details>
-                  <summary>查看示例协议</summary>
-                  <Text size="sm" c="dimmed" py="xs">
-                    本页面仅用于演示表单交互。提交内容仅在当前页面预览，文件不会上传。
-                    勾选同意用于演示提交前的校验流程，不代表订购或开通服务。
-                  </Text>
-                </details>
-                <Checkbox
-                  label="我已阅读并同意示例协议"
-                  required
-                  {...form.getInputProps('acceptedTerms', { type: 'checkbox', withError: true })}
-                />
-              </Stack>
-              <Group>
-                <Button type="submit">提交预览</Button>
-                <Button type="reset" variant="default">重置</Button>
-              </Group>
-            </Stack>
-          </form>
-        </Paper>
-
-        {submitted !== null && (
-          <Stack gap="xs">
-            <Alert title="提交成功" color="green" role="status">以下是本次提交的示例数据。</Alert>
-            <Code block>{submitted}</Code>
-          </Stack>
-        )}
-      </Stack>
-    </Container>
-  )
-}
diff --git a/src/Me.tsx b/src/Me.tsx
deleted file mode 100644
index ab1d02f..0000000
--- a/src/Me.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Stack, Text, Title } from '@mantine/core'
-
-export default function Me() {
-  return (
-    <Stack>
-      <Title order={1}>关于我</Title>
-      <Text c="dimmed">欢迎来到我的个人介绍页面。</Text>
-    </Stack>
-  )
-}
diff --git a/src/UiKit.module.css b/src/UiKit.module.css
deleted file mode 100644
index a0df9f0..0000000
--- a/src/UiKit.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.section {
-  min-width: 0;
-}
-
-.loadingExample {
-  position: relative;
-  padding: var(--mantine-spacing-md);
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-default);
-}
-
-.dialog {
-  max-width: calc(100vw - 2 * var(--mantine-spacing-md));
-}
diff --git a/src/UiKit.tsx b/src/UiKit.tsx
deleted file mode 100644
index 8d89788..0000000
--- a/src/UiKit.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import { useState } from 'react'
-import type { ReactNode } from 'react'
-import {
-  Alert, Badge, Box, Button, Card, DataList, Dialog, Drawer, Group,
-  Loader, LoadingOverlay, Menu, Menubar, Modal, Notification, Pagination,
-  Paper, Popover, SimpleGrid, Skeleton, Stack, Table, Tabs, Text,
-  TextInput, Timeline, Title, Tooltip, useMatches,
-} from '@mantine/core'
-import { useTimeout } from '@mantine/hooks'
-import { createNotificationsStore, Notifications, notifications } from '@mantine/notifications'
-import { CheckIcon, HeartIcon, InfoIcon, PlusIcon, WarningIcon } from '@phosphor-icons/react'
-import '@mantine/notifications/styles.css'
-import classes from './UiKit.module.css'
-
-function Section({ title, children }: { title: string; children: ReactNode }) {
-  return (
-    <Paper component="section" withBorder p="md" className={classes.section}>
-      <Stack gap="md">
-        <Title order={2} size="h4">{title}</Title>
-        {children}
-      </Stack>
-    </Paper>
-  )
-}
-
-const records = Array.from({ length: 13 }, (_, index) => ({
-  id: index + 1,
-  name: `示例项目 ${String(index + 1).padStart(2, '0')}`,
-  owner: ['林晨', '陈宁', '李明'][index % 3],
-  status: ['进行中', '已完成', '待开始'][index % 3],
-}))
-const statusColors: Record<string, string> = { 进行中: 'blue', 已完成: 'green', 待开始: 'gray' }
-const pageSize = 5
-
-export default function UiKit() {
-  const [store] = useState(createNotificationsStore)
-  const [overlay, setOverlay] = useState<'drawer' | 'dialog' | 'modal' | null>(null)
-  const [popoverOpened, setPopoverOpened] = useState(false)
-  const [showAlert, setShowAlert] = useState(true)
-  const [showNotification, setShowNotification] = useState(true)
-  const [loading, setLoading] = useState(false)
-  const [liked, setLiked] = useState(false)
-  const [showStatus, setShowStatus] = useState(true)
-  const [action, setAction] = useState('尚未执行操作')
-  const [page, setPage] = useState(1)
-  const [draftName, setDraftName] = useState('我的示例项目')
-  const drawerSize = useMatches({ base: '100%', sm: 'md' })
-  const { start: finishLoading } = useTimeout(() => setLoading(false), 1500)
-  const visibleRecords = records.slice((page - 1) * pageSize, page * pageSize)
-
-  function notify(message: string, color = 'blue') {
-    notifications.show({
-      title: '示例通知', message, color,
-      closeButtonProps: { 'aria-label': '关闭浮动通知' },
-    }, store)
-  }
-
-  function runAction(message: string) {
-    setAction(message)
-    notify(message)
-  }
-
-  return (
-    <Stack gap="lg">
-      <Notifications store={store} position="top-right" limit={3} />
-      <div>
-        <Title order={1}>UI Kit</Title>
-        <Text c="dimmed">常用界面组件与交互示例，所有操作仅作用于当前页面。</Text>
-      </div>
-
-      <Section title="按钮 Button">
-        <Group>
-          <Button leftSection={<PlusIcon aria-hidden="true" />} onClick={() => runAction('已点击主要按钮')}>主要按钮</Button>
-          <Button variant="light" onClick={() => runAction('已点击浅色按钮')}>浅色按钮</Button>
-          <Button variant="outline" onClick={() => runAction('已点击描边按钮')}>描边按钮</Button>
-          <Button variant="subtle" onClick={() => runAction('已点击文字按钮')}>文字按钮</Button>
-          <Button disabled>禁用按钮</Button>
-          <Button loading>加载中</Button>
-        </Group>
-        <Text size="sm" c="dimmed" role="status">{action}</Text>
-      </Section>
-
-      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
-        <Section title="提示 Alert">
-          <Alert title="提示信息" icon={<InfoIcon />} color="blue">可以在这里展示操作说明。</Alert>
-          <Alert title="操作成功" icon={<CheckIcon />} color="green">示例内容已保存。</Alert>
-          {showAlert ? (
-            <Alert title="请留意" icon={<WarningIcon />} color="orange" withCloseButton
-              closeButtonLabel="关闭警告" onClose={() => setShowAlert(false)}>
-              这是一条可以关闭的警告提示。
-            </Alert>
-          ) : <Button variant="light" onClick={() => setShowAlert(true)}>重新显示警告</Button>}
-        </Section>
-
-        <Section title="通知 Notification">
-          {showNotification ? (
-            <Notification title="收到新消息" icon={<CheckIcon />} color="teal"
-              onClose={() => setShowNotification(false)} closeButtonProps={{ 'aria-label': '关闭示例通知' }}>
-              这是一条嵌入页面的通知。
-            </Notification>
-          ) : <Button variant="light" onClick={() => setShowNotification(true)}>恢复示例通知</Button>}
-          <Group>
-            <Button onClick={() => notify('欢迎体验浮动通知。')}>显示通知</Button>
-            <Button color="green" variant="light" onClick={() => notify('操作成功完成。', 'green')}>成功通知</Button>
-            <Button color="red" variant="light" onClick={() => notify('这是错误通知示例，请重试。', 'red')}>错误通知</Button>
-          </Group>
-        </Section>
-      </SimpleGrid>
-
-      <Section title="标签页 Tabs">
-        <Tabs defaultValue="overview">
-          <Tabs.List aria-label="示例标签页">
-            <Tabs.Tab value="overview">概览</Tabs.Tab>
-            <Tabs.Tab value="activity">动态</Tabs.Tab>
-            <Tabs.Tab value="settings">设置</Tabs.Tab>
-            <Tabs.Tab value="disabled" disabled>不可用</Tabs.Tab>
-          </Tabs.List>
-          <Tabs.Panel value="overview" pt="md">这是概览面板，可以放置摘要信息。</Tabs.Panel>
-          <Tabs.Panel value="activity" pt="md">暂无新动态，所有示例数据均为本地数据。</Tabs.Panel>
-          <Tabs.Panel value="settings" pt="md">
-            <Button variant="light" onClick={() => notify('示例设置已恢复。')}>恢复示例设置</Button>
-          </Tabs.Panel>
-        </Tabs>
-      </Section>
-
-      <Section title="菜单栏 Menubar">
-        <Menubar aria-label="示例菜单栏">
-          <Menubar.Menu>
-            <Menubar.Target>文件</Menubar.Target>
-            <Menubar.Dropdown>
-              <Menu.Item onClick={() => runAction('已新建示例文件')}>新建文件</Menu.Item>
-              <Menu.Item onClick={() => runAction('已保存示例文件')}>保存文件</Menu.Item>
-              <Menu.Divider />
-              <Menu.Item disabled>导出（不可用）</Menu.Item>
-            </Menubar.Dropdown>
-          </Menubar.Menu>
-          <Menubar.Menu>
-            <Menubar.Target>视图</Menubar.Target>
-            <Menubar.Dropdown>
-              <Menu.CheckboxItem checked={showStatus} onChange={setShowStatus}>显示状态栏</Menu.CheckboxItem>
-            </Menubar.Dropdown>
-          </Menubar.Menu>
-          <Menubar.Menu>
-            <Menubar.Target>帮助</Menubar.Target>
-            <Menubar.Dropdown>
-              <Menu.Item onClick={() => notify('可使用方向键切换菜单，按 Escape 关闭。')}>键盘操作说明</Menu.Item>
-            </Menubar.Dropdown>
-          </Menubar.Menu>
-        </Menubar>
-        {showStatus && <Text size="sm" c="dimmed">状态栏：准备就绪</Text>}
-      </Section>
-
-      <Section title="加载状态 Loading">
-        <Group gap="xl">
-          <Loader type="oval" aria-label="圆环加载动画" />
-          <Loader type="dots" aria-label="圆点加载动画" />
-          <Loader type="bars" aria-label="条形加载动画" />
-          <Button variant="light" disabled={loading} onClick={() => { setLoading(true); finishLoading() }}>
-            模拟加载
-          </Button>
-        </Group>
-        <Box className={classes.loadingExample} aria-busy={loading}>
-          <LoadingOverlay visible={loading} zIndex={10} loaderProps={{ 'aria-label': '示例内容加载中' }} />
-          <Stack gap="xs" inert={loading}>
-            <Text size="sm">点击按钮展示加载遮罩，约 1.5 秒后恢复。</Text>
-            <Skeleton height="var(--mantine-spacing-md)" />
-            <Skeleton height="var(--mantine-spacing-md)" width="70%" />
-          </Stack>
-        </Box>
-      </Section>
-
-      <Section title="弹层 Drawer / Dialog / Modal / Popover / Tooltip">
-        <Group>
-          <Button onClick={() => setOverlay('drawer')}>打开 Drawer</Button>
-          <Button variant="light" onClick={() => setOverlay('dialog')}>打开 Dialog</Button>
-          <Button variant="outline" onClick={() => setOverlay('modal')}>打开 Modal</Button>
-          <Popover opened={popoverOpened} onChange={setPopoverOpened} withArrow trapFocus width={260}>
-            <Popover.Target>
-              <Button variant="default" onClick={() => setPopoverOpened((value) => !value)}>打开 Popover</Button>
-            </Popover.Target>
-            <Popover.Dropdown>
-              <Stack gap="xs">
-                <Text fw={600}>快捷提示</Text>
-                <Text size="sm">气泡内可以放置文字与操作按钮。</Text>
-                <Button size="xs" onClick={() => setPopoverOpened(false)}>知道了</Button>
-              </Stack>
-            </Popover.Dropdown>
-          </Popover>
-          <Tooltip label="悬停或键盘聚焦时显示提示" withArrow events={{ hover: true, focus: true, touch: true }}>
-            <Button variant="subtle">Tooltip 提示</Button>
-          </Tooltip>
-        </Group>
-      </Section>
-
-      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
-        <Section title="卡片 Card 与徽章 Badge">
-          <Card withBorder padding="md">
-            <Stack gap="sm">
-              <Group justify="space-between">
-                <Text fw={600}>组件示例项目</Text>
-                <Badge color="green">进行中</Badge>
-              </Group>
-              <Text size="sm" c="dimmed">卡片组合标题、说明、状态与操作，适合展示独立内容。</Text>
-              <Group>
-                <Badge variant="light">React</Badge>
-                <Badge variant="outline">Mantine</Badge>
-                <Badge variant="dot" color="orange">示例</Badge>
-              </Group>
-              <Button variant={liked ? 'filled' : 'light'} aria-pressed={liked}
-                leftSection={<HeartIcon weight={liked ? 'fill' : 'regular'} aria-hidden="true" />}
-                onClick={() => setLiked((value) => !value)}>
-                {liked ? '已收藏' : '收藏卡片'}
-              </Button>
-            </Stack>
-          </Card>
-        </Section>
-
-        <Section title="数据列表 DataList">
-          <DataList withDivider>
-            <DataList.Item><DataList.ItemLabel>项目</DataList.ItemLabel><DataList.ItemValue>Template React</DataList.ItemValue></DataList.Item>
-            <DataList.Item><DataList.ItemLabel>用途</DataList.ItemLabel><DataList.ItemValue>界面组件演示</DataList.ItemValue></DataList.Item>
-            <DataList.Item><DataList.ItemLabel>状态</DataList.ItemLabel><DataList.ItemValue><Badge color="green" variant="light">可用</Badge></DataList.ItemValue></DataList.Item>
-            <DataList.Item><DataList.ItemLabel>维护者</DataList.ItemLabel><DataList.ItemValue>示例团队</DataList.ItemValue></DataList.Item>
-          </DataList>
-        </Section>
-      </SimpleGrid>
-
-      <Section title="时间线 Timeline">
-        <Timeline active={1}>
-          <Timeline.Item title="创建项目"><Text size="sm" c="dimmed">项目初始化完成。</Text></Timeline.Item>
-          <Timeline.Item title="开发组件"><Text size="sm" c="dimmed">正在搭建布局和交互示例。</Text></Timeline.Item>
-          <Timeline.Item title="完成验收"><Text size="sm" c="dimmed">等待检查和发布。</Text></Timeline.Item>
-        </Timeline>
-      </Section>
-
-      <Section title="表格 Table 与分页器 Pagination">
-        <Table.ScrollContainer minWidth={500}>
-          <Table striped highlightOnHover withTableBorder>
-            <Table.Caption>项目列表（示例数据）</Table.Caption>
-            <Table.Thead><Table.Tr>
-              <Table.Th scope="col">编号</Table.Th><Table.Th scope="col">项目名称</Table.Th>
-              <Table.Th scope="col">负责人</Table.Th><Table.Th scope="col">状态</Table.Th>
-            </Table.Tr></Table.Thead>
-            <Table.Tbody>
-              {visibleRecords.map((record) => (
-                <Table.Tr key={record.id}>
-                  <Table.Td>{record.id}</Table.Td><Table.Td>{record.name}</Table.Td>
-                  <Table.Td>{record.owner}</Table.Td>
-                  <Table.Td><Badge color={statusColors[record.status]} variant="light">{record.status}</Badge></Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </Table.ScrollContainer>
-        <Group justify="space-between">
-          <Text size="sm" c="dimmed" aria-live="polite">
-            共 {records.length} 条，第 {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, records.length)} 条
-          </Text>
-          <Pagination total={Math.ceil(records.length / pageSize)} value={page} onChange={setPage}
-            getItemProps={(value) => ({ 'aria-label': `第 ${value} 页` })}
-            getControlProps={(control) => ({ 'aria-label': ({ first: '首页', previous: '上一页', next: '下一页', last: '末页' })[control] })} />
-        </Group>
-      </Section>
-
-      <Drawer opened={overlay === 'drawer'} onClose={() => setOverlay(null)} title="Drawer 抽屉示例"
-        position="right" size={drawerSize} closeButtonProps={{ 'aria-label': '关闭 Drawer' }}>
-        <Stack>
-          <Text>抽屉适合展示详情或辅助操作。</Text>
-          <Button onClick={() => setOverlay(null)}>关闭抽屉</Button>
-        </Stack>
-      </Drawer>
-
-      <Dialog opened={overlay === 'dialog'} onClose={() => setOverlay(null)} withCloseButton
-        role="dialog" aria-labelledby="ui-kit-dialog-title" className={classes.dialog}>
-        <Stack gap="xs">
-          <Text id="ui-kit-dialog-title" fw={600}>Dialog 提示框</Text>
-          <Text size="sm">无需遮罩的轻量提示，你仍可以操作页面。</Text>
-          <Button size="xs" onClick={() => setOverlay(null)}>关闭提示</Button>
-        </Stack>
-      </Dialog>
-
-      <Modal opened={overlay === 'modal'} onClose={() => setOverlay(null)} title="Modal 弹窗示例"
-        centered closeButtonProps={{ 'aria-label': '关闭 Modal' }}>
-        <Stack>
-          <TextInput label="项目名称" value={draftName} onChange={(event) => setDraftName(event.currentTarget.value)} data-autofocus />
-          <Group justify="flex-end">
-            <Button variant="default" onClick={() => setOverlay(null)}>取消</Button>
-            <Button disabled={!draftName.trim()} onClick={() => { setOverlay(null); notify(`已保存：${draftName.trim()}`, 'green') }}>保存</Button>
-          </Group>
-        </Stack>
-      </Modal>
-    </Stack>
-  )
-}
diff --git a/src/page-about-me.tsx b/src/page-about-me.tsx
new file mode 100644
index 0000000..ab1d02f
--- /dev/null
+++ b/src/page-about-me.tsx
@@ -0,0 +1,10 @@
+import { Stack, Text, Title } from '@mantine/core'
+
+export default function Me() {
+  return (
+    <Stack>
+      <Title order={1}>关于我</Title>
+      <Text c="dimmed">欢迎来到我的个人介绍页面。</Text>
+    </Stack>
+  )
+}
diff --git a/src/page-about.tsx b/src/page-about.tsx
new file mode 100644
index 0000000..21b4c1e
--- /dev/null
+++ b/src/page-about.tsx
@@ -0,0 +1,19 @@
+import { ActionIcon, Button, Group, Stack, Text, Title } from '@mantine/core'
+import { SlidersHorizontalIcon } from '@phosphor-icons/react'
+
+function About() {
+  return (
+    <Stack>
+      <Title order={1}>关于</Title>
+      <Text c="dimmed">A React + TypeScript starter built with Vite.</Text>
+      <Group gap="xs">
+        <Button variant="filled">Button</Button>
+        <ActionIcon variant="filled" aria-label="Settings">
+          <SlidersHorizontalIcon />
+        </ActionIcon>
+      </Group>
+    </Stack>
+  )
+}
+
+export default About
diff --git a/src/page-form.module.css b/src/page-form.module.css
new file mode 100644
index 0000000..913f3f9
--- /dev/null
+++ b/src/page-form.module.css
@@ -0,0 +1,3 @@
+.fileName {
+  overflow-wrap: anywhere;
+}
diff --git a/src/page-form.tsx b/src/page-form.tsx
new file mode 100644
index 0000000..c203193
--- /dev/null
+++ b/src/page-form.tsx
@@ -0,0 +1,309 @@
+import { useState } from 'react'
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Cascader,
+  Code,
+  ColorInput,
+  Container,
+  FileInput,
+  Group,
+  MultiSelect,
+  NumberInput,
+  Paper,
+  PasswordInput,
+  Radio,
+  Select,
+  SimpleGrid,
+  Stack,
+  Switch,
+  TagsInput,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+  useMatches,
+} from '@mantine/core'
+import { isEmail, useForm } from '@mantine/form'
+import { UploadSimpleIcon } from '@phosphor-icons/react'
+import classes from './page-form.module.css'
+
+// 仅用于演示联动，不是完整行政区划数据。
+const regions = [
+  {
+    name: '浙江省',
+    cities: [
+      { name: '杭州市', districts: ['西湖区', '拱墅区'] },
+      { name: '宁波市', districts: ['海曙区', '鄞州区'] },
+    ],
+  },
+  {
+    name: '江苏省',
+    cities: [
+      { name: '南京市', districts: ['鼓楼区', '玄武区'] },
+      { name: '苏州市', districts: ['姑苏区', '吴中区'] },
+    ],
+  },
+]
+
+const regionOptions = regions.map((province) => ({
+  value: province.name,
+  children: province.cities.map((city) => ({
+    value: city.name,
+    children: city.districts.map((district) => ({ value: district })),
+  })),
+}))
+
+type FormValues = {
+  name: string
+  email: string
+  role: string | null
+  region: string[] | null
+  contact: string
+  interests: string[]
+  technologies: string[]
+  tags: string[]
+  color: string
+  files: File[]
+  quantity: number | string
+  password: string
+  description: string
+  notifications: boolean
+  acceptedTerms: boolean
+}
+
+const exampleErrors = { email: '邮箱格式不正确，例如 name@example.com' }
+
+export default function FormExample() {
+  const [submitted, setSubmitted] = useState<string | null>(null)
+  const withColumns = useMatches({ base: false, sm: true })
+  const form = useForm<FormValues>({
+    mode: 'controlled',
+    validateInputOnBlur: true,
+    initialErrors: exampleErrors,
+    initialValues: {
+      name: '',
+      email: 'invalid-email',
+      role: null,
+      region: null,
+      contact: 'email',
+      interests: [],
+      technologies: [],
+      tags: [],
+      color: '#228be6',
+      files: [],
+      quantity: 1,
+      password: '',
+      description: '',
+      notifications: false,
+      acceptedTerms: false,
+    },
+    validate: {
+      name: (value) => value.trim() ? null : '请输入名称',
+      email: (value) => !value.trim() ? '请输入邮箱' : isEmail(exampleErrors.email)(value.trim()),
+      role: (value) => value ? null : '请选择角色',
+      quantity: (value) => typeof value === 'number' && Number.isInteger(value) && value >= 0 && value <= 100
+        ? null : '请输入 0–100 之间的整数',
+      password: (value) => value && value.length < 8 ? '密码至少需要 8 位' : null,
+      color: (value) => /^#[\da-f]{6}$/i.test(value) ? null : '请输入有效的六位 HEX 颜色',
+      acceptedTerms: (value) => value ? null : '请先阅读并同意示例协议',
+    },
+  })
+
+  function submit(values: FormValues) {
+    setSubmitted(JSON.stringify({
+      ...values,
+      password: values.password ? '已填写（不展示密码）' : '未填写',
+      files: values.files.map((file) => ({
+        name: file.name,
+        size: file.size,
+        type: file.type || '未知类型',
+      })),
+    }, null, 2))
+  }
+
+  return (
+    <Container size="xl" px={0}>
+      <Stack gap="lg">
+        <div>
+          <Title order={1}>表单示例</Title>
+          <Text c="dimmed">体验常用表单控件。提交后在本页预览结果，数据和文件不会发送到服务器。</Text>
+        </div>
+
+        <Paper withBorder p="md">
+          <form
+            onSubmit={form.onSubmit(submit, () => setSubmitted(null))}
+            onReset={(event) => {
+              event.preventDefault()
+              form.reset()
+              form.setErrors(exampleErrors)
+              setSubmitted(null)
+            }}
+            noValidate
+          >
+            <Stack gap="lg">
+              <Text size="sm" c="dimmed">带 * 的项目为必填项；离开输入框或提交时会校验。邮箱预填了错误值，用于演示错误提示。</Text>
+              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
+                <TextInput
+                  label="文本输入框"
+                  placeholder="请输入名称"
+                  required
+                  {...form.getInputProps('name')}
+                />
+                <TextInput
+                  label="邮箱（错误提示示例）"
+                  description="修改为有效邮箱后可正常提交"
+                  placeholder="name@example.com"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  {...form.getInputProps('email')}
+                />
+                <Select
+                  label="选择框"
+                  placeholder="请选择角色"
+                  data={['开发者', '设计师', '产品经理']}
+                  searchable
+                  clearable
+                  required
+                  {...form.getInputProps('role')}
+                />
+                <NumberInput
+                  label="数值输入框"
+                  description="数量，范围 0–100"
+                  min={0}
+                  max={100}
+                  allowDecimal={false}
+                  {...form.getInputProps('quantity')}
+                />
+                <PasswordInput
+                  label="密码输入框"
+                  description="选填，填写时至少 8 位"
+                  placeholder="请输入示例密码"
+                  autoComplete="new-password"
+                  {...form.getInputProps('password')}
+                />
+              </SimpleGrid>
+
+              <Cascader
+                label="级联选择框"
+                description="选择省、市、区，使用部分示例地区"
+                placeholder="请选择省 / 市 / 区"
+                data={regionOptions}
+                withColumns={withColumns}
+                searchable
+                clearable
+                closeOnSelect
+                clearButtonProps={{ 'aria-label': '清空地区' }}
+                nothingFoundMessage="没有匹配的地区"
+                {...form.getInputProps('region')}
+              />
+
+              <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
+                <MultiSelect
+                  label="下拉多选框"
+                  description="选择多个技术方向"
+                  placeholder="请选择技术方向"
+                  data={['React', 'TypeScript', 'Vite', 'Mantine', 'Node.js']}
+                  searchable
+                  clearable
+                  clearButtonProps={{ 'aria-label': '清空技术方向' }}
+                  nothingFoundMessage="没有匹配的选项"
+                  {...form.getInputProps('technologies')}
+                />
+                <TagsInput
+                  label="标签输入框"
+                  description="输入后按 Enter 或逗号添加标签，也可选择推荐标签"
+                  placeholder="输入或选择标签"
+                  data={['学习', '工作', '个人项目', '开源']}
+                  clearable
+                  clearButtonProps={{ 'aria-label': '清空标签' }}
+                  {...form.getInputProps('tags')}
+                />
+                <Radio.Group label="单选框" description="偏好的联系方式" {...form.getInputProps('contact')}>
+                  <Group mt="xs">
+                    <Radio value="email" label="邮件" />
+                    <Radio value="phone" label="电话" />
+                    <Radio value="message" label="站内消息" />
+                  </Group>
+                </Radio.Group>
+                <Checkbox.Group label="多选框" description="感兴趣的方向" {...form.getInputProps('interests')}>
+                  <Group mt="xs">
+                    <Checkbox value="frontend" label="前端" />
+                    <Checkbox value="backend" label="后端" />
+                    <Checkbox value="design" label="设计" />
+                  </Group>
+                </Checkbox.Group>
+                <ColorInput
+                  label="颜色选择框"
+                  format="hex"
+                  swatches={['#228be6', '#40c057', '#fab005', '#fa5252', '#7950f2']}
+                  {...form.getInputProps('color')}
+                />
+                <FileInput
+                  label="文件上传框"
+                  description="支持选择多个文件，仅展示文件信息"
+                  placeholder="点击选择文件"
+                  leftSection={<UploadSimpleIcon aria-hidden="true" />}
+                  multiple
+                  clearable
+                  {...form.getInputProps('files')}
+                />
+              </SimpleGrid>
+
+              {form.values.files.length > 0 && (
+                <Stack gap="xs" aria-live="polite">
+                  {form.values.files.map((file, index) => (
+                    <Text key={`${file.name}-${index}`} size="sm" className={classes.fileName}>
+                      {file.name} · {(file.size / 1024).toFixed(1)} KB
+                    </Text>
+                  ))}
+                </Stack>
+              )}
+
+              <Textarea
+                label="文本框"
+                description="多行文本，例如个人介绍或备注"
+                placeholder="请输入内容"
+                autosize
+                minRows={3}
+                maxRows={8}
+                {...form.getInputProps('description')}
+              />
+              <Switch
+                label="开关：接收消息通知"
+                {...form.getInputProps('notifications', { type: 'checkbox' })}
+              />
+              <Stack gap="xs">
+                <details>
+                  <summary>查看示例协议</summary>
+                  <Text size="sm" c="dimmed" py="xs">
+                    本页面仅用于演示表单交互。提交内容仅在当前页面预览，文件不会上传。
+                    勾选同意用于演示提交前的校验流程，不代表订购或开通服务。
+                  </Text>
+                </details>
+                <Checkbox
+                  label="我已阅读并同意示例协议"
+                  required
+                  {...form.getInputProps('acceptedTerms', { type: 'checkbox', withError: true })}
+                />
+              </Stack>
+              <Group>
+                <Button type="submit">提交预览</Button>
+                <Button type="reset" variant="default">重置</Button>
+              </Group>
+            </Stack>
+          </form>
+        </Paper>
+
+        {submitted !== null && (
+          <Stack gap="xs">
+            <Alert title="提交成功" color="green" role="status">以下是本次提交的示例数据。</Alert>
+            <Code block>{submitted}</Code>
+          </Stack>
+        )}
+      </Stack>
+    </Container>
+  )
+}
diff --git a/src/page-home.tsx b/src/page-home.tsx
new file mode 100644
index 0000000..8b213e6
--- /dev/null
+++ b/src/page-home.tsx
@@ -0,0 +1,12 @@
+import { Stack, Text, Title } from '@mantine/core'
+
+function App() {
+  return (
+    <Stack>
+      <Title order={1}>欢迎使用 Template React</Title>
+      <Text c="dimmed">从左侧菜单开始，探索你的应用。</Text>
+    </Stack>
+  )
+}
+
+export default App
diff --git a/src/page-ui-kit.module.css b/src/page-ui-kit.module.css
new file mode 100644
index 0000000..a0df9f0
--- /dev/null
+++ b/src/page-ui-kit.module.css
@@ -0,0 +1,14 @@
+.section {
+  min-width: 0;
+}
+
+.loadingExample {
+  position: relative;
+  padding: var(--mantine-spacing-md);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-default);
+}
+
+.dialog {
+  max-width: calc(100vw - 2 * var(--mantine-spacing-md));
+}
diff --git a/src/page-ui-kit.tsx b/src/page-ui-kit.tsx
new file mode 100644
index 0000000..156718b
--- /dev/null
+++ b/src/page-ui-kit.tsx
@@ -0,0 +1,294 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import {
+  Alert, Badge, Box, Button, Card, DataList, Dialog, Drawer, Group,
+  Loader, LoadingOverlay, Menu, Menubar, Modal, Notification, Pagination,
+  Paper, Popover, SimpleGrid, Skeleton, Stack, Table, Tabs, Text,
+  TextInput, Timeline, Title, Tooltip, useMatches,
+} from '@mantine/core'
+import { useTimeout } from '@mantine/hooks'
+import { createNotificationsStore, Notifications, notifications } from '@mantine/notifications'
+import { CheckIcon, HeartIcon, InfoIcon, PlusIcon, WarningIcon } from '@phosphor-icons/react'
+import '@mantine/notifications/styles.css'
+import classes from './page-ui-kit.module.css'
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Paper component="section" withBorder p="md" className={classes.section}>
+      <Stack gap="md">
+        <Title order={2} size="h4">{title}</Title>
+        {children}
+      </Stack>
+    </Paper>
+  )
+}
+
+const records = Array.from({ length: 13 }, (_, index) => ({
+  id: index + 1,
+  name: `示例项目 ${String(index + 1).padStart(2, '0')}`,
+  owner: ['林晨', '陈宁', '李明'][index % 3],
+  status: ['进行中', '已完成', '待开始'][index % 3],
+}))
+const statusColors: Record<string, string> = { 进行中: 'blue', 已完成: 'green', 待开始: 'gray' }
+const pageSize = 5
+
+export default function UiKit() {
+  const [store] = useState(createNotificationsStore)
+  const [overlay, setOverlay] = useState<'drawer' | 'dialog' | 'modal' | null>(null)
+  const [popoverOpened, setPopoverOpened] = useState(false)
+  const [showAlert, setShowAlert] = useState(true)
+  const [showNotification, setShowNotification] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [liked, setLiked] = useState(false)
+  const [showStatus, setShowStatus] = useState(true)
+  const [action, setAction] = useState('尚未执行操作')
+  const [page, setPage] = useState(1)
+  const [draftName, setDraftName] = useState('我的示例项目')
+  const drawerSize = useMatches({ base: '100%', sm: 'md' })
+  const { start: finishLoading } = useTimeout(() => setLoading(false), 1500)
+  const visibleRecords = records.slice((page - 1) * pageSize, page * pageSize)
+
+  function notify(message: string, color = 'blue') {
+    notifications.show({
+      title: '示例通知', message, color,
+      closeButtonProps: { 'aria-label': '关闭浮动通知' },
+    }, store)
+  }
+
+  function runAction(message: string) {
+    setAction(message)
+    notify(message)
+  }
+
+  return (
+    <Stack gap="lg">
+      <Notifications store={store} position="top-right" limit={3} />
+      <div>
+        <Title order={1}>UI Kit</Title>
+        <Text c="dimmed">常用界面组件与交互示例，所有操作仅作用于当前页面。</Text>
+      </div>
+
+      <Section title="按钮 Button">
+        <Group>
+          <Button leftSection={<PlusIcon aria-hidden="true" />} onClick={() => runAction('已点击主要按钮')}>主要按钮</Button>
+          <Button variant="light" onClick={() => runAction('已点击浅色按钮')}>浅色按钮</Button>
+          <Button variant="outline" onClick={() => runAction('已点击描边按钮')}>描边按钮</Button>
+          <Button variant="subtle" onClick={() => runAction('已点击文字按钮')}>文字按钮</Button>
+          <Button disabled>禁用按钮</Button>
+          <Button loading>加载中</Button>
+        </Group>
+        <Text size="sm" c="dimmed" role="status">{action}</Text>
+      </Section>
+
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+        <Section title="提示 Alert">
+          <Alert title="提示信息" icon={<InfoIcon />} color="blue">可以在这里展示操作说明。</Alert>
+          <Alert title="操作成功" icon={<CheckIcon />} color="green">示例内容已保存。</Alert>
+          {showAlert ? (
+            <Alert title="请留意" icon={<WarningIcon />} color="orange" withCloseButton
+              closeButtonLabel="关闭警告" onClose={() => setShowAlert(false)}>
+              这是一条可以关闭的警告提示。
+            </Alert>
+          ) : <Button variant="light" onClick={() => setShowAlert(true)}>重新显示警告</Button>}
+        </Section>
+
+        <Section title="通知 Notification">
+          {showNotification ? (
+            <Notification title="收到新消息" icon={<CheckIcon />} color="teal"
+              onClose={() => setShowNotification(false)} closeButtonProps={{ 'aria-label': '关闭示例通知' }}>
+              这是一条嵌入页面的通知。
+            </Notification>
+          ) : <Button variant="light" onClick={() => setShowNotification(true)}>恢复示例通知</Button>}
+          <Group>
+            <Button onClick={() => notify('欢迎体验浮动通知。')}>显示通知</Button>
+            <Button color="green" variant="light" onClick={() => notify('操作成功完成。', 'green')}>成功通知</Button>
+            <Button color="red" variant="light" onClick={() => notify('这是错误通知示例，请重试。', 'red')}>错误通知</Button>
+          </Group>
+        </Section>
+      </SimpleGrid>
+
+      <Section title="标签页 Tabs">
+        <Tabs defaultValue="overview">
+          <Tabs.List aria-label="示例标签页">
+            <Tabs.Tab value="overview">概览</Tabs.Tab>
+            <Tabs.Tab value="activity">动态</Tabs.Tab>
+            <Tabs.Tab value="settings">设置</Tabs.Tab>
+            <Tabs.Tab value="disabled" disabled>不可用</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="overview" pt="md">这是概览面板，可以放置摘要信息。</Tabs.Panel>
+          <Tabs.Panel value="activity" pt="md">暂无新动态，所有示例数据均为本地数据。</Tabs.Panel>
+          <Tabs.Panel value="settings" pt="md">
+            <Button variant="light" onClick={() => notify('示例设置已恢复。')}>恢复示例设置</Button>
+          </Tabs.Panel>
+        </Tabs>
+      </Section>
+
+      <Section title="菜单栏 Menubar">
+        <Menubar aria-label="示例菜单栏">
+          <Menubar.Menu>
+            <Menubar.Target>文件</Menubar.Target>
+            <Menubar.Dropdown>
+              <Menu.Item onClick={() => runAction('已新建示例文件')}>新建文件</Menu.Item>
+              <Menu.Item onClick={() => runAction('已保存示例文件')}>保存文件</Menu.Item>
+              <Menu.Divider />
+              <Menu.Item disabled>导出（不可用）</Menu.Item>
+            </Menubar.Dropdown>
+          </Menubar.Menu>
+          <Menubar.Menu>
+            <Menubar.Target>视图</Menubar.Target>
+            <Menubar.Dropdown>
+              <Menu.CheckboxItem checked={showStatus} onChange={setShowStatus}>显示状态栏</Menu.CheckboxItem>
+            </Menubar.Dropdown>
+          </Menubar.Menu>
+          <Menubar.Menu>
+            <Menubar.Target>帮助</Menubar.Target>
+            <Menubar.Dropdown>
+              <Menu.Item onClick={() => notify('可使用方向键切换菜单，按 Escape 关闭。')}>键盘操作说明</Menu.Item>
+            </Menubar.Dropdown>
+          </Menubar.Menu>
+        </Menubar>
+        {showStatus && <Text size="sm" c="dimmed">状态栏：准备就绪</Text>}
+      </Section>
+
+      <Section title="加载状态 Loading">
+        <Group gap="xl">
+          <Loader type="oval" aria-label="圆环加载动画" />
+          <Loader type="dots" aria-label="圆点加载动画" />
+          <Loader type="bars" aria-label="条形加载动画" />
+          <Button variant="light" disabled={loading} onClick={() => { setLoading(true); finishLoading() }}>
+            模拟加载
+          </Button>
+        </Group>
+        <Box className={classes.loadingExample} aria-busy={loading}>
+          <LoadingOverlay visible={loading} zIndex={10} loaderProps={{ 'aria-label': '示例内容加载中' }} />
+          <Stack gap="xs" inert={loading}>
+            <Text size="sm">点击按钮展示加载遮罩，约 1.5 秒后恢复。</Text>
+            <Skeleton height="var(--mantine-spacing-md)" />
+            <Skeleton height="var(--mantine-spacing-md)" width="70%" />
+          </Stack>
+        </Box>
+      </Section>
+
+      <Section title="弹层 Drawer / Dialog / Modal / Popover / Tooltip">
+        <Group>
+          <Button onClick={() => setOverlay('drawer')}>打开 Drawer</Button>
+          <Button variant="light" onClick={() => setOverlay('dialog')}>打开 Dialog</Button>
+          <Button variant="outline" onClick={() => setOverlay('modal')}>打开 Modal</Button>
+          <Popover opened={popoverOpened} onChange={setPopoverOpened} withArrow trapFocus width={260}>
+            <Popover.Target>
+              <Button variant="default" onClick={() => setPopoverOpened((value) => !value)}>打开 Popover</Button>
+            </Popover.Target>
+            <Popover.Dropdown>
+              <Stack gap="xs">
+                <Text fw={600}>快捷提示</Text>
+                <Text size="sm">气泡内可以放置文字与操作按钮。</Text>
+                <Button size="xs" onClick={() => setPopoverOpened(false)}>知道了</Button>
+              </Stack>
+            </Popover.Dropdown>
+          </Popover>
+          <Tooltip label="悬停或键盘聚焦时显示提示" withArrow events={{ hover: true, focus: true, touch: true }}>
+            <Button variant="subtle">Tooltip 提示</Button>
+          </Tooltip>
+        </Group>
+      </Section>
+
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+        <Section title="卡片 Card 与徽章 Badge">
+          <Card withBorder padding="md">
+            <Stack gap="sm">
+              <Group justify="space-between">
+                <Text fw={600}>组件示例项目</Text>
+                <Badge color="green">进行中</Badge>
+              </Group>
+              <Text size="sm" c="dimmed">卡片组合标题、说明、状态与操作，适合展示独立内容。</Text>
+              <Group>
+                <Badge variant="light">React</Badge>
+                <Badge variant="outline">Mantine</Badge>
+                <Badge variant="dot" color="orange">示例</Badge>
+              </Group>
+              <Button variant={liked ? 'filled' : 'light'} aria-pressed={liked}
+                leftSection={<HeartIcon weight={liked ? 'fill' : 'regular'} aria-hidden="true" />}
+                onClick={() => setLiked((value) => !value)}>
+                {liked ? '已收藏' : '收藏卡片'}
+              </Button>
+            </Stack>
+          </Card>
+        </Section>
+
+        <Section title="数据列表 DataList">
+          <DataList withDivider>
+            <DataList.Item><DataList.ItemLabel>项目</DataList.ItemLabel><DataList.ItemValue>Template React</DataList.ItemValue></DataList.Item>
+            <DataList.Item><DataList.ItemLabel>用途</DataList.ItemLabel><DataList.ItemValue>界面组件演示</DataList.ItemValue></DataList.Item>
+            <DataList.Item><DataList.ItemLabel>状态</DataList.ItemLabel><DataList.ItemValue><Badge color="green" variant="light">可用</Badge></DataList.ItemValue></DataList.Item>
+            <DataList.Item><DataList.ItemLabel>维护者</DataList.ItemLabel><DataList.ItemValue>示例团队</DataList.ItemValue></DataList.Item>
+          </DataList>
+        </Section>
+      </SimpleGrid>
+
+      <Section title="时间线 Timeline">
+        <Timeline active={1}>
+          <Timeline.Item title="创建项目"><Text size="sm" c="dimmed">项目初始化完成。</Text></Timeline.Item>
+          <Timeline.Item title="开发组件"><Text size="sm" c="dimmed">正在搭建布局和交互示例。</Text></Timeline.Item>
+          <Timeline.Item title="完成验收"><Text size="sm" c="dimmed">等待检查和发布。</Text></Timeline.Item>
+        </Timeline>
+      </Section>
+
+      <Section title="表格 Table 与分页器 Pagination">
+        <Table.ScrollContainer minWidth={500}>
+          <Table striped highlightOnHover withTableBorder>
+            <Table.Caption>项目列表（示例数据）</Table.Caption>
+            <Table.Thead><Table.Tr>
+              <Table.Th scope="col">编号</Table.Th><Table.Th scope="col">项目名称</Table.Th>
+              <Table.Th scope="col">负责人</Table.Th><Table.Th scope="col">状态</Table.Th>
+            </Table.Tr></Table.Thead>
+            <Table.Tbody>
+              {visibleRecords.map((record) => (
+                <Table.Tr key={record.id}>
+                  <Table.Td>{record.id}</Table.Td><Table.Td>{record.name}</Table.Td>
+                  <Table.Td>{record.owner}</Table.Td>
+                  <Table.Td><Badge color={statusColors[record.status]} variant="light">{record.status}</Badge></Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+        <Group justify="space-between">
+          <Text size="sm" c="dimmed" aria-live="polite">
+            共 {records.length} 条，第 {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, records.length)} 条
+          </Text>
+          <Pagination total={Math.ceil(records.length / pageSize)} value={page} onChange={setPage}
+            getItemProps={(value) => ({ 'aria-label': `第 ${value} 页` })}
+            getControlProps={(control) => ({ 'aria-label': ({ first: '首页', previous: '上一页', next: '下一页', last: '末页' })[control] })} />
+        </Group>
+      </Section>
+
+      <Drawer opened={overlay === 'drawer'} onClose={() => setOverlay(null)} title="Drawer 抽屉示例"
+        position="right" size={drawerSize} closeButtonProps={{ 'aria-label': '关闭 Drawer' }}>
+        <Stack>
+          <Text>抽屉适合展示详情或辅助操作。</Text>
+          <Button onClick={() => setOverlay(null)}>关闭抽屉</Button>
+        </Stack>
+      </Drawer>
+
+      <Dialog opened={overlay === 'dialog'} onClose={() => setOverlay(null)} withCloseButton
+        role="dialog" aria-labelledby="ui-kit-dialog-title" className={classes.dialog}>
+        <Stack gap="xs">
+          <Text id="ui-kit-dialog-title" fw={600}>Dialog 提示框</Text>
+          <Text size="sm">无需遮罩的轻量提示，你仍可以操作页面。</Text>
+          <Button size="xs" onClick={() => setOverlay(null)}>关闭提示</Button>
+        </Stack>
+      </Dialog>
+
+      <Modal opened={overlay === 'modal'} onClose={() => setOverlay(null)} title="Modal 弹窗示例"
+        centered closeButtonProps={{ 'aria-label': '关闭 Modal' }}>
+        <Stack>
+          <TextInput label="项目名称" value={draftName} onChange={(event) => setDraftName(event.currentTarget.value)} data-autofocus />
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setOverlay(null)}>取消</Button>
+            <Button disabled={!draftName.trim()} onClick={() => { setOverlay(null); notify(`已保存：${draftName.trim()}`, 'green') }}>保存</Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  )
+}
diff --git a/src/routes.ts b/src/routes.ts
index 92eced8..dc351e0 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,9 +1,9 @@
 import { ClipboardTextIcon, HouseIcon, InfoIcon, SquaresFourIcon, UserIcon } from '@phosphor-icons/react'
 import type { Icon } from '@phosphor-icons/react'
 import type { RouteObject } from 'react-router'
-import App from './App.tsx'
-import About from './About.tsx'
-import Me from './Me.tsx'
+import App from './page-home.tsx'
+import About from './page-about.tsx'
+import Me from './page-about-me.tsx'
 
 export type PageRoute = RouteObject & {
   handle?: { title: string; icon: Icon }
@@ -20,13 +20,13 @@ export const pageRoutes = [
   {
     id: 'form',
     path: '/form',
-    lazy: async () => ({ Component: (await import('./FormExample.tsx')).default }),
+    lazy: async () => ({ Component: (await import('./page-form.tsx')).default }),
     handle: { title: '表单示例', icon: ClipboardTextIcon },
   },
   {
     id: 'ui-kit',
     path: '/ui-kit',
-    lazy: async () => ({ Component: (await import('./UiKit.tsx')).default }),
+    lazy: async () => ({ Component: (await import('./page-ui-kit.tsx')).default }),
     handle: { title: 'UI Kit', icon: SquaresFourIcon },
   },
   {
-- 
cgit v1.2.3