企业官网建设流程全解析

• 移动开发

本文围绕 PiliPala（基于 Flutter 开发的 BiliBili 第三方客户端）1.0.25 版本更新日志展开，逐项拆解新增功能、体验优化与问题修复的实现原理与操作入口，并结合当前仓库源码给出调用链与配置细节。读完本文，你可以快速了解该版本在直播弹幕、稍后再看/收藏夹播放、收藏夹新建编辑、评论管理与动态页交互等方面的实际能力，以及这些能力对应的代码位置与行为表现。

版本概览

PiliPala 1.0.25 是一次以「直播互动」与「收藏体系」为核心的功能性更新，同时在视频播放、动态浏览、专栏阅读等场景补充了大量体验优化与问题修复。完整变更记录位于 change_log/1.0.25.1010.md，下文按「功能」「优化」「修复」三部分逐一展开，并对照 lib 目录下的实际实现进行印证。

新增功能详解

直播弹幕

1.0.25 为直播间引入了完整的弹幕收发能力，包括：

• 弹幕展示：直播画面上的滚动弹幕，基于ns_danmaku插件渲染；
• 弹幕发送：直播间底部输入框直接发送弹幕；
• 弹幕开关：默认开启，可随时关闭/开启，关闭后仅保留列表而不渲染弹幕层；
• 加入提示：用户进入直播间/关注主播的滚动提示。

其核心链路位于 直播房间控制器：

1. 获取弹幕服务器信息：调用LiveHttp.liveDanmakuInfo(roomId)（见 lib/http/live.dart 中「获取弹幕信息」接口），解析返回的host_list得到弹幕 WebSocket 地址列表danmuHostList与鉴权token：

   danmuHostList = (res["data"]["host_list"] as List) .map<String>((e) => '${e["host"]}:${e['wss_port']}') .toList(); token = res["data"]["token"];

2. 建立 WebSocket 连接：基于自研插件 pl_socket 连接wss://<host>:<port>/sub，心跳间隔 30 秒；连接就绪后发送joinRoom认证包：

   var joinData = LiveUtils.encodeData( json.encode({ "uid": userId, "roomid": roomId, "protover": 3, "buvid": buvid, "platform": "web", "type": 2, "key": token, }), 7, );

3. 消息解码与渲染：onMessageCb中通过LiveUtils.decodeMessage（见 lib/utils/live.dart）解码消息，过滤出LiveMessageType.chat聊天消息：

   • 追加到messageList供弹幕列表使用；
   • 转换为DanmakuItem并带上主播端下发的 RGB 颜色，在danmakuSwitch开启时调用danmakuController?.addItems()渲染到画面。

4. 发送弹幕：调用LiveHttp.sendDanmaku(roomId, msg)（见 lib/http/live.dart 中「发送弹幕」接口），成功则清空输入框，失败则通过SmartDialog.showToast提示错误原因（见 发送弹幕）。

弹幕开关状态通过danmakuSwitch响应式变量与播放器联动，关闭时同时置plPlayerController.isOpenDanmu为 false；房间退出时（onClose）会发送心跳并关闭 socket，避免连接泄漏。

稍后再看、收藏夹播放全部

• 稍后再看播放全部：在「稍后再看」列表页（lib/pages/later）新增「播放全部」入口，逻辑见 稍后再看控制器：取列表第一项作为起点，携带sourceType: 'watchLater'与列表总数count跳转到视频详情页，从而在播放器内按列表顺序连续播放。
• 收藏夹播放全部：在收藏夹详情页（lib/pages/fav_detail）同样提供「播放全部」操作，跳转时携带sourceType: 'fav'（见 收藏夹详情控制器），播放器据此识别播放来源为收藏夹。

两者共用同一套播放器轮播机制，只是sourceType不同，这为「当前播放列表」的切换与续播提供了上下文标识。

收藏夹新建、编辑

「我的收藏夹」页（lib/pages/fav）与收藏夹详情页均提供入口，跳转至统一的收藏夹编辑页 fav_edit（含控制器与视图，见 lib/pages/fav_edit/controller.dart 与 lib/pages/fav_edit/view.dart）。

新建流程：

• 页面默认处于type = 'add'新建模式；
• 表单字段包括：
  • title：收藏夹名称（必填，前端表单验证）；
  • intro：收藏夹简介；
  • privacy：公开/私密开关，0为公开，1为私密；
