From 1cb11bc1dde721c46b8defb8aff6aced04dde23c Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Mon, 1 Jun 2026 16:45:39 +0000
Subject: [PATCH] fix: refine profile shortcuts and puzzle next button

---
 ...�玩法创作】平�入�与玩法链路-2026-05-15.md |  4 +-
 ...�项目基线】当�产�与工程约�-2026-05-15.md |  2 +-
 .../PuzzleRuntimeShell.test.tsx               | 51 ++++++++++----
 .../puzzle-runtime/PuzzleRuntimeShell.tsx     | 69 +++++++++++++++----
 .../RpgEntryHomeView.recharge.test.tsx        | 15 ++++
 src/components/rpg-entry/RpgEntryHomeView.tsx |  4 +-
 6 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
index 4c9d9197..d367bf19 100644
--- a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
+++ b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
@@ -52,7 +52,7 @@
 8. �有 generated 图片必须通过 `ResolvedAssetImage` / `/api/assets/read-url` �签读�。
 9. 敲木鱼作�架读�当�用户作�列表时走 `GET /api/creation/wooden-fish/works`；�布�功�平�壳必须�时刷新作�架与公开广场，��作�刚�布时��留在旧列表。
 
-�现 Tab�创作 Tab 与�稿 Tab 的页�根内容区��套 `platform-page-stage` 外层全局�片壳，让列表�筛选和玩法�获得更宽的横�空间；推�页和我的页�按�自页�设计�留原有全局�片�径。移动端“我的�页�按顶部头� / 昵称 / 陶泥��会员横幅�三张统计���日任务�五项常用功能宫格�设置入�和法律信�组织，��留旧的底部“填邀请��次级入�；�日任务�必须读� `/api/profile/tasks` 的当�任务摘�并在领���步刷新�片进度。字�必须维�平�普通 UI 档�，�能因为窄�把�片标题�功能 label 或法律信�撑�展示级字�；最�一�内容必须能在底部 dock 上方完整滚动露出，�得被固定底部导航�挡。
+�现 Tab�创作 Tab 与�稿 Tab 的页�根内容区��套 `platform-page-stage` 外层全局�片壳，让列表�筛选和玩法�获得更宽的横�空间；推�页和我的页�按�自页�设计�留原有全局�片�径。移动端“我的�页�按顶部头� / 昵称 / 陶泥��会员横幅�三张统计���日任务�五项常用功能宫格�设置入�和法律信�组织，��留旧的底部“填邀请��次级入�；常用功能当��展示四项常驻入�时必须按四列铺满整行，��留五列网格导致左对�空�；�日任务�必须读� `/api/profile/tasks` 的当�任务摘�并在领���步刷新�片进度。字�必须维�平�普通 UI 档�，�能因为窄�把�片标题�功能 label 或法律信�撑�展示级字�；最�一�内容必须能在底部 dock 上方完整滚动露出，�得被固定底部导航�挡。
 
 ## RPG / 自定义世界
 
@@ -107,7 +107,7 @@ RPG / 拼图等�行�存档�以 `/api/profile/save-archives` 的�端列
 - 结果页�关测试�能把完整�稿�久化，并通过 `levelId` 指定�行�起始关�；�得把�关快照作为整份�稿调用 `updatePuzzleWork`，�则 source session 和作� profile 的 `levels` 会被覆盖��关，退出�进�其它关�会丢失。
 - 拼图试玩和正��行�刷新����用创作�有 query。进入 `/runtime/puzzle` 时必须写入 `runtimeProfileId`��稿 `runtimeSessionId`��选 `runtimeLevelId`�公开作� `work` 和 `mode=draft|published`；进入�行�的导航顺�必须先切到 `/runtime/puzzle`，�写这些 runtime query，��被阶段导航清掉�刷新�在“正在进入拼图关��。
 - 结果页生�关�图时若关��为空，�端必须传 `shouldAutoNameLevel=true`，�端�用首关命�契约先按画��述生�关��，�在图片生��用视觉命�结果精修，并把生��和 UI 背景�示��本次关�快照写回。
