ebd955de97
- 将 PurchaseOrderVO 替换为 OrderVO 数据模型 - 重命名相关组件名称，如 PurchaseOrderRejectFinal 为 OrderRejectFinal - 更新 API 调用从 purchaseOrder 命名空间迁移到 order 命名空间 - 调整组件样式以符合新的设计规范 - 添加 classnames 依赖用于动态类名处理 - 优化列表项的点击交互和导航逻辑
174 lines
5.4 KiB
Markdown
174 lines
5.4 KiB
Markdown
---
|
||
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`: 供应商权重计算
|
||
- `calcuteOrder.ts`: 采购单相关计算逻辑
|
||
|
||
## 核心业务流程
|
||
|
||
### 采购流程
|
||
|
||
1. **采购员**创建采购单
|
||
- 填写供应商信息
|
||
- 录入商品明细
|
||
- 设置价格和重量
|
||
|
||
2. **审核员**进行报价审核
|
||
- 查看采购单详情
|
||
- 审核价格合理性
|
||
|
||
3. **审批员**进行最终审批
|
||
- 查看审核结果
|
||
- 决定是否批准采购
|
||
|
||
### 发货流程
|
||
|
||
1. 创建发货单
|
||
2. 填写发货明细
|
||
3. 确认发货信息
|
||
4. 完成发货操作
|
||
|
||
## 编码规范
|
||
|
||
### 金额计算规范
|
||
|
||
由于JavaScript浮点数精度问题，项目中所有的金额计算都应遵循以下规范：
|
||
- 使用 `lodash` 的 `multiply`/`divide` 等方法进行数学运算
|
||
|
||
### 组件开发规范
|
||
|
||
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
|