163 lines
9.7 KiB
Markdown
163 lines
9.7 KiB
Markdown
---
|
||
项目名称: 91pron 管理后台客户端 # 与 DMP 或内部命名一致时请自行替换
|
||
一级部门: 北斗 # 请填写一级部门名称
|
||
二级部门: 瑞升 # 请填写二级部门名称，无则留空
|
||
|
||
DMP编码: JHA-204 # 无则留空
|
||
|
||
项目类型: PC
|
||
# 可选值:
|
||
# H5 / APP / PC / 服务 / 组件 / 工具 / AI / 中间件
|
||
|
||
开发语言: Node
|
||
# 可选值:
|
||
# GO / Java / PHP / Node
|
||
|
||
项目负责人: DN4929,DN4868 # 员工编号，多个用逗号隔开，这里的负责是这套代码的负责人
|
||
|
||
运维负责人: DN9460,DN9651,DN4792 # 负责部署、监控、K8S、发布、证书等
|
||
|
||
产品负责人: YY1145,YY1208 # 项目产品经理
|
||
|
||
项目成员: DN4929,DN4868
|
||
|
||
项目状态: 开发中
|
||
# 可选值:
|
||
# 开发中 / 维护中 / 已停止 / 已归档
|
||
|
||
项目级别: 中
|
||
# 可选值:
|
||
# 高 / 中 / 低
|
||
|
||
核心分支: main
|
||
|
||
代码仓库:
|
||
- https://bd-git.jsyyds.com/ruisheng/jha-204-91pron/frontend/91porn-admin-client.git
|
||
|
||
最后审计人:
|
||
|
||
最后审计时间:
|
||
|
||
告警群:
|
||
|
||
备注:
|
||
- `package.json` 中 `name` 为 `admin-server`，仓库/目录名为 `91pron-admin-client`。
|
||
- 业务 API 根路径由 **`src/utils/serverUrlConfig.js`** 中的 **`baseServerUrl`** 决定，与 **`NODE_ENV`**、**`VUE_APP_TITLE`**（见 `.env.build` / `.env.test` 等）组合有关；请勿将含密钥、内网或未脱敏的生产地址对外发布。
|
||
---
|
||
|
||
# 1. 项目说明
|
||
|
||
本仓库为面向 **桌面浏览器** 的 **Vue 2 + Vue CLI + Webpack** 单页 **管理后台**，UI 基于 **Element UI 2**，状态管理为 **Vuex 3**（`vuex-persistedstate` 在依赖中，当前 `src/stroe/index.js` 内持久化插件为注释状态），路由为 **Vue Router 3**，模式为 **`hash`**（见 `src/router/index.js`）。入口为 **`src/main.js`**，挂载 Vuex、Router、Element、全局组件/过滤器、**LoginPlugin**、分片上传与音频播放等插件；全局路由守卫见 **`src/permission.js`**（登录态、权限路由刷新、多页签相关 store 动作）。
|
||
|
||
动态业务路由由 **`src/router/permissionRouter.js`** 聚合各业务子路由文件（如 `activity.js`、`user` 相关、`cinema.js` 等），经 **`src/stroe/actions.js`** 中 `refreshRouter` 与用户 **`localStorage` 中的 `role`** 做 **`recursionRouter`** 过滤后注入 **`/main`** 子路由；基础白名单路由见 **`src/router/baseRouter.js`**（登录、`/main` 下欢迎页与角色页等）。
|
||
|
||
业务页面在 **`src/views/`** 下按模块划分，示例包括：**用户**（`user`）、**视频/媒资**（`videoManagement`、`mediaLibrary`、`lsjMediaLibrary`）、**影院**（`cinemaManagement`）、**渠道与落地**（`channelManagement`、`channelBackground`、`landManagement`）、**活动/签到/产品/交易**（`activityManagement`、`signinManagement`、`productManagement`、`transactionManagement`）、**代理与区县**（`agentManagement`、`agentDistrictProvider`）、**AI / ACG / 小说**（`aiManagement`、`animationManage`、`fiction`）、**统计与系统**（`statistics`、`systemManagement`、`systemMessage`、`administrators`）等；接口封装在 **`src/api/`**，按域拆分为多个 `.js` 文件，请求统一走 **`src/utils/request.js`** 封装的 **`axios`** 实例。
|
||
|
||
**技术栈要点：**
|
||
|
||
- 构建：**Vue CLI 4**（`vue-cli-service`），生产可选 **compression-webpack-plugin** 对 js/css/html/mp4 等做 gzip（见 `vue.config.js`）；**`publicPath: './'`**，适合静态目录或相对路径部署。
|
||
- 样式：**node-sass** + **sass-loader**，通过 `vue.config.js` 的 `css.loaderOptions.sass.data` 向各组件注入 **`@/assets/scss/base.scss`**；Element 主题变量见 **`src/assets/scss/element-variables.scss`**。
|
||
- 网络：**axios**（`baseURL` 在实例中空字符串，真实前缀在 `request.js` 的 `ajax` 内拼接 **`config.baseServerUrl`**），**Authorization** 头、**refresh-authorization** 触发的 token 刷新与请求队列、`code === 1003` 时登出确认等逻辑均在 **`src/utils/request.js`**。
|
||
- 媒体与编辑：**video.js**、**hls.js**、**dplayer**、**wangeditor**、**vue-cropper**、**vue-simple-uploader**、**echarts** 等。
|
||
- 其他：**lodash**、**moment**、**js-md5** / **spark-md5**、**xlsx**、**qrcodejs2** 等。
|
||
|
||
**Node 版本：** 仓库 `README.md` 建议使用 **12.18.1**。
|
||
|
||
**常用脚本（`package.json`）：**
|
||
|
||
| 命令 | 说明 |
|
||
|------|------|
|
||
| `npm run dev` | 本地开发（`vue-cli-service serve`） |
|
||
| `npm run build` | 生产构建（`NODE_ENV=production vue-cli-service build`，默认读取项目根目录 `.env` 系列中变量） |
|
||
| `npm run test-build` | 测试环境构建（`--mode test`，配合 `.env.test` 等） |
|
||
| `npm run lint` | ESLint（`vue-cli-service lint`） |
|
||
|
||
**开发环境代理：** 当前 `vue.config.js` 未配置 `devServer.proxy`；本地联调后端地址主要在 **`serverUrlConfig.js`** 中维护（以文件内实际配置为准）。
|
||
|
||
**项目目录结构（核心）：**
|
||
|
||
```
|
||
91pron-admin-client/
|
||
├── public/
|
||
├── src/
|
||
│ ├── main.js # 入口：Vuex、Router、Element、插件、permission
|
||
│ ├── App.vue
|
||
│ ├── permission.js # 路由守卫：登录、动态路由刷新、页签状态
|
||
│ ├── router/
|
||
│ │ ├── index.js # Router（hash）
|
||
│ │ ├── baseRouter.js # 登录 / main / welcome / role
|
||
│ │ ├── permissionRouter.js # 全量业务子路由聚合
|
||
│ │ └── *.js # 各业务模块路由片段
|
||
│ ├── stroe/ # Vuex（目录名为 stroe，非 store）
|
||
│ ├── views/ # 管理端各业务页面
|
||
│ ├── api/ # 接口方法（按域拆分 .js）
|
||
│ ├── components/ # 通用组件
|
||
│ ├── utils/ # request、serverUrlConfig、过滤器、全局方法等
|
||
│ ├── plugins/ # 如 LoginPlugin
|
||
│ └── assets/ # scss、图片等
|
||
├── vue.config.js
|
||
├── prod_build.sh # 示例打包/发布脚本（环境差异大，使用前请内部确认）
|
||
└── project.md # 本文件
|
||
```
|
||
|
||
**接口基址：**
|
||
|
||
- 详见 **`src/utils/serverUrlConfig.js`**：根据 **`NODE_ENV`** 与 **`VUE_APP_TITLE`** 切换 **`baseServerUrl`**（例如生产构建下相对路径 **`/api/web/admin`** 与测试包差异）；**`playVideoUrl` / `imgUrl` / `downLoadUrl`** 等同文件内字段用于播放与资源地址拼接。
|
||
- 静态部署若使用相对 **`/api/web/admin`**，需由 **网关 / Nginx** 将浏览器同源下的路径转发到实际管理端后端。
|
||
|
||
---
|
||
|
||
# 2. 基础设施与中间件
|
||
|
||
本仓库为 **纯前端工程**，不内置后端；运行时依赖：
|
||
|
||
- **业务 API**：由 `serverUrlConfig.js` 的 **`baseServerUrl`** 决定；部署时需保证管理端 **API 反代** 与 HTTPS 策略一致。
|
||
- **静态资源托管**：`build` / `test-build` 产物在 **`dist/`**，由 Web 服务器或 CDN 提供；当前为 **hash 路由**，服务器层面对路径回退要求通常低于 history 模式，但仍需正确配置 **`publicPath`** 与资源根路径。
|
||
- **媒体、图片与下载域名**：见 `serverUrlConfig` 与接口返回（勿在文档中粘贴未脱敏的内网或密钥配置）。
|
||
|
||
---
|
||
|
||
# 3. 运维部署
|
||
|
||
**构建产物：** 执行 `npm run build` 或 `npm run test-build` 后，在 **`dist/`** 生成静态资源；生产构建可能生成 gzip 压缩产物（见 `vue.config.js` 插件配置）。
|
||
|
||
**推荐发布流程（示例）：**
|
||
|
||
1. 使用约定 **Node** 版本安装依赖：`npm ci` 或 `npm install`。
|
||
2. 确认 **`.env.*`** 或构建 **mode** 下 **`VUE_APP_TITLE`** 等与 **`serverUrlConfig.js`** 逻辑一致。
|
||
3. 执行 `npm run build` 或 `npm run test-build`。
|
||
4. 将 **`dist/`** 同步至静态服务器；确认 **API 反代** 与 **`publicPath: './'`** 的访问路径一致。
|
||
5. 仓库内 **`prod_build.sh`** 为示例流程，**主机与路径以实际运维规范为准**，避免泄露账号与内网信息。
|
||
|
||
**环境变量说明（摘录，完整以实际 `.env.*` 与构建命令为准）：**
|
||
|
||
| 变量 | 作用 |
|
||
|------|------|
|
||
| `NODE_ENV` | 构建/运行环境标识 |
|
||
| `VUE_APP_TITLE` | 与 `serverUrlConfig.js` 中测试/生产基址分支等逻辑配合（见 `.env.build`、`.env.test`） |
|
||
|
||
---
|
||
|
||
# 4. 风险说明
|
||
|
||
- **强依赖后端与反代**：`baseServerUrl` 或网关配置错误会导致 **整站接口不可用**。
|
||
- **登录与权限**：`permission.js` 依赖 **`localStorage`** 中 `userInfo`、`role` 与 Vuex **`routerList`** 刷新逻辑，权限数据异常可能导致无法进入业务页或反复刷新路由。
|
||
- **Token 刷新**：`request.js` 中刷新队列与 **1003** 等业务码处理与后端约定强相关，变更需联调。
|
||
- **配置敏感信息**：联调用的完整域名、内网 IP 等 **勿提交到公开仓库**；依赖锁定文件建议纳入审计流程。
|
||
- **目录命名**：Vuex 目录为 **`stroe`**，新人接手时注意路径与导入，避免误认为缺失 `store`。
|
||
|
||
---
|
||
|
||
# 5. 历史事故（可选）
|
||
|
||
- 暂无（请运维/研发后续补充）
|
||
|
||
---
|
||
|
||
# 6. 交接说明（可选）
|
||
|
||
- 路由与权限核心在 **`src/permission.js`**、**`src/stroe/actions.js`** 的 **`refreshRouter`**、**`src/router/permissionRouter.js`** 及各 **`src/router/*.js`**；新增菜单需在权限路由与后端角色配置侧同步。
|
||
- 用户信息、标签页等多与 **`src/stroe/`** 及 **`localStorage`** 配合；业务请求请统一走 **`src/utils/request.js`**，避免散落裸 **`axios`**。
|
||
- 接口目录：**`src/api/`**。
|
||
- **请勿将含密钥、生产内网地址的环境文件或未脱敏脚本提交至对外可见仓库**；YAML 头部元数据若与真实组织不一致，请在内部系统中核对后修改。
|