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:
@@ -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 组织:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user