-- 拼图�行�背景优先读�当�关� `levelBackgroundImageSrc/levelBackgroundImageObjectKey`，旧数��兼容 `uiBackgroundImageSrc/uiBackgroundImageObjectKey`；本地试玩�直达指定关�和正� `next-level` 推进时，目标关�缺关�背景时必须继承�作�首个�用关�背景，�缺失时�沿用当��行�快照背景或默认 UI。�行�按钮视觉优先读�当�关� `uiSpritesheetImageSrc/uiSpritesheetImageObjectKey`，先按�明 alpha 自动边界检测识别 spritesheet 中的独立按钮展示矩形，�按原图�置从左到��从上到下映射到返回�设置�下一关��示�原图�冻结；�一组件还�按较高 alpha 阈值派生紧致点击热区，�明留白和柔边低 alpha 区域尽���应点击。检测失败时回退旧固定六格�切，缺失时�用现有图标按钮兜底。有 spritesheet 时，返回和设置按钮的点击容器��供�明点击区，���加默认白色圆形底；底部�示�原图�冻结三枚素�按检测矩形的原始宽高比显示，�能强行拉伸�正圆或铺满整列。底部�具区��使用连片胶囊背景，�示�原图�冻结三个按钮�匀分布；�行��展示按钮素�本身，��外�加“�示 / 原图 / 冻结�文字。
+- 拼图�行�背景优先读�当�关� `levelBackgroundImageSrc/levelBackgroundImageObjectKey`，旧数��兼容 `uiBackgroundImageSrc/uiBackgroundImageObjectKey`；本地试玩�直达指定关�和正� `next-level` 推进时，目标关�缺关�背景时必须继承�作�首个�用关�背景，�缺失时�沿用当��行�快照背景或默认 UI。�行�按钮视觉优先读�当�关� `uiSpritesheetImageSrc/uiSpritesheetImageObjectKey`，先按�明 alpha 自动边界检测识别 spritesheet 中的独立按钮展示矩形，�按原图�置从左到��从上到下映射到返回�设置�下一关��示�原图�冻结；�一组件还�按较高 alpha 阈值派生紧致点击热区，�明留白和柔边低 alpha 区域尽���应点击。检测失败时回退旧固定六格�切，缺失时�用现有图标按钮兜底。有 spritesheet 时，返回�设置和下一关的点击容器��供�明点击区，���加默认白色圆形底�胶囊主按钮底或�外文字；下一关按钮在通关弹窗和底部入�中都直接使用 spritesheet �切出的 next 素�作为按钮本体。底部�示�原图�冻结三枚素�按检测矩形的原始宽高比显示，�能强行拉伸�正圆或铺满整列。底部�具区��使用连片胶囊背景，�示�原图�冻结三个按钮�匀分布；�行��展示按钮素�本身，��外�加“�示 / 原图 / 冻结�文字。
 - 推�页本身�是登录门�入�，未登录用户点击底部或侧边�的推� Tab 应直接进入嵌入�行�，�主动打开登录弹窗。推�页嵌入�行�必须按真实身份分�：已登录用户或本地已有 access token 时，�动拼图和�续排行榜 / 下一关等正�请求继续走账� Bearer；�有确认为匿�访客时�申请并�传 runtime guest token。`/api/runtime/puzzle/runs*` �端统一接� `RuntimePrincipal`，�识别账�用户和匿� runtime guest；推��片的��读写请求�使用 local auth impact，���� 401 清空整站登录�。创作�个人作��删除��布�Remix 等账�或所有�动作���普通用户鉴�。
 - 拼图�行�棋盘��加分�蒙版��边�阴影�选中底色或�并� SVG 轮廓；拼图片本体需��切为圆角形状，��使用独立圆角�切，�并�使用 SVG 原生 `clipPath` �切整体外轮廓，外凸角和内凹角分别计算�径，内凹角�径�比外凸角更明显以��手机 WebView 中看起��是直角。原图�具�在用户主动确认�打开独立原图查看层，�在当�拼图棋盘上�加原图。
 - 拼图�行�拖拽必须完全跟�手指或鼠标�置，`pointermove` 期间�时写入��拼�的 transform，��赖等待�端回包�React �渲染或下一帧动画队列；进入拖动��展示拼�选中�或“已选择��示，�手���交目标格�步规则真相。
diff --git a/docs/�项目基线】当�产�与工程约�-2026-05-15.md b/docs/�项目基线】当�产�与工程约�-2026-05-15.md
index 09dbe102..68c05a44 100644
--- a/docs/�项目基线】当�产�与工程约�-2026-05-15.md
+++ b/docs/�项目基线】当�产�与工程约�-2026-05-15.md
@@ -95,7 +95,7 @@ server-rs + Axum + SpacetimeDB
 7. 主站入�已�定移动端页�级缩放；�个游�页������实现整页缩放�定。
 8. 图�输入通用 UI 统一走 `src/components/common/CreativeImageInputPanel.tsx`。外层页��有业务状�，组件�承担上传��预览��考图缩略图�AI �绘开关�错误展示和�交按钮。
 9. �现页 `分类` �频�的筛选必须打开独立 dialog / drawer / modal，至少支�玩法类型过滤与排�切�；筛选结果为空时显示空状�，�把筛选内容展开在当�列表下方。
