# 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`：工具与非标准实现说明