pizhengyu/threeonecheck_web

Fork 0

Files

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

2026-06-21 16:30:12 +08:00

18 KiB

Raw Permalink Blame History

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

文档生成日期：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 中：

// 获取我的隐患排查列表
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 中。

最突出的重复：

隐患新增表单（两处大文件）
草稿恢复（四处）
签名提交（两处）
部门人员选择（两处）
弹窗壳子（九处以上）

request 层： api.js 单体过大且存在重复/死 API，与 three_one_api/ 的分层不一致。

若按 P0 建议推进，预计可减少约 30%–40% 的页面重复代码，并显著降低隐患字段改动时的同步成本。

本文档供团队内部参考，后续重构时可按 P0 → P1 → P2 顺序逐步推进。

18 KiB Raw Permalink Blame History Unescape Escape

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

一、总体判断

二、当前结构总览

2.1 pages/（34 个 Vue 文件，18 个子目录）

2.2 components/（仅 1 个文件）

2.3 request/（21 个文件）

2.4 相关工具层

三、文件夹 / 命名问题

3.1 pages 分组不一致

3.2 命名风格混用

3.3 UI 库混用

四、组件层几乎为空 — 重复最严重

五、逻辑重复详情（按影响排序）

5.1 P0 — 隐患新增表单（两处大文件几乎一样）

5.2 P0 — 草稿恢复逻辑（4 处复制）

5.3 P0 — 电子签名 + 上传（2 处复制）

5.4 P1 — 部门-人员级联选择（2 处复制）

5.5 P1 — 隐患详情只读展示 vs 表单字段镜像

5.6 P1 — 用户信息重复拉取

5.7 P1 — 设置类页面几乎克隆

5.8 P1 — 登录注册验证码逻辑复制

5.9 其他页面逻辑重复

六、request 层问题

6.1 API 完全重复

6.2 API 分层不一致

6.3 /frontend 与 /admin 路径混用

6.4 未使用的 API（死代码）

6.5 两套请求栈并存

6.6 命名不一致的 API 函数

七、疑似死代码 / 未完成页面

八、优化建议（按优先级）

8.1 P0 — 高影响，应优先

8.2 P1 — 中高影响

8.3 P2 — 规范与维护性

九、推荐的目标目录结构

十、优化路线图

十一、总结

18 KiB

Raw Permalink Blame History

2.1 `pages/`（34 个 Vue 文件，18 个子目录）

2.2 `components/`（仅 1 个文件）

2.3 `request/`（21 个文件）

6.3 `/frontend` 与 `/admin` 路径混用