1

docs/design/PLATFORM_HOME_RESPONSIVE_LAYOUT_OPTIMIZATION_2026-04-24.md

@@ -0,0 +1,35 @@
+# 平台首页响应式布局优化设计
+
+更新时间：`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 文案。
+- 修改中文文件后通过编码检查。