• 提交时调用FavHttp.addFolder，POST 参数与默认值见 lib/http/fav.dart：

  data: { 'title': title, 'intro': intro, 'cover': cover ?? '', 'privacy': privacy ?? 0, 'csrf': await Request.getCsrf(), }

  成功后SmartDialog.showToast('新建成功')并返回上一页。

编辑流程：

• 通过Get.arguments传入mediaId、title、intro、cover、privacy，控制器据此回填表单并切换为type = 'edit'；
• 提交时调用FavHttp.editFolder（见 lib/http/fav.dart），相比新建额外携带media_id以定位目标收藏夹：

  data: { 'title': title, 'intro': intro, 'media_id': mediaId, 'cover': cover ?? '', 'privacy': privacy ?? 0, 'csrf': await Request.getCsrf(), }

• 成功后SmartDialog.showToast('编辑成功')，并通过Get.back(result: {'title': title})将新名称回传给上一页刷新展示。

两个接口均以服务端code == 0判定成功，失败时透传message展示给用户。

评论删除

评论支持直接删除。对应接口封装在 lib/http/reply.dart，删除成功时返回{'status': true, 'msg': '删除成功'}；删除失败则携带服务端错误信息提示。入口位于视频详情页评论区，长按或通过评论操作菜单触发。

评论保存为图片

评论内容支持一键保存为图片，便于分享留存。该能力基于项目的图片保存工具链（见 lib/utils/image_save.dart），将评论文本按界面样式渲染为图片后写入相册。相关实现位于视频详情页评论区域 lib/pages/video/detail/reply_new（新评论 UI 实现）。

动态页滑动切换 up

动态详情页支持横向滑动切换不同 up 主的动态流。其实现位于 动态 up 路由面板：

• 顶部为可横向滚动的 TabBar，展示各 up 头像，当前 up 通过AnimatedOpacity+AnimatedScale高亮（不透明度 1、缩放 1），非当前 up 置灰缩小（透明度 0.3、缩放 0.9）；
• 下方为PageView.builder，每个页面渲染一个 up 的动态列表UpDyanmicsPage；
• PageController监听翻页，page.round()得到当前页索引，同步驱动 TabBar 定位（_tabController.animateTo）并触发onClickUp切换加载对应 up 的动态数据；
• 切换操作使用EasyThrottle.throttle做 200ms 节流，配合 lib/utils/feed_back.dart 提供震动反馈。

up 投稿筛选充电视频

up 主投稿页（lib/pages/member_archive）新增排序/筛选维度，其中包含「充电专属」筛选。控制器中维护了排序列表（见 member_archive 控制器）：

RxList<Map<String, String>> orderList = [ ... {'type': 'charge', 'label': '充电专属'}, ];

请求时以order: currentOrder['type']作为参数传入投稿列表接口；视图层（lib/pages/member_archive/view.dart）渲染排序选项，点击后在列表中循环切换，超出末尾时回到第一个排序项。

直播 tab 展示关注 up

直播首页（lib/pages/live）新增「我的关注」板块，展示当前正在直播的关注 up。实现在 直播视图：

• 板块标题「我的关注」右侧展示正在直播人数（${liveFollowingList.length}人正在直播）；
• 数据由_liveController.liveFollowingList（模型见 lib/models/live/follow.dart）提供；
• 横向ListView展示关注主播头像列表LiveFollowingListView，点击任一主播即跳转对应直播间/liveRoom?roomid=xxx，并携带liveItem与heroTag做转场动画；
• 若请求失败则展示服务端返回的错误信息，请求中则保持空白占位。

up 主页专栏展示

up 主主页（lib/pages/member）新增专栏展示区域：

• 控制器加载 up 的合集/专栏数据时，仅保留前 4 个专栏（见 member 控制器：e.archives!.length > 4 ? e.archives!.sublist(0, 4) : e.archives!），避免列表过长；
• 视图层（lib/pages/member/view.dart）根据是否为本人主页显示「我的专栏」或「Ta 的专栏」；
• 专栏项渲染在 lib/pages/member/widgets/seasons.dart，点击可跳转图文专栏详情。

体验优化要点

视频详情页一键三连

视频详情页支持一键同时完成点赞、投币、收藏。实现位于 视频简介控制器：

• 未登录时提示「账号未登录」并直接返回；
• 若三项均已操作（hasLike && hasCoin && hasFav均为 true），提示「UP已经收到了～」，避免重复操作；
• 否则调用VideoHttp.oneThree(bvid)，成功后用接口返回的like、coin、fav状态刷新三个按钮，并提示「三连成功」；
• 触发前有确认弹窗「是否一键三连」（同文件 第 629 行）。

