424 lines
18 KiB
Markdown
424 lines
18 KiB
Markdown
# 三查一曝光小程序 — 代码结构分析与优化建议
|
||
|
||
> 文档生成日期：2026-06-13
|
||
> 分析范围：`pages/`、`request/`、`components/` 及相关工具层
|
||
|
||
---
|
||
|
||
## 一、总体判断
|
||
|
||
| 维度 | 现状 | 问题程度 |
|
||
|------|------|----------|
|
||
| 文件夹结构 | 34 个页面，18 个目录，命名风格不统一 | 中 |
|
||
| 组件复用 | `components/` 只有 **1 个文件** | 高 |
|
||
| 请求层 | `api.js` 单体 400+ 行，与 `three_one_api/` 分层不一致 | 高 |
|
||
| 页面逻辑 | 多处大段复制粘贴 | 很高 |
|
||
|
||
**结论：** 不是业务乱，而是缺少分层和抽象，同一套东西在不同页面各写一遍。功能覆盖面广，但组织方式偏「页面堆叠式开发」。
|
||
|
||
---
|
||
|
||
## 二、当前结构总览
|
||
|
||
### 2.1 `pages/`（34 个 Vue 文件，18 个子目录）
|
||
|
||
| 子目录 | 文件 |
|
||
|--------|------|
|
||
| `pages/index/` | `index.vue` |
|
||
| `pages/map/` | `map.vue` |
|
||
| `pages/plandetail/` | `plandetail.vue` |
|
||
| `pages/Inspectionresult/` | `Inspectionresult.vue` |
|
||
| `pages/membermanagemen/` | `membermanagemen.vue` |
|
||
| `pages/corporateInformation/` | `corporateInformation.vue` |
|
||
| `pages/editcompanInformation/` | `editcompanInformation.vue` |
|
||
| `pages/checklist/` | `checklist.vue` |
|
||
| `pages/editchecklist/` | `editchecklist.vue` |
|
||
| `pages/Inspectionlog/` | `Inspectionlog.vue` |
|
||
| `pages/Inspectionchecklist/` | `Inspectionchecklist.vue` |
|
||
| `pages/Idphotomanagement/` | `Idphotomanagement.vue` |
|
||
| `pages/hiddendanger/` | `Inspection.vue`、`view.vue`、`rectification.vue`、`acceptance.vue`、`assignment.vue` |
|
||
| `pages/closeout/` | `application.vue`、`editor.vue` |
|
||
| `pages/equipmentregistration/` | `equipmentregistration.vue` |
|
||
| `pages/area/` | `management.vue` |
|
||
| `pages/Inspectionwarning/` | `Inspectionwarning.vue` |
|
||
| `pages/personalcenter/` | `my.vue`、`helpcenter.vue`、`notification.vue`、`settings.vue`、`account.vue`、`edit.vue` |
|
||
| `pages/login/` | `login.vue`、`reg.vue`、`success.vue`、`forget.vue`、`agreement.vue`、`enterprise.vue` |
|
||
|
||
**TabBar 页面**（`pages.json`）：`index`、`Inspectionwarning`、`personalcenter/my`
|
||
|
||
### 2.2 `components/`（仅 1 个文件）
|
||
|
||
| 文件 | 用途 |
|
||
|------|------|
|
||
| `components/AreaFormPopup.vue` | 区域新增/编辑弹窗（被 `pages/area/management.vue` 引用） |
|
||
|
||
### 2.3 `request/`（21 个文件）
|
||
|
||
| 路径 | 说明 |
|
||
|------|------|
|
||
| `request/request.js` | 核心封装：`requestAPI`、`baseUrl`、`toImageUrl`、`toRelativeFilePath` |
|
||
| `request/api.js` | **单体大文件**，约 40+ 个 API（隐患、巡检、企业、检查表、AI 等） |
|
||
| `request/three_one_api/info.js` | 个人信息：`getProfileDetail`、`updateProfile`、`updatePassword` |
|
||
| `request/three_one_api/license.js` | 证照 CRUD + `getLicenseEnterpriseSelect` |
|
||
| `request/three_one_api/area.js` | 区域 CRUD + `getAreaSelect`、`getEnterpriseSelect` |
|
||
| `request/luch-request/` | 完整 luch-request 库（14 个文件） |
|
||
|
||
### 2.4 相关工具层
|
||
|
||
| 路径 | 说明 |
|
||
|------|------|
|
||
| `utils/upload.js` | 七牛直传、`createUploadListHandlers`、`uploadToCloud` |
|
||
| `utils/watermark.js` | 图片时间戳水印 |
|
||
|
||
---
|
||
|
||
## 三、文件夹 / 命名问题
|
||
|
||
### 3.1 pages 分组不一致
|
||
|
||
- **有业务分组：** `hiddendanger/`、`closeout/`、`login/`、`personalcenter/`、`area/`
|
||
- **散落顶层：** `Inspectionresult/`、`Idphotomanagement/`、`membermanagemen/` 等
|
||
|
||
### 3.2 命名风格混用
|
||
|
||
| 模式 | 示例 | 问题 |
|
||
|------|------|------|
|
||
| 全小写 | `checklist`、`plandetail`、`membermanagemen` | 与驼峰混用 |
|
||
| 驼峰首字母大写 | `Inspectionresult`、`Idphotomanagement` | 与全小写混用 |
|
||
| 拼写错误 | `membermanagemen` | 少字母 `t`（management） |
|
||
| 缩写不一致 | `editcompanInformation` vs `corporateInformation` | compan vs corporate |
|
||
| 单文件大写 | `hiddendanger/Inspection.vue` | 同目录其他文件小写 |
|
||
|
||
### 3.3 UI 库混用
|
||
|
||
`pages.json` 同时配置 `wd-*`（wot-design-uni）与 `u-*` / `up-*`（uview-plus），页面中两种前缀并存。
|
||
|
||
---
|
||
|
||
## 四、组件层几乎为空 — 重复最严重
|
||
|
||
`components/` 目前只有 `AreaFormPopup.vue`，而 **9 个以上页面**各自内联了几乎相同的弹窗结构（`popup-header` / `popup-footer` / 取消 / 确定）：
|
||
|
||
- `pages/hiddendanger/Inspection.vue`
|
||
- `pages/Inspectionresult/Inspectionresult.vue`
|
||
- `pages/closeout/application.vue`
|
||
- `pages/Idphotomanagement/Idphotomanagement.vue`
|
||
- `pages/membermanagemen/membermanagemen.vue`
|
||
- `pages/equipmentregistration/equipmentregistration.vue`
|
||
- `pages/editchecklist/editchecklist.vue`
|
||
- `pages/hiddendanger/rectification.vue`
|
||
- `pages/hiddendanger/assignment.vue`
|
||
|
||
**对比：** 区域管理已抽成 `AreaFormPopup.vue`，而证照管理（`Idphotomanagement.vue`）仍是内联弹窗 —— 同一模式，有的抽了、有的没抽。
|
||
|
||
---
|
||
|
||
## 五、逻辑重复详情（按影响排序）
|
||
|
||
### 5.1 P0 — 隐患新增表单（两处大文件几乎一样）
|
||
|
||
**涉及文件：**
|
||
|
||
- `pages/hiddendanger/Inspection.vue`（约 1360 行）
|
||
- `pages/Inspectionresult/Inspectionresult.vue`（约 1480 行）
|
||
|
||
**重复内容：**
|
||
|
||
- 检查形式 `up-choose`
|
||
- 隐患图片 `up-upload` + `watermarkCanvas`
|
||
- AI 识别按钮 `analyzeHazardImage`
|
||
- 标题、等级、位置（含 `chooseLocation`）
|
||
- 法律依据弹窗（搜索 `getRegulationList`）
|
||
- 隐患区域选择（`getAreaList`）
|
||
- 描述、标签 `getHiddenDangerLabelList`
|
||
|
||
两处模板从「检查形式」到「隐患标签」字段布局、文案、交互一致，仅变量名不同（`formData` vs `hazardFormData`，`fileList1` vs `hazardFileList`）。
|
||
|
||
**风险：** 改一个字段要改两处，很容易不同步。
|
||
|
||
### 5.2 P0 — 草稿恢复逻辑（4 处复制）
|
||
|
||
**涉及文件：**
|
||
|
||
- `pages/Inspectionresult/Inspectionresult.vue`
|
||
- `pages/hiddendanger/assignment.vue`
|
||
- `pages/hiddendanger/rectification.vue`
|
||
- `pages/hiddendanger/acceptance.vue`
|
||
|
||
各自实现 `showRestoreBanner`、`clearDraft`、`restoreDraft`（localStorage 读写），Banner HTML 与 inline style 在各文件中完全相同。
|
||
|
||
### 5.3 P0 — 电子签名 + 上传（2 处复制）
|
||
|
||
**涉及文件：**
|
||
|
||
- `pages/hiddendanger/acceptance.vue`
|
||
- `pages/hiddendanger/rectification.vue`
|
||
|
||
**重复内容：**
|
||
|
||
- 隐藏 `canvas-id="watermarkCanvas"`
|
||
- `wd-signature` 组件
|
||
- `uploadToCloud` 上传签名
|
||
- `onSignatureConfirm` → 触发 `executeSubmit` 的流程
|
||
|
||
`onSignatureConfirm`、`reSign`、`clearSignature` 等逻辑在两文件中结构几乎相同。
|
||
|
||
### 5.4 P1 — 部门-人员级联选择（2 处复制）
|
||
|
||
**涉及文件：**
|
||
|
||
- `pages/hiddendanger/assignment.vue` — 单选整改责任人（`getDepartmentPersonUsers`）
|
||
- `pages/hiddendanger/rectification.vue` — 安全管理人员多选 + 整改责任人多选
|
||
|
||
两者 UI 均为左侧部门列 + 右侧人员列 + `popup-footer`，`rectification.vue` 中相关逻辑约 200+ 行，与 `assignment.vue` 大量重叠。
|
||
|
||
### 5.5 P1 — 隐患详情只读展示 vs 表单字段镜像
|
||
|
||
`pages/hiddendanger/view.vue` 的只读展示字段（图片、标题、等级、位置、法律依据、区域、描述、标签）与上述新增表单字段一一对应，但未复用同一「隐患信息展示/编辑」组件。
|
||
|
||
### 5.6 P1 — 用户信息重复拉取
|
||
|
||
**涉及文件：**
|
||
|
||
- `pages/index/index.vue`
|
||
- `pages/personalcenter/my.vue`
|
||
- `pages/personalcenter/edit.vue`
|
||
|
||
均调用 `getProfileDetail()` + `toImageUrl` 处理头像，没有统一的用户状态管理。
|
||
|
||
### 5.7 P1 — 设置类页面几乎克隆
|
||
|
||
`pages/personalcenter/settings.vue` 与 `pages/personalcenter/notification.vue` 结构、脚本、样式完全一致，仅开关文案不同。
|
||
|
||
### 5.8 P1 — 登录注册验证码逻辑复制
|
||
|
||
`pages/login/reg.vue` 与 `pages/login/forget.vue` 共享：
|
||
|
||
- `codeText` 倒计时计算
|
||
- `getCode` / `startCountdown` / `clearCountdown`
|
||
- 均直接 `uni.request` 到 `http://example.com/api/code`（占位 URL，未走 `requestAPI`）
|
||
|
||
### 5.9 其他页面逻辑重复
|
||
|
||
| 场景 | 涉及文件 | 说明 |
|
||
|------|----------|------|
|
||
| 企业信息编辑 | `corporateInformation.vue` vs `editcompanInformation.vue` | 后者无 API、无跳转入口，疑似废弃草稿 |
|
||
| 列表 + 弹窗 CRUD | `area/management.vue` vs `Idphotomanagement.vue` | 模式相同，仅前者用了组件 |
|
||
| 首页隐患列表 vs 隐患排查页 | `index.vue` vs `hiddendanger/Inspection.vue` | 都拉隐患列表，Tab 筛选逻辑类似 |
|
||
| 检查记录 | `Inspectionlog.vue` + `Inspectionchecklist.vue` | 硬编码 mock 数据，无 API |
|
||
|
||
---
|
||
|
||
## 六、request 层问题
|
||
|
||
### 6.1 API 完全重复
|
||
|
||
`request/api.js` 中：
|
||
|
||
```javascript
|
||
// 获取我的隐患排查列表
|
||
export function getMyHiddenDangerList(params) {
|
||
return requestAPI({
|
||
url: '/frontend/hazard/my/list',
|
||
method: 'GET',
|
||
data: params
|
||
});
|
||
}
|
||
|
||
// 获取隐患排查列表
|
||
export function getHiddenDangerList(params) {
|
||
return requestAPI({
|
||
url: '/frontend/hazard/my/list', // 同一 URL
|
||
method: 'GET',
|
||
data: params
|
||
});
|
||
}
|
||
```
|
||
|
||
- `getMyHiddenDangerList` → `pages/hiddendanger/Inspection.vue`
|
||
- `getHiddenDangerList` → `pages/index/index.vue`
|
||
|
||
**应合并为一个函数。**
|
||
|
||
### 6.2 API 分层不一致
|
||
|
||
| 已拆分模块 | 位置 | 示例 |
|
||
|------------|------|------|
|
||
| 个人信息 | `three_one_api/info.js` | `getProfileDetail` |
|
||
| 证照 | `three_one_api/license.js` | `getLicenseList` |
|
||
| 区域 | `three_one_api/area.js` | `getAreaList` |
|
||
| 隐患、巡检、企业、检查表、AI、成员… | 全部在 `api.js` | `addHiddenDanger`、`getCheckPlanList` |
|
||
|
||
页面侧 import 来源混杂，例如 `Inspection.vue` 同时从 `api.js` 和 `three_one_api/area.js` 引入。
|
||
|
||
### 6.3 `/frontend` 与 `/admin` 路径混用
|
||
|
||
小程序端接口前缀不统一（同一 `api.js`）：
|
||
|
||
- 隐患流程：`/frontend/hazard/*`
|
||
- 检查表、法规、预警：`/admin/oneTable/*`、`/admin/regulation/*`、`/admin/warning/*`
|
||
- 销号详情：`/admin/hazard/writeoff/getWriteOffApplyDetail/${applyId}`（`closeout/editor.vue` 使用）
|
||
|
||
### 6.4 未使用的 API（死代码）
|
||
|
||
| 文件 | 函数 | 说明 |
|
||
|------|------|------|
|
||
| `request/api.js` | `uploadFile` | 本地上传旧接口，页面已迁移至 `utils/upload.js` 七牛直传 |
|
||
| `request/api.js` | `getCheckTableDetail` | 无任何引用 |
|
||
| `request/three_one_api/area.js` | `getEnterpriseSelect` | 仅定义，无引用 |
|
||
| `request/three_one_api/area.js` | `getAreaSelect` | 仅定义，无引用 |
|
||
|
||
### 6.5 两套请求栈并存
|
||
|
||
- `request/request.js`：创建 `luch-request` 的 `http` 实例，但实际请求走 `uni.request`；`http` **未被使用**
|
||
- `request/luch-request/` 整包存在，与 `uni_modules/uview-plus/libs/luch-request` 功能重复
|
||
- `pages/login/reg.vue`、`forget.vue` 仍直接用 `uni.request`，绕过统一封装（无 token、无统一错误处理）
|
||
|
||
### 6.6 命名不一致的 API 函数
|
||
|
||
| 函数名 | 问题 |
|
||
|--------|------|
|
||
| `getEnterprisetype` | 无驼峰 |
|
||
| `getindustry` | 全小写开头 |
|
||
| `getEnterpriseinfo` | info 无驼峰 |
|
||
| `detailcheckPoint` | 动词开头，与同文件 `getCheckTableDetail` 风格不一致 |
|
||
|
||
---
|
||
|
||
## 七、疑似死代码 / 未完成页面
|
||
|
||
| 路径 | 状态 |
|
||
|------|------|
|
||
| `pages/map/map.vue` | 仅显示「一张图功能开发中」；TabBar 入口已注释 |
|
||
| `pages/editcompanInformation/editcompanInformation.vue` | 在 `pages.json` 注册，**无任何 navigateTo 引用**；表单未绑 API |
|
||
| `pages/Inspectionlog/Inspectionlog.vue` | 硬编码「和谐矿业每日巡检」等 mock 数据 |
|
||
| `pages/Inspectionchecklist/Inspectionchecklist.vue` | 静态预览页，无 script 逻辑 |
|
||
| `pages/equipmentregistration/equipmentregistration.vue` | UI 完整但 `handleAdd` 仅 toast「新增成功」，无 API |
|
||
| `pages/personalcenter/helpcenter.vue` | 仅静态图片，无交互 |
|
||
| `pages/personalcenter/settings.vue`、`notification.vue` | 开关无持久化、无 API |
|
||
| `pages/login/reg.vue`、`forget.vue` | 验证码请求指向 `example.com` 占位地址 |
|
||
| `pages/login/enterprise.vue` | 表单未绑定、注册逻辑不完整 |
|
||
| `request/api.js` 中 `uploadFile`、`getCheckTableDetail` | 无引用 |
|
||
| `request/request.js` 中 `http`（luch-request 实例） | 创建后未使用 |
|
||
|
||
---
|
||
|
||
## 八、优化建议（按优先级）
|
||
|
||
### 8.1 P0 — 高影响，应优先
|
||
|
||
| 序号 | 优化项 | 说明 | 预期收益 |
|
||
|------|--------|------|----------|
|
||
| 1 | **抽取 `HazardForm` 组件（或 composable）** | 合并 `Inspection.vue` 与 `Inspectionresult.vue` 的隐患新增表单 + 法规弹窗 + 区域选择 + AI 识别 + 水印上传 | 减少 500–800 行重复代码 |
|
||
| 2 | **合并重复 API** | 删除 `getHiddenDangerList` 或 `getMyHiddenDangerList` 之一；删除未使用的 `uploadFile`、`getCheckTableDetail`、`getEnterpriseSelect`、`getAreaSelect` | 减少维护成本 |
|
||
| 3 | **抽取 `useFormDraft` composable** | 统一 4 个页面的草稿 Banner + localStorage 逻辑 | 避免 key 命名和恢复逻辑分叉 |
|
||
| 4 | **抽取 `SignaturePad` 组件 + `useSignatureSubmit`** | 合并 `acceptance.vue` 与 `rectification.vue` 的签名上传与提交链 | 减少重复逻辑 |
|
||
|
||
### 8.2 P1 — 中高影响
|
||
|
||
| 序号 | 优化项 | 说明 |
|
||
|------|--------|------|
|
||
| 5 | **抽取 `DeptUserPicker` 组件** | 支持单选/多选模式，供 `assignment.vue` 与 `rectification.vue` 复用 |
|
||
| 6 | **抽取通用 `FormPopup` 壳组件** | 统一 header/footer/取消/确定，替代 9+ 页面内联弹窗结构；`Idphotomanagement` 可仿照 `AreaFormPopup` 拆出 `LicenseFormPopup` |
|
||
| 7 | **登录模块接入 `requestAPI`** | 替换 `reg.vue`、`forget.vue` 的 `uni.request('http://example.com/...')`，或明确标注并下线未完成页面 |
|
||
| 8 | **清理死页面** | 删除或合并 `editcompanInformation.vue`；决定 `map.vue` 是否保留；为 `Inspectionlog`、`equipmentregistration` 接 API 或移出主包 |
|
||
| 9 | **`api.js` 按业务域拆分** | 拆分到 `three_one_api/hazard.js`、`plan.js`、`enterprise.js` 等，对齐已有分层风格 |
|
||
|
||
### 8.3 P2 — 规范与维护性
|
||
|
||
| 序号 | 优化项 | 说明 |
|
||
|------|--------|------|
|
||
| 10 | **统一 pages 命名** | 目录改小写+连字符（如 `inspection-result`），修正 `membermanagemen`；API 函数统一驼峰 |
|
||
| 11 | **统一 `/frontend` vs `/admin` 前缀策略** | 与后端协商，避免小程序直连 admin 接口的安全与权限问题 |
|
||
| 12 | **清理 `request/luch-request/` 与未使用的 `http` 实例** | 或全面迁移到 luch-request 并删除 `requestAPI` 中的重复实现 |
|
||
| 13 | **个人中心优化** | 合并 `settings.vue` 与 `notification.vue` 为配置页 + 子项；`getProfileDetail` 抽到 `stores/user.js` 或 composable |
|
||
| 14 | **抽取共享 SCSS** | `page-bg.scss`、`popup.scss` 减少样式复制 |
|
||
| 15 | **统一 UI 库** | 逐步收敛到 wot-design 或 uview 之一 |
|
||
|
||
---
|
||
|
||
## 九、推荐的目标目录结构
|
||
|
||
```
|
||
threeonecheck_小程序/
|
||
├── components/ # 公共组件
|
||
│ ├── common/
|
||
│ │ └── FormPopup.vue # 通用弹窗壳
|
||
│ ├── hazard/
|
||
│ │ ├── HazardForm.vue # 隐患新增/编辑表单
|
||
│ │ ├── HazardDetail.vue # 隐患只读展示
|
||
│ │ ├── DeptUserPicker.vue # 部门人员选择
|
||
│ │ └── SignaturePad.vue # 电子签名
|
||
│ ├── area/
|
||
│ │ └── AreaFormPopup.vue # 已有
|
||
│ └── license/
|
||
│ └── LicenseFormPopup.vue # 证照表单弹窗
|
||
├── composables/ # 组合式逻辑
|
||
│ ├── useFormDraft.js # 草稿恢复
|
||
│ ├── useSignatureSubmit.js # 签名提交
|
||
│ └── useUserProfile.js # 用户信息
|
||
├── request/
|
||
│ ├── request.js # 核心封装
|
||
│ └── three_one_api/
|
||
│ ├── info.js # 已有
|
||
│ ├── license.js # 已有
|
||
│ ├── area.js # 已有
|
||
│ ├── hazard.js # 新增：隐患相关
|
||
│ ├── plan.js # 新增：巡检计划
|
||
│ ├── enterprise.js # 新增：企业信息
|
||
│ ├── checklist.js # 新增：检查表
|
||
│ └── member.js # 新增：成员管理
|
||
├── stores/
|
||
│ └── user.js # 用户状态
|
||
├── styles/
|
||
│ ├── page-bg.scss # 页面背景
|
||
│ └── popup.scss # 弹窗样式
|
||
└── pages/ # 按业务域分组（逐步重组）
|
||
├── index/
|
||
├── inspection/ # 巡检相关
|
||
├── hazard/ # 隐患相关（原 hiddendanger）
|
||
├── closeout/ # 销号
|
||
├── enterprise/ # 企业信息
|
||
├── personal/ # 个人中心（原 personalcenter）
|
||
└── login/
|
||
```
|
||
|
||
---
|
||
|
||
## 十、优化路线图
|
||
|
||
```
|
||
当前状态
|
||
│
|
||
▼
|
||
P0：抽核心复用（HazardForm、useFormDraft、SignaturePad、合并重复 API）
|
||
│ 预计减少 30%–40% 页面重复代码
|
||
▼
|
||
P1：统一请求层 + 清理死代码（api 拆分、FormPopup、DeptUserPicker、登录接入 requestAPI）
|
||
│
|
||
▼
|
||
P2：命名规范 + 目录重组（pages 命名、stores、共享 SCSS、UI 库收敛）
|
||
```
|
||
|
||
---
|
||
|
||
## 十一、总结
|
||
|
||
该项目业务功能覆盖面较广（巡检、隐患全流程、销号、证照、区域、成员等），但在 **`components/` 几乎为空** 的前提下，大量 UI 与逻辑散落在各 page 中。
|
||
|
||
**最突出的重复：**
|
||
|
||
1. 隐患新增表单（两处大文件）
|
||
2. 草稿恢复（四处）
|
||
3. 签名提交（两处）
|
||
4. 部门人员选择（两处）
|
||
5. 弹窗壳子（九处以上）
|
||
|
||
**request 层：** `api.js` 单体过大且存在重复/死 API，与 `three_one_api/` 的分层不一致。
|
||
|
||
若按 P0 建议推进，预计可减少约 **30%–40%** 的页面重复代码，并显著降低隐患字段改动时的同步成本。
|
||
|
||
---
|
||
|
||
*本文档供团队内部参考，后续重构时可按 P0 → P1 → P2 顺序逐步推进。*
|