@tfdesign/b-end 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfdesign/b-end",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "private": false,
   "type": "module",
   "description": "TFDS B-end React components + Tailwind v4 theme.css; self-contained npm install (no monorepo clone required).",

package/skills/tfds/CHECKLIST.md

@@ -45,6 +45,8 @@
 ## 4. 布局与滚动
 
 - 根容器 `h-dvh` / `h-full` 链路完整，关键层有 `min-h-0` / `min-w-0`。
+- 已在常见桌面尺寸验证：宽度至少覆盖 `1920 / 1440 / 1280 / 1024`，高度至少覆盖 `900 / 768`；默认浏览器缩放下关键控件、底部操作、表格分页、输入区和结果区都可达，不依赖缩放页面才能使用。
+- 页面没有横向 body 滚动；Tabs、筛选栏、表单网格、按钮组、表格工具条、InfoDisplayPanel 和右侧面板不会撑破父容器。若局部内容超宽，滚动必须发生在该组件或面板内部，而不是把整页撑宽。
 - 表格、消息流、编辑器、产物区在自身容器内滚动。
 - Playground、会话、多面板页没有错误地整页滚动。
 - 双栏 / 三栏布局中固定侧 `shrink-0`，主内容 `flex-1 min-w-0`。
@@ -56,6 +58,7 @@
 - 没有把筛选栏 / 工具条的固定宽 `160/200/240px` 或示意宽 `300px` 套到业务表单正文；只有筛选栏、紧凑查询区、工具条允许固定宽。
 - 使用 `Form children` 或 `item.control` 自定义字段时，自定义控件外层已补 `w-full min-w-0 max-w-full`，没有绕过 `Form` 的字段宽度约束。
 - AI 入口页的 Hero、`ChatInput`、Tabs、搜索和模板网格直接坐灰底；模板卡 `Card color="white"`；网格 `gap-4`；Tabs 为 `size="sm"`。
+- `<Tabs />` 默认保持 `overflow="auto"`，父级具备 `min-w-0 max-w-full`；没有给 Tabs 或其父级添加 `w-fit` / `min-w-max` / 固定大宽度导致溢出。
 - `ChatMessage role="user"` 默认保持 `userBubbleTone="auto"`；白色大背景 / 白色工作卡内用户气泡应自动呈现 `fill-default` 灰底，浅灰或其他非白背景上应呈现白色气泡；不要在白底上强行写 `userBubbleTone="surface"`。
 
 ---
@@ -69,6 +72,8 @@
 - 品牌青绿只用于焦点、激活、链接、品牌状态和标题竖条。
 - AI 渐变只出现在明确 AI 语义面。
 - 每个区域最多一个 primary 主按钮。
+- 密集内容区（表格、表单、日志、配置、代码、结果、长编辑器）使用稳定白底或组件指定背景；不使用 AI 渐变、透明玻璃、弱对比背景或整卡 hover lift。
+- 分隔线只用于真实结构边界：表格头、滚动区边界、弹窗头尾、分栏、工具条；没有在每个卡片 header / section / footer 上习惯性叠加横线。
 
 ---
 

package/skills/tfds/COMMON_FAILURES.md

@@ -22,6 +22,9 @@
 - §14 没有先选布局 Recipe，导致容器和间距混乱
 - §15 头像用了随机外链或手写 img
 - §16 ChatMessage 用户气泡在白底上仍是白色
+- §17 Tabs / 筛选栏 / 按钮组横向溢出
+- §18 结构容器被误加整卡 hover
+- §19 密集内容用了弱对比或渐变背景
 
 ---
 
@@ -152,6 +155,7 @@ style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-lg)' }}
 
 - 同一区域互斥内容切换必须用 `<Tabs />`（禁止用 Button/Tag 冒充）。
 - 内容区（白卡/面板/表单分段/筛选维度/Playground）默认 **一律** `size="sm"`（省略 size 也等价）；只有平台顶部 header / 页面级顶导 / 产品级一级导航才允许 `md/lg`。
+- 保持 Tabs 默认 `overflow="auto"`；窄容器中由 Tabs 内部横向滚动，不要用 `w-fit` / `min-w-max` 把父容器撑宽。
 
 ---
 
