@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/FormFieldStack.jsx

@@ -0,0 +1,123 @@
+import Form, { FORM_SAMPLE_ITEMS } from './Form';
+
+const FORM_COUNT = 5;
+const FORM_SELECT_SAMPLE = FORM_SAMPLE_ITEMS.find((item) => item.type === 'select');
+
+function cloneValue(value) {
+  if (Array.isArray(value)) return value.map(cloneValue);
+  if (value && typeof value === 'object') return { ...value };
+  return value;
+}
+
+function buildFormItems(prefix) {
+  const item = FORM_SELECT_SAMPLE || {
+    id: 'region',
+    label: '字段标题',
+    type: 'select',
+    placeholder: '请选择',
+  };
+
+  return [{
+    ...item,
+    id: `${prefix}-${item.id}`,
+    fullWidth: true,
+    value: cloneValue(item.value),
+    defaultValue: cloneValue(item.defaultValue),
+    options: cloneValue(item.options),
+    selectOptions: cloneValue(item.selectOptions),
+  }];
+}
+
+/** 自上而下：2×input、2×select、2×radio、2×checkbox、3×textarea（单 Form 内纵向） */
+function buildMixedFormItems() {
+  const inputTpl = FORM_SAMPLE_ITEMS.find((i) => i.type === 'input');
+  const selectTpl = FORM_SAMPLE_ITEMS.find((i) => i.type === 'select');
+  const radioTpl = FORM_SAMPLE_ITEMS.find((i) => i.type === 'radio');
+  const checkboxTpl = FORM_SAMPLE_ITEMS.find((i) => i.type === 'checkbox');
+  const textareaTpl = FORM_SAMPLE_ITEMS.find((i) => i.type === 'textarea');
+
+  const pick = (tpl, overrides = {}) => {
+    if (!tpl) return null;
+    const { defaultValue: overrideDefault, id, ...rest } = overrides;
+    const baseDefault = tpl.defaultValue;
+    const resolvedDefault = overrideDefault !== undefined ? overrideDefault : baseDefault;
+    return {
+      ...tpl,
+      ...rest,
+      id,
+      fullWidth: true,
+      value: cloneValue(tpl.value),
+      defaultValue: cloneValue(resolvedDefault),
+      options: cloneValue(tpl.options),
+      selectOptions: cloneValue(tpl.selectOptions),
+    };
+  };
+
+  return [
+    pick(inputTpl, { id: 'mixed-input-1' }),
+    pick(inputTpl, { id: 'mixed-input-2' }),
+    pick(selectTpl, { id: 'mixed-select-1' }),
+    pick(selectTpl, { id: 'mixed-select-2' }),
+    pick(radioTpl, { id: 'mixed-radio-1', defaultValue: 'a' }),
+    pick(radioTpl, { id: 'mixed-radio-2', defaultValue: 'b' }),
+    pick(checkboxTpl, { id: 'mixed-checkbox-1', defaultValue: ['a'] }),
+    pick(checkboxTpl, { id: 'mixed-checkbox-2', defaultValue: ['b'] }),
+    pick(textareaTpl, { id: 'mixed-textarea-1' }),
+    pick(textareaTpl, { id: 'mixed-textarea-2' }),
+    pick(textareaTpl, { id: 'mixed-textarea-3' }),
+  ].filter(Boolean);
+}
+
+const MIXED_FORM_ITEMS = buildMixedFormItems();
+
+/**
+ * FormFieldStack — 纵向多段 Form 组合（无页级标题、无底栏、无独立卡片壳）
+ *
+ * - stackLayout=`select-stack`（默认）：5 个 Form，每段 1 条 select
+ * - stackLayout=`mixed-fields`：1 个 Form，内含 2×input / 2×select / 2×radio / 2×checkbox / 3×textarea
+ *
+ * 根节点全宽，四周 p-6（24px）内边距，段与段之间 gap-6；背景与描边由宿主决定。
+ */
+export default function FormFieldStack({ className = '', stackLayout = 'select-stack' }) {
+  if (stackLayout === 'mixed-fields') {
+    return (
+      <div
+        className={[
+          'tfds-form-field-stack box-border flex w-full min-w-0 flex-col gap-6 self-stretch p-6',
+          className,
+        ].filter(Boolean).join(' ')}
+        data-tfds-component="FormFieldStack"
+      >
+        <Form
+          key="mixed-form"
+          className="w-full min-w-0 !items-stretch"
+          items={MIXED_FORM_ITEMS}
+        />
+      </div>
+    );
+  }
+
+  const forms = Array.from({ length: FORM_COUNT }, (_, index) => {
+    const formKey = `form-section-${index + 1}`;
+    const items = buildFormItems(formKey);
+    return { formKey, items };
+  });
+
+  return (
+    <div
+      className={[
+        'tfds-form-field-stack box-border flex w-full min-w-0 flex-col gap-6 self-stretch p-6',
+        className,
+      ].filter(Boolean).join(' ')}
+      data-tfds-component="FormFieldStack"
+    >
+      {forms.map(({ formKey, items }) => (
+        <Form
+          key={formKey}
+          className="w-full min-w-0 !items-stretch"
+          items={items}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+/** FormFieldStack — Token 说明（透明布局壳；字段视觉走 Form.tokens） */
+export const FORM_FIELD_STACK_TOKEN_MAP = {
+  留白与节奏: [
+    { label: '壳层', cssProp: 'background, border', value: '不设背景与描边，随宿主容器' },
+    { label: '四周内边距', cssProp: 'padding', token: '--spacing-6', value: '24px' },
+    { label: 'Form 区块间距', cssProp: 'gap', token: '--spacing-6', value: '24px' },
+    { label: 'Form 宽度', cssProp: 'width', value: '默认撑满宿主白色容器（w-full / self-stretch）' },
+  ],
+  引用组件: [
+    { label: '表单', cssProp: 'component', value: 'Form / vertical；业务按场景自由编排字段类型与数量；内置示意含 select-stack 与 mixed-fields（含 3 段 textarea）' },
+  ],
+};

package/src/_b_end_runtime/components/FormTitle.jsx

@@ -0,0 +1,119 @@
+/**
+ * FormTitle — B端表单区块标题组件 (Tailwind 内联)
+ *
+ * 用于页面级总标题、表单区块和白卡内容区标题的统一组件，内置 5 种设计稿变体：
+ * form / level-1 / level-2 / level-3 / card。
+ * 描述文案默认隐藏；仅在有板块介绍、场景说明或明确要求时通过 showDescription 显示。
+ *
+ * **AI / 页面生成：层级选型（必须按场景选 variant，禁止手写 h2/h3）**
+ * | 场景 | variant | 说明 |
+ * |------|---------|------|
+ * | 整体页面左上角总标题、工作台名、Playground 页面主标题（如 `Model Playground`） | `form` | 全页最高层级，20px 大字号，左侧**没有**绿色竖条；需要说明时描述在标题下方 |
+ * | 页面内一级板块 / 列表管理页单张主白卡顶栏主标题 | `level-1` | 左侧品牌色竖条 + 16px 标题；用于页面总标题之下的大卡片/一级内容块，不用于整页左上角总标题 |
+ * | `level-1` 之下的第一级分区 / 白卡内大模块标题 | `level-2` | 14px 竖条；有板块说明诉求时描述显示在标题**同行右侧** |
+ * | `level-2` 再下的子分组、折叠面板头、表格上方小区域标题 | `level-3` | 与 level-2 同阶字级，用于再嵌套一层时的视觉降级（仍带竖条） |
+ * | `Card` 组件标题区、统计/摘要条、表格卡片外框标题（弱化、**无竖条**、标题与描述同排） | `card` | 不要用于整页总标题或大卡片主标题 |
+ *
+ * 同一页面必须拉开标题层级：页面总标题用 `form`，卡片/板块标题再按 `level-1/2/3` 递进；
+ * ⛔ 禁止把整页所有左上角标题都统一写成同一个 variant。
+ *
+ * @prop {'form'|'level-1'|'level-2'|'level-3'|'card'} [variant='form'] — 标题形态
+ * @prop {string} [title] — 主标题；不传则用当前变体示例文案
+ * @prop {string} [description] — 描述；不传则用当前变体示例文案
+ * @prop {React.ReactNode} [titleSuffix] — 主标题右侧补充内容，如状态 Tag；紧跟 title 渲染，不进入 header 右侧操作区
+ * @prop {boolean} [showDescription=false] — 是否展示描述；默认隐藏
+ * @prop {string} [className=''] — 额外类名
+ */
+
+/* ── 变体 → 布局与排版（颜色走语义 Token 短类） ── */
+// 字重使用显式 CSS 变量，避免 Tailwind v4 将 token 解析为 font-family token。
+const VARIANT_CONFIG = {
+  form: {
+    root: 'inline-flex max-w-full min-w-0 flex-col items-start gap-1',
+    titleWrap: 'flex shrink-0 items-center gap-[6px]',
+    title: 'shrink-0 whitespace-nowrap text-xl [font-weight:var(--font-semibold)] leading-7 text-foreground',
+    description: 'whitespace-pre-wrap text-sm font-normal leading-5 text-foreground-muted',
+    indicator: null,
+    descriptionPlacement: 'bottom',
+  },
+  'level-1': {
+    root: 'inline-flex max-w-full min-w-0 flex-col items-start gap-1',
+    titleWrap: 'flex shrink-0 items-center gap-[6px]',
+    title: 'shrink-0 whitespace-nowrap text-base [font-weight:var(--font-semibold)] leading-[22px] text-foreground',
+    description: 'whitespace-pre-wrap text-sm font-normal leading-5 text-foreground-muted',
+    indicator: 'h-4 w-[4px] shrink-0 rounded-full bg-brand-500',
+    descriptionPlacement: 'bottom',
+  },
+  'level-2': {
+    root: 'flex max-w-full min-w-0 items-start gap-1',
+    titleWrap: 'flex min-w-0 flex-wrap items-center gap-x-[6px] gap-y-1',
+    title: 'shrink-0 whitespace-nowrap text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground',
+    description: 'min-w-0 flex-1 whitespace-normal break-words text-sm font-normal leading-5 text-foreground-muted',
+    indicator: 'h-[14px] w-[4px] shrink-0 rounded-full bg-brand-500',
+    descriptionPlacement: 'right',
+  },
+  'level-3': {
+    root: 'flex max-w-full min-w-0 items-start gap-1',
+    titleWrap: 'flex min-w-0 flex-wrap items-center gap-x-[6px] gap-y-1',
+    title: 'shrink-0 whitespace-nowrap text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground',
+    description: 'min-w-0 flex-1 whitespace-normal break-words text-sm font-normal leading-5 text-foreground-muted',
+    indicator: 'h-[14px] w-[4px] shrink-0 rounded-full bg-brand-500',
+    descriptionPlacement: 'right',
+  },
+  card: {
+    root: 'flex max-w-full min-w-0 gap-1',
+    titleWrap: 'flex min-w-0 flex-wrap items-center gap-x-[6px] gap-y-1',
+    title: 'shrink-0 whitespace-nowrap text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground-secondary',
+    description: 'min-w-0 flex-1 whitespace-normal break-words text-sm font-normal leading-5 text-foreground-muted',
+    indicator: null,
+    descriptionPlacement: 'right',
+  },
+};
+
+const SAMPLE_COPY = {
+  form: { title: '表单标题', description: '一级标题描述' },
+  'level-1': { title: '一级标题', description: '一级标题描述' },
+  'level-2': { title: '二级标题', description: '二级标题描述' },
+  'level-3': { title: '三级标题', description: '二级标题描述' },
+  card: { title: '卡片标题', description: '二级标题描述' },
+};
+
+export default function FormTitle({
+  variant = 'form',
+  title,
+  description,
+  titleSuffix = null,
+  showDescription = false,
+  className = '',
+}) {
+  const resolvedVariant = VARIANT_CONFIG[variant] ? variant : 'form';
+  const config = VARIANT_CONFIG[resolvedVariant];
+  const sample = SAMPLE_COPY[resolvedVariant];
+  const resolvedTitle = title ?? sample.title;
+  const resolvedDescription = description ?? sample.description;
+  const shouldShowDescription = (
+    showDescription
+    && typeof resolvedDescription === 'string'
+    && resolvedDescription.trim().length > 0
+  );
+  const descriptionNode = shouldShowDescription ? (
+    <span className={config.description}>{resolvedDescription}</span>
+  ) : null;
+  const suffixNode = titleSuffix ? (
+    <span className="inline-flex shrink-0 items-center">{titleSuffix}</span>
+  ) : null;
+
+  const descOnRight = config.descriptionPlacement === 'right';
+
+  return (
+    <div className={[`tfds-form-title`, [config.root, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')} data-tfds-component="FormTitle">
+      <div className={config.titleWrap}>
+        {config.indicator ? <span aria-hidden="true" className={config.indicator} /> : null}
+        <span className={config.title}>{resolvedTitle}</span>
+        {suffixNode}
+        {descOnRight ? descriptionNode : null}
+      </div>
+      {!descOnRight ? descriptionNode : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+/**
+ * FormTitle — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 FormTitle.jsx
+ *
+ * 说明：`variants` 键名与 `ComponentDetailPage` 约定一致，用于按当前 variant 切换展示；
+ * 其余分组为中文 UI 元素分组（platform-rules T1）。
+ */
+export const FORM_TITLE_TOKEN_MAP = {
+  variants: {
+    form: [
+      { label: '标题色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '标题号', cssProp: 'font-size', token: '--text-xl', value: '20px' },
+      { label: '标题重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+      { label: '标题高', cssProp: 'line-height', value: '28px' },
+      { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '描述号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '描述重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+      { label: '描述高', cssProp: 'line-height', value: '20px' },
+      { label: '排列', cssProp: 'display', value: 'inline-flex' },
+      { label: '方向', cssProp: 'flex-direction', value: 'column' },
+      { label: '间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    'level-1': [
+      { label: '标题色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '标题号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+      { label: '标题重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+      { label: '标题高', cssProp: 'line-height', value: '22px' },
+      { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '描述号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '描述重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+      { label: '描述高', cssProp: 'line-height', value: '20px' },
+      { label: '标识色', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+      { label: '标识宽', cssProp: 'width', value: '3px' },
+      { label: '标识高', cssProp: 'height', value: '16px' },
+      { label: '方向', cssProp: 'flex-direction', value: 'column' },
+      { label: '间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    'level-2': [
+      { 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' },
+      { label: '标题高', cssProp: 'line-height', value: '20px' },
+      { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '描述号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '描述重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+      { label: '描述高', cssProp: 'line-height', value: '20px' },
+      { label: '标识色', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+      { label: '标识宽', cssProp: 'width', value: '3px' },
+      { label: '标识高', cssProp: 'height', value: '14px' },
+      { label: '方向', cssProp: 'flex-direction', value: 'row' },
+      { label: '间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    'level-3': [
+      { 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' },
+      { label: '标题高', cssProp: 'line-height', value: '20px' },
+      { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '描述号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '描述重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+      { label: '描述高', cssProp: 'line-height', value: '20px' },
+      { label: '标识色', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+      { label: '标识宽', cssProp: 'width', value: '3px' },
+      { label: '标识高', cssProp: 'height', value: '14px' },
+      { label: '方向', cssProp: 'flex-direction', value: 'row' },
+      { label: '间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    card: [
+      { label: '标题色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+      { label: '标题号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '标题重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+      { label: '标题高', cssProp: 'line-height', value: '20px' },
+      { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+      { label: '描述号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '描述重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+      { label: '描述高', cssProp: 'line-height', value: '20px' },
+      { label: '方向', cssProp: 'flex-direction', value: 'row' },
+      { label: '间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+  },
+  布局: [
+    { label: '标题组距', cssProp: 'gap (title)', value: '6px' },
+    { label: '圆角', cssProp: 'border-radius (indicator)', value: '9999px' },
+    { label: '标题后缀', cssProp: 'slot', value: 'titleSuffix 紧跟主标题，用于状态 Tag / 业务胶囊' },
+    { label: '描述默认', cssProp: 'visibility', value: '默认隐藏；showDescription=true 时显示' },
+  ],
+};

package/src/_b_end_runtime/components/FullScreenPage.jsx

@@ -0,0 +1,97 @@
+import { ArrowLeft } from 'lucide-react';
+import Button from './Button';
+
+/**
+ * FullScreenPage — 全屏操作页容器（B端设计系统，Tailwind 内联）
+ *
+ * 覆盖整个定位父级（含侧边导航）的全屏操作页，用于内容量大、需长时间沉浸编辑的场景。
+ * 定位原理：absolute inset-0，须挂在 relative 定位父级内（如 BasePageFramePattern 根节点）。
+ *
+ * 两种背景色模式，对应不同的内容承载规范：
+ *   white — 白底，内容直接铺在页面上（如轻量创建表单）
+ *   grey  — 浅灰底，内容须在 children 内自行包白色卡片容器承载（如复杂配置编辑页）
+ *
+ * 与 Modal / Sheet 的场景区别：
+ *   Modal          — 内容量少，快速确认，居中浮层
+ *   Sheet          — 内容中等，侧边补充信息
+ *   Modal fullscreen — 内容较多，结构化表单，覆盖右侧内容区
+ *   FullScreenPage — 内容非常多，沉浸长时间编辑，覆盖整个框架含侧边导航
+ *
+ * @prop {'white'|'grey'} [bg='white'] — 背景色模式
+ * @prop {string} [title='页面标题'] — 顶栏标题
+ * @prop {function} [onBack=null] — 返回/关闭回调，传入才显示返回按钮
+ * @prop {ReactNode} [headerActions=null] — 顶栏右侧操作区插槽（保存/发布等按钮）
+ * @prop {ReactNode} [children] — 页面主体内容
+ * @prop {boolean} [contained=false] — 预览/嵌入模式：true 时改用相对定位填满父容器，而非 absolute 覆盖
+ * @prop {string} [className=''] — 附加类名
+ * @prop {object} [style] — 内联样式
+ */
+
+/* ── 背景色模式 → Tailwind 类名 ── */
+const BG_CLASS = {
+  /* 白底：内容直接铺在页面上 */
+  white: 'bg-surface',
+  /* 灰底：内容须在 children 内自行包白色卡片容器承载 */
+  grey: 'bg-blueGrey-200',
+};
+
+/* ── 顶栏：透明背景，无分割线，左右 24px / 上下 16px ── */
+const HEADER = [
+  'flex shrink-0 items-center justify-between gap-3',
+  'px-6 py-4',
+].join(' ');
+
+/* ── 顶栏标题 ── */
+const TITLE = 'text-base [font-weight:var(--font-semibold)] text-foreground truncate min-w-0';
+
+export default function FullScreenPage({
+  bg = 'white',
+  title = '页面标题',
+  onBack,
+  headerActions,
+  children,
+  contained = false,
+  className = '',
+  style,
+}) {
+  const positionClass = contained
+    ? 'relative flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden'
+    : 'absolute inset-0 z-50 flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden';
+
+  return (
+    <div
+      className={[`tfds-full-screen-page`, positionClass, BG_CLASS[bg], className].filter(Boolean).join(' ')}
+      style={style}
+      data-tfds-component="FullScreenPage"
+    >
+      {/* 顶栏：返回键 + 标题 + 右侧操作区 */}
+      <header className={HEADER} data-tfds-component="FullScreenPage.Header">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          {onBack ? (
+            <Button
+              type="button"
+              variant="ghost-black"
+              size="sm"
+              icon={<ArrowLeft size={16} strokeWidth={2} />}
+              iconOnly
+              onClick={onBack}
+              aria-label="返回"
+              className="shrink-0"
+              data-tfds-component="FullScreenPage.Back"
+            />
+          ) : null}
+          <h1 className={TITLE}>{title}</h1>
+        </div>
+
+        {headerActions ? (
+          <div className="flex items-center gap-2 shrink-0">{headerActions}</div>
+        ) : null}
+      </header>
+
+      {/* 内容区：flex-1 独立滚动，具体布局由 children 自定义 */}
+      <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden" data-tfds-component="FullScreenPage.Content">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+export const FULL_SCREEN_PAGE_TOKEN_MAP = {
+  顶栏: [
+    { label: '背景色', cssProp: 'background', value: 'transparent' },
+    { label: '高度', cssProp: 'height', value: '56px' },
+    { label: '横向内距', cssProp: 'padding-inline', value: '16px' },
+  ],
+  标题: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
+    { label: '字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+  ],
+  内容区: [
+    { label: '白底背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '灰底背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'bg=grey' },
+  ],
+  引用组件: [
+    { label: '返回按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly' },
+  ],
+};

package/src/_b_end_runtime/components/Icon.jsx

@@ -0,0 +1,172 @@
+/**
+ * Icon — 矢量图标（非人像）
+ *
+ * **何时用**：按钮/输入前后缀、导航项、状态提示、空状态插画中的符号；默认继承父级文字色（`currentColor`）。
+ * **不用**：账号/用户/机器人「脸」→ `Avatar`；需要整段可点击文案 → `Button`；切换同页多块主内容 → `Tabs`。
+ *
+ * @prop {string} [name='check-stroked'] — 图标名称（kebab-case，见图标库）
+ * @prop {'xs'|'sm'|'md'|'lg'|'xl'|number} [size='sm'] — 尺寸档位：与 **Input/Select md（36px）** 搭配的前缀、行内符号默认 **sm（16px）**；独立展示用 md/lg/xl；也可传数字像素（少用）
+ * @prop {string} [color='currentColor'] — 仅在需脱离父级文字色时覆盖
+ */
+
+import { useId } from 'react';
+import { ICON_MAP } from './icons/icon-data';
+
+/* ── 尺寸映射 ── */
+const SIZE_MAP = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+};
+
+function normalizeIconEntry(entry) {
+  if (Array.isArray(entry)) {
+    return {
+      viewBox: '0 0 24 24',
+      defs: [],
+      shapes: entry,
+      contentTransform: '',
+    };
+  }
+
+  return {
+    viewBox: entry?.viewBox || '0 0 24 24',
+    defs: entry?.defs || [],
+    shapes: entry?.shapes || [],
+    contentTransform: entry?.contentTransform || '',
+  };
+}
+
+function remapPaintRef(value, idMap) {
+  if (!value || !idMap) return value;
+  return value.replace(/url\(#([^)]+)\)/g, (_, id) => `url(#${idMap[id] || id})`);
+}
+
+export default function Icon({
+  name,
+  size = 'sm',
+  color = 'currentColor',
+  className,
+  style,
+  ...rest
+}) {
+  const entry = ICON_MAP[name];
+  if (!entry) return null;
+
+  const px = SIZE_MAP[size] ?? (typeof size === 'number' ? size : 24);
+  const iconId = useId().replace(/:/g, '');
+  const { viewBox, defs, shapes, contentTransform } = normalizeIconEntry(entry);
+  const defIdMap = Object.fromEntries(defs.map((def) => [def.id, `${iconId}-${def.id}`]));
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={px}
+      height={px}
+      viewBox={viewBox}
+      preserveAspectRatio="xMidYMid meet"
+      fill="none"
+      className={[`tfds-icon`, className].filter(Boolean).join(' ')}
+      style={{ flexShrink: 0, overflow: 'visible', ...style }}
+      {...rest}
+     data-tfds-component="Icon">
+      {defs.length ? (
+        <defs>
+          {defs.map((def) => {
+            if (def.type === 'linearGradient') {
+              return (
+                <linearGradient
+                  key={def.id}
+                  id={defIdMap[def.id]}
+                  x1={def.x1}
+                  y1={def.y1}
+                  x2={def.x2}
+                  y2={def.y2}
+                  gradientUnits={def.gradientUnits}
+                >
+                  {def.stops.map((stop, index) => (
+                    <stop
+                      key={index}
+                      offset={stop.offset}
+                      stopColor={stop.stopColor}
+                      stopOpacity={stop.stopOpacity}
+                    />
+                  ))}
+                </linearGradient>
+              );
+            }
+
+            return null;
+          })}
+        </defs>
+      ) : null}
+
+      <g transform={contentTransform || undefined}>
+        {shapes.map((shape, index) => {
+          const fill = remapPaintRef(shape.fill, defIdMap) || color;
+          const transform = shape.transform || undefined;
+
+          if (shape.type === 'ellipse') {
+            return (
+              <ellipse
+                key={index}
+                cx={shape.cx}
+                cy={shape.cy}
+                rx={shape.rx}
+                ry={shape.ry}
+                fill={fill}
+                transform={transform}
+              />
+            );
+          }
+
+          if (shape.type === 'rect') {
+            return (
+              <rect
+                key={index}
+                x={shape.x}
+                y={shape.y}
+                width={shape.width}
+                height={shape.height}
+                rx={shape.rx}
+                ry={shape.ry}
+                fill={shape.fill === 'none' ? 'none' : fill}
+                stroke={shape.stroke ? (shape.strokeColor || color) : undefined}
+                strokeWidth={shape.stroke ? (shape.strokeWidth || '2') : undefined}
+                transform={transform}
+              />
+            );
+          }
+
+          if (shape.stroke) {
+            return (
+              <path
+                key={index}
+                d={shape.d}
+                fill="none"
+                stroke={shape.strokeColor || color}
+                strokeWidth={shape.strokeWidth || '2'}
+                strokeLinecap={shape.strokeLinecap || 'round'}
+                strokeLinejoin={shape.strokeLinejoin || 'round'}
+                transform={transform}
+              />
+            );
+          }
+
+          return (
+            <path
+              key={index}
+              d={shape.d}
+              fill={fill}
+              fillRule={shape.fillRule || undefined}
+              clipRule={shape.clipRule || undefined}
+              transform={transform}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}

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

@@ -0,0 +1,26 @@
+// Icon — Token 映射表
+// 注：Icon 组件通过 props 直接控制尺寸和颜色（非 CSS 变量），
+// 此 TOKEN_MAP 仅供平台属性面板展示参考值。
+
+export const ICON_TOKEN_MAP = {
+  base: [
+    { token: '--icon-color', label: '图标颜色', type: 'color', default: 'currentColor' },
+  ],
+  sizes: {
+    xs: [
+      { token: '--icon-size-xs', label: '尺寸', type: 'size', default: '12px' },
+    ],
+    sm: [
+      { token: '--icon-size-sm', label: '尺寸', type: 'size', default: '16px' },
+    ],
+    md: [
+      { token: '--icon-size-md', label: '尺寸', type: 'size', default: '20px' },
+    ],
+    lg: [
+      { token: '--icon-size-lg', label: '尺寸', type: 'size', default: '24px' },
+    ],
+    xl: [
+      { token: '--icon-size-xl', label: '尺寸', type: 'size', default: '32px' },
+    ],
+  },
+};