# 88LIVE 新工程（NewHKLive/88live）开发工作汇总

> 文档用途：工作周报 / 阶段交付说明  
> 工程路径：`e:\NewHKLive\88live`  
> 参考旧工程：`e:\88live`  
> 整理日期：2026-05-27  

---

## 一、项目背景

基于旧版 88live 业务，在 **uni-app（Vue2 + HBuilderX）** 上重构客户端，采用新的页面目录与 `features/`、`core/` 核心js分层架构，统一 UI 风格（浅色卡片 + 自定义 TabBar），并补齐登录注册、动态、短视频 Feed、直播观看/开播、账号中心等核心能力。

**主要技术栈**

- 前端：uni-app、Vue2、nvue（直播/竖滑视频）、vue 子组件 webview 叠层方案  
- 状态：Vuex  
- 网络：`core/http` 统一请求与拦截  
- 国际化：`locale/`（简中、繁中、英文、日文等）  

---

## 二、工作总览（按模块）

| 模块 | 主要成果 | 状态 |
|------|----------|------|
| 登录注册（passport） | 注册页、入口、区号接口化 | ✅ 已完成 |
| 首页（index） | 菜单接口化、热门推荐参数、下拉刷新统一 | ✅ 已完成 |
| 动态（dynamics） | 关注、加载样式、下拉/上拉、底部留白 | ✅ 已完成 |
| 用户主页（profile） | 关注状态、路由重命名 | ✅ 已完成 |
| 短视频 Feed | 竖滑播放、详情 reel 页、列表循环播放 | ✅ 已完成 |
| 直播（live） | 直播播页、观看关播、大厅进房校验 | ✅ 已完成 |
| 我的（mine） | 侧滑抽屉、下拉刷新统一 | ✅ 已完成 |
| 账号（account） | 资料编辑生日对齐 | ✅ 已完成 |
| H5 适配 | manifest、白屏修复、路由注册 | ✅ 部分完成 |
| 工程与合规 | 样式重命名、推送暂禁、网络守卫 | ✅ 已完成 |

---

## 三、详细工作内容

### 1. 登录注册体系（passport）

#### 1.1 注册页设计与实现

- 按 `signin.vue` 同一套设计语言完善 **`pages/passport/enroll.vue`**
- 共用 `passport-screen`、区号选择、验证码格子、协议勾选、步骤条等组件
- 承接旧版 `register.vue` 业务逻辑：
  - 发验证码前 `verifyHandsetUsed` 检查手机号是否已注册
  - 已注册时提示并可跳转登录（携带 `handset` / `region`）
  - 支持 URL 参数预填与注册成功后自动登录跳转

#### 1.2 注册入口

- **`signin.vue`**：主按钮下增加「免费注册」描边按钮 + 页脚文字链
- **`lobby.vue`**：登录大厅增加第三张「免费注册」卡片入口
- **`signin.vue`** 支持从注册页带回的 `handset`、`region` 查询参数

#### 1.3 深浅色主题切换

- 新增 `features/passport/theme-prefs.js` 本地持久化偏好
- 新增 `components/passport-kit/passport-theme.scss` CSS 变量主题
- `passport-screen.vue` 右上角 ☾/☀ 切换，覆盖 lobby / signin / enroll / recover-phone 等页
- **不改布局**，仅替换配色；默认深色，浅色与项目其它浅色页（`#eef3fb` 系）统一

#### 1.4 验证码输入体验

- 登录、注册页验证码格子 **默认不自动聚焦**，用户点击后再输入
- 修复验证码空格子在深色背景下不可见的问题（`passcode-grid.vue` 默认边框/背景）

#### 1.5 区号选择接口化

- 新增 `features/passport/region-gateway.js`，对接 `/wanlshop/common/getAreaCode`
- `region-picker.vue` 改为接口拉取，失败回退静态 `region-dialcodes.js`
- 修复区号弹框：顶部搜索栏显示不全、点击遮罩可关闭

**涉及页面/文件**：`pages/passport/*`、`components/passport-kit/*`、`features/passport/*`

---

### 2. 首页（index）

- **快捷菜单改为接口获取**：`/other/menuData`（酒店、机票、货币换算等外链跳转）
- **热门推荐**接口增加参数 `is_hot_dian`（是否热门推荐：0 否 / 1 是）
- **下拉刷新样式**与动态页统一：固定顶栏 + `scroll-view` + `refresher-background` / `keepContent` 刷新策略

**涉及文件**：`pages/index/index.vue`、`features/travel/gateway.js`（或相关 gateway）

---

### 3. 动态社区（dynamics）