@@ -236,3 +240,47 @@ style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-lg)' }}
 - 默认不传 `userBubbleTone`，让组件使用 `auto` 根据最近父级背景自动适配。
 - 白色大背景 / 白色工作卡内应呈现灰色 `fill` 气泡；复杂白底无法识别时显式传 `userBubbleTone="fill"`。
 - 浅灰、蓝灰、AI 会话灰底等非白背景应呈现白色 `surface` 气泡；只有复杂非白背景无法识别时才显式传 `userBubbleTone="surface"`。
+
+---
+
+## 17. Tabs / 筛选栏 / 按钮组横向溢出
+
+**现象**：页面或卡片右侧出现被撑开的空白，Tabs 超出卡片边界，筛选控件或按钮组被裁切、挤出白卡，默认浏览器缩放下需要横向滚动整页。
+
+**原因**：横向 flex 子项漏写 `min-w-0`，或给 Tabs / 筛选行 / 操作区写了 `w-fit`、`min-w-max`、固定大宽度、`overflow-visible`；也可能把所有筛选项强制塞进一行，未允许 wrap 或内部滚动。
+
+**修复**：
+
+- Tabs：直接使用 `<Tabs />` 默认 `overflow="auto"`；父级补 `min-w-0 max-w-full overflow-hidden`，不要覆写为 `w-fit` / `min-w-max`。
+- 筛选栏：使用 `flex items-center flex-wrap gap-2`；搜索约 240px，筛选控件 160-200px，按钮 `shrink-0`。
+- 表单 / 参数网格：使用 `grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))` 或在窄面板降为单列。
+- 操作按钮组：右侧 action 区 `shrink-0 flex flex-wrap justify-end gap-2`；超过可读宽度时收进更多菜单。
+- 表格 / 代码 / 日志超宽时，只允许对应内容区 `overflow-auto`，禁止把整页撑宽。
+
+---
+
+## 18. 结构容器被误加整卡 hover
+
+**现象**：主工作白卡、设置面板、结果面板、详情侧栏等结构容器 hover 时整块变白、加阴影或浮起，页面像入口卡片列表，工作区层级变乱。
+
+**原因**：AI 把“可点击入口卡”的 hover 反馈套到了结构性工作容器上。
+
+**修复**：
+
+- 只有明确可点击的入口卡、列表项、选项卡片、推荐卡片可以做 hover fill / shadow / lift。
+- 主工作白卡、表单面板、表格容器、代码结果面板、对话区、详情侧栏等结构容器不做整卡 hover。
+- 结构容器内部的按钮、行、tab、选项可以保留各自 hover；反馈只发生在真正可交互的子元素上。
+
+---
+
+## 19. 密集内容用了弱对比或渐变背景
+
+**现象**：表格、表单、日志、代码、JSON、配置项、运行结果放在透明、渐变、浅彩色背景上，文字和边界变虚，扫描效率下降。
+
+**原因**：把 AI 语义面、推荐卡或装饰性背景误用于密集工作内容。
+
+**修复**：
+
+- 表格、表单、日志、配置、代码、结果、长文本编辑器必须使用稳定白底、`Card color="grey"` 或组件指定的代码 / 填充背景。
+- AI 渐变只用于 AI 生成内容、推荐、诊断、洞察、AI 标识；不要用于用户可编辑输入区或普通业务数据区。
+- 需要层级时先用 `FormTitle`、间距、行线、轻填充、组件边界，不要用大面积渐变或透明玻璃制造层级。

package/skills/tfds/DESIGN_PRINCIPLES.md

@@ -66,6 +66,7 @@ TFDS 的密度应当像成熟企业软件：信息多，但不乱。
 - 表格、列表、会话、编辑器应撑满可用空间，而不是堆成窄窄一列
 - 重要说明完整展示；列表预览、文件名、模型 ID 可省略，但必须配 Tooltip 或详情入口
 - 不为了“留白好看”牺牲数据对比效率
+- 默认浏览器缩放下必须可用；不要通过缩小页面、扩大浏览器或隐藏控件来掩盖布局碰撞、横向溢出和底部操作不可达的问题
 
 ### 1.5 智能能力是局部身份信号，不是全局装饰主题
 
@@ -99,6 +100,8 @@ TFDS 不只服务 AI 工作台。AI 渐变只在页面存在明确智能能力
 - 禁止整页多个黑色主按钮并列，主操作必须收敛
 - 禁止把 Tag、Button、Tabs、Card、FormTitle 用 `div/span` 手搓相似样式
 - 禁止用随机 `text-[15px]`、`p-[18px]`、`#333`、`bg-gray-*` 填补审美空白
