docs: 开发规范和设计文档明确 MUI 为强制 UI 组件库
- standard/开发规范.md: 新增 §3.1 UI组件铁律: 所有UI组件必须使用MUI,列表枚举12类禁止自写 移除 §4 中「简单UI组件」自写例外 更新 §附录: MUI明确为强制组件库,Tailwind仅辅助 - docs/UI UX设计集成方案: 组件树前增加MUI强制使用说明 - docs/架构与交互设计: Renderer进程说明补充MUI,Hero技术栈加入MUI
This commit is contained in:
+25
-3
@@ -64,6 +64,29 @@
|
||||
| WebSocket | ws、socket.io | 需要重连、心跳、二进制支持 |
|
||||
| 任务队列 | bull、bee-queue | 需要持久化、重试、优先级 |
|
||||
| 配置管理 | dotenv、convict | 需要类型安全、环境变量、默认值 |
|
||||
| UI 组件 | Material UI (MUI) @mui/material | 按钮、输入框、弹窗、选择器、表单、表格等所有 UI 组件 |
|
||||
|
||||
#### 3.1 UI 组件铁律
|
||||
|
||||
**所有前端 UI 组件必须使用 Material UI (MUI)**,禁止自写任何 UI 交互组件。
|
||||
|
||||
| 组件类型 | MUI 组件 | 禁止自写 |
|
||||
|---------|----------|----------|
|
||||
| 按钮 | Button、IconButton | 自写 `<button>` 样式 |
|
||||
| 输入框 | TextField、InputBase | 自写 `<input>` 样式 |
|
||||
| 选择器 | Select、MenuItem | 自写下拉框 |
|
||||
| 弹窗 | Dialog、Drawer | 自写遮罩层 |
|
||||
| 表单控件 | Checkbox、Switch、Slider | 自写表单控件 |
|
||||
| 标签页 | Tabs、Tab | 自写 Tab 切换 |
|
||||
| 提示 | Tooltip、Chip、Badge | 自写气泡提示 |
|
||||
| 布局 | Box、Stack、Grid | 自写 Flex/Grid 布局 |
|
||||
| 排版 | Typography | 自写 `<p>` `<span>` 样式 |
|
||||
| 进度 | LinearProgress、CircularProgress | 自写进度条/加载动画 |
|
||||
| 卡片 | Card、Paper | 自写卡片容器 |
|
||||
| 头像 | Avatar | 自写头像圆形容器 |
|
||||
| 列表 | List、ListItemButton | 自写列表项 |
|
||||
|
||||
**例外**:仅当 MUI 确认不存在对应组件时,才可使用原生 HTML 元素 + Tailwind CSS 实现,且必须注释说明原因。
|
||||
|
||||
#### 4. 允许自写的场景
|
||||
|
||||
@@ -75,7 +98,6 @@
|
||||
| 业务逻辑封装 | 特定于项目的业务规则 |
|
||||
| 类型定义 | 项目特有的接口和类型 |
|
||||
| 适配器/桥接层 | 连接不同库的中间层 |
|
||||
| 简单 UI 组件 | < 50 行,无复杂交互 |
|
||||
| 配置常量 | 项目特有的配置值 |
|
||||
| Provider Adapter 流式解析 | 需精细控制 SSE/NDJSON 流式响应解析时,允许使用原生 fetch 替代 axios。条件:仅在 `electron/harness/adapters/` 目录内,且需封装为统一的流式处理工具函数 |
|
||||
|
||||
@@ -136,11 +158,11 @@
|
||||
| 功能 | 推荐库 | 备选 |
|
||||
|------|--------|------|
|
||||
| UI 框架 | React 18/19 | - |
|
||||
| 组件库 | **Material UI (MUI)** — 强制使用,所有 UI 组件必须基于 MUI | shadcn/ui(仅概念参考) |
|
||||
| 状态管理 | Zustand | Jotai、Valtio |
|
||||
| 路由 | React Router | TanStack Router |
|
||||
| 表单 | React Hook Form | Formik |
|
||||
| 样式 | Tailwind CSS | CSS Modules |
|
||||
| 组件库 | shadcn/ui | Radix UI |
|
||||
| 样式 | Tailwind CSS(仅辅助,禁止替代 MUI 组件) | CSS Modules |
|
||||
| 图标 | Lucide React | React Icons |
|
||||
|
||||
### 数据处理
|
||||
|
||||
Reference in New Issue
Block a user