Genarrative/docs/technical/PLATFORM_MAIN_TAB_RENDER_STABILITY_FIX_2026-04-22.md

平台主 Tab 渲染稳定性修复

日期：2026-04-22

问题现象

平台首页在“首页 / 创作 / 存档 / 我的”之间切换时，页面组件会出现短暂闪烁、错位或像是先渲染上一页元素再变成当前页的感觉。

根因拆解

本次问题集中在表现层：

1. 四个主 Tab 共用同一个 content 根节点，React 在条件分支切换时会按位置复用上一页 DOM，图片卡片、面板和按钮容易在首帧被改造成新页面结构。
2. 移动端和桌面端都共用一个滚动容器，切到新 Tab 时会继承上一页的 scrollTop，用户会先看到错位位置或短暂空白。
3. 创作中心等重页面被卸载后再挂载，内部筛选状态、图片加载状态和布局测量会重新跑一遍，来回切换时会放大闪烁。

修复策略

1. 主 Tab 内容改为稳定面板栈，四个 Tab 各自拥有独立的内容根节点。
2. 非当前 Tab 使用隐藏类保留挂载，不参与布局和交互，避免每次切换销毁再重建页面。
3. 每个 Tab 面板自带独立滚动容器，切换时不再继承其他 Tab 的滚动位置。
4. 桌面端首页保留控制台化布局，非首页 Tab 继续复用移动端内容结构，但放入桌面独立滚动面板中。

后续约束

1. 平台主 Tab 新增页面时，优先加入现有面板栈，不要恢复成单个 content 条件分支。
2. Tab 切换只做可见性切换，不要默认触发页面级 AnimatePresence 进出场。
3. 需要展示加载态时，优先在当前 Tab 内部局部展示骨架，不要把整页替换为空白加载页。
4. UI 中不增加规则说明类文案，只保留入口、状态和业务信息。

验收要点

1. 手机端连续点击四个底部 Tab，不出现上一页元素先闪一下再变成当前页。
2. 在首页滚动后切到“我的 / 存档”，新页面不继承首页滚动位置。
3. 创作 Tab 来回切换后，创作中心内部筛选和已加载卡片保持稳定。
4. 桌面端左侧导航切换时，顶部栏和左侧导航不重挂载，主内容不出现整页淡入闪烁。