继续收口暗色弹窗底部动作区

新增 PlatformDarkModalFooter 统一 dark modal footer 的布局壳
接入 NPC 弹窗、选择定制弹窗、任务更新弹层与物品详情 footer
补充组件级与弹窗集成测试并更新收口计划和共享决策记录

.hermes/shared-memory/decision-log.md

@@ -54,6 +54,7 @@
 - 2026-06-10 追加：`PlatformStatusDialog` 继续支持 header notice 布局、body content、close button、backdrop / Escape 关闭路径，用来承接“提示 / 规则阻断 / 作品不可用 / 泥点不足”这类带标题栏的状态 notice；平台入口的 `draftGenerationPointNotice`、`workNotFoundRecoveryDialog` 和 RPG 大编辑器里的 `EditorNoticeDialog` 已迁移到这套共享组件，不再各自维护 `UnifiedConfirmDialog` 壳层和关闭策略。
 - 2026-06-10 追加：`CustomWorldEntityCatalog` 的 `minimum-playable` 规则阻断提示也统一迁到 `PlatformStatusDialog`，不再和删除角色 / 批量删除共用 `UnifiedConfirmDialog` 配置；同日平台入口公开编号搜索把 error 分支从用户摘要 modal 中拆出，未命中结果单独走 `PlatformStatusDialog`，命中用户继续保留 `UnifiedModal + PlatformSubpanel` 信息布局。
 - 2026-06-11 追加：`PlatformAsyncStatePanel` 继续从 profile modal 与作品架扩展到 RPG 首页公开分区；`RpgEntryHomeView.tsx` 的移动端排行、发现页寓教于乐 / 默认公开 feed、桌面首页“今日游戏 / 推荐”、桌面发现页寓教于乐 / 默认公开 feed，以及“我的创作”分区已统一改成 `loadingState / emptyState / children` 三态 slot。页面级 `platformError` 继续留在状态壳外层，保证错误提示可以和内容并存；`recommend runtime`、分类筛选等含运行态或二级筛选语义的分支暂不硬并入这一轮。
+- 2026-06-11 追加：暗色 / 像素 modal 的标准 footer 布局统一抽到 `src/components/common/PlatformDarkModalFooter.tsx`；该组件只负责 dark footer 的分隔线、padding 和常见动作区排布，不持有“取消 / 确认”业务语义。`NpcModals.tsx` 的交易 / 赠礼 / 招募 footer、`SelectionCustomizationModals.tsx` 的 `SelectionModal` footer、`RpgAdventurePanelOverlays.tsx` 的 goal panel footer，以及 `InventoryItemViews.tsx` 的详情 footer wrapper 已接入；sticky 工作台 footer、正文内单 CTA 收尾和 runtime HUD 工具条暂不并入这一抽象。
 - 2026-06-09 追加：通用输入 Composer 的上传参考图、发送和移除参考图已迁移到 `PlatformIconButton`；图标上传仍使用 `asChild="label"` 保留 label + file input 语义，公共组件会自动写入隐藏文本，确保内嵌 file input 继承可访问名称。
 - 2026-06-10 追加：creation-agent composer 的上传文档 / 上传参考图入口使用 `PlatformIconButton` 默认 `platformIcon`；工作台只保留动态 label、title、busy 状态和 picker 回调，发送按钮继续保留主题色动作布局。验证命令：`npm run test -- src/components/creation-agent/CreationAgentWorkspace.test.tsx src/components/common/PlatformIconButton.test.tsx`。
 - 2026-06-10 追加：作品详情顶部返回 / 分享和封面轮播上一张 / 下一张入口使用 `PlatformIconButton variant="platformIcon"`；详情页保留原 `platform-work-detail__*` 局部 class 控制位置和尺寸，点赞、复制三态等专用动作暂不迁移。验证命令：`npm run test -- src/components/platform-entry/PlatformWorkDetailView.test.tsx src/components/common/PlatformIconButton.test.tsx`。

docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md

@@ -269,6 +269,7 @@
 22.1. RPG 创作侧标准 dark header / footer 动作继续向共享按钮收口：`RpgCreationRoleAssetStudioModalImpl.tsx` 的 header“关闭”、`RpgCreationEntityEditorShared.tsx` 的 footer“取消”、`RpgCreationRoleAssetStudioFooter.tsx` 的“保存到当前角色”都改为委托 `PlatformActionButton surface="editorDark"`。局部壳层只继续保留 `stopPropagation`、tone 映射、布局和极少量字号/宽度贴合；标准暗色编辑器里的 close / cancel / save CTA 不再各自手写原生 `<button>` 基础 chrome。
 22.2. RPG runtime overlay 里的标准 dark CTA 和可点击 dark row 继续向共享原子收口：`RpgAdventurePanelOverlays.tsx` 的 goal panel“知道了”、任务详情里的“领取任务 / 返回交付”、任务完成提示里的“打开任务日志”都改为委托 `PlatformActionButton surface="editorDark"`；设置面板里的“运行统计”入口改为 `PlatformSubpanel as="button" surface="dark"`。像素风 choice button、HUD launcher、奖励物品格和输入 composer 这类 runtime 专属控件继续保留独立语义，不并回普通平台按钮。
 22.3. NPC dark modal footer 与暗色明细空态继续向共享原子收口：`NpcModals.tsx` 里的交易 / 赠礼 / 招募弹窗 footer 按钮和物品详情“关闭”按钮都改为委托 `PlatformActionButton surface="editorDark"`，交易右侧“请选择一件物品”提示改为 `PlatformEmptyState surface="editorDark"`；`CharacterInfoShared.tsx` 里的 `BuildContributionDetailPanel` 空明细也改为 `PlatformEmptyState surface="editorDark"`。数量 stepper、赠礼 / 招募 option card、标签强度按钮这类带更强业务语义的控件继续保留局部实现。
