企业官网建设流程全解析

Folo 桌面端 v0.2.7 发布解析：Move to Category 操作、长社交媒体自动展开与阅读进度 Back Top 指示器

【免费下载链接】follow🧡 Folo is the AI RSS Reader项目地址: https://gitcode.com/GitHub_Trending/fol/follow

Folo（AI RSS Reader）桌面端 v0.2.7 的发布说明（changelog）记录了四项新功能与两项缺陷修复，集中在“订阅管理操作”“社交媒体内容呈现”“长文阅读辅助”三个方向。本文以该发布说明为骨架，结合当前仓库中对应的渲染层源码、设置项定义与多语言文案，逐条解析每个功能的具体行为、底层实现与可验证的代码位置，帮助你在 Folo 中实际使用这些特性，并为后续二次开发提供源码级参考。

发布概览：v0.2.7 的完整变更清单

apps/desktop/changelog/0.2.7.md 记录的变更如下，后文逐一展开：

新功能一：订阅右键菜单中的 Move to Category

v0.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.tsx：

defineSettingItem("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.json）：

"general.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.tsx：

const 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 在内容阅读区域加入了两个阅读辅助：

1. 阅读进度指示器：以圆形进度 + 百分比数字实时显示当前读到文章的哪个位置；
2. Back Top按钮：点击后平滑滚回条目顶部。

两者都实现在 ContainerToc.tsx 中，与目录（Toc）同处条目右侧的悬浮辅助栏（宽 100px，@[770px]:block在窗口足够宽时显示）。

阅读百分比的计算逻辑

进度值由useReadPercenthook 计算（ContainerToc.tsx）：

const 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 className="i-mingcute-arrow-up-circle-line" /> <span className="whitespace-nowrap">Back 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 修复了两个缺陷，均与导航/视图状态相关：

1. 方向切换后 pending 视图返回导航异常：原文为 “Resolved issue where back navigation to the pending view would not behave correctly after changing orientation in some device”，即部分设备旋转屏幕（orientation 变化）后，从 pending（待处理）视图执行返回导航时行为不正确。这类问题通常与屏幕方向变化触发的布局重建、路由/视图栈状态不同步有关，修复保证了 pending 视图在方向切换场景下的返回一致性。
2. picture 视图无法过滤无图条目：原文为 “Fixed issue can't filter entries with no picture in the picture view”，即图片（picture）视图中无法把没有图片的条目过滤掉，修复后该视图的过滤逻辑能正确剔除无图条目。

如何对照源码验证本文内容

如果你想逐条核对 v0.2.7 的发布说明与当前代码的关系，可按以下路径深入：

需要注意的是，本文结论基于当前仓库快照：Move to Category、autoExpandLongSocialMedia、Back Top 进度指示器等能力在现有代码中均能直接定位到实现；Independent Action page 与两项 bug 修复在发布说明中仅有一行描述，本文对其的补充均来自源码结构的谨慎推断，引用时请以客户端实际表现为准。

【免费下载链接】follow🧡 Folo is the AI RSS Reader项目地址: https://gitcode.com/GitHub_Trending/fol/follow