@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,75 @@
+/**
+ * ChatInput — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 遵循 platform-rules.md：
+ *   T1 元素分组：按 UI 元素（猫条文字 / 输入区域 …）分组，不按属性类型
+ *   T2 非 token 固定值：宽度等没有 token 的属性也写进来，平台用 directStyleOverrides 注入
+ *   T3 引用组件分组：所有子组件（Button / IconButton / EntityChip / 附件卡 / 猫头像）
+ *      集中放底部「引用组件」分组，cssProp 填 '—'，不重复暴露细粒度样式
+ *
+ * 分组顺序：文本元素 → 容器尺寸 → 容器区域 → 子区域 → 引用组件
+ */
+export const CHATINPUT_TOKEN_MAP = {
+  base: [],
+
+  /* ── 文本元素 ── */
+  猫条文字: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', value: '16px' },
+  ],
+  占位文字: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', value: '30px' },
+  ],
+  状态文字: [
+    { 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-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', value: '30px' },
+  ],
+
+  /* ── 容器尺寸（T2 非 token 固定值，通过 directStyleOverrides 注入到 ChatInput style）── */
+  容器: [
+    { label: '宽度', cssProp: 'width', value: '500px' },
+  ],
+
+  /* ── 容器区域 ── */
+  输入区域: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px' },
+    { label: '内边距', cssProp: 'padding', value: '14px' },
+    { label: '氛围投影', cssProp: 'box-shadow', value: '-12px 20px 30px -27px rgba(46,202,180,0.8), 12px 20px 30px -27px rgba(184,46,202,0.8)' },
+    { label: '忙碌边框', cssProp: 'border-color', token: '--color-brand-100', value: '#CFF3EA', state: 'busy' },
+    { label: '忙碌背景', cssProp: 'background-image', value: 'linear-gradient(67deg, rgba(63,226,213,0.07) 0%, ...)', state: 'busy' },
+  ],
+  底层背景: [
+    { label: '背景色', cssProp: 'background', value: 'rgba(80,99,168,0.05)' },
+    { label: '圆角', cssProp: 'border-radius', value: '20px' },
+    { label: '边框色', cssProp: 'border-color', value: '#FFFFFF' },
+  ],
+  猫条容器: [
+    { label: '高度', cssProp: 'height', value: '36px' },
+    { label: '元素间距', cssProp: 'gap', value: '20px' },
+    { label: '左右间距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+  ],
+  工具栏: [
+    { label: '按钮间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '栏间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+  ],
+
+  /* ── 引用组件（T3）：所有子组件统一放最底部，只列名 + 关键 props，不暴露内部样式 ── */
+  引用组件: [
+    { label: '工具栏按钮', cssProp: '—', value: 'IconButton ghost-black sm 36×36（@ / 指令 / 附件 / ai-divider）' },
+    { label: 'Agent 按钮', cssProp: '—', value: 'Button ghost-black md 36px（带 Bot icon + 下拉，选中时切 brand 主色）' },
+    { label: '发送按钮', cssProp: '—', value: 'Button primary md iconOnly 36×36（disabled / active / running 三态）' },
+    { label: '操作按钮', cssProp: '—', value: 'Button text-black md（仅 readonly 变体使用）' },
+    { label: '实体/指令 chip', cssProp: '—', value: 'EntityChip 26px brand-50 / brand-100 边（内置子组件）' },
+    { label: '附件卡片', cssProp: '—', value: 'AttachmentCard 180×52 fill 背景（内置子组件，hover 头像变删除钮）' },
+    { label: '猫条头像', cssProp: '—', value: 'CatAvatar 24×24（内置 SVG，眨眼动效）' },
+    { label: '浮层菜单', cssProp: '—', value: 'PopoverMenu surface 背景 + radius-lg（Agent / @ / 指令 共用）' },
+  ],
+};