- **`detail.vue`** 增加关注功能，使用 `user_no` 调用关注接口
- 对齐接口字段 `isFollow`：0 未关注 / 1 已关注
- **`index.vue`** 重新设计加载中骨架样式
- 增加 **下拉刷新**、确认 **上拉加载更多** 逻辑
- 修复列表底部被 TabBar 遮挡问题
- 下拉刷新样式作为标准，推广到首页、直播大厅、我的等页

**涉及文件**：`pages/dynamics/*`、`components/dynamics/*`、`features/dynamics/*`

---

### 4. 用户主页（profile，原 find）

#### 4.1 关注状态与展示

- 用户主页按接口 `isFollow` 正确展示关注/已关注（原 `pages/find/user.vue`）

#### 4.2 目录与路由重命名

| 原路径 | 新路径 | 说明 |
|--------|--------|------|
| `pages/find/user.vue` | `pages/profile/show.vue` | 他人主页 |
| `pages/find/details/video.nvue` | `pages/feed/reel.nvue` | 竖滑视频详情 |

- 同步更新 `pages.json`、`post-media.js`、搜索/动态/Feed 等跳转链接
- 后端 API 路径 `find/user/...` 保持不变

---

### 5. 短视频 Feed

- **`pages/feed/index.nvue`**：Tab 竖滑 Feed（nvue 外壳 + vue 子组件叠层，解决 native video 挡按钮问题）
- **`pages/feed/reel.nvue`**：从动态/搜索等入口进入的单条/列表竖滑播放
- **`components/feed-reel/vertical-reel.vue`**：核心播放器（swiper、点赞、评论、关注、分页加载）
- **列表循环播放**：reel 详情页在列表全部加载完毕后，末尾可继续上滑循环回第一条（`loopAtEnd` + swiper `circular`）

**涉及文件**：`pages/feed/*`、`components/feed-reel/*`、`components/find/play.vue`、`features/feed/*`

---

### 6. 直播（live）

#### 6.1 主播开播（broadcast）

- 从旧工程 `e:\88live\pages\shop\live\live.nvue` **迁移开播能力**至 `pages/live/broadcast.nvue`
- 按新 App 风格重做 UI；必须使用 **nvue + live-pusher** 原生推流
- 修复问题：
  - 进入开播页黑屏 / 全白（webview 遮挡、预览 `startPreview`、尺寸铺满）
  - 开播封面上传失败
  - 未实名认证时不应继续开播流程（收到提示后拦截）

#### 6.2 观众观看（watch）

- 完善 **主播关播** 后观众端处理：对齐旧工程 socket 消息逻辑
- `features/live/chat-lines.js`：`groupMatchesRoom` 增加 `roomKey`、关播信号识别
- `watch.nvue`：关播后跳转 `/pages/live/end`，防重复处理

#### 6.3 直播大厅（hall）

- 进房前 **`fetchBroadcastStatus`** 校验直播间是否已结束（对齐 `hklivelist.vue`）
- `onShow` 静默刷新列表数据

**涉及文件**：`pages/live/*`、`features/live/*`、`components/live-room/*`

---

### 7. 我的 / 账号（mine & account）

- **侧滑抽屉**顶部「设置」标题隐藏（`mine-side-panel`）
- **我的页**下拉刷新样式与其它 Tab 页统一
- **`profile-edit.vue`** 生日行与昵称等表单项对齐（`picker` 外包 `pe-picker-slot`）

---

### 8. 列表与通知修复

- 修复 `onReachBottom` 误用作 `scroll-view` 方法导致的 Vue warn  
  涉及：`sys-notice/index.vue`、`relation-list.vue`、`article/list.vue`、反馈/投诉列表等
- 统一改为 `onScrollToLower` 等正确命名

---

### 9. H5 运行与适配

#### 9.1 无法运行 / 编译

- `manifest.json` 补全 **`h5` 配置块**
- 新增 **`template.h5.html`** 编译模板

#### 9.2 白屏问题

- 根因：`App.vue` 不应包含 `<template>`，占用 H5 页面挂载位
- 修复：去掉 `App.vue` 的 template；App 端更新弹层改到首页 `#ifdef APP-PLUS`
- `main.js` 补充 `import 'uni-pages'` 注册路由（自定义 launcher 场景）

#### 9.3 布局异常（进行中 / 待继续）

- HBuilderX「运行到浏览器」下部分 vue 页布局与 App 不一致
- 已分析可能原因：PC 全宽 rpx 放大、双 TabBar、scroll 高度手算等
- **尚未完成统一 H5 布局修复**（需后续专项处理）

---

### 10. 工程化、配置与稳定性

#### 10.1 全局样式

- `wanlshop.css` 重命名为 **`baselive.css`**，`App.vue` 引用更新
- 保留 `wanlshop.css` 为兼容 stub（`@import baselive.css`）

#### 10.2 推送与权限

