Folo 桌面端 v0.2.7 发布解析Move to Category 操作、长社交媒体自动展开与阅读进度 Back Top 指示器【免费下载链接】follow Folo is the AI RSS Reader项目地址: https://gitcode.com/GitHub_Trending/fol/followFoloAI RSS Reader桌面端 v0.2.7 的发布说明changelog记录了四项新功能与两项缺陷修复集中在“订阅管理操作”“社交媒体内容呈现”“长文阅读辅助”三个方向。本文以该发布说明为骨架结合当前仓库中对应的渲染层源码、设置项定义与多语言文案逐条解析每个功能的具体行为、底层实现与可验证的代码位置帮助你在 Folo 中实际使用这些特性并为后续二次开发提供源码级参考。发布概览v0.2.7 的完整变更清单apps/desktop/changelog/0.2.7.md 记录的变更如下后文逐一展开类别变更说明New FeatureMove to Category订阅feed右键上下文菜单新增“移动到分类”操作New FeatureExpand long social media新增设置项自动展开包含长文本的社交媒体条目New FeatureBack Top按钮 阅读进度指示器条目内容区新增返回顶部按钮与百分比进度显示New FeatureIndependent Action page独立的 Action 页面Bug Fix方向切换后 pending 视图返回导航异常部分设备旋转屏幕后返回到 pending 视图行为不正确的问题已修复Bug Fix图片视图无法过滤无图条目picture 视图中无法过滤掉没有图片的条目已修复新功能一订阅右键菜单中的 Move to Categoryv0.2.7 为 feed 订阅列表的上下文菜单新增了Move to Category移动订阅到分类操作用于将某个订阅归入指定分类替代“删除后重新添加”的手动流程降低批量整理订阅的成本。从源码结构看feed 列的右键操作复制 URL、复制 RSS、移动到分类等统一收敛在 useFeedActions 这个业务 hook 中其中第 187 行注册了该操作label: t(sidebar.feed_column.context_menu.add_feeds_to_category),其展示文案由多语言资源驱动locales/app/en.json 中对应的键值为sidebar.feed_column.context_menu.add_feeds_to_category: Move to Category移动端也有同一能力的对应文案locales/mobile/default/en.json 中的operation.add_feeds_to_category说明这是跨端共享的订阅管理能力桌面端在 v0.2.7 中将其落到了订阅列的右键菜单上。新功能二Expand long social media 设置项社交媒体如 X/Twitter 等来源的条目文本长短差异很大。默认情况下 Folo 会对社交媒体条目做折叠处理避免短内容也占用大量纵向空间v0.2.7 新增了Expand long social media设置让包含长文本的社交媒体条目自动展开避免读者逐条手动点开。设置项定义与 UI 入口该设置在桌面端设置页“通用”标签中定义见 settings/tabs/general.tsxdefineSettingItem(autoExpandLongSocialMedia, { label: t(general.auto_expand_long_social_media.label), description: t(general.auto_expand_long_social_media.description),设置键autoExpandLongSocialMedia注册在通用设置的 schema 中atoms/settings/general.ts并包含在跨端共享的设置接口 packages/internal/shared/src/settings/interface.ts 中保证桌面端与移动端对同一键有统一约束。对应的多语言文案locales/settings/en.jsongeneral.auto_expand_long_social_media.label: Expand long social media, general.auto_expand_long_social_media.description: Automatically expand social media entries containing long text.中文环境下locales/settings/zh-CN.json显示为“展开长社交媒体 / 自动展开包含长文本的社交媒体条目”。桌面端渲染层实现该设置的实际消费点在社交媒体条目的渲染组件 social-media-item.tsxconst autoExpandLongSocialMedia useGeneralSettingKey(autoExpandLongSocialMedia) // ... const EntryContentWrapper autoExpandLongSocialMedia ? PassviseFragment : CollapsedSocialMediaItem实现逻辑非常直接读取该设置后决定用哪种内容包裹层渲染条目正文——开启时选择PassviseFragment透传片段即正文 HTML 直接完整渲染不做折叠截断关闭时选择CollapsedSocialMediaItem正文默认折叠需要用户交互才能查看完整内容。组件同时通过parseSocialMedia(...)解析authorUrl/url/guid得到来源类型与 handle例如 X 的账号会额外渲染handle链接与平台图标这部分逻辑不受该设置影响。移动端的一致性实现从源码结构看同一设置键也驱动移动端条目列表的展示EntrySocialItem.tsx 中关闭设置时正文截断为 7 行numberOfLines{7}开启时不限制行数。设置开关入口位于移动端设置页 General.tsx。也就是说autoExpandLongSocialMedia是一个“语义为内容呈现策略”的跨端设置桌面端切换渲染包裹组件移动端切换文本行数上限两端行为一致——长文本社交媒体条目自动完整展示。新功能三条目内容区的 Back Top 按钮与阅读进度指示器对于长文条目v0.2.7 在内容阅读区域加入了两个阅读辅助阅读进度指示器以圆形进度 百分比数字实时显示当前读到文章的哪个位置Back Top按钮点击后平滑滚回条目顶部。两者都实现在 ContainerToc.tsx 中与目录Toc同处条目右侧的悬浮辅助栏宽 100px[770px]:block在窗口足够宽时显示。阅读百分比的计算逻辑进度值由useReadPercenthook 计算ContainerToc.tsxconst useReadPercent () { const y 55 const { h } useWrappedElementSize() const scrollElement useScrollViewElement() const [scrollTop, setScrollTop] useState(0) // 监听滚动容器 scrollTop 变化 // ... const readPercent useMemo(() { const winHeight getViewport(store).h const deltaHeight Math.min(scrollTop, winHeight) return Math.floor( Math.min(Math.max(0, ((scrollTop - y deltaHeight) / h) * 100), 100), ) || 0 }, [store, scrollTop, h]) return [readPercent, scrollTop] }可以推断其计算模型为以条目内容的总高度h为分母用当前scrollTop减去一个 55px 的头部偏移y再加上可视窗口高度deltaHeight封顶为视口高度得到“已读区域”的比例再经Math.floor与 0~100 的区间钳制后输出百分比。该 hook 通过监听滚动容器的scroll事件实时更新属于典型的“基于滚动位置”的进度条方案而非基于内容元素位置的方案。Back Top 按钮的显示策略与滚动行为BackTopIndicator组件同文件 L48-L92将进度指示与返回按钮组合在竖排容器中MotionButtonBase onClick{() { springScrollTo(0, scrollElement!) }} className{cn( mt-1 flex flex-nowrap items-center gap-2 opacity-50 transition-all duration-500 hover:opacity-100, readPercent! 10 ? : pointer-events-none opacity-0, )} i classNamei-mingcute-arrow-up-circle-line / span classNamewhitespace-nowrapBack Top/span /MotionButtonBase两个值得注意的实现细节显隐阈值只有当阅读进度超过 10% 时按钮才可见可点readPercent! 10时移除pointer-events-none opacity-0避免用户刚进入条目、几乎未滚动时按钮就出现回弹式滚动点击后调用springScrollTo(0, scrollElement)来自follow/utils的 scroller 工具做弹簧动画滚动到顶部而不是scrollTo的瞬时跳转与 Folo 整体偏动效的 UI 风格一致。同区域的CircleProgress{readPercent}%即 changelog 截图中所示的环形进度。此外当 AI 功能可用useFeature(ai)时该指示栏还会附带一个Ask AI快捷入口——这是后续版本叠加的能力但可帮助理解该辅助栏“阅读进度 快捷操作”的定位。新功能四独立的 Action 页面changelog 将 “Independent Action page”独立的 Action 页面列为 v0.2.7 的第四项新功能未附详细说明。从源码结构看Folo 将各类“操作”逻辑集中在业务 hook 中组织例如 useFeedActions 统一管理 feed 列上下文菜单的操作集合其中就包含上文提到的Move to Category独立的 Action 页面可以推断是把这些常用操作从分散的右键菜单中抽离出来聚合成一个可直达的独立页面入口方便用户不依赖上下文菜单也能执行常用操作。由于发布说明本身未展开描述具体交互范围建议以实际客户端为准。Bug 修复详解v0.2.7 修复了两个缺陷均与导航/视图状态相关方向切换后 pending 视图返回导航异常原文为 “Resolved issue where back navigation to the pending view would not behave correctly after changing orientation in some device”即部分设备旋转屏幕orientation 变化后从 pending待处理视图执行返回导航时行为不正确。这类问题通常与屏幕方向变化触发的布局重建、路由/视图栈状态不同步有关修复保证了 pending 视图在方向切换场景下的返回一致性。picture 视图无法过滤无图条目原文为 “Fixed issue cant filter entries with no picture in the picture view”即图片picture视图中无法把没有图片的条目过滤掉修复后该视图的过滤逻辑能正确剔除无图条目。如何对照源码验证本文内容如果你想逐条核对 v0.2.7 的发布说明与当前代码的关系可按以下路径深入主题入口文件发布说明原文apps/desktop/changelog/0.2.7.mdMove to Category 菜单操作apps/desktop/layer/renderer/src/hooks/biz/useFeedActions.tsx该操作的英文文案locales/app/en.jsonExpand long social media 设置定义apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx、apps/desktop/layer/renderer/src/atoms/settings/general.ts桌面端消费逻辑展开/折叠切换apps/desktop/layer/renderer/src/modules/entry-column/Items/social-media-item.tsx移动端对应实现apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsxBack Top 与阅读进度apps/desktop/layer/renderer/src/modules/entry-content/components/entry-content/accessories/ContainerToc.tsx共享设置接口packages/internal/shared/src/settings/interface.ts需要注意的是本文结论基于当前仓库快照Move to Category、autoExpandLongSocialMedia、Back Top 进度指示器等能力在现有代码中均能直接定位到实现Independent Action page 与两项 bug 修复在发布说明中仅有一行描述本文对其的补充均来自源码结构的谨慎推断引用时请以客户端实际表现为准。【免费下载链接】follow Folo is the AI RSS Reader项目地址: https://gitcode.com/GitHub_Trending/fol/follow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考