继续收口工具弹窗与分段切换预设

新增 PlatformToolModalShell 承接白底工具弹窗壳层和固定可访问名称新增 PlatformSegmentedTabPresets 沉淀频道下划线、创作 pill rail 与二列 option segment 迁移拼图、抓大鹅、历史素材弹窗和首页 / 作品架 / 充值切换的重复组件写法同步 PlatformUiKit 文档和 Hermes 决策记录
2026-06-11 16:32:56 +08:00
parent 7c47ad3358
commit ffcffef6d2
15 changed files with 848 additions and 621 deletions
@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+
+import { useAuthUi } from '../auth/AuthUiContext';
+import { UnifiedModal } from './UnifiedModal';
+
+type PlatformToolModalShellProps = {
+  open: boolean;
+  title: string;
+  ariaLabel?: string;
+  description?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  onClose: () => void;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+  closeLabel?: string;
+  closeDisabled?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  zIndexClassName?: string;
+  panelClassName?: string;
+  titleClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+};
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+/**
+ * 结果页 / 工具页里的白底 portal 弹窗壳。
+ * 这里只收口平台主题 overlay、白底 panel 和标准 header/body/footer 节奏，不吸收各玩法正文与动作语义。
+ */
+export function PlatformToolModalShell({
+  open,
+  title,
+  ariaLabel,
+  description,
+  children,
+  footer,
+  onClose,
+  size = 'xl',
+  closeLabel,
+  closeDisabled = false,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  zIndexClassName = 'z-[140]',
+  panelClassName,
+  titleClassName,
+  bodyClassName,
+  footerClassName,
+}: PlatformToolModalShellProps) {
+  const resolvedPlatformTheme =
+    useAuthUi()?.platformTheme ?? 'light';
+
+  return (
+    <UnifiedModal
+      open={open}
+      title={title}
+      // 某些工具弹窗标题会直接显示当前关卡/物品名，但读屏和测试更适合使用稳定的弹窗语义名。
+      ariaLabel={ariaLabel}
+      description={description}
+      onClose={onClose}
+      footer={footer}
+      size={size}
+      closeLabel={closeLabel ?? `关闭${ariaLabel ?? title}`}
+      closeDisabled={closeDisabled}
+      closeOnBackdrop={closeOnBackdrop}
+      closeOnEscape={closeOnEscape}
+      zIndexClassName={zIndexClassName}
+      overlayClassName={`platform-theme platform-theme--${resolvedPlatformTheme}`}
+      panelClassName={joinClassNames(
+        'platform-remap-surface shadow-[0_24px_80px_rgba(0,0,0,0.55)]',
+        panelClassName,
+      )}
+      headerClassName="!items-center !px-5 !py-4"
+      titleClassName={titleClassName}
+      bodyClassName={joinClassNames(
+        '!px-5 !py-4 sm:!px-5 sm:!py-4',
+        bodyClassName,
+      )}
+      footerClassName={joinClassNames(
+        '!px-5 !py-4 sm:!px-5 sm:!py-4',
+        footerClassName,
+      )}
+    >
+      {children}
+    </UnifiedModal>
+  );
+}