三个状态的读取分别由queryHasLikeVideo、queryHasCoinVideo、queryHasFavVideo完成（点赞/投币/收藏状态查询），收藏查询带有 200ms 延迟以避免竞态。

动态页标识充电视频

动态列表中充电专属内容会显示专属标识，便于区分普通动态与付费（充电）动态。该标识逻辑集成在动态卡片组件中（见 lib/pages/dynamics/widgets 目录下的动态面板组件），与 1.0.25 新增的「up 投稿筛选充电视频」能力相互呼应。

播放器亮度、音量调整百分比展示

播放器在调整亮度或音量时，会在界面以百分比形式展示当前数值，取代原先无反馈的调节方式。亮度控制基于ScreenBrightness插件（见 lib/pages/video/detail/controller.dart 处对ScreenBrightness().resetScreenBrightness()的使用），音量相关逻辑位于 lib/pages/live_room/controller.dart 的setVolumn方法，UI 层提示组件封装于 播放器控件 及底部控制栏。

封面预览时视频标题可复制

在视频封面预览场景下，视频标题支持长按复制，方便分享或搜索。

竖屏直播布局

直播房间适配竖屏显示。控制器维护RxBool isPortrait状态（见 直播房间控制器），由LiveHttp.liveRoomInfo返回的isPortrait字段驱动，播放器与弹幕层随之切换为竖屏布局。

图片预览、私信图片查看

• 图片预览：动态、专栏等场景的图片支持点击放大预览，相关能力位于 pl_gallery（含InteractiveViewer缩放与手势边界处理 interactiveviewer_gallery.dart）；
• 私信图片查看：私信（whisper）会话中的图片消息支持直接点开查看，入口位于 lib/pages/whisper 与 whisper_detail，消息项组件见 chat_item.dart。

专栏渲染优化

专栏正文渲染做了优化，涉及 HTML 渲染组件 lib/common/widgets/html_render.dart 与专栏阅读页 lib/pages/read，改善图片与文本排版表现，并配合下方「专栏浏览历史记录」修复提升阅读体验的连续性。

关键问题修复

1.0.25 修复了以下问题，均可在对应源码位置印证：

• 收藏夹点击异常：修复收藏夹列表项点击无响应或跳转异常的问题（涉及 lib/pages/fav 与 lib/pages/fav_detail）；
• 搜索 up 异常：修复搜索用户结果无法正常进入主页的问题（相关接口见 lib/http/search.dart）；
• 系统通知已读异常：修复系统消息已读状态同步错误（见 lib/pages/message/system）；
• [赞了我的] 展示错误：修复「赞了我的」消息列表展示数据错误（见 lib/pages/message/like）；
• 部分 up 合集无法打开：修复部分合集跳转失败问题（合集相关模型见 lib/models/member/seasons.dart）；
• 切换合集视频投币个数未重置：修复切换合集内视频时投币数量残留的问题，保证每个视频的投币额独立计算；
• 搜索条件筛选面板无法滚动：修复搜索筛选面板在部分机型上无法滚动的问题（见 lib/pages/search_panel 与 lib/pages/search_result）；
• 部分机型导航条未沉浸：修复部分机型底部导航条未能沉浸式适配的问题；
• 专栏图片渲染问题：修复专栏内图片加载/渲染异常（见 lib/common/widgets/network_img_layer.dart 与 lib/pages/read）；
• 专栏浏览历史记录：修复专栏浏览历史未能正确写入的问题；
• 直播间历史记录：修复直播观看历史记录（liveRoomEntry心跳上报，见 直播房间控制器）异常的问题。

小结

PiliPala 1.0.25 在直播弹幕、收藏体系与动态浏览三大方向完成了一次扎实的功能补强：直播弹幕从「获取弹幕服务器 → WebSocket 连接 → 消息解码 → 弹幕渲染」形成完整闭环；收藏夹新建/编辑与「播放全部」让收藏内容管理更顺手；动态页滑动切换 up、充电视频筛选等能力则优化了高频浏览场景。所有功能均可在 lib 源码与 change_log 更新日志中找到对应实现，便于开发者继续深入阅读与二次开发。

注：以上功能均为 PiliPala 1.0.25 版本（对应 change_log/1.0.25.1010.md）所包含的能力，具体接口参数与交互细节以当前仓库源码为准。

• 移动开发