refactor: 前端 UI 框架从 TDesign 迁移到 antd 6.x
- 移除 tdesign-react + tdesign-icons-react,新增 antd@6.4.3 + @ant-design/icons@6.2.3 - Layout/Header/Sider/Content 替换 TDesign Layout,Sider 内置折叠管理 - Segmented 替换 RadioGroup 主题切换,ConfigProvider 主题算法切换 - Menu items prop 模式,Sidebar 简化为无 props 纯组件 - Table/Modal/Form/Input.TextArea/Tabs/Tag/Popconfirm 全量迁移 - App.useApp().message 替换 MessagePlugin(hooks 模式) - --td-* CSS 变量替换为 --ant-* antd CSS 变量 - 测试适配:ConfigProvider+App wrapper,.ant-menu-item-selected,antd CSS-in-JS jsdom 兼容 - 文档更新:frontend.md, development/README.md, config.yaml, deploy.md - vendor-antd chunk 755KB gzipped 240KB
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
| ---------------------------------- | ---------------------------------------------------------------- |
|
||||
| [architecture.md](architecture.md) | 项目结构、启动流程、运行时流程、HTTP 请求流程、前后端边界 |
|
||||
| [backend.md](backend.md) | 后端库优先级、API 路由、共享工具、类型规范、配置契约、日志、测试 |
|
||||
| [frontend.md](frontend.md) | React、TDesign、TanStack Query、组件、样式和前端测试规范 |
|
||||
| [frontend.md](frontend.md) | React、Ant Design、TanStack Query、组件、样式和前端测试规范 |
|
||||
| [release.md](release.md) | 开发服务、前后端集成、构建、脚本、环境变量 |
|
||||
| [../README.md](../README.md) | 文档路由、文档归属矩阵、development/user 文档更新规则 |
|
||||
|
||||
@@ -57,8 +57,8 @@
|
||||
- 运行工具使用 bunx,禁止使用 npx、pnpx。
|
||||
- 新增代码优先复用已有组件、工具和依赖库,不引入新依赖;确需新增依赖时先说明原因。
|
||||
- 后端优先使用 Bun 内置 API,其次是 es-toolkit、标准 Web API、主流三方库,最后才自行实现。
|
||||
- 前端样式优先使用 TDesign 组件、组件 props、TDesign CSS tokens、styles.css CSS 类,最后才自行开发组件。
|
||||
- 前端禁止组件内联 style、覆盖 TDesign 内部类名、使用 !important、硬编码色值。
|
||||
- 前端样式优先使用 antd 组件、组件 props、antd Design Token / CSS 变量、styles.css CSS 类,最后才自行开发组件。
|
||||
- 前端禁止组件内联 style、覆盖 antd 内部类名、使用 !important、硬编码色值。
|
||||
- 当前项目无需考虑向前兼容。
|
||||
|
||||
## 包管理、依赖与提交
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 前端开发
|
||||
|
||||
本文档说明 alfred 前端的 React、TDesign、TanStack Query、组件、样式和前端测试约定。
|
||||
本文档说明 alfred 前端的 React、Ant Design、TanStack Query、组件、样式和前端测试约定。
|
||||
|
||||
适用场景:修改 src/web/、前端共享类型使用方式、组件结构、样式规则或前端测试。
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
| 框架 | React 19 | UI 组件开发 |
|
||||
| 构建 | Vite(开发)+ Bun compile(生产) | 开发服务 HMR 与生产构建 |
|
||||
| 语言 | TypeScript | 类型安全 |
|
||||
| UI 库 | TDesign React + tdesign-icons-react | UI 组件与图标 |
|
||||
| UI 库 | Ant Design (antd) + @ant-design/icons | UI 组件与图标 |
|
||||
| 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动刷新 |
|
||||
| 路由 | React Router v7 (Declarative mode) | SPA 路由与页面导航 |
|
||||
|
||||
@@ -28,20 +28,20 @@
|
||||
|
||||
## 样式开发规范
|
||||
|
||||
前端基于 TDesign React 构建 UI,样式开发优先级:
|
||||
前端基于 Ant Design 构建 UI,样式开发优先级:
|
||||
|
||||
1. TDesign 组件
|
||||
2. TDesign 组件 props
|
||||
3. TDesign CSS tokens(--td-\*)
|
||||
1. antd 组件
|
||||
2. 组件 props
|
||||
3. antd Design Token / CSS 变量(--ant-\*)
|
||||
4. styles.css CSS 类
|
||||
5. 自行开发组件
|
||||
|
||||
红线:
|
||||
|
||||
- 严禁在组件中使用 style 属性内联调整样式
|
||||
- 严禁通过 CSS 覆盖 TDesign 组件内部类名
|
||||
- 严禁通过 CSS 覆盖 antd 组件内部类名
|
||||
- 严禁使用 !important
|
||||
- 颜色统一使用 TDesign CSS tokens,不使用硬编码色值
|
||||
- 颜色统一使用 antd Design Token / CSS 变量,不使用硬编码色值
|
||||
|
||||
styles.css 组织:
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ scripts/build.ts 执行三步流水线:
|
||||
3. Bun compile -> dist/alfred(单可执行文件)
|
||||
```
|
||||
|
||||
- Vite 构建前端资源到 dist/web/,自动 code splitting(vendor-react、vendor-tdesign、vendor-chart)
|
||||
- Vite 构建前端资源到 dist/web/,自动 code splitting(vendor-react、vendor-antd、vendor-chart)
|
||||
- Code generation 扫描 dist/web/ 生成 static-assets.ts,读取 drizzle/\*.sql 生成 migrations-data.ts,生成 server-entry.ts 串联入口
|
||||
- migrations-data.ts 将 migration SQL 嵌入 binary,生产部署无需额外携带 migration 文件
|
||||
- Bun compile 以 .build/server-entry.ts 为入口编译最终可执行文件
|
||||
|
||||
Reference in New Issue
Block a user