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:
2026-05-28 13:20:12 +08:00
parent cd1533328d
commit 15ba33db27
25 changed files with 478 additions and 489 deletions

View File

@@ -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、硬编码色值。
- 当前项目无需考虑向前兼容。
## 包管理、依赖与提交

View File

@@ -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 组织: