收口前端平台组件库能力

新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
2026-06-10 10:24:18 +08:00
parent a4ee6ff698
commit 1ad25e30f8
226 changed files with 23364 additions and 7825 deletions
--- a/src/components/common/PlatformInfoBlock.tsx
+++ b/src/components/common/PlatformInfoBlock.tsx
@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react';
+
+type PlatformInfoBlockVariant = 'default' | 'compactRow';
+
+type PlatformInfoBlockProps = {
+  label?: ReactNode;
+  children: ReactNode;
+  variant?: PlatformInfoBlockVariant;
+  multiline?: boolean;
+  className?: string;
+  labelClassName?: string;
+  valueClassName?: string;
+};
+
+const PLATFORM_INFO_BLOCK_CLASS: Record<PlatformInfoBlockVariant, string> = {
+  default:
+    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-2',
+  compactRow:
+    'flex justify-between gap-2 rounded-[0.85rem] border-0 bg-white/74 px-2.5 py-1.5 sm:gap-3 sm:px-3 sm:py-2',
+};
+
+const PLATFORM_INFO_BLOCK_LABEL_CLASS: Record<
+  PlatformInfoBlockVariant,
+  string
+> = {
+  default: 'text-xs font-bold text-[var(--platform-text-soft)]',
+  compactRow: 'text-xs font-bold text-[var(--platform-text-muted)] sm:text-sm',
+};
+
+function getValueClassName({
+  hasLabel,
+  multiline,
+  variant,
+  valueClassName,
+}: {
+  hasLabel: boolean;
+  multiline: boolean;
+  variant: PlatformInfoBlockVariant;
+  valueClassName?: string;
+}) {
+  if (variant === 'compactRow') {
+    return [
+      'break-words text-right text-xs font-black leading-5 text-[var(--platform-text-strong)] sm:text-sm',
+      valueClassName,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  return [
+    'break-words text-sm text-[var(--platform-text-strong)]',
+    hasLabel ? 'mt-1' : null,
+    multiline ? 'whitespace-pre-wrap leading-6' : 'font-semibold leading-5',
+    valueClassName,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * 平台信息展示块。
+ * 统一承接弹窗和详情页中“短标签 + 白底内容”的只读信息 chrome。
+ */
+export function PlatformInfoBlock({
+  label,
+  children,
+  variant = 'default',
+  multiline = false,
+  className,
+  labelClassName,
+  valueClassName,
+}: PlatformInfoBlockProps) {
+  return (
+    <div
+      className={[PLATFORM_INFO_BLOCK_CLASS[variant], className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {label ? (
+        <div
+          className={[PLATFORM_INFO_BLOCK_LABEL_CLASS[variant], labelClassName]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {label}
+        </div>
+      ) : null}
+      <div
+        className={getValueClassName({
+          hasLabel: Boolean(label),
+          multiline,
+          variant,
+          valueClassName,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}