+- 禁止把结构性工作容器做成可点击卡片效果：主白卡、表单面板、结果面板、对话区、详情侧栏不做整卡 hover 变色、投影或浮起
+- 禁止把密集表格、表单、日志、代码、配置、结果区放在渐变、透明或弱对比背景上
 
 ---
 
@@ -130,6 +133,7 @@ TFDS 的选中、激活、当前态都很克制。
 - 顶部模块选中：可以使用黑色胶囊，形成明确当前模式
 - 状态徽标：使用低饱和浅底 Tag，避免大面积红/绿/橙背景
 - hover 只做轻微底色、描边或阴影变化，不做浮夸动效
+- hover 反馈必须跟随交互对象本身：按钮、行、选项、入口卡可以响应；工作区容器、设置面板、结果面板只提供稳定边界，不因鼠标经过整体变成“可点击卡”
 
 ### 3.4 信息密度高，但阅读路径清楚
 
@@ -139,6 +143,7 @@ TFDS 的选中、激活、当前态都很克制。
 - 核心对象名用 600 字重，描述和时间戳用 muted 色
 - 筛选区靠近内容标题，筛选控件横向排布且固定宽
 - 分页、总数、每页数量固定在列表底部，不漂浮在内容中间
+- Tabs、筛选栏、按钮组、表单网格和工具条必须适配容器宽度；当信息过多时优先局部滚动、换行或收进更多菜单，不能把卡片或页面撑宽
 
 ### 3.5 工作台优先分屏，不堆叠
 

package/skills/tfds/GLOBAL_DESIGN_RULES.md

@@ -308,6 +308,7 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 ⛔ **禁止**：`shadow-[0_4px_8px_rgba(0,0,0,0.1)]`、`drop-shadow-2xl`。
 ✅ **只有浮层**（dropdown / dialog / popover / picker）才能加阴影，且由组件自带。
 ✅ **业务语义投影**（如 `shadow-card`、`shadow-list`）只在设计系统已命名的明确场景中使用，不能把任意业务块都升级成新的 shadow primitive。
+✅ **hover 投影仅限可点击对象**：入口卡、列表项、选项卡片、推荐卡片可使用组件约定的 hover 反馈；主工作白卡、表单面板、结果面板、对话区、详情侧栏等结构容器不做整卡 hover、投影或浮起。
 
 
 | ❌ Bad                                                   | ✅ Good           |
