Atelier 管理后台 HTML 模板[更至v1.0.0]

Atelier React 是一款面向生产环境的高级管理后台与仪表盘模板，采用纯 React 技术栈构建，不依赖任何第三方 UI 组件库。整个项目基于 React 19.2、TypeScript 5.9 严格模式、React Router 7.18、Vite 6.4 和 Tailwind CSS v4，包含 114 个完整页面，所有页面均来自统一的设计令牌（design-token）核心。

真正的 React 实现，非移植方案

每个交互组件——折叠侧边栏、下拉菜单、模态框、侧滑自定义面板、⌘K 命令面板、图表包装器和地图——均为原生 React 函数组件和 Hook。项目完全不使用 jQuery、Bootstrap、CSS-in-JS 或需要改造外观的第三方组件库。 核心技术栈：

React 19.2 + React Router 7.18：全部采用函数组件和 Hook，无任何类组件
TypeScript 5.9 严格模式：路由清单和页面注册表均已类型化，错误 slug 导致构建失败
Vite 6.4 + @vitejs/plugin-react：开发环境热更新即时响应，生产构建每个路由独立懒加载 chunk
Tailwind CSS v4：CSS 优先方案，通过 @theme 桥接将 --at-* 角色令牌映射到 Tailwind 工具类命名空间
仅 6 个运行时依赖，其中 ApexCharts 和 Leaflet 仅在使用该路由时加载

114 个完整页面，拒绝凑数

所有页面均为真实、完整的业务页面，非演示组件堆砌，也非同一屏幕的重复变体： 仪表盘（17个）：销售、运营分析、电商、CRM、项目管理、金融银行、数字资产、NFT 市场、招聘、HR 薪资、学习管理、股票交易、医疗、POS、社交、校园、播客 Web 应用（10个）：邮件、聊天、看板日历、文件管理、图库、笔记、待办、通讯录、媒体播放器 电商套件（15个页面）：商品列表、商品详情、新增/编辑商品、购物车、结账、订单管理、订单详情、客户管理、商家管理、发票 UI 组件（14个页面）：按钮、卡片、模态框、标签页、警告提示、头像徽章、表格等 工具页面（9个）：定价、常见问题、用户资料、设置、团队、时间线、条款协议、落地页、空模板 垂直模块：招聘（7页）、认证系统（6页）、数字资产（5页）、NFT（5页）、表单（5页）、CRM（4页），以及 401/403/404/500/503 错误页面 数据可视化：23 个页面共 81 个实时 ApexCharts、完整数据表格、Leaflet 地图

144 种视觉组合，12×12 的设计空间

配色方案和字体设置完全解耦，每套配色重写整个界面表面（画布、墨水色、强调色、次要色、第三色），且每套都有手工绘制的深色模式版本，而非滤镜反转。字体是第二条独立轴线：12 套字体组合、21 个 Google Fonts 家族，一次请求即可加载。12×12 = 144 种完整视觉方案，全部通过内置自定义面板在运行时切换，配备阻塞式防闪烁脚本确保首次加载无闪烁。

设计语言：硬核印刷风（Bold Press）

无模糊的深度：所有界面层级均为 blur 零的纯色偏移块，每处填充都是单一平涂色，整个系统通过 13 个样式表解析为 221 个 CSS 变量，其中 70 个 box-shadow 声明的模糊半径全部为 0——这正是 Bold Press 设计语言的量化表达。

工程化特性

统一令牌核心：颜色、字体、圆角、阴影从四个令牌文件解析，组件自身不携带任何值，重新主题化只需改令牌而非全局查找替换。 全链路类型检查：启用 strict 模式下的未使用变量和参数检查，tsc -b 在打包器之前运行，类型错误导致构建失败而非带病发布。 真正的 RTL 支持：从首行即采用逻辑属性，而非事后镜像样式表——在 7264 行 CSS 中零 left/right 边距，切换方向无需改动任何 markup。 可折叠外壳：侧边栏从 256px 折叠至 72px 图标轨道，再折叠至 520px 以下的画布外抽屉，响应断点为 992/768/520。 轻量传输：压缩后 CSS 仅 20.4 KB、JS 仅 97 KB（含 React 本身），图表和地图作为独立 chunk 按需加载。 实时自定义面板：配色方案、深色模式、字体、布局宽度和方向均可运行时切换并持久化保存，可一键导出配置作为默认主题。 单一路由清单：114 条路由来自一个 JSON 文件，同时供侧边栏、面包屑和命令面板读取，添加页面即添加文件。