+22.4. 暗色 / 像素 modal 的标准 footer 布局统一收口到 `src/components/common/PlatformDarkModalFooter.tsx`；该 Module 只承接 dark footer 的顶部分隔线、padding 和常见动作区排布，不承接“取消 / 确认”业务语义。`NpcModals.tsx` 的交易 / 赠礼 / 招募 footer、`SelectionCustomizationModals.tsx` 的 `SelectionModal` footer、`RpgAdventurePanelOverlays.tsx` 的 goal panel footer，以及 `InventoryItemViews.tsx` 的详情 footer wrapper 已接入。sticky 工作台 footer、正文里的单独 CTA 收尾和 runtime HUD 工具条继续保留局部布局；后续 dark / pixel modal 若只是同构 footer chrome，优先直接复用这个 Module，不再重复手写 `border-t border-white/10 + px/py + justify-end gap-*` 组合。验证命令：`npx vitest run src/components/common/PlatformDarkModalFooter.test.tsx src/components/NpcModals.test.tsx src/components/SelectionCustomizationModals.test.tsx src/components/rpg-runtime-panels/RpgAdventurePanel.questOffer.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 
 ## 验证
 

src/components/InventoryItemViews.tsx

@@ -9,6 +9,7 @@ import {
   getNineSliceStyle,
   UI_CHROME,
 } from '../uiAssets';
+import { PlatformDarkModalFooter } from './common/PlatformDarkModalFooter';
 import { PlatformQuantityBadge } from './common/PlatformQuantityBadge';
 import { PixelCloseButton } from './PixelCloseButton';
 import { PixelIcon } from './PixelIcon';
@@ -237,9 +238,9 @@ export function InventoryItemDetailModal({
             </div>
 
             {footer != null ? (
-              <div className="border-t border-white/10 px-4 py-3 sm:px-5">
+              <PlatformDarkModalFooter layout="content">
                 {footer}
-              </div>
+              </PlatformDarkModalFooter>
             ) : null}
           </motion.div>
         </motion.div>

src/components/NpcModals.test.tsx

@@ -276,6 +276,9 @@ test('NPC 弹窗标准 dark footer CTA 复用 PlatformActionButton', async () =>
   const { unmount } = render(
     <NpcModals gameState={createEmptyGameState()} npcUi={createEmptyNpcUi()} />,
   );
+  const tradeFooter = screen.getByTestId('npc-trade-footer');
+  const giftFooter = screen.getByTestId('npc-gift-footer');
+  const recruitFooter = screen.getByTestId('npc-recruit-footer');
 
   const cancelButtons = screen.getAllByRole('button', { name: '取消' });
   const tradeConfirmButton = screen.getByRole('button', { name: '确认购买' });
@@ -291,6 +294,12 @@ test('NPC 弹窗标准 dark footer CTA 复用 PlatformActionButton', async () =>
   ].filter((button): button is HTMLElement => Boolean(button));
 
   expect(footerButtons).toHaveLength(6);
+  expect(tradeFooter.className).toContain('platform-dark-modal-footer');
+  expect(tradeFooter.className).toContain('border-t');
+  expect(giftFooter.className).toContain('platform-dark-modal-footer');
+  expect(giftFooter.className).toContain('pb-5');
+  expect(recruitFooter.className).toContain('platform-dark-modal-footer');
+  expect(recruitFooter.className).toContain('pb-5');
 
   footerButtons.forEach((button) => {
     expect(button.className).toContain('platform-action-button--editor-dark');

src/components/NpcModals.tsx

@@ -29,6 +29,7 @@ import {
   UI_CHROME,
 } from '../uiAssets';
 import { PlatformActionButton } from './common/PlatformActionButton';
+import { PlatformDarkModalFooter } from './common/PlatformDarkModalFooter';
 import { PlatformDarkOptionCard } from './common/PlatformDarkOptionCard';
 import { PlatformEmptyState } from './common/PlatformEmptyState';
 import { PlatformPillBadge } from './common/PlatformPillBadge';
@@ -427,7 +428,7 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               </div>
             </div>
 
-            <div className="flex items-center justify-end gap-3 border-t border-white/10 px-4 py-3 sm:px-5 sm:py-4">
+            <PlatformDarkModalFooter data-testid="npc-trade-footer">
               <PlatformActionButton
                 surface="editorDark"
                 tone="secondary"
@@ -445,7 +446,7 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               >
                 {tradeMode === 'buy' ? '确认购买' : '确认出售'}
               </PlatformActionButton>
-            </div>
+            </PlatformDarkModalFooter>
           </motion.div>
         </motion.div>
       )}
@@ -665,7 +666,11 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               )}
             </div>
 
-            <div className="flex justify-end gap-3 px-5 pb-5">
+            <PlatformDarkModalFooter
+              bordered={false}
+              padding="bottom"
+              data-testid="npc-gift-footer"
+            >
               <PlatformActionButton
                 surface="editorDark"
                 tone="secondary"
@@ -683,7 +688,7 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               >
                 确认赠礼
               </PlatformActionButton>
-            </div>
+            </PlatformDarkModalFooter>
           </motion.div>
         </motion.div>
       )}
@@ -763,7 +768,11 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               )}
             </div>
 
-            <div className="flex justify-end gap-3 px-5 pb-5">
+            <PlatformDarkModalFooter
+              bordered={false}
+              padding="bottom"
+              data-testid="npc-recruit-footer"
+            >
               <PlatformActionButton
                 surface="editorDark"
                 tone="secondary"
@@ -781,7 +790,7 @@ export function NpcModals({ gameState, npcUi }: NpcModalsProps) {
               >
                 确认招募
               </PlatformActionButton>
-            </div>
+            </PlatformDarkModalFooter>
           </motion.div>
         </motion.div>
       )}

src/components/SelectionCustomizationModals.test.tsx

@@ -31,6 +31,7 @@ test('角色自定义错误提示复用暗色 PlatformStatusMessage chrome', ()
   const currentCharacterPanel = screen.getByText('当前角色：试剑客');
   const nameInput = screen.getByLabelText('角色名字');
   const backstoryTextarea = screen.getByLabelText('背景补充');
+  const footer = screen.getByTestId('selection-modal-footer');
 
   expect(errorMessage.className).toContain('platform-status-message');
   expect(errorMessage.className).toContain('border-rose-300/15');
@@ -53,6 +54,8 @@ test('角色自定义错误提示复用暗色 PlatformStatusMessage chrome', ()
   expect(closeButton.className).toContain(
     'platform-modal-close-button--editor-dark',
   );
+  expect(footer.className).toContain('platform-dark-modal-footer');
+  expect(footer.className).toContain('border-t');
   expect(currentCharacterPanel.className).toContain('border-white/10');
   expect(currentCharacterPanel.className).toContain('bg-black/25');
 });

src/components/SelectionCustomizationModals.tsx

@@ -5,6 +5,7 @@ import type {
   CustomWorldGenerationMode,
 } from '../types';
 import { PlatformActionButton } from './common/PlatformActionButton';
+import { PlatformDarkModalFooter } from './common/PlatformDarkModalFooter';
 import { PlatformModalCloseButton } from './common/PlatformModalCloseButton';
 import { PlatformProgressBar } from './common/PlatformProgressBar';
 import { PlatformStatusMessage } from './common/PlatformStatusMessage';
@@ -46,9 +47,13 @@ function SelectionModal({
           {children}
         </div>
         {footer ? (
-          <div className="flex flex-wrap items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
+          <PlatformDarkModalFooter
+            wrap
+            padding="roomy"
+            data-testid="selection-modal-footer"
+          >
             {footer}
-          </div>
+          </PlatformDarkModalFooter>
         ) : null}
       </div>
     </div>

src/components/common/PlatformDarkModalFooter.test.tsx

@@ -0,0 +1,65 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { PlatformDarkModalFooter } from './PlatformDarkModalFooter';
+
+describe('PlatformDarkModalFooter', () => {
+  test('renders bordered action footer with shared action row chrome', () => {
+    render(
+      <PlatformDarkModalFooter data-testid="footer">
+        <button type="button">取消</button>
+        <button type="button">确认</button>
+      </PlatformDarkModalFooter>,
+    );
+
+    const footer = screen.getByTestId('footer');
+    const actions = footer.querySelector('.platform-dark-modal-footer__actions');
+
+    expect(footer.className).toContain('platform-dark-modal-footer');
+    expect(footer.className).toContain('border-t');
+    expect(footer.className).toContain('border-white/10');
+    expect(footer.className).toContain('px-4');
+    expect(footer.className).toContain('py-3');
+    expect(actions?.className).toContain('justify-end');
+    expect(actions?.className).toContain('gap-3');
+  });
+
+  test('supports unbordered bottom padding actions for modal footer tails', () => {
+    render(
+      <PlatformDarkModalFooter
+        bordered={false}
+        padding="bottom"
+        gap="sm"
+        data-testid="footer"
+      >
+        <button type="button">关闭</button>
+      </PlatformDarkModalFooter>,
+    );
+
+    const footer = screen.getByTestId('footer');
+    const actions = footer.querySelector('.platform-dark-modal-footer__actions');
+
+    expect(footer.className).not.toContain('border-t');
+    expect(footer.className).toContain('px-5');
+    expect(footer.className).toContain('pb-5');
+    expect(actions?.className).toContain('gap-2');
+  });
+
+  test('supports content layout without wrapping children in an actions row', () => {
+    render(
+      <PlatformDarkModalFooter layout="content" data-testid="footer">
+        <div data-testid="content">自定义内容</div>
+      </PlatformDarkModalFooter>,
+    );
+
+    const footer = screen.getByTestId('footer');
+
+    expect(screen.getByTestId('content')).toBeTruthy();
+    expect(
+      footer.querySelector('.platform-dark-modal-footer__actions'),
+    ).toBeNull();
+    expect(footer.className).toContain('platform-dark-modal-footer');
+  });
+});

src/components/common/PlatformDarkModalFooter.tsx

@@ -0,0 +1,86 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type PlatformDarkModalFooterLayout = 'actions' | 'content';
+type PlatformDarkModalFooterPadding = 'compact' | 'roomy' | 'bottom';
+type PlatformDarkModalFooterGap = 'sm' | 'md';
+type PlatformDarkModalFooterAlign = 'start' | 'center' | 'end' | 'between';
+
+type PlatformDarkModalFooterProps = ComponentPropsWithoutRef<'div'> & {
+  children: ReactNode;
+  bordered?: boolean;
+  layout?: PlatformDarkModalFooterLayout;
+  padding?: PlatformDarkModalFooterPadding;
+  gap?: PlatformDarkModalFooterGap;
+  wrap?: boolean;
+  align?: PlatformDarkModalFooterAlign;
+  contentClassName?: string;
+};
+
+const PADDING_CLASS: Record<PlatformDarkModalFooterPadding, string> = {
+  compact: 'px-4 py-3 sm:px-5 sm:py-4',
+  roomy: 'px-5 py-4',
+  bottom: 'px-5 pb-5',
+};
+
+const GAP_CLASS: Record<PlatformDarkModalFooterGap, string> = {
+  sm: 'gap-2',
+  md: 'gap-3',
+};
+
+const ALIGN_CLASS: Record<PlatformDarkModalFooterAlign, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+};
+
+/**
+ * 暗色 / 像素弹层底部 footer 骨架。
+ * 统一承接 border、padding 和常见的动作按钮排布，避免业务页重复手写同一套 chrome。
+ */
+export function PlatformDarkModalFooter({
+  children,
+  bordered = true,
+  layout = 'actions',
+  padding = 'compact',
+  gap = 'md',
+  wrap = false,
+  align = 'end',
+  className,
+  contentClassName,
+  ...props
+}: PlatformDarkModalFooterProps) {
+  const frameClassName = [
+    'platform-dark-modal-footer',
+    bordered ? 'border-t border-white/10' : null,
+    PADDING_CLASS[padding],
+    className ?? null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (layout === 'content') {
+    return (
+      <div className={frameClassName} {...props}>
+        {children}
+      </div>
+    );
+  }
+
+  const actionsClassName = [
+    'platform-dark-modal-footer__actions',
+    'flex items-center',
+    ALIGN_CLASS[align],
+    GAP_CLASS[gap],
+    wrap ? 'flex-wrap' : null,
+    contentClassName ?? null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={frameClassName} {...props}>
+      <div className={actionsClassName}>{children}</div>
+    </div>
+  );
+}

src/components/rpg-runtime-panels/RpgAdventurePanelOverlays.tsx

@@ -46,6 +46,7 @@ import {
   UI_CHROME,
 } from '../../uiAssets';
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformDarkModalFooter } from '../common/PlatformDarkModalFooter';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
 import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import type { PlatformPillBadgeTone } from '../common/platformPillBadgeModel';
@@ -1025,7 +1026,10 @@ export function RpgAdventurePanelOverlays({
                 />
               </div>
 
-              <div className="flex items-center justify-end gap-2 border-t border-white/10 px-4 py-3 sm:px-5">
+              <PlatformDarkModalFooter
+                gap="sm"
+                data-testid="adventure-goal-panel-footer"
+              >
                 {goalStack.activeGoal?.sourceKind === 'quest' ||
                 goalStack.immediateStepGoal?.sourceKind === 'quest' ? (
                   <PlatformActionButton
@@ -1052,7 +1056,7 @@ export function RpgAdventurePanelOverlays({
                 >
                   知道了
                 </PlatformActionButton>
-              </div>
+              </PlatformDarkModalFooter>
             </motion.div>
           </motion.div>
         )}