-10. 移动端“我的�页顶部�牌行承载扫�和设置入�，正文按�考图顺�组织为头� / 昵称 / 陶泥��会员横幅�三张统计���日任务�五项常用功能宫格�设置入�和法律信�；`media/profile/` 中的陶泥素�作为该页图形资产。常用功能宫格固定承载泥点充值�邀请好��兑���玩家社区��馈与建议；页����供独立存档按钮入�，也�在底部�留旧的填邀请�次级入�。填邀请��由邀请链接 query 或其它明确引导打开独立弹窗，�作为“我的�页常驻按钮。
+10. 移动端“我的�页顶部�牌行承载扫�和设置入�，正文按�考图顺�组织为头� / 昵称 / 陶泥��会员横幅�三张统计���日任务�五项常用功能宫格�设置入�和法律信�；`media/profile/` 中的陶泥素�作为该页图形资产。常用功能宫格固定承载泥点充值�邀请好��兑���玩家社区��馈与建议；当��展示四项常驻入�时必须按四列铺满整行，��留五列网格导致左对�空�。页����供独立存档按钮入�，也�在底部�留旧的填邀请�次级入�。填邀请��由邀请链接 query 或其它明确引导打开独立弹窗，�作为“我的�页常驻按钮。
 11. “我的�页�日任务�必须展示�端 `/api/profile/tasks` 返回的当�任务摘�，包括奖励泥点数�进度和领� / 去完� / 已完�状�；任务领��功�，�片摘�必须跟�返回的任务中心数��步刷新，�能继续硬编� `0 / 1` 或�更新弹窗内任务列表。
 12. “我的�页泥点�游�时长�已玩游�数�三张统计��展示�自标签和值，三个统计 icon 使用�尺寸普通 UI 档�，内容��行，�在统计区底部展示“更新于�时间；移动端昵称�会员���日任务�常用功能和法律信�也应�� `10px` 到 `14px` 的普通 UI 字�区间，��展示级字�挤压内容。
 13. 移动端“我的�页需�兼容窄�：头� / 昵称 / 陶泥��三张统计���日任务�五项常用功能和法律信�都必须能在底部固定 TabBar 上方完整滚动露出，�得与底部 dock�刘海 safe-area 或相邻 UI 元素�挡��。
