1463 lines
44 KiB
Markdown
1463 lines
44 KiB
Markdown
# 微信小程序H5审批系统 - 概要设计文档
|
||
|
||
## 1. 项目概述
|
||
|
||
### 1.1 项目背景
|
||
开发一个运行在微信小程序WebView中的H5应用，主要用于处理审批流程，包括列表查看、详情展示和审批操作。
|
||
|
||
### 1.2 项目目标
|
||
- 提供流畅的审批流程体验
|
||
- 适配微信小程序WebView环境
|
||
- 支持移动端友好的界面设计
|
||
- 高效的接口调用和数据展示
|
||
|
||
## 2. 技术架构
|
||
|
||
### 2.1 技术栈选择
|
||
- **前端框架**: Vue 3 + TypeScript
|
||
- **构建工具**: Vite
|
||
- **UI组件库**: Vant 4 (专为移动端设计)
|
||
- **HTTP客户端**: Axios
|
||
- **路由管理**: Vue Router 4
|
||
- **状态管理**: Pinia
|
||
- **样式预处理器**: SCSS
|
||
|
||
### 2.2 项目结构
|
||
```
|
||
oms_h5/
|
||
├── public/
|
||
│ └── index.html
|
||
├── src/
|
||
│ ├── api/ # API接口管理
|
||
│ ├── components/ # 公共组件
|
||
│ ├── views/ # 页面组件
|
||
│ │ ├── List/ # 列表页面
|
||
│ │ └── Detail/ # 详情页面
|
||
│ ├── store/ # 状态管理
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── types/ # TypeScript类型定义
|
||
│ └── styles/ # 全局样式
|
||
├── package.json
|
||
└── vite.config.ts
|
||
```
|
||
|
||
## 3. 功能模块设计
|
||
|
||
### 3.1 列表页面模块
|
||
**功能描述**: 采用双Tab设计，支持查看待审批和已审批两种状态的订单列表
|
||
|
||
**页面架构**:
|
||
- **Tab1 - 待审批**: 展示当前用户需要审批的订单列表
|
||
- **Tab2 - 已审批**: 展示用户已完成审批的历史记录
|
||
|
||
**主要功能**:
|
||
- 双Tab切换界面，独立状态管理
|
||
- 支持关键词搜索（待审批：订单编号、客户名称；已审批：合同名称）
|
||
- 无限滚动分页加载
|
||
- 下拉刷新功能
|
||
- 点击跳转详情页（已审批为只读模式）
|
||
|
||
#### 3.1.1 待审批Tab
|
||
|
||
**数据展示字段**:
|
||
- 订单编号（orderCode）
|
||
- 项目名称（projectName）
|
||
- 客户名称（customerName）
|
||
- 订单金额（shipmentAmount）
|
||
- 创建时间（createTime）
|
||
- 订单状态（固定显示"待审批"）
|
||
|
||
**交互行为**:
|
||
- 搜索框支持订单编号、客户名称搜索
|
||
- 列表项点击跳转详情页（可审批操作）
|
||
- 上拉加载更多，下拉刷新
|
||
|
||
#### 3.1.2 已审批Tab
|
||
|
||
**数据展示字段**:
|
||
- 合同编号（businessKey）
|
||
- 合同名称（businessName）
|
||
- 流程名称（processName）
|
||
- 发起人（applyUserName）
|
||
- 审批时间（approveTime）
|
||
- 审批状态（approveStatus: 2-驳回，3-通过，其他-提交）
|
||
- 审批意见（approveOpinion）
|
||
|
||
**交互行为**:
|
||
- 搜索框支持合同名称搜索
|
||
- 列表项点击跳转详情页（只读模式，无审批按钮）
|
||
- Tab切换时自动清空搜索关键词
|
||
- 上拉加载更多，下拉刷新
|
||
|
||
**接口需求**:
|
||
```typescript
|
||
// 获取待审批订单列表
|
||
POST /project/order/list
|
||
参数: {
|
||
approve: "approve",
|
||
page: number,
|
||
pageSize: number,
|
||
keyword?: string
|
||
}
|
||
|
||
// 获取已审批列表
|
||
POST /flow/completed/list
|
||
参数: {
|
||
page: number,
|
||
pageSize: number,
|
||
businessName?: string
|
||
}
|
||
响应结果示例:{
|
||
"total": 1,
|
||
"rows": [
|
||
{
|
||
"createBy": "1",
|
||
"createTime": "2025-05-30",
|
||
"updateBy": "1",
|
||
"updateTime": "2025-08-25 16:52:35",
|
||
"remark": "",
|
||
"id": 92,
|
||
"projectId": 92,
|
||
"projectCode": "V004592",
|
||
"projectName": "黑龙江省佳木斯附属第一医院2点胖终端云桌面项目",
|
||
"versionCode": "2",
|
||
"industryType": "zf",
|
||
"bgProperty": "SY",
|
||
"province": "黑龙江省",
|
||
"orderCode": "ZGXS-20250530HLJ001-VDI",
|
||
"customerName": "佳木斯大学附属第一医院",
|
||
"customerCode": "CU-HLJ-0002",
|
||
"customerPhone": "13352549898",
|
||
"customerUserName": "刘芸芸1111",
|
||
"shipmentAmount": 754169.99,
|
||
"orderStatus": "1",
|
||
"duty": "1",
|
||
"dutyName": "SIP管理员",
|
||
"agentName": "北京",
|
||
"agentCode": "BJS",
|
||
"notifier": "",
|
||
"city": "",
|
||
"businessPerson": "严浩",
|
||
"businessEmail": "",
|
||
"deleteFileId": null,
|
||
"businessPhone": "13512345457",
|
||
"currencyType": "rmb",
|
||
"partnerCode": "AGT-HLJ-0001",
|
||
"partnerName": "哈尔滨惠普天地电子有限公司",
|
||
"projectPartnerName": "哈尔滨惠普天地电子有限公司",
|
||
"productCodeList": null,
|
||
"actualPurchaseAmount": 777314.52,
|
||
"deliveryTime": "2025-06-04",
|
||
"deliveryTimeStart": null,
|
||
"deliveryTimeEnd": null,
|
||
"estimatedOrderTime": "2025-05-30",
|
||
"estimatedOrderTimeStart": null,
|
||
"estimatedOrderTimeEnd": null,
|
||
"orderEndTime": "2025-08-23",
|
||
"orderEndTimeStart": null,
|
||
"orderEndTimeEnd": null,
|
||
"updateTimeStart": null,
|
||
"updateTimeEnd": null,
|
||
"productSn": null,
|
||
"companyDelivery": "",
|
||
"notifierEmail": "",
|
||
"notifierPhone": "232",
|
||
"notifierAddress": "江西省南昌市高新区艾溪湖北路88号恒大中心A座1209室",
|
||
"dutyEmail": "mula.liu@163.com",
|
||
"dutyPhone": "18980500203",
|
||
"orderChannel": "1",
|
||
"partnerEmail": "",
|
||
"partnerUserName": "张树志",
|
||
"partnerPhone": "13936302299",
|
||
"systemUserId": "101",
|
||
"level": "02",
|
||
"processType": "0",
|
||
"processTemplate": "0",
|
||
"deliveryStatus": "1",
|
||
"signStatus": "0",
|
||
"outerStatus": "2",
|
||
"approveTime": "2025-08-19 16:46:26",
|
||
"approveTimeStart": null,
|
||
"approveTimeEnd": null,
|
||
"discountFold": 0.985,
|
||
"supplier": "紫光汇智信息技术有限公司",
|
||
"approve": null,
|
||
"contractFileList": null,
|
||
"configFileList": null,
|
||
"contractTableData": null,
|
||
"softwareProjectProductInfoList": null,
|
||
"hardwareProjectProductInfoList": null,
|
||
"maintenanceProjectProductInfoList": null
|
||
}
|
||
],
|
||
"code": 0,
|
||
"msg": null
|
||
}
|
||
```
|
||
|
||
### 3.2 详情页面模块
|
||
**功能描述**: 展示工单详细信息和审批操作
|
||
|
||
**主要功能**:
|
||
- 工单详情信息展示
|
||
- 审批历史记录
|
||
- 附件预览（图片、文档）
|
||
- 审批操作按钮
|
||
|
||
**接口需求**:
|
||
```typescript
|
||
//获取已审批列表
|
||
POST /flow/completed/list
|
||
响应结果示例：{
|
||
"code": 0,
|
||
"msg": null,
|
||
"rows": [
|
||
{
|
||
"allApproveUserName": "chenhao",
|
||
"applyTime": "2025-09-19 17:06",
|
||
"applyUserName": "chenhao",
|
||
"approveOpinion": "经审查无误，予以批准",
|
||
"approveStatus": 3,
|
||
"approveTime": "2025-09-19 17:07",
|
||
"approveUser": "101",
|
||
"approveUserName": "chenhao",
|
||
"businessId": 257,
|
||
"businessKey": "ZGXV-20250919BJS001",
|
||
"businessName": "测试-重庆xx学校云桌面项目",
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"extendField1": "1",
|
||
"extendField2": null,
|
||
"formKey": null,
|
||
"id": null,
|
||
"nextAllApproveUserName": "chenhao",
|
||
"processInstanceId": "58ce6889-9536-11f0-8f98-00ff08deec4d",
|
||
"processKey": "order_approve_online",
|
||
"processName": "订单审批流程",
|
||
"recoveryType": null,
|
||
"remark": null,
|
||
"roleName": "商务,鼎盛",
|
||
"taskId": "fb6c16dd-9537-11f0-8f98-00ff08deec4d",
|
||
"taskName": "领导1",
|
||
"taxRateData": null,
|
||
"todoId": "1968965000342323200",
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"variables": null
|
||
}
|
||
]}
|
||
//获取工单详情
|
||
GET /project/order/h5/approve/:id
|
||
响应结果示例:{
|
||
"msg": "操作成功",
|
||
"code": 0,
|
||
"data": {
|
||
"todo": null,
|
||
"approveLog": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": null,
|
||
"todoId": "1959901714317623296",
|
||
"businessKey": "ZGXS-20250530HLJ001-VDI",
|
||
"processKey": "order_approve_online",
|
||
"processName": "订单审批流程",
|
||
"taskName": "售前",
|
||
"approveUserName": "SIP管理员",
|
||
"allApproveUserName": "SIP管理员",
|
||
"nextAllApproveUserName": "yeyuhao",
|
||
"approveUser": "1",
|
||
"applyUserName": "SIP管理员",
|
||
"applyTime": "2025-08-25 16:52",
|
||
"extendField1": "2",
|
||
"extendField2": null,
|
||
"taskId": "d9112b0c-8190-11f0-9558-00ff5af4ad6e",
|
||
"processInstanceId": "d9073ff2-8190-11f0-9558-00ff5af4ad6e",
|
||
"approveOpinion": null,
|
||
"approveStatus": null,
|
||
"approveTime": "2025-08-25 16:52",
|
||
"formKey": null,
|
||
"roleName": "超级管理员,鼎盛",
|
||
"recoveryType": null,
|
||
"variables": null
|
||
}
|
||
],
|
||
"projectOrderInfo": {
|
||
"createBy": "1",
|
||
"createTime": "2025-05-30",
|
||
"updateBy": "1",
|
||
"updateTime": "2025-08-25 16:52:35",
|
||
"remark": "",
|
||
"id": 92,
|
||
"projectId": 92,
|
||
"projectCode": "V004592",
|
||
"projectName": "黑龙江省佳木斯附属第一医院2点胖终端云桌面项目",
|
||
"versionCode": "2",
|
||
"industryType": "zf",
|
||
"bgProperty": "SY",
|
||
"province": "黑龙江省",
|
||
"orderCode": "ZGXS-20250530HLJ001-VDI",
|
||
"customerName": "佳木斯大学附属第一医院",
|
||
"customerCode": "CU-HLJ-0002",
|
||
"customerPhone": "13352549898",
|
||
"customerUserName": "刘芸芸1111",
|
||
"shipmentAmount": 754169.99,
|
||
"orderStatus": "1",
|
||
"duty": "1",
|
||
"dutyName": "SIP管理员",
|
||
"agentName": "北京",
|
||
"agentCode": "BJS",
|
||
"notifier": "",
|
||
"city": "",
|
||
"businessPerson": "严浩",
|
||
"businessEmail": "",
|
||
"deleteFileId": null,
|
||
"businessPhone": "13512345457",
|
||
"currencyType": "rmb",
|
||
"partnerCode": "AGT-HLJ-0001",
|
||
"partnerName": "哈尔滨惠普天地电子有限公司",
|
||
"projectPartnerName": "哈尔滨惠普天地电子有限公司",
|
||
"productCodeList": null,
|
||
"actualPurchaseAmount": 777314.52,
|
||
"deliveryTime": "2025-06-04",
|
||
"deliveryTimeStart": null,
|
||
"deliveryTimeEnd": null,
|
||
"estimatedOrderTime": "2025-05-30",
|
||
"estimatedOrderTimeStart": null,
|
||
"estimatedOrderTimeEnd": null,
|
||
"orderEndTime": "2025-08-23",
|
||
"orderEndTimeStart": null,
|
||
"orderEndTimeEnd": null,
|
||
"updateTimeStart": null,
|
||
"updateTimeEnd": null,
|
||
"productSn": null,
|
||
"companyDelivery": "",
|
||
"notifierEmail": "",
|
||
"notifierPhone": "232",
|
||
"notifierAddress": "江西省南昌市高新区艾溪湖北路88号恒大中心A座1209室",
|
||
"dutyEmail": "mula.liu@163.com",
|
||
"dutyPhone": "18980500203",
|
||
"orderChannel": "1",
|
||
"partnerEmail": "",
|
||
"partnerUserName": "张树志",
|
||
"partnerPhone": "13936302299",
|
||
"systemUserId": "101",
|
||
"level": "02",
|
||
"processType": "0",
|
||
"processTemplate": "0",
|
||
"deliveryStatus": "1",
|
||
"signStatus": "0",
|
||
"outerStatus": "2",
|
||
"approveTime": "2025-08-19 16:46:26",
|
||
"approveTimeStart": null,
|
||
"approveTimeEnd": null,
|
||
"discountFold": 0.985,
|
||
"supplier": "紫光汇智信息技术有限公司",
|
||
"approve": null,
|
||
"contractFileList": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 27,
|
||
"orderId": 92,
|
||
"fileName": "AGT-AHS-0001.jpg",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-15",
|
||
"filePath": "/profile/2025/07/15/AGT-AHS-0001_20250715162608A004.jpg",
|
||
"fileType": "2",
|
||
"fileSort": "1",
|
||
"fileVersionCode": "2"
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 28,
|
||
"orderId": 92,
|
||
"fileName": "微信图片_2025-07-08_102450_731.png",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-15",
|
||
"filePath": "/profile/2025/07/15/微信图片_2025-07-08_102450_731_20250715163137A005.png",
|
||
"fileType": "2",
|
||
"fileSort": "3",
|
||
"fileVersionCode": "2"
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 30,
|
||
"orderId": 92,
|
||
"fileName": "AGT-AHS-0001 (4) (1).jpg",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-17",
|
||
"filePath": "/profile/2025/07/17/AGT-AHS-0001 (4) (1)_20250717145740A001.jpg",
|
||
"fileType": "2",
|
||
"fileSort": "0",
|
||
"fileVersionCode": "2"
|
||
}
|
||
],
|
||
"configFileList": null,
|
||
"contractTableData": {
|
||
"2": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 30,
|
||
"orderId": 92,
|
||
"fileName": "AGT-AHS-0001 (4) (1).jpg",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-17",
|
||
"filePath": "/profile/2025/07/17/AGT-AHS-0001 (4) (1)_20250717145740A001.jpg",
|
||
"fileType": "2",
|
||
"fileSort": "0",
|
||
"fileVersionCode": "2"
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 27,
|
||
"orderId": 92,
|
||
"fileName": "AGT-AHS-0001.jpg",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-15",
|
||
"filePath": "/profile/2025/07/15/AGT-AHS-0001_20250715162608A004.jpg",
|
||
"fileType": "2",
|
||
"fileSort": "1",
|
||
"fileVersionCode": "2"
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": -1,
|
||
"orderId": null,
|
||
"fileName": "（请上传现金折扣审批邮件信息）.pdf/.jpg/.png",
|
||
"uploadUser": null,
|
||
"uploadUserName": null,
|
||
"uploadTime": null,
|
||
"filePath": null,
|
||
"fileType": null,
|
||
"fileSort": "2",
|
||
"fileVersionCode": null
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"id": 28,
|
||
"orderId": 92,
|
||
"fileName": "微信图片_2025-07-08_102450_731.png",
|
||
"uploadUser": "101",
|
||
"uploadUserName": "chenhao",
|
||
"uploadTime": "2025-07-15",
|
||
"filePath": "/profile/2025/07/15/微信图片_2025-07-08_102450_731_20250715163137A005.png",
|
||
"fileType": "2",
|
||
"fileSort": "3",
|
||
"fileVersionCode": "2"
|
||
}
|
||
]
|
||
},
|
||
"softwareProjectProductInfoList": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": "",
|
||
"id": 515,
|
||
"projectId": 92,
|
||
"productBomCode": "3130A4N9",
|
||
"productName": "VDI-ONEStor",
|
||
"model": "VDI-ONEStor-upgrade",
|
||
"productCode": null,
|
||
"productDesc": "H3C VDI云桌面分布式存储软件(VDI-ONEStor)-块存储标准版升级企业版License-管理2个物理CPU",
|
||
"quantity": 5,
|
||
"cataloguePrice": 62500.00,
|
||
"catalogueAllPrice": 312500.00,
|
||
"price": 53756.53,
|
||
"allPrice": 268782.65,
|
||
"allPriceDisCount": null,
|
||
"guidanceDiscount": 0.0800,
|
||
"vendorCode": "P001",
|
||
"discount": 0.8601,
|
||
"type": "1",
|
||
"value": ""
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": "",
|
||
"id": 516,
|
||
"projectId": 92,
|
||
"productBomCode": "3130A4N9",
|
||
"productName": "VDI-ONEStor",
|
||
"model": "VDI-ONEStor-upgrade",
|
||
"productCode": null,
|
||
"productDesc": "H3C VDI云桌面分布式存储软件(VDI-ONEStor)-块存储标准版升级企业版License-管理2个物理CPU",
|
||
"quantity": 10,
|
||
"cataloguePrice": 62500.00,
|
||
"catalogueAllPrice": 625000.00,
|
||
"price": 47783.58,
|
||
"allPrice": 477835.80,
|
||
"allPriceDisCount": null,
|
||
"guidanceDiscount": 0.0800,
|
||
"vendorCode": "P001",
|
||
"discount": 0.7645,
|
||
"type": "1",
|
||
"value": ""
|
||
}
|
||
],
|
||
"hardwareProjectProductInfoList": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": "",
|
||
"id": 233,
|
||
"projectId": 92,
|
||
"productBomCode": "9801A5KA",
|
||
"productName": "胖终端x86一体机",
|
||
"model": "C6530V-38-G2",
|
||
"productCode": "9801H0BA",
|
||
"productDesc": "H3C C6530V G2 云终端一体机-Intel 6核 2.5GHz/8GB DDR4/256GB SSD/4*USB3.0/2*USB2.0/1*HDMI/23.8寸/1000M/Wi-Fi",
|
||
"quantity": 2,
|
||
"cataloguePrice": 39500.00,
|
||
"catalogueAllPrice": 79000.00,
|
||
"price": 3774.90,
|
||
"allPrice": 7549.80,
|
||
"allPriceDisCount": null,
|
||
"guidanceDiscount": 0.1000,
|
||
"vendorCode": "P001",
|
||
"discount": 0.0956,
|
||
"type": "2",
|
||
"value": null
|
||
}
|
||
],
|
||
"maintenanceProjectProductInfoList": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": "",
|
||
"id": 518,
|
||
"projectId": 92,
|
||
"productBomCode": "8813A3YB",
|
||
"productName": "现场维保-3Y",
|
||
"model": "SV-MA-SFT-3Y",
|
||
"productCode": null,
|
||
"productDesc": "H3C 软件技术支持服务（三年）",
|
||
"quantity": 2,
|
||
"cataloguePrice": 1.00,
|
||
"catalogueAllPrice": 2.00,
|
||
"price": 0.87,
|
||
"allPrice": 1.74,
|
||
"allPriceDisCount": null,
|
||
"guidanceDiscount": 0.3000,
|
||
"vendorCode": null,
|
||
"discount": 0.8700,
|
||
"type": "11",
|
||
"value": "3"
|
||
}
|
||
]
|
||
},
|
||
"user": {
|
||
"createBy": "admin",
|
||
"createTime": "2025-04-10 15:57:30",
|
||
"updateBy": "",
|
||
"updateTime": "2025-08-20 09:05:21",
|
||
"remark": "管理员",
|
||
"userId": 1,
|
||
"userIdList": null,
|
||
"deptId": 103,
|
||
"parentId": null,
|
||
"roleId": null,
|
||
"loginName": "admin",
|
||
"userName": "SIP管理员",
|
||
"userType": "00",
|
||
"email": "mula.liu@163.com",
|
||
"phonenumber": "18980500203",
|
||
"sex": "0",
|
||
"avatar": "/profile/avatar/2025/04/11/blob_20250411032004A001.png",
|
||
"status": "0",
|
||
"delFlag": "0",
|
||
"loginIp": "127.0.0.1",
|
||
"loginDate": "2025-08-20 09:05:21",
|
||
"pwdUpdateDate": "2025-04-11 14:54:45",
|
||
"dept": {
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"deptId": 103,
|
||
"parentId": 101,
|
||
"ancestors": "0,100,101",
|
||
"deptName": "软件开发事业部",
|
||
"orderNum": 1,
|
||
"leader": "",
|
||
"phone": null,
|
||
"email": null,
|
||
"status": "0",
|
||
"delFlag": null,
|
||
"parentName": null
|
||
},
|
||
"roles": [
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"roleId": 1,
|
||
"roleName": "超级管理员",
|
||
"roleKey": "admin",
|
||
"roleSort": "1",
|
||
"dataScope": "1",
|
||
"status": "0",
|
||
"delFlag": null,
|
||
"flag": false,
|
||
"menuIds": null,
|
||
"deptIds": null,
|
||
"permissions": null,
|
||
"admin": true
|
||
},
|
||
{
|
||
"createBy": null,
|
||
"createTime": null,
|
||
"updateBy": null,
|
||
"updateTime": null,
|
||
"remark": null,
|
||
"roleId": 104,
|
||
"roleName": "鼎盛",
|
||
"roleKey": "ds",
|
||
"roleSort": "1",
|
||
"dataScope": "1",
|
||
"status": "0",
|
||
"delFlag": null,
|
||
"flag": false,
|
||
"menuIds": null,
|
||
"deptIds": null,
|
||
"permissions": [],
|
||
"admin": false
|
||
}
|
||
],
|
||
"roleIds": null,
|
||
"postIds": null,
|
||
"admin": true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3.3 审批操作模块
|
||
**功能描述**: 处理审批通过、拒绝等操作
|
||
|
||
**主要功能**:
|
||
- 审批意见输入
|
||
- 审批结果提交
|
||
- 操作结果反馈
|
||
|
||
**接口需求**:
|
||
```typescript
|
||
// 提交审批结果
|
||
//审批
|
||
POST /project/order/order/approve
|
||
参数:{
|
||
allApproveUserName?: string;
|
||
/**
|
||
* 发起时间
|
||
*/
|
||
applyTime?: string;
|
||
/**
|
||
* 发起人姓名
|
||
*/
|
||
applyUserName?: string;
|
||
/**
|
||
* 审批意见
|
||
*/
|
||
approveOpinion?: string;
|
||
/**
|
||
* 审批结果 3 通过 2 驳回 1待审批
|
||
*/
|
||
approveStatus?: number;
|
||
approveTime?: string;
|
||
approveUser?: string;
|
||
/**
|
||
* 审批人姓名
|
||
*/
|
||
approveUserName?: string;
|
||
/**
|
||
* 业务主键
|
||
*/
|
||
businessKey?: string;
|
||
/**
|
||
* 创建者
|
||
*/
|
||
createBy?: string;
|
||
/**
|
||
* 创建时间
|
||
*/
|
||
createTime?: string;
|
||
/**
|
||
* 扩展字段1
|
||
*/
|
||
extendField1?: string;
|
||
/**
|
||
* 扩展字段2
|
||
*/
|
||
extendField2?: string;
|
||
formKey?: string;
|
||
id?: number;
|
||
nextAllApproveUserName?: string;
|
||
processInstanceId?: string;
|
||
/**
|
||
* 流程key
|
||
*/
|
||
processKey?: string;
|
||
/**
|
||
* 流程名称
|
||
*/
|
||
processName?: string;
|
||
recoveryType?: number;
|
||
/**
|
||
* 备注
|
||
*/
|
||
remark?: string;
|
||
roleName?: string;
|
||
taskId?: string;
|
||
/**
|
||
* 任务名称
|
||
*/
|
||
taskName?: string;
|
||
/**
|
||
* 流程id
|
||
*/
|
||
todoId?: string;
|
||
/**
|
||
* 更新者
|
||
*/
|
||
updateBy?: string;
|
||
/**
|
||
* 更新时间
|
||
*/
|
||
updateTime?: string;
|
||
[property: string]: any;
|
||
}
|
||
```
|
||
|
||
## 4. 微信小程序适配
|
||
|
||
### 4.1 WebView适配
|
||
- 设置viewport适配移动端
|
||
- 处理微信小程序的安全域名限制
|
||
- 适配微信小程序的返回机制
|
||
|
||
### 4.2 微信JS-SDK集成
|
||
- 配置微信JS-SDK
|
||
- 实现分享功能
|
||
- 处理网络状态监听
|
||
|
||
### 4.3 样式适配
|
||
- 响应式设计
|
||
- 安全区域适配（刘海屏等）
|
||
- 深色模式支持
|
||
|
||
## 5. 数据流设计
|
||
|
||
### 5.1 数据状态管理
|
||
```typescript
|
||
interface AppState {
|
||
user: UserInfo;
|
||
orderList: Order[];
|
||
currentOrder: Order | null;
|
||
loading: boolean;
|
||
}
|
||
```
|
||
|
||
### 5.2 API数据格式规范
|
||
```typescript
|
||
interface ApiResponse<T> {
|
||
code: number;
|
||
message: string;
|
||
data: T;
|
||
}
|
||
|
||
interface Order {
|
||
id: string;
|
||
title: string;
|
||
status: 'pending' | 'approved' | 'rejected';
|
||
createdAt: string;
|
||
applicant: string;
|
||
content: string;
|
||
attachments?: string[];
|
||
approvalHistory: ApprovalRecord[];
|
||
}
|
||
|
||
interface ApprovalRecord {
|
||
id: string;
|
||
approver: string;
|
||
action: 'approve' | 'reject';
|
||
comment: string;
|
||
createdAt: string;
|
||
}
|
||
```
|
||
|
||
## 6. 页面路由设计
|
||
|
||
```typescript
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
redirect: '/list'
|
||
},
|
||
{
|
||
path: '/list',
|
||
name: 'OrderList',
|
||
component: () => import('@/views/List/index.vue')
|
||
},
|
||
{
|
||
path: '/detail/:id',
|
||
name: 'OrderDetail',
|
||
component: () => import('@/views/Detail/index.vue')
|
||
}
|
||
]
|
||
```
|
||
|
||
## 7. 性能优化策略
|
||
|
||
### 7.1 代码层面
|
||
- 组件懒加载
|
||
- 图片懒加载
|
||
- API请求缓存
|
||
- 防抖和节流
|
||
|
||
### 7.2 构建优化
|
||
- 代码分割
|
||
- 资源压缩
|
||
- CDN部署
|
||
|
||
## 8. 安全考虑
|
||
|
||
### 8.1 数据安全
|
||
- HTTPS通信
|
||
- 接口鉴权
|
||
- 敏感信息加密
|
||
|
||
### 8.2 XSS防护
|
||
- 输入内容过滤
|
||
- CSP策略配置
|
||
|
||
## 9. 测试策略
|
||
|
||
### 9.1 单元测试
|
||
- 组件测试
|
||
- 工具函数测试
|
||
|
||
### 9.2 集成测试
|
||
- API接口测试
|
||
- 页面交互测试
|
||
|
||
### 9.3 兼容性测试
|
||
- 微信小程序WebView测试
|
||
- 不同设备适配测试
|
||
|
||
## 10. 部署方案
|
||
|
||
### 10.1 开发环境
|
||
- 本地开发服务器
|
||
- 热重载支持
|
||
|
||
### 10.2 生产环境
|
||
- 静态资源CDN部署
|
||
- 域名HTTPS配置
|
||
- 微信小程序业务域名配置
|
||
|
||
---
|
||
|
||
**文档版本**: v1.0
|
||
**创建时间**: 2025-08-27
|
||
**负责人**: 开发团队
|
||
|
||
## 4. 技术架构
|
||
|
||
### 4.1 技术栈选型
|
||
|
||
#### 4.1.1 前端技术栈
|
||
- **Vue 3.3.4**: 采用Composition API，提供更好的类型支持和逻辑复用
|
||
- **TypeScript**: 提供静态类型检查，提高代码质量和开发效率
|
||
- **Vite 4.4.9**: 现代化构建工具，提供快速的开发体验
|
||
- **Vue Router 4.2.4**: 单页应用路由管理
|
||
- **Pinia 2.1.6**: 轻量级状态管理库，替代Vuex
|
||
- **Vant 4.6.6**: 移动端UI组件库，适配微信小程序H5
|
||
- **Axios 1.5.0**: HTTP请求库，支持请求/响应拦截
|
||
- **Sass**: CSS预处理器，提供变量、嵌套等高级功能
|
||
|
||
#### 4.1.2 开发工具
|
||
- **ESLint**: 代码质量检查
|
||
- **Prettier**: 代码格式化
|
||
- **unplugin-auto-import**: 自动导入Vue、Router、Pinia等API
|
||
- **unplugin-vue-components**: 自动导入Vant组件
|
||
- **@vant/touch-emulator**: 桌面端触摸事件模拟
|
||
|
||
### 4.2 项目架构
|
||
|
||
#### 4.2.1 目录结构
|
||
```
|
||
src/
|
||
├── api/ # API接口层
|
||
│ ├── auth.ts # 认证相关接口
|
||
│ └── order.ts # 订单相关接口
|
||
├── router/ # 路由配置
|
||
├── store/ # 状态管理
|
||
│ ├── auth.ts # 认证状态
|
||
│ └── order.ts # 订单状态
|
||
├── types/ # TypeScript类型定义
|
||
├── utils/ # 工具函数
|
||
│ ├── http.ts # HTTP客户端封装
|
||
│ └── index.ts # 通用工具函数
|
||
├── views/ # 页面组件
|
||
│ ├── Login/ # 登录页
|
||
│ ├── List/ # 订单列表页
|
||
│ └── Detail/ # 订单详情页
|
||
└── styles/ # 全局样式
|
||
```
|
||
|
||
#### 4.2.2 架构设计原则
|
||
- **分层架构**: View层 → Store层 → API层 → 后端服务
|
||
- **组件化**: 页面拆分为可复用的组件
|
||
- **类型安全**: 全面使用TypeScript进行类型约束
|
||
- **响应式设计**: 适配不同屏幕尺寸
|
||
- **状态管理**: 集中管理应用状态，支持数据持久化
|
||
|
||
### 4.3 核心模块设计
|
||
|
||
#### 4.3.1 认证模块 (Auth)
|
||
**功能职责**:
|
||
- 用户登录/登出
|
||
- 认证状态管理
|
||
- 路由权限控制
|
||
- 会话持久化
|
||
|
||
**技术实现**:
|
||
- Session基于Cookie的认证机制
|
||
- localStorage存储认证状态
|
||
- 路由守卫实现权限控制
|
||
- 支持"记住密码"功能
|
||
|
||
**关键代码**:
|
||
```typescript
|
||
// 认证状态管理
|
||
interface AuthState {
|
||
token: string | null
|
||
userInfo: any | null
|
||
isAuthenticated: boolean
|
||
}
|
||
|
||
// 路由守卫
|
||
router.beforeEach((to, from, next) => {
|
||
const requiresAuth = to.matched.some(record => record.meta.requiresAuth !== false)
|
||
const authStore = useAuthStore(store)
|
||
const isAuthenticated = authStore.isAuthenticated || localStorage.getItem('isAuthenticated') === 'true'
|
||
|
||
if (requiresAuth && !isAuthenticated) {
|
||
next('/login')
|
||
} else {
|
||
next()
|
||
}
|
||
})
|
||
```
|
||
|
||
#### 4.3.2 订单管理模块 (Order)
|
||
**功能职责**:
|
||
- 双Tab订单列表管理（待审批/已审批）
|
||
- 订单详情获取
|
||
- 审批操作处理
|
||
- 数据状态管理
|
||
- 只读模式支持
|
||
|
||
**技术实现**:
|
||
- 双Tab架构，独立状态管理
|
||
- 无限滚动加载，支持分页
|
||
- 搜索功能（不同Tab对应不同搜索字段）
|
||
- 下拉刷新
|
||
- 数据缓存机制
|
||
- 路由参数控制只读模式
|
||
|
||
**关键特性**:
|
||
- **状态隔离**: 待审批和已审批列表状态完全独立
|
||
- **智能搜索**: 根据当前Tab自动切换搜索字段和接口
|
||
- **只读模式**: 通过URL参数`readonly=true`控制详情页只读
|
||
- **性能优化**: Tab切换时保持各自滚动位置和搜索状态
|
||
|
||
**数据模型**:
|
||
```typescript
|
||
interface Order {
|
||
id: number
|
||
projectCode: string
|
||
projectName: string
|
||
customerName: string
|
||
shipmentAmount: number
|
||
orderStatus: OrderStatus
|
||
// ... 其他字段
|
||
}
|
||
|
||
interface OrderDetailResponse {
|
||
projectOrderInfo: Order & {
|
||
contractFileList: AttachmentFile[]
|
||
softwareProjectProductInfoList: ProductInfo[]
|
||
hardwareProjectProductInfoList: ProductInfo[]
|
||
maintenanceProjectProductInfoList: ProductInfo[]
|
||
}
|
||
approveLog: ApprovalRecord[]
|
||
user: UserInfo
|
||
}
|
||
```
|
||
|
||
#### 4.3.3 HTTP客户端模块
|
||
**功能职责**:
|
||
- 统一HTTP请求封装
|
||
- 请求/响应拦截
|
||
- 错误处理
|
||
- 认证token自动添加
|
||
|
||
**技术实现**:
|
||
```typescript
|
||
class HttpClient {
|
||
private instance: AxiosInstance
|
||
|
||
constructor(baseURL: string = '/api') {
|
||
this.instance = axios.create({
|
||
baseURL,
|
||
timeout: 30000,
|
||
headers: {
|
||
'Content-Type': 'application/json;charset=UTF-8'
|
||
}
|
||
})
|
||
this.setupInterceptors()
|
||
}
|
||
|
||
private setupInterceptors() {
|
||
// 请求拦截器 - 添加token
|
||
this.instance.interceptors.request.use((config) => {
|
||
const token = localStorage.getItem('token')
|
||
if (token) {
|
||
config.headers.Authorization = `Bearer ${token}`
|
||
}
|
||
return config
|
||
})
|
||
|
||
// 响应拦截器 - 统一错误处理
|
||
this.instance.interceptors.response.use(
|
||
(response) => response,
|
||
(error) => {
|
||
// 401/302 重定向到登录页
|
||
if (error.response?.status === 401 || error.response?.status === 302) {
|
||
localStorage.removeItem('isAuthenticated')
|
||
window.location.href = '/login'
|
||
}
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4.4 微信小程序适配
|
||
|
||
#### 4.4.1 WebView环境检测
|
||
```javascript
|
||
// 微信小程序webview适配
|
||
if (window.__wxjs_environment === 'miniprogram') {
|
||
console.log('Running in WeChat MiniProgram WebView');
|
||
}
|
||
```
|
||
|
||
#### 4.4.2 移动端优化
|
||
- **触摸事件**: 使用@vant/touch-emulator在桌面端模拟触摸
|
||
- **视口设置**: 固定viewport，禁止缩放
|
||
- **防止双指缩放**: JavaScript阻止多点触控事件
|
||
|
||
```html
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
|
||
```
|
||
|
||
### 4.5 构建和部署
|
||
|
||
#### 4.5.1 开发环境配置
|
||
```javascript
|
||
// vite.config.ts
|
||
export default defineConfig({
|
||
server: {
|
||
host: '0.0.0.0',
|
||
port: 3000,
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:28080',
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(/^\/api/, '')
|
||
}
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
#### 4.5.2 环境变量配置
|
||
- **.env.development**: 开发环境配置
|
||
- **.env.production**: 生产环境配置
|
||
- **VITE_API_BASE_URL**: API服务地址
|
||
- **VITE_FILE_BASE_URL**: 文件服务地址
|
||
|
||
#### 4.5.3 构建优化
|
||
- **代码分割**: 按页面自动分割代码包
|
||
- **资源优化**: 静态资源版本化管理
|
||
- **TypeScript编译**: 严格类型检查
|
||
- **ES2015兼容**: 支持现代浏览器特性
|
||
|
||
## 5. 接口设计
|
||
|
||
### 5.1 认证接口
|
||
|
||
#### 5.1.1 用户登录
|
||
**接口地址**: `POST /login`
|
||
|
||
**请求参数**: FormData格式
|
||
```
|
||
username: string // 用户名
|
||
password: string // 密码
|
||
rememberMe: boolean // 记住密码
|
||
```
|
||
|
||
**响应格式**:
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"msg": "操作成功",
|
||
"data": {
|
||
"token": "jwt_token",
|
||
"userInfo": {...}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 5.2 订单接口
|
||
|
||
#### 5.2.1 获取订单列表
|
||
**接口地址**: `POST /project/order/list`
|
||
|
||
**请求参数**: FormData格式
|
||
```
|
||
approve: string // 固定值 "approve"
|
||
page: number // 页码
|
||
pageSize: number // 每页数量
|
||
keyword: string // 搜索关键词(可选)
|
||
```
|
||
|
||
**响应格式**:
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"msg": "操作成功",
|
||
"data": {
|
||
"total": 100,
|
||
"rows": [...]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 5.2.2 获取订单详情
|
||
**接口地址**: `GET /project/order/h5/approve/{id}`
|
||
|
||
**响应格式**:
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"msg": "操作成功",
|
||
"data": {
|
||
"projectOrderInfo": {...},
|
||
"approveLog": [...],
|
||
"user": {...}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 5.2.3 获取已审批列表
|
||
**接口地址**: `POST /flow/completed/list`
|
||
|
||
**请求参数**: FormData格式
|
||
```
|
||
page: number // 页码
|
||
pageSize: number // 每页数量
|
||
businessName: string // 合同名称搜索(可选)
|
||
```
|
||
|
||
**响应格式**:
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"msg": "操作成功",
|
||
"data": {
|
||
"total": 100,
|
||
"rows": [
|
||
{
|
||
"allApproveUserName": "chenhao",
|
||
"applyTime": "2025-09-19 17:06",
|
||
"applyUserName": "chenhao",
|
||
"approveOpinion": "经审查无误，予以批准",
|
||
"approveStatus": 3,
|
||
"approveTime": "2025-09-19 17:07",
|
||
"approveUser": "101",
|
||
"approveUserName": "chenhao",
|
||
"businessId": 257,
|
||
"businessKey": "ZGXV-20250919BJS001",
|
||
"businessName": "测试-重庆xx学校云桌面项目",
|
||
"processInstanceId": "58ce6889-9536-11f0-8f98-00ff08deec4d",
|
||
"processKey": "order_approve_online",
|
||
"processName": "订单审批流程",
|
||
"roleName": "商务,鼎盛",
|
||
"taskId": "fb6c16dd-9537-11f0-8f98-00ff08deec4d",
|
||
"taskName": "领导1",
|
||
"todoId": "1968965000342323200"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 5.2.4 提交审批结果
|
||
**接口地址**: `POST /project/order/order/approve`
|
||
|
||
**请求参数**: FormData格式，支持复杂对象序列化
|
||
```
|
||
// 基本参数
|
||
todoId: string
|
||
approveStatus: number // 1-待审批 2-驳回 3-通过
|
||
approveOpinion: string // 审批意见
|
||
|
||
// 变量参数 (动态)
|
||
variables[key]: value
|
||
|
||
// 税率数据 (数组对象)
|
||
taxRateData[0].field: value
|
||
```
|
||
|
||
## 6. 数据模型
|
||
|
||
### 6.1 核心实体
|
||
|
||
#### 6.1.1 订单实体 (Order)
|
||
```typescript
|
||
interface Order {
|
||
id: number // 订单ID
|
||
projectId: number // 项目ID
|
||
projectCode: string // 项目编码
|
||
projectName: string // 项目名称
|
||
customerName: string // 客户名称
|
||
customerCode: string // 客户编码
|
||
shipmentAmount: number // 发货金额
|
||
orderStatus: OrderStatus // 订单状态: '0'-待审批 '1'-已审批 '2'-已拒绝
|
||
createTime: string // 创建时间
|
||
updateTime: string // 更新时间
|
||
// ... 其他业务字段
|
||
}
|
||
```
|
||
|
||
#### 6.1.2 审批记录 (ApprovalRecord)
|
||
```typescript
|
||
interface ApprovalRecord {
|
||
id?: number // 记录ID
|
||
todoId: string // 待办事项ID
|
||
taskName: string // 任务名称
|
||
approveUserName: string // 审批人姓名
|
||
approveStatus?: ApprovalStatus // 审批状态: 1-待审批 2-驳回 3-通过
|
||
approveOpinion?: string // 审批意见
|
||
approveTime: string // 审批时间
|
||
roleName: string // 角色名称
|
||
}
|
||
```
|
||
|
||
#### 6.1.3 产品信息 (ProductInfo)
|
||
```typescript
|
||
interface ProductInfo {
|
||
id: number // 产品ID
|
||
productName: string // 产品名称
|
||
model: string // 型号
|
||
quantity: number // 数量
|
||
cataloguePrice: number // 目录价格
|
||
price: number // 实际价格
|
||
discount: number // 折扣
|
||
type: string // 产品类型
|
||
}
|
||
```
|
||
|
||
#### 6.1.4 附件文件 (AttachmentFile)
|
||
```typescript
|
||
interface AttachmentFile {
|
||
id: number // 文件ID
|
||
fileName: string // 文件名称
|
||
uploadUser: string // 上传用户
|
||
uploadTime: string // 上传时间
|
||
filePath: string // 文件路径
|
||
fileType: string // 文件类型
|
||
}
|
||
```
|
||
|
||
#### 6.1.5 已审批列表项 (CompletedApprovalItem)
|
||
```typescript
|
||
interface CompletedApprovalItem {
|
||
allApproveUserName: string // 所有审批人姓名
|
||
applyTime: string // 申请时间
|
||
applyUserName: string // 申请人姓名
|
||
approveOpinion: string // 审批意见
|
||
approveStatus: ApprovalStatus // 审批状态: 2-驳回，3-通过，其他-提交
|
||
approveTime: string // 审批时间
|
||
approveUser: string // 审批人ID
|
||
approveUserName: string // 审批人姓名
|
||
businessId: number // 业务ID
|
||
businessKey: string // 业务编号
|
||
businessName: string // 合同名称
|
||
nextAllApproveUserName: string // 下一步审批人
|
||
processInstanceId: string // 流程实例ID
|
||
processKey: string // 流程编码
|
||
processName: string // 流程名称
|
||
roleName: string // 角色名称
|
||
taskId: string // 任务ID
|
||
taskName: string // 任务名称
|
||
todoId: string // 待办事项ID
|
||
}
|
||
```
|
||
|
||
#### 6.1.6 查询参数类型
|
||
```typescript
|
||
// 已审批列表查询参数
|
||
interface CompletedListParams {
|
||
businessName?: string // 合同名称搜索
|
||
page: number // 页码
|
||
pageSize: number // 每页数量
|
||
}
|
||
```
|
||
|
||
## 7. 性能优化
|
||
|
||
### 7.1 前端性能优化
|
||
|
||
#### 7.1.1 代码层面优化
|
||
- **按需加载**: 路由组件懒加载，减少初始包体积
|
||
- **组件缓存**: 合理使用keep-alive缓存组件状态
|
||
- **防抖节流**: 搜索输入等操作使用防抖处理
|
||
- **虚拟滚动**: 大数据列表使用虚拟滚动技术
|
||
|
||
#### 7.1.2 资源优化
|
||
- **图片压缩**: 静态图片资源压缩和格式优化
|
||
- **代码分割**: Vite自动代码分割和Tree Shaking
|
||
- **CDN加速**: 静态资源使用CDN分发
|
||
- **缓存策略**: 合理设置浏览器缓存策略
|
||
|
||
#### 7.1.3 网络优化
|
||
- **请求合并**: 相关数据请求合并减少网络往返
|
||
- **数据缓存**: Store层实现数据缓存机制
|
||
- **离线支持**: Service Worker实现基础离线功能
|
||
- **预加载**: 关键数据提前预加载
|
||
|
||
### 7.2 移动端优化
|
||
|
||
#### 7.2.1 交互优化
|
||
- **触摸反馈**: 所有可点击元素提供视觉反馈
|
||
- **手势支持**: 支持下拉刷新、上拉加载等手势
|
||
- **防误触**: 避免过小的点击区域
|
||
- **加载状态**: 提供明确的加载和空状态提示
|
||
|
||
#### 7.2.2 性能监控
|
||
- **错误监控**: 集成错误上报和监控
|
||
- **性能监控**: 关键性能指标监控
|
||
- **用户行为**: 用户操作路径分析
|
||
- **兼容性**: 不同设备和浏览器兼容性测试
|
||
|
||
## 8. 安全设计
|
||
|
||
### 8.1 认证安全
|
||
- **Session管理**: 基于服务端Session的认证机制
|
||
- **超时处理**: 会话超时自动重定向登录页
|
||
- **权限控制**: 前端路由权限控制
|
||
- **敏感信息**: 避免在前端存储敏感信息
|
||
|
||
### 8.2 数据安全
|
||
- **输入验证**: 前端表单数据验证
|
||
- **XSS防护**: 用户输入内容转义处理
|
||
- **HTTPS**: 生产环境强制使用HTTPS
|
||
- **CORS**: 正确配置跨域访问策略
|
||
|
||
### 8.3 接口安全
|
||
- **参数校验**: 接口参数类型和格式校验
|
||
- **错误处理**: 统一错误处理，避免敏感信息泄露
|
||
- **请求限制**: 防止恶意频繁请求
|
||
- **数据脱敏**: 敏感数据展示脱敏处理
|
||
|
||
## 9. 测试策略
|
||
|
||
### 9.1 单元测试
|
||
- **组件测试**: Vue组件单元测试
|
||
- **工具函数**: 纯函数逻辑测试
|
||
- **Store测试**: 状态管理逻辑测试
|
||
- **覆盖率**: 关键逻辑代码覆盖率90%+
|
||
|
||
### 9.2 集成测试
|
||
- **API测试**: 前后端接口集成测试
|
||
- **用户流程**: 完整业务流程端到端测试
|
||
- **兼容性**: 不同浏览器和设备兼容性测试
|
||
- **性能测试**: 关键性能指标测试
|
||
|
||
### 9.3 用户测试
|
||
- **可用性测试**: 用户界面易用性测试
|
||
- **体验测试**: 用户操作体验测试
|
||
- **回归测试**: 版本迭代回归测试
|
||
- **压力测试**: 高并发场景压力测试
|
||
|
||
## 10. 部署运维
|
||
|
||
### 10.1 部署流程
|
||
1. **代码构建**: `npm run build` 生成生产包
|
||
2. **静态部署**: 将dist目录部署到Web服务器
|
||
3. **反向代理**: Nginx配置API代理和静态文件服务
|
||
4. **域名配置**: 配置生产域名和HTTPS证书
|
||
|
||
### 10.2 监控告警
|
||
- **错误监控**: JavaScript错误自动上报
|
||
- **性能监控**: 页面加载性能监控
|
||
- **业务监控**: 关键业务指标监控
|
||
- **告警通知**: 异常情况及时告警通知
|
||
|
||
### 10.3 版本管理
|
||
- **版本号**: 语义化版本号管理
|
||
- **变更日志**: 详细记录版本变更内容
|
||
- **回滚机制**: 快速版本回滚能力
|
||
- **灰度发布**: 分批次灰度发布策略 |