# 平台首页响应式布局优化设计

更新时间：`2026-04-24`

## 1. 问题结论

当前平台首页桌面端视觉方向成立，但移动端存在明显横向溢出：Hero 右侧按钮、底部导航末项和部分卡片会被裁切。问题根因不是数据逻辑，而是桌面式固定宽度、外层 padding 与若干卡片最小宽度在窄屏下叠加，超过了 `100vw`。

## 2. 本次目标

- 移动端优先保证首页不横向滚动、不裁切底部导航。
- Hero 在手机宽度下改为紧凑单列，标题、按钮和标签都完整显示。
- 桌面端降低外框视觉噪声，让主内容和 CTA 更清晰。
- 空状态区域收敛高度，避免首屏出现大面积空白。

## 3. 编码落点

- `src/components/rpg-runtime-shell/RpgRuntimeStageRouter.tsx`
  - 平台壳移动端使用更小边距，避免根容器加宽。
- `src/components/rpg-entry/RpgEntryHomeView.tsx`
  - 移动端根节点显式 `min-w-0` 与 `overflow-hidden`。
  - 底部导航外层不再额外制造宽度。
  - Hero/内容卡片补充 `min-w-0`，窄屏内按容器收缩。
- `src/index.css`
  - 全局与平台壳禁止横向溢出。
  - 移动端压缩底部导航间距、字号和图标壳尺寸。
  - 移动端收敛 `platform-page-stage` 圆角与边框层级。
  - 桌面端保留卡片质感，但弱化多层外框阴影。

## 4. 验收标准

- `390px` 宽度截图中，首页内容、Hero 按钮和底部四个导航项完整可见。
- 桌面端首页仍保持顶部栏、侧边导航、主推荐区和右侧趋势区结构。
- 页面不新增功能说明类 UI 文案。
- 修改中文文件后通过编码检查。