diff --git a/.lingma/rules/biz.md b/.lingma/rules/biz.md new file mode 100644 index 0000000..c9b457f --- /dev/null +++ b/.lingma/rules/biz.md @@ -0,0 +1,70 @@ +--- +trigger: manual +--- +## Biz组件库设计规则 + +### 1. 组件架构模式 + +Biz组件库采用统一的业务组件架构,主要包含以下几类组件: + +1. **核心容器组件**: + - [BizContainer](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizContainer.tsx#L33-L947) - 主容器组件,协调其他业务组件 + - [PageContainer](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/PageContainer.tsx#L12-L42) - 页面容器组件,处理权限验证 + +2. **业务功能组件**: + - [BizPage](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizPage.tsx#L7-L121) - 分页表格组件 + - [BizTree](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizTree.tsx#L6-L61) - 树形结构组件 + - [BizDrag](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizDrag.tsx#L7-L158) - 拖拽排序组件 + - [BizList](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizList.tsx#L6-L52) - 列表展示组件 + - [BizCalender](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizCalender.tsx#L10-L89) - 日历展示组件 + +3. **操作型组件**: + - [BizCreate](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizCreate.tsx#L10-L240) - 创建操作组件 + - [BizUpdate](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizUpdate.tsx#L12-L255) - 更新操作组件 + - [BizDetail](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizDetail.tsx#L12-L273) - 详情查看组件 + - [BizDestroy](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizDestroy.tsx#L9-L90) - 删除操作组件 + - [BizImport](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizImport.tsx#L14-L610) - 批量导入组件 + +### 2. 类型系统设计 + +所有组件都采用泛型设计,主要泛型参数包括: + +- `Func`: API函数类型 +- `BizVO`: 视图对象类型 +- `BizPageQry`: 查询参数类型 +- `BizCreateCmd`: 创建命令类型 +- `BizUpdateCmd`: 更新命令类型 + +### 3. 统一属性模式 + +所有Biz组件都遵循统一的属性设计模式: + +1. **API相关属性**: + - `func`: API函数集合 + - `method`: 方法名前缀 + - `methodUpper`: 首字母大写的方法名前缀 + - `rowKey`: 主键字段名 + +2. **权限与国际化**: + - `permission`: 权限标识 + - `intlPrefix`: 国际化前缀 + +3. **表单类型**: + - `formType`: 表单类型(modal/drawer/step) + +### 4. 响应式设计 + +组件通过`isMobile`属性自动适配移动端,主要体现在: +- 表单宽度自动调整 +- 操作按钮布局优化 +- 操作栏按钮数量自适应 + +### 5. 权限控制机制 + +使用[ButtonAccess](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/ButtonAccess.tsx#L11-L22)组件实现细粒度权限控制,权限标识通过`permission`属性自动拼接操作类型(如-create、-update、-delete、-view)。 + +### 6. 数据交互模式 + +1. **数据获取**:通过`func`中的方法调用API,方法名由[methodUpper](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizContainer.tsx#L33-L947)和操作类型组合而成 +2. **数据提交**:表单提交时自动移除包含"VO"的字段 +3. **状态管理**:使用[actionRef](file:///D:/xinfaleisheng/ERPTurbo_Admin/packages/app-operation/src/components/Biz/BizContainer.tsx#L80-L80)进行组件间状态同步 diff --git a/.lingma/rules/design.md b/.lingma/rules/design.md new file mode 100644 index 0000000..7965f42 --- /dev/null +++ b/.lingma/rules/design.md @@ -0,0 +1,155 @@ +--- +trigger: manual +--- +# ERPTurbo_Admin 项目技术文档 + +## 1. 项目概述 + +ERPTurbo_Admin 是一个基于 React 生态系统的管理后台系统,采用 Monorepo 架构,包含多个子应用和共享组件库。 + +## 2. 核心技术栈 + +### 2.1 主要框架和库 + +| 技术 | 版本 | 用途 | +|------|------|------| +| React | ^18.0.0 | 前端核心框架 | +| UmiJS Max | ^4.4.9 | 应用框架和构建工具 | +| Ant Design | ^5.25.2 | UI 组件库 | +| Ant Design Pro Components | ^2.8.6 | 高级业务组件 | +| TypeScript | ^5.6.3 | 类型检查和开发支持 | +| TailwindCSS | ^3.4.17 | CSS 框架 | + +### 2.2 状态管理和数据流 + +- **UmiJS 内置状态管理**:包括 initialState、model、valtio 插件 +- **React Query**:服务端状态管理 +- **Dva**:轻量级的数据流方案 + +### 2.3 构建和开发工具 + +- **PNPM**:包管理器 +- **Prettier**:代码格式化 +- **ESLint**:代码质量检查 +- **Husky**:Git Hooks 工具 +- **Lint-staged**:增量代码检查 + +## 3. 项目架构 + +### 3.1 Monorepo 结构 + +``` +ERPTurbo_Admin/ +├── packages/ +│ ├── app-operation/ # 运营管理系统主应用 +│ ├── app-sso-server/ # SSO 单点登录系统 +├── shared/ +│ ├── components/ # 共享组件库 +├── pnpm-workspace.yaml # PNPM 工作区配置 +``` + + +### 3.2 主要应用介绍 + +#### app-operation (运营管理系统) +这是主要的管理后台应用,具有完整的后台管理功能: +- 使用 UmiJS Max 框架 +- 实现了动态路由和菜单 +- 包含权限控制和用户认证 +- 支持国际化 (i18n) + +#### shared/components (共享组件库) +这是一个独立的组件库,使用 Dumi 进行开发和文档展示: +- 可复用的业务组件 +- 支持按需引入 +- 具备完整的类型定义 + +## 4. 核心特性实现 + +### 4.1 权限控制系统 +项目实现了细粒度的权限控制: +- 基于角色的访问控制 (RBAC) +- 页面级别权限控制 ([access](file://D:\xinfaleisheng\ERPTurbo_Admin\packages\app-operation\src\components\Biz\PageContainer.tsx#L16-L16) 插件) +- 按钮级别权限控制 (通过 [ButtonAccess](file://D:\xinfaleisheng\ERPTurbo_Admin\packages\app-operation\src\components\Biz\ButtonAccess.tsx#L11-L19) 组件) + +### 4.2 动态路由和菜单 +- 从服务端获取路由配置 +- 自动注册和渲染页面组件 +- 支持嵌套路由和面包屑导航 + +### 4.3 国际化支持 +- 使用 `locale` 插件实现多语言 +- 支持中文等语言切换 +- 统一的国际化消息管理 + +### 4.4 BizContainer 封装模式 +项目采用了独特的 [BizContainer](file://D:\xinfaleisheng\ERPTurbo_Admin\packages\app-operation\src\components\Biz\BizContainer.tsx#L47-L946) 组件封装业务逻辑: +- 统一封装增删改查操作 +- 支持列表、详情、创建、更新、删除等标准操作 +- 集成导入导出、树形结构、日历视图等功能 +- 内置权限验证和操作引导 + +## 5. 样式和主题 + +### 5.1 样式解决方案 +- **TailwindCSS**:实用优先的 CSS 框架 +- **Ant Design 主题定制**:通过配置 token 自定义主题 +- **styled-components**:CSS-in-JS 解决方案 + +### 5.2 响应式设计 +- 支持移动端适配 +- 响应式布局组件 +- 可折叠侧边栏 + +## 6. 数据交互 + +### 6.1 API 请求 +- 使用 UmiJS 的 [request](file://D:\xinfaleisheng\ERPTurbo_Admin\shared\components\src\UploadMaterial\index.tsx#L11-L11) 插件统一管理 HTTP 请求 +- 全局错误处理和拦截器 +- 请求和响应拦截器支持 +- 与后端服务集成 + +### 6.2 数据模拟和调试 +- 集成 Swagger UI 文档 +- 支持 OpenAPI 规范自动生成服务层代码 + +## 7. 开发规范 + +### 7.1 代码风格 +- 使用 Prettier 统一代码格式 +- ESLint 进行代码质量检查 +- Git Hooks 保证提交代码质量 + +### 7.2 组件开发规范 +- 组件封装遵循单一职责原则 +- 使用 TypeScript 强类型约束 +- 统一的组件接口设计 + +## 8. 部署和构建 + +### 8.1 构建命令 +``` +# 开发环境启动 +pnpm dev + +# 生产环境构建 +pnpm build + +# 代码格式化 +pnpm format +``` + + +### 8.2 构建优化 +- 使用 MFSU (Module Federation Speed Up) 提升编译速度 +- 支持代码分割和懒加载 +- 静态资源压缩和优化 + +## 9. 项目扩展性考虑 + +1. **插件化架构**:UmiJS 插件机制便于功能扩展 +2. **组件复用**:共享组件库提升开发效率 +3. **微前端支持**:可扩展至微前端架构 +4. **多应用管理**:Monorepo 结构便于多系统协同开发 + + diff --git a/packages/app-operation/src/components/BasicData/BoxBrandList.tsx b/packages/app-operation/src/components/BasicData/BoxBrandList.tsx index c4fb88a..d0494a2 100644 --- a/packages/app-operation/src/components/BasicData/BoxBrandList.tsx +++ b/packages/app-operation/src/components/BasicData/BoxBrandList.tsx @@ -26,6 +26,7 @@ interface IBoxBrandListProps { mode?: ModeType; trigger?: () => React.ReactNode; onSelect?: (value: BusinessAPI.BoxBrandVO) => void; + brandType?: BusinessAPI.BoxBrandVO['type'] | 'ALL'; } export default function BoxBrandList(props: IBoxBrandListProps) { const { @@ -36,12 +37,21 @@ export default function BoxBrandList(props: IBoxBrandListProps) { trigger, onValueChange, onSelect, + brandType = 'ALL', } = props; const intl = useIntl(); const intlPrefix = 'boxBrand'; const actionRef = useRef(); const columns: ProColumns[] = [ + { + title: intl.formatMessage({ id: intlPrefix + '.column.image' }), + dataIndex: 'image', + key: 'image', + render: (_, boxBrand) => ( + {boxBrand.name} + ), + }, { title: intl.formatMessage({ id: intlPrefix + '.column.name' }), dataIndex: 'name', @@ -67,6 +77,7 @@ export default function BoxBrandList(props: IBoxBrandListProps) { }; const formContext = [ +