feat: 完成老项目文档化工作
- 新增 openspec-propose 技能，支持快速提案生成变更及相关文档。 - 新增接口汇总文档，整理后端接口及其用途。 - 新增页面功能说明文档，描述各页面的功能及路由。 - 新增项目总览文档，概述项目结构、技术栈及运行方式。 - 新增工具与非标准实现说明文档，记录项目中的特殊实现及约定。 - 创建 legacy-project-documentation 变更，整合现有文档并迁移至正式 OpenSpec 目录。 - 记录项目中的高风险历史实现特征，明确页面启用状态及接口调用关系。
This commit is contained in:
119
docs/api-summary.md
Normal file
119
docs/api-summary.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# 接口汇总
|
||||
|
||||
## 基础地址
|
||||
|
||||
`public/config.js` 当前定义的基础地址如下：
|
||||
|
||||
| 标识 | 地址 | 典型用途 |
|
||||
| ------------ | --------------------------------------- | ---------------------------------------- |
|
||||
| `ApiList[0]` | `http://blv-rd.tech:19088/api/` | UDP 日志、房态、功率、用户信息、配置字典 |
|
||||
| `ApiList[1]` | `http://blv-rd.tech:19055/api/` | 酒店列表、主机列表、黑名单、房间统计 |
|
||||
| `ApiList[2]` | `http://www.boonlive-rcu.com:7000/api/` | TFTP/RCU 特定操作 |
|
||||
| `config.Api` | `http://blv-rd.tech:19088/api/` | `fetch` 文件上传等直接调用 |
|
||||
|
||||
## 按接口前缀整理
|
||||
|
||||
### UDPPackage
|
||||
|
||||
主要由 `ApiList[0]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| -------------------------------------- | ------------ | ------------------ |
|
||||
| `UDPPackage/GetUDPTotalAnalysis` | UDP 监控 | 查询 UDP 汇总统计 |
|
||||
| `UDPPackage/ExportUDPTotalAnalysis` | UDP 监控 | 导出 UDP 汇总数据 |
|
||||
| `UDPPackage/ConfigParameterSet` | UDP 监控 | 设置监控参数 |
|
||||
| `UDPPackage/GetUDPPackageTimeAnalysis` | 线程耗时记录 | 获取线程步骤耗时 |
|
||||
| `UDPPackage/Get_IOTLog` | 语音助手日志 | 获取语音日志 |
|
||||
| `UDPPackage/Get_IOTLogCount` | 语音助手日志 | 获取日志总数 |
|
||||
| `UDPPackage/Get_BeforeTakeCardStatus` | 房态日志 | 查询某时刻前置房态 |
|
||||
| `UDPPackage/Get_RCUStatus` | 房态日志 | 查询在线/离线房态 |
|
||||
| `UDPPackage/Get_TakeCardStatus` | 房态日志 | 查询取断电状态 |
|
||||
|
||||
### LowerMachineLog
|
||||
|
||||
主要由 `ApiList[1]` 承载，少部分页面也通过默认 `$http` 调同名前缀。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| ------------------------------ | --------------------------------------------------------- | ------------------ |
|
||||
| `LowerMachineLog/GetHotelList` | UDP 监控、黑名单、TFTP 管理、语音日志、房态日志、功率记录 | 获取酒店列表 |
|
||||
| `LowerMachineLog/GetHostList` | UDP 监控、黑名单、TFTP 管理、语音日志、房态日志 | 获取主机或房间列表 |
|
||||
|
||||
调用特征：
|
||||
|
||||
- 多数页面用 `qs.stringify(getdate)` 作为请求体。
|
||||
- 典型场景是根据酒店代码换取房间、主机或设备列表。
|
||||
|
||||
### BlockIP
|
||||
|
||||
主要由 `ApiList[1]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| -------------------------------- | -------------------------------------- | ------------------ |
|
||||
| `BlockIP/BlockLWRemove` | 黑名单管理 | 取消酒店过滤 |
|
||||
| `BlockIP/BlockLWSet` | 黑名单管理 | 设置酒店或主机过滤 |
|
||||
| `BlockIP/GetBlockLWSetData` | 黑名单管理 | 获取黑名单数据 |
|
||||
| `BlockIP/GetConfigParameterList` | UDP 监控 | 获取监控配置参数 |
|
||||
| `BlockIP/GetRoomCount` | UDP 监控、语音日志、房态日志、功率记录 | 获取酒店房间总数 |
|
||||
|
||||
### values
|
||||
|
||||
由 `ApiList[2]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| ------------------------ | --------- | ------------------ |
|
||||
| `values/GetTFTPInfo` | TFTP 管理 | 获取当前 TFTP 设置 |
|
||||
| `values/TFTPSet_Execute` | TFTP 管理 | 下发 TFTP 设置 |
|
||||
|
||||
### iis
|
||||
|
||||
由 `ApiList[2]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| ----------- | -------- | ----------------------- |
|
||||
| `iis/Recly` | UDP 监控 | 触发远程回收/重启类操作 |
|
||||
|
||||
### Power
|
||||
|
||||
由 `ApiList[0]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| ------------------------ | -------- | ---------------- |
|
||||
| `Power/GetPowerAnalysis` | 功率记录 | 查询功率分析数据 |
|
||||
|
||||
### ConfigPY
|
||||
|
||||
由 `ApiList[0]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| -------------------------------- | -------- | -------------- |
|
||||
| `ConfigPY/GetConfigString` | 字典管理 | 获取配置字典 |
|
||||
| `ConfigPY/SaveOrAddConfigString` | 字典管理 | 保存配置字典 |
|
||||
| `ConfigPY/GetSingleValue` | 个人设置 | 获取单项配置值 |
|
||||
|
||||
### Users / Company
|
||||
|
||||
由 `ApiList[0]` 承载。
|
||||
|
||||
| 接口 | 调用页面 | 作用 |
|
||||
| -------------------- | -------- | ------------ |
|
||||
| `Company/GetComInfo` | 个人设置 | 获取公司信息 |
|
||||
| `Users/GetUserInfo` | 个人设置 | 获取用户详情 |
|
||||
| `Users/EditUser` | 个人设置 | 更新用户资料 |
|
||||
|
||||
### FileUpload
|
||||
|
||||
直接通过 `fetch(config.Api + 'FileUpload/UploadFile')` 调用。
|
||||
|
||||
| 接口 | 调用位置 | 作用 |
|
||||
| ----------------------- | --------------------------- | ------------------ |
|
||||
| `FileUpload/UploadFile` | `App.vue` 注入的 `ajaxfile` | 上传头像或其他文件 |
|
||||
|
||||
## 参数风格说明
|
||||
|
||||
项目接口调用参数并不统一，主要有三种：
|
||||
|
||||
- 直接传对象，让 axios 拦截器自动 `JSON.stringify`。
|
||||
- 调用方先手动 `JSON.stringify`，再传给 axios。
|
||||
- 用 `qs.stringify` 组装表单格式参数，并附带自定义 headers。
|
||||
|
||||
后续维护时，不要想当然把所有 POST 都改成传对象；必须先确认目标接口当前依赖的是哪一种风格。
|
||||
172
docs/page-functions.md
Normal file
172
docs/page-functions.md
Normal file
@@ -0,0 +1,172 @@
|
||||
# 页面功能说明
|
||||
|
||||
## 页面总表
|
||||
|
||||
| 页面 | 路由 | 是否在主菜单展示 | 功能摘要 | 主要接口 |
|
||||
| ------------ | ------------------ | ---------------- | --------------------------------------------------------------- | ------------------------------------------------------------- |
|
||||
| 登录 | `/login` | 否 | 账号密码验证码登录，支持记住我和错误次数锁定 | 当前未接正式后端登录接口 |
|
||||
| 主页 | `/home` | 否 | 中转页，进入后自动跳到 UDP 监控 | 无 |
|
||||
| UDP 监控 | `/udplog` | 是 | 查看 UDP 汇总指标、时间筛选、酒店筛选、导出、配置下发、主机详情 | `UDPPackage/*`、`LowerMachineLog/*`、`BlockIP/*`、`iis/Recly` |
|
||||
| 线程耗时记录 | `/tasktimelog` | 是 | 查询线程步骤耗时、分页、导出 | `UDPPackage/GetUDPPackageTimeAnalysis` |
|
||||
| 黑名单管理 | `/blacklist` | 是 | 酒店维度黑名单查看、过滤、取消过滤、按酒店查主机 | `BlockIP/*`、`LowerMachineLog/*` |
|
||||
| TFTP 管理 | `/tftpwhitelist` | 是 | 酒店和房间维度 TFTP 上传设置、白名单管理 | `values/*`、`LowerMachineLog/*` |
|
||||
| 语音助手日志 | `/voicelog` | 是 | 语音请求链路日志、异常筛选、懒加载 | `UDPPackage/Get_IOTLog*`、`LowerMachineLog/*` |
|
||||
| 房态日志 | `/statuslog` | 是 | 房态/取电/离在线统计、房间时序详情、历史状态查询 | `UDPPackage/Get_*Status`、`LowerMachineLog/*` |
|
||||
| 功率记录 | `/powerlog` | 否 | 查询酒店功率分析数据 | `Power/GetPowerAnalysis`、`LowerMachineLog/*` |
|
||||
| 字典管理 | 已注释 | 否 | 维护配置字典与区域字典 | `ConfigPY/GetConfigString`、`ConfigPY/SaveOrAddConfigString` |
|
||||
| 个人设置 | 未接路由 | 否 | 查看并修改当前用户资料，带头像上传 | `Company/*`、`Users/*`、`FileUpload/UploadFile` |
|
||||
| 404 | `/:pathMatch(.*)*` | 否 | 未匹配路由兜底页 | 无 |
|
||||
|
||||
## 登录页
|
||||
|
||||
文件：`src/pages/login/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 账号、密码、验证码三段式表单。
|
||||
- 支持“记住我”，将用户名和密码写入本地存储。
|
||||
- 连续输错达到阈值后锁定，锁定结束时间也写入本地存储。
|
||||
|
||||
关键注意事项：
|
||||
|
||||
- 当前登录是前端硬编码账号密码校验。
|
||||
- 注释里保留了旧的后端登录接口 `LeiDa/Login`，但未启用。
|
||||
- 登录成功后通过 `localStorage.login` 与 `localStorage.TokenT` 控制会话。
|
||||
|
||||
## UDP 监控页
|
||||
|
||||
文件：`src/pages/udplog/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 支持“今天 / 3 天内 / 更多”时间筛选。
|
||||
- 支持普通模式与全屏模式切换。
|
||||
- 支持按酒店查看聚合数据，也支持查看某酒店主机详情。
|
||||
- 支持导出 UDP 统计结果。
|
||||
- 支持获取和下发监控配置参数。
|
||||
- 包含对 RCU 侧 `iis/Recly` 的调用入口。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 统计与导出走 `UDPPackage`。
|
||||
- 酒店和主机信息来自 `LowerMachineLog`。
|
||||
- 参数配置和房间计数来自 `BlockIP`。
|
||||
|
||||
## 线程耗时记录页
|
||||
|
||||
文件：`src/pages/tasktimelog/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 根据起止时间查询 UDP 包各处理步骤耗时。
|
||||
- 表格列根据步骤动态展开。
|
||||
- 支持分页、快捷时间按钮、导出 Excel。
|
||||
|
||||
维护价值：
|
||||
|
||||
- 适合排查某条命令链路在哪一步耗时异常。
|
||||
- Popover 中能看到步骤描述、触发时间、部分消息内容。
|
||||
|
||||
## 黑名单管理页
|
||||
|
||||
文件：`src/pages/blacklist/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 查看所有酒店是否已进入过滤名单。
|
||||
- 可按酒店名称或编号搜索。
|
||||
- 支持“只显示过滤名单”。
|
||||
- 支持整酒店加入或移出黑名单。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 黑名单增删改查全部走 `BlockIP`。
|
||||
- 酒店列表与主机列表走 `LowerMachineLog`。
|
||||
|
||||
## TFTP 管理页
|
||||
|
||||
文件：`src/pages/tftpwhitelist/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 查看酒店维度 TFTP 上传白名单。
|
||||
- 支持整酒店上传和单房间上传。
|
||||
- 支持打开房间列表查看设备版本、机型、MAC。
|
||||
- 支持配置端口、域名、上传时长等 TFTP 设置。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 白名单和房间数据来自 `LowerMachineLog`。
|
||||
- RCU 侧配置由 `values/GetTFTPInfo` 与 `values/TFTPSet_Execute` 完成。
|
||||
|
||||
## 语音助手日志页
|
||||
|
||||
文件：`src/pages/voicelog/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 按酒店、房间和时间区间查询语音请求日志。
|
||||
- 日志按 `requestId` 折叠分组展示。
|
||||
- 支持异常过滤和“加载全部”开关。
|
||||
- 做了懒加载和时间片拉取，适合大数据量场景。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 主日志来自 `UDPPackage/Get_IOTLog` 与 `UDPPackage/Get_IOTLogCount`。
|
||||
- 酒店、房间、房间总数来自 `LowerMachineLog` 和 `BlockIP/GetRoomCount`。
|
||||
|
||||
## 房态日志页
|
||||
|
||||
文件：`src/pages/statuslog/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 可以按酒店、房间、多酒店、时间区间查询房态。
|
||||
- 汇总表展示当前在线状态、离线次数、当前取电状态、取断电次数。
|
||||
- 点击房间可进入时序详情弹窗，查看在线/离线与取电/断电时间轴。
|
||||
- 支持查询某个历史时刻的在线状态和取电状态。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 核心状态查询走 `UDPPackage/Get_RCUStatus`、`Get_TakeCardStatus`、`Get_BeforeTakeCardStatus`。
|
||||
- 酒店、房间基础数据走 `LowerMachineLog`。
|
||||
|
||||
## 功率记录页
|
||||
|
||||
文件：`src/pages/powerlog/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 当前实现较轻，核心是选择酒店并请求功率分析数据。
|
||||
- 页面代码更像实验或预研状态，尚未形成完整运营页面。
|
||||
|
||||
接口特征：
|
||||
|
||||
- 主数据接口是 `Power/GetPowerAnalysis`。
|
||||
- 酒店列表和房间总数仍来自 `LowerMachineLog` 与 `BlockIP/GetRoomCount`。
|
||||
|
||||
## 字典管理页
|
||||
|
||||
文件：`src/pages/dicmanage/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 展示并编辑通用字典值。
|
||||
- 对“区域”字典提供省份选择弹窗和结构化编辑能力。
|
||||
- 适合后台配置维护，但当前路由被注释，默认不可达。
|
||||
|
||||
## 个人设置页
|
||||
|
||||
文件：`src/pages/logsetup/index.vue`
|
||||
|
||||
主要内容：
|
||||
|
||||
- 展示登录用户信息。
|
||||
- 支持编辑真实姓名、手机号、邮箱、微信号。
|
||||
- 预留头像上传能力。
|
||||
|
||||
关键注意事项：
|
||||
|
||||
- 页面未接入当前路由。
|
||||
- 头像上传代码存在明显不完整逻辑，`filedata` 变量在启用分支中未定义。
|
||||
- 当前更像未完全收尾的个人中心页。
|
||||
123
docs/project-overview.md
Normal file
123
docs/project-overview.md
Normal file
@@ -0,0 +1,123 @@
|
||||
# BLS Web Vue 项目总览
|
||||
|
||||
## 文档目标
|
||||
|
||||
本文档用于给后续维护人员快速建立认知，重点覆盖以下内容：
|
||||
|
||||
- 项目入口与运行方式
|
||||
- 路由、菜单和页面结构
|
||||
- 后端接口域名与调用分层
|
||||
- 当前项目中值得注意的非标准实现
|
||||
- 关联文档索引
|
||||
|
||||
## 技术栈
|
||||
|
||||
- 前端框架：Vue 3 + Vite
|
||||
- UI 组件：Element Plus
|
||||
- 路由：Vue Router 4
|
||||
- 国际化：vue-i18n
|
||||
- 数据请求：axios、fetch、jQuery.ajax 混用
|
||||
- 数据处理：dayjs、qs、xlsx
|
||||
|
||||
## 项目入口
|
||||
|
||||
- 页面入口：`src/main.js`
|
||||
- 根组件：`src/App.vue`
|
||||
- 路由定义：`src/router/index.js`
|
||||
- 请求封装：`src/axios.js`
|
||||
- 运行配置：`public/config.js`
|
||||
|
||||
## 运行说明
|
||||
|
||||
`package.json` 中当前可见脚本：
|
||||
|
||||
- `npm run dev`：启动本地开发环境
|
||||
- `npm run build`：构建生产包
|
||||
- `npm run preview`：本地预览构建结果
|
||||
- `npm run lint`：执行 eslint，并带 `--fix`
|
||||
|
||||
当前仓库没有现成的测试脚本，属于典型的“已交付老项目，缺少自动化回归”的状态。
|
||||
|
||||
## 认证与访问控制
|
||||
|
||||
项目的访问控制依赖浏览器存储，不是标准的后端 token 鉴权流：
|
||||
|
||||
- 路由守卫依据 `localStorage.TokenT` 判断是否已登录。
|
||||
- 登录页当前使用前端硬编码账号密码校验，而不是正式后端登录接口。
|
||||
- `TokenT` 实际保存的是一个时间字符串，用于计算“3 天内免密登录”。
|
||||
- `localStorage.login` 被用来控制布局切换与页面状态。
|
||||
- 菜单权限目前被写死为 `全选`，没有接入真实权限接口。
|
||||
|
||||
这意味着：后续如果要补安全能力，登录、权限、会话续期都需要整体重构，不能把当前实现视为最终鉴权方案。
|
||||
|
||||
## 路由与菜单概览
|
||||
|
||||
路由层当前启用的页面：
|
||||
|
||||
| 路由 | 页面名称 | 状态 |
|
||||
| ------------------ | ------------ | ------------------------------ |
|
||||
| `/login` | 登录 | 启用 |
|
||||
| `/home` | 主页 | 启用，进入后立即跳转 `/udplog` |
|
||||
| `/udplog` | UDP 监控 | 启用 |
|
||||
| `/tasktimelog` | 线程耗时记录 | 启用 |
|
||||
| `/blacklist` | 黑名单管理 | 启用 |
|
||||
| `/tftpwhitelist` | TFTP 管理 | 启用 |
|
||||
| `/voicelog` | 语音助手日志 | 启用 |
|
||||
| `/statuslog` | 房态日志 | 启用 |
|
||||
| `/powerlog` | 功率记录 | 路由启用，但菜单默认隐藏 |
|
||||
| `/:pathMatch(.*)*` | 404 | 启用 |
|
||||
|
||||
代码存在但默认未接入主流程的页面：
|
||||
|
||||
- `src/pages/dicmanage/index.vue`：路由被注释，属于后台字典管理页。
|
||||
- `src/pages/logsetup/index.vue`：未在路由中注册，属于个人资料维护页。
|
||||
- `src/pages/udpconn/index.vue`：目录存在，但当前未接入路由或菜单。
|
||||
|
||||
## 后端域名与调用层次
|
||||
|
||||
`public/config.js` 中定义了三套主要地址：
|
||||
|
||||
- `ApiList[0]`：`http://blv-rd.tech:19088/api/`，主日志平台接口。
|
||||
- `ApiList[1]`：`http://blv-rd.tech:19055/api/`，酒店/黑名单/主机相关接口。
|
||||
- `ApiList[2]`：`http://www.boonlive-rcu.com:7000/api/`，RCU/TFTP 相关接口。
|
||||
|
||||
请求层分为四种：
|
||||
|
||||
- 默认 `$http`：来自 `src/axios.js` 默认实例。
|
||||
- `createAxiosInstance(1)`：显式切到 `ApiList[1]`。
|
||||
- `createAxiosInstance(2)`：显式切到 `ApiList[2]`。
|
||||
- `fetch` / `$.ajax`：在 `App.vue` 中作为补充能力直接注入。
|
||||
|
||||
## 请求封装摘要
|
||||
|
||||
`src/axios.js` 的行为需要重点注意：
|
||||
|
||||
- `createAxiosInstance` 参数不是任意 `baseURL`，而是 `ApiList` 下标。
|
||||
- 请求拦截器会在 `config.data` 为对象时自动执行 `JSON.stringify`。
|
||||
- 项目内部大量页面又手动对参数做了一次 `JSON.stringify`，形成“调用方自己转 JSON，拦截器有时也会转”的混合风格。
|
||||
- 某些接口使用 `qs.stringify` 发 `application/x-www-form-urlencoded`，通过第三个参数传 headers。
|
||||
- 响应拦截器几乎不做统一错误处理，只是 `console.log` 后抛出异常。
|
||||
|
||||
## App.vue 提供的全局能力
|
||||
|
||||
根组件除了渲染菜单和布局，还承担了一些基础设施职责：
|
||||
|
||||
- 通过 provide 注入 `$http`、`config`、`checkLoginStatus`、`isMobile`、`fullScreen`。
|
||||
- 提供 `ajaxfile(form)`，以 `fetch + FormData` 上传文件到 `FileUpload/UploadFile`。
|
||||
- 提供 `ajax(api, form)`，使用 `jQuery.ajax` 发送 JSON POST 请求。
|
||||
- 管理深浅色主题、菜单切换、浏览器尺寸监听和基础登录状态刷新。
|
||||
|
||||
## 开发风险与维护建议
|
||||
|
||||
- 登录逻辑是前端硬编码，不能作为正式生产安全实现继续扩展。
|
||||
- 路由、菜单和页面目录存在不一致，新增功能前要先确认是否接入菜单、路由、缓存和权限。
|
||||
- 页面对后端接口依赖很分散，且经常跨三个基础域名切换，排查接口问题时必须先确认 axios 实例来源。
|
||||
- 代码中存在多套请求方式并存的情况，后续统一封装前应先做接口盘点。
|
||||
- 项目当前没有系统化的 API 文档，维护时应优先参考本次新增的接口汇总文档。
|
||||
|
||||
## 文档索引
|
||||
|
||||
- `docs/project-overview.md`：项目总览
|
||||
- `docs/page-functions.md`：页面功能说明
|
||||
- `docs/api-summary.md`：接口汇总
|
||||
- `docs/tooling-notes.md`：工具与非标准实现说明
|
||||
96
docs/tooling-notes.md
Normal file
96
docs/tooling-notes.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# 工具与非标准实现说明
|
||||
|
||||
## axios 封装
|
||||
|
||||
文件：`src/axios.js`
|
||||
|
||||
当前项目的 axios 封装与常规写法有几个明显差异：
|
||||
|
||||
1. `createAxiosInstance(urlnum)` 参数语义是“配置下标”，不是完整 URL。
|
||||
2. `baseURL` 固定取自 `config.ApiList[urlnum || 0]`。
|
||||
3. 请求拦截器会把对象类型的 `config.data` 自动转成 JSON 字符串。
|
||||
4. 如果页面已经手工 `JSON.stringify`，拦截器不会再重复转换，但代码阅读成本会升高。
|
||||
5. 响应拦截器没有统一消息提示，也没有 token 失效处理。
|
||||
|
||||
建议：如果后续要统一网络层，先做接口分组和参数样式清查，不要直接全局替换。
|
||||
|
||||
## 全局注入能力
|
||||
|
||||
文件：`src/main.js`、`src/App.vue`
|
||||
|
||||
项目通过 provide/inject 暴露了多项全局能力：
|
||||
|
||||
- `$http`：默认 axios 实例
|
||||
- `config`：运行配置
|
||||
- `checkLoginStatus`：登录状态检查
|
||||
- `calculateTimeDiff`：时间差辅助方法
|
||||
- `isMobile`：移动端状态
|
||||
- `fullScreen`：页面全屏状态
|
||||
- `ajaxfile`：`fetch + FormData` 文件上传
|
||||
- `ajax`：`jQuery.ajax` JSON 请求
|
||||
|
||||
这意味着很多页面不是从模块 import 工具函数，而是依赖根组件注入。迁移或拆分页面时需要同步处理这些依赖。
|
||||
|
||||
## 本地存储约定
|
||||
|
||||
项目大量依赖浏览器存储保存运行态：
|
||||
|
||||
- `TokenT`：保存时间字符串，用于免密登录窗口判断
|
||||
- `login`：字符串形式的登录标记
|
||||
- `username`：当前用户名
|
||||
- `url`：上次停留的页面路由
|
||||
- `rememberedUsername` / `rememberedPassword`：登录页记住我
|
||||
- `loginErrorAttempts` / `loginLockUntil`：登录错误计数和锁定信息
|
||||
- `currentRoute`：路由守卫中记录当前访问路径
|
||||
|
||||
这套约定分散在多个页面和根组件中，没有中心化状态管理。
|
||||
|
||||
## 非标准登录实现
|
||||
|
||||
登录页当前是演示型或临时型实现：
|
||||
|
||||
- 用户名和密码写在页面常量 `validUsers` 中。
|
||||
- 注释中保留了旧接口调用痕迹，但并未启用。
|
||||
- 路由守卫依赖 `TokenT` 时间串，而不是标准 JWT 或 session token。
|
||||
|
||||
如果未来要正式上线鉴权，应整体替换，而不是局部打补丁。
|
||||
|
||||
## jQuery.ajax 与 fetch 仍在使用
|
||||
|
||||
文件：`src/App.vue`
|
||||
|
||||
虽然项目主体已经使用 Vue 3，但根组件仍保留了旧式辅助方法：
|
||||
|
||||
- `ajaxfile`：手写 `fetch` 上传，额外拼接了 `Authorization` 请求头。
|
||||
- `ajax`：使用 `$.ajax` 发送 JSON 请求。
|
||||
|
||||
说明项目经历过多轮演化，存在旧工具与新工具并存的历史包袱。
|
||||
|
||||
## MinuteIndex 工具类
|
||||
|
||||
文件：`src/utils/index.js`
|
||||
|
||||
`MinuteIndex` 用于把日志对象按“分钟 + commandType”索引到 `Map` 中，便于高频查询：
|
||||
|
||||
- 适合按分钟级时间快速定位同一命令类型的数据。
|
||||
- 用 `WeakMap` 追踪对象位置，支持更新和移除。
|
||||
- 对时间字符串做了局部格式标准化处理。
|
||||
|
||||
该工具体现出页面中存在一定的前端侧数据索引需求，不完全依赖后端聚合。
|
||||
|
||||
## 页面状态与菜单控制
|
||||
|
||||
文件：`src/App.vue`
|
||||
|
||||
菜单、缓存、主题切换等逻辑都集中在根组件：
|
||||
|
||||
- 菜单项写死在 `menuValue`。
|
||||
- 页面权限目前默认全部开放。
|
||||
- 主题切换同时操作 Element Plus 深浅模式和自定义 CSS 变量。
|
||||
- `home` 实际只是跳转页，不是业务主页。
|
||||
|
||||
## 建议的维护策略
|
||||
|
||||
- 新增接口前，先决定接入哪一套 baseURL，再确定用默认 `$http` 还是 `createAxiosInstance`。
|
||||
- 新增页面前，先同时检查目录、路由、菜单、权限过滤和缓存策略。
|
||||
- 若要做重构，优先从登录、请求层、全局注入三块入手，因为它们是当前项目最明显的历史耦合点。
|
||||
Reference in New Issue
Block a user