From 61c1674e439dd791aee4fdc72e5738bbefed13e9 Mon Sep 17 00:00:00 2001 From: shu 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/page-ui-kit.tsx | 294 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 294 insertions(+) create mode 100644 src/page-ui-kit.tsx (limited to 'src/page-ui-kit.tsx') 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 ( + + + {title} + {children} + + + ) +} + +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 = { 进行中: '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 ( + + +
+ UI Kit + 常用界面组件与交互示例，所有操作仅作用于当前页面。 +
+ +
+ + + + + + + + + {action} +
+ + +
+ } color="blue">可以在这里展示操作说明。 + } color="green">示例内容已保存。 + {showAlert ? ( + } color="orange" withCloseButton + closeButtonLabel="关闭警告" onClose={() => setShowAlert(false)}> + 这是一条可以关闭的警告提示。 + + ) : } +
+ +
+ {showNotification ? ( + } color="teal" + onClose={() => setShowNotification(false)} closeButtonProps={{ 'aria-label': '关闭示例通知' }}> + 这是一条嵌入页面的通知。 + + ) : } + + + + + +
+ + +
+ + + 概览 + 动态 + 设置 + 不可用 + + 这是概览面板，可以放置摘要信息。 + 暂无新动态，所有示例数据均为本地数据。 + + + + +
+ +
+ + + 文件 + + runAction('已新建示例文件')}>新建文件 + runAction('已保存示例文件')}>保存文件 + + 导出（不可用） + + + + 视图 + + 显示状态栏 + + + + 帮助 + + notify('可使用方向键切换菜单，按 Escape 关闭。')}>键盘操作说明 + + + + {showStatus && 状态栏：准备就绪} +
+ +
+ + + + + + + + + + 点击按钮展示加载遮罩，约 1.5 秒后恢复。 + + + + +
+ +
+ + + + + + + + + + + 快捷提示 + 气泡内可以放置文字与操作按钮。 + + + + + + + + +
+ + +
+ + + + 组件示例项目 + 进行中 + + 卡片组合标题、说明、状态与操作，适合展示独立内容。 + + React + Mantine + 示例 + + + + +
+ +
+ + 项目Template React + 用途界面组件演示 + 状态可用 + 维护者示例团队 + +
+ + +
+ + 项目初始化完成。 + 正在搭建布局和交互示例。 + 等待检查和发布。 + +
+ +
+ + + 项目列表（示例数据） + + 编号项目名称 + 负责人状态 + + + {visibleRecords.map((record) => ( + + {record.id}{record.name} + {record.owner} + {record.status} + + ))} + +
+ + + + 共 {records.length} 条，第 {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, records.length)} 条 + + ({ 'aria-label': `第 ${value} 页` })} + getControlProps={(control) => ({ 'aria-label': ({ first: '首页', previous: '上一页', next: '下一页', last: '末页' })[control] })} /> + +
+ + setOverlay(null)} title="Drawer 抽屉示例" + position="right" size={drawerSize} closeButtonProps={{ 'aria-label': '关闭 Drawer' }}> + + 抽屉适合展示详情或辅助操作。 + + + + + setOverlay(null)} withCloseButton + role="dialog" aria-labelledby="ui-kit-dialog-title" className={classes.dialog}> + + Dialog 提示框 + 无需遮罩的轻量提示，你仍可以操作页面。 + + + + + setOverlay(null)} title="Modal 弹窗示例" + centered closeButtonProps={{ 'aria-label': '关闭 Modal' }}> + + setDraftName(event.currentTarget.value)} data-autofocus /> + + + + + + + + ) +} -- cgit v1.2.3