广场的发布游戏与我的游戏入口上移到 hero 右上角

- GameGalleryPage 新增 .game-page-actions 一行,把「发布游戏」「我的游戏」从 hero 下方的工具栏动作区移出,右对齐放在 hero 上方
- 工具栏只保留「游戏广场」标题与搜索框,不再和入口按钮挤在一行
- .game-page-actions 设 flex-end、0.6rem 间距与 1.1rem 底部间距;两个入口都不可用时整行不渲染,hero 位置不变
- 实测 390/360/820 三档:按钮在 hero 之上、与 hero 间距 18px、右边缘与 hero 对齐
- 里程碑文档记录该布局调整
This commit is contained in:
2026-09-30 12:57:00 +08:00
parent baca440c5d
commit 0d3937b7eb
3 changed files with 33 additions and 19 deletions
@@ -327,5 +327,6 @@
- **游玩页不再可滚**:移动端此前是整页可滚的半屏播放器。原因是面板仍是 `overflow-auto`,而播放器用 `min-height: calc(100dvh - 8rem)` 撑高页面。现在 `PlatformEntryActiveFlowShell.tsx` 在 `game-play` 舞台给页签容器加 `platform-tab-panel--game-play`(不滚动、去掉多余内边距),`.game-play-page` 改为 `height: 100%; min-height: 0`,播放器 `flex: 1; min-height: 0` 撑满剩余高度;矮视口(`max-height: 26rem`,横屏手机)另给启动面板一套压扁布局,兜底只在极端高度下发生在启动卡片内部,页面与面板本身始终不滚动。启动面板纵向对齐用 `safe center`(`center` 作旧浏览器回退)并把 `overflow-y: auto` 放在基础规则:居中溢出会把顶部标题裁到 `scrollTop = 0` 也够不到的位置,只加内部滚动并不能修掉。回归用例 `PlatformEntryActiveFlowShell.test.tsx`「游玩舞台的页签容器不滚动」「游戏广场等舞台仍保持页签容器滚动」双向锁定。
- **「我的游戏」列表与画廊同口径**:`.my-game-list` 的单列 `auto` 轨道会被 `white-space: nowrap` 的简介顶到内容最小宽度(实测 592px),加上 `.my-game-card` 缺 `min-width: 0`,390/360 宽的手机上卡片超出视口、面板横向可滚且看着不居中。现在改成画廊那套口径(`grid-template-columns: minmax(0, 1fr)`、`.my-game-card { min-width: 0; overflow: hidden }`、标题 `min-width: 0; overflow-wrap: anywhere`);真实 Chromium 夹具在 390/360 下量到轨道=卡片=可视宽、面板横向溢出 0(改前 592px 卡片、横向可滚 230/260px)。
- **页签面板左右留白对齐**:`.platform-tab-panel` 原本写死 `padding-right`(并在移动端与 workbench 两处再压成 0),而它是不分层规则、优先级高于 Tailwind 的 `padding-inline`,导致面板左 12/24px、右 0,列表左右留白 28/16。三处 `padding-right` 删除后左右统一由使用处的 `px-3`/`sm:px-6` 决定:390 下 12/12(列表 28/28)、820 下 24/24(列表 44/44),无 px 类的舞台仍是 0/0;Chromium 夹具实测「我的游戏」与画廊两张页面同时恢复对称,且横向溢出保持 0。
- **广场的「发布游戏」「我的游戏」上移到 hero 右上角**:两个入口原本混在 hero 下方的 `.game-toolbar` 动作区(和搜索框同排),现在提到 `.game-page-actions` 一行、右对齐放在 hero 上方,并留 1.1rem 底部间距;工具栏只保留标题与搜索。未登录或灰度未命中时两者都不渲染,该行随之消失。Chromium 夹具实测 390/360/820 三档都是 `aboveHero=true`、与 hero 间距 18px、右边缘与 hero 对齐。
- 真机口径的守卫补在现役 E2E 里:`scripts/check-game-distribution-web-e2e.mjs` 的移动端段新增「移动端游玩页不可滚动(面板与整页都不溢出)」,断言 `.platform-tab-panel` 的 `overflow-y` 为 `hidden` 且面板与整页都不溢出(该脚本需真实本地栈,未在本轮执行)。
- 验证:`npx vitest run src/components/game-distribution/GameDistributionPages.test.tsx`(21 passed)、`npx vitest run src/components/platform-entry/PlatformEntryActiveFlowShell.test.tsx`(20 passed)、`npm run typecheck`、`npx eslint`(四个改动文件)、`npm run check:encoding`、`git diff --check` 全部通过;启动面板的溢出可达性、「我的游戏」移动端横向溢出都用真实 Chromium 静态夹具量过(见 pitfalls 同日条目)。视觉与真机横竖屏走查仍需人工/截图评审(沿用阶段 C 第 8 条未取证口径)。
@@ -275,8 +275,33 @@ export function GameGalleryPage({
[onOpenDetail, scrollKey],
);
const hasPageActions = Boolean(onOpenPublish || onOpenMyGames);
return (
<div className="game-page" ref={attachPageRoot}>
{hasPageActions ? (
<div className="game-page-actions">
{onOpenPublish ? (
<PlatformActionButton
size="sm"
shape="pill"
onClick={onOpenPublish}
>
发布游戏
</PlatformActionButton>
) : null}
{onOpenMyGames ? (
<PlatformActionButton
tone="secondary"
size="sm"
shape="pill"
onClick={onOpenMyGames}
>
我的游戏
</PlatformActionButton>
) : null}
</div>
) : null}
<section className="game-hero">
<div className="game-hero__copy">
<span className="game-eyebrow">
@@ -313,25 +338,6 @@ export function GameGalleryPage({
<h2>游戏广场</h2>
</div>
<div className="game-toolbar__actions">
{onOpenPublish ? (
<PlatformActionButton
size="sm"
shape="pill"
onClick={onOpenPublish}
>
发布游戏
</PlatformActionButton>
) : null}
{onOpenMyGames ? (
<PlatformActionButton
tone="secondary"
size="sm"
shape="pill"
onClick={onOpenMyGames}
>
我的游戏
</PlatformActionButton>
) : null}
<label className="game-search">
<Search aria-hidden="true" />
<input
@@ -13,6 +13,13 @@
margin: 0 auto;
}
.game-page-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
/* 站点级动作放在 hero 上方的右上角,与 hero 之间留出间距。 */
margin-bottom: 1.1rem;
}
.game-hero {
position: relative;
display: flex;