# 三查一曝光小程序 — 代码结构分析与优化建议

> 文档生成日期：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 顺序逐步推进。*