@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/TagBar.tokens.js

@@ -0,0 +1,75 @@
+/**
+ * TagBar — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：文本 → 容器 → 尺寸 → 引用组件
+ * 搜索 / 业务名 / 标签字 / 整栏 / 头部 / 树项 / 图标底 / 折叠钮 / 尺寸 / 引用组件
+ */
+export const TAGBAR_TOKEN_MAP = {
+  搜索: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '描边色', cssProp: 'box-shadow', token: '--color-border-default', value: 'inset 0 0 0 1px #E4E7EC', semanticRef: 'border-default' },
+    { label: '图标色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '占位色', cssProp: 'color', value: 'rgba(34,39,39,0.6)', state: 'placeholder' },
+    { label: '高度', cssProp: 'height', value: '36px' },
+  ],
+  业务名: [
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '容器底色', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+  ],
+  标签字: [
+    { label: '一级字号', cssProp: 'font-size', token: '--text-sm', value: '14px', state: 'depth-0/1' },
+    { label: '一级行高', cssProp: 'line-height', token: '--leading-5', value: '20px', state: 'depth-0/1' },
+    { label: '三级字号', cssProp: 'font-size', token: '--text-xs', value: '12px', state: 'depth-2' },
+    { label: '三级行高', cssProp: 'line-height', token: '--leading-4', value: '16px', state: 'depth-2' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '悬浮底', cssProp: 'background', value: 'rgba(83, 96, 143, 0.04)', state: 'hover' },
+  ],
+  整栏: [
+    { label: '展开背景', cssProp: 'background', value: 'linear-gradient(270deg, rgb(249,250,251) 37.08%, rgb(255,255,255) 100%)' },
+    { label: '收起背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'collapsed' },
+    { label: '分隔线', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+  ],
+  头部: [
+    { label: '纵向间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '左右内距', cssProp: 'padding-inline', token: '--spacing-5', value: '20px' },
+    { label: '底部内距', cssProp: 'padding-bottom', token: '--spacing-4', value: '16px' },
+  ],
+  树项: [
+    { label: '层级线颜色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '箭头色', cssProp: 'color', value: 'rgba(34,39,39,0.8)' },
+    { label: '二级缩进', cssProp: 'padding-left', value: '24px', state: 'depth-1' },
+    { label: '三级缩进', cssProp: 'padding-left', value: '48px', state: 'depth-2' },
+  ],
+  图标底: [
+    { label: '品牌底', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6' },
+    { label: '蓝色底', cssProp: 'background', token: '--color-blue-50', value: '#ECF6FE' },
+    { label: '青色底', cssProp: 'background', token: '--color-cyan-50', value: '#EAF9FA' },
+    { label: '绿色底', cssProp: 'background', token: '--color-green-50', value: '#F0FDF4' },
+    { label: '橙色底', cssProp: 'background', token: '--color-orange-50', value: '#FFF5EE' },
+    { label: '黄色底', cssProp: 'background', token: '--color-yellow-50', value: '#FEFDEC' },
+    { label: '紫色底', cssProp: 'background', token: '--color-purple-50', value: '#F7EAF7' },
+    { label: '粉色底', cssProp: 'background', token: '--color-pink-50', value: '#FDEDF1' },
+    { label: '中性底', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-avatar', value: '3px' },
+  ],
+  折叠钮: [
+    { label: '尺寸', cssProp: 'width/height', value: '36px' },
+    { label: '图标色', cssProp: 'color', value: 'rgba(34,39,39,0.8)' },
+    { label: '悬浮底', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default', state: 'hover' },
+  ],
+  尺寸: [
+    { label: '展开宽度', cssProp: 'width', value: '240px' },
+    { label: '收起宽度', cssProp: 'width', value: '76px' },
+    { label: '顶部业务高', cssProp: 'height', value: '36px' },
+    { label: '节点高度', cssProp: 'height', value: '32px' },
+    { label: '图标槽宽', cssProp: 'width', value: '16px' },
+    { label: '图标槽高', cssProp: 'height', value: '16px' },
+  ],
+  引用组件: [
+    { label: '标签图标', cssProp: '—', value: 'Icon / user-01-stroked / layers-two-01-stroked / heart-circle-stroked / edit-01-stroked / gift-01-stroked / credit-card-01-stroked / flip-forward-stroked / search-lg-stroked / star-01-stroked / shopping-bag-03-stroked / heart-hand-stroked / globe-01-stroked' },
+    { label: '交互图标', cssProp: '—', value: 'Icon / chevron-up-stroked / chevron-down-stroked / layout-left-stroked / search-lg-stroked' },
+  ],
+};

package/src/_b_end_runtime/components/TagGridPreview.jsx

@@ -0,0 +1,23 @@
+import Tag from './Tag';
+
+const DEFAULT_VARIANTS = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'pink', 'teal', 'grey', 'white', 'ai'];
+
+export default function TagGridPreview({ variant, size, radius, fontWeight, showIcon, iconName, closable, onClose }) {
+  if (variant && variant !== 'brand') {
+    return (
+      <Tag variant={variant} size={size} radius={radius} fontWeight={fontWeight} showIcon={showIcon} iconName={iconName} closable={closable} onClose={onClose}>
+        标签
+      </Tag>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-full flex-col items-center justify-center gap-6">
+      {DEFAULT_VARIANTS.map((v) => (
+        <Tag key={v} variant={v} size={size} radius={radius} fontWeight={fontWeight} showIcon={showIcon} iconName={iconName} closable={closable} onClose={onClose}>
+          标签
+        </Tag>
+      ))}
+    </div>
+  );
+}

package/src/_b_end_runtime/components/TagInput.jsx

@@ -0,0 +1,382 @@
+/**
+ * TagInput — 标签输入框（Tailwind 内联）
+ *
+ * 容器视觉对齐 Figma taginput / Select：36px 白底、8px 圆角、1px 默认描边。
+ * 已选标签、+N 折叠项与 Tooltip 内标签都必须复用平台现有 Tag 组件；
+ * TagInput 只负责容器状态、宽度测量、折叠和删除逻辑。
+ *
+ * @prop {'default'|'error'} [status='default'] — 状态
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {string} [placeholder='请输入'] — 空态占位
+ * @prop {Array<string|{value:string,label:string,variant?:string}>} value — 当前标签（受控）
+ * @prop {Array<string|{value:string,label:string,variant?:string}>} [defaultValue=null] — 非受控初始标签
+ * @prop {(nextTags:Array, removedTag?:object) => void} [onChange=null] — 标签列表变化
+ * @prop {(tag:object) => void} [onRemove=null] — 删除标签回调
+ * @prop {string|Array<string|object>|object} [aiSuggestion] — 单条 AI 推荐（可为单个标签或标签集合）
+ * @prop {Array<string|Array<string|object>|object>} [aiSuggestions] — 多条 AI 推荐
+ * @prop {(suggestion:Array) => void} [onAdoptSuggestion=null] — 采纳 AI 推荐回调
+ * @prop {() => void} [onRefreshAiSuggestions=null] — 刷新 AI 推荐回调
+ * @prop {boolean} [closable=true] — 标签是否可关闭
+ * @prop {'brand'|'red'|'orange'|'yellow'|'green'|'cyan'|'blue'|'purple'|'pink'|'teal'|'grey'|'white'} [tagVariant='grey'] — 默认 Tag 颜色
+ * @prop {'s'|'m'|'l'} [tagSize='m'] — Tag 尺寸
+ * @prop {string} [className=''] — 类名
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Tag from './Tag';
+import { DEFAULT_TAG_RADIUS, DEFAULT_TAG_SIZE, DEFAULT_TAG_VARIANT } from './tagShared';
+import Tooltip from './Tooltip';
+import AiSuggestionPanel, {
+  AiRefreshButton,
+  AI_REFRESH_VISIBLE_CLASS,
+  rotateList,
+} from './AiSuggestionShared';
+
+/* ── 根容器基础样式 ── */
+const BASE = [
+  'tfds-tag-input',
+  'group relative inline-flex w-full min-w-0 max-w-full items-center',
+  'border border-solid rounded-md',
+  'transition-colors duration-150',
+  'outline-none [font-family:inherit]',
+].join(' ');
+
+/* ── 状态 → 容器背景 / 边框 ── */
+const STATUS_CLASS = {
+  default: [
+    'bg-surface border-border',
+    'hover:border-blueGrey-400',
+    'focus-within:border-primary',
+    'focus-within:hover:border-primary',
+  ].join(' '),
+  error: [
+    'bg-red-50 border-border',
+    'hover:bg-red-100',
+    'focus-within:border-red-500',
+    'focus-within:hover:border-red-500 focus-within:hover:bg-red-50',
+  ].join(' '),
+};
+
+/* ── 固定 MD 尺寸 → 高度 / 内边距 / 字号 ── */
+const SIZE_CLASS = 'min-h-9 pl-3 pr-2 py-[6px] text-sm';
+
+/* ── 禁用态 ── */
+const DISABLED_CLASS = 'bg-disabled border-border cursor-not-allowed opacity-60';
+
+/* ── 内容行 / 输入占位 ── */
+const CONTENT_ROW = 'flex min-w-0 flex-1 items-center gap-1 overflow-hidden';
+const PLACEHOLDER = 'min-w-0 truncate text-sm leading-5 text-foreground-muted';
+const MEASURE_ROW = 'pointer-events-none invisible absolute left-0 top-0 flex items-center gap-1 whitespace-nowrap';
+const WRAPPER_BASE = 'inline-flex max-w-full flex-col items-start gap-1 [font-family:inherit]';
+const SUGGESTION_ACTION_ROW = 'flex w-full justify-end';
+
+const TAGINPUT_LOCAL_FALLBACK_SUGGESTIONS = [
+  ['改签', '门店变更'],
+  ['退款', '售后处理'],
+  ['物流异常', '催办'],
+];
+
+function normalizeTag(item, index, tagVariant) {
+  if (item && typeof item === 'object') {
+    const label = String(item.label ?? item.value ?? '');
+    const fallbackValue = `${label || 'tag'}-${index}`;
+    return {
+      ...item,
+      value: String(item.value ?? fallbackValue),
+      label,
+      variant: item.variant || tagVariant,
+      dedupeKey: String(item.value ?? label).trim().toLowerCase(),
+    };
+  }
+  const label = String(item ?? '');
+  return {
+    value: `${label || 'tag'}-${index}`,
+    label,
+    variant: tagVariant,
+    dedupeKey: label.trim().toLowerCase(),
+  };
+}
+
+function normalizeList(raw, tagVariant) {
+  return (Array.isArray(raw) ? raw : [])
+    .map((item, index) => normalizeTag(item, index, tagVariant))
+    .filter((tag) => tag.label.length > 0);
+}
+
+function getVisibleCount(tagWidths, moreWidth, availableWidth) {
+  if (tagWidths.length === 0) return 0;
+  const gap = 4;
+  let used = 0;
+  for (let i = 0; i < tagWidths.length; i += 1) {
+    const remaining = tagWidths.length - i - 1;
+    const reserveMore = remaining > 0 ? moreWidth + gap : 0;
+    const nextUsed = used + tagWidths[i] + (i > 0 ? gap : 0);
+    if (nextUsed + reserveMore <= availableWidth) {
+      used = nextUsed;
+      continue;
+    }
+    return Math.max(0, i);
+  }
+  return tagWidths.length;
+}
+
+function normalizeTagSuggestion(item, index, tagVariant) {
+  let tags = [];
+  if (Array.isArray(item)) {
+    tags = normalizeList(item, tagVariant);
+  } else if (item && typeof item === 'object' && Array.isArray(item.tags)) {
+    tags = normalizeList(item.tags, tagVariant);
+  } else if (item != null) {
+    tags = normalizeList([item], tagVariant);
+  }
+
+  if (tags.length === 0) return null;
+  return {
+    id: `tag-input-ai-suggestion-${index}`,
+    label: tags.map((tag) => tag.label).join(' / '),
+    tags,
+  };
+}
+
+function buildTagSuggestionGroups(aiSuggestion, aiSuggestions, tagVariant) {
+  const source = Array.isArray(aiSuggestions) && aiSuggestions.length > 0
+    ? aiSuggestions
+    : (aiSuggestion != null ? [aiSuggestion] : []);
+  const baseGroup = source
+    .map((item, index) => normalizeTagSuggestion(item, index, tagVariant))
+    .filter(Boolean);
+  if (baseGroup.length === 0) return [];
+  const groups = [];
+  const serialized = new Set();
+
+  const pushGroup = (group) => {
+    if (!Array.isArray(group) || group.length === 0) return;
+    const key = JSON.stringify(group.map((item) => item.label));
+    if (serialized.has(key)) return;
+    serialized.add(key);
+    groups.push(group);
+  };
+
+  pushGroup(baseGroup);
+
+  if (baseGroup.length > 1) {
+    for (let offset = 1; offset < baseGroup.length; offset += 1) {
+      pushGroup(rotateList(baseGroup, offset));
+    }
+  }
+
+  const fallbackGroup = TAGINPUT_LOCAL_FALLBACK_SUGGESTIONS
+    .map((item, index) => normalizeTagSuggestion(item, `fallback-${index}`, tagVariant))
+    .filter(Boolean);
+  pushGroup(fallbackGroup);
+
+  return groups;
+}
+
+function mergeSuggestedTags(currentTags, suggestedTags) {
+  const merged = [...currentTags];
+  const existingKeys = new Set(
+    currentTags.map((tag) => String(tag.dedupeKey || tag.value || tag.label).trim().toLowerCase())
+  );
+
+  suggestedTags.forEach((tag) => {
+    const key = String(tag.dedupeKey || tag.value || tag.label).trim().toLowerCase();
+    if (!key || existingKeys.has(key)) return;
+    existingKeys.add(key);
+    merged.push(tag);
+  });
+
+  return merged;
+}
+
+export default function TagInput({
+  size: _size = 'md',
+  status = 'default',
+  disabled = false,
+  placeholder = '请输入',
+  value,
+  defaultValue = null,
+  onChange = null,
+  onRemove = null,
+  onAdoptSuggestion = null,
+  onRefreshAiSuggestions = null,
+  aiSuggestion,
+  aiSuggestions,
+  closable = true,
+  tagVariant = DEFAULT_TAG_VARIANT,
+  tagSize = DEFAULT_TAG_SIZE,
+  className = '',
+  ...rest
+}) {
+  const rootRef = useRef(null);
+  const measureRef = useRef(null);
+  const moreMeasureRef = useRef(null);
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(() => normalizeList(defaultValue, tagVariant));
+  const [visibleCount, setVisibleCount] = useState(null);
+  const [isSuggestionDismissed, setIsSuggestionDismissed] = useState(false);
+  const [suggestionIndex, setSuggestionIndex] = useState(0);
+
+  useEffect(() => {
+    if (!isControlled) setInnerValue(normalizeList(defaultValue, tagVariant));
+  }, [defaultValue, isControlled, tagVariant]);
+
+  useEffect(() => {
+    setIsSuggestionDismissed(false);
+    setSuggestionIndex(0);
+  }, [aiSuggestion, aiSuggestions]);
+
+  const tags = useMemo(
+    () => (isControlled ? normalizeList(value, tagVariant) : innerValue),
+    [innerValue, isControlled, tagVariant, value],
+  );
+  const suggestionGroups = useMemo(
+    () => buildTagSuggestionGroups(aiSuggestion, aiSuggestions, tagVariant),
+    [aiSuggestion, aiSuggestions, tagVariant]
+  );
+  const suggestionList = suggestionGroups[suggestionIndex] || suggestionGroups[0] || [];
+  const canRefreshLocally = suggestionGroups.length > 1;
+  const showSuggestion = !disabled && !isSuggestionDismissed && suggestionList.length > 0;
+  const showAiRefresh = !disabled && suggestionList.length > 0
+    && (canRefreshLocally || typeof onRefreshAiSuggestions === 'function');
+
+  const measure = useCallback(() => {
+    const root = rootRef.current;
+    const row = measureRef.current;
+    if (!root || !row) return;
+    const availableWidth = Math.max(0, root.clientWidth - 20);
+    const tagWidths = Array.from(row.querySelectorAll('[data-measure-tag]'))
+      .map((node) => Math.ceil(node.getBoundingClientRect().width));
+    const moreWidth = Math.ceil(moreMeasureRef.current?.getBoundingClientRect().width || 34);
+    setVisibleCount(getVisibleCount(tagWidths, moreWidth, availableWidth));
+  }, []);
+
+  useLayoutEffect(() => {
+    measure();
+  }, [measure, tags, tagSize, status]);
+
+  useEffect(() => {
+    if (!rootRef.current || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, [measure]);
+
+  const commit = useCallback((next, removedTag) => {
+    if (!isControlled) setInnerValue(next);
+    onChange?.(next, removedTag);
+  }, [isControlled, onChange]);
+
+  const handleRemove = useCallback((tag) => {
+    if (disabled) return;
+    const next = tags.filter((item) => item.value !== tag.value);
+    commit(next, tag);
+    onRemove?.(tag);
+  }, [commit, disabled, onRemove, tags]);
+
+  const handleAdoptSuggestion = useCallback((suggestion) => {
+    if (!suggestion?.tags || suggestion.tags.length === 0 || disabled) return;
+    const next = mergeSuggestedTags(tags, suggestion.tags);
+    commit(next);
+    onAdoptSuggestion?.(suggestion.tags);
+    setIsSuggestionDismissed(true);
+  }, [commit, disabled, onAdoptSuggestion, tags]);
+
+  const handleRefreshAiSuggestions = useCallback(() => {
+    if (canRefreshLocally) {
+      setSuggestionIndex((prev) => (prev + 1) % suggestionGroups.length);
+    }
+    onRefreshAiSuggestions?.();
+    setIsSuggestionDismissed(false);
+  }, [canRefreshLocally, onRefreshAiSuggestions, suggestionGroups.length]);
+
+  const safeVisibleCount = visibleCount == null ? tags.length : Math.min(visibleCount, tags.length);
+  const visibleTags = tags.slice(0, safeVisibleCount);
+  const hiddenTags = tags.slice(safeVisibleCount);
+
+  const rootCls = [
+    BASE,
+    disabled ? DISABLED_CLASS : (STATUS_CLASS[status] || STATUS_CLASS.default),
+    SIZE_CLASS,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const hiddenContent = hiddenTags.length > 0 ? (
+    <div className="flex max-w-[248px] flex-wrap gap-1">
+      {hiddenTags.map((tag) => (
+        <Tag key={tag.value} variant={tag.variant || tagVariant} size={tagSize} radius={DEFAULT_TAG_RADIUS}>
+          {tag.label}
+        </Tag>
+      ))}
+    </div>
+  ) : null;
+
+  const renderTag = (tag, tagProps = {}) => (
+    <Tag
+      key={tag.value}
+      variant={tag.variant || tagVariant}
+      size={tagSize}
+      radius={DEFAULT_TAG_RADIUS}
+      {...tagProps}
+    >
+      {tag.label}
+    </Tag>
+  );
+
+  return (
+    <div className={WRAPPER_BASE}>
+      <div ref={rootRef} className={rootCls} aria-disabled={disabled || undefined} data-tfds-component="TagInput" {...rest}>
+        <div className={CONTENT_ROW}>
+          {tags.length === 0 ? (
+            <span className={PLACEHOLDER}>{placeholder}</span>
+          ) : (
+            <>
+              {visibleTags.map((tag) => (
+                renderTag(tag, {
+                  closable: closable && !disabled,
+                  onClose: closable && !disabled ? () => handleRemove(tag) : undefined,
+                })
+              ))}
+              {hiddenTags.length > 0 ? (
+                <Tooltip
+                  content={hiddenContent}
+                  tone="light"
+                  placement="top"
+                  triggerClassName="inline-flex shrink-0"
+                  className="!max-w-[280px]"
+                >
+                  <Tag variant={tagVariant} size={tagSize} radius={DEFAULT_TAG_RADIUS}>+{hiddenTags.length}</Tag>
+                </Tooltip>
+              ) : null}
+            </>
+          )}
+        </div>
+
+        <div ref={measureRef} className={MEASURE_ROW} aria-hidden>
+          {tags.map((tag) => (
+            <span key={tag.value} data-measure-tag>
+              {renderTag(tag, { closable: closable && !disabled })}
+            </span>
+          ))}
+          <span ref={moreMeasureRef}>
+            <Tag variant={tagVariant} size={tagSize} radius={DEFAULT_TAG_RADIUS}>+99</Tag>
+          </span>
+        </div>
+      </div>
+      {showAiRefresh ? (
+        <div className={SUGGESTION_ACTION_ROW}>
+          <AiRefreshButton onClick={handleRefreshAiSuggestions} className={AI_REFRESH_VISIBLE_CLASS} />
+        </div>
+      ) : null}
+      {showSuggestion ? (
+        <AiSuggestionPanel
+          suggestions={suggestionList}
+          onSelect={handleAdoptSuggestion}
+          getSuggestionKey={(suggestion) => suggestion.id}
+          getSuggestionLabel={(suggestion) => suggestion.label}
+          getSuggestionAriaLabel={(suggestion, index) => `采纳 AI 推荐标签 ${index + 1}：${suggestion.label}`}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/_b_end_runtime/components/TagInput.tokens.js

@@ -0,0 +1,52 @@
+/**
+ * TagInput — TOKEN_MAP（供平台属性面板展示）
+ */
+export const TAGINPUT_TOKEN_MAP = {
+  base: [],
+  占位符: [
+    { label: '颜色', cssProp: 'color', token: '--text-tertiary', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+  ],
+  折叠项: [
+    { label: '组件引用', cssProp: '—', value: 'Tag' },
+    { label: '颜色', cssProp: 'variant', value: '继承 tagVariant' },
+    { label: '尺寸', cssProp: 'size', value: '继承 tagSize' },
+    { label: '圆角', cssProp: 'radius', value: 'md' },
+    { label: '内容', cssProp: 'children', value: '+N' },
+  ],
+  容器: [
+    { label: '默认宽度', cssProp: 'width', token: '--size-input-width', value: '300px' },
+    { label: '背景色', cssProp: 'background', token: '--bg-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--border-default', value: 'rgba(45,66,107,0.12)', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '标签间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '聚焦边框', cssProp: 'border-color', token: '--status-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'focus' },
+    { label: '错态背景', cssProp: 'background', token: '--color-red-50', value: '#FEF2F1', semanticRef: 'status-danger', state: 'error' },
+    { label: '错态聚焦', cssProp: 'border-color', token: '--color-red-500', value: '#F74331', semanticRef: 'status-danger', state: 'error+focus' },
+    { label: '禁用背景', cssProp: 'background', token: '--bg-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  sizes: {
+    sm: [
+      { label: '最小高', cssProp: 'min-height', token: '--size-control-sm', value: '24px' },
+      { label: '横内距', cssProp: 'padding-inline', token: '--spacing-2', value: '8px' },
+      { label: '纵内距', cssProp: 'padding-block', value: '2px' },
+    ],
+    md: [
+      { label: '最小高', cssProp: 'min-height', token: '--size-control-md', value: '36px' },
+      { label: '左内距', cssProp: 'padding-left', token: '--spacing-3', value: '12px' },
+      { label: '右内距', cssProp: 'padding-right', token: '--spacing-2', value: '8px' },
+      { label: '纵内距', cssProp: 'padding-block', value: '6px' },
+    ],
+  },
+  引用组件: [
+    { label: '可见标签', cssProp: '—', value: 'Tag variant=tagVariant size=tagSize radius=md' },
+    { label: '折叠数量', cssProp: '—', value: 'Tag variant=tagVariant size=tagSize radius=md children="+N"' },
+    { label: '浮层标签', cssProp: '—', value: 'Tag variant=tagVariant size=tagSize radius=md' },
+    { label: '浮窗', cssProp: '—', value: 'Tooltip tone=light placement=top，仅 +N 更多标签场景使用' },
+    { label: '浮窗背景', cssProp: 'background', token: '--bg-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '浮窗文字', cssProp: 'color', token: '--text-primary', value: '#182230', semanticRef: 'text-primary' },
+  ],
+};