web 项目模板 react + mantine + vite + react router https://git.shu.moe/template-react-mantine/atom?h=main 2026-09-06T10:59:52Z 2026-09-06T10:59:52Z shu nvcsadjkojf@outlook.com 2026-09-06T10:59:36Z urn:sha1:f62ab62e72698c57b4775792a0986f12de950750 - 在基础布局顶栏右侧添加网站设置按钮，桌面使用右侧抽屉，移动端使用全宽抽屉 - 提供亮色、暗色、跟随系统三种外观模式，默认跟随系统并通过 Mantine 自动保存选择 - 设置即时生效，切换系统主题时同步更新页面外观 - 使用查询参数管理抽屉状态，支持浏览器返回关闭和直接访问设置链接 - 使用 CSS Modules 配置触控间距及移动端安全区域 验证：构建、lint 和空白检查通过。 浏览器验证通过：主题切换、本地保存、刷新恢复、跟随系统、返回关闭、移动端宽度、Escape 关闭、焦点恢复与直接设置链接关闭。 2026-09-06T09:04:49Z shu nvcsadjkojf@outlook.com 2026-09-06T09:04:49Z urn:sha1:2f1057a9d9d51d0e657c1203d3781173e8efc611 - 使用 Vite、React 和 TypeScript 初始化项目，配置 pnpm、Oxlint 与 Mantine PostCSS - 接入 React Router Data Mode，将页面路由、菜单标题和图标统一维护在路由配置中 - 添加首页、关于概览与关于我页面，使用 Nested NavLinks 根据路由生成多级菜单 - 实现桌面侧栏展开和图标模式、移动端全宽抽屉以及与品牌区对齐的顶栏 - 将布局自定义样式拆分为 CSS Modules，统一 xs 间距并固定菜单图标列位置 - 添加文档流页脚，展示自动更新年份的示例版权说明 - 配置 Mantine 默认圆角、项目说明及中文提交约定 验证：pnpm build、pnpm lint、git diff --cached --check 均通过。