@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/Tabs.jsx

@@ -0,0 +1,149 @@
+/**
+ * Tabs — 同页内多块内容的视图切换
+ *
+ * **何时用**：详情子页签、卡片内分区、筛选维度切换（2～6 项为宜）；不改变整站路由的「面板级」导航。
+ * **不用**：执行保存/取消等动作 → `Button`；单个表单字段从枚举选题 → `Select` / `Radio`；整站一级模块 → 侧栏/路由。
+ *
+ * **npm / AI 硬约束**：凡「点选切换多块互斥面板」**必须**用本组件；禁止一排 `Button` 或 `Tag` 冒充 Tabs。「分段器」= **`variant="segment"`**（灰轨白块），**不是** `Tag`。卡片内小模块切换、主工作区顶部**布局级**切换 → **默认优先** `variant="segment"`；详情子页签感 → `line`；强调块级 → `button`；顶导/浮层胶囊 → `pill`。
+ *
+ * @prop {'line'|'button'|'pill'|'segment'} [variant='line'] — line=页内主导航下划线；button/pill/segment=工具区或表单切换；segment=分段器（灰底容器+白选中块）
+ * @prop {'sm'|'md'|'lg'} [size='sm'] — 尺寸；内容展示区默认 SM，仅平台级顶部 header / 页面级导航可按场景使用 MD/LG
+ * @prop {Array} [items=null] — 标签项列表（每项含 label，可选 icon）
+ * @prop {number} [activeIndex=0] — 受控：当前选中索引
+ * @prop {number} [defaultIndex=0] — 非受控初始索引
+ * @prop {function} [onChange=null] — `(index) => void` 切换回调
+ * @prop {string} [className=''] — 根节点类名
+ */
+import { useState } from 'react';
+
+/* ── 容器样式 ── */
+const CONTAINER_BASE = 'inline-flex items-center relative w-fit';
+
+const CONTAINER_VARIANT = {
+  line:    'gap-2 bg-transparent border-b border-b-border',
+  button:  'gap-2 bg-transparent',
+  // pill（胶囊）SM 默认与 segment（分段器）一致：整体高 36px、四周内距 4px，仅 UI 样式不同
+  // ring-inset 不占空间，避免描边撑高
+  pill:    'gap-1 p-1 bg-white/50 ring-1 ring-white ring-inset rounded-full',
+  // segment（分段器）容器内距固定 4px：白底块与灰轨四周留白一致
+  segment: 'gap-1 p-1 bg-fill rounded-md',
+};
+
+/* ── 标签项基础样式（所有变体共用的结构属性） ── */
+const ITEM_BASE = [
+  'inline-flex items-center justify-center relative',
+  'border-none cursor-pointer select-none',
+  '[font-family:inherit]',
+  'leading-[20px] whitespace-nowrap',
+  'gap-2',
+  '[outline:2px_solid_transparent] outline-offset-2',
+  '[transition:color_200ms_ease,background_200ms_ease,font-weight_200ms_ease,box-shadow_200ms_ease]',
+].join(' ');
+
+/* ── line 变体共用的 ::after 指示器 ── */
+const LINE_AFTER = "after:content-[''] after:absolute after:-bottom-px after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:[transition:transform_250ms_ease]";
+
+/* ── 标签项变体样式（default = 未选中，active = 选中） ── */
+const ITEM_VARIANT = {
+  line: {
+    default: `text-blueGrey-600 [font-weight:var(--font-normal)] hover:text-blueGrey-700 active:text-blueGrey-800 focus-visible:outline-brand-200 ${LINE_AFTER} after:scale-x-0`,
+    active:  `text-blueGrey-900 [font-weight:var(--font-semibold)] hover:text-blueGrey-900 focus-visible:outline-brand-200 ${LINE_AFTER} after:scale-x-100`,
+  },
+  button: {
+    default: 'text-blueGrey-600 [font-weight:var(--font-normal)] rounded-md hover:bg-fill hover:text-blueGrey-700 active:bg-blueGrey-200 focus-visible:outline-brand-200',
+    active:  'bg-brand-50 text-brand-700 [font-weight:var(--font-semibold)] rounded-md hover:bg-brand-100 active:bg-brand-200 focus-visible:outline-brand-200',
+  },
+  pill: {
+    default: 'text-blueGrey-700 [font-weight:var(--font-normal)] rounded-full hover:bg-fill active:bg-blueGrey-300 focus-visible:outline-blueGrey-400',
+    active:  'bg-grey-950 text-white [font-weight:var(--font-semibold)] rounded-full hover:bg-grey-900 active:bg-grey-800 focus-visible:outline-grey-400',
+  },
+  segment: {
+    default: 'text-blueGrey-600 [font-weight:var(--font-normal)] rounded-md hover:text-blueGrey-700 hover:bg-fill active:bg-white/70 focus-visible:outline-blueGrey-400',
+    active:  'bg-white text-blueGrey-900 [font-weight:var(--font-semibold)] rounded-md hover:bg-white active:bg-blueGrey-50 focus-visible:outline-blueGrey-400',
+  },
+};
+
+/* ── 标签项尺寸样式（variant × size → height + padding + font-size） ── */
+const ITEM_SIZE = {
+  line: {
+    sm: 'h-[38px] px-3 text-xs',
+    md: 'h-[46px] px-3 text-sm',
+    lg: 'h-[54px] px-4 text-sm',
+  },
+  button: {
+    sm: 'h-[32px] px-3 text-xs',
+    md: 'h-[36px] px-3 text-sm',
+    lg: 'h-[40px] px-4 text-sm',
+  },
+  pill: {
+    sm: 'h-[28px] px-4 text-xs',
+    md: 'h-[32px] px-4 text-sm',
+    lg: 'h-[36px] px-5 text-sm',
+  },
+  segment: {
+    // SM：整体高度 36px（容器 4px ×2 + item 28px）
+    sm: 'h-[28px] px-3 text-xs',
+    md: 'h-[36px] px-3 text-sm',
+    lg: 'h-[40px] px-4 text-sm',
+  },
+};
+
+/* ── 图标插槽 ── */
+const ICON_CLASS = 'flex items-center justify-center shrink-0 w-4 h-4';
+
+export default function Tabs({
+  variant = 'line',
+  size = 'sm',
+  items = null,
+  activeIndex,
+  defaultIndex = 0,
+  onChange,
+  className = '',
+  ...rest
+}) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const isControlled = activeIndex !== undefined;
+  const currentIndex = isControlled ? (activeIndex ?? 0) : internalIndex;
+
+  const handleClick = (index) => {
+    if (!isControlled) setInternalIndex(index);
+    onChange?.(index);
+  };
+
+  const containerCls = [
+    CONTAINER_BASE,
+    CONTAINER_VARIANT[variant],
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={[`tfds-tabs`, containerCls].filter(Boolean).join(' ')} role="tablist" {...rest} data-tfds-component="Tabs">
+      {(items ?? []).map((item, index) => {
+        const isActive = index === currentIndex;
+        const itemCls = [
+          ITEM_BASE,
+          ITEM_VARIANT[variant][isActive ? 'active' : 'default'],
+          ITEM_SIZE[variant][size],
+        ].join(' ');
+        const itemStyle = {
+          fontWeight: isActive ? 'var(--font-semibold)' : 'var(--font-normal)',
+        };
+
+        return (
+          <button
+            key={index}
+            className={itemCls}
+            style={itemStyle}
+            role="tab"
+            aria-selected={isActive}
+            tabIndex={isActive ? 0 : -1}
+            onClick={() => handleClick(index)}
+          >
+            {item.icon && <span className={ICON_CLASS}>{item.icon}</span>}
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+/**
+ * Tabs — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Tabs.jsx
+ */
+export const TABS_TOKEN_MAP = {
+  base: [
+    { label: '默认尺寸', cssProp: 'size', value: 'SM（内容区 / 卡片内 / 表单分段 / 筛选维度默认）' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+    { label: '图标尺寸', cssProp: 'width/height', value: '16px' },
+    { label: '图标间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  variants: {
+    'line': [
+      { label: '默认文字', cssProp: 'color', token: '--color-blueGrey-600', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '悬浮文字', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467', state: 'hover', semanticRef: 'text-secondary' },
+      { label: '按下文字', cssProp: 'color', token: '--color-blueGrey-800', value: '#344054', state: 'active' },
+      { label: '选中文字', cssProp: 'color', token: '--color-blueGrey-900', value: '#182230', semanticRef: 'text-primary' },
+      { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 style fontWeight: var(--font-semibold)，class 兜底 [font-weight:var(--font-semibold)]）' },
+      { label: '选中标线', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+      { label: '指示高度', cssProp: 'height', value: '3px' },
+      { label: '底线颜色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+      { label: '标签间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    'button': [
+      { label: '默认文字', cssProp: 'color', token: '--color-blueGrey-600', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '悬浮文字', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467', state: 'hover' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'hover', semanticRef: 'fill-default' },
+      { label: '按下背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'active' },
+      { label: '选中背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg' },
+      { label: '选悬背景', cssProp: 'background', token: '--color-brand-100', value: '#CFF3EA', state: 'hover' },
+      { label: '选按背景', cssProp: 'background', token: '--color-brand-200', value: '#A8E8D7', state: 'active' },
+      { label: '选中文字', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', semanticRef: 'status-primary' },
+      { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 style fontWeight: var(--font-semibold)，class 兜底 [font-weight:var(--font-semibold)]）' },
+      { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+      { label: '标签间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    'pill': [
+      { label: '容器背景', cssProp: 'background', value: 'rgba(255, 255, 255, 0.5)' },
+      { label: '容器内描边', cssProp: 'box-shadow (inset, ring-inset)', token: '--color-white', value: '#FFFFFF', semanticRef: '内描边不占布局空间，避免撑高 2px' },
+      { label: '容器圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' },
+      { label: '默认文字', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467', semanticRef: 'text-secondary' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'hover', semanticRef: 'fill-default' },
+      { label: '按下背景', cssProp: 'background', token: '--color-blueGrey-300', value: '#E4E7EC', state: 'active' },
+      { label: '选中背景', cssProp: 'background', token: '--color-grey-950', value: '#111116' },
+      { label: '选悬背景', cssProp: 'background', token: '--color-grey-900', value: '#1C1C23', state: 'hover' },
+      { label: '选按背景', cssProp: 'background', token: '--color-grey-800', value: '#2E2F38', state: 'active' },
+      { label: '选中文字', cssProp: 'color', token: '--color-white', value: '#FFFFFF', semanticRef: 'text-inverse' },
+      { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 style fontWeight: var(--font-semibold)，class 兜底 [font-weight:var(--font-semibold)]）' },
+      { label: '标签间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-grey-400', value: '#878892', state: 'focus' },
+    ],
+    'segment': [
+      { label: '容器背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+      { label: '容器圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+      { label: '容器内距', cssProp: 'padding', token: '--spacing-1', value: '4px（SM：整体 36px = item 28px + 上下各 4px）' },
+      { label: '默认文字', cssProp: 'color', token: '--color-blueGrey-600', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '悬浮文字', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467', state: 'hover' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'hover', semanticRef: 'fill-default' },
+      { label: '按下背景', cssProp: 'background', value: 'rgba(255, 255, 255, 0.7)', state: 'active' },
+      { label: '选中背景', cssProp: 'background', token: '--color-white', value: '#FFFFFF' },
+      { label: '选中文字', cssProp: 'color', token: '--color-blueGrey-900', value: '#182230', semanticRef: 'text-primary' },
+      { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 style fontWeight: var(--font-semibold)，class 兜底 [font-weight:var(--font-semibold)]）' },
+      { label: '选按背景', cssProp: 'background', token: '--color-blueGrey-50', value: '#FCFCFD', state: 'active' },
+      { label: '标签圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+      { label: '标签间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+      { label: '聚焦环', cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+    ],
+  },
+  sizes: {
+    sm: [
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px', variants: ['line', 'button', 'segment'] },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', variants: ['pill'] },
+      { label: '组件高度', cssProp: 'height', value: '38px', variants: ['line'] },
+      { label: '组件高度', cssProp: 'height', value: '32px', variants: ['button'] },
+      { label: '组件整体高度', cssProp: 'height', value: '36px（分段器：item 28px + 容器内距 4px×2）', variants: ['segment'] },
+      { label: '组件整体高度', cssProp: 'height (padding 4+28+4, ring-inset 不占空间)', value: '36px', variants: ['pill'] },
+      { label: '选项高度', cssProp: 'height (item)', value: '28px（与分段器一致）', variants: ['pill'] },
+    ],
+    md: [
+      { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px', variants: ['line', 'button', 'segment'] },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', variants: ['pill'] },
+      { label: '组件高度', cssProp: 'height', value: '46px', variants: ['line'] },
+      { label: '组件高度', cssProp: 'height', value: '36px', variants: ['button', 'segment'] },
+      { label: '组件高度', cssProp: 'height (padding 6+32+6, ring-inset 不占空间)', value: '44px', variants: ['pill'] },
+      { label: '选项高度', cssProp: 'height (item)', value: '32px', variants: ['pill'] },
+    ],
+    lg: [
+      { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', variants: ['line', 'button', 'segment'] },
+      { label: '内距', cssProp: 'padding-inline', token: '--spacing-5', value: '20px', variants: ['pill'] },
+      { label: '组件高度', cssProp: 'height', value: '54px', variants: ['line'] },
+      { label: '组件高度', cssProp: 'height', value: '40px', variants: ['button', 'segment'] },
+      { label: '组件高度', cssProp: 'height (padding 6+36+6, ring-inset 不占空间)', value: '48px', variants: ['pill'] },
+      { label: '选项高度', cssProp: 'height (item)', value: '36px', variants: ['pill'] },
+    ],
+  },
+};

package/src/_b_end_runtime/components/Tag.jsx

@@ -0,0 +1,199 @@
+/**
+ * Tag — 标签组件（Tailwind 内联）
+ * @prop {'brand'|'red'|'orange'|'yellow'|'green'|'cyan'|'blue'|'purple'|'pink'|'teal'|'grey'|'white'|'ai'} [variant='brand'] — 颜色变体
+ * @prop {'s'|'m'|'l'} [size='m'] — 尺寸档位
+ * @prop {'md'|'square'|'full'} [radius='md'] — 圆角样式
+ * @prop {'regular'|'bold'} [fontWeight='bold'] — 字体粗细
+ * @prop {boolean} [showIcon=false] — 是否显示左侧图标
+ * @prop {string} [iconName='tag-01-stroked'] — 图标名称
+ * @prop {boolean} [closable=false] — 是否显示关闭按钮
+ * @prop {function|null} [onClose=null] — 关闭回调
+ * @prop {string} [className=''] — 附加类名
+ *
+ * 白色标签用于业务卡片、筛选标签等中性场景；
+ * `square` 圆角使用 3px，和 Avatar 方形 / Card 内置标签保持同一套细圆角语言。
+ */
+
+import Icon from './Icon';
+
+/* ── 基础样式（所有变体 / 尺寸共用） ── */
+const BASE = [
+  'inline-flex items-center justify-center',
+  '[font-family:inherit]',
+  'cursor-default select-none',
+  'transition-all duration-150 leading-none whitespace-nowrap',
+].join(' ');
+
+/* ── 变体 → Tailwind 类名（按色相排序） ── */
+const VARIANT_CLASS = {
+  red: [
+    'bg-red-50 text-red-600',
+  ].join(' '),
+  orange: [
+    'bg-orange-50 text-orange-600',
+  ].join(' '),
+  yellow: [
+    'bg-yellow-100 text-yellow-700',
+  ].join(' '),
+  green: [
+    'bg-green-50 text-green-600',
+  ].join(' '),
+  cyan: [
+    'bg-cyan-50 text-cyan-600',
+  ].join(' '),
+  blue: [
+    'bg-blue-50 text-blue-600',
+  ].join(' '),
+  purple: [
+    'bg-purple-50 text-purple-600',
+  ].join(' '),
+  pink: [
+    'bg-pink-50 text-pink-600',
+  ].join(' '),
+  teal: [
+    'bg-brand-50 text-brand-800',
+  ].join(' '),
+  grey: [
+    'bg-fill text-blueGrey-700',
+  ].join(' '),
+  white: [
+    'bg-white text-foreground border border-border-default',
+  ].join(' '),
+  brand: [
+    'bg-brand-50 text-brand-500',
+  ].join(' '),
+  ai: [
+    'text-brand-500',
+  ].join(' '),
+};
+
+/* ── 尺寸 → 间距配置（参考 Figma 截图） ── */
+const SIZE_CONFIG = {
+  s: {
+    height: 'h-[16px]',
+    fontSize: 'text-xs',
+    paddingLeft: 'pl-1',
+    paddingRight: 'pr-1',
+    iconToTextGap: '[&>.tag-icon]:mr-1',
+    textToCloseGap: '[&>.tag-text]:mr-1',
+  },
+  m: {
+    height: 'h-[20px]',
+    fontSize: 'text-xs',
+    paddingLeft: 'pl-2',
+    paddingRight: 'pr-2',
+    iconToTextGap: '[&>.tag-icon]:mr-1',
+    textToCloseGap: '[&>.tag-text]:mr-1',
+  },
+  l: {
+    height: 'h-[24px]',
+    fontSize: 'text-xs',
+    paddingLeft: 'pl-2',
+    paddingRight: 'pr-2',
+    iconToTextGap: '[&>.tag-icon]:mr-1',
+    textToCloseGap: '[&>.tag-text]:mr-1',
+  },
+};
+
+/* ── 圆角 → Tailwind 类名 ── */
+const RADIUS_CLASS = {
+  md: 'rounded-md',
+  square: 'rounded-avatar',
+  full: 'rounded-full',
+};
+
+const FONT_WEIGHT_CLASS = {
+  regular: '[font-weight:400]',
+  bold: '[font-weight:var(--font-bold)]',
+};
+
+const CLOSE_ICON = (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+);
+
+export default function Tag({
+  variant = 'brand',
+  size = 'm',
+  radius = 'md',
+  fontWeight = 'bold',
+  showIcon = false,
+  iconName = 'tag-01-stroked',
+  closable = false,
+  onClose,
+  className = '',
+  style,
+  children,
+  ...rest
+}) {
+  const config = SIZE_CONFIG[size];
+  const aiStyle = variant === 'ai'
+    ? {
+        background: 'var(--bg-chat-outgoing-ai)',
+      }
+    : undefined;
+  const mergedStyle = {
+    ...(aiStyle || null),
+    ...(style || null),
+  };
+  
+  const cls = [
+    BASE,
+    VARIANT_CLASS[variant],
+    config.height,
+    config.fontSize,
+    config.paddingLeft,
+    config.paddingRight,
+    RADIUS_CLASS[radius],
+    showIcon ? config.iconToTextGap : '',
+    closable ? config.textToCloseGap : '',
+    className,
+  ].filter(Boolean).join(' ');
+  const textClassName = [
+    'tag-text whitespace-nowrap',
+    FONT_WEIGHT_CLASS[fontWeight] || FONT_WEIGHT_CLASS.bold,
+  ].join(' ');
+
+  const handleClose = (e) => {
+    e.stopPropagation();
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const iconSize = 'xs';
+
+  return (
+    <span className={[`tfds-tag`, cls].filter(Boolean).join(' ')} style={mergedStyle} {...rest} data-tfds-component="Tag">
+      {showIcon && (
+        <span className="tag-icon inline-flex items-center justify-center">
+          <Icon name={iconName} size={iconSize} />
+        </span>
+      )}
+      <span
+        className={textClassName}
+        style={variant === 'ai'
+          ? {
+              background: 'var(--gradient-ai-fill-text)',
+              WebkitBackgroundClip: 'text',
+              backgroundClip: 'text',
+              color: 'transparent',
+            }
+          : undefined}
+      >
+        {children}
+      </span>
+      {closable && (
+        <button
+          type="button"
+          className="inline-flex items-center justify-center"
+          onClick={handleClose}
+          aria-label="关闭"
+        >
+          {CLOSE_ICON}
+        </button>
+      )}
+    </span>
+  );
+}

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

@@ -0,0 +1,171 @@
+/**
+ * Tag — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Tag.jsx
+ * 
+ * 变体排序（按色相）：
+ * - 暖色调：red → orange → yellow
+ * - 冷色调：green → cyan → blue → purple → pink → teal
+ * - 中性色：grey → white
+ * - 品牌色：brand（与 teal 相同）
+ * - AI：ai
+ * 
+ * 颜色映射规则（严格遵循 TFDS Token 规范）：
+ * - 背景色：使用 {color}-50（最浅色）
+ * - 文字色：默认使用 {color}-600（深色）；teal 使用 brand-800，yellow 使用 yellow-700
+ * 
+ * 边框规则：
+ * - 白色标签：显示边框，边框色为默认描边语义色
+ * - 其他标签：无边框
+ * 
+ * 圆角：
+ * - md: 半圆，8px（默认）
+ * - square: 方形细圆角，3px
+ * - full: 全圆，9999px
+ * 
+ * 特殊情况：
+ * - teal：使用 brand token，背景 brand-50，文字 brand-800
+ * - grey：使用 blueGrey token（最接近的灰色系）
+ * - white：纯白色背景，使用 blueGrey 作为文字和边框色
+ * - ai：使用 ai-fill-1 渐变背景，文字使用 ai-fill-text 渐变
+ * 
+ * 图标配置：
+ * - 默认图标：tag-01-stroked
+ * - 图标尺寸：所有尺寸均为 12px (xs)
+ * - 图标右侧到文字的间距：4px（所有尺寸）
+ * 
+ * 尺寸（参考 Figma 截图）：
+ * - S: 高度 16px，字号 12px
+ *   - 左侧内距：4px
+ *   - 右侧内距：4px
+ *   - 垂直内距：0px
+ *   - 字号：12px
+ *   - 图标尺寸：12px (xs)
+ *   - 图标右侧到文字的间距：4px
+ *   - 文字右侧到关闭按钮的间距：4px
+ * - M: 高度 20px，字号 12px
+ *   - 左侧内距：4px
+ *   - 右侧内距：4px
+ *   - 垂直内距：0px
+ *   - 字号：12px
+ *   - 图标尺寸：12px (xs)
+ *   - 图标右侧到文字的间距：4px
+ *   - 文字右侧到关闭按钮的间距：4px
+ * - L: 高度 24px，字号 12px
+ *   - 左侧内距：4px
+ *   - 右侧内距：4px
+ *   - 垂直内距：0px
+ *   - 字号：12px
+ *   - 图标尺寸：12px (xs)
+ *   - 图标右侧到文字的间距：4px
+ *   - 文字右侧到关闭按钮的间距：4px
+ *
+ * 字体粗细：
+ * - bold：粗体（默认），字重固定 700（--font-bold）
+ * - regular：细体，字重固定 400
+ */
+export const TAG_TOKEN_MAP = {
+  base: [],
+  variants: {
+    red: [
+      { label: '背景色', cssProp: 'background', token: '--color-red-50', value: '#FEF2F1' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-red-600', value: '#D32E24' },
+    ],
+    orange: [
+      { label: '背景色', cssProp: 'background', token: '--color-orange-50', value: '#FFF5EE' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-orange-600', value: '#D17310' },
+    ],
+    yellow: [
+      { label: '背景色', cssProp: 'background', token: '--color-yellow-100', value: '#FEFACF' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-yellow-700', value: '#A5760A' },
+    ],
+    green: [
+      { label: '背景色', cssProp: 'background', token: '--color-green-50', value: '#F0FDF4' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-green-600', value: '#329538' },
+    ],
+    cyan: [
+      { label: '背景色', cssProp: 'background', token: '--color-cyan-50', value: '#EAF9FA' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-cyan-600', value: '#0E94A0' },
+    ],
+    blue: [
+      { label: '背景色', cssProp: 'background', token: '--color-blue-50', value: '#ECF6FE' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-blue-600', value: '#0B69D4' },
+    ],
+    purple: [
+      { label: '背景色', cssProp: 'background', token: '--color-purple-50', value: '#F7EAF7' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-purple-600', value: '#8B239F' },
+    ],
+    pink: [
+      { label: '背景色', cssProp: 'background', token: '--color-pink-50', value: '#FDEDF1' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-pink-600', value: '#C32165' },
+    ],
+    teal: [
+      { label: '背景色', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-brand-800', value: '#129683' },
+    ],
+    grey: [
+      { label: '背景色', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467' },
+    ],
+    white: [
+      { label: '背景色', cssProp: 'background', value: '#FFFFFF' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '边框宽度', cssProp: 'border-width', value: '1px' },
+      { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    ],
+    brand: [
+      { label: '背景色', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC' },
+    ],
+    ai: [
+      { label: '背景色', cssProp: 'background', token: '--bg-chat-outgoing-ai', value: 'linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%)', semanticRef: 'bg-chat-outgoing-ai' },
+      { label: '文字颜色', cssProp: 'color', token: '--gradient-ai-fill-text', value: 'linear-gradient(135deg, rgba(22, 218, 203, 1) 0%, rgba(49, 134, 212, 1) 20%, rgba(111, 88, 227, 1) 70%, rgba(231, 116, 221, 1) 100%)' },
+    ],
+  },
+  sizes: {
+    s: [
+      { label: '高度', cssProp: 'height', value: '16px' },
+      { label: '左侧内距', cssProp: 'padding-left', token: '--spacing-1', value: '4px' },
+      { label: '右侧内距', cssProp: 'padding-right', token: '--spacing-1', value: '4px' },
+      { label: '垂直内距', cssProp: 'padding-block', token: '--spacing-0', value: '0px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '图标尺寸', cssProp: 'icon-size', value: '12px (xs)' },
+      { label: '图标右侧到文字的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+      { label: '文字右侧到关闭按钮的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+    ],
+    m: [
+      { label: '高度', cssProp: 'height', value: '20px' },
+      { label: '左侧内距', cssProp: 'padding-left', token: '--spacing-1', value: '4px' },
+      { label: '右侧内距', cssProp: 'padding-right', token: '--spacing-1', value: '4px' },
+      { label: '垂直内距', cssProp: 'padding-block', token: '--spacing-0', value: '0px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '图标尺寸', cssProp: 'icon-size', value: '12px (xs)' },
+      { label: '图标右侧到文字的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+      { label: '文字右侧到关闭按钮的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+    ],
+    l: [
+      { label: '高度', cssProp: 'height', value: '24px' },
+      { label: '左侧内距', cssProp: 'padding-left', token: '--spacing-1', value: '4px' },
+      { label: '右侧内距', cssProp: 'padding-right', token: '--spacing-1', value: '4px' },
+      { label: '垂直内距', cssProp: 'padding-block', token: '--spacing-0', value: '0px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '图标尺寸', cssProp: 'icon-size', value: '12px (xs)' },
+      { label: '图标右侧到文字的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+      { label: '文字右侧到关闭按钮的间距', cssProp: 'margin-right', token: '--spacing-1', value: '4px' },
+    ],
+  },
+  radii: {
+    md: [{ label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' }],
+    square: [{ label: '圆角', cssProp: 'border-radius', token: '--radius-avatar', value: '3px' }],
+    full: [{ label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' }],
+  },
+  fontWeights: {
+    regular: [{ label: '字重', cssProp: 'font-weight', value: '400' }],
+    bold: [{ label: '字重', cssProp: 'font-weight', token: '--font-bold', value: '700' }],
+  },
+  icons: {
+    default: [
+      { label: '默认图标', cssProp: 'icon-name', value: 'tag-01-stroked' },
+      { label: '图标颜色', cssProp: 'color', value: 'inherit (继承文字颜色)' },
+    ],
+  },
+};