# 平台主 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. 桌面端左侧导航切换时，顶部栏和左侧导航不重挂载，主内容不出现整页淡入闪烁。