10 KiB
项目名称: 91pron H5 客户端 # 与 DMP 或内部命名一致时请自行替换 一级部门: 北斗 # 请填写一级部门名称 二级部门: 瑞升 # 请填写二级部门名称，无则留空
DMP编码: JHA-204 # 无则留空
项目类型: H5
可选值:
H5 / APP / PC / 服务 / 组件 / 工具 / AI / 中间件
开发语言: Node
可选值:
GO / Java / PHP / Node
项目负责人: DN4929,DN4868 # 员工编号，多个用逗号隔开，这里的负责是这套代码的负责人
运维负责人: DN9460,DN9651,DN4792 # 负责部署、监控、K8S、发布、证书等
产品负责人: YY1145,YY1208 # 项目产品经理
项目成员: DN4929,DN4868
项目状态: 开发中
可选值:
开发中 / 维护中 / 已停止 / 已归档
项目级别: 中
可选值:
高 / 中 / 低
核心分支: main
代码仓库:
最后审计人:
最后审计时间:
告警群:
备注:
package.json中name为redapricot，仓库/目录名为91pron-h5-client。- 业务 API 根路径由 选线得到的
configStore.baseUrl+ 环境变量VITE_APP_API_BASE_URL（如/api/app）拼接；选线候选域名见各环境.env.*中的VITE_BASE_URL（JSON 数组），勿将含密钥、内网地址的未脱敏内容对外发布。
1. 项目说明
本仓库为面向 移动端 H5 浏览器 的 Vue 3 + Vite + TypeScript 单页应用，UI 基于 Vant 4，状态管理为 Pinia（pinia-plugin-persistedstate 持久化），路由为 Vue Router 4，模式为 createWebHistory（HTML5 History）（见 src/router/index.ts）。入口为 src/main.ts，挂载 Pinia、Router、埋点插件与 Vant Lazyload 等；全局路由前置逻辑见 src/permission.ts（含大量 <keep-alive> 与 Tab 缓存策略）。启动页 Splash 负责 API 选线（ping）、拉取应用配置并写入 config/global 等 store，再进入 MainView 主导航。
业务域在 src/views/ 下按模块划分，主要包括：首页与搜索/片库/长短视频播放详情（lldhome、shortVideo）、社区（帖子、套图、排行、群聊等，community）、直播（lldlive）、我的（登录、钱包会员、充值提现、消息、AI 功能、历史收藏等，lldmine）、ACG（小说/漫画/动漫，acgModule）、暗网（darkNet）、娱乐（entertainment）、联合游戏活动（jointGamingActivitie）、预售（lldpresale）、免费福利（lldfreeBenefits）等；接口封装在 src/service/，按域拆分（如 home.ts、user.ts、community.ts）。
技术栈要点：
- 构建：Vite 3（
vite.config.ts），生产使用 Terser 压缩，vite-plugin-compression 生成 gzip 产物；unplugin-vue-components + VantResolver 按需引入组件；vite-plugin-svg-icons 使用src/assets/icons；可按环境开启 vconsole（vite-plugin-vconsole）。 - 样式：Sass，通过
css.preprocessorOptions.scss.additionalData向各组件注入@/assets/styles/main.scss；存在主题目录src/assets/theme/。 - 适配：postcss-px-to-viewport-8-plugin（见
postcss配置）。 - 网络：axios 封装于
src/utils/request.ts，baseURL = configStore.baseUrl + VITE_APP_API_BASE_URL；支持 Authorization、业务码非 200 时showToast、可选 请求体/查询参数加密（VITE_PARAMETER_ENCRYPTION）、响应hash字段时的解密；GET 短缓存与请求去重等逻辑也在该文件中。 - 播放器与媒体：xgplayer-hls.js（HLS），业务中多处拼接
/api/app/vid/h5/m3u8/…拉流地址（见VideoHls等组件）。 - 其他：mitt 事件总线、
moment、swiper、qrcode.vue、html5-qrcode、vuedraggable-es、devtools-detector（生产环境非调试参数下启用检测）、index.html引入 web-sdk 脚本供设备信息与部分请求头使用等。
Node 版本： 仓库 README.md 建议使用 16.17.1。
常用脚本（package.json）：
| 命令 | 说明 |
|---|---|
npm run dev |
本地开发（vite，默认见 vite.config.ts 中 server.port 等） |
npm run build:prod |
生产构建（--mode production） |
npm run build:test |
测试环境构建（--mode test） |
npm run preview |
预览构建产物（vite preview） |
npm run lint |
ESLint（src 下 .js / .vue / .ts，带 --fix） |
开发环境代理（vite.config.ts）： 本地将 /dcserv 代理到可配置的 target（用于部分接口调试，以文件内实际配置为准）。
项目目录结构（核心）：
91pron-h5-client/
├── public/
├── src/
│ ├── main.ts # 入口：Pinia、Router、Vant、埋点、devtools 等
│ ├── App.vue
│ ├── permission.ts # 路由守卫：keep-alive / Tab 缓存策略
│ ├── router/
│ │ └── index.ts # Router（History）、_SPLASH_ / 首页集合 / 业务子路由等
│ ├── stores/ # Pinia（user、config、global、app 等）
│ ├── views/ # 页面：lldhome / community / lldmine / acgModule 等
│ ├── service/ # 按域拆分的接口方法
│ ├── components/ # 通用与业务组件（含 VideoHls、瀑布流等）
│ ├── utils/ # request、埋点、加解密、本地存储等
│ ├── hooks/ # 组合式逻辑
│ ├── assets/ # 样式、图标、主题等
│ ├── plugins/ # 如 tracker 等
│ └── enums/、typings/ # 枚举与类型
├── vite.config.ts
├── index.html # 入口 HTML，含 web-sdk 脚本引用
├── .env.development / .env.test / .env.production # VITE_* 与选线域名等
├── prod_build.sh # 示例打包/发布脚本（环境差异大，使用前请内部确认）
└── project.md # 本文件
接口基址与选线：
VITE_APP_API_BASE_URL：通常为/api/app，作为 axios 路径前缀拼在选线成功的域名之后。VITE_BASE_URL：各环境文件中为 JSON 数组字符串，供启动阶段对多个候选域名做 ping/选线，选中的结果写入configStore.baseUrl（详见Splash与src/utils/ping.ts等逻辑）。- 生产部署若使用相对路径，需由 网关 / Nginx 将浏览器同源下的
/api转发到实际业务后端。
2. 基础设施与中间件
本仓库为 纯前端工程，不内置后端；运行时依赖：
- 业务 API：由选线结果 +
VITE_APP_API_BASE_URL决定；静态部署时需保证/api/...反代 与 HTTPS 证书策略一致。 - 静态资源托管：
build:prod/build:test产物在dist/，由 CDN 或 Web 服务器提供；History 路由 需在服务端配置 单页回退（如try_files到index.html）。 - 媒体与图片域名：全局配置、资源线与播放线路等由接口与
config/globalstore 中的sourceInfo、线路信息 等共同决定（勿在文档中粘贴未脱敏的内网或密钥配置）。
3. 运维部署
构建产物： 执行 npm run build:prod 或 npm run build:test 后，在 dist/ 生成静态资源；可能同时生成 .gz（依赖服务器是否启用 gzip_static 或等价能力）。
推荐发布流程（示例）：
- 使用约定 Node 版本安装依赖：
npm ci或npm install。 - 确认各环境
.env.*中VITE_BASE_URL、VITE_APP_API_BASE_URL、加密开关等与当前发布目标一致。 - 执行
npm run build:prod或npm run build:test。 - 将
dist/同步至静态服务器；确认 History 路由回退 与/api反代。 - 仓库内
prod_build.sh为示例流程，主机与路径以实际运维规范为准，避免泄露账号与内网信息。
环境变量说明（摘录，完整以 .env.* 为准）：
| 变量 | 作用 |
|---|---|
NODE_ENV |
构建/运行环境标识 |
VITE_APP_API_BASE_URL |
与选线域名拼接，作为 API 路径前缀 |
VITE_BASE_URL |
选线候选 API 域名列表（JSON 数组字符串） |
VITE_BUILD_SOURCEMAP |
是否生成 sourcemap |
VITE_BUILD_DROP_CONSOLE |
生产是否剔除 console |
VITE_BUILD_VCONSOLE |
是否打包进 vconsole |
VITE_PARAMETER_ENCRYPTION |
是否开启请求参数加密 |
4. 风险说明
- 强依赖网关反代：生产使用相对路径时，
/api代理错误会导致整站接口不可用；History 模式服务器配置错误会导致 深链 404。 - 选线失败：启动阶段若所有候选域名不可用，用户可能停留在选线或错误态（见
Splash与相关弹层逻辑）。 - 参数加密与后端约定：
VITE_PARAMETER_ENCRYPTION与各环境必须 与后端一致，否则请求体解析失败。 - 安全与合规：生产环境开启 devtools 检测并跳转外部页（见
main.ts），变更前需评估用户体验与合规要求。 - 配置敏感信息：
.env、选线域名、密钥类逻辑 勿提交到公开仓库；供应链上锁定package-lock.json并定期审计依赖。
5. 历史事故（可选）
- 暂无（请运维/研发后续补充）
6. 交接说明（可选）
- 路由与缓存策略集中在
src/permission.ts，新增常驻缓存页面时需同步维护 keepAliveMap / mainViewKeep 等映射。 - 用户信息、配置等与
src/stores/及持久化插件相关；请勿绕过src/utils/request.ts直接发起业务 axios（与仓库.cursor前端规范一致）。 - 接口目录：
src/service/；类型定义：src/typings/。 - 请勿将含密钥、生产内网地址的
.env或未脱敏脚本提交至对外可见仓库；YAML 头部元数据若与真实组织不一致，请在内部系统中核对后修改。