隐患详情重新设计，检查计划重新设计成做题排查式

2026-06-21 16:30:12 +08:00
parent 1fe87ec438
commit cc94d3e3e9
256 changed files with 12542 additions and 5956 deletions
--- a/代码结构分析与优化建议.md
+++ b/代码结构分析与优化建议.md
@@ -0,0 +1,423 @@
+# 三查一曝光小程序 — 代码结构分析与优化建议
+
+> 文档生成日期：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 顺序逐步推进。*