@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,147 @@
+/**
+ * Table — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：容器 → 表头 → 单元格 → 交互类型 → 复合类型 → 分页 → 卡片型表单 → 引用组件
+ */
+export const TABLE_TOKEN_MAP = {
+  容器: [
+    { label: '外层背景', cssProp: 'background', token: '--color-page', value: '#FFFFFF', semanticRef: 'bg-page' },
+    { label: '外层留白', cssProp: 'padding', token: '--spacing-3', value: '12px' },
+    { label: '外层圆角', cssProp: 'border-radius', value: '12px' },
+    { label: '内层背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '预览边距', cssProp: 'padding', token: '--spacing-6', value: '24px' },
+  ],
+  表头: [
+    { label: '文字色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '底边色', cssProp: 'border-bottom-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '底边宽', cssProp: 'border-bottom-width', value: '2px' },
+    { label: '单元距', cssProp: 'padding-inline / padding-block', token: '--spacing-4 / --spacing-3', value: '16px 12px' },
+  ],
+  单元格: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '底边色', cssProp: 'border-bottom-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '底边宽', cssProp: 'border-bottom-width', value: '1px' },
+    { label: '默认内距', cssProp: 'padding-inline / padding-block', token: '--spacing-3', value: '12px 12px' },
+    { label: '中尺寸内距', cssProp: 'padding', token: '--spacing-3 / --spacing-2', value: '12px 8px' },
+    { label: '小尺寸内距', cssProp: 'padding-inline / padding-block', token: '--spacing-2 / --spacing-1', value: '8px 4px' },
+  ],
+  可点文本: [
+    { label: '文字色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', semanticRef: 'text-link' },
+    { label: '悬浮色', cssProp: 'color', token: '--color-brand-800', value: '#129683', state: 'hover', semanticRef: 'text-link.hover' },
+    { label: '按下色', cssProp: 'color', token: '--color-brand-900', value: '#0D786A', state: 'active', semanticRef: 'text-link.active' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+  ],
+  状态: [
+    { label: '点色-成功', cssProp: 'background-color', token: '--color-green-500', value: '#3EB346', semanticRef: 'status-success' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  勾选开关: [
+    { label: '选中色', cssProp: 'background / border-color', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+    { label: '未选底', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+    { label: '默认高', cssProp: 'height', value: '44px ~ 48px' },
+    { label: '中尺寸高', cssProp: 'height', value: '36px ~ 40px' },
+    { label: '小尺寸高', cssProp: 'height', value: '28px ~ 32px' },
+  ],
+  头像信息: [
+    { label: '间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '头像宽', cssProp: 'width', token: '--spacing-6', value: '24px' },
+    { label: '头像高', cssProp: 'height', token: '--spacing-6', value: '24px' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '副文本色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary', state: 'secondary' },
+  ],
+  图片进度: [
+    { label: '进度底轨', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+    { label: '进度高亮', cssProp: 'background', token: '--color-data-0', value: '#24CDA5', semanticRef: 'data-0' },
+    { label: '轨道总长', cssProp: 'width', value: '70px' },
+    { label: '轨道高度', cssProp: 'height', value: '10px' },
+  ],
+  操作区: [
+    { label: '间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '文字色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary' },
+    { label: '悬浮色', cssProp: 'color', token: '--color-brand-600', value: '#32C4AC', state: 'hover' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '图标宽', cssProp: 'width', token: '--spacing-6', value: '24px' },
+    { label: '图标高', cssProp: 'height', token: '--spacing-6', value: '24px' },
+  ],
+  分页: [
+    { label: '总距', cssProp: 'padding-inline / padding-top / padding-bottom', value: '0px 12px 0px' },
+    { label: '主间距', cssProp: 'gap', token: '--spacing-4', value: '16px' },
+    { label: '次间距', cssProp: 'gap (pages)', token: '--spacing-1', value: '4px' },
+    { label: '统计色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '选中底', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', state: 'active' },
+    { label: '选中色', cssProp: 'color', token: '--color-brand-600', value: 'Brand 600', semanticRef: 'text-brand', state: 'active' },
+    { label: '选中字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）', state: 'active' },
+    { label: '选中态组合', cssProp: 'background / color / font-weight', value: 'bg-brand-50 + text-brand-600 + semibold；数字颜色必须为 Brand 600' },
+    { label: '真实数量', cssProp: 'data', value: '本地完整数据场景 total 必须等于 dataSource.length；Table 按 current/pageSize 自动切片，展示数量、统计范围、总条数和页码保持一致' },
+    { label: '服务端分页', cssProp: 'data', value: '服务端分页才允许 total 大于当前页 dataSource.length，此时 dataSource 只传当前页数据' },
+    { label: '页码宽', cssProp: 'width', value: '32px' },
+    { label: '页码高', cssProp: 'height', value: '32px' },
+    { label: '箭头宽', cssProp: 'width', value: '36px' },
+    { label: '箭头高', cssProp: 'height', value: '36px' },
+    { label: '页码圆角', cssProp: 'border-radius', value: '6px' },
+    { label: '箭头圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+  ],
+  卡片型表单: [
+    { label: '类型', cssProp: 'variant', value: 'Table variant="card-form" / 卡片型表单' },
+    { label: '适用场景', cssProp: 'usage', value: '策略 / 流程 / 脚本 / 模板 / SOP / 知识条目等父项 + 多版本业务列表' },
+    { label: '默认判定', cssProp: 'usage', value: '只要存在父子级关系，且父项需要展开/收起查看子级内容，默认优先使用 card-form' },
+    { label: '适用边界', cssProp: 'usage', value: '父子流程、版本记录、分组表单使用 card-form；无父子展开关系的平铺多列对比才使用标准表格' },
+    { label: '多字段场景', cssProp: 'usage', value: '即使父项包含状态、引用次数、渠道、负责人、更新时间和操作，只要有展开子项，也归类为 card-form' },
+    { label: '禁用配置', cssProp: 'props', value: 'card-form 不适用 columns / fixedColumnsMode / tableSize / 标准表格列 type' },
+    { label: '列表间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '父卡背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '父卡描边', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '父卡圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px（运行时使用 rounded-xl）' },
+    { label: '父行内距', cssProp: 'padding-inline / padding-block', token: '--spacing-8 / --spacing-4', value: '32px 16px' },
+    { label: '父行悬浮底', cssProp: 'background', token: '--color-blueGrey-50', value: '#FCFCFD', state: 'hover' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-6', value: '24px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '副标题字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '副标题行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+    { label: '父项内容结构', cssProp: 'layout', value: '左侧固定两行：标题 + 副标题；标题区 min-w-0 + overflow-hidden，不覆盖右侧标签/时间/操作区' },
+    { label: '左侧区约束', cssProp: 'min-width / overflow', value: 'min-w-0 + overflow-hidden；标题和副标题必须 block w-full truncate' },
+    { label: '右侧区约束', cssProp: 'flex-shrink', value: 'shrink-0；分类标签、头像、日期、查看和更多操作不得被标题区覆盖' },
+    { label: '省略文案交互', cssProp: 'interaction', value: '父标题 / 副标题 / 版本标题 / 日期等文本发生真实截断时，hover/focus 通过 Tooltip 展示完整文案' },
+    { label: '分类标签长度', cssProp: 'content', value: '8 个字以内，模拟文案使用短标签' },
+    { label: '分类标签样式', cssProp: 'component', value: 'Tag / variant=white / size=m / radius=md' },
+    { label: '父项数据字段', cssProp: 'data', value: '推荐 id / title / subtitle / category / updatedAt / avatar / versions；不要主动生成 categoryEmpty / quoteCount / channels' },
+    { label: '右侧区间距', cssProp: 'gap', token: '--spacing-8', value: '32px' },
+    { label: '子行外距', cssProp: 'padding-inline / padding-bottom', token: '--spacing-4', value: '16px 16px' },
+    { label: '子行背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F8F9FB' },
+    { label: '子行悬浮底', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'hover' },
+    { label: '子行内距', cssProp: 'padding', token: '--spacing-4', value: '16px' },
+    { label: '子行圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px（运行时使用 rounded-lg）' },
+    { label: '版本号尺寸', cssProp: 'width / height', token: '--spacing-6', value: '24px' },
+    { label: '版本号圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（运行时使用 rounded-md）' },
+    { label: '版本号背景', cssProp: 'background', token: '--color-blueGrey-900', value: '#182230' },
+    { label: '版本号文字', cssProp: 'color', token: '--color-white', value: '#FFFFFF' },
+    { label: '版本号计数', cssProp: 'content', value: '按当前父项子行展示顺序从 v1 开始递增，不读取业务传入的 v/version 字段' },
+    { label: '子项数据字段', cssProp: 'data', value: '推荐 id / title / status / metrics / updatedAt / avatar；不要主动生成 v/version' },
+    { label: '状态标签映射', cssProp: 'component', value: '草稿中/暂未生效/已下线=grey；实验中=blue；已发布/线上生效=green' },
+    { label: '指标间距', cssProp: 'gap', token: '--spacing-5', value: '20px' },
+    { label: '指标数量', cssProp: 'content', value: '默认最多展示 4 项，超出字段进入 Tooltip 或更多信息，不横向撑破布局' },
+    { label: '指标宽度适配', cssProp: 'overflow / text-overflow / white-space', value: 'overflow-hidden / text-ellipsis / nowrap，窄宽时收敛为“…”' },
+    { label: '指标完整展示', cssProp: 'interaction', value: '仅发生截断时 hover/focus 触发 Tooltip，展示完整指标字段' },
+    { label: '操作区间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '展开交互', cssProp: 'interaction', value: '左侧展开 Button 控制展开收起，箭头旋转 90deg' },
+    { label: '模板数据量', cssProp: 'content', value: '模板预览建议展示 5 个父项，每个父项都提供非空 versions 支持展开子级表单' },
+    { label: '业务文案', cssProp: 'content', value: '模拟抖音体验与服务场景，例如账号服务、权益申诉、处罚解释、举报处理、售后协同' },
+  ],
+  引用组件: [
+    { label: '头像', cssProp: '—', value: 'Avatar round xs image / fallback；Avatar mini 用于卡片型表单更新时间；Avatar rect robot m|default|s' },
+    { label: '按钮', cssProp: '—', value: 'Button text-brand sm / outline-black / ghost-black iconOnly / 分页按钮' },
+    { label: '标签', cssProp: '—', value: 'Tag white|grey|green|blue m md；卡片型表单父项分类标签固定 white，版本状态标签按状态语义' },
+    { label: '图标', cssProp: '—', value: 'Icon chevron-right / dots-horizontal / chevron-left / chevron-right / file / dots-grid / copy' },
+    { label: '开关', cssProp: '—', value: 'Switch brand sm（switch 类型完整复用）' },
+    { label: '勾选框', cssProp: '—', value: 'Checkbox brand md|sm' },
+    { label: '选择器', cssProp: '—', value: 'Select md' },
+  ],
+};