收口个人中心弹层组件

- 新增 PlatformProfileModalShell 统一个人中心主弹层与副弹层壳层 - 抽离 PlatformProfilePlayedWorksModal 与 PlatformProfileReferralModal 并移除首页内联历史与邀请弹层实现 - 让昵称充值任务兑换码账单等弹层复用共享壳层并补齐测试和文档
2026-06-10 19:44:19 +08:00
parent 08339b410b
commit 4e3378be65
10 changed files with 1051 additions and 815 deletions
--- a/src/components/platform-entry/PlatformProfileModalShell.tsx
+++ b/src/components/platform-entry/PlatformProfileModalShell.tsx
@@ -0,0 +1,146 @@
+import type { ReactNode } from 'react';
+
+import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
+import { UnifiedModal } from '../common/UnifiedModal';
+
+type PlatformProfileModalShellProps = {
+  title: string;
+  description?: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  closeLabel?: string;
+  closeVariant?: 'profile' | 'profileCompact';
+  closeDisabled?: boolean;
+  showHeader?: boolean;
+  showCloseButton?: boolean;
+  size?: 'sm' | 'md';
+  zIndexClassName?: string;
+  panelClassName: string;
+  bodyClassName?: string;
+  descriptionClassName?: string;
+};
+
+type PlatformProfileSecondaryModalShellProps = {
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  closeLabel?: string;
+  closeVariant?: 'floating' | 'floatingPlain';
+  closeIcon?: ReactNode;
+  closeButtonClassName?: string;
+  overlayTone?: 'default' | 'soft';
+  size?: 'sm' | 'md';
+  zIndexClassName?: string;
+  panelClassName: string;
+  contentClassName: string;
+};
+
+const PROFILE_MODAL_OVERLAY_CLASS =
+  'platform-modal-backdrop !items-center !justify-center !px-4 !py-6';
+const PROFILE_MODAL_HEADER_CLASS = 'border-white/10 px-5 py-4';
+const PROFILE_MODAL_TITLE_CLASS = 'text-base font-black';
+const PROFILE_MODAL_DESCRIPTION_CLASS =
+  'mt-1 text-xs font-semibold text-[var(--platform-text-soft)]';
+
+const PROFILE_SECONDARY_MODAL_OVERLAY_CLASS_BY_TONE = {
+  default: '!items-center !bg-black/48 !px-3 !py-5 !backdrop-blur-none',
+  soft: '!items-center !bg-black/42 !px-3 !py-5 !backdrop-blur-none',
+} as const;
+
+/**
+ * 个人中心标准弹窗壳层。
+ * 统一收口账户侧弹窗常用的 overlay、header 和 close button 配置。
+ */
+export function PlatformProfileModalShell({
+  title,
+  description,
+  onClose,
+  children,
+  closeLabel,
+  closeVariant = 'profile',
+  closeDisabled = false,
+  showHeader = true,
+  showCloseButton = true,
+  size = 'sm',
+  zIndexClassName = 'z-[80]',
+  panelClassName,
+  bodyClassName = 'px-5 py-5',
+  descriptionClassName = PROFILE_MODAL_DESCRIPTION_CLASS,
+}: PlatformProfileModalShellProps) {
+  return (
+    <UnifiedModal
+      open
+      title={title}
+      description={description}
+      onClose={onClose}
+      closeLabel={closeLabel ?? `关闭${title}`}
+      closeVariant={closeVariant}
+      closeDisabled={closeDisabled}
+      showHeader={showHeader}
+      showCloseButton={showCloseButton}
+      closeOnBackdrop={false}
+      closeOnEscape={false}
+      portal={false}
+      size={size}
+      zIndexClassName={zIndexClassName}
+      overlayClassName={PROFILE_MODAL_OVERLAY_CLASS}
+      panelClassName={panelClassName}
+      headerClassName={PROFILE_MODAL_HEADER_CLASS}
+      titleClassName={PROFILE_MODAL_TITLE_CLASS}
+      descriptionClassName={descriptionClassName}
+      bodyClassName={bodyClassName}
+    >
+      {children}
+    </UnifiedModal>
+  );
+}
+
+/**
+ * 个人中心副弹层壳层。
+ * 用于“玩过 / 账单 / 邀请”这类白底浮层，统一收口 overlay、floating close 和 body 外壳。
+ */
+export function PlatformProfileSecondaryModalShell({
+  title,
+  onClose,
+  children,
+  closeLabel,
+  closeVariant = 'floating',
+  closeIcon = '×',
+  closeButtonClassName,
+  overlayTone = 'default',
+  size = 'sm',
+  zIndexClassName = 'z-[80]',
+  panelClassName,
+  contentClassName,
+}: PlatformProfileSecondaryModalShellProps) {
+  return (
+    <UnifiedModal
+      open
+      title={title}
+      onClose={onClose}
+      showHeader={false}
+      showCloseButton={false}
+      closeOnBackdrop={false}
+      closeOnEscape={false}
+      portal={false}
+      size={size}
+      zIndexClassName={zIndexClassName}
+      overlayClassName={
+        PROFILE_SECONDARY_MODAL_OVERLAY_CLASS_BY_TONE[overlayTone]
+      }
+      panelClassName={panelClassName}
+      bodyClassName="!p-0"
+    >
+      <div className={contentClassName}>
+        <PlatformModalCloseButton
+          label={closeLabel ?? `关闭${title}`}
+          variant={closeVariant}
+          onClick={onClose}
+          className={closeButtonClassName}
+          icon={closeIcon}
+        />
+        {children}
+      </div>
+    </UnifiedModal>
+  );
+}