--- 项目名称: 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 头部元数据若与真实组织不一致，请在内部系统中核对后修改。