diff --git a/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx b/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
index e2604ace..41bb3d1b 100644
--- a/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
+++ b/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
@@ -617,7 +617,11 @@ test('通关�显示结算弹窗�排行榜和下一关按钮', () => {
   expect(within(dialog).getByText('#1')).toBeTruthy();
   expect(within(dialog).getByText('测试作者')).toBeTruthy();
 
-  fireEvent.click(within(dialog).getByRole('button', { name: '下一关' }));
+  const nextButton = within(dialog).getByRole('button', { name: '下一关' });
+  expect(nextButton.textContent).toContain('下一关');
+  expect(nextButton.querySelector('[data-puzzle-ui-sprite="next"]')).toBeNull();
+
+  fireEvent.click(nextButton);
 
   expect(onAdvanceNextLevel).toHaveBeenCalledTimes(1);
   vi.useRealTimers();
@@ -876,13 +880,16 @@ test('�行�用 UI spritesheet 原图检测矩形�切返回设置下一关
   expect(
     screen.getByRole('button', { name: '打开拼图设置' }).className,
   ).not.toContain('rounded-full');
-  const nextSprite = screen
-    .getByRole('button', { name: '下一关' })
-    .querySelector('[data-puzzle-ui-sprite="next"]') as HTMLElement | null;
-  expect(nextSprite).toBeTruthy();
-  expect(nextSprite?.style.backgroundSize).toBe('320% 480%');
-  expect(nextSprite?.style.backgroundPosition).toBe('50% 57.89473684210527%');
-  expect(screen.getByRole('button', { name: '下一关' }).textContent).toBe('');
+  const nextButton = screen.getByRole('button', { name: '下一关' });
+  expect(nextButton.dataset.puzzleUiSprite).toBe('next');
+  expect(nextButton.querySelector('[data-puzzle-ui-sprite="next"]')).toBeNull();
+  expect(nextButton.style.backgroundSize).toBe('320% 480%');
+  expect(nextButton.style.backgroundPosition).toBe('50% 57.89473684210527%');
+  expect(nextButton.className).not.toContain('puzzle-runtime-primary-button');
+  expect(nextButton.className).not.toContain('rounded-full');
+  expect(nextButton.className).not.toContain('px-5');
+  expect(nextButton.className).not.toContain('py-2.5');
+  expect(nextButton.textContent).toBe('');
   expect(
     screen
       .getByRole('button', { name: '�示' })
@@ -962,7 +969,7 @@ test('�行�在�有 UI 背景 objectKey 时�渲染生�背景', () => {
   expect(backgroundImage).toBeTruthy();
 });
 
-test('关闭通关弹窗��留底部下一关入�', () => {
+test('关闭通关弹窗��留底部下一关入�', async () => {
   vi.useFakeTimers();
   const onAdvanceNextLevel = vi.fn();
   const runWithoutRecommendedNextProfile: PuzzleRunSnapshot = {
@@ -988,10 +995,31 @@ test('关闭通关弹窗��留底部下一关入�', () => {
       onAdvanceNextLevel={onAdvanceNextLevel}
     />,
   );
+  await act(async () => {});
 
   act(() => {
     vi.advanceTimersByTime(1_400);
   });
+  const dialog = screen.getByRole('dialog', { name: '通关完�' });
+  const dialogNextButton = within(dialog).getByRole('button', {
+    name: '下一关',
+  });
+  expect(dialogNextButton.dataset.puzzleUiSprite).toBe('next');
+  expect(
+    dialogNextButton.querySelector('[data-puzzle-ui-sprite="next"]'),
+  ).toBeNull();
+  expect(dialogNextButton.style.backgroundSize).toBe('320% 480%');
+  expect(dialogNextButton.style.backgroundPosition).toBe(
+    '50% 57.89473684210527%',
+  );
+  expect(dialogNextButton.className).not.toContain(
+    'puzzle-runtime-primary-button',
+  );
+  expect(dialogNextButton.className).not.toContain('rounded-full');
+  expect(dialogNextButton.className).not.toContain('px-5');
+  expect(dialogNextButton.className).not.toContain('py-2.5');
+  expect(dialogNextButton.textContent).toBe('');
+
   act(() => {
     fireEvent.click(screen.getByRole('button', { name: '关闭通关弹窗' }));
   });
@@ -1050,9 +1078,8 @@ test('推�页关闭通关弹窗��留底部下一关入�且��加下
   expect(screen.queryByRole('dialog', { name: '通关完�' })).toBeNull();
   const nextButton = screen.getByRole('button', { name: /下一关/u });
   expect(nextButton).toBeTruthy();
-  expect(
-    nextButton.querySelector('[data-puzzle-ui-sprite="next"]'),
-  ).toBeTruthy();
+  expect(nextButton.dataset.puzzleUiSprite).toBe('next');
+  expect(nextButton.querySelector('[data-puzzle-ui-sprite="next"]')).toBeNull();
   expect(nextButton.textContent?.trim()).toBe('');
   vi.useRealTimers();
 });
diff --git a/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx b/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
index 92f395de..ee0bc2e2 100644
--- a/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
+++ b/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
@@ -162,6 +162,15 @@ function PuzzleUiSprite({
   );
 }
 
+function resolvePuzzleUiSpriteAspectRatio(
+  kind: PuzzleUiSpriteKind,
+  layout: PuzzleUiSpritesheetLayout | null,
+  fallback: string,
+) {
+  const region = layout?.regions[kind];
+  return region ? `${region.width} / ${region.height}` : fallback;
+}
+
 function buildMergedGroupViewModels(
   groups: PuzzleMergedGroupState[],
   pieces: PuzzleBoardPieceViewModel[],
@@ -1221,6 +1230,22 @@ export function PuzzleRuntimeShell({
   const clearResultOverlayClassName = embedded
     ? `platform-ui-shell platform-theme ${platformThemeClass} puzzle-runtime-shell puzzle-runtime-modal-overlay puzzle-runtime-modal-overlay--fixed flex items-center justify-center px-4 py-6 backdrop-blur-sm`
     : 'puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm';
+  const nextSpriteButtonClassName =
+    'inline-flex h-12 appearance-none items-center justify-center border-0 bg-transparent p-0 leading-none shadow-none transition hover:brightness-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-button-primary-border)] disabled:cursor-not-allowed disabled:opacity-45';
+  const nextSpriteButtonStyle = hasUiSpritesheet
+    ? {
+        ...buildPuzzleUiSpriteBackgroundStyle({
+          src: resolvedUiSpritesheetImage,
+          kind: 'next',
+          layout: uiSpritesheetLayout,
+        }),
+        aspectRatio: resolvePuzzleUiSpriteAspectRatio(
+          'next',
+          uiSpritesheetLayout,
+          '2 / 1',
+        ),
+      }
+    : undefined;
   const handleBackRequest = () => {
     if (hideExitControls) {
       return;
@@ -1457,6 +1482,8 @@ export function PuzzleRuntimeShell({
           <footer className="puzzle-runtime-dialog__line flex items-center justify-end border-t px-5 py-4">
             <button
               type="button"
+              aria-label="下一关"
+              data-puzzle-ui-sprite={hasUiSpritesheet ? 'next' : undefined}
               disabled={isBusy}
               onClick={() => {
                 onAdvanceNextLevel({
@@ -1464,14 +1491,23 @@ export function PuzzleRuntimeShell({
                   levelId: run.nextLevelId ?? null,
                 });
               }}
-              className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45"
+              style={nextSpriteButtonStyle}
+              className={
+                hasUiSpritesheet
+                  ? nextSpriteButtonClassName
+                  : 'puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45'
+              }
             >
-              {isBusy ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <ArrowRight className="h-4 w-4" />
+              {hasUiSpritesheet ? null : (
+                <>
+                  {isBusy ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <ArrowRight className="h-4 w-4" />
+                  )}
+                  下一关
+                </>
               )}
-              下一关
             </button>
           </footer>
         ) : null}
@@ -1933,6 +1969,7 @@ export function PuzzleRuntimeShell({
             <button
               type="button"
               disabled={isBusy}
+              data-puzzle-ui-sprite={hasUiSpritesheet ? 'next' : undefined}
               aria-label={hasSimilarWorkChoices ? '�个作�' : '下一关'}
               onClick={() => {
                 if (hasSimilarWorkChoices) {
@@ -1945,16 +1982,18 @@ export function PuzzleRuntimeShell({
                   levelId: run.nextLevelId ?? null,
                 });
               }}
-              className="puzzle-runtime-primary-button inline-flex min-h-11 items-center justify-center rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45"
+              style={nextSpriteButtonStyle}
+              className={
+                hasUiSpritesheet
+                  ? nextSpriteButtonClassName
+                  : 'puzzle-runtime-primary-button inline-flex min-h-11 items-center justify-center rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45'
+              }
             >
-              <PuzzleUiSprite
-                src={resolvedUiSpritesheetImage}
-                kind="next"
-                layout={uiSpritesheetLayout}
-                className="h-8 w-12 rounded-full"
-              />
-              {resolvedUiSpritesheetImage ? null : (
-                <ArrowRight className="h-4 w-4" />
+              {hasUiSpritesheet ? null : (
+                <>
+                  <ArrowRight className="h-4 w-4" />
+                  {hasSimilarWorkChoices ? '�个作�' : '下一关'}
+                </>
               )}
             </button>
           ) : null}
diff --git a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
index 9cc830bb..d9ef46eb 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
@@ -2412,6 +2412,21 @@ test('mobile profile page matches the reference layout sections', async () => {
       .querySelector('.platform-profile-shortcut-grid')
       ?.classList.contains('platform-profile-shortcut-grid'),
   ).toBe(true);
+  expect(
+    shortcutRegion
+      .querySelector('.platform-profile-shortcut-grid')
+      ?.className,
+  ).toContain('!grid-cols-4');
+  expect(
+    shortcutRegion
+      .querySelector('.platform-profile-shortcut-grid')
+      ?.className,
+  ).toContain('w-full');
+  for (const shortcutButton of shortcutRegion.querySelectorAll(
+    '.platform-profile-shortcut-button',
+  )) {
+    expect(shortcutButton.className).toContain('w-full');
+  }
   for (const label of [
     '泥点充值',
     '兑��',
diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx
index 3e6d4957..51e2db1e 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.tsx
@@ -2434,7 +2434,7 @@ function ProfileShortcutButton({
     <button
       type="button"
       onClick={onClick ?? undefined}
-      className="platform-profile-shortcut-button flex min-h-[5.25rem] flex-col items-center justify-center gap-2 px-2.5 py-3 text-center transition"
+      className="platform-profile-shortcut-button flex min-h-[5.25rem] w-full flex-col items-center justify-center gap-2 px-2.5 py-3 text-center transition"
     >
       <div className="platform-profile-shortcut-button__icon">
         {imageSrc ? (
@@ -6368,7 +6368,7 @@ export function RpgEntryHomeView({
             className="platform-profile-shortcut-panel"
             aria-label="常用功能"
           >
-            <div className="platform-profile-shortcut-grid">
+            <div className="platform-profile-shortcut-grid grid w-full !grid-cols-4">
               <ProfileShortcutButton
                 label="泥点充值"
                 subLabel="充值泥点"