窄屏清单改单列 224（不截断）；共创广场 hero「立即试玩」改「浏览作品」
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
1. **共创页卡片指标位 = 「被共创 N 次」（不是游玩次数）**。用户原话：「并非游玩次数，而是共创次数」（截图圈的是卡片标题行右侧那处）。做法：共享卡 `GameCard` 新增**可选 `metric` 槽**（不传 = 原来的「N 次游玩」，默认行为一字不改），只有 `scope="forkable"` 的共创页传；**封面角标「共创 N」删除**（同一张卡只留一处计数）。文案选**被动式「被共创 N 次」**：避免「共创 N 次」读成主动语态，且平台已有「累计被共创次数」词汇；`aria-label` 同名。突出方式：`--platform-accent-strong`（实测 `rgb(199,101,61)`）+ `700` + `0.72rem`（默认指标 `0.66rem` / `--platform-text-soft`）+ `Sparkles` 12.8px 图标 + `tabular-nums`。**0 要显示**（「被共创 0 次」= 还没人接着做）；只有两个字段都缺省才退回默认游玩数、不伪造 0。取值 `coCreationCount ?? forkCount`（服务端 `ffd751014` 已上线该键，实测 45/45 条带键，分布 0/1/2/3/5/7；「富树分支 B1」`forkCount=1` 而 `coCreationCount=2` ⇒ 两键口径确实不同）。
|
||||
2. **图谱下方「父代 / 子代」清单改响应式多列网格**。用户原话：「一行一个太奢侈了，你整小一点，响应式布局」。根因：两段清单用了两套容器——父代是 `grid`、子代是 `flex column + 54rem`，后者一张卡占满一行、16:9 封面被拉到 ~850×480。现在两段共用 `.lineage-relation__grid`（`repeat(auto-fill, minmax(10rem, 1fr))` + 容器 `max-width: 54rem`），实测 1440 **5 列** / 1024 **5 列** / 390 窄屏 **2 列**；卡宽 160–200px（比画布卡 212/148 窄一档，仍**同一个** `GameCard`，差异只由 `.lineage-relation__item` wrapper 表达）；卡内标题单行省略、留白与字号收紧；封面仍 16:9 `object-fit: cover`。删掉随之失效的 `.lineage-relation__list` / `__row` / `__main`。
|
||||
3. **「总览」图标换成向内收拢**。用户原话：「改成向中间的箭头，因为现在这个就是起到这个作用的」。原用 lucide `Expand`（四角向外）与动作 `fitToView(true)`（缩小到装得下整棵树）**方向相反**；换成同一对反向图标里的 **`Minimize`**（箭头指向中间）。文案 / `aria-label` / `title` 保持「总览」不变（描述结果而非动作）。同栏逐个核对：缩小 `Minus` ✅、读数 `NNN%` ✅、放大 `Plus` ✅、刷新 `RefreshCcw` ✅、无搜索（`ZoomIn/ZoomOut` 已被测试钉住不得回归）；测试新增 `Minimize` 必在 / `Expand` 不得回归的源码级断言。
|
||||
4. **详情页主操作行两个按钮定名**：`立即玩` → **`开始游戏`**（与游玩页启动按钮同一词表）、`一键开始共创` → **`开始共创`**（与玩家侧同一词表，两侧差别只在样式：共创者侧实心 lg / 玩家侧次要小按钮）；未登录侧 `登录后开始共创` 不变。两个按钮都没有单独 `aria-label`，无障碍名 = 可见文本，因此随之自动一致。**未改**（另一件事，待确认）：共创广场 hero 的「立即试玩」——它是滚动到列表的浏览入口，不是启动某个作品。
|
||||
4. **详情页主操作行两个按钮定名**：`立即玩` → **`开始游戏`**（与游玩页启动按钮同一词表）、`一键开始共创` → **`开始共创`**（与玩家侧同一词表，两侧差别只在样式：共创者侧实心 lg / 玩家侧次要小按钮）；未登录侧 `登录后开始共创` 不变。两个按钮都没有单独 `aria-label`，无障碍名 = 可见文本，因此随之自动一致。**已改（2026-10-07 用户拍板）**：共创广场 hero 的「立即试玩」→ **「浏览作品」**（它的动作是滚动到列表、不启动作品；两个 scope（游戏广场 / 共创广场）共用同一个按钮）。
|
||||
|
||||
- 影响面：`packages/shared/src/components/GameCard/index.tsx`（新增 `metric` 槽）、`src/components/game-distribution/{GameGalleryPage,LineageRelationLists,GameLineagePage,GameDetailPage}.tsx`、`src/components/game-distribution/gameDistribution.css`、`packages/shared/src/components/GameDetailDisplay/index.tsx`（注释）、`GameDistributionPages.test.tsx`、`docs/【技术方案】游戏共创与作品Fork-2026-10-03.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
|
||||
- 验证方式：`npx vitest run src/components/game-distribution src/components/platform-entry src/components/creator src/routing src/components/creation-home`、`npm run typecheck`、全仓 `npx eslint . --ext .ts,.tsx,.js,.mjs,.cjs --max-warnings 0`、`npm run check:encoding`、`git diff --check`；真机（只读 `127.0.0.1:8082` + 独立端口 Vite）：共创页 5 张不同值卡（0/1/2/3/5）的文本+颜色+字重、游戏页同作品仍是「N 次游玩」、清单在 1440/1024/390 三档的列数/卡宽/封面比例/溢出、控件栏改前后截图、详情页共创者侧与玩家侧的可见文本与无障碍名。
|
||||
|
||||
@@ -484,7 +484,7 @@ A 路线里那个必须提前知道的互斥点已经按既有做法绕开：`cr
|
||||
| 详情页主操作（游玩） | `立即玩` | **`开始游戏`** | 与**游玩页**（`GamePlayPage` 的启动按钮本就是「开始游戏」）统一词表；图标仍 `Gamepad2`、lg / pill / 位置 / 颜色一个不动 |
|
||||
| 详情页主操作（共创者侧） | `一键开始共创` | **`开始共创`** | 与玩家侧同一词表；两侧的差别只在**样式**（共创者侧实心强调 lg，玩家侧次要小按钮 `.game-fork-remix-guest`），不再靠「一键」二字区分 |
|
||||
| 详情页主操作（玩家侧） | `开始共创` / `登录后开始共创` | **不变** | 核对一致性即可（未登录 = 「登录后开始共创」，点击走登录门禁） |
|
||||
两个按钮都**没有单独的 `aria-label`**，无障碍名 = 可见文本，因此随文案自动一致；`title` 只在「禁止共创」时出现（内容与新词一致）。**未改**：共创广场 hero 的「立即试玩」（那是**滚动到列表**的浏览入口，不是启动某个作品，属另一件事，已单列在报告里待确认）。
|
||||
两个按钮都**没有单独的 `aria-label`**，无障碍名 = 可见文本，因此随文案自动一致；`title` 只在「禁止共创」时出现（内容与新词一致）。**共创广场 hero 的按钮一并改名（2026-10-07 用户拍板，原「立即试玩」）**：它的动作是**滚动到列表**、不启动任何作品，所以改叫 **「浏览作品」**（描述滚动/查看列表；不叫「开始游戏」以免被读成会启动作品）。同一按钮在「游戏广场」与「共创广场」两种 scope 下共用，两处一起改；`aria-label` 本来就没有、无障碍名 = 可见文本，因此随之自动一致。
|
||||
|
||||
- **图谱视图为可选开关**（形态 B = **横版画布**，`orientation: 'horizontal'`：根在左、代际向右、兄弟分支沿纵向排开，窄屏上比顶→下更省横向空间）：切到画布后支持拖拽平移 / 缩放；横版**不渲染左侧代际轴**，代际信息由节点自带角标承担。**初次进入按宽度适配**（整棵树横向看完；触及最小缩放时给出「可拖拽平移」提示），并把**当前作品**用最小位移拉进视口——贴最近的边，父代 / 兄弟仍留在视口里，不会出现「停在 100% 缩放、一个节点都看不到」的空屏。桌面仍为纵向画布 + 宽高同时适配并居中。
|
||||
- **信息面板用 bottom sheet**：从底部升起（含简介 / 授权 / 核心改动说明 / 前往体验 / 开始共创此版本），遮罩点击或关闭按钮收起；桌面保持画布右上浮层。
|
||||
|
||||
@@ -1601,7 +1601,7 @@ describe('GameGalleryPage 筛选与返回上下文', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('首屏「立即试玩」滚动到列表，而不是打开第一款游戏详情', async () => {
|
||||
it('首屏「浏览作品」滚动到列表，而不是打开第一款游戏详情', async () => {
|
||||
resetGalleryContext();
|
||||
const onOpenDetail = vi.fn();
|
||||
listGamesMock.mockResolvedValue({
|
||||
@@ -1629,7 +1629,7 @@ describe('GameGalleryPage 筛选与返回上下文', () => {
|
||||
);
|
||||
expect(await screen.findByText('星轨防线')).toBeTruthy();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /立即试玩/u }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /浏览作品/u }));
|
||||
|
||||
expect(onOpenDetail).not.toHaveBeenCalled();
|
||||
expect(scrollTo).toHaveBeenCalledTimes(1);
|
||||
|
||||
@@ -132,7 +132,8 @@ export function GameGalleryPage({
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 首屏「立即试玩」只把列表滚进视野，不替用户选定某一款游戏。
|
||||
* 首屏「浏览作品」只把列表滚进视野，不替用户选定某一款游戏，也**不启动**任何作品
|
||||
* —— 所以文案是「浏览作品」（描述滚动/查看列表），不是「开始游戏」（会让人以为会启动）。
|
||||
*
|
||||
* 滚动容器是平台页签面板而不是窗口，所以按容器相对位置计算，缺少
|
||||
* `scrollTo` 时退化成直接赋值，保证无动画环境也能生效。
|
||||
@@ -349,7 +350,7 @@ export function GameGalleryPage({
|
||||
shape="pill"
|
||||
onClick={scrollToGameList}
|
||||
>
|
||||
<Gamepad2 aria-hidden="true" /> 立即试玩
|
||||
<Gamepad2 aria-hidden="true" /> 浏览作品
|
||||
</PlatformActionButton>
|
||||
<span className="game-hero__hint">支持桌面端与移动端</span>
|
||||
</div>
|
||||
|
||||
@@ -44,7 +44,6 @@ import {
|
||||
LINEAGE_CARD_BASE_HEIGHT,
|
||||
LINEAGE_CARD_WIDTH,
|
||||
LINEAGE_COMPACT_CARD_BASE_HEIGHT,
|
||||
LINEAGE_COMPACT_CARD_WIDTH,
|
||||
LINEAGE_COMPACT_NODE_WIDTH,
|
||||
LINEAGE_NODE_PADDING_X,
|
||||
LINEAGE_NODE_PADDING_Y,
|
||||
@@ -482,8 +481,9 @@ export function GameLineagePage({
|
||||
filteredNodes,
|
||||
compactTree
|
||||
? {
|
||||
// 紧凑态：卡宽与清单卡同一个值（`LINEAGE_COMPACT_CARD_WIDTH`），
|
||||
// 节点盒 = 卡宽 + 2×内边距 —— 不在这里另写 176 这类魔法数。
|
||||
// 紧凑态：窄屏横版画布专用的较小卡宽（`LINEAGE_COMPACT_CARD_WIDTH`）。
|
||||
// 注意**清单卡不跟它降级**：2026-10-07 用户拍板「宽 + 不截断」优先，清单一律用
|
||||
// `LINEAGE_CARD_WIDTH`（224），390 窄屏因此是 1 列而不是 2 列小卡。
|
||||
nodeWidth: LINEAGE_COMPACT_NODE_WIDTH,
|
||||
nodeHeight: LINEAGE_COMPACT_CARD_BASE_HEIGHT,
|
||||
columnGap: 22,
|
||||
@@ -965,14 +965,13 @@ export function GameLineagePage({
|
||||
<div
|
||||
className={`game-page game-lineage-page${embedded ? ' game-lineage-page--embedded' : ''}`}
|
||||
/*
|
||||
卡宽的**唯一来源**是布局常量（`lineageTreeLayout.ts`）：这里把卡宽与节点内边距
|
||||
下发给 CSS，`.game-lineage-node` 与 `.lineage-relation__grid` 都只读这几个变量，
|
||||
因此「画布节点卡」与「父代/子代清单卡」永远同宽（用户口径：用的是同一个卡片）。
|
||||
卡宽与节点内边距的**唯一来源**是布局常量（`lineageTreeLayout.ts`）：这里把它们下发给 CSS，
|
||||
`.game-lineage-node`（宽由布局的行内 style 给）与 `.lineage-relation__grid`（轨道 = 卡宽）
|
||||
都只读这几个变量，因此「画布节点卡」与「父代/子代清单卡」永远同宽、也不会各自写死一套数。
|
||||
*/
|
||||
style={
|
||||
{
|
||||
'--lineage-card-width': `${LINEAGE_CARD_WIDTH}px`,
|
||||
'--lineage-compact-card-width': `${LINEAGE_COMPACT_CARD_WIDTH}px`,
|
||||
'--lineage-node-pad-y': `${LINEAGE_NODE_PADDING_Y}px`,
|
||||
'--lineage-node-pad-x': `${LINEAGE_NODE_PADDING_X}px`,
|
||||
} as CSSProperties
|
||||
|
||||
@@ -3062,30 +3062,25 @@
|
||||
* 图下方「父代 / 子代」清单：与画布节点卡**同一张卡、同一个卡宽**（2026-10-07 用户口径：
|
||||
* 「父代子代应该都和血缘图里的用的是一个卡片，一起调宽一点」）。
|
||||
*
|
||||
* 卡宽的唯一来源是布局常量（`lineageTreeLayout.ts` 的 `LINEAGE_CARD_WIDTH` /
|
||||
* `LINEAGE_COMPACT_CARD_WIDTH`），由 `GameLineagePage` 下发成 `--lineage-card-width`；
|
||||
* 这里**只读它**，不另写一套数字 ⇒ 两处不可能再漂移。
|
||||
* 窄屏（≤820px）用紧凑卡宽（与窄屏横版画布同一档），因此 390 宽下仍能排两列。
|
||||
* 卡宽的唯一来源是布局常量（`lineageTreeLayout.ts` 的 `LINEAGE_CARD_WIDTH`），
|
||||
* 由 `GameLineagePage` 下发成 `--lineage-card-width`；这里**只读它**，不另写一套数字
|
||||
* ⇒ 两处不可能再漂移。轨道就是卡宽本身（不是 `minmax`），所以列数随容器自然退化：
|
||||
* - 1440：容器 864 ⇒ **3 列**（3×224 + 2×12 = 696 ≤ 864；第 4 列要 932，放不下）
|
||||
* - 1024：容器 732.88 ⇒ **3 列**
|
||||
* - 390：容器 316 ⇒ **1 列 224**（用户 2026-10-07 拍板：「宽 + 不截断」优先于「凑两列」——
|
||||
* 窄屏不再降级到紧凑卡宽，因此 16 字标题在 224 宽里 2 行放得下、**不截断**）
|
||||
*/
|
||||
.lineage-relations {
|
||||
max-width: 54rem;
|
||||
}
|
||||
.lineage-relation__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
var(--lineage-card-width, 14rem)
|
||||
);
|
||||
grid-template-columns: repeat(auto-fill, var(--lineage-card-width, 14rem));
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.lineage-relations {
|
||||
--lineage-card-width: var(--lineage-compact-card-width, 9.25rem);
|
||||
}
|
||||
}
|
||||
.lineage-relation__item {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
||||
Reference in New Issue
Block a user