@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/preview-registry.jsx

@@ -0,0 +1,4719 @@
+// B端设计系统 — 预览注册表
+//
+// 平台预览配置，和组件规范（components.js / 三件套）分离。
+// 每个组件一段：挂组件引用、TOKEN_MAP、预览控制项、控制值→Props 的映射。
+
+import { Plus, Heart, Star, Zap, Search, Eye } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import AvatarGridPreview from './components/AvatarGridPreview';
+import AvatarGroup from './components/AvatarGroup';
+import Button from './components/Button';
+import Tabs from './components/Tabs';
+import Modal from './components/Modal';
+import Sheet from './components/Sheet';
+import FormTitle from './components/FormTitle';
+import Form, { FORM_FIELD_TYPES, FORM_SAMPLE_ITEMS } from './components/Form';
+import FormFieldStack from './components/FormFieldStack';
+import Input from './components/Input';
+import TextArea from './components/TextArea';
+import InputNumber from './components/InputNumber';
+import Select from './components/Select';
+import RadioGroup, { Radio } from './components/Radio';
+import CheckboxGroup, { Checkbox } from './components/Checkbox';
+import Switch from './components/Switch';
+import ChatBubblePreview from './components/ChatBubblePreview';
+import ChatInput from './components/ChatInput';
+import ChatMessagePreview from './components/ChatMessagePreview';
+import CardPreview from './components/CardPreview';
+import ConversationListPreview from './components/ConversationListPreview';
+import InfoDisplayPanelPreview from './components/InfoDisplayPanelPreview';
+import NavBarPreview from './components/NavBarPreview';
+import TagBar, { TAGBAR_SAMPLE_BUSINESSES, TAGBAR_SAMPLE_ITEMS } from './components/TagBar';
+import Icon from './components/Icon';
+import IconGridPreview from './components/IconGridPreview';
+import Slider from './components/Slider';
+import Upload from './components/Upload';
+import DatePicker from './components/DatePicker';
+import TimePicker from './components/TimePicker';
+import Toast from './components/Toast';
+import Tag from './components/Tag';
+import TagInput from './components/TagInput';
+import TagGridPreview from './components/TagGridPreview';
+import TablePreview, {
+  TABLE_VARIANT_OPTIONS,
+  TABLE_COLUMN_TYPE_OPTIONS,
+  TABLE_CELL_SIZE_OPTIONS,
+  buildTableUsageFromControls,
+} from './components/TablePreview';
+import TooltipPreview from './components/TooltipPreview';
+import { AVATAR_TOKEN_MAP } from './components/Avatar.tokens';
+import { AVATAR_GROUP_TOKEN_MAP } from './components/AvatarGroup.tokens';
+import { BUTTON_TOKEN_MAP } from './components/Button.tokens';
+import { TABS_TOKEN_MAP } from './components/Tabs.tokens';
+import { MODAL_TOKEN_MAP } from './components/Modal.tokens';
+import { SHEET_TOKEN_MAP } from './components/Sheet.tokens';
+import { FORM_TITLE_TOKEN_MAP } from './components/FormTitle.tokens';
+import { FORM_TOKEN_MAP } from './components/Form.tokens';
+import { FORM_FIELD_STACK_TOKEN_MAP } from './components/FormFieldStack.tokens';
+import { INPUT_TOKEN_MAP } from './components/Input.tokens';
+import { TEXTAREA_TOKEN_MAP } from './components/TextArea.tokens';
+import { INPUT_NUMBER_TOKEN_MAP } from './components/InputNumber.tokens';
+import { SELECT_TOKEN_MAP } from './components/Select.tokens';
+import { RADIO_TOKEN_MAP } from './components/Radio.tokens';
+import { CHECKBOX_TOKEN_MAP } from './components/Checkbox.tokens';
+import { SWITCH_TOKEN_MAP } from './components/Switch.tokens';
+import { CHATBUBBLE_TOKEN_MAP } from './components/ChatBubble.tokens';
+import { CHATINPUT_TOKEN_MAP } from './components/ChatInput.tokens';
+import { CHAT_MESSAGE_TOKEN_MAP } from './components/ChatMessage.tokens';
+import { CARD_TOKEN_MAP } from './components/Card.tokens';
+import { CONVERSATION_LIST_TOKEN_MAP } from './components/ConversationList.tokens';
+import { INFO_DISPLAY_PANEL_TOKEN_MAP } from './components/InfoDisplayPanel.tokens';
+import { NAVBAR_TOKEN_MAP } from './components/NavBar.tokens';
+import { TAGBAR_TOKEN_MAP } from './components/TagBar.tokens';
+import { ICON_TOKEN_MAP } from './components/Icon.tokens';
+import { SLIDER_TOKEN_MAP } from './components/Slider.tokens';
+import { UPLOAD_TOKEN_MAP } from './components/Upload.tokens';
+import { DATEPICKER_TOKEN_MAP } from './components/DatePicker.tokens';
+import { TIMEPICKER_TOKEN_MAP } from './components/TimePicker.tokens';
+import { TOAST_TOKEN_MAP } from './components/Toast.tokens';
+import { TAG_TOKEN_MAP } from './components/Tag.tokens';
+import { TAGINPUT_TOKEN_MAP } from './components/TagInput.tokens';
+import { TABLE_TOKEN_MAP } from './components/Table.tokens';
+import { TOOLTIP_TOKEN_MAP } from './components/Tooltip.tokens';
+import avatarJsxRaw from './components/Avatar.jsx?raw';
+import avatarGroupJsxRaw from './components/AvatarGroup.jsx?raw';
+import buttonJsxRaw from './components/Button.jsx?raw';
+import tabsJsxRaw from './components/Tabs.jsx?raw';
+import modalJsxRaw from './components/Modal.jsx?raw';
+import sheetJsxRaw from './components/Sheet.jsx?raw';
+import formTitleJsxRaw from './components/FormTitle.jsx?raw';
+import formJsxRaw from './components/Form.jsx?raw';
+import formFieldStackJsxRaw from './components/FormFieldStack.jsx?raw';
+import inputJsxRaw from './components/Input.jsx?raw';
+import textareaJsxRaw from './components/TextArea.jsx?raw';
+import inputNumberJsxRaw from './components/InputNumber.jsx?raw';
+import selectJsxRaw from './components/Select.jsx?raw';
+import radioJsxRaw from './components/Radio.jsx?raw';
+import checkboxJsxRaw from './components/Checkbox.jsx?raw';
+import switchJsxRaw from './components/Switch.jsx?raw';
+import chatBubbleJsxRaw from './components/ChatBubble.jsx?raw';
+import chatInputJsxRaw from './components/ChatInput.jsx?raw';
+import chatMessageJsxRaw from './components/ChatMessage.jsx?raw';
+import cardJsxRaw from './components/Card.jsx?raw';
+import conversationListJsxRaw from './components/ConversationList.jsx?raw';
+import infoDisplayPanelJsxRaw from './components/InfoDisplayPanel.jsx?raw';
+import navBarJsxRaw from './components/NavBar.jsx?raw';
+import tagBarJsxRaw from './components/TagBar.jsx?raw';
+import iconJsxRaw from './components/Icon.jsx?raw';
+
+import sliderJsxRaw from './components/Slider.jsx?raw';
+import uploadJsxRaw from './components/Upload.jsx?raw';
+import datePickerJsxRaw from './components/DatePicker.jsx?raw';
+import timePickerJsxRaw from './components/TimePicker.jsx?raw';
+import toastJsxRaw from './components/Toast.jsx?raw';
+import tagJsxRaw from './components/Tag.jsx?raw';
+import tagInputJsxRaw from './components/TagInput.jsx?raw';
+import tableJsxRaw from './components/Table.jsx?raw';
+import tooltipJsxRaw from './components/Tooltip.jsx?raw';
+import Empty from './components/Empty';
+import { EMPTY_TOKEN_MAP } from './components/Empty.tokens';
+import emptyJsxRaw from './components/Empty.jsx?raw';
+import FullScreenPage from './components/FullScreenPage';
+import { FULL_SCREEN_PAGE_TOKEN_MAP } from './components/FullScreenPage.tokens';
+import fullScreenPageJsxRaw from './components/FullScreenPage.jsx?raw';
+
+/** 预览用：切换「初始开/关」时通过 key 重挂载，避免 defaultChecked 仅在 mount 生效 */
+function SwitchPreview({ variant = 'brand', defaultChecked, disabled }) {
+  return (
+    <Switch
+      key={`sw-${defaultChecked}-${disabled}`}
+      variant={variant}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+    />
+  );
+}
+
+const SLIDER_PREVIEW_MARKS = { 0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%' };
+const SLIDER_PREVIEW_MARKS_TEXT = JSON.stringify(SLIDER_PREVIEW_MARKS, null, 2);
+const SLIDER_PREVIEW_DEFAULTS = {
+  min: 0,
+  max: 100,
+  step: 1,
+  showTooltip: true,
+  defaultValueRangeText: '[20, 80]',
+  defaultValueSingleText: '50',
+};
+
+function composeHidden(hiddenA, hiddenB) {
+  if (!hiddenA) return hiddenB;
+  if (!hiddenB) return hiddenA;
+  return (ctx) => hiddenA(ctx) || hiddenB(ctx);
+}
+
+function getSliderControlIds(prefix = '') {
+  const buildId = (name) => (prefix ? `${prefix}${name.charAt(0).toUpperCase()}${name.slice(1)}` : name);
+  return {
+    initialKey: buildId('initialKey'),
+    min: buildId('min'),
+    max: buildId('max'),
+    step: buildId('step'),
+    defaultValueText: buildId('defaultValueText'),
+    showTooltip: buildId('showTooltip'),
+    hasMarks: buildId('hasMarks'),
+    marksText: buildId('marksText'),
+    disabled: buildId('disabled'),
+  };
+}
+
+function resolveSliderPreviewDefaultValueText(initialKey = 'range') {
+  return initialKey === 'single'
+    ? SLIDER_PREVIEW_DEFAULTS.defaultValueSingleText
+    : SLIDER_PREVIEW_DEFAULTS.defaultValueRangeText;
+}
+
+function parseSliderPreviewDefaultValue(raw, initialKey) {
+  const fallback = initialKey === 'single' ? 50 : [20, 80];
+  if (typeof raw === 'number') return initialKey === 'single' ? raw : [20, 80];
+  const text = String(raw ?? '').trim();
+  if (!text) return fallback;
+
+  try {
+    const parsed = JSON.parse(text);
+    if (initialKey === 'single') {
+      const num = Array.isArray(parsed) ? Number(parsed[0]) : Number(parsed);
+      return Number.isFinite(num) ? num : fallback;
+    }
+    if (Array.isArray(parsed)) {
+      const values = parsed.slice(0, 2).map((item) => Number(item)).filter((item) => Number.isFinite(item));
+      if (values.length === 2) return values;
+    }
+  } catch {
+    if (initialKey === 'single') {
+      const num = Number(text);
+      if (Number.isFinite(num)) return num;
+    }
+  }
+
+  return fallback;
+}
+
+function parseSliderPreviewMarks(text, enabled) {
+  if (!enabled) return undefined;
+  const raw = String(text ?? '').trim();
+  if (!raw) return SLIDER_PREVIEW_MARKS;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch {
+    return SLIDER_PREVIEW_MARKS;
+  }
+  return SLIDER_PREVIEW_MARKS;
+}
+
+function buildSliderPreviewControls(prefix = '', hidden) {
+  const ids = getSliderControlIds(prefix);
+  return [
+    {
+      id: ids.initialKey,
+      label: '初始模式',
+      type: 'seg',
+      options: [
+        { id: 'range', label: '区间' },
+        { id: 'single', label: '单值' },
+      ],
+      default: 'range',
+      hidden,
+    },
+    {
+      id: ids.min,
+      label: '最小值',
+      type: 'number',
+      default: SLIDER_PREVIEW_DEFAULTS.min,
+      hidden,
+    },
+    {
+      id: ids.max,
+      label: '最大值',
+      type: 'number',
+      default: SLIDER_PREVIEW_DEFAULTS.max,
+      hidden,
+    },
+    {
+      id: ids.step,
+      label: '步长',
+      type: 'number',
+      default: SLIDER_PREVIEW_DEFAULTS.step,
+      hidden,
+    },
+    {
+      id: ids.defaultValueText,
+      label: '默认值',
+      type: 'text',
+      default: resolveSliderPreviewDefaultValueText('range'),
+      hidden,
+    },
+    {
+      id: ids.showTooltip,
+      label: '提示气泡',
+      type: 'switch',
+      default: SLIDER_PREVIEW_DEFAULTS.showTooltip,
+      hidden,
+    },
+    {
+      id: ids.hasMarks,
+      label: '刻度',
+      type: 'seg',
+      options: [
+        { id: 'on', label: '显示' },
+        { id: 'off', label: '隐藏' },
+      ],
+      default: 'off',
+      hidden,
+    },
+    {
+      id: ids.marksText,
+      label: '刻度配置',
+      type: 'textarea',
+      default: SLIDER_PREVIEW_MARKS_TEXT,
+      hidden: composeHidden(hidden, ({ controlValues }) => (controlValues[ids.hasMarks] || 'off') !== 'on'),
+    },
+    {
+      id: ids.disabled,
+      label: '禁用',
+      type: 'switch',
+      default: false,
+      hidden,
+    },
+  ];
+}
+
+function normalizeSliderPreviewControls(nextControlValues, prevControlValues, changedControlId, prefix = '') {
+  const ids = getSliderControlIds(prefix);
+  const next = { ...nextControlValues };
+  const nextInitialKey = next[ids.initialKey] || 'range';
+  const prevInitialKey = prevControlValues?.[ids.initialKey] || 'range';
+  const prevDefaultText = prevControlValues?.[ids.defaultValueText];
+  const nextDefaultText = next[ids.defaultValueText];
+
+  if (changedControlId === '__init__' || nextDefaultText == null || nextDefaultText === '') {
+    next[ids.defaultValueText] = resolveSliderPreviewDefaultValueText(nextInitialKey);
+  } else if (changedControlId === ids.initialKey) {
+    const prevTemplate = resolveSliderPreviewDefaultValueText(prevInitialKey);
+    if (prevDefaultText == null || prevDefaultText === prevTemplate || nextDefaultText === prevTemplate) {
+      next[ids.defaultValueText] = resolveSliderPreviewDefaultValueText(nextInitialKey);
+    }
+  }
+
+  if (changedControlId === '__init__' || changedControlId === ids.hasMarks) {
+    if ((next[ids.hasMarks] || 'off') === 'on' && !String(next[ids.marksText] || '').trim()) {
+      next[ids.marksText] = SLIDER_PREVIEW_MARKS_TEXT;
+    }
+  }
+
+  return next;
+}
+
+function buildSliderPreviewProps(controlValues, prefix = '') {
+  const ids = getSliderControlIds(prefix);
+  const initialKey = controlValues[ids.initialKey] || 'range';
+  const min = Number(controlValues[ids.min]);
+  const max = Number(controlValues[ids.max]);
+  const safeMin = Number.isFinite(min) ? min : SLIDER_PREVIEW_DEFAULTS.min;
+  const safeMaxCandidate = Number.isFinite(max) ? max : SLIDER_PREVIEW_DEFAULTS.max;
+  const safeMax = safeMaxCandidate > safeMin ? safeMaxCandidate : safeMin + 1;
+  const step = Number(controlValues[ids.step]);
+  const safeStep = Number.isFinite(step) && step > 0 ? step : SLIDER_PREVIEW_DEFAULTS.step;
+  const showTooltip = controlValues[ids.showTooltip] !== false;
+  const disabled = controlValues[ids.disabled] === true;
+  const marksEnabled = (controlValues[ids.hasMarks] || 'off') === 'on';
+
+  return {
+    initialKey,
+    min: safeMin,
+    max: safeMax,
+    step: safeStep,
+    defaultValue: parseSliderPreviewDefaultValue(controlValues[ids.defaultValueText], initialKey),
+    showTooltip,
+    marks: parseSliderPreviewMarks(controlValues[ids.marksText], marksEnabled),
+    disabled,
+  };
+}
+
+function formatUsageLiteral(value) {
+  if (value === undefined) return undefined;
+  if (typeof value === 'string') return `'${value}'`;
+  return JSON.stringify(value);
+}
+
+/** 预览用：key 保证切换配置时非受控 defaultValue 生效 */
+function SliderPreview({ min, max, step, defaultValue, showTooltip, marks, disabled, initialKey }) {
+  return (
+    <Slider
+      key={`sl-${initialKey}-${min}-${max}-${step}-${Boolean(marks)}-${disabled}-${JSON.stringify(defaultValue)}`}
+      min={min}
+      max={max}
+      step={step}
+      defaultValue={defaultValue}
+      showTooltip={showTooltip}
+      marks={marks}
+      disabled={disabled}
+    />
+  );
+}
+
+const INPUT_SINGLE_SUGGESTIONS = [
+  '您好，您的问题已收到，抖音客服正在为您核实处理。',
+  '您好，这边已为您记录反馈，正在同步专员跟进。',
+  '您好，当前问题我们正在核查中，请您稍候查看处理结果。',
+];
+
+const INPUT_MULTI_SUGGESTION_GROUPS = [
+  [
+    '您好，正在为您核实，请稍候。',
+    '抱歉给您带来不便，这边已经帮您加急处理。',
+    '您好，您反馈的问题我们已经收到，建议您先提供订单号和问题截图，方便抖音客服尽快为您核实处理。',
+  ],
+  [
+    '您好，这边先帮您登记反馈。',
+    '请您放心，当前问题已经提交相关同学加急排查。',
+    '为了更快帮您确认处理进度，建议您补充订单编号、联系方式以及具体异常时间，抖音客服会尽快协助您跟进。',
+  ],
+  [
+    '您好，已收到您的咨询。',
+    '很抱歉给您带来困扰，这边正在为您核实具体原因。',
+    '若方便的话，您可以补充问题页面截图和操作路径，我们会结合账号信息一并核查，尽快给您同步处理结果。',
+  ],
+];
+
+const TEXTAREA_SINGLE_SUGGESTIONS = [
+  '根据当前对话内容，建议先记录用户诉求、异常现象和下一步处理动作。',
+  '建议在备注中补充订单号、问题发生时间和已核查结果，方便后续继续跟进。',
+  '可先生成一版客服备注草稿，后续结合人工判断再做补充和修订。',
+];
+
+const TEXTAREA_MULTI_SUGGESTION_GROUPS = [
+  [
+    '根据当前对话内容，建议先记录用户诉求、异常现象和下一步处理动作。',
+    '建议在备注中补充订单号、问题发生时间和已核查结果，方便后续继续跟进。',
+  ],
+  [
+    '建议优先整理用户诉求、处理时效和需补充的材料信息。',
+    '如果需要后续交接，可一并记录当前判责结论和预计回访时间。',
+  ],
+  [
+    '可先形成一版标准备注草稿，再结合人工判断补充风险说明。',
+    '建议在草稿中明确“已同步处理”“待用户补充资料”“下一步动作”这三类信息。',
+  ],
+];
+
+const TAGINPUT_AI_SUGGESTION_GROUPS = [
+  [
+    ['改签', '门店变更'],
+    ['退款', '售后处理'],
+    ['物流异常', '催办'],
+  ],
+  [
+    ['优惠券', '核销异常'],
+    ['客服回访', '待跟进'],
+    ['资损风险', '升级处理'],
+  ],
+  [
+    ['履约异常', '商家侧'],
+    ['平台规则', '需复核'],
+    ['用户反馈', '已记录'],
+  ],
+];
+
+/** 预览用：key 随「填充 / 超长演示」切换重置非受控初值 */
+function TextAreaPreview({
+  variant = 'default',
+  fillMode = 'empty',
+  countOverflow = false,
+  disabled = false,
+  status = 'default',
+  resize = 'vertical',
+  fillHeight = false,
+  minRows = 3,
+  aiSuggestion,
+  aiSuggestions,
+}) {
+  const isCodeVariant = variant === 'code';
+  const sample = isCodeVariant
+    ? '# 角色\n你是抖音安全中心的小安智能助手，负责理解用户诉求并给出清晰答案。\n\n# 注意\n1. 回答前先判断是否需要调用知识库。\n2. 需要给出可执行、可验证的处理建议。'
+    : '我们非常高兴地向您介绍我们的最新产品 HiUI。HiUI是一个创新的在线客服解决方案，旨在帮助企业更好地理解并服务他们的客户。';
+  const defaultValue = fillMode === 'filled' ? sample : '';
+  const enforceMaxLength = !countOverflow;
+  const minRowsSafe = Math.min(5, Math.max(1, Math.round(Number(minRows)) || 3));
+  /** 仅「超长计数=开」时展示右下角字数区；关闭后整块不渲染，总高度随 minRows+正文收缩 */
+  const showCountDemo = Boolean(countOverflow);
+  const [singleIndex, setSingleIndex] = useState(0);
+  const [multiIndex, setMultiIndex] = useState(0);
+  const hasSingleSuggestion = typeof aiSuggestion === 'string' && aiSuggestion.trim().length > 0;
+  const hasMultiSuggestions = Array.isArray(aiSuggestions) && aiSuggestions.length > 0;
+
+  const handleRefresh = useCallback(() => {
+    if (hasMultiSuggestions) {
+      setMultiIndex((prev) => (prev + 1) % TEXTAREA_MULTI_SUGGESTION_GROUPS.length);
+      return;
+    }
+    if (hasSingleSuggestion) {
+      setSingleIndex((prev) => (prev + 1) % TEXTAREA_SINGLE_SUGGESTIONS.length);
+    }
+  }, [hasMultiSuggestions, hasSingleSuggestion]);
+
+  return (
+    <TextArea
+      key={`textarea-${variant}-${fillMode}-${countOverflow}-${disabled}-${status}-${resize}-${fillHeight}-${minRowsSafe}`}
+      variant={variant}
+      minRows={minRowsSafe}
+      status={status}
+      disabled={disabled}
+      placeholder={isCodeVariant ? '请输入 System Prompt、JSON 或代码' : '请输入'}
+      defaultValue={defaultValue}
+      showCount={showCountDemo}
+      {...(showCountDemo ? { maxLength: 140, enforceMaxLength } : {})}
+      resize={resize}
+      fillHeight={fillHeight}
+      aiSuggestion={hasSingleSuggestion ? TEXTAREA_SINGLE_SUGGESTIONS[singleIndex] : undefined}
+      aiSuggestions={hasMultiSuggestions ? TEXTAREA_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+      onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
+      className={fillHeight ? 'flex-1 min-h-0 w-full' : (isCodeVariant ? 'w-[520px]' : '')}
+    />
+  );
+}
+
+function InputPreview(props) {
+  const { aiSuggestion, aiSuggestions, onRefreshAiSuggestions: _ignored, ...rest } = props;
+  const [singleIndex, setSingleIndex] = useState(0);
+  const [multiIndex, setMultiIndex] = useState(0);
+  const hasSingleSuggestion = typeof aiSuggestion === 'string' && aiSuggestion.trim().length > 0;
+  const hasMultiSuggestions = Array.isArray(aiSuggestions) && aiSuggestions.length > 0;
+
+  const handleRefresh = useCallback(() => {
+    if (hasMultiSuggestions) {
+      setMultiIndex((prev) => (prev + 1) % INPUT_MULTI_SUGGESTION_GROUPS.length);
+      return;
+    }
+    if (hasSingleSuggestion) {
+      setSingleIndex((prev) => (prev + 1) % INPUT_SINGLE_SUGGESTIONS.length);
+    }
+  }, [hasMultiSuggestions, hasSingleSuggestion]);
+
+  return (
+    <Input
+      {...rest}
+      aiSuggestion={hasSingleSuggestion ? INPUT_SINGLE_SUGGESTIONS[singleIndex] : undefined}
+      aiSuggestions={hasMultiSuggestions ? INPUT_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+      onRefreshAiSuggestions={hasSingleSuggestion || hasMultiSuggestions ? handleRefresh : undefined}
+    />
+  );
+}
+
+/** 预览用：key 保证切换初始值 / 内外置按钮 / 禁用时非受控值重置 */
+function InputNumberPreview({ content = 'empty', buttonMode = 'outer', disabled = false, status = 'default' }) {
+  const defaultValue = content === 'filled' ? 12 : undefined;
+  const innerButtons = buttonMode === 'inner';
+  return (
+    <InputNumber
+      key={`input-number-${content}-${buttonMode}-${disabled}-${status}`}
+      status={status}
+      disabled={disabled}
+      innerButtons={innerButtons}
+      defaultValue={defaultValue}
+      min={0}
+      max={99}
+      step={1}
+      placeholder="请输入"
+    />
+  );
+}
+
+const SELECT_DEMO_FEW = [
+  { value: 'zj', label: '浙江省' },
+  { value: 'js', label: '江苏省' },
+  { value: 'sh', label: '上海市' },
+];
+
+const SELECT_DEMO_MANY = [
+  ...SELECT_DEMO_FEW,
+  { value: 'bj', label: '北京市' },
+  { value: 'gd', label: '广东省' },
+  { value: 'sc', label: '四川省' },
+  { value: 'hub', label: '湖北省' },
+  { value: 'hen', label: '河南省' },
+];
+
+const SELECT_TAG_OPTIONS = [
+  { value: 'brand', label: '标签', variant: 'grey' },
+  { value: 'risk', label: '标签', variant: 'grey' },
+  { value: 'service', label: '标签', variant: 'grey' },
+  { value: 'quality', label: '标签', variant: 'grey' },
+  { value: 'growth', label: '标签', variant: 'grey' },
+  { value: 'content', label: '标签', variant: 'grey' },
+];
+
+const SELECT_AI_SINGLE_SUGGESTIONS = ['江苏省', '上海市', '浙江省'];
+
+const SELECT_AI_MULTI_SUGGESTION_GROUPS = [
+  ['江苏省', '上海市', '浙江省'],
+  ['上海市', '浙江省', '江苏省'],
+  ['浙江省', '江苏省', '上海市'],
+];
+
+const DATEPICKER_SAMPLE_VALUE = {
+  date: '2019-03-15',
+  datetime: '2019-03-15 16:00:00',
+  daterange: ['2019-03-15', '2019-03-16'],
+  datetimerange: ['2019-03-15 09:00:00', '2019-03-16 16:00:00'],
+};
+
+const TIMEPICKER_SAMPLE_VALUE = {
+  time: '12:15',
+  timerange: ['09:30', '18:00'],
+};
+
+const UPLOAD_SAMPLE_IMAGE_A = `data:image/svg+xml;utf8,${encodeURIComponent(
+  `<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><defs><linearGradient id='g1' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='#2B90D9'/><stop offset='100%' stop-color='#0A355A'/></linearGradient></defs><rect width='96' height='96' fill='url(#g1)'/><circle cx='72' cy='24' r='10' fill='rgba(255,255,255,0.28)'/><path d='M0 66C13 52 25 49 38 56C50 62 59 60 69 51C76 45 85 43 96 45V96H0Z' fill='rgba(255,255,255,0.24)'/></svg>`
+)}`;
+
+const UPLOAD_SAMPLE_IMAGE_B = `data:image/svg+xml;utf8,${encodeURIComponent(
+  `<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><defs><linearGradient id='g2' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='#0C4867'/><stop offset='100%' stop-color='#0A243A'/></linearGradient></defs><rect width='96' height='96' fill='url(#g2)'/><ellipse cx='49' cy='50' rx='22' ry='14' fill='rgba(255,255,255,0.22)'/><circle cx='49' cy='50' r='6' fill='rgba(255,255,255,0.85)'/></svg>`
+)}`;
+
+const CHATBUBBLE_PRESET_MESSAGES = {
+  incoming: {
+    single: ['为什么我无法设置点赞列表查看权限'],
+    multiple: ['为什么我无法设置点赞列表查看权限', '那怎么看自己的直播回放？'],
+  },
+  outgoing: {
+    single: ['您好，因产品功能更新，“作品点赞信息”设置开关正逐步下线中'],
+    multiple: [
+      '您好，因产品功能更新，“作品点赞信息”设置开关正逐步下线中',
+      '目前不支持设置“作品点赞信息”权限。该功能下线后，您发布的作品的点赞列表仅对您自己可见。',
+    ],
+  },
+};
+
+const CHATBUBBLE_PRESET_TIMESTAMPS = {
+  incoming: {
+    single: ['2026-02-26 10:24:14'],
+    multiple: ['2026-02-26 10:24:14', '2026-02-26 10:26:08'],
+  },
+  outgoing: {
+    single: ['2026-02-26 10:25:03'],
+    multiple: ['2026-02-26 10:25:03', '2026-02-26 10:26:44'],
+  },
+};
+
+/** 预览用：key 保证切换初始选中 / 禁用 / 枚举时 defaultValue 生效 */
+function RadioPreview({ variant, layout, disabled, initialKey }) {
+  const defaultValue = initialKey === 'a' ? 'a' : initialKey === 'b' ? 'b' : undefined;
+  return (
+    <RadioGroup
+      key={`rp-${variant}-${layout}-${disabled}-${initialKey}`}
+      variant={variant}
+      layout={layout}
+      disabled={disabled}
+      defaultValue={defaultValue}
+    >
+      <Radio value="a">选项 A</Radio>
+      <Radio value="b">选项 B</Radio>
+      <Radio value="c" disabled>选项 C（单项禁用）</Radio>
+    </RadioGroup>
+  );
+}
+
+/** 预览用：组模式用 defaultValue 数组；半选模式为单独 Checkbox */
+function CheckboxPreview({ variant, size, layout, disabled, initialKey, previewMode }) {
+  if (previewMode === 'indeterminate') {
+    return (
+      <Checkbox
+        key={`cb-ind-${variant}-${size}-${disabled}`}
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        indeterminate
+      >
+        半选状态（树形父级）
+      </Checkbox>
+    );
+  }
+  let defaultValue = [];
+  if (initialKey === 'a') defaultValue = ['a'];
+  else if (initialKey === 'ab') defaultValue = ['a', 'b'];
+  return (
+    <CheckboxGroup
+      key={`cbg-${variant}-${size}-${layout}-${disabled}-${initialKey}`}
+      variant={variant}
+      size={size}
+      layout={layout}
+      disabled={disabled}
+      defaultValue={defaultValue}
+    >
+      <Checkbox value="a">选项 A</Checkbox>
+      <Checkbox value="b">选项 B</Checkbox>
+      <Checkbox value="c" disabled>选项 C（单项禁用）</Checkbox>
+    </CheckboxGroup>
+  );
+}
+
+/** 预览用：key 保证切换「初始值 / 选项量 / 禁用」时非受控 defaultValue 生效 */
+function SelectPreview({ status, disabled, initial, optionMode, selectType, aiSuggestion, aiSuggestions }) {
+  const isTagSelect = selectType === 'tag';
+  const options = isTagSelect
+    ? SELECT_TAG_OPTIONS
+    : optionMode === 'many'
+      ? SELECT_DEMO_MANY
+      : SELECT_DEMO_FEW;
+  const [singleIndex, setSingleIndex] = useState(0);
+  const [multiIndex, setMultiIndex] = useState(0);
+  const hasSingleSuggestion = typeof aiSuggestion === 'string' && aiSuggestion.trim().length > 0;
+  const hasMultiSuggestions = Array.isArray(aiSuggestions) && aiSuggestions.length > 0;
+  const defaultValue = initial === 'selected'
+    ? (isTagSelect ? ['brand', 'risk'] : 'js')
+    : undefined;
+
+  const handleRefresh = useCallback(() => {
+    if (hasMultiSuggestions) {
+      setMultiIndex((prev) => (prev + 1) % SELECT_AI_MULTI_SUGGESTION_GROUPS.length);
+      return;
+    }
+    if (hasSingleSuggestion) {
+      setSingleIndex((prev) => (prev + 1) % SELECT_AI_SINGLE_SUGGESTIONS.length);
+    }
+  }, [hasMultiSuggestions, hasSingleSuggestion]);
+
+  return (
+    <div className="w-[300px] max-w-full">
+      <Select
+        key={`selp-${selectType}-${initial}-${optionMode}-${disabled}-${status}`}
+        mode={isTagSelect ? 'tag' : 'default'}
+        options={options}
+        defaultValue={defaultValue}
+        placeholder="请选择"
+        status={status}
+        disabled={disabled}
+        allowClear
+        aiSuggestion={!isTagSelect && hasSingleSuggestion ? SELECT_AI_SINGLE_SUGGESTIONS[singleIndex] : undefined}
+        aiSuggestions={!isTagSelect && hasMultiSuggestions ? SELECT_AI_MULTI_SUGGESTION_GROUPS[multiIndex] : undefined}
+        onRefreshAiSuggestions={!isTagSelect && (hasSingleSuggestion || hasMultiSuggestions) ? handleRefresh : undefined}
+      />
+    </div>
+  );
+}
+
+const FORM_FIELD_LABELS = {
+  input: 'Input',
+  'input-number': 'InputNumber',
+  textarea: 'TextArea',
+  select: 'Select',
+  checkbox: 'Checkbox',
+  radio: 'RadioGroup',
+  switch: 'Switch',
+  'date-picker': 'DatePicker',
+  'time-picker': 'TimePicker',
+  slider: 'Slider',
+  upload: 'Upload',
+  'input-group': 'InputGroup',
+  'tag-input': 'TagInput',
+};
+
+const TAGINPUT_SAMPLE_TAGS = [
+  '标签',
+  '标签',
+  '标签',
+  '标签',
+  '标签',
+  '标签',
+];
+
+const FORM_FIELD_ATOM_ENUM_PROPS = {
+  radio: [
+    { name: 'controlVariant', type: 'enum', options: ['brand', 'black'], default: 'brand' },
+    { name: 'controlLayout', type: 'enum', options: ['horizontal', 'vertical'], default: 'horizontal' },
+  ],
+  checkbox: [
+    { name: 'controlVariant', type: 'enum', options: ['brand', 'black'], default: 'brand' },
+    { name: 'controlLayout', type: 'enum', options: ['horizontal', 'vertical'], default: 'horizontal' },
+  ],
+  switch: [
+    { name: 'controlVariant', type: 'enum', options: ['brand', 'black'], default: 'black' },
+  ],
+  'date-picker': [
+    { name: 'pickerType', type: 'enum', options: ['date', 'datetime', 'daterange', 'datetimerange'], default: 'date' },
+  ],
+  'time-picker': [
+    { name: 'timePickerType', type: 'enum', options: ['time', 'timerange'], default: 'time' },
+  ],
+  'input-number': [
+    { name: 'inputNumberButtons', type: 'enum', options: ['outer', 'inner'], default: 'outer' },
+  ],
+  /** 与 TextArea 组件详情「配置」侧栏顺序、选项 id、默认项一致（内容→超长计数→状态→默认高度→状态→高度适配） */
+  textarea: [
+    { name: 'fillMode', type: 'enum', options: ['empty', 'filled'], default: 'empty' },
+    { name: 'countOverflow', type: 'enum', options: ['off', 'on'], default: 'off' },
+    { name: 'state', type: 'enum', options: ['default', 'disabled'], default: 'default' },
+    { name: 'minRows', type: 'enum', options: [1, 2, 3, 4, 5], default: 3 },
+    { name: 'status', type: 'enum', options: ['default', 'error'], default: 'default' },
+    { name: 'resize', type: 'enum', options: ['vertical', 'none'], default: 'vertical' },
+  ],
+};
+
+const FORM_TEXTAREA_SAMPLE =
+  '我们非常高兴地向您介绍我们的最新产品 HiUI。HiUI是一个创新的在线客服解决方案，旨在帮助企业更好地理解并服务他们的客户。';
+
+function getFormFieldAtomEnumProps(fieldType) {
+  return FORM_FIELD_ATOM_ENUM_PROPS[fieldType] || [];
+}
+
+function buildFormFieldAtomProps(fieldType, enums, controlValues = {}) {
+  if (fieldType === 'radio' || fieldType === 'checkbox') {
+    return {
+      variant: enums.controlVariant || 'brand',
+      layout: enums.controlLayout || 'horizontal',
+    };
+  }
+  if (fieldType === 'switch') {
+    return {
+      variant: enums.controlVariant || 'black',
+    };
+  }
+  if (fieldType === 'date-picker') {
+    return {
+      pickerType: enums.pickerType || 'date',
+    };
+  }
+  if (fieldType === 'time-picker') {
+    return {
+      pickerType: ['time', 'timerange'].includes(enums.timePickerType) ? enums.timePickerType : 'time',
+    };
+  }
+  if (fieldType === 'input-number') {
+    return {
+      innerButtons: enums.inputNumberButtons === 'inner',
+    };
+  }
+  if (fieldType === 'textarea') {
+    const fillMode = enums.fillMode === 'filled' ? 'filled' : 'empty';
+    const countOn = enums.countOverflow === 'on';
+    const disabled = enums.state === 'disabled';
+    const row = Number(enums.minRows);
+    const minRows = [1, 2, 3, 4, 5].includes(row) ? row : 3;
+    const status = enums.status === 'error' ? 'error' : 'default';
+    const resize = enums.resize === 'none' ? 'none' : 'vertical';
+
+    const props = {
+      minRows,
+      resize,
+      disabled,
+    };
+    if (status === 'error') props.status = 'error';
+    if (fillMode === 'filled') props.defaultValue = FORM_TEXTAREA_SAMPLE;
+    if (countOn) {
+      props.showCount = true;
+      props.maxLength = 140;
+      props.enforceMaxLength = false;
+    }
+    return props;
+  }
+  if (fieldType === 'slider') {
+    return buildSliderPreviewProps(controlValues, 'slider');
+  }
+  return {};
+}
+
+function TagInputPreview({ content, widthMode, disabled, status, tagVariant, tagSize, showAiSuggestions = true }) {
+  const defaultValue = content === 'filled' ? TAGINPUT_SAMPLE_TAGS : [];
+  const widthClass = widthMode === 'narrow' ? '!w-[220px]' : widthMode === 'wide' ? '!w-[420px]' : '';
+  const [suggestionIndex, setSuggestionIndex] = useState(0);
+  const handleRefresh = useCallback(() => {
+    setSuggestionIndex((prev) => (prev + 1) % TAGINPUT_AI_SUGGESTION_GROUPS.length);
+  }, []);
+  return (
+    <TagInput
+      key={`tag-input-${content}-${widthMode}-${disabled}-${status}-${tagVariant}-${tagSize}`}
+      status={status}
+      disabled={disabled}
+      defaultValue={defaultValue}
+      placeholder="请输入"
+      tagVariant={tagVariant}
+      tagSize={tagSize}
+      aiSuggestions={showAiSuggestions ? TAGINPUT_AI_SUGGESTION_GROUPS[suggestionIndex] : undefined}
+      onRefreshAiSuggestions={showAiSuggestions ? handleRefresh : undefined}
+      className={widthClass}
+    />
+  );
+}
+
+function buildFormPreviewItems({ previewMode, fieldType, labelPosition, helpMode, validationState, fieldAtomProps }) {
+  if (previewMode === 'all') {
+    return FORM_SAMPLE_ITEMS.map((item) => ({
+      ...item,
+      id: `${item.id}-all`,
+      labelPosition: 'top',
+    }));
+  }
+
+  const type = FORM_FIELD_TYPES.includes(fieldType) ? fieldType : 'input';
+  return [{
+    id: `form-${type}`,
+    label: '字段标题',
+    type,
+    required: true,
+    labelPosition,
+    middleHelpText: helpMode === 'middle' ? '提示文案' : undefined,
+    helpText: helpMode === 'bottom' ? '提示文案' : undefined,
+    error: validationState === 'error',
+    defaultValue: type === 'radio'
+      ? 'a'
+      : type === 'checkbox'
+        ? ['a']
+        : type === 'tag-input'
+          ? TAGINPUT_SAMPLE_TAGS
+          : undefined,
+    ...fieldAtomProps,
+  }];
+}
+
+function FormPreview({
+  previewMode,
+  fieldType,
+  labelPosition,
+  helpMode,
+  validationState,
+  size,
+  labelOptional,
+  labelRequired,
+  labelAi,
+  labelHelp,
+  fieldAtomProps,
+}) {
+  const baseItems = buildFormPreviewItems({
+    previewMode,
+    fieldType,
+    labelPosition,
+    helpMode,
+    validationState,
+    fieldAtomProps,
+  });
+  const sliderDefaultValue = previewMode === 'single' && fieldType === 'slider'
+    ? fieldAtomProps.defaultValue
+    : undefined;
+  const [sliderValue, setSliderValue] = useState(sliderDefaultValue);
+
+  useEffect(() => {
+    setSliderValue(Array.isArray(sliderDefaultValue) ? [...sliderDefaultValue] : sliderDefaultValue);
+  }, [sliderDefaultValue, fieldType, helpMode, labelPosition, previewMode, size, validationState]);
+
+  const items = previewMode === 'single' && fieldType === 'slider'
+    ? baseItems.map((item) => ({
+      ...item,
+      value: sliderValue,
+      defaultValue: undefined,
+      onChange: setSliderValue,
+      onAfterChange: setSliderValue,
+    }))
+    : baseItems;
+
+  return (
+    <Form
+      key={`form-${previewMode}-${fieldType}-${labelPosition}-${helpMode}-${validationState}-${size}-${labelOptional}-${labelRequired}-${labelAi}-${labelHelp}-${JSON.stringify(fieldAtomProps || {})}`}
+      layout="vertical"
+      columns={1}
+      labelPosition={labelPosition}
+      size={size}
+      labelOptional={labelOptional}
+      labelRequired={labelRequired}
+      labelAi={labelAi}
+      labelHelp={labelHelp}
+      items={items}
+      className={previewMode === 'all' ? '!gap-10' : ''}
+    />
+  );
+}
+
+export const PREVIEW_REGISTRY = {
+  avatar: {
+    component: AvatarGridPreview,
+    tokenMap: AVATAR_TOKEN_MAP,
+    jsxSource: avatarJsxRaw,
+
+    controls: [
+      {
+        id: 'type',
+        label: '场景',
+        type: 'seg',
+        options: [
+          { id: 'all', label: '全部' },
+          { id: 'image', label: '图片' },
+          { id: 'eng', label: '英文' },
+          { id: 'ch', label: '中文' },
+          { id: 'fallback', label: '兜底' },
+          { id: 'robot', label: '机器人' },
+          { id: 'ai', label: 'AI头像' },
+        ],
+        default: 'all',
+      },
+      {
+        id: 'previewMode',
+        label: '预览',
+        type: 'seg',
+        options: [
+          { id: 'matrix', label: '矩阵' },
+          { id: 'single', label: '单个' },
+        ],
+        default: 'matrix',
+      },
+    ],
+
+    mapProps: (cv, enums) => ({
+      previewMode: cv.previewMode || 'matrix',
+      shape: enums.shape || 'round',
+      size: enums.size || 'default',
+      type: cv.type || enums.type || 'image',
+    }),
+
+    getVisibleEnumProps: ({ enumProps, controlValues }) => (
+      (controlValues.previewMode || 'matrix') === 'matrix'
+        ? enumProps.filter((prop) => prop.name === 'shape')
+        : enumProps
+    ),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Avatar from './components/Avatar';`];
+      const shape = enums.shape || 'round';
+      const isMatrix = (cv.previewMode || 'matrix') === 'matrix';
+      const size = isMatrix ? 'default' : (enums.size || 'default');
+      const selectedType = cv.type || enums.type || 'all';
+      const type = selectedType === 'all' ? 'image' : selectedType;
+      const props = [];
+
+      if (shape !== 'round') props.push(`shape="${shape}"`);
+      if (size !== 'default') props.push(`size="${size}"`);
+      if (type !== 'image') props.push(`type="${type}"`);
+
+      if (type === 'image') {
+        props.push('alt="用户头像"');
+      }
+
+      if (type === 'eng') {
+        props.push(`label="${size === 'xxs' || size === 'mini' || size === 'xs' ? 'T' : 'TF'}"`);
+      }
+
+      if (type === 'ch') {
+        props.push(`label="${size === 'default' || size === 'm' ? '体服' : '体'}"`);
+      }
+
+      lines.push('');
+      lines.push('<Avatar');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'avatar-group': {
+    component: AvatarGroup,
+    tokenMap: AVATAR_GROUP_TOKEN_MAP,
+    jsxSource: avatarGroupJsxRaw,
+
+    controls: [],
+
+    mapProps: (cv, enums) => ({
+      size: enums.size || 's',
+    }),
+
+    generateUsage: (enums) => {
+      const lines = [`import AvatarGroup from './components/AvatarGroup';`];
+      const size = enums.size || 's';
+      const props = [];
+
+      if (size !== 's') props.push(`size="${size}"`);
+
+      lines.push('');
+      lines.push('<AvatarGroup');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  icon: {
+    component: Icon,
+    gridComponent: IconGridPreview,
+    tokenMap: ICON_TOKEN_MAP,
+    jsxSource: iconJsxRaw,
+    previewType: 'icon-grid',
+
+    controls: [],
+
+    mapProps: (cv, enums) => ({
+      name: 'check-stroked',
+    }),
+
+    generateUsage: (enums) => {
+      const lines = [`import Icon from './components/Icon';`];
+      lines.push(`import { ICON_CATEGORIES } from './components/icons/icon-data';`);
+      lines.push('');
+      lines.push(`<Icon name="图标名称" size="${enums.size || 'sm'}" />`);
+      return lines.join('\n');
+    },
+  },
+
+  card: {
+    component: CardPreview,
+    tokenMap: CARD_TOKEN_MAP,
+    jsxSource: cardJsxRaw,
+    configHiddenEnums: ['type', 'infoIconTone', 'infoMetaBadgeVariant', 'dataIconTone'],
+    enumTitles: {
+      color: '颜色',
+      infoIconStyle: '图标样式',
+      infoLayout: '图标位置',
+      productInfoLayout: '图标位置',
+      dataIconVisible: '是否显示图标',
+      dataIconStyle: '图标样式',
+    },
+
+    controls: [
+      {
+        id: 'category',
+        label: '分类',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '数据卡片' },
+          { id: 'product', label: '商品卡片' },
+          { id: 'info', label: '信息卡片' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const type = cv.category === 'product' || cv.category === 'info' ? cv.category : 'data';
+      return {
+        type,
+        color: enums.color || 'white',
+        infoIconTone: enums.infoIconTone || 'pink',
+        infoIconStyle: enums.infoIconStyle || 'inverse',
+        infoLayout: type === 'info'
+          ? (enums.infoLayout || 'icon-right')
+          : (enums.productInfoLayout || 'default'),
+        infoMetaBadgeVariant: undefined,
+        dataIconVisible: enums.dataIconVisible || 'hidden',
+        dataIconStyle: enums.dataIconStyle || 'inverse',
+      };
+    },
+
+    getVisibleEnumProps: ({ enumProps, controlValues = {} }) => {
+      const category = controlValues.category || 'default';
+      const props = enumProps || [];
+      if (category === 'info') {
+        return props.filter((prop) => ['color', 'infoIconStyle', 'infoLayout'].includes(prop.name));
+      }
+      if (category === 'product') {
+        const colorProp = props.find((prop) => prop.name === 'color');
+        const layoutProp = props.find((prop) => prop.name === 'infoLayout');
+        return [
+          colorProp,
+          layoutProp ? { ...layoutProp, name: 'productInfoLayout', default: 'default' } : null,
+        ].filter(Boolean);
+      }
+      return props.filter((prop) => ['color', 'dataIconVisible', 'dataIconStyle'].includes(prop.name));
+    },
+
+    generateUsage: (enums, cv = {}) => {
+      const lines = [`import Card from './components/Card';`];
+      const color = enums.color || 'white';
+      const type = cv.category === 'product' || cv.category === 'info' ? cv.category : 'data';
+      lines.push('');
+
+      if (type === 'data') {
+        lines.push('const stats = [');
+        lines.push("  { iconName: 'users-01-stroked', value: '1,289' },");
+        lines.push("  { iconName: 'message-chat-square-stroked', value: '1,289' },");
+        lines.push("  { iconName: 'hearts-stroked', value: '276' },");
+        lines.push('];');
+        lines.push('');
+      }
+
+      if (color === 'grey') {
+        lines.push('/* 白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
+        lines.push('<div className="bg-white p-6">');
+      } else {
+        lines.push('/* 灰色背景容器里，推荐使用白底 Card 做内容承载 */');
+        lines.push('<div className="bg-blueGrey-200 p-6">');
+      }
+      lines.push('  <Card');
+      if (type === 'product') lines.push('    type="product"');
+      if (type === 'info') lines.push('    type="info"');
+      if (color !== 'white') lines.push(`    color="${color}"`);
+      if (type === 'product') {
+        lines.push('    title="海底捞门店通用双人套餐"');
+        lines.push('    description="数量 1 · ¥128.00 · 月售 2,361"');
+        lines.push(`    infoLayout="${enums.productInfoLayout || 'default'}"`);
+        lines.push('    productStatus="已使用"');
+      } else if (type === 'info') {
+        lines.push('    title="抖音 AI 创作助手"');
+        lines.push('    description="抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。"');
+        lines.push('    infoIconName="magic-wand-01-stroked"');
+        lines.push(`    infoIconStyle="${enums.infoIconStyle || 'inverse'}"`);
+        lines.push(`    infoLayout="${enums.infoLayout || 'icon-right'}"`);
+        lines.push('    infoMetaBadge="官方能力"');
+        lines.push('    infoMetaLabel="段然"');
+        lines.push('    infoStats={[');
+        lines.push('      { iconName: "users-01-stroked", value: "128.6K" },');
+        lines.push('      { iconName: "star-01-stroked", value: "4.9" },');
+        lines.push('      { iconName: "play-circle-stroked", value: "立即体验" },');
+        lines.push('    ]}');
+      } else {
+        lines.push('    title="更新用户资料"');
+        lines.push('    description="更新用户个人资料信息，支持修改昵称、头像、简介等。"');
+        lines.push('    stats={stats}');
+        lines.push('    tags={["社区", "收藏星标"]}');
+        if ((enums.dataIconVisible || 'hidden') === 'visible') {
+          lines.push('    dataIconVisible="visible"');
+          lines.push('    dataIconName="edit-04-stroked"');
+          lines.push(`    dataIconStyle="${enums.dataIconStyle || 'inverse'}"`);
+        }
+        lines.push('    actionAriaLabel="查看详情"');
+        lines.push('    onAction={() => {}}');
+      }
+      lines.push('  />');
+      lines.push('</div>');
+      return lines.join('\n');
+    },
+  },
+
+  'conversation-list': {
+    component: ConversationListPreview,
+    tokenMap: CONVERSATION_LIST_TOKEN_MAP,
+    jsxSource: conversationListJsxRaw,
+    hideBaseVariantControl: true,
+    controls: [
+      {
+        id: 'previewVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认列表' },
+          { id: 'card', label: '卡片列表' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'defaultPreviewMode',
+        label: '组件状态',
+        type: 'seg',
+        options: [
+          { id: 'expanded', label: '平铺' },
+          { id: 'collapsed', label: '收起' },
+        ],
+        default: 'expanded',
+        hidden: ({ controlValues }) => (controlValues.previewVariant || 'default') !== 'default',
+      },
+      {
+        id: 'cardPreviewMode',
+        label: '组件状态',
+        type: 'seg',
+        options: [
+          { id: 'card-all', label: '全部' },
+          { id: 'card-replied', label: '已回复' },
+          { id: 'card-generating', label: '生成中' },
+          { id: 'card-editable', label: '可发送' },
+        ],
+        default: 'card-all',
+        hidden: ({ controlValues }) => (controlValues.previewVariant || 'default') !== 'card',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const variant = cv.previewVariant || 'default';
+      const previewMode = variant === 'card'
+        ? (cv.cardPreviewMode || 'card-all')
+        : (cv.defaultPreviewMode || 'expanded');
+
+      return {
+        variant,
+        previewMode,
+      };
+    },
+
+    getVisibleEnumProps: ({ enumProps }) => enumProps.filter(
+      (prop) => prop.name !== 'variant' && prop.name !== 'defaultVariant'
+    ),
+
+    generateUsage: (_enums, cv = {}) => {
+      const variant = cv.previewVariant || 'default';
+      const previewMode = variant === 'card'
+        ? (cv.cardPreviewMode || 'card-all')
+        : (cv.defaultPreviewMode || 'expanded');
+
+      if (previewMode === 'card-replied') {
+        return [
+          `import ConversationList from './components/ConversationList';`,
+          '',
+          '<ConversationList',
+          '  variant="card"',
+          '  sections={[{',
+          '    id: "pending",',
+          '    title: "待干预",',
+          '    count: 1,',
+          '    items: [{',
+          '      id: "pending-1",',
+          '      title: "抖音账号解封",',
+          '      userName: "小兔叽掉毛毛🐰",',
+          '      orderId: "2918575148379876",',
+          '      time: "3分钟前",',
+          '      avatarSrc: avatarUrl,',
+          '      tags: [{ label: "待干预", variant: "grey", iconName: "alarm-clock-stroked" }],',
+          '      messages: [',
+          '        { id: "m1", role: "user", text: "但是我不知道问题出在哪里" },',
+          '        { id: "m2", role: "user", text: "你帮我看下这个有啥问题呢" },',
+          '        { id: "m3", role: "agent", text: "《抖音网络社区自律公约》：抖音app-我-右上角≡-设置-抖音规则中心，这是咱们抖音官方的一个规则呢" },',
+          '        { id: "m4", role: "user", text: "好的明白了，谢谢，没其他问题了" },',
+          '      ],',
+          '      status: "replied",',
+          '      draftText: "",',
+          '    }],',
+          '  }]}',
+          '/>',
+        ].join('\n');
+      }
+
+      if (previewMode === 'card-generating') {
+        return [
+          `import ConversationList from './components/ConversationList';`,
+          '',
+          '<ConversationList',
+          '  variant="card"',
+          '  sections={[{',
+          '    id: "pending",',
+          '    title: "待干预",',
+          '    count: 1,',
+          '    items: [{',
+          '      id: "pending-1",',
+          '      title: "酒旅·仲裁退款",',
+          '      userName: "小兔叽掉毛毛🐰",',
+          '      orderId: "2918575148379876",',
+          '      time: "13:32",',
+          '      avatarSrc: avatarUrl,',
+          '      tags: [{ label: "异常监控提醒", variant: "grey" }, { label: "待干预", variant: "red" }],',
+          '      messages: [',
+          '        { id: "m1", role: "user", text: "但是我不知道问题出在哪里" },',
+          '        { id: "m2", role: "user", text: "你帮我看下这个有啥问题呢" },',
+          '        { id: "m3", role: "agent", text: "《抖音网络社区自律公约》：抖音app-我-右上角≡-设置-抖音规则中心，这是咱们抖音官方的一个规则呢" },',
+          '        { id: "m4", role: "user", text: "好的明白了，谢谢，没其他问题了" },',
+          '      ],',
+          '      status: "generating",',
+          '      draftText: "",',
+          '    }],',
+          '  }]}',
+          '/>',
+        ].join('\n');
+      }
+
+      if (previewMode === 'card-editable') {
+        return [
+          `import ConversationList from './components/ConversationList';`,
+          '',
+          '<ConversationList',
+          '  variant="card"',
+          '  sections={[{',
+          '    id: "managed",',
+          '    title: "托管中",',
+          '    count: 1,',
+          '    items: [{',
+          '      id: "managed-1",',
+          '      title: "物流状态异常跟进",',
+          '      userName: "软软想吃糖葫芦",',
+          '      orderId: "2918575148472390",',
+          '      time: "11:22",',
+          '      avatarSrc: avatarUrl,',
+          '      tags: [{ label: "24时30分", variant: "grey", iconName: "alarm-clock-stroked" }, { label: "托管中", variant: "green" }],',
+          '      messages: [',
+          '        { id: "m1", role: "user", text: "你帮我看下这个有啥问题呢" },',
+          '        { id: "m2", role: "agent", text: "《抖音网络社区自律公约》：抖音app-我-右上角≡-设置-抖音规则中心，这是咱们抖音官方的一个规则呢" },',
+          '        { id: "m3", role: "user", text: "好的明白了，谢谢，没其他问题了" },',
+          '      ],',
+          '      status: "editable",',
+          '      draftText: "祝您生活愉快~如果您觉得我的服务态度还可以的话，辛苦您点击左下角结束服务为本次服务点亮小星星哦~",',
+          '    }],',
+          '  }]}',
+          '/>',
+        ].join('\n');
+      }
+
+      return [
+        `import ConversationList from './components/ConversationList';`,
+        '',
+        '<ConversationList',
+        '  activeTab="all"',
+        '  activeItemId="managed-1"',
+        '  onTabChange={(tabId) => setCurrentTab(tabId)}',
+        '  onItemClick={(item) => openConversation(item.id)}',
+        '/>',
+      ].join('\n');
+    },
+  },
+
+  'info-display-panel': {
+    component: InfoDisplayPanelPreview,
+    tokenMap: INFO_DISPLAY_PANEL_TOKEN_MAP,
+    jsxSource: infoDisplayPanelJsxRaw,
+    hideBaseVariantControl: true,
+
+    getPreviewAreaStyle: () => ({
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      overflow: 'auto',
+      padding: 24,
+    }),
+
+    getPreviewScalerStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      boxSizing: 'border-box',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      height: 520,
+      display: 'flex',
+      alignSelf: 'stretch',
+    }),
+
+    controls: [
+      {
+        id: 'contentCount',
+        label: '内容数量',
+        type: 'seg',
+        options: [
+          { id: 'single', label: '单Tab' },
+          { id: 'multi', label: '多Tab' },
+        ],
+        default: 'multi',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      __previewKey: 'info-display-panel',
+      contentCount: cv.contentCount || 'multi',
+    }),
+
+    generateUsage: (_enums, cv) => {
+      const isSingleTab = (cv.contentCount || 'multi') === 'single';
+      const lines = [`import InfoDisplayPanel from './components/InfoDisplayPanel';`, ''];
+      lines.push('<InfoDisplayPanel');
+      if (isSingleTab) {
+        lines.push('  panels={[');
+        lines.push('    { id: "profile", tabs: [{ id: "profile", label: "用户信息" }] },');
+        lines.push('  ]}');
+      } else {
+        lines.push('  panels={[');
+        lines.push('    { id: "assistant", tabs: [{ id: "assistant", label: "托管助手" }] },');
+        lines.push('    { id: "tickets", tabs: [{ id: "history", label: "历史工单" }, { id: "logs", label: "工单日志" }, { id: "tools", label: "信息工具" }] },');
+        lines.push('    { id: "info", tabs: [{ id: "video", label: "视频信息" }, { id: "user", label: "用户命中实验" }, { id: "records", label: "沟通记录" }] },');
+        lines.push('  ]}');
+      }
+      lines.push('  renderPanelContent={({ panel }) => (');
+      lines.push('    <div className="rounded-md border border-border-default bg-blueGrey-50 p-3">');
+      lines.push('      {/* 每栏内容区固定 p-4 + gap-4；这里放具体业务详情、工单卡片或表单块 */}');
+      lines.push('      {panel.id}');
+      lines.push('    </div>');
+      lines.push('  )}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'nav-bar': {
+    component: NavBarPreview,
+    tokenMap: NAVBAR_TOKEN_MAP,
+    jsxSource: navBarJsxRaw,
+    controls: [
+      {
+        id: 'platform',
+        label: '平台',
+        type: 'seg',
+        options: [
+          { id: 'ola', label: 'OLA' },
+          { id: 'bytehi', label: 'ByteHi' },
+        ],
+        default: 'ola',
+      },
+      {
+        id: 'utilityActions',
+        label: '底部操作',
+        type: 'seg',
+        options: [
+          { id: 'hidden', label: '隐藏' },
+          { id: 'visible', label: '显示' },
+        ],
+        default: 'hidden',
+      },
+    ],
+
+    getVisibleEnumProps: ({ enumProps }) => enumProps.filter((prop) => prop.name !== 'avatarType' && prop.name !== 'platform' && prop.name !== 'promptText'),
+
+    mapProps: (cv, enums) => ({
+      platform: cv.platform || 'ola',
+      brandName: cv.platform === 'bytehi' ? 'ByteHi' : 'OLA',
+      showUtilityActions: cv.utilityActions === 'visible',
+      utilityItems: cv.utilityActions === 'visible'
+        ? (cv.platform === 'bytehi'
+            ? [
+                { id: 'guide', label: '操作指南', iconName: 'help-circle-stroked' },
+                { id: 'message', label: '消息', iconName: 'bell-03-stroked' },
+              ]
+            : [
+                { id: 'notice', label: '通知消息', iconName: 'bell-03-stroked' },
+                { id: 'settings', label: '系统设置', iconName: 'settings-02-stroked' },
+              ])
+        : [],
+      avatarType: enums.avatarType || 'image',
+    }),
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      padding: '0 24px 0 0',
+    }),
+
+    getPreviewItemStyle: () => ({
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      height: '100%',
+      minHeight: '100%',
+      alignSelf: 'stretch',
+    }),
+
+    generateUsage: (enums, cv = {}) => {
+      const avatarType = enums.avatarType || 'image';
+      const platform = cv.platform || 'ola';
+      const utilityActions = cv.utilityActions || 'hidden';
+      const lines = [`import NavBar from './components/NavBar';`];
+
+      if (platform === 'ola') {
+        lines.push('');
+        lines.push('const appBusinesses = [');
+        lines.push("  { id: 'douyin-community', label: '抖音社区', iconSrc: 'icon-logo-douyin' },");
+        lines.push("  { id: 'douyin-local-services', label: '抖音生活服务', iconSrc: 'icon-logo-douyin' },");
+        lines.push("  { id: 'douyin-ecommerce', label: '抖音电商', iconSrc: 'icon-logo-douyin' },");
+        lines.push('];');
+        lines.push('');
+        lines.push('const navItems = [');
+        lines.push("  { id: 'strategy', label: '策略管理', iconName: 'if-stroked' },");
+        lines.push("  { id: 'knowledge', label: '知识与案例', iconName: 'book-open-01-stroked' },");
+        lines.push("  { id: 'tools', label: '工具管理', iconName: 'tool-01-stroked' },");
+        lines.push("  { id: 'insight', label: '对话洞察', iconName: 'message-chat-circle-stroked' },");
+        lines.push("  { id: 'monitor', label: '智能盯盘', iconName: 'grid-03-stroked' },");
+        lines.push('];');
+      }
+      if (platform === 'ola' && utilityActions === 'visible') {
+        lines.push('');
+        lines.push('const utilityItems = [');
+        lines.push("  { id: 'notice', label: '通知消息', iconName: 'bell-03-stroked' },");
+        lines.push("  { id: 'settings', label: '系统设置', iconName: 'settings-02-stroked' },");
+        lines.push('];');
+      }
+      if (platform === 'bytehi' && utilityActions === 'visible') {
+        lines.push('');
+        lines.push('const utilityItems = [');
+        lines.push("  { id: 'guide', label: '操作指南', iconName: 'help-circle-stroked' },");
+        lines.push("  { id: 'message', label: '消息', iconName: 'bell-03-stroked' },");
+        lines.push('];');
+      }
+      lines.push('');
+      lines.push('<NavBar');
+      if (platform !== 'ola') lines.push(`  platform="${platform}"`);
+      if (platform === 'bytehi') lines.push('  brandName="ByteHi"');
+      if (avatarType !== 'image') lines.push(`  avatarType="${avatarType}"`);
+      if (utilityActions === 'visible') lines.push('  showUtilityActions');
+      if (platform === 'ola') lines.push('  appBusinesses={appBusinesses}');
+      if (platform === 'ola') lines.push('  navItems={navItems}');
+      if (utilityActions === 'visible') lines.push('  utilityItems={utilityItems}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'tag-bar': {
+    component: TagBar,
+    tokenMap: TAGBAR_TOKEN_MAP,
+    jsxSource: tagBarJsxRaw,
+    controls: [
+      {
+        id: 'layout',
+        label: '布局',
+        type: 'seg',
+        options: [
+          { id: 'expanded', label: '展开' },
+          { id: 'collapsed', label: '收起' },
+        ],
+        default: 'expanded',
+      },
+      {
+        id: 'searchable',
+        label: '搜索',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '开启' },
+          { id: 'off', label: '关闭' },
+        ],
+        default: 'on',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const layout = cv.layout || 'expanded';
+      const searchable = (cv.searchable || 'on') === 'on';
+      const businesses = TAGBAR_SAMPLE_BUSINESSES;
+      const expandedIds = ['account', 'account-registration-login'];
+
+      return {
+        key: `tagbar-preview-${layout}-${searchable ? 'search' : 'nosearch'}`,
+        businesses,
+        defaultBusinessId: businesses[0]?.id || 'douyin-community',
+        items: TAGBAR_SAMPLE_ITEMS,
+        defaultSelectedItemId: 'account-registration-login-field-1',
+        defaultExpandedIds: expandedIds,
+        searchable,
+        collapsible: true,
+        defaultCollapsed: layout === 'collapsed',
+        defaultSearchValue: '',
+      };
+    },
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      padding: '0 24px 0 0',
+    }),
+
+    getPreviewItemStyle: () => ({
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      height: '100%',
+      minHeight: '100%',
+      alignSelf: 'stretch',
+    }),
+
+    generateUsage: (_, cv = {}) => {
+      const layout = cv.layout || 'expanded';
+      const searchable = (cv.searchable || 'on') === 'on';
+      const lines = [`import TagBar from './components/TagBar';`];
+
+      lines.push('');
+      lines.push('const businesses = [');
+      lines.push("  { id: 'douyin-community', label: '抖音社区' },");
+      lines.push("  { id: 'douyin-ecommerce', label: '抖音电商' },");
+      lines.push("  { id: 'douyin-local-services', label: '抖音生活服务' },");
+      lines.push('];');
+      lines.push('');
+      lines.push('const items = [');
+      lines.push("  { id: 'account', label: '账号', iconName: 'user-01-stroked', iconBgToken: 'brand-50', children: [{ id: 'account-registration', label: '账号注册/登录', children: [{ id: 'account-register-too-many', label: '注册时提示「注册账号过多」' }, { id: 'account-face-fail', label: '注册/登录时用户刷脸/实名认证失败' }] }, { id: 'account-punishment', label: '账号处罚' }, { id: 'account-auth', label: '实名认证' }] },");
+      lines.push("  { id: 'base-product', label: '基础产品', iconName: 'layers-two-01-stroked', iconBgToken: 'blue-50' },");
+      lines.push("  { id: 'social', label: '社交', iconName: 'heart-circle-stroked', iconBgToken: 'pink-50' },");
+      lines.push('];');
+      lines.push('');
+      lines.push('{/* 双白卡场景：外层白圆角 + overflow-visible；勿用 tone="panel" 冒充白卡 */}');
+      lines.push('<div style={{ background: "var(--color-white)", borderRadius: 12, overflow: "visible", width: 240 }}>');
+      lines.push('  <TagBar');
+      lines.push('    businesses={businesses}');
+      lines.push('    items={items}');
+      lines.push('    defaultBusinessId="douyin-community"');
+      lines.push('    defaultSelectedItemId="account-registration-login-field-1"');
+      lines.push("    defaultExpandedIds={['account', 'account-registration-login']}");
+      if (layout === 'collapsed') lines.push('    defaultCollapsed');
+      if (searchable) lines.push('    searchable');
+      lines.push('    collapsible');
+      lines.push('    tone="transparent"');
+      lines.push('    className="!border-r-0"');
+      lines.push('    style={{ background: "transparent" }}');
+      lines.push('  />');
+      lines.push('</div>');
+      return lines.join('\n');
+    },
+  },
+
+  'chat-bubble': {
+    component: ChatBubblePreview,
+    tokenMap: CHATBUBBLE_TOKEN_MAP,
+    jsxSource: chatBubbleJsxRaw,
+    hideBaseVariantControl: true,
+    enumTitles: {
+      incomingTone: '左侧气泡色',
+      outgoingTone: '右侧气泡色',
+    },
+
+    controls: [
+      {
+        id: 'previewVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'incoming', label: '左侧' },
+          { id: 'outgoing', label: '右侧' },
+          { id: 'both', label: '左+右' },
+        ],
+        default: 'outgoing',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const previewVariant = cv.previewVariant || 'outgoing';
+      const variant = previewVariant === 'both' ? 'incoming' : previewVariant;
+      const layout = enums.layout || 'single';
+      const supportsOutgoingControls = previewVariant === 'outgoing' || previewVariant === 'both';
+      const resolvedReceipt = supportsOutgoingControls ? (enums.receipt || 'hidden') : 'hidden';
+      return {
+        previewVariant,
+        variant,
+        layout,
+        avatarType: enums.avatarType || 'image',
+        size: enums.size || 'default',
+        incomingTone: enums.incomingTone || 'default',
+        outgoingTone: enums.outgoingTone || 'white',
+        receipt: resolvedReceipt,
+        messages: CHATBUBBLE_PRESET_MESSAGES[variant]?.[layout] || CHATBUBBLE_PRESET_MESSAGES.incoming.single,
+        timestamps: CHATBUBBLE_PRESET_TIMESTAMPS[variant]?.[layout] || CHATBUBBLE_PRESET_TIMESTAMPS.incoming.single,
+        avatarAlt: variant === 'incoming' ? '用户头像' : '客服头像',
+      };
+    },
+
+    getVisibleEnumProps: ({ controlValues, enumProps }) => {
+      const previewVariant = controlValues.previewVariant || 'outgoing';
+      return enumProps.filter((prop) => {
+        if (prop.name === 'variant') return false;
+        if (prop.name === 'receipt' && previewVariant === 'incoming') return false;
+        /* 变体与气泡色联动：仅左侧预览只配左侧色；仅右侧只配右侧色；左+右同时展示两侧 */
+        if (prop.name === 'incomingTone' && previewVariant === 'outgoing') return false;
+        if (prop.name === 'outgoingTone' && previewVariant === 'incoming') return false;
+        return true;
+      });
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import ChatBubble from './components/ChatBubble';`];
+      const previewVariant = cv.previewVariant || 'outgoing';
+      const variant = previewVariant === 'both' ? 'incoming' : previewVariant;
+      const layout = enums.layout || 'single';
+      const avatarType = enums.avatarType || 'image';
+      const size = enums.size || 'default';
+      const incomingTone = enums.incomingTone || 'default';
+      const outgoingTone = enums.outgoingTone || 'white';
+      const receipt = variant === 'outgoing' || previewVariant === 'both' ? (enums.receipt || 'hidden') : 'hidden';
+      const messages = CHATBUBBLE_PRESET_MESSAGES[variant]?.[layout] || CHATBUBBLE_PRESET_MESSAGES.incoming.single;
+      const timestamps = CHATBUBBLE_PRESET_TIMESTAMPS[variant]?.[layout] || CHATBUBBLE_PRESET_TIMESTAMPS.incoming.single;
+
+      if (previewVariant === 'both') {
+        lines.push('');
+        lines.push('const incomingMessages = [');
+        lines.push('  "为什么我无法设置点赞列表查看权限",');
+        lines.push('];');
+        lines.push('const incomingTimestamps = ["2026-02-26 10:24:14"];');
+        lines.push('');
+        lines.push(`const outgoingMessages = [`);
+        (layout === 'multiple' ? CHATBUBBLE_PRESET_MESSAGES.outgoing.multiple : CHATBUBBLE_PRESET_MESSAGES.outgoing.single).forEach((message) => {
+          lines.push(`  "${message}",`);
+        });
+        lines.push('];');
+        lines.push(`const outgoingTimestamps = [`);
+        (layout === 'multiple' ? CHATBUBBLE_PRESET_TIMESTAMPS.outgoing.multiple : CHATBUBBLE_PRESET_TIMESTAMPS.outgoing.single).forEach((time) => {
+          lines.push(`  "${time}",`);
+        });
+        lines.push('];');
+        if (layout === 'multiple') {
+          lines.push('');
+          lines.push('const trailingIncomingMessages = [');
+          lines.push('  "那怎么看自己的直播回放？",');
+          lines.push('];');
+          lines.push('const trailingIncomingTimestamps = ["2026-02-26 10:26:08"];');
+        }
+        lines.push('');
+        lines.push('<>');
+        lines.push('  <ChatBubble');
+        if (incomingTone !== 'default') lines.push(`    incomingTone="${incomingTone}"`);
+        lines.push('    messages={incomingMessages}');
+        lines.push('    timestamps={incomingTimestamps}');
+        lines.push('  />');
+        lines.push('  <div className="h-4" />');
+        lines.push('  <ChatBubble');
+        lines.push('    variant="outgoing"');
+        if (layout !== 'single') lines.push(`    layout="${layout}"`);
+        if (avatarType !== 'image') lines.push(`    avatarType="${avatarType}"`);
+        if (size !== 'default') lines.push(`    size="${size}"`);
+        if (outgoingTone !== 'white') lines.push(`    outgoingTone="${outgoingTone}"`);
+        if (receipt !== 'hidden') lines.push(`    receipt="${receipt}"`);
+        lines.push('    messages={outgoingMessages}');
+        lines.push('    timestamps={outgoingTimestamps}');
+        lines.push('  />');
+        if (layout === 'multiple') {
+          lines.push('  <div className="h-4" />');
+          lines.push('  <ChatBubble');
+          if (incomingTone !== 'default') lines.push(`    incomingTone="${incomingTone}"`);
+          lines.push('    messages={trailingIncomingMessages}');
+          lines.push('    timestamps={trailingIncomingTimestamps}');
+          lines.push('  />');
+        }
+        lines.push('</>');
+        return lines.join('\n');
+      }
+
+      lines.push('');
+      lines.push('const messages = [');
+      messages.forEach((message) => {
+        lines.push(`  "${message}",`);
+      });
+      lines.push('];');
+      lines.push('const timestamps = [');
+      timestamps.forEach((time) => {
+        lines.push(`  "${time}",`);
+      });
+      lines.push('];');
+      lines.push('');
+      lines.push('<ChatBubble');
+      if (variant !== 'incoming') lines.push(`  variant="${variant}"`);
+      if (layout !== 'single') lines.push(`  layout="${layout}"`);
+      if (avatarType !== 'image') lines.push(`  avatarType="${avatarType}"`);
+      if (size !== 'default') lines.push(`  size="${size}"`);
+      if (previewVariant === 'incoming' && incomingTone !== 'default') {
+        lines.push(`  incomingTone="${incomingTone}"`);
+      }
+      if (previewVariant === 'outgoing' && outgoingTone !== 'white') {
+        lines.push(`  outgoingTone="${outgoingTone}"`);
+      }
+      if (receipt !== 'hidden') lines.push(`  receipt="${receipt}"`);
+      lines.push('  messages={messages}');
+      lines.push('  timestamps={timestamps}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'chat-input': {
+    component: ChatInput,
+    tokenMap: CHATINPUT_TOKEN_MAP,
+    jsxSource: chatInputJsxRaw,
+
+    controls: [
+      {
+        id: 'seedContent', label: '示例内容', type: 'switch',
+        default: false,
+      },
+    ],
+
+    /* 容器宽度走 TOKEN_MAP「容器 → 宽度」配置（T2 非 token 固定值），默认 500px；
+     * 用户在属性面板改 width 后，directStyleOverrides.width 会同步到 wrapper */
+    getPreviewItemStyle: ({ directStyleOverrides } = {}) => ({
+      width: directStyleOverrides?.width || '500px',
+      maxWidth: '100%',
+    }),
+
+    /* ── 按 variant 自动套合理默认文案；seedContent=filled 时给 ChatInput 注入示例填充态 ── */
+    mapProps: (controls, enums) => {
+      const v = enums.variant || 'default';
+      const seed = controls.seedContent === true;
+
+      if (v === 'busy') {
+        return {
+          catBarText: '正在查询数据接口「execute_agent/API/interface/Function call Name」',
+          statusText: '已耗时 3 min，运行结束后会通过飞书消息告知',
+        };
+      }
+      if (v === 'readonly') {
+        return {
+          statusText: '来自其他成员的任务分享，当前页面仅支持预览',
+          actionText: '继续对话',
+        };
+      }
+      /* default / default-sm / im-basic / replying：仅在 seed 开启时注入预览数据 */
+      return seed ? { _seedContent: true } : {};
+    },
+
+    generateUsage: (enums) => {
+      const lines = [`import ChatInput from './components/ChatInput';`];
+      const v = enums.variant || 'default';
+      lines.push('');
+      lines.push('<ChatInput');
+      if (v !== 'default') lines.push(`  variant="${v}"`);
+      if (v === 'busy') {
+        lines.push('  catBarText="正在查询数据接口"');
+        lines.push('  statusText="已耗时 3 min，运行结束后会通过飞书消息告知"');
+        lines.push('  onStop={() => {}}');
+      } else if (v === 'readonly') {
+        lines.push('  statusText="来自其他成员的任务分享，当前页面仅支持预览"');
+        lines.push('  actionText="继续对话"');
+        lines.push('  onAction={() => {}}');
+      } else if (v === 'im-basic') {
+        lines.push('  placeholder="说点什么…"');
+        lines.push('  acceptFiles="image/*"');
+        lines.push('  onImEmojiClick={() => {}}');
+      }
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'chat-message': {
+    component: ChatMessagePreview,
+    tokenMap: CHAT_MESSAGE_TOKEN_MAP,
+    jsxSource: chatMessageJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      overflow: 'auto',
+      padding: '12px',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      alignSelf: 'stretch',
+    }),
+
+    getPreviewScalerStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      transformOrigin: 'left top',
+    }),
+
+    /* 每个子组件的"变体"使用独立 control id，避免共用 'variant' key 互相覆盖
+     * subComponent → variant control id 映射 */
+    controls: [
+      {
+        id: 'subComponent',
+        label: '子组件',
+        type: 'seg',
+        options: [
+          { id: 'execution-flow', label: '执行流' },
+          { id: 'text-reply', label: '文本回复' },
+          { id: 'deep-thinking', label: '深度思考' },
+          { id: 'card', label: '卡片' },
+          { id: 'user-message', label: '用户消息' },
+          { id: 'ai-avatar', label: 'AI头像+名称' },
+          { id: 'conversation', label: '对话流' },
+          { id: 'artifact', label: '产物' },
+          { id: 'action-bar', label: '操作栏' },
+          { id: 'follow-up', label: '追问' },
+        ],
+        default: 'execution-flow',
+      },
+      {
+        id: 'executionFlowVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'completed', label: '已完成' },
+          { id: 'running', label: '执行中' },
+        ],
+        default: 'completed',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'execution-flow',
+      },
+      {
+        id: 'deepThinkingVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'thinking', label: '思考中' },
+          { id: 'expanded', label: '展开' },
+          { id: 'collapsed', label: '折叠' },
+        ],
+        default: 'expanded',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'deep-thinking',
+      },
+      {
+        id: 'userMessageVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'text', label: '纯文本' },
+          { id: 'mixed-tag', label: '文本+@TAG' },
+          { id: 'with-attachment', label: '带附件' },
+          { id: 'with-quote', label: '带划词引用' },
+        ],
+        default: 'text',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'user-message',
+      },
+      {
+        id: 'aiAvatarVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'loading', label: '加载中' },
+        ],
+        default: 'default',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'ai-avatar',
+      },
+      {
+        id: 'cardVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'task-plan', label: '任务规划' },
+          { id: 'config-form', label: '配置表单' },
+        ],
+        default: 'task-plan',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'card',
+      },
+      {
+        id: 'artifactVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'icon', label: '产物图标' },
+          { id: 'card', label: '产物卡片' },
+          { id: 'group', label: '产物组' },
+        ],
+        default: 'group',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'artifact',
+      },
+      {
+        id: 'conversationVariant',
+        label: '变体',
+        type: 'seg',
+        options: [
+          { id: 'ai-rich', label: 'AI完整回复' },
+          { id: 'multi-turn', label: '多轮对话' },
+          { id: 'ai-task-plan', label: 'AI任务规划' },
+        ],
+        default: 'ai-rich',
+        hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'conversation',
+      },
+    ],
+
+    /* 子组件 → 该子组件的 variant control id（mapProps & generateUsage 共用查表） */
+    _variantKey: (sub) => ({
+      'execution-flow': 'executionFlowVariant',
+      'text-reply': null,
+      'deep-thinking': 'deepThinkingVariant',
+      'card': 'cardVariant',
+      'user-message': 'userMessageVariant',
+      'ai-avatar': 'aiAvatarVariant',
+      'conversation': 'conversationVariant',
+      'artifact': 'artifactVariant',
+      'action-bar': null,
+      'follow-up': null,
+    })[sub],
+
+    mapProps: (cv) => {
+      const sub = cv.subComponent || 'execution-flow';
+      const variantKey = ({
+        'execution-flow': 'executionFlowVariant',
+        'deep-thinking': 'deepThinkingVariant',
+        'card': 'cardVariant',
+        'user-message': 'userMessageVariant',
+        'ai-avatar': 'aiAvatarVariant',
+        'conversation': 'conversationVariant',
+        'artifact': 'artifactVariant',
+      })[sub];
+      const variant = variantKey ? cv[variantKey] : 'default';
+      return {
+        subComponent: sub,
+        variant: variant || 'default',
+      };
+    },
+
+    enumTitles: {
+      userBubbleTone: '消息气泡背景色',
+    },
+
+    getVisibleEnumProps: ({ enumProps, controlValues }) => {
+      const sub = controlValues.subComponent || 'execution-flow';
+      return enumProps.filter((prop) => {
+        if (prop.name !== 'userBubbleTone') return false;
+        return sub === 'user-message' || sub === 'conversation';
+      });
+    },
+
+    generateUsage: (enums, cv) => {
+      const sub = cv.subComponent || 'execution-flow';
+      const variantKey = ({
+        'execution-flow': 'executionFlowVariant',
+        'deep-thinking': 'deepThinkingVariant',
+        'card': 'cardVariant',
+        'user-message': 'userMessageVariant',
+        'ai-avatar': 'aiAvatarVariant',
+        'conversation': 'conversationVariant',
+        'artifact': 'artifactVariant',
+      })[sub];
+      const variant = (variantKey ? cv[variantKey] : 'default') || 'default';
+      const userBubbleTone = enums.userBubbleTone || 'auto';
+      const userBubbleToneLine = userBubbleTone === 'auto' ? null : `  userBubbleTone="${userBubbleTone}"`;
+
+      const usageMap = {
+        'execution-flow': {
+          completed: [
+            '<ChatMessage',
+            '  title={DEFAULT_CHAT_TITLE}',
+            '  steps={DEFAULT_CHAT_STEPS}',
+            '/>',
+          ],
+          running: [
+            '<ChatMessage',
+            '  status="processing"',
+            '  title={DEFAULT_CHAT_TITLE}',
+            '  steps={DEFAULT_CHAT_STEPS.slice(0, 2)}',
+            '/>',
+          ],
+        },
+        'text-reply': {
+          default: [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  resultText="收到，我先去拉平台规则和商家补充条款，分析完会给你一份统一答复口径。"',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+        'deep-thinking': {
+          thinking: [
+            '<ChatMessage',
+            '  header',
+            '  status="thinking"',
+            '  steps={null}',
+            '  thinking={{ state: "thinking", inProgressLabel: "深度思考中 ..." }}',
+            '/>',
+          ],
+          expanded: [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  thinking={{ ...DEFAULT_CHAT_THINKING, state: "completed", defaultExpanded: true }}',
+            '  resultText="好的，我将开始为您分析。"',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          collapsed: [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  thinking={{ ...DEFAULT_CHAT_THINKING, state: "completed", defaultExpanded: false }}',
+            '  resultText="好的，我将开始为您分析。"',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+        'card': {
+          'task-plan': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  plan={DEFAULT_CHAT_PLAN}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          'config-form': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  confirms={DEFAULT_CHAT_CONFIRMS}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+        'user-message': {
+          text: [
+            '<ChatMessage',
+            '  role="user"',
+            userBubbleToneLine,
+            '  timestamp="14:02"',
+            '  userContent={[{ type: "text", value: "帮我整理一下抖音电商的售后政策" }]}',
+            '  actions',
+            '/>',
+          ],
+          'mixed-tag': [
+            '<ChatMessage',
+            '  role="user"',
+            userBubbleToneLine,
+            '  timestamp="14:05"',
+            '  userContent={[',
+            '    { type: "text", value: "分析一批" },',
+            '    { type: "entity", icon: "message-chat-square-stroked", label: "智能会话:社交私信", tone: "teal", showChevron: true },',
+            '    { type: "text", value: "的问题与机会点" },',
+            '  ]}',
+            '  actions',
+            '/>',
+          ],
+          'with-attachment': [
+            '<ChatMessage',
+            '  role="user"',
+            userBubbleToneLine,
+            '  timestamp="14:08"',
+            '  userContent={[{ type: "text", value: "附件里是售后规则汇编，请基于这两份文件输出统一答复口径" }]}',
+            '  userAttachments={[',
+            '    { name: "抖音电商售后政策汇编.pdf", size: 327680 },',
+            '    { name: "商家补充协议-生鲜定制.pdf", size: 184320 },',
+            '  ]}',
+            '  actions',
+            '/>',
+          ],
+          'with-quote': [
+            '<ChatMessage',
+            '  role="user"',
+            userBubbleToneLine,
+            '  timestamp="14:10"',
+            '  userContent={[{ type: "text", value: "请帮我复盘这次服务的完整链路，并着重分析[用户评价未解决]的原因。生成飞书文档和一份完整的前端页面" }]}',
+            '  userQuote={{',
+            '    iconName: "type-01-stroked",',
+            '    cornerIconName: "corner-up-right-stroked",',
+            '    title: "接口出参",',
+            '    description: "具体内容具体内容具体内容具体内容具体内容具体内",',
+            '  }}',
+            '  actions',
+            '/>',
+          ],
+        },
+        'ai-avatar': {
+          default: [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          loading: [
+            '<ChatMessage',
+            '  header',
+            '  status="requesting"',
+            '  steps={null}',
+            '/>',
+          ],
+        },
+        'conversation': {
+          'ai-rich': [
+            '/* 单条 AI 完整回复：头像 + 文本 + 产物 + 控制条 + 追问 */',
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  resultText={DEFAULT_CHAT_RESULT}',
+            '  resultArtifacts={DEFAULT_CHAT_RESULT_ARTIFACTS}',
+            '  actions',
+            '  followUps={DEFAULT_CHAT_FOLLOW_UPS}',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          'multi-turn': [
+            '/* 多轮对话流：每条 ChatMessage 独立 hover 隔离',
+            '   仅最新一条 actions={{ historyMode: false }} 常显操作栏',
+            '   其余消息 historyMode=true → 默认隐藏，hover 当条才显示 */',
+            '<>',
+            '  <ChatMessage role="user" timestamp="14:02"',
+            userBubbleTone === 'auto' ? null : `    userBubbleTone="${userBubbleTone}"`,
+            '    userContent={[{ type: "text", value: "帮我整理一下抖音电商的售后政策" }]}',
+            '    actions={{ historyMode: true }} />',
+            '  <ChatMessage header title="" steps={null} timestamp="14:02"',
+            '    resultText="收到，我整理完给你统一答复口径。"',
+            '    actions={{ historyMode: true }} />',
+            '  <ChatMessage role="user" timestamp="14:05"',
+            userBubbleTone === 'auto' ? null : `    userBubbleTone="${userBubbleTone}"`,
+            '    userContent={[{ type: "text", value: "拒收场景也要分商家原因和用户原因" }]}',
+            '    actions={{ historyMode: true }} />',
+            '  <ChatMessage header title="" steps={null} timestamp="14:05"',
+            '    resultText="好的，拒收的两类责任划分单独开一节。"',
+            '    actions />',
+            '</>',
+          ],
+          'ai-task-plan': [
+            '/* AI 任务规划：头像 + 引导文本(leadText) + 任务规划卡片',
+            '   leadText 展示在卡片上方；待用户点主按钮前操作栏自动隐藏，处理后才显示 */',
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  leadText="我开始规划啦，请稍后..."',
+            '  plan={DEFAULT_CHAT_PLAN}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+        'artifact': {
+          icon: [
+            'import { ArtifactIcon } from "./ChatMessage";',
+            '',
+            '/* 单个产物图标（atom）：type 取自 file-type-assets 共享 lookup',
+            '   支持类型：pdf | code | pe | xmind | image | document | table | webpage',
+            '             knowledge | strategy | conversation | batch-report',
+            '             feishu | feishu-card | feishu-sheet */',
+            '<ArtifactIcon type="pdf" size={32} />',
+          ],
+          card: [
+            'import { ResultArtifactCard } from "./ChatMessage";',
+            '',
+            '<ResultArtifactCard',
+            '  artifact={{',
+            '    type: "pdf",',
+            '    title: "AI 品牌提案.pdf",',
+            '    meta: "370.3 KB",',
+            '  }}',
+            '/>',
+          ],
+          group: [
+            'import { ResultArtifactGroup, ALL_ARTIFACT_TYPES } from "./ChatMessage";',
+            '',
+            '/* 直接传入完整 15 种产物类型，纵向排列 */',
+            '<ResultArtifactGroup artifacts={ALL_ARTIFACT_TYPES} />',
+          ],
+        },
+        'action-bar': {
+          default: [
+            '<ChatMessage',
+            '  title=""',
+            '  steps={null}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+        'follow-up': {
+          default: [
+            '<ChatMessage',
+            '  title=""',
+            '  steps={null}',
+            '  followUps={DEFAULT_CHAT_FOLLOW_UPS}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+        },
+      };
+
+      const bucket = usageMap[sub] || usageMap['text-reply'];
+      const lines = bucket[variant] || bucket.default || Object.values(bucket)[0];
+      return [
+        `import ChatMessage from './components/ChatMessage';`,
+        '',
+        ...lines.filter(Boolean),
+      ].join('\n');
+    },
+  },
+
+
+
+  button: {
+    component: Button,
+    tokenMap: BUTTON_TOKEN_MAP,
+    jsxSource: buttonJsxRaw,
+
+    controls: [
+      {
+        id: 'contentType', label: '类型', type: 'seg',
+        options: [
+          { id: 'text', label: '仅字' },
+          { id: 'icon', label: '仅icon' },
+          { id: 'both', label: 'icon+字' },
+        ],
+        default: 'text',
+      },
+      {
+        id: 'state', label: '状态', type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'loading', label: '加载' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const ct = cv.contentType;
+      const hasIcon = ct === 'icon' || ct === 'both';
+      return {
+        icon: hasIcon ? <Plus size={16} /> : undefined,
+        iconOnly: ct === 'icon',
+        tooltip: ct === 'icon' ? '添加' : undefined,
+        children: ct !== 'icon' ? '按钮文本' : undefined,
+        loading: cv.state === 'loading',
+        disabled: cv.state === 'disabled',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Button from './components/Button';`];
+      const ct = cv.contentType || 'text';
+      const st = cv.state || 'default';
+      const props = [];
+      props.push(`variant="${enums.variant || 'primary'}"`);
+      props.push(`size="${enums.size || 'md'}"`);
+      if (enums.radius && enums.radius !== 'rounded') props.push(`radius="${enums.radius}"`);
+      if (ct === 'icon') {
+        props.push('iconOnly');
+        props.push('tooltip="添加"');
+        props.push('icon={<Plus size={16} />}');
+      } else if (ct === 'both') {
+        props.push('icon={<Plus size={16} />}');
+      }
+      if (st === 'loading') props.push('loading');
+      if (st === 'disabled') props.push('disabled');
+
+      lines.push('');
+      if (ct === 'icon') {
+        lines.push(`<Button`);
+        props.forEach(p => lines.push(`  ${p}`));
+        lines.push('/>');
+      } else {
+        lines.push(`<Button`);
+        props.forEach(p => lines.push(`  ${p}`));
+        lines.push('>');
+        lines.push('  按钮文本');
+        lines.push('</Button>');
+      }
+      return lines.join('\n');
+    },
+  },
+
+  tabs: {
+    component: Tabs,
+    tokenMap: TABS_TOKEN_MAP,
+    jsxSource: tabsJsxRaw,
+
+    controls: [
+      {
+        id: 'iconMode', label: '图标', type: 'seg',
+        options: [
+          { id: 'none', label: '无图标' },
+          { id: 'withIcon', label: '带图标' },
+        ],
+        default: 'none',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const showIcon = cv.iconMode === 'withIcon';
+      const items = [
+        { label: '标签一', icon: showIcon ? <Heart size={16} /> : undefined },
+        { label: '标签二', icon: showIcon ? <Star size={16} /> : undefined },
+        { label: '标签三', icon: showIcon ? <Zap size={16} /> : undefined },
+      ];
+      return { items };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Tabs from './components/Tabs';`];
+      const showIcon = cv.iconMode === 'withIcon';
+      const variant = enums.variant || 'line';
+
+      lines.push('');
+      if (variant === 'segment') {
+        lines.push('{/* 卡片内小模块切换 / 主区顶部布局切换：默认优先 segment */}');
+      }
+      lines.push('<Tabs');
+      lines.push(`  variant="${variant}"`);
+      if (enums.size && enums.size !== 'sm') {
+        lines.push(`  size="${enums.size}"`);
+      }
+      if (showIcon) {
+        lines.push('  items={[');
+        lines.push("    { label: '标签一', icon: <Heart size={16} /> },");
+        lines.push("    { label: '标签二', icon: <Star size={16} /> },");
+        lines.push("    { label: '标签三', icon: <Zap size={16} /> },");
+        lines.push('  ]}');
+      } else {
+        lines.push('  items={[');
+        lines.push("    { label: '标签一' },");
+        lines.push("    { label: '标签二' },");
+        lines.push("    { label: '标签三' },");
+        lines.push('  ]}');
+      }
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+  'form-title': {
+    component: FormTitle,
+    tokenMap: FORM_TITLE_TOKEN_MAP,
+    jsxSource: formTitleJsxRaw,
+
+    controls: [
+      {
+        id: 'showDescription',
+        label: '描述文案',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'titleTag',
+        label: '标题后缀',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '无' },
+          { id: 'on', label: 'Tag' },
+        ],
+        default: 'off',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const variant = enums.variant || 'form';
+      const sampleMap = {
+        form: { title: '表单标题', description: '一级标题描述' },
+        'level-1': { title: '一级标题', description: '一级标题描述' },
+        'level-2': { title: '二级标题', description: '二级标题描述' },
+        'level-3': { title: '三级标题', description: '二级标题描述' },
+        card: { title: '卡片标题', description: '二级标题描述' },
+      };
+      const sample = sampleMap[variant] || sampleMap.form;
+      return {
+        variant,
+        title: sample.title,
+        titleSuffix: cv.titleTag === 'on' ? <Tag variant="grey" size="m">0 条消息</Tag> : null,
+        description: cv.showDescription === 'on' ? sample.description : '',
+        showDescription: cv.showDescription === 'on',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const showDescription = cv.showDescription === 'on';
+      const showTitleTag = cv.titleTag === 'on';
+      const variant = enums.variant || 'form';
+      const sampleMap = {
+        form: { title: '表单标题', description: '一级标题描述' },
+        'level-1': { title: '一级标题', description: '一级标题描述' },
+        'level-2': { title: '二级标题', description: '二级标题描述' },
+        'level-3': { title: '三级标题', description: '二级标题描述' },
+        card: { title: '卡片标题', description: '二级标题描述' },
+      };
+      const sample = sampleMap[variant] || sampleMap.form;
+      const lines = [`import FormTitle from './components/FormTitle';`];
+      if (showTitleTag) {
+        lines.push(`import Tag from './components/Tag';`);
+      }
+
+      lines.push('');
+      if (variant === 'level-1' && !showDescription) {
+        lines.push('{/* 列表/管理页白卡顶栏：level-1 + 无描述；与按钮同行用 flex justify-between */}');
+      }
+      lines.push('<FormTitle');
+      if (variant !== 'form') lines.push(`  variant="${variant}"`);
+      lines.push(`  title="${sample.title}"`);
+      if (showTitleTag) {
+        lines.push('  titleSuffix={<Tag variant="grey" size="m">0 条消息</Tag>}');
+      }
+      if (showDescription) {
+        lines.push(`  description="${sample.description}"`);
+        lines.push('  showDescription');
+      }
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  form: {
+    component: FormPreview,
+    tokenMap: FORM_TOKEN_MAP,
+
+    normalizeControlValues: ({ changedControlId, nextControlValues, prevControlValues }) => (
+      normalizeSliderPreviewControls(nextControlValues, prevControlValues, changedControlId, 'slider')
+    ),
+
+    getPreviewAreaStyle: ({ controlValues }) => ({
+      alignItems: (controlValues.previewMode || 'single') === 'all' ? 'flex-start' : 'center',
+      justifyContent: (controlValues.previewMode || 'single') === 'all' ? 'flex-start' : 'center',
+      overflow: 'auto',
+      padding: '48px',
+    }),
+
+    getPreviewItemStyle: ({ controlValues }) => ({
+      width: controlValues.previewMode === 'all' ? 'max-content' : 'auto',
+      minWidth: controlValues.previewMode === 'all' ? '300px' : undefined,
+      display: 'flex',
+      alignItems: controlValues.previewMode === 'all' ? 'flex-start' : 'center',
+      justifyContent: controlValues.previewMode === 'all' ? 'flex-start' : 'center',
+    }),
+
+    controls: [
+      {
+        id: 'previewMode',
+        label: '预览',
+        type: 'seg',
+        options: [
+          { id: 'single', label: '单项' },
+          { id: 'all', label: '全集' },
+        ],
+        default: 'single',
+      },
+      {
+        id: 'fieldType',
+        label: '字段类型',
+        type: 'select',
+        options: FORM_FIELD_TYPES.map((id) => ({ id, label: FORM_FIELD_LABELS[id] || id })),
+        default: 'input',
+        hidden: ({ controlValues }) => (controlValues.previewMode || 'single') === 'all',
+      },
+      {
+        id: 'labelPosition',
+        label: '标签位置',
+        type: 'seg',
+        options: [
+          { id: 'top', label: '顶部' },
+          { id: 'left', label: '左侧' },
+        ],
+        default: 'top',
+        hidden: ({ controlValues }) => (controlValues.previewMode || 'single') === 'all',
+      },
+      {
+        id: 'helpMode',
+        label: '提示',
+        type: 'seg',
+        options: [
+          { id: 'none', label: '无' },
+          { id: 'middle', label: '中部' },
+          { id: 'bottom', label: '底部' },
+        ],
+        default: 'none',
+        hidden: ({ controlValues }) => (controlValues.previewMode || 'single') === 'all',
+      },
+      {
+        id: 'validationState',
+        label: '校验',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'error', label: '错误' },
+        ],
+        default: 'default',
+        hidden: ({ controlValues }) => (controlValues.previewMode || 'single') === 'all',
+      },
+      {
+        id: 'labelOptional',
+        label: '标题-可选',
+        type: 'switch',
+        default: false,
+      },
+      {
+        id: 'labelRequired',
+        label: '标题-必填',
+        type: 'switch',
+        default: false,
+      },
+      {
+        id: 'labelAi',
+        label: '标题-AI',
+        type: 'switch',
+        default: false,
+      },
+      {
+        id: 'labelHelp',
+        label: '标题-Help',
+        type: 'switch',
+        default: false,
+      },
+      ...buildSliderPreviewControls('slider', ({ controlValues }) => {
+        const previewMode = controlValues.previewMode || 'single';
+        return previewMode === 'all' || (controlValues.fieldType || 'input') !== 'slider';
+      }),
+    ],
+
+    enumTitles: {
+      controlVariant: '组件颜色',
+      controlLayout: '组件排列',
+      pickerType: '日期类型',
+      timePickerType: '时间类型',
+      inputNumberButtons: '按钮位置',
+    },
+
+    getVisibleEnumProps: ({ enumProps, controlValues }) => {
+      const previewMode = controlValues.previewMode || 'single';
+      if (previewMode === 'all') return [];
+      return getFormFieldAtomEnumProps(controlValues.fieldType || 'input');
+    },
+
+    mapProps: (cv, enums) => ({
+      previewMode: cv.previewMode || 'single',
+      fieldType: cv.fieldType || 'input',
+      labelPosition: cv.labelPosition || 'top',
+      helpMode: cv.helpMode || 'none',
+      validationState: cv.validationState || 'default',
+      size: 'md',
+      labelOptional: cv.labelOptional === true,
+      labelRequired: cv.labelRequired === true,
+      labelAi: cv.labelAi === true,
+      labelHelp: cv.labelHelp === true,
+      fieldAtomProps: buildFormFieldAtomProps(cv.fieldType || 'input', enums, cv),
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Form from './components/Form';`];
+      const previewMode = cv.previewMode || 'single';
+      const fieldType = cv.fieldType || 'input';
+      const labelPosition = cv.labelPosition || 'top';
+      const helpMode = cv.helpMode || 'none';
+      const validationState = cv.validationState || 'default';
+      const labelOptional = cv.labelOptional === true;
+      const labelRequired = cv.labelRequired === true;
+      const labelAi = cv.labelAi === true;
+      const labelHelp = cv.labelHelp === true;
+      const fieldAtomProps = buildFormFieldAtomProps(fieldType, enums, cv);
+
+      if (previewMode === 'all') {
+        lines.push('');
+        lines.push('<Form className="!gap-10" />');
+        return lines.join('\n');
+      }
+
+      lines.push('');
+      lines.push('const items = [{');
+      lines.push("  id: 'field-1',");
+      lines.push("  label: '字段标题',");
+      lines.push(`  type: '${fieldType}',`);
+      lines.push('  required: true,');
+      if (helpMode === 'middle') lines.push("  middleHelpText: '提示文案',");
+      if (helpMode === 'bottom') lines.push("  helpText: '提示文案',");
+      if (validationState === 'error') lines.push("  error: true, errorText: '该项目为必填项',");
+      if (fieldType === 'radio' || fieldType === 'checkbox') {
+        if (fieldAtomProps.variant !== 'brand') lines.push(`  variant: '${fieldAtomProps.variant}',`);
+        if (fieldAtomProps.layout !== 'horizontal') lines.push(`  layout: '${fieldAtomProps.layout}',`);
+      }
+      if (fieldType === 'switch') {
+        if (fieldAtomProps.variant !== 'black') lines.push(`  variant: '${fieldAtomProps.variant}',`);
+      }
+      if (fieldType === 'date-picker' && fieldAtomProps.pickerType !== 'date') {
+        lines.push(`  pickerType: '${fieldAtomProps.pickerType}',`);
+      }
+      if (fieldType === 'time-picker' && fieldAtomProps.pickerType !== 'time') {
+        lines.push(`  pickerType: '${fieldAtomProps.pickerType}',`);
+      }
+      if (fieldType === 'input-number' && fieldAtomProps.innerButtons) {
+        lines.push('  innerButtons: true,');
+      }
+      if (fieldType === 'textarea') {
+        if (enums.fillMode === 'filled') {
+          lines.push(`  defaultValue: '${FORM_TEXTAREA_SAMPLE.slice(0, 48)}…',`);
+        }
+        if (enums.countOverflow === 'on') {
+          lines.push('  showCount: true,');
+          lines.push('  maxLength: 140,');
+          lines.push('  enforceMaxLength: false,');
+        }
+        if (enums.state === 'disabled') lines.push('  disabled: true,');
+        if (enums.minRows != null && enums.minRows !== 3) lines.push(`  minRows: ${enums.minRows},`);
+        if (enums.status === 'error') lines.push('  status: "error",');
+        if (enums.resize === 'none') lines.push('  resize: "none",');
+      }
+      if (fieldType === 'slider') {
+        const sliderDefaultValue = formatUsageLiteral(fieldAtomProps.defaultValue);
+        const sliderMarks = formatUsageLiteral(fieldAtomProps.marks);
+        if (fieldAtomProps.min !== SLIDER_PREVIEW_DEFAULTS.min) lines.push(`  min: ${fieldAtomProps.min},`);
+        if (fieldAtomProps.max !== SLIDER_PREVIEW_DEFAULTS.max) lines.push(`  max: ${fieldAtomProps.max},`);
+        if (fieldAtomProps.step !== SLIDER_PREVIEW_DEFAULTS.step) lines.push(`  step: ${fieldAtomProps.step},`);
+        if (sliderDefaultValue) lines.push(`  defaultValue: ${sliderDefaultValue},`);
+        if (fieldAtomProps.showTooltip === false) lines.push('  showTooltip: false,');
+        if (sliderMarks) lines.push(`  marks: ${sliderMarks},`);
+        if (fieldAtomProps.disabled) lines.push('  disabled: true,');
+        lines.push('  onChange: (value) => {},');
+        lines.push('  onAfterChange: (value) => {},');
+      }
+      lines.push('}];');
+      lines.push('');
+      lines.push('<Form');
+      if (labelPosition !== 'top') lines.push(`  labelPosition="${labelPosition}"`);
+      if (labelOptional) lines.push('  labelOptional');
+      if (labelRequired) lines.push('  labelRequired');
+      if (labelHelp) lines.push('  labelHelp');
+      if (labelAi) lines.push('  labelAi');
+      lines.push('  items={items}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'form-field-stack': {
+    component: FormFieldStack,
+    tokenMap: FORM_FIELD_STACK_TOKEN_MAP,
+    jsxSource: formFieldStackJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      /* 默认 .detail-preview-area 为横向 flex，子级 scaler 会随内容收缩宽度；
+         改为纵向 + stretch，让 scaler 在横轴上占满预览区，内部 w-full 才能生效 */
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      overflow: 'auto',
+      padding: 0,
+    }),
+
+    getPreviewScalerStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      boxSizing: 'border-box',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      minWidth: 0,
+      flex: '1 1 auto',
+      alignSelf: 'stretch',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'stretch',
+    }),
+
+    configHiddenEnums: ['stackLayout'],
+
+    controls: [
+      {
+        id: 'stackLayout',
+        label: '布局',
+        type: 'seg',
+        options: [
+          { id: 'select-stack', label: '纯下拉' },
+          { id: 'mixed-fields', label: '多类型' },
+        ],
+        default: 'select-stack',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const stackLayout = cv.stackLayout || enums.stackLayout || 'select-stack';
+      return {
+        stackLayout,
+        __previewKey: `form-field-stack-${stackLayout}`,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const stackLayout = cv.stackLayout || enums.stackLayout || 'select-stack';
+      const lines = ["import FormFieldStack from './components/FormFieldStack';", ''];
+      lines.push('export default function Example() {');
+      if (stackLayout === 'mixed-fields') {
+        lines.push('  return <FormFieldStack stackLayout="mixed-fields" />;');
+      } else {
+        lines.push('  return <FormFieldStack />;');
+      }
+      lines.push('}');
+      return lines.join('\n');
+    },
+  },
+
+  input: {
+    component: InputPreview,
+    tokenMap: INPUT_TOKEN_MAP,
+    jsxSource: inputJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      overflow: 'auto',
+      paddingTop: '96px',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      flex: '0 0 auto',
+    }),
+
+    controls: [
+      {
+        id: 'addonType', label: '附加元素', type: 'seg',
+        options: [
+          { id: 'none', label: '无' },
+          { id: 'prefix', label: '前缀' },
+          { id: 'suffix', label: '后缀' },
+          { id: 'both', label: '前+后' },
+        ],
+        default: 'none',
+      },
+      {
+        id: 'state', label: '状态', type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'suggestionMode', label: 'AI推荐',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'suggestionType', label: '推荐形式',
+        type: 'seg',
+        options: [
+          { id: 'single', label: '单条' },
+          { id: 'multi', label: '多条' },
+        ],
+        default: 'single',
+        hidden: ({ controlValues }) => (controlValues.suggestionMode || 'off') !== 'on',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const addon = cv.addonType || 'none';
+      const st = cv.state || 'default';
+      const hasPrefix = addon === 'prefix' || addon === 'both';
+      const hasSuffix = addon === 'suffix' || addon === 'both';
+      const showSuggestion = cv.suggestionMode === 'on';
+      const isMultiSuggestion = cv.suggestionType === 'multi';
+      return {
+        prefix: hasPrefix ? <Search size={16} /> : undefined,
+        suffix: hasSuffix ? <Eye size={16} /> : undefined,
+        disabled: st === 'disabled',
+        allowClear: true,
+        aiSuggestion: showSuggestion && !isMultiSuggestion ? INPUT_SINGLE_SUGGESTIONS[0] : undefined,
+        aiSuggestions: showSuggestion && isMultiSuggestion
+          ? INPUT_MULTI_SUGGESTION_GROUPS[0]
+          : undefined,
+        placeholder: '请输入',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Input from './components/Input';`];
+      const addon = cv.addonType || 'none';
+      const st = cv.state || 'default';
+      const props = [];
+      if (enums.status && enums.status !== 'default') props.push(`status="${enums.status}"`);
+      if (addon === 'prefix' || addon === 'both') props.push('prefix={<Search size={16} />}');
+      if (addon === 'suffix' || addon === 'both') props.push('suffix={<Eye size={16} />}');
+      if (st === 'disabled') props.push('disabled');
+      if (cv.suggestionMode === 'on' && cv.suggestionType === 'single') {
+        props.push('aiSuggestion="您好，您的问题已收到，抖音客服正在为您核实处理。"');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      if (cv.suggestionMode === 'on' && cv.suggestionType === 'multi') {
+        props.push('aiSuggestions={["您好，正在为您核实，请稍候。", "抱歉给您带来不便，这边已经帮您加急处理。", "您好，您反馈的问题我们已经收到，建议您先提供订单号和问题截图，方便抖音客服尽快为您核实处理。"]}');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      props.push('placeholder="请输入"');
+
+      lines.push('');
+      lines.push('<Input');
+      props.forEach(p => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  textarea: {
+    component: TextAreaPreview,
+    tokenMap: TEXTAREA_TOKEN_MAP,
+    jsxSource: textareaJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      overflow: 'auto',
+      paddingTop: '96px',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      flex: '0 0 auto',
+    }),
+
+    controls: [
+      {
+        id: 'fillMode',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '空' },
+          { id: 'filled', label: '有值' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'countOverflow',
+        label: '超长计数',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '关' },
+          { id: 'on', label: '开' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'state',
+        label: '状态',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认可用' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'suggestionMode',
+        label: 'AI推荐',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'suggestionType',
+        label: '推荐形式',
+        type: 'seg',
+        options: [
+          { id: 'single', label: '单条' },
+          { id: 'multi', label: '多条' },
+        ],
+        default: 'single',
+        hidden: ({ controlValues }) => (controlValues.suggestionMode || 'off') !== 'on',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const showSuggestion = cv.suggestionMode === 'on';
+      const isMultiSuggestion = cv.suggestionType === 'multi';
+      return {
+        fillMode: cv.fillMode || 'empty',
+        countOverflow: cv.countOverflow === 'on',
+        disabled: cv.state === 'disabled',
+        aiSuggestion: showSuggestion && !isMultiSuggestion ? TEXTAREA_SINGLE_SUGGESTIONS[0] : undefined,
+        aiSuggestions: showSuggestion && isMultiSuggestion ? TEXTAREA_MULTI_SUGGESTION_GROUPS[0] : undefined,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import TextArea from './components/TextArea';`];
+      const props = [];
+      if (enums.variant && enums.variant !== 'default') props.push(`variant="${enums.variant}"`);
+      if (enums.minRows != null && enums.minRows !== 3) props.push(`minRows={${enums.minRows}}`);
+      if (enums.status && enums.status !== 'default') props.push(`status="${enums.status}"`);
+      if (cv.state === 'disabled') props.push('disabled');
+      props.push(enums.variant === 'code' ? 'placeholder="请输入 System Prompt、JSON 或代码"' : 'placeholder="请输入"');
+      if (cv.countOverflow === 'on') {
+        props.push('showCount');
+        props.push('maxLength={140}');
+        props.push('enforceMaxLength={false}');
+      }
+      if (cv.suggestionMode === 'on' && cv.suggestionType === 'single') {
+        props.push('aiSuggestion="根据当前对话内容，建议先记录用户诉求、异常现象和下一步处理动作。"');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      if (cv.suggestionMode === 'on' && cv.suggestionType === 'multi') {
+        props.push('aiSuggestions={["建议优先整理用户诉求、处理时效和需补充的材料信息。", "如果需要后续交接，可一并记录当前判责结论和预计回访时间。"]}');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      if (cv.fillMode === 'filled') {
+        props.push(enums.variant === 'code'
+          ? 'defaultValue={"# 角色\\n你是抖音安全中心的小安智能助手…"}'
+          : 'defaultValue="我们非常高兴地向您介绍我们的最新产品 HiUI…"');
+      }
+      if (enums.resize === 'none') {
+        props.push('resize="none"');
+      }
+      if (enums.fillHeight) {
+        props.push('fillHeight');
+        props.push('className="flex-1 min-h-0 w-full"');
+      } else if (enums.variant === 'code') {
+        props.push('className="w-[520px]"');
+      }
+      lines.push('');
+      lines.push('<TextArea');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'input-number': {
+    component: InputNumberPreview,
+    tokenMap: INPUT_NUMBER_TOKEN_MAP,
+    jsxSource: inputNumberJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      overflow: 'auto',
+      paddingTop: '96px',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      flex: '0 0 auto',
+    }),
+
+    controls: [
+      {
+        id: 'buttonMode',
+        label: '按钮',
+        type: 'seg',
+        options: [
+          { id: 'outer', label: '外置' },
+          { id: 'inner', label: '内置' },
+        ],
+        default: 'outer',
+      },
+      {
+        id: 'content',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '无值' },
+          { id: 'filled', label: '有值' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'state',
+        label: '状态',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv, enums) => ({
+      buttonMode: cv.buttonMode || 'outer',
+      content: cv.content || 'empty',
+      disabled: cv.state === 'disabled',
+      status: enums.status || 'default',
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import InputNumber from './components/InputNumber';`];
+      const props = [];
+      const buttonMode = cv.buttonMode || 'outer';
+      const content = cv.content || 'empty';
+      if (enums.status && enums.status !== 'default') props.push(`status="${enums.status}"`);
+      if (buttonMode === 'inner') props.push('innerButtons');
+      if (cv.state === 'disabled') props.push('disabled');
+      if (content === 'filled') props.push('defaultValue={12}');
+      props.push('min={0}');
+      props.push('max={99}');
+      props.push('step={1}');
+      props.push('placeholder="请输入"');
+
+      lines.push('');
+      lines.push('<InputNumber');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  radio: {
+    component: RadioPreview,
+    tokenMap: RADIO_TOKEN_MAP,
+    jsxSource: radioJsxRaw,
+
+    controls: [
+      {
+        id: 'initialKey',
+        label: '初始选中',
+        type: 'seg',
+        options: [
+          { id: 'none', label: '无' },
+          { id: 'a', label: 'A' },
+          { id: 'b', label: 'B' },
+        ],
+        default: 'none',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      initialKey: cv.initialKey || 'none',
+      disabled: cv.state === 'disabled',
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import RadioGroup, { Radio } from './components/Radio';`];
+      const props = [];
+      if (enums.variant && enums.variant !== 'brand') props.push(`variant="${enums.variant}"`);
+      if (enums.layout && enums.layout !== 'vertical') props.push(`layout="${enums.layout}"`);
+      if (cv.initialKey === 'a') props.push('defaultValue="a"');
+      if (cv.initialKey === 'b') props.push('defaultValue="b"');
+      if (cv.state === 'disabled') props.push('disabled');
+      props.push('onChange={(value) => {}}');
+      lines.push('');
+      lines.push('<RadioGroup');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('>');
+      lines.push('  <Radio value="a">选项 A</Radio>');
+      lines.push('  <Radio value="b">选项 B</Radio>');
+      lines.push('  <Radio value="c" disabled>选项 C（单项禁用）</Radio>');
+      lines.push('</RadioGroup>');
+      return lines.join('\n');
+    },
+  },
+
+  checkbox: {
+    component: CheckboxPreview,
+    tokenMap: CHECKBOX_TOKEN_MAP,
+    jsxSource: checkboxJsxRaw,
+
+    controls: [
+      {
+        id: 'previewMode',
+        label: '预览',
+        type: 'seg',
+        options: [
+          { id: 'group', label: '多选组' },
+          { id: 'indeterminate', label: '半选' },
+        ],
+        default: 'group',
+      },
+      {
+        id: 'initialKey',
+        label: '初始选中',
+        type: 'seg',
+        options: [
+          { id: 'none', label: '无' },
+          { id: 'a', label: 'A' },
+          { id: 'ab', label: 'A+B' },
+        ],
+        default: 'none',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      previewMode: cv.previewMode || 'group',
+      initialKey: cv.initialKey || 'none',
+      disabled: cv.state === 'disabled',
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import CheckboxGroup, { Checkbox } from './components/Checkbox';`];
+      const props = [];
+      if (enums.variant && enums.variant !== 'brand') props.push(`variant="${enums.variant}"`);
+      if (enums.size && enums.size !== 'md') props.push(`size="${enums.size}"`);
+      if (enums.layout && enums.layout !== 'vertical') props.push(`layout="${enums.layout}"`);
+      if (cv.state === 'disabled') props.push('disabled');
+
+      if (cv.previewMode === 'indeterminate') {
+        lines.push('');
+        lines.push('<Checkbox');
+        props.forEach((p) => lines.push(`  ${p}`));
+        lines.push('  indeterminate');
+        lines.push('>');
+        lines.push('  部分子项已选');
+        lines.push('</Checkbox>');
+        return lines.join('\n');
+      }
+
+      if (cv.initialKey === 'a') props.push('defaultValue={["a"]}');
+      if (cv.initialKey === 'ab') props.push('defaultValue={["a","b"]}');
+      props.push('onChange={(values) => {}}');
+      lines.push('');
+      lines.push('<CheckboxGroup');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('>');
+      lines.push('  <Checkbox value="a">选项 A</Checkbox>');
+      lines.push('  <Checkbox value="b">选项 B</Checkbox>');
+      lines.push('  <Checkbox value="c" disabled>选项 C（单项禁用）</Checkbox>');
+      lines.push('</CheckboxGroup>');
+      return lines.join('\n');
+    },
+  },
+
+  select: {
+    component: SelectPreview,
+    tokenMap: SELECT_TOKEN_MAP,
+    jsxSource: selectJsxRaw,
+    configHiddenEnums: ['mode', 'tagVariant', 'tagSize'],
+
+    controls: [
+      {
+        id: 'selectType',
+        label: '类型',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'tag', label: '标签' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'initial',
+        label: '初始值',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '空' },
+          { id: 'selected', label: '已选' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'optionMode',
+        label: '选项量',
+        type: 'seg',
+        options: [
+          { id: 'few', label: '少' },
+          { id: 'many', label: '多' },
+        ],
+        default: 'few',
+        hidden: ({ controlValues }) => (controlValues.selectType || 'default') === 'tag',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'suggestionMode',
+        label: 'AI推荐',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+        hidden: ({ controlValues }) => (controlValues.selectType || 'default') === 'tag',
+      },
+      {
+        id: 'suggestionType',
+        label: '推荐形式',
+        type: 'seg',
+        options: [
+          { id: 'single', label: '单条' },
+          { id: 'multi', label: '多条' },
+        ],
+        default: 'single',
+        hidden: ({ controlValues }) => (
+          (controlValues.selectType || 'default') === 'tag'
+          || (controlValues.suggestionMode || 'off') !== 'on'
+        ),
+      },
+    ],
+
+    mapProps: (cv) => {
+      const showSuggestion = cv.suggestionMode === 'on' && (cv.selectType || 'default') === 'default';
+      const isMultiSuggestion = cv.suggestionType === 'multi';
+      return {
+        selectType: cv.selectType || 'default',
+        initial: cv.initial || 'empty',
+        optionMode: cv.optionMode || 'few',
+        disabled: cv.state === 'disabled',
+        aiSuggestion: showSuggestion && !isMultiSuggestion ? SELECT_AI_SINGLE_SUGGESTIONS[0] : undefined,
+        aiSuggestions: showSuggestion && isMultiSuggestion ? SELECT_AI_MULTI_SUGGESTION_GROUPS[0] : undefined,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Select from './components/Select';`];
+      const props = [];
+      const selectType = cv.selectType || 'default';
+      const isTagSelect = selectType === 'tag';
+      const showSuggestion = cv.suggestionMode === 'on' && !isTagSelect;
+      const isMultiSuggestion = cv.suggestionType === 'multi';
+      if (enums.status && enums.status !== 'default') props.push(`status="${enums.status}"`);
+      if (isTagSelect) props.push('mode="tag"');
+      if (cv.initial === 'selected') {
+        props.push(isTagSelect ? 'defaultValue={["brand", "risk"]}' : 'defaultValue="js"');
+      }
+      if (cv.state === 'disabled') props.push('disabled');
+      props.push('allowClear');
+      if (showSuggestion && !isMultiSuggestion) {
+        props.push('aiSuggestion="江苏省"');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      if (showSuggestion && isMultiSuggestion) {
+        props.push('aiSuggestions={["江苏省", "上海市", "浙江省"]}');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+      props.push('placeholder="请选择"');
+      lines.push('');
+      lines.push('const options = [');
+      if (isTagSelect) {
+        lines.push("  { value: 'brand', label: '标签', variant: 'grey' },");
+        lines.push("  { value: 'risk', label: '标签', variant: 'grey' },");
+        lines.push("  { value: 'service', label: '标签', variant: 'grey' },");
+      } else {
+        lines.push("  { value: 'zj', label: '浙江省' },");
+        lines.push("  { value: 'js', label: '江苏省' },");
+        lines.push("  { value: 'sh', label: '上海市' },");
+      }
+      lines.push('];');
+      lines.push('');
+      lines.push('<Select');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('  options={options}');
+      lines.push('  onChange={(value, option) => {}}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  switch: {
+    component: SwitchPreview,
+    tokenMap: SWITCH_TOKEN_MAP,
+    jsxSource: switchJsxRaw,
+
+    controls: [
+      {
+        id: 'initial',
+        label: '初始状态',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '关' },
+          { id: 'on', label: '开' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => ({
+      defaultChecked: cv.initial === 'on',
+      disabled: cv.state === 'disabled',
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Switch from './components/Switch';`];
+      const props = [];
+      if (enums.variant && enums.variant !== 'brand') props.push(`variant="${enums.variant}"`);
+      if (cv.initial === 'on') props.push('defaultChecked');
+      if (cv.state === 'disabled') props.push('disabled');
+      lines.push('');
+      lines.push('<Switch');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  slider: {
+    component: SliderPreview,
+    tokenMap: SLIDER_TOKEN_MAP,
+    jsxSource: sliderJsxRaw,
+
+    controls: buildSliderPreviewControls(),
+
+    normalizeControlValues: ({ changedControlId, nextControlValues, prevControlValues }) => (
+      normalizeSliderPreviewControls(nextControlValues, prevControlValues, changedControlId)
+    ),
+
+    mapProps: (cv) => ({
+      ...buildSliderPreviewProps(cv),
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Slider from './components/Slider';`];
+      const sliderProps = buildSliderPreviewProps(cv);
+      const props = [];
+
+      if (sliderProps.min !== SLIDER_PREVIEW_DEFAULTS.min) props.push(`min={${sliderProps.min}}`);
+      if (sliderProps.max !== SLIDER_PREVIEW_DEFAULTS.max) props.push(`max={${sliderProps.max}}`);
+      if (sliderProps.step !== SLIDER_PREVIEW_DEFAULTS.step) props.push(`step={${sliderProps.step}}`);
+      props.push(`defaultValue={${formatUsageLiteral(sliderProps.defaultValue)}}`);
+      if (sliderProps.showTooltip === false) props.push('showTooltip={false}');
+      if (sliderProps.marks) props.push(`marks={${formatUsageLiteral(sliderProps.marks)}}`);
+      if (sliderProps.disabled) props.push('disabled');
+      props.push('onChange={(value) => {}}');
+      props.push('onAfterChange={(value) => {}}');
+
+      lines.push('');
+      lines.push('<Slider');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  modal: {
+    component: Modal,
+    tokenMap: MODAL_TOKEN_MAP,
+    jsxSource: modalJsxRaw,
+
+    controls: [
+      {
+        id: 'subtitleMode',
+        label: '副标题',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'on',
+      },
+      {
+        id: 'footerHintMode',
+        label: '底部提示',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'on',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const layout = enums?.layout || 'center';
+      return {
+        layout,
+        size: enums?.size || 'md',
+        subtitle: cv.subtitleMode === 'off' ? null : '模态副标题',
+        showFooterHint: cv.footerHintMode !== 'off',
+        /* fullscreen 变体需要 mt-auto 停靠底部，通过 className 注入 */
+        className: layout === 'fullscreen' ? 'mt-auto' : '',
+        onClose: () => {},
+        onCancel: () => {},
+        onConfirm: () => {},
+      };
+    },
+
+    /* center → 按 size 给定固定宽度，高度自适应
+     * fullscreen → previewArea 改为 flex-col，scaler 撑满区域高度，
+     *              Modal 作为 scaler 的直接 flex 子元素、mt-auto 停靠底部，
+     *              max-h-[calc(100%-24px)] 此时可正确计算（parent = scaler 有定高）*/
+    getPreviewItemStyle: ({ enumValues } = {}) => {
+      if ((enumValues?.layout || 'center') === 'fullscreen') {
+        return null; // Modal 直接作为 scaler 子节点，无需额外 wrapper
+      }
+      const widthMap = { sm: 450, md: 684, lg: 920 };
+      const w = widthMap[enumValues?.size] || widthMap.md;
+      return { width: `${w}px`, maxWidth: '100%' };
+    },
+
+    getPreviewAreaStyle: ({ enumValues } = {}) => {
+      if ((enumValues?.layout || 'center') === 'fullscreen') {
+        return { padding: 0, display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden' };
+      }
+      return {};
+    },
+
+    getPreviewScalerStyle: ({ enumValues } = {}) => {
+      if ((enumValues?.layout || 'center') === 'fullscreen') {
+        return {
+          alignSelf: 'stretch',
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+        };
+      }
+      return {};
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Modal from './components/Modal';`];
+      const layout = enums?.layout || 'center';
+      const sub = cv.subtitleMode === 'off';
+      const noHint = cv.footerHintMode === 'off';
+      lines.push('');
+      if (layout === 'fullscreen') {
+        lines.push('/* 外层须是 flex-col 定高容器，面板通过 mt-auto 停靠底部 */');
+        lines.push('<div className="fixed inset-0 flex flex-col">');
+        lines.push('  <Modal');
+        lines.push('    layout="fullscreen"');
+        lines.push('    title="模态标题"');
+        lines.push(sub ? '    subtitle={null}' : '    subtitle="模态副标题"');
+        if (noHint) lines.push('    showFooterHint={false}');
+        lines.push('    className="mt-auto"');
+        lines.push('    onClose={() => {}}');
+        lines.push('    onCancel={() => {}}');
+        lines.push('    onConfirm={() => {}}');
+        lines.push('  >');
+        lines.push('    {/* 内容区域 */}');
+        lines.push('  </Modal>');
+        lines.push('</div>');
+      } else {
+        lines.push('<Modal');
+        if (enums.size && enums.size !== 'md') lines.push(`  size="${enums.size}"`);
+        lines.push('  title="模态标题"');
+        lines.push(sub ? '  subtitle={null}' : '  subtitle="模态副标题"');
+        if (noHint) lines.push('  showFooterHint={false}');
+        lines.push('  onClose={() => {}}');
+        lines.push('  onCancel={() => {}}');
+        lines.push('  onConfirm={() => {}}');
+        lines.push('>');
+        lines.push('  {/* 内容区域 */}');
+        lines.push('</Modal>');
+      }
+      return lines.join('\n');
+    },
+  },
+  sheet: {
+    component: Sheet,
+    tokenMap: SHEET_TOKEN_MAP,
+    jsxSource: sheetJsxRaw,
+
+    controls: [
+      {
+        id: 'subtitleMode',
+        label: '副标题',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'on',
+      },
+      {
+        id: 'footerHintMode',
+        label: '底部提示',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'on',
+      },
+    ],
+
+    mapProps: (cv, enums) => ({
+      size: enums?.size || 'md',
+      subtitle: cv.subtitleMode === 'off' ? null : '侧边副标题',
+      showFooterHint: cv.footerHintMode !== 'off',
+      onClose: () => {},
+      onCancel: () => {},
+      onConfirm: () => {},
+    }),
+
+    getPreviewAreaStyle: () => ({
+      padding: 0,
+      alignItems: 'stretch',
+      justifyContent: 'flex-end',
+    }),
+
+    getPreviewScalerStyle: () => ({
+      alignSelf: 'stretch',
+      display: 'flex',
+      alignItems: 'stretch',
+      justifyContent: 'flex-end',
+      transformOrigin: 'right top',
+    }),
+
+    getPreviewItemStyle: ({ enumValues } = {}) => {
+      const widthMap = { sm: 400, md: 560, lg: 800 };
+      const w = widthMap[enumValues?.size] || widthMap.md;
+      return { width: `${w}px`, maxWidth: '100%', alignSelf: 'stretch' };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Sheet from './components/Sheet';`];
+      const sub = cv.subtitleMode === 'off';
+      const noHint = cv.footerHintMode === 'off';
+      lines.push('');
+      lines.push('<Sheet');
+      if (enums.size && enums.size !== 'md') lines.push(`  size="${enums.size}"`);
+      lines.push('  title="侧边标题"');
+      lines.push(sub ? '  subtitle={null}' : '  subtitle="侧边副标题"');
+      if (noHint) lines.push('  showFooterHint={false}');
+      lines.push('  onClose={() => {}}');
+      lines.push('  onCancel={() => {}}');
+      lines.push('  onConfirm={() => {}}');
+      lines.push('>');
+      lines.push('  {/* 内容区域 */}');
+      lines.push('</Sheet>');
+      return lines.join('\n');
+    },
+  },
+  upload: {
+    component: Upload,
+    tokenMap: UPLOAD_TOKEN_MAP,
+    jsxSource: uploadJsxRaw,
+
+    controls: [
+      {
+        id: 'content',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '无图' },
+          { id: 'filled', label: '有图' },
+        ],
+        default: 'filled',
+      },
+      {
+        id: 'state',
+        label: '状态',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'hover', label: '悬浮' },
+          { id: 'uploading', label: '上传中' },
+          { id: 'error', label: '异常' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const state = cv.state || 'default';
+      const content = cv.content || 'filled';
+      const disabled = state === 'disabled';
+
+      const baseA = { uid: 'img-a', name: 'cover-a.png', url: UPLOAD_SAMPLE_IMAGE_A, status: 'done' };
+      const baseB = { uid: 'img-b', name: 'cover-b.png', url: UPLOAD_SAMPLE_IMAGE_B, status: 'done' };
+
+      let previewList = [];
+      if (content !== 'empty') {
+        if (state === 'uploading') {
+          previewList = [baseA, { ...baseB, status: 'uploading', percent: 56 }];
+        } else if (state === 'error') {
+          previewList = [baseA, { ...baseB, status: 'error' }];
+        } else if (state === 'hover') {
+          previewList = [{ ...baseA, showRemove: true }];
+        } else {
+          previewList = [baseA];
+        }
+      }
+
+      return {
+        accept: 'image/*',
+        multiple: true,
+        limit: 3,
+        disabled,
+        defaultValue: previewList,
+        __previewKey: `upload-${content}-${state}`,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Upload from './components/Upload';`];
+      const state = cv.state || 'default';
+      const content = cv.content || 'filled';
+      const props = [];
+
+      props.push('accept="image/*"');
+      props.push('multiple');
+      props.push('limit={3}');
+
+      if (state === 'disabled') {
+        props.push('disabled');
+      }
+
+      if (content === 'filled') {
+        props.push(`defaultValue={[{ uid: 'img-1', name: 'cover.png', url: 'https://example.com/cover.png', status: 'done' }]}`);
+      }
+
+      props.push('onChange={(fileList) => {}}');
+
+      lines.push('');
+      lines.push('<Upload');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'date-picker': {
+    component: DatePicker,
+    tokenMap: DATEPICKER_TOKEN_MAP,
+    jsxSource: datePickerJsxRaw,
+
+    getPreviewItemStyle: ({ controlValues }) => {
+      const type = controlValues.previewType || 'date';
+      const isOpen = controlValues.panel !== 'closed';
+      const panelHeight = (type === 'datetime' || type === 'datetimerange') ? 348 : 312;
+      const panelGap = 4;
+
+      if (isOpen) {
+        return {
+          transform: `translateY(-${Math.round((panelHeight + panelGap) / 2)}px)`,
+          transition: 'transform 180ms ease',
+        };
+      }
+
+      return {
+        transform: 'translateY(-56px)',
+        transition: 'transform 180ms ease',
+      };
+    },
+
+    controls: [
+      {
+        id: 'previewType',
+        label: '类型',
+        type: 'seg',
+        options: [
+          { id: 'date', label: '日期' },
+          { id: 'datetime', label: '日期时间' },
+          { id: 'daterange', label: '日期范围' },
+          { id: 'datetimerange', label: '日期时间范围' },
+        ],
+        default: 'date',
+      },
+      {
+        id: 'valueState',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '无值' },
+          { id: 'filled', label: '有值' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'state',
+        label: '状态',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'panel',
+        label: '面板',
+        type: 'seg',
+        options: [
+          { id: 'open', label: '展开' },
+          { id: 'closed', label: '收起' },
+        ],
+        default: 'open',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const type = cv.previewType || 'date';
+      const isFilled = cv.valueState === 'filled';
+      return {
+        type,
+        disabled: cv.state === 'disabled',
+        value: isFilled ? DATEPICKER_SAMPLE_VALUE[type] : undefined,
+        defaultOpen: cv.panel !== 'closed',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import DatePicker from './components/DatePicker';`];
+      const type = cv.previewType || enums.type || 'date';
+      const isFilled = cv.valueState === 'filled';
+      const props = [];
+
+      props.push(`type="${type}"`);
+
+      if (cv.state === 'disabled') {
+        props.push('disabled');
+      }
+
+      if (cv.panel !== 'closed') {
+        props.push('defaultOpen');
+      }
+
+      if (isFilled) {
+        const sample = DATEPICKER_SAMPLE_VALUE[type];
+        if (Array.isArray(sample)) {
+          props.push(`defaultValue={["${sample[0]}", "${sample[1]}"]}`);
+        } else {
+          props.push(`defaultValue="${sample}"`);
+        }
+      }
+
+      lines.push('');
+      lines.push('<DatePicker');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'time-picker': {
+    component: TimePicker,
+    tokenMap: TIMEPICKER_TOKEN_MAP,
+    jsxSource: timePickerJsxRaw,
+
+    getPreviewItemStyle: ({ controlValues }) => {
+      const type = controlValues.previewType || 'time';
+      const isOpen = controlValues.panel !== 'closed';
+      const panelHeight = type === 'timerange' ? 304 : 252;
+      const panelGap = 4;
+
+      if (isOpen) {
+        return {
+          transform: `translateY(-${Math.round((panelHeight + panelGap) / 2)}px)`,
+          transition: 'transform 180ms ease',
+        };
+      }
+
+      return {
+        transform: 'translateY(-56px)',
+        transition: 'transform 180ms ease',
+      };
+    },
+
+    controls: [
+      {
+        id: 'previewType',
+        label: '类型',
+        type: 'seg',
+        options: [
+          { id: 'time', label: '时间' },
+          { id: 'timerange', label: '时间范围' },
+        ],
+        default: 'time',
+      },
+      {
+        id: 'valueState',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '无值' },
+          { id: 'filled', label: '有值' },
+        ],
+        default: 'empty',
+      },
+      {
+        id: 'state',
+        label: '状态',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'panel',
+        label: '面板',
+        type: 'seg',
+        options: [
+          { id: 'open', label: '展开' },
+          { id: 'closed', label: '收起' },
+        ],
+        default: 'open',
+      },
+    ],
+
+    mapProps: (cv) => {
+      const type = cv.previewType || 'time';
+      const isFilled = cv.valueState === 'filled';
+      return {
+        type,
+        disabled: cv.state === 'disabled',
+        defaultValue: isFilled ? TIMEPICKER_SAMPLE_VALUE[type] : undefined,
+        defaultOpen: cv.panel !== 'closed',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import TimePicker from './components/TimePicker';`];
+      const type = cv.previewType || enums.type || 'time';
+      const isFilled = cv.valueState === 'filled';
+      const props = [];
+
+      props.push(`type="${type}"`);
+
+      if (cv.state === 'disabled') {
+        props.push('disabled');
+      }
+
+      if (cv.panel !== 'closed') {
+        props.push('defaultOpen');
+      }
+
+      if (isFilled) {
+        const sample = TIMEPICKER_SAMPLE_VALUE[type];
+        if (Array.isArray(sample)) {
+          props.push(`defaultValue={["${sample[0]}", "${sample[1]}"]}`);
+        } else {
+          props.push(`defaultValue="${sample}"`);
+        }
+      }
+
+      lines.push('');
+      lines.push('<TimePicker');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'tag-input': {
+    component: TagInputPreview,
+    tokenMap: TAGINPUT_TOKEN_MAP,
+    jsxSource: tagInputJsxRaw,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      overflow: 'auto',
+      paddingTop: '96px',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      flex: '0 0 auto',
+    }),
+
+    controls: [
+      {
+        id: 'content',
+        label: '内容',
+        type: 'seg',
+        options: [
+          { id: 'empty', label: '空' },
+          { id: 'filled', label: '有值' },
+        ],
+        default: 'filled',
+      },
+      {
+        id: 'widthMode',
+        label: '宽度',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '默认' },
+          { id: 'narrow', label: '窄' },
+          { id: 'wide', label: '宽' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'state',
+        label: '交互',
+        type: 'seg',
+        options: [
+          { id: 'default', label: '可点' },
+          { id: 'disabled', label: '禁用' },
+        ],
+        default: 'default',
+      },
+      {
+        id: 'suggestionMode',
+        label: 'AI推荐',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'on',
+      },
+    ],
+
+    mapProps: (cv, enums) => ({
+      content: cv.content || 'filled',
+      widthMode: cv.widthMode || 'default',
+      disabled: cv.state === 'disabled',
+      size: enums.size || 'md',
+      status: enums.status || 'default',
+      tagVariant: enums.tagVariant || 'grey',
+      tagSize: enums.tagSize || 'm',
+      showAiSuggestions: (cv.suggestionMode || 'on') === 'on',
+    }),
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import TagInput from './components/TagInput';`];
+      const content = cv.content || 'filled';
+      const widthMode = cv.widthMode || 'default';
+      const props = [];
+      if (enums.status && enums.status !== 'default') props.push(`status="${enums.status}"`);
+      if (enums.tagVariant && enums.tagVariant !== 'grey') props.push(`tagVariant="${enums.tagVariant}"`);
+      if (enums.tagSize && enums.tagSize !== 'm') props.push(`tagSize="${enums.tagSize}"`);
+      if (cv.state === 'disabled') props.push('disabled');
+      if (widthMode === 'narrow') props.push('className="!w-[220px]"');
+      if (widthMode === 'wide') props.push('className="!w-[420px]"');
+      props.push('placeholder="请输入"');
+      if (content === 'filled') {
+        props.push('defaultValue={["标签", "标签", "标签", "标签", "标签", "标签"]}');
+      }
+      if ((cv.suggestionMode || 'on') === 'on') {
+        props.push('aiSuggestions={[["改签", "门店变更"], ["退款", "售后处理"], ["物流异常", "催办"]]}');
+        props.push('onRefreshAiSuggestions={() => {}}');
+      }
+
+      lines.push('');
+      lines.push('<TagInput');
+      props.forEach((p) => lines.push(`  ${p}`));
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  tag: {
+    component: TagGridPreview,
+    tokenMap: TAG_TOKEN_MAP,
+    jsxSource: tagJsxRaw,
+
+    controls: [
+      {
+        id: 'fontWeight',
+        label: '字体粗细',
+        type: 'seg',
+        options: [
+          { id: 'regular', label: '细体' },
+          { id: 'bold', label: '粗体' },
+        ],
+        default: 'bold',
+      },
+      {
+        id: 'radius',
+        label: '圆角',
+        type: 'seg',
+        options: [
+          { id: 'md', label: '圆角' },
+          { id: 'full', label: '全圆' },
+        ],
+        default: 'md',
+      },
+      {
+        id: 'showIcon',
+        label: '显示图标',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+      },
+      {
+        id: 'closable',
+        label: '关闭按钮',
+        type: 'seg',
+        options: [
+          { id: 'off', label: '隐藏' },
+          { id: 'on', label: '显示' },
+        ],
+        default: 'off',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const closable = cv.closable === 'on';
+      const showIcon = cv.showIcon === 'on';
+      const radius = cv.radius || 'md';
+      return {
+        showIcon,
+        iconName: 'tag-01-stroked',
+        closable,
+        fontWeight: cv.fontWeight || 'bold',
+        radius,
+        variant: enums.variant,
+        size: enums.size || 's',
+        onClose: closable ? () => {} : undefined,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const lines = [`import Tag from './components/Tag';`];
+      const variant = enums.variant || 'brand';
+      const size = enums.size || 's';
+      const fontWeight = cv.fontWeight || 'bold';
+      const radius = cv.radius || 'md';
+      const showIcon = cv.showIcon === 'on';
+      const closable = cv.closable === 'on';
+
+      lines.push('');
+      lines.push('<Tag');
+      if (variant !== 'brand') lines.push(`  variant="${variant}"`);
+      if (fontWeight !== 'bold') lines.push(`  fontWeight="${fontWeight}"`);
+      if (size !== 's') lines.push(`  size="${size}"`);
+      if (radius !== 'md') lines.push(`  radius="${radius}"`);
+      if (showIcon) lines.push('  showIcon');
+      if (closable) lines.push('  closable');
+      if (closable) lines.push('  onClose={() => {}}');
+      lines.push('>');
+      lines.push('  标签');
+      lines.push('</Tag>');
+      return lines.join('\n');
+    },
+  },
+
+  table: {
+    component: TablePreview,
+    tokenMap: TABLE_TOKEN_MAP,
+    jsxSource: tableJsxRaw,
+    hideBaseVariantControl: true,
+
+    getPreviewAreaStyle: () => ({
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      padding: '24px',
+      overflow: 'auto',
+    }),
+
+    getPreviewItemStyle: () => ({
+      width: '100%',
+      height: '100%',
+      maxWidth: '100%',
+      alignSelf: 'stretch',
+      minWidth: '0',
+      minHeight: '0',
+      display: 'flex',
+    }),
+
+    getPreviewScalerStyle: () => ({
+      width: '100%',
+      height: '100%',
+      minWidth: '0',
+      minHeight: '0',
+      display: 'flex',
+      flex: '1 1 auto',
+      transformOrigin: 'top center',
+    }),
+
+    controls: [
+      {
+        id: 'tableVariant',
+        label: '表格类型',
+        type: 'seg',
+        options: TABLE_VARIANT_OPTIONS,
+        default: 'table',
+      },
+      {
+        id: 'paginationMode',
+        label: '分页',
+        type: 'seg',
+        options: [
+          { id: 'on', label: '显示' },
+          { id: 'off', label: '隐藏' },
+        ],
+        default: 'on',
+      },
+      {
+        id: 'pageSizeMode',
+        label: '每页',
+        type: 'seg',
+        options: [
+          { id: '10', label: '10条' },
+          { id: '20', label: '20条' },
+        ],
+        default: '20',
+        hidden: ({ controlValues }) => (controlValues.paginationMode || 'on') === 'off',
+      },
+      {
+        id: 'tableSize',
+        label: '尺寸',
+        type: 'seg',
+        options: TABLE_CELL_SIZE_OPTIONS,
+        default: 'default',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form',
+      },
+      {
+        id: 'fixedColumnsMode',
+        label: '固定栏',
+        type: 'seg',
+        options: [
+          { id: 'none', label: '不固定' },
+          { id: 'first', label: '固定第一栏' },
+          { id: 'last', label: '固定尾栏' },
+          { id: 'both', label: '首尾固定' },
+        ],
+        default: 'none',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form',
+      },
+      {
+        id: 'headerCount',
+        label: '表头数量',
+        type: 'seg',
+        options: [
+          { id: '2', label: '2' },
+          { id: '3', label: '3' },
+          { id: '4', label: '4' },
+          { id: '5', label: '5' },
+          { id: '6', label: '6' },
+        ],
+        default: '5',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form',
+      },
+      {
+        id: 'activeColumn2',
+        label: '当前列',
+        type: 'list',
+        options: Array.from({ length: 2 }, (_, index) => ({
+          id: `column${index + 1}`,
+          label: `第${index + 1}列`,
+        })),
+        default: 'column1',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form' || (controlValues.headerCount || '6') !== '2',
+      },
+      {
+        id: 'activeColumn3',
+        label: '当前列',
+        type: 'list',
+        options: Array.from({ length: 3 }, (_, index) => ({
+          id: `column${index + 1}`,
+          label: `第${index + 1}列`,
+        })),
+        default: 'column1',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form' || (controlValues.headerCount || '6') !== '3',
+      },
+      {
+        id: 'activeColumn4',
+        label: '当前列',
+        type: 'list',
+        options: Array.from({ length: 4 }, (_, index) => ({
+          id: `column${index + 1}`,
+          label: `第${index + 1}列`,
+        })),
+        default: 'column1',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form' || (controlValues.headerCount || '6') !== '4',
+      },
+      {
+        id: 'activeColumn5',
+        label: '当前列',
+        type: 'list',
+        options: Array.from({ length: 5 }, (_, index) => ({
+          id: `column${index + 1}`,
+          label: `第${index + 1}列`,
+        })),
+        default: 'column1',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form' || (controlValues.headerCount || '6') !== '5',
+      },
+      {
+        id: 'activeColumn6',
+        label: '当前列',
+        type: 'list',
+        options: Array.from({ length: 6 }, (_, index) => ({
+          id: `column${index + 1}`,
+          label: `第${index + 1}列`,
+        })),
+        default: 'column1',
+        hidden: ({ controlValues }) => (controlValues.tableVariant || 'table') === 'card-form' || (controlValues.headerCount || '6') !== '6',
+      },
+      ...Array.from({ length: 6 }, (_, index) => ([
+        {
+          id: `column${index + 1}Type`,
+          label: '表单类型',
+          type: 'list',
+          options: TABLE_COLUMN_TYPE_OPTIONS,
+          default: ['link', 'tag', 'text', 'avatar', 'datetime', 'actions'][index] || 'text',
+          hidden: ({ controlValues }) => {
+            if ((controlValues.tableVariant || 'table') === 'card-form') return true;
+            const headerCount = controlValues.headerCount || '6';
+            const activeColumn =
+              controlValues[`activeColumn${headerCount}`] || 'column1';
+            return Number(headerCount) < index + 1 || activeColumn !== `column${index + 1}`;
+          },
+        },
+      ])).flat(),
+    ],
+
+    mapProps: (cv) => ({
+      tableVariant: cv.tableVariant || 'table',
+      paginationMode: cv.paginationMode || 'on',
+      pageSizeMode: cv.pageSizeMode || '20',
+      tableSize: cv.tableSize || 'default',
+      fixedColumnsMode: cv.fixedColumnsMode || 'none',
+      headerCount: cv.headerCount || '5',
+      column1Type: cv.column1Type || 'link',
+      column2Type: cv.column2Type || 'tag',
+      column3Type: cv.column3Type || 'text',
+      column4Type: cv.column4Type || 'avatar',
+      column5Type: cv.column5Type || 'datetime',
+      column6Type: cv.column6Type || 'actions',
+    }),
+
+    generateUsage: (_enumValues, controlValues) => buildTableUsageFromControls(controlValues),
+  },
+
+  toast: {
+    component: Toast,
+    tokenMap: TOAST_TOKEN_MAP,
+    jsxSource: toastJsxRaw,
+
+    controls: [
+      {
+        id: 'actions',
+        label: '文字操作',
+        type: 'seg',
+        options: [
+          { id: 'none', label: '无' },
+          { id: 'single', label: '一项' },
+          { id: 'dual', label: '两项' },
+        ],
+        default: 'none',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const type = enums.type || 'info';
+      const messages = {
+        info: '补充信息或状态切换',
+        success: '表单保存成功',
+        warning: '可能出现的错误',
+        error: '已经出现的错误',
+      };
+      const showClose = enums.showClose !== false;
+      const noop = () => {};
+      const actions =
+        cv.actions === 'dual'
+          ? [
+              { label: '操作1', onClick: noop },
+              { label: '操作2', onClick: noop },
+            ]
+          : cv.actions === 'single'
+            ? [{ label: '操作1', onClick: noop }]
+            : undefined;
+      return {
+        type,
+        message: messages[type] || messages.info,
+        bordered: enums.bordered !== false,
+        showClose,
+        onClose: showClose ? () => {} : undefined,
+        actions,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const type = enums.type || 'info';
+      const messages = {
+        info: '补充信息或状态切换',
+        success: '表单保存成功',
+        warning: '可能出现的错误',
+        error: '已经出现的错误',
+      };
+      const msg = messages[type] || messages.info;
+      const showClose = enums.showClose !== false;
+      const bordered = enums.bordered !== false;
+      const lines = [`import Toast from './components/Toast';`, ''];
+      lines.push('<Toast');
+      lines.push(`  type="${type}"`);
+      lines.push(`  message="${msg}"`);
+      if (cv.actions === 'single') {
+        lines.push(`  actions={[{ label: '操作1', onClick: () => {} }]}`);
+      } else if (cv.actions === 'dual') {
+        lines.push('  actions={[');
+        lines.push(`    { label: '操作1', onClick: () => {} },`);
+        lines.push(`    { label: '操作2', onClick: () => {} },`);
+        lines.push('  ]}');
+      }
+      if (!bordered) lines.push('  bordered={false}');
+      if (showClose) lines.push('  onClose={() => {}}');
+      else lines.push('  showClose={false}');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  tooltip: {
+    component: TooltipPreview,
+    tokenMap: TOOLTIP_TOKEN_MAP,
+    jsxSource: tooltipJsxRaw,
+
+    controls: [
+      {
+        id: 'mode',
+        label: '展示模式',
+        type: 'seg',
+        options: [
+          { id: 'pinned', label: '常驻' },
+          { id: 'hover', label: '悬浮触发' },
+        ],
+        default: 'pinned',
+      },
+      {
+        id: 'contentLength',
+        label: '内容长度',
+        type: 'seg',
+        options: [
+          { id: 'short', label: '短' },
+          { id: 'medium', label: '中' },
+          { id: 'long', label: '多行' },
+        ],
+        default: 'long',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const contentMap = {
+        short: '这是一段提示',
+        medium: '提示信息：保存后无法撤销',
+        long: '这是一段较长的多行提示文案。\n用于演示气泡最大宽度 280px 时的自动换行效果。',
+      };
+      return {
+        placement: enums.placement || 'top',
+        arrow: enums.arrow !== false,
+        autoFlip: enums.autoFlip !== false,
+        mode: cv.mode || 'pinned',
+        content: contentMap[cv.contentLength] || contentMap.long,
+        triggerLabel: '触发元素',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const placement = enums.placement || 'top';
+      const arrow = enums.arrow !== false;
+      const autoFlip = enums.autoFlip !== false;
+      const contentMap = {
+        short: '这是一段提示',
+        medium: '提示信息：保存后无法撤销',
+        long: '这是一段较长的多行提示文案。\\n用于演示气泡最大宽度 280px 时的自动换行效果。',
+      };
+      const content = contentMap[cv.contentLength] || contentMap.long;
+
+      const lines = [`import Tooltip from './components/Tooltip';`];
+      lines.push('');
+      lines.push('<Tooltip');
+      lines.push(`  content={\`${content}\`}`);
+      if (placement !== 'top') lines.push(`  placement="${placement}"`);
+      if (!arrow) lines.push('  arrow={false}');
+      if (!autoFlip) lines.push('  autoFlip={false}');
+      lines.push('>');
+      lines.push('  <Button>悬浮我</Button>');
+      lines.push('</Tooltip>');
+      return lines.join('\n');
+    },
+  },
+
+  empty: {
+    component: Empty,
+    tokenMap: EMPTY_TOKEN_MAP,
+    jsxSource: emptyJsxRaw,
+
+    // 场景示例：每种场景对应一套最自然的内容组合
+    // buttonLayout 已是枚举 prop，在左侧面板直接切换，无需在 controls 重复
+    controls: [
+      {
+        id: 'scenario',
+        label: '场景示例',
+        type: 'seg',
+        options: [
+          { id: 'default',   label: '通用空状态' },
+          { id: 'no-result', label: '搜索无结果' },
+          { id: 'error',     label: '加载失败' },
+        ],
+        default: 'default',
+      },
+    ],
+
+    mapProps: (cv, enums) => {
+      const illustrationType = enums.illustrationType || 'no-content';
+      const buttonLayout     = enums.buttonLayout     || 'row';
+      const scenario         = cv.scenario            || 'default';
+
+      // 加载失败：链接行模式，无标题/按钮
+      if (scenario === 'error') {
+        return {
+          illustrationType: 'failure',
+          linkPrefix: '页面显示失败，',
+          linkText: '刷新重试',
+        };
+      }
+
+      // 搜索无结果：有标题+描述，无操作按钮（纯说明）
+      if (scenario === 'no-result') {
+        return {
+          illustrationType: 'no-result',
+          buttonLayout,
+          title: '未找到搜索结果',
+          description: '请尝试更换关键词或清除筛选条件',
+        };
+      }
+
+      // 通用空状态：标题 + 描述 + 双按钮，buttonLayout 控制横排/竖排
+      return {
+        illustrationType,
+        buttonLayout,
+        title: '空状态标题',
+        description: '这是一段对当前空状态的描述文本',
+        primaryLabel: '一级按钮',
+        secondaryLabel: buttonLayout === 'row'    ? '二级按钮' : '',
+        tertiaryLabel:  buttonLayout === 'column' ? '文字按钮' : '',
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const illustrationType = enums.illustrationType || 'no-content';
+      const buttonLayout     = enums.buttonLayout     || 'row';
+      const scenario         = cv.scenario            || 'default';
+
+      const lines = [`import Empty from './components/Empty';`, ''];
+
+      if (scenario === 'error') {
+        lines.push('<Empty');
+        lines.push('  illustrationType="failure"');
+        lines.push('  linkPrefix="页面显示失败，"');
+        lines.push('  linkText="刷新重试"');
+        lines.push('/>');
+        return lines.join('\n');
+      }
+
+      if (scenario === 'no-result') {
+        lines.push('<Empty');
+        lines.push('  illustrationType="no-result"');
+        lines.push('  title="未找到搜索结果"');
+        lines.push('  description="请尝试更换关键词或清除筛选条件"');
+        lines.push('/>');
+        return lines.join('\n');
+      }
+
+      // 通用空状态
+      lines.push('<Empty');
+      if (illustrationType !== 'no-content') lines.push(`  illustrationType="${illustrationType}"`);
+      if (buttonLayout !== 'row') lines.push(`  buttonLayout="${buttonLayout}"`);
+      lines.push('  title="空状态标题"');
+      lines.push('  description="这是一段对当前空状态的描述文本"');
+      lines.push('  primaryLabel="一级按钮"');
+      if (buttonLayout === 'row')    lines.push('  secondaryLabel="二级按钮"');
+      if (buttonLayout === 'column') lines.push('  tertiaryLabel="文字按钮"');
+      lines.push('/>');
+      return lines.join('\n');
+    },
+  },
+
+  'full-screen-page': {
+    component: FullScreenPage,
+    tokenMap: FULL_SCREEN_PAGE_TOKEN_MAP,
+    jsxSource: fullScreenPageJsxRaw,
+    previewBgBinding: 'bg',
+
+    /* 预览区：去掉默认 padding，撑满布局给的高度；overflow hidden + 圆角裁边 */
+    getPreviewAreaStyle: () => ({
+      overflow: 'hidden',
+      borderRadius: '8px',
+      padding: 0,
+      alignItems: 'stretch',
+    }),
+    /* scaler 跟随预览区高度拉伸，作为 contained FullScreenPage 的尺寸容器 */
+    getPreviewScalerStyle: () => ({
+      width: '100%',
+      alignSelf: 'stretch',
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+
+    controls: [],
+
+    mapProps: (cv, enums) => {
+      const bg = enums.bg || 'white';
+
+      /* 步骤卡片标题行（与 BasePageFramePattern 的 QACardHeader 对齐） */
+      const StepCardHeader = ({ step, title, hint }) => (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', flexShrink: 0 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <div style={{ width: 20, height: 20, borderRadius: 6, background: '#1C1C23', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+              <span style={{ fontSize: 12, fontWeight: 600, color: '#fff', lineHeight: 1 }}>{step}</span>
+            </div>
+            <span style={{ fontSize: 16, fontWeight: 600, color: '#182230', lineHeight: '22px' }}>{title}</span>
+          </div>
+          {hint && <span style={{ fontSize: 14, color: '#475467', lineHeight: '20px' }}>{hint}</span>}
+        </div>
+      );
+
+      /* 卡片样式：灰底=白底填充，白底=透明+灰描边 */
+      const cardStyle = bg === 'grey'
+        ? { background: '#FFFFFF', borderRadius: '12px', overflow: 'hidden' }
+        : { background: 'transparent', border: '1px solid #E4E7EC', borderRadius: '12px', overflow: 'hidden' };
+
+      const demoContent = (
+        <div style={{ display: 'flex', flex: 1, minHeight: 0, gap: '8px', padding: '16px' }}>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, ...cardStyle }}>
+            <StepCardHeader step="1" title="步骤标题一" hint="辅助信息" />
+          </div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, ...cardStyle }}>
+            <StepCardHeader step="2" title="步骤标题二" />
+          </div>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, ...cardStyle }}>
+            <StepCardHeader step="3" title="步骤标题三" />
+          </div>
+        </div>
+      );
+
+      return {
+        bg,
+        contained: true,
+        title: '创建QA对',
+        onBack: () => {},
+        headerActions: (
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <Button variant="outline-black">保存草稿</Button>
+            <Button variant="primary">发布</Button>
+          </div>
+        ),
+        children: demoContent,
+      };
+    },
+
+    generateUsage: (enums, cv) => {
+      const bg = enums.bg || 'white';
+      const lines = [`import FullScreenPage from './components/FullScreenPage';`, ''];
+      lines.push('<FullScreenPage');
+      if (bg !== 'white') lines.push(`  bg="${bg}"`);
+      lines.push('  title="创建QA对"');
+      lines.push('  onBack={() => handleBack()}');
+      lines.push('  headerActions={');
+      lines.push('    <>');
+      lines.push('      <Button variant="outline-black">保存草稿</Button>');
+      lines.push('      <Button variant="primary">发布</Button>');
+      lines.push('    </>');
+      lines.push('  }');
+      lines.push('>');
+      if (bg === 'grey') {
+        lines.push('  {/* 灰底模式：页面是浅灰底，内部面板必须切换为白卡样式 */}');
+        lines.push('  <div className="flex gap-4 p-6 h-full">');
+        lines.push('    <div className="flex-1 bg-white rounded-xl p-6">主编辑面板</div>');
+        lines.push('    <div className="w-60 bg-white rounded-xl p-6">配置侧栏面板</div>');
+        lines.push('  </div>');
+      } else {
+        lines.push('  {/* 白底模式：页面保持一体化，内部面板用描边样式，不再叠加白卡 */}');
+        lines.push('  <div className="flex gap-4 p-6 h-full">');
+        lines.push('    <div className="flex-1 rounded-xl border border-border-default p-6">基础信息面板</div>');
+        lines.push('    <div className="w-60 rounded-xl border border-border-default p-6">辅助配置面板</div>');
+        lines.push('  </div>');
+      }
+      lines.push('</FullScreenPage>');
+      return lines.join('\n');
+    },
+  },
+};