fix(agc): 共创页页头加 80px 顶部留白并与标题居中对齐（列表页副标题同步去类比）

2026-10-07 10:48:43 +08:00
parent 258c6c86f3
commit 2b1b111551
4 changed files with 48 additions and 11 deletions
@@ -17,8 +17,15 @@
 export const FORK_PAGE_COLUMN =
  'mx-auto w-[min(860px,calc(100vw-124px))] max-[980px]:w-[min(100%,calc(100vw-64px))] max-[760px]:w-[min(100%,calc(100vw-40px))]';

-/** 页面根：纵向节奏 24px，底部留白 32px。 */
-export const FORK_PAGE_ROOT = 'fork-page grid content-start gap-6 pb-8';
+/**
+ * 页面根：顶部 80px 留白（与首页 `pt-20` 同值，给左上「正在运行的项目」浮层与顶边留出呼吸空间）
+ * + 纵向节奏 24px + 底部 32px。
+ *
+ * 留白加在**内容层**（页面根），不加在滚动容器 `.launcher-main` 上：滚动容器只负责滚，
+ * 页面自己决定与顶边的距离，滚动时页头跟着内容走（这是长页面的正常语义）。
+ */
+export const FORK_PAGE_ROOT =
+  'fork-page grid content-start gap-6 pt-20 pb-8 max-[760px]:pt-16';

 /** 区块内部：标题 / 说明 / 卡片之间 12px。 */
 export const FORK_SECTION = 'grid gap-3';
@@ -1,7 +1,8 @@
 /**
 * 「共创」页：列出支持共创（可 Fork）的平台作品。
 *
- * 对外口径只有一句：**Fork = 把整个工程复制一份到你的项目里继续改造（与 git fork 同理）**。
+ * 对外口径只有一句（内部说明：设计意图与 git fork 同源，该类比不进用户可见文案）：
+ * **把平台上的作品整个工程复制到你的项目里继续改造。**
 * 页面只有一条入口：卡片上的 Fork 按钮 → Fork 工程确认页（授权校验与工程同步都在那一页完成）。
 *
 * 这里**没有**「直接 Fork 指定作品」输入块：深链 `genarrative://fork?gameId=…` 由 launcher 直接
@@ -124,14 +125,9 @@ export default function CoCreationView({ onOpenConfirm }: CoCreationViewProps) {

  return (
    <div className={FORK_PAGE_ROOT}>
-      <header className={FORK_PAGE_COLUMN}>
-        <div className="flex items-start justify-between gap-3">
-          <div className="grid gap-1">
-            <h1 className={FORK_PAGE_TITLE}>共创</h1>
-            <p className={`${FORK_BODY_TEXT} max-w-[56ch]`}>
-              把平台上的作品整个工程复制到你的项目里继续改造（像 git fork）。
-            </p>
-          </div>
+      <header className={`${FORK_PAGE_COLUMN} grid gap-1`}>
+        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+          <h1 className={FORK_PAGE_TITLE}>共创</h1>
          <button
            className={`${FORK_BUTTON_SECONDARY} shrink-0`}
            type="button"
@@ -146,6 +142,9 @@ export default function CoCreationView({ onOpenConfirm }: CoCreationViewProps) {
            刷新
          </button>
        </div>
+        <p className={`${FORK_BODY_TEXT} max-w-[56ch]`}>
+          把平台上的作品整个工程复制到你的项目里继续改造。
+        </p>
      </header>

      {deepLinkNotice ? (
@@ -196,6 +196,12 @@ describe('共创页', () => {
    expect(container.querySelector('.fork-page')).not.toBeNull();
    expect(container.querySelector('.fork-page .overflow-y-auto')).toBeNull();
    expect(container.querySelector('.fork-page .overflow-scroll')).toBeNull();
+    // 顶部留白在内容层（页根），页头不贴顶；窄窗口仍保留留白。
+    const pageRoot = container.querySelector('.fork-page') as HTMLElement;
+    expect(pageRoot.classList.contains('pt-20')).toBe(true);
+    expect(pageRoot.getAttribute('class')).toContain('max-[760px]:pt-16');
+    // 用户可见文案不再出现「像 git fork」这类类比（口径只留在代码注释与文档里）。
+    expect(document.body.textContent ?? '').not.toMatch(/git\s*fork/iu);
  });

  it('卡片时间：公开目录只有 createdAt，就按「创建时间」渲染真实值', async () => {
@@ -125,4 +125,29 @@ describe('launcher 滚动链', () => {
    // 正文另有 72ch 上限：长文不铺满整个内容列。
    expect(tokens).toContain('max-w-[72ch]');
  });
+
+  it('页头顶部留白加在内容层（≥80px），不加在滚动容器上', () => {
+    const tokens = readFileSync(
+      repoPath(
+        'apps/ai-game-creator-shell/src/features/platform-fork/forkPageStyles.ts',
+      ),
+      'utf8',
+    );
+    const root = tokens.match(
+      /export const FORK_PAGE_ROOT =[\s\S]*?'([^']+)'/u,
+    );
+    expect(root, 'FORK_PAGE_ROOT should be declared').not.toBeNull();
+    const rootClass = root?.[1] ?? '';
+    // 80px = Tailwind 的 pt-20，与首页首屏的顶部留白同值。
+    expect(rootClass).toContain('pt-20');
+    const home = readFileSync(
+      repoPath('apps/ai-game-creator-shell/src/view/home/index.tsx'),
+      'utf8',
+    );
+    expect(home, '首页用同一个 pt-20 作为基准').toContain('pt-20');
+
+    // 滚动容器自己不加上内边距：留白属于内容层，滚动时页头跟着内容走。
+    const main = stripComments(getCssBlock(styles, '\n.launcher-main {'));
+    expect(main).not.toMatch(/padding-top/u);
+  });
 });