- 暂 **不集成 gzfuts-fcm**，避免 iOS 启动弹通知授权（模块移至 `_disabled_native/`）
- `manifest.json` / `push-bridge` 按开关控制原生推送

#### 10.3 网络访问守卫（仅 App）

- 用户未授权网络时全 App 拦截并提示去系统设置开启
- **H5 排除**：删除浏览器 passive 监听上的 `preventDefault`，消除控制台 Intervention 警告
- 修复冷启动误弹「API 接口不存在」：探测请求用 `runWithoutHttpErrorToast` 包裹，避免 404 toast

#### 10.4 导航与深链

- `core/nav/navigation.js` Tab 路由更新为当前工程 Tab 页
- `features/push/deep-link-router.js` Tab 根路径对齐 `pages/index`、`feed`、`live/hall` 等

---

## 四、核心架构说明（便于周报描述「技术建设」）

```
pages/          # 页面（passport / index / dynamics / feed / live / profile / account / mine …）
components/     # 可复用 UI（passport-kit、feed-reel、live-room、app-tabbar …）
features/       # 业务网关（feed-gateway、profile-gateway、live/gateway …）
core/           # 基础设施（http、config、bootstrap、nav、network …）
locale/         # 多语言文案
static/style/   # 全局样式（baselive.css、app-shell.css …）
```

**直播/Feed 关键技术决策**

- nvue 页面嵌入 `.vue` 子组件作为 webview subwindow，使 `<video>` 与底部互动按钮可正常叠层点击。

---

## 五、问题修复清单（Bug Fix 摘要）

| 问题 | 处理 |
|------|------|
| 观众端主播关播无反应 | socket 关播信号 + 跳转结束页 |
| 直播大厅进已结束房间 | 进房前状态校验 + 返回刷新 |
| 重启 App 弹「API 不存在」 | 网络守卫探测静默 + 仅 App 启用守卫 |
| H5 passive listener 警告 | 网络守卫排除 H5 |
| 开播页黑屏/全白 | nvue 推流预览与布局修复 |
| 未实名仍可开播 | 实名提示后阻断流程 |
| 封面上传失败 | broadcast 上传链路修复 |
| 验证码格子不显示 | passcode-grid 默认样式 |
| 资料页生日行不对齐 | picker flex 包裹 |
| scroll-view onReachBottom 报错 | 改名为 onScrollToLower |
| H5 白屏 | App.vue 去掉 template |
| baselive.css 构建 ENOENT | 补全文件 + 清 dev 缓存 |

---

## 六、待办与已知问题

1. **H5 浏览器布局**：多页在 HBuilderX 运行到浏览器时布局仍乱，需专项（max-width、TabBar 双轨、resize 重算高度等）。
2. **推送恢复**：业务需要时再按 `_disabled_native/README.md` 恢复 FCM。

---

## 七、「本周完成」简述

本周主要完成 88LIVE 新客户端阶段性功能开发与旧工程能力迁移，具体包括：

1. **账号体系**：完成注册页 UI/流程、登录大厅与登录页注册入口、passport 深浅色主题、区号接口化及验证码交互优化。  
2. **内容与社区**：首页菜单与热门推荐接口对接；动态页关注、加载与刷新体验优化；用户主页关注状态与路由重构（`profile/show`、`feed/reel`）。  
3. **短视频**：Feed Tab 与 reel 详情竖滑播放；reel 列表播完后支持循环回看。  
4. **直播**：开播页从旧工程迁移至 nvue 并修复黑屏、封面上传、实名拦截；观众端关播处理；直播大厅进房校验与返回刷新。  
5. **体验统一**：多 Tab 页下拉刷新样式统一；侧滑抽屉与资料编辑等细节修复。  
6. **工程稳定**：H5 manifest/白屏修复；网络守卫仅 App；推送暂禁；全局样式 baselive 重命名；多项列表与启动告警问题修复。  

**下周建议**：H5 布局适配专项、直播搜索进房校验、遗留旧路径清理与真机回归测试。

---

## 八、主要改动文件索引（节选）

| 分类 | 代表路径 |
|------|----------|
| 登录注册 | `pages/passport/*`、`components/passport-kit/*`、`features/passport/*` |
| 首页 | `pages/index/index.vue` |
| 动态 | `pages/dynamics/*`、`components/dynamics/*` |
| 主页/视频 | `pages/profile/show.vue`、`pages/feed/reel.nvue`、`components/feed-reel/vertical-reel.vue` |
| 直播 | `pages/live/watch.nvue`、`broadcast.nvue`、`hall.vue`、`features/live/*` |
| 账号 | `pages/account/profile-edit.vue` |
| 基础设施 | `App.vue`、`main.js`、`manifest.json`、`core/network/network-access-guard.js`、`core/http/interceptor-registry.js` |
| 样式 | `static/style/baselive.css` |

---

