--- trigger: manual --- # ERPTurbo_Client 项目概述文档 ## 项目简介 ERPTurbo_Client 是一个基于 Taro 框架开发的企业级ERP客户端应用,主要用于采购管理和发货管理等业务流程。该项目采用多端统一开发模式,可以同时支持微信小程序等多个平台。 ## 技术栈 - **框架**: Taro v4.x (React-like) - **语言**: TypeScript - **状态管理**: Zustand - **构建工具**: Webpack - **包管理**: pnpm - **UI框架**: nutui 3.0.18 - **CSS预处理器**: Sass - **代码规范**: ESLint + Prettier ## 项目结构 ``` packages/app-client/ ├── config/ # 构建配置文件 ├── src/ # 源码目录 │ ├── components/ # 公共组件 │ ├── pages/ # 页面组件 │ ├── services/ # 接口服务 │ ├── store/ # 状态管理 │ ├── utils/ # 工具函数 │ ├── constant/ # 常量定义 │ ├── types/ # 类型定义 │ └── app.config.ts # 应用配置 ├── __tests__/ # 测试文件 └── package.json # 项目依赖配置 ``` ### 核心目录详解 #### src/pages 页面目录 包含应用的所有页面,按业务模块划分: - `main/`: 主页模块(工作台、菜单、消息、个人中心) - `public/`: 公共页面(登录、相机、OCR识别等) - `purchase/`: 采购相关页面(创建、审核、审批等) - `delivery/`: 发货相关页面(发货单列表、详情等) #### src/components 组件目录 包含各种可复用组件: - `biz/`: 通用业务组件 - `purchase/`: 采购专用组件 - `dealer/`: 经销商相关组件 - `supplier/`: 供应商相关组件 - `icon/`: 图标组件 #### src/services 接口服务 封装了所有后端API调用: - `auth/`: 认证授权相关接口 - `business/`: 业务相关接口 #### src/store 状态管理 使用 zustand 进行状态管理: - `user-store.ts`: 用户相关信息存储 - `global-store.ts`: 全局状态存储 #### src/utils 工具函数 包含各种通用工具函数: - `format.ts`: 格式化工具(日期、金额等) - `calculateSupplierWeights.ts`: 供应商权重计算 - `calcutePurchaseOrder.ts`: 采购单相关计算逻辑 ## 核心业务流程 ### 采购流程 1. **采购员**创建采购单 - 填写供应商信息 - 录入商品明细 - 设置价格和重量 2. **审核员**进行报价审核 - 查看采购单详情 - 审核价格合理性 3. **审批员**进行最终审批 - 查看审核结果 - 决定是否批准采购 ### 发货流程 1. 创建发货单 2. 填写发货明细 3. 确认发货信息 4. 完成发货操作 ## 编码规范 ### 金额计算规范 由于JavaScript浮点数精度问题,项目中所有的金额计算都应遵循以下规范: - 使用 `lodash-es` 的 `multiply`/`divide` 等方法进行数学运算 - 所有金额保留两位小数,使用 `toFixed(2)` 方法格式化 ### 组件开发规范 1. **组件分类** - `biz/`: 通用业务组件(如状态标签、导航栏等跨模块复用的业务组件) - `purchase/`: 采购模块专用组件(仅限采购相关业务使用) - `dealer/`: 经销商相关组件(经销商选择器、账户选择器等) - `supplier/`: 供应商相关组件(供应商选择器等) - `icon/`: 图标组件(统一管理项目中使用的图标) 2. **组件设计原则** - 组件应该是无状态或受控的(尽可能使用受控组件) - 组件应该具有清晰的输入(props)和输出(回调函数) - 组件应该具有良好的封装性,避免暴露内部实现细节 - 组件应该具有良好的可复用性,避免与具体业务逻辑强耦合 - 组件应该具有良好的扩展性,方便后续功能增强 3. **组件实现规范** - 使用 TypeScript 编写组件,明确定义 props 和 state 类型 - 使用函数组件和 Hooks,避免使用 class 组件 - 组件文件名使用大驼峰命名法(PascalCase),如 `OrderList.tsx` - 组件导出应包含默认导出和必要的类型导出 - 组件内部状态管理应使用 useState、useReducer 等 React Hooks - 组件应提供清晰的文档注释,说明组件用途、props 说明等 4. **组件接口规范** - 组件 props 应该有明确的类型定义 - 组件事件回调函数应该以 on 开头,如 `onChange`、`onSubmit` - 组件应该支持 ref 转发(如果需要) - 组件应该支持 className 和 style 属性用于样式定制 5. **组件样式规范** - 使用 Tailwind CSS 进行样式开发 - 避免使用内联样式 - 组件样式应该具有良好的隔离性,避免样式污染 - 组件应该支持主题定制 ### 目录命名规范 - 类型定义:`src/types/[模块名]/` - 接口定义:`src/api/[模块名]/` - 公共组件:`src/components/[模块名]/` - 工具方法:`src/utils/[模块名]/` ## 开发环境搭建 1. 安装 Node.js (建议版本 14+) 2. 安装 pnpm: `npm install -g pnpm` 3. 安装依赖: `pnpm install` 4. 启动开发服务器: `pnpm run dev:weapp` ## 构建部署 - 微信小程序: `pnpm run build:weapp` - H5: `pnpm run build:h5` - 其他平台: 查看 package.json 中的 scripts 配置 ## 测试 运行测试: `pnpm run test` ## 代码质量保证 - 代码格式化: `pnpm run format` - 代码检查: `pnpm run lint` - Git钩子自动检查: 使用 husky 和 lint-staged