Skip to content

feat: 重构分享保存图片逻辑,支持长图模式,新增动态、专栏、视频分享保存图片 - #2521

Open
WindDrift wants to merge 2 commits into
bggRGjQaUbCoE:mainfrom
WindDrift:main
Open

feat: 重构分享保存图片逻辑,支持长图模式,新增动态、专栏、视频分享保存图片#2521
WindDrift wants to merge 2 commits into
bggRGjQaUbCoE:mainfrom
WindDrift:main

Conversation

@WindDrift

Copy link
Copy Markdown

背景

现有的"保存动态"功能存在多项体验问题:

  1. 二维码无法识别:生成的二维码使用 bilibili:// 协议链接,大部分软件(如 QQ 、微信)无法扫码识别
  2. 分享入口不便:动态详情页底部"分享"按钮直接唤起系统分享面板,无法选择"保存为图片"或"站内消息"
  3. 图片排版限制:图片强制 1:1 方形网格,非正方形图片显示不全
  4. 视频/专栏不支持:视频和专栏内容无法生成分享图片

更改内容

图片左侧为 Android 构建,更改内容,右侧为 Windows 2.1.0 Release 版,不含更改内容。

1. 菜单项重命名

  • 三点菜单中"保存动态" → "保存为图片"
  • 三点菜单中"分享动态" → "分享链接"
image

2. 二维码改用 https 网页链接

parseDyn 中各动态类型的 bilibili:// 协议改为对应的 https:// 网页链接:

动态类型 链接格式
视频 (DYNAMIC_TYPE_AV) https://www.bilibili.com/video/{bvid}
专栏 (DYNAMIC_TYPE_ARTICLE) https://www.bilibili.com/opus/{idStr}
直播 (DYNAMIC_TYPE_LIVE_RCMD) https://live.bilibili.com/{roomId}
合集 (DYNAMIC_TYPE_UGC_SEASON) https://www.bilibili.com/video/{bvid}
番剧 (DYNAMIC_TYPE_PGC/PGC_UNION) https://www.bilibili.com/bangumi/play/ep{epid}
收藏夹 (DYNAMIC_TYPE_MEDIALIST) https://www.bilibili.com/medialist/detail/ml{mediaId}
默认(图文/纯文字/转发) https://t.bilibili.com/{idStr}

同时将评论的 bilibili://comment/detail/ 链接改为所在内容的 https 网页链接。

3. 抽取可复用的分享列表

  • 新增 AuthorPanel.shareSheetItems:返回"保存为图片""分享链接""分享至消息"三项 ListTile,供 morePanel 复用
  • 新增 AuthorPanel.showShareSheet:弹出 BottomSheet 分享列表,供动态详情页调用

4. 动态详情页底部"分享"按钮改为弹出列表

  • 点击"分享"按钮弹出 BottomSheet,包含三项:保存为图片 / 分享链接 / 分享至消息
image

5. SavePanel 新增"长图切换"按钮

  • 底部按钮从 4 个增至 5 个:关闭 | 隐藏/显示 | 长图切换 | 分享 | 保存
  • 新增 isLongImageMode 状态(默认网格模式)
image

6. 长图排版模式

  • 长图模式下图片垂直堆叠满宽显示,按原比例完整呈现
  • 单张图片高度超过宽度 4 倍时,从顶部裁切
  • 仅影响图片网格区域,不影响封面、标题、UP 主信息等
image image

7. 视频分享图片生成

  • 视频页"分享"对话框新增"保存为图片"选项
  • 生成的分享图片包含:封面大图(时长/播放量/弹幕叠加在左下角)、标题、完整简介、底部 UP 主名与二维码
image

8. 专栏分享图片生成

  • 专栏页三点菜单新增"保存为图片"
  • 专栏页底部"分享"按钮改为弹出列表(保存为图片 / 分享链接 / 分享至消息)
  • 生成的分享图片包含:封面置顶大图(无封面取正文首图)、标题、正文前 100 字、底部 UP 主名与二维码
image

涉及文件

文件 文件说明 修改内容
lib/pages/dynamics/widgets/author_panel.dart 动态卡片作者信息面板,含更多操作菜单 重命名菜单项;抽取 shareSheetItems/showShareSheet 可复用方法
lib/pages/save_panel/view.dart 分享保存面板,渲染内容并通过 RepaintBoundary 导出为图片 二维码改 https;新增长图切换按钮;支持 VideoDetailData/ArticleShareData;新增 ArticleShareData 类
lib/pages/dynamics_detail/view.dart 动态详情页 底部"分享"按钮改为弹出列表
lib/pages/dynamics/widgets/content_panel.dart 动态正文内容渲染(文字、图片网格) 长图模式 Column 垂直堆叠布局
lib/pages/dynamics/widgets/dyn_content.dart 动态内容组装入口,聚合正文与模块 透传 isLongImageMode
lib/pages/dynamics/widgets/dynamic_panel.dart 动态卡片整体面板容器 新增 isLongImageMode 参数
lib/pages/video/introduction/ugc/controller.dart UGC 视频简介页控制器 actionShareVideo 新增"保存为图片"
lib/pages/article/view.dart 专栏文章页面 三点菜单新增"保存为图片";底部"分享"改为弹出列表;抽取辅助方法

实现说明

  • 长图模式:在 content_panel.dartLayoutBuilder + Column 实现垂直堆叠,未修改 image_grid_builder.dart(其 _calcGridInfo 返回单一 Size 不支持每图独立高度),更简单且满足需求
  • 专栏数据传递:新增 ArticleShareData 容器类封装封面/标题/正文/作者/链接,避免 SavePanel 依赖 ArticleController
  • 评论链接/musicDetail 保留原 bilibili:// 协议(music 无网页版);/Scaffold 改用 enterUri 作为 uri

测试构建

  • Android 与 Windows 实机测试通过
  • 其余功能(隐藏二维码、通过系统分享生成的图片、保存图片)测试通过
  • 全平台构建通过

代码由 GLM 5.2 撰写,本人已测试功能正常运行。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant