English | 简体中文

✨ 特性

• Suzume Design - 基于 @byonedot/web-react。
• TypeScript 全量类型。
• 16+ 页面模板，覆盖仪表盘、表格、列表、表单、数据可视化、设置、结果页与登录页。
• 主题 - 运行时主题色、布局与暗色模式，设计令牌来自 @byonedot/color。
• 暗色模式 - <body> 上的一个属性即可切换。
• 内置 Mock - 基于 mockjs，后端就绪前也能跑起来。
• 多架构 - 同一套源码，输出 Next.js、 Vite 与 CRA 三种工程。
• 国际化 - 内置 en-US / zh-CN 字典。
• 可视化配置 - 主题色、导航栏、菜单宽度、页脚、色彩周可在设置抽屉中实时调整。

📦 模板

| 目录 | 技术栈 | 说明 | | --- | --- | --- | | suzume-design-pro-next | Next.js（Pages Router）+ Less + TypeScript | 完整生成，已通过生产构建验证 | | suzume-design-pro-cra | CRA 5 + react-app-rewired + Less | 由生成脚本从 Next 模板拷贝组装 | | suzume-design-pro-vite | Vite 2 + react-router | 由生成脚本从 Next 模板拷贝组装 | | simple-pro-template/ | --simple 参数使用的精简覆盖层 | 仅源码覆盖 |

Next 模板是唯一真源：scripts/cra.js 与 scripts/vite.js 会拷贝它的 src/ 子树，因此在 Next 模板上的修改会自动同步到另外两个。

🚀 使用

作为 CLI

npx suzume-design-pro --framework next --projectPath ./my-dashboard
cd my-dashboard
npm install
npm run dev

| 参数 | 说明 | | --- | --- | | -f, --framework | next | cra | vite | | -p, --projectPath | 输出目录（默认 ./examples/<framework>） | | --simple | 精简模板（不含图表 / 可视化 / 长列表） | | -h, --help | 帮助 |

从仓库运行

yarn install          # 在本仓库
npm run gen:next      # 输出到 ./examples/suzume-design-pro-next
cd ../examples/suzume-design-pro-next && yarn && yarn dev

生成结果写入本包同级的 ../examples/，该目录已加入 .gitignore。

⚙️ 关键配置

| 文件 | 作用 | | --- | --- | | suzume-design-pro-next/src/settings.json | 主题色、导航栏、菜单宽度、页脚 | | suzume-design-pro-next/src/style/theme/ | 内置 Pro 主题（Less），见 THIRD_PARTY_NOTICES.md | | suzume-design-pro-next/src/style/global.less | 主题与全局样式入口 | | suzume-design-pro-next/src/routes.ts | 路由表与权限控制 | | suzume-design-pro-next/src/locale/ | en-US / zh-CN 字典 | | suzume-design-pro-next/src/mock/ | Mock 接口 | | suzume-design-pro-next/next.config.js | Less modifyVars（suzumeblue-6）、别名、重定向 |

模板在发布时依赖 npm 上的 @byonedot/web-react；在本仓库开发时通过 link: / file: 指向同级仓库，prepack 会在发布前把它们改写为 ^1.0.0。

💎 更新日志

见 docs/changelog.md（英文）与 docs/changelog.zh-CN.md（中文）。本发行版的发布历史从 1.0.0 开始。

许可证

MIT © Suzume Design，上游归属见 THIRD_PARTY_NOTICES.md。