@@ -367,6 +368,25 @@ B 端主路径的**标题与密集区强调文案**默认以 **600（`--font-sem
 
 判别口诀：背景色是 `--color-blueGrey-200`（灰）就允许有 border；背景色是 `--color-surface`（白）就**禁止**有 border。
 
+### 5.5.5 分隔线使用纪律
+
+分隔线只用于表达真实结构边界，不能作为“让页面看起来更细”的装饰。
+
+✅ **允许**：
+
+- 表格表头 / 表格行线
+- Modal / Sheet / Drawer 的 header / footer 边界
+- 工具条与可滚动正文之间的边界
+- Split pane / 可拖拽分栏边界
+- 白卡内部不同功能区之间的少量 `borderTop` / `borderBottom`
+
+⛔ **禁止**：
+
+- 每个 Card header 都习惯性加一条线
+- 用分隔线替代间距和 FormTitle 层级
+- 在白卡外边界再套一圈 border / ring
+- 为了“精致感”给普通说明区、KPI 块、入口卡片反复加横线
+
 ---
 
 ## 6. 过渡 / 动效规则
@@ -550,6 +570,17 @@ Tabs 是“切换视图”的控件，不是动作按钮；它在内容区需要
 
 ---
 
+## 10.5 密集内容背景规则
+
+表格、表单、日志、配置、代码、运行结果、长文本编辑器属于“工作内容”，首要目标是扫描和编辑效率。
+
+- ✅ 使用稳定白底、`Card color="grey"`、TextArea code variant 或组件自身指定的填充背景。
+- ✅ 需要层级时优先使用 `FormTitle`、间距、表格行线、输入框描边、轻填充，不用装饰背景制造层级。
+- ⛔ 禁止把密集内容放在 AI 渐变、透明玻璃、浅彩色装饰、低对比图片或弱对比背景上。
+- ⛔ 禁止让密集内容区整卡 hover 浮起；只允许行、按钮、选项、tab 等真实交互对象响应 hover。
+
+---
+
 ## 11. 链接（文本品牌色）规则
 
 - ⛔ **禁止**裸 `<a className="text-blue-600 hover:underline" />`

package/skills/tfds/LAYOUT_RULES.md

@@ -35,6 +35,20 @@ TFDS 是**桌面优先**的 B 端工具产品，响应式策略和 C 端不同
 ⛔ **禁止**给 B 端页加 `@media (max-width: 480px)` 的移动端样式（除非用户明确要求）。
 ✅ B 端首要任务是**桌面宽屏可用**，不是 mobile-first。
 
+### 0.1 桌面视口验收点（交付前必查）
+
+生成页面至少按以下桌面尺寸做布局自检，不能只看一个大屏截图：
+
+| 视口 | 必查项 |
+| --- | --- |
+| `1920 × 900` | 页面不被过度居中或收窄；白卡、表格、主工作区充分利用宽度 |
+| `1440 × 900` | 主工作流完整；右侧面板不挤压主区到不可读宽度 |
+| `1280 × 768` | 筛选栏、Tabs、按钮组、表格工具条不溢出；底部操作 / 输入区可达 |
+| `1024 × 768` | 次要侧栏允许折叠 / 收窄 / 内滚；主内容仍可完成核心任务 |
+
+⛔ **禁止**通过浏览器缩放、隐藏关键控件或让 body 横向滚动来掩盖布局问题。  
+✅ 横向超宽内容只能在对应组件 / 面板内部滚动，例如 Table、代码区、Tabs viewport、InfoDisplayPanel 栏内内容。
+
 ---
 
 ## 0.5 滚动模型决策树（生成页面**前**必判）
@@ -101,6 +115,7 @@ prompt editor / prompt workspace / runtime / run result /
 | 表格不撑满、下方空白或撑到很高             | 表格外层缺 `flex-1 min-h-0`（没给高度边界）               | §4.1 表格滚动骨架（表格层内部滚）                | `VariableManagementPage`                     |
 | 卡片内容溢出把整页撑开                 | 卡片正文层没写 `flex-1 min-h-0` 或滚动没下沉              | §3.4 / §3.5（标题固定，正文承担滚动）           | `CreateQAContent`（BasePageFramePattern 内）    |
 | 组件基线不齐（标题、筛选、表格上沿对不齐）       | 乱用 margin/padding；没有“外框/白卡/白卡内容”三层节奏         | 统一按：外框 `p-4`、白卡间 `gap-2`、白卡内 `p-6` | `pageListShared.jsx`（节奏参考）                   |
+| Tabs / 筛选栏 / 按钮组撑破卡片或页面 | 横向 flex 漏 `min-w-0`；Tabs 或父级被写成 `w-fit` / `min-w-max` / 固定大宽度 | Tabs 保持默认内部横向滚动；父级 `min-w-0 max-w-full overflow-hidden`；筛选和操作区允许 wrap / 更多菜单 | `Tabs` 组件规则 + `pageListShared.jsx` |
 
 
 > ⚠️ 说明：样例文件里可能存在“为了 demo 嵌入 NavBar 框架而写的局部 margin/padding”。**你在生成新页面时，不要复制这些零散 margin**；只复制“骨架关系”（`flex-1 / min-h-0 / min-w-0 / overflow-`*）与“三层间距金字塔”的层级节奏。
@@ -837,6 +852,17 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 
 > ⚠️ 自检：如果你看到 `Input` 出现在白卡正文里但没有 `w-full`（或没有明确 `width`），先按本节修复；不要用 margin/justify 去“摆正”，那只是掩盖问题。
 
+### 6.4 横向控件组防溢出（Tabs / 筛选 / 操作区）
+
+横向控件组的目标是“保持同一行流内可用”，不是“强行把所有内容完整铺开”。当空间不足时，优先局部滚动、自然换行或收进更多菜单，禁止撑破白卡或整页。
+
+| 场景 | 正确策略 | 禁止写法 |
+| --- | --- | --- |
+| Tabs / segment | 保持 `<Tabs />` 默认 `overflow="auto"`；父级 `min-w-0 max-w-full overflow-hidden` | `w-fit` / `min-w-max` / `overflow-visible` / 固定大宽 |
+| 筛选栏 | `flex items-center flex-wrap gap-2`；搜索约 240px，筛选控件 160-200px | `flex-nowrap` 强塞一行、每个控件 `w-full`、筛选行 `overflow-hidden` 裁切 |
+| Header 操作区 | `shrink-0 flex flex-wrap justify-end gap-2`；超过 3-4 个动作时收进更多菜单 | 所有按钮固定一行并挤压标题 / Tabs |
+| 表单参数网格 | `auto-fit + minmax(min(100%, 240px), 1fr)`，窄面板降单列 | 两列固定宽导致标签与控件重叠 |
+
 ### 6.2 例外：表单页可局部收窄
 
 表单页/详情页**主标题区**可以**局部**加 `max-w-[1280px] mx-auto` 防止单行表单过长难读：
@@ -943,6 +969,8 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 | 弹窗被裁              | 高度超出视口看不到底部                                     | 弹窗加 `max-height: 80vh + overflow-y-auto`                                                                                                       |
 | 文字溢出              | 长字符把容器撑爆                                        | 文本节点加 `truncate` 或 `break-words`，父容器加 `min-w-0`                                                                                                |
 | 白叠白               | 白卡里直接放白 Card                                    | 内层 Card 改 `color="grey"`                                                                                                                       |
+| Tabs / 筛选栏 / 按钮组溢出 | 控件超出卡片右边界或把页面撑出横向滚动 | Tabs 保持默认 `overflow="auto"`；父级补 `min-w-0 max-w-full overflow-hidden`；筛选和操作区允许 wrap，超出动作收进更多菜单 |
+| 密集内容弱对比 | 表格 / 表单 / 代码 / 日志放在渐变或透明背景上，文字发虚 | 改回稳定白底、组件指定代码背景或灰底 Card；AI 渐变只用于 AI 语义内容，不用于编辑和数据密集区 |
 | 整页有外圈圆角           | 灰底没贴浏览器边                                        | 移除根容器 `rounded` 与 `border`                                                                                                                     |
 | Playground 多面板整页滚 | 调参数得滚下去看结果 / 写 prompt 得滚回去看输入                   | 按 § 3.4 / § 12.7 改造：根容器 `h-dvh + overflow-hidden`、main `overflow-hidden`、面板正文 `flex-1 min-h-0 overflow-y-auto`                                 |
 | 子面板互相挤压（A 撑死 B）   | 上下两块卡片其中一块完全看不见 / 高度不对                          | 父 `flex-col gap-2`；定高块 `shrink-0`，弹性块 `flex-1 min-h-0` + 内部 `overflow-y-auto`                                                                  |
@@ -1057,6 +1085,9 @@ const [leftCardWidth, setLeftCardWidth] = useState(260);
 - ✅ 正确：外层用 **flex 两栏**，左栏 `shrink-0`，右栏 `flex-1 min-w-0`
 - ⛔ 禁止：把左栏写成固定宽度网格列（如 `grid-cols-[400px_1fr]`）或外层固定 `w-[400px]`，否则会出现“内容缩了但列不缩”的大空白，右侧无法自适应扩展
 - ✅ 若必须用 grid：左列必须是 `auto`（`grid-cols-[auto_1fr]`）
+- ✅ 当 `ConversationList variant="card"` 作为客服工作台左侧卡片列表时，卡片消息区是右侧 `IMConversationPattern` 完整气泡流的缩小窗口：若右侧有 20 条可展示气泡，左侧卡片必须通过固定高度 + `overflow-y-auto` 内滚查看同一批 20 条气泡
+- ⛔ 禁止把左侧卡片消息流当摘要：不要 `.slice()` 只取最后几条、不要只展示最近 3-4 条、不要改写成营销摘要或状态总结；左侧每条气泡的文案、角色和气泡颜色语义必须与右侧 IM 一一对应
+- ✅ 角色/颜色映射必须保持同源：`user` → 左灰 / `incomingTone="grey"`，`bot` → AI 渐变 / `outgoingTone="ai"`，`agent` → 人工客服浅青 / `outgoingTone="default"`；左侧允许隐藏 `system` 提示、头像、时间或降低字号，但不允许减少气泡消息条数
 
 推荐骨架（直接照抄）：