From e405a4f36f299b3117fc732c0e53691789efe7c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= Date: Wed, 30 Sep 2026 12:04:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B8=B8=E7=8E=A9=E9=A1=B5?= =?UTF-8?q?=E5=90=AF=E5=8A=A8=E9=9D=A2=E6=9D=BF=E5=B1=85=E4=B8=AD=E6=BA=A2?= =?UTF-8?q?=E5=87=BA=E5=AF=BC=E8=87=B4=E9=A1=B6=E9=83=A8=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E6=BB=9A=E4=B8=8D=E5=88=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .game-player-launch 纵向对齐由 center 改为 safe center（保留 center 作旧浏览器回退），溢出时退回 start，不再把标题裁到 scrollTop=0 也够不到的位置 - 同步修正 ≤820px 与 max-height:26rem 两处媒体查询里的 align-content - 把 overflow-y: auto 提到 .game-player-launch 基础规则，启动卡片成为唯一的内部滚动兜底，页面与 .platform-tab-panel 仍保持 overflow:hidden - pitfalls 记录该故障模式（居中溢出叠加内部滚动会让负方向那半不可达）与真实 Chromium 夹具判据 - 里程碑文档补上 safe center 口径与取证说明 --- ...里程碑】游戏分发目录详情与在线游玩-2026-09-18.md | 4 ++-- docs/project-memory/shared-memory/pitfalls.md | 8 ++++++++ .../game-distribution/gameDistribution.css | 12 +++++++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/project-memory/plans/【里程碑】游戏分发目录详情与在线游玩-2026-09-18.md b/docs/project-memory/plans/【里程碑】游戏分发目录详情与在线游玩-2026-09-18.md index 015600f54..67d08a2f3 100644 --- a/docs/project-memory/plans/【里程碑】游戏分发目录详情与在线游玩-2026-09-18.md +++ b/docs/project-memory/plans/【里程碑】游戏分发目录详情与在线游玩-2026-09-18.md @@ -324,6 +324,6 @@ ## 网页侧两处交互修正（2026-09-30） - **广场首屏「立即试玩」不再替用户选中作品**：`src/components/game-distribution/GameGalleryPage.tsx` 原来是 `onClick={() => featuredGame && openDetail(featuredGame.id)}`，点一下等于直接打开第一款游戏的详情。现在按钮只把列表滚进视野（按平台页签面板计算相对偏移，`scrollTo({ behavior: 'smooth' })`，无 `scrollTo` 时退化成直接赋值），不再触发 `onOpenDetail`；`featuredGame` 派生随之退役。回归用例 `GameDistributionPages.test.tsx`「首屏「立即试玩」滚动到列表，而不是打开第一款游戏详情」断言 `onOpenDetail` 未被调用且滚动落在页签面板上。 -- **游玩页不再可滚**：移动端此前是整页可滚的半屏播放器。原因是面板仍是 `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`，横屏手机）另给启动面板一套压扁布局，兜底只在极端高度下发生在启动卡片内部，页面与面板本身始终不滚动。回归用例 `PlatformEntryActiveFlowShell.test.tsx`「游玩舞台的页签容器不滚动」「游戏广场等舞台仍保持页签容器滚动」双向锁定。 +- **游玩页不再可滚**：移动端此前是整页可滚的半屏播放器。原因是面板仍是 `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`「游玩舞台的页签容器不滚动」「游戏广场等舞台仍保持页签容器滚动」双向锁定。 - 真机口径的守卫补在现役 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` 全部通过。视觉与真机横竖屏走查仍需人工/截图评审（沿用阶段 C 第 8 条未取证口径）。 +- 验证：`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 条未取证口径）。 diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md index c9e9f00c3..c7eafc70e 100644 --- a/docs/project-memory/shared-memory/pitfalls.md +++ b/docs/project-memory/shared-memory/pitfalls.md @@ -6100,3 +6100,11 @@ Cocos Creator 根目录由 `package.json.creator.version` 与普通 `assets/` - **做法**：`npm run check:agc-direct-execution-fixture -- --agc-exe "<已安装渠道包的主程序绝对路径>" --cases completed`。夹具在临时项目和 loopback Provider 上跑 CLI 执行链路，可直接核对已安装包的随包 Codex。 - **判读**：若报 `Codex app-server JSON-RPC 失败`，sidecar 已启动并返回协议错误，应先检查请求体及已安装包的源码版本；若根本无法启动，再查安装目录 `coding-agent/win-x64/manifest.json` 的组件哈希、`codex-package.json` 的版本和缺失组件。夹具模式中的 `remote_control disabled reason=provider-proxy-auth` 是预期诊断行。 + +## 2026-09-30 居中溢出叠加内部滚动，会把顶部内容裁到滚不到的地方（游玩页启动面板） + +- **现象**：极矮视口（横屏手机，游玩页 `max-height: 26rem` 那一档）里启动面板内容比容器高时，标题与简介被裁在容器上方，`scrollTop` 已经到 0 也够不到，看起来像「标题凭空消失」。 +- **根因**：`.game-player-launch` 同时有 `align-content: center`（两列布局下是 `align-items: center`）与 `overflow-y: auto`。溢出量被居中分配成上下各一半，负方向那一半落在滚动范围之外——滚动只能从 0 开始，所以顶部永远不可达。只给 `overflow-y: auto` 或只改居中都修不掉。 +- **处理**：纵向对齐改用 `safe center`（先写 `align-content: center` / `align-items: center` 作旧浏览器回退，再写 `safe center`），溢出时退回 start；并把 `overflow-y: auto` 提到基础规则，让启动卡片成为唯一的内部滚动兜底，页面与 `.platform-tab-panel` 本身仍保持 `overflow: hidden`。 +- **判据**：真实 Chromium 夹具（`tmp/launch-overflow-check`，把 `gameDistribution.css` 直接链进静态页面）在 `844x200` 下量：改回 `center` 时 `titleTopAtScrollZero = -20`（不可达），改成 `safe center` 后为 `+12`（可达），滚到底按钮同样可达；`390x844` 与 `1280x800` 正常视口不溢出，位置与改前一致。 +- **关联**：`src/components/game-distribution/gameDistribution.css` 的 `.game-player-launch` 与两处媒体查询、`src/components/game-distribution/GamePlayPage.tsx`。 diff --git a/src/components/game-distribution/gameDistribution.css b/src/components/game-distribution/gameDistribution.css index dad457374..227c4a3e6 100644 --- a/src/components/game-distribution/gameDistribution.css +++ b/src/components/game-distribution/gameDistribution.css @@ -551,7 +551,14 @@ inset: 0; display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); + /* + * safe：内容比容器高时退回 start，配合下面的兜底滚动，顶部标题与「开始游戏」 + * 都不会像居中溢出那样被裁到滚不到的位置。 + * 启动卡片是唯一允许内部滚动的兜底，页面与面板本身始终不滚动。 + */ align-items: center; + align-items: safe center; + overflow-y: auto; gap: clamp(1.1rem, 4vw, 2.8rem); padding: clamp(1rem, 4vw, 2.5rem); background: linear-gradient(135deg, #1e1820, #302329); @@ -700,7 +707,9 @@ } .game-player-launch { grid-template-columns: 1fr; + /* safe：内容比容器高时退回 start，避免居中把顶部标题裁到滚不到的地方。 */ align-content: center; + align-content: safe center; gap: 1rem; text-align: center; } @@ -727,11 +736,12 @@ @media (max-height: 26rem) { .game-player-launch { grid-template-columns: minmax(0, 1fr); + /* 单行布局下由 align-content 决定纵向位置，同样必须用 safe。 */ align-content: center; + align-content: safe center; gap: 0.5rem; padding: 0.75rem 1rem; text-align: center; - overflow-y: auto; } .game-player-launch .game-cover { display: none;