@tfdesign/b-end 1.0.11 → 1.0.12

package/src/_b_end_runtime/patterns.js

@@ -43,6 +43,8 @@ export const PATTERNS = [
       '【Figma 对齐】默认视觉对齐 Figma 节点 8279:67909「在线Agent」：根容器浅灰底 `--color-blueGrey-200`、16px 内边距、顶部 24px 状态条、下方左侧半透明板块 + 右侧主白卡；6 个可见圆角统一为 16px：左侧板块左上 / 左下，右侧主白卡四角。',
       '【结构】根节点必须直接作为页面主工作区或右侧主内容区的一级框架；内部顺序固定为 Header（客服名称 / 在线状态 / 指标工具 / 模式切换） + Workspace（左侧上下文占位 + 右侧主面板）。不要再用大白卡或 `bg-surface rounded-*` 包住整个模板。',
       '【顶部栏】左侧显示客服名称与在线时长；中部数据栏必须默认按页面可用宽度动态居中，不随左侧客服名称或右侧模式切换偏移；指标容器使用 `bg-white/60 + border-white + radius-md + px-4 py-1`；在线状态胶囊与工具入口这类按钮化页面元素必须复用基础 `Button`；右侧基础模式 / 托管模式属于同页模式切换，必须复用基础 `Tabs`，默认使用 `variant="segment"`，不要手写 tab button 或用 NavBar 替代。',
+      '【顶部数据】指标区左侧数据仅用于展示当前页面相关的高优关注数据，形式固定为 Icon + 数字值；最多展示 4 类数据，超出时应按业务优先级裁切；每一类数据都必须支持 hover/focus 通过 Tooltip 查看文案解释，tooltip 文案优先来自 `tooltip` / `description`，否则回退到 `label`。',
+      '【顶部工具】指标区右侧按钮仅用于平台框架级入口，例如全局设置、平台公告、平台数据统计等；最多展示 3 个按钮，超出时应按平台级优先级裁切；按钮必须复用 `Button iconOnly` 并提供 `tooltip` / `aria-label`，不要放置页面内局部操作或业务表单操作。',
       '【工作区层级】Workspace 外层只负责横向布局、覆盖层级与拖拽，不承担可见圆角；左侧板块自身为 `bg-white/50 + border-white + rounded-xl`，右侧主面板自身为白色 `surface + border-white + rounded-xl`，两者高度一致、宽度不同，并通过主面板 `margin-left: -32px` 形成“右侧白板覆盖在左侧灰板上”的叠压视觉，而不是中间留缝的并排关系。',
       '【可见圆角】最终可见的 6 个角统一为 16px：左侧板块左上 / 左下两个角露出；右侧主白卡四角露出；左侧板块右上 / 右下两个角必须被右侧主白卡完整覆盖。主面板覆盖量必须大于圆角半径（推荐 32px = 2 × 16px），防止主面板左上 / 左下圆角切角处露出左侧板块的右边界或描边，避免出现“残缺一块”的视觉。',
       '【左右拖拽】左侧区域与右侧主白卡之间必须提供纵向拖拽热区，默认热区 8px；拖拽热区覆盖在主面板左边缘上，不占用布局宽度、不制造中间空隙；拖动时调整左侧区域宽度并让右侧主面板 `flex-1 min-w-0` 自动占满剩余空间；左侧默认宽度 432px（400px 可视会话列表 + 32px 主面板覆盖区）；拖拽最小宽度优先由左侧业务组件最小可用宽度决定，例如 ConversationList 默认列表纯头像锁定 88px 时，左侧板块最小宽度为 `max(100px 框架兜底, 88px + 32px 覆盖区) = 120px`；ConversationList 卡片列表最小内容宽度为 333px，左侧板块最小宽度为 365px；右侧纯白主容器最小宽度 380px，左侧最大可拖宽度需按 `工作区宽度 + 32px 覆盖量 - 380px` 动态计算；拖拽条需支持键盘左右方向键微调。',
@@ -95,6 +97,7 @@ export default function CustomerServicePage() {
       '【布局 Recipe】必须按 `LAYOUT_RECIPES.md` 选择 `base-management`：灰底 AppShell + `main p-4 gap-2` + 一张或多张白色 WorkSurface；页面 header / 顶部 Tabs / 主次操作直接坐灰底。',
       '【五模板定位】本模板只解决“管理一批结构化对象”的 B 端工作区：变量、MCP、策略、知识库、数据资产、审核任务、配置列表等。用户第一步必须是筛选 / 搜索 / 浏览对象 / 批量操作 / 查看详情；如果第一步是“输入一句需求开始 AI 任务”，改用 `ChatHomePagePattern`；如果第一步是“继续追问 AI 任务”，改用 `ChatConversationPattern`；如果右侧主角是对象/产物编辑且 AI 只是侧助，改用 `CopilotPagePattern`；如果是真实客服/私信线程，改用 `IMConversationPattern`。',
       '【组件选型门禁】白卡标题必须用 `FormTitle`；筛选字段按语义用 `Input` / `Select` / `DatePicker` / `TagInput` / `Checkbox`；结构化列表必须用 `Table`；状态/类型/数量徽标必须用 `Tag`；所有操作必须用 `Button`；左侧分类维度必须用 `TagBar`；弹层按复杂度用 `Modal` 或 `Sheet`；空状态用 `Empty`。禁止手写标题、状态徽标、表格、筛选胶囊或按钮。',
+      '【筛选栏同一行硬约束】列表页白卡顶部筛选栏是查询工具条，不是业务正文表单；搜索框、下拉框 / 日期 / 标签等筛选控件、重置与查询按钮必须处在同一行流内，默认使用 `flex items-center flex-wrap gap-2`。搜索框建议宽 240px，下拉筛选建议 160-200px，按钮 `shrink-0`；仅当容器宽度不足时允许在同一个 flex 行流中自然换行，禁止每个控件独占一行、禁止用 `flex-col` / `space-y-*` / `Form layout="vertical"` 把搜索框、下拉框和按钮上下堆叠。',
       '【页面范式选型总则】TFDS 页面框架不只有一种白卡管理页范式。生成页面前必须先判断“用户当前要完成什么任务”，再在 `BasePageFramePattern`、`ChatHomePagePattern`、`ChatConversationPattern`（必要时 `CopilotPagePattern`）之间选最合适的页面模板，禁止把所有页面默认都生成成白卡单栏/双栏/多栏管理页。',
       '【判断标准】用“用户进入页面后的第一步动作”决定布局：第一步是“发起一个 AI 任务 / 输入一句需求 / 从模板开始”→ 优先 `ChatHomePagePattern`（AI 入口页）；第一步是“围绕一个已开始的任务持续追问、查看消息流、继续与 AI 协作”→ 优先 `ChatConversationPattern`（AI 对话页）；第一步是“筛选、搜索、浏览对象列表、查看详情、批量操作结构化信息”→ 优先 `BasePageFramePattern`（白卡管理页）。',
       '【AI入口页适用场景】当 `ChatInput` 本身就是页面的核心主功能，且页面目标是“帮助用户开始一件事”而不是“先管理一批对象”时，必须优先使用 `ChatHomePagePattern`。典型场景：AI 工作台首页、智能分析入口、模板广场、报告生成入口、用户尚未进入具体上下文的助手首页。此时核心输入区与推荐内容应直接坐落在浅灰大背景上，不要强行套成典型白卡后台页。',
@@ -202,10 +205,10 @@ export default function MyPage({ defaultSelectedItemId = 'example-1' }) {
       '【组件选型门禁】主输入必须用 `ChatInput`，不可用原生 textarea 或 Input 冒充 AI 输入；模板/助手/案例推荐必须用 `Card`；分类切换必须用 `Tabs`；搜索框用 `Input` + `Icon` 前缀；无结果用 `Empty`。禁止用 Button/Tag 排一行冒充 Tabs，禁止手写卡片。',
       '【整体背景】页面以浅灰大背景（`--color-blueGrey-200`）为主：Hero、筛选行、卡片网格**直接坐灰底**，不要再额外包一整张“右侧白色大卡片容器”（白卡只用于推荐卡片本身）。',
       '【反例扫描】如果同一右侧首页函数里同时出现 `ChatInput`、模板 `Card` 网格，并且外层存在 `background: var(--color-surface)` / `bg-surface rounded-*` 包住 Hero + 输入框 + Tabs + 网格，说明 AI 把入口页误生成成白卡管理页，必须拆掉这层 wrapper。',
-      '【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-hidden`，由内部区域控制滚动。',
-      '【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；默认使用 `ChatInput variant="default"` 作为入口主输入；标准节奏为 `padding: 120px 40px 80px`。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。',
-      '【筛选与分类】分类切换必须用 `Tabs size="sm"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索，搜索框约 240px，空间不足允许换行。',
-      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color="white"`；列表区域 `flex-1 min-h-0 overflow-y-auto` 独立滚动，不挤压上方区域。',
+      '【框架不动】外框灰底 + 左侧 `NavBar` 固定不变；右侧内容区必须 `flex-1 min-w-0 min-h-0 overflow-y-auto overflow-x-hidden`，由右侧内容区作为唯一滚动容器承载整体页面滚动；Hero、ChatInput、筛选行、卡片网格要一起被滑动，禁止只让下方卡片列表单独 `overflow-y-auto`。',
+      '【Hero 区】居中欢迎标题 + 最大宽 680px 的 ChatInput 直接坐浅灰底；Hero 主标题使用 `text-4xl leading-10`；默认使用 `ChatInput variant="default"` 作为入口主输入；标准节奏为 `padding: 84px 40px 80px`，标题区较旧版整体上移 36px。标题区副标题与 ChatInput 之间必须保留 48px 间距（比普通标题说明节奏额外增加 24px），保证输入框不贴近标题区。AI 渐变只用于输入框内部 / AI 标识，不作为整块 Hero 白底。',
+      '【筛选与分类】分类切换必须用 `Tabs size="sm"`；筛选行 `padding: 16px 40px`，左 Tabs、右搜索。模板/助手搜索框是辅助筛选入口，不是页面主输入，必须固定宽度并自动对齐到页面右侧：用外层 `<div className="ml-auto shrink-0" style={{ flex: "0 0 240px", width: "240px", minWidth: "240px", maxWidth: "240px" }}>` 包裹 `Input`。注意 Input 组件的 `style` 会透传到原生 input，不要把固定宽直接写在 Input 上；Tabs 外层使用 `flex shrink-0` 保持左侧胶囊 Tabs 可见。筛选行容器禁止使用 `flex-wrap`、`justify-between`、`space-y-*`、`flex-col`；禁止让筛选搜索框 `flex-1`、`w-full`、撑满 Tabs 右侧剩余空间，或换到 Tabs 下方单独占一行。',
+      '【卡片列表】使用自适应 grid（优先 `repeat(auto-fit, minmax(min(320px, 100%), 1fr))`），网格 `gap-4`，禁止固定列宽导致窄屏横向溢出；卡片使用 `Card color="white"`；列表区域作为普通内容块跟随右侧页面整体滚动，使用 `shrink-0` + `padding: 0 40px 40px`，禁止在卡片列表自身设置 `overflow-y-auto` 造成只有卡片区滚动。',
       '【内容可扩展】Tab 项数量和卡片数据替换为业务真实数据；卡片 stats/tags 按业务维度自定义',
     ],
     code: `import NavBar from './components/NavBar';
@@ -222,6 +225,13 @@ const CATEGORY_TABS = [
   { label: '数据分析', icon: <Icon name="bar-chart-01-stroked" /> },
 ];
 
+const TEMPLATE_SEARCH_WRAP_STYLE = {
+  flex: '0 0 240px',
+  width: '240px',
+  minWidth: '240px',
+  maxWidth: '240px',
+};
+
 export default function ChatHomePage() {
   return (
     <div
@@ -236,44 +246,46 @@ export default function ChatHomePage() {
         <NavBar platform="ola" selectedItemId="knowledge" />
       </div>
 
-      <div className="flex flex-1 min-w-0 min-h-0 flex-col overflow-hidden">
+      <div className="flex flex-1 min-w-0 min-h-0 flex-col overflow-y-auto overflow-x-hidden">
           {/* Hero 区：欢迎语 + ChatInput */}
           <div
             className="flex flex-col items-center shrink-0"
             style={{
-              padding: '120px 40px 80px',
+              padding: '84px 40px 80px',
             }}
           >
             <div className="flex flex-col items-center gap-2 w-full text-center">
-              <h1 className="m-0 text-3xl [font-weight:var(--font-semibold)] leading-9" style={{ color: 'var(--foreground)' }}>
+              <h1 className="m-0 text-4xl [font-weight:var(--font-semibold)] leading-10" style={{ color: 'var(--foreground)' }}>
                 今天想做什么？
               </h1>
               <p className="m-0 text-sm" style={{ color: 'var(--foreground-muted)' }}>
                 从下方搜索助手，或直接输入你的需求，AI 帮你快速搞定
               </p>
             </div>
-            <div className="w-full" style={{ maxWidth: '680px' }}>
+            <div className="w-full" style={{ maxWidth: '680px', marginTop: '48px' }}>
               <ChatInput variant="default" placeholder="描述你想完成的任务…" />
             </div>
           </div>
 
-          {/* 筛选行：Tabs + 搜索，直接坐灰底 */}
+          {/* 筛选行：Tabs + 固定宽搜索，直接坐灰底 */}
           <div
-            className="flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-4"
+            className="flex min-w-0 shrink-0 items-center gap-4"
             style={{ padding: '16px 40px' }}
           >
-            <Tabs variant="pill" size="sm" items={CATEGORY_TABS} defaultIndex={0} />
-            <Input
-              placeholder="搜索标题、描述"
-              prefix={<Icon name="search-md-stroked" size="sm" />}
-              allowClear
-              className="max-w-full"
-              style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
-            />
+            <div className="flex shrink-0">
+              <Tabs variant="pill" size="sm" items={CATEGORY_TABS} defaultIndex={0} />
+            </div>
+            <div className="ml-auto shrink-0" style={TEMPLATE_SEARCH_WRAP_STYLE}>
+              <Input
+                placeholder="搜索标题、描述"
+                prefix={<Icon name="search-md-stroked" size="sm" />}
+                allowClear
+              />
+            </div>
           </div>
 
-          {/* 卡片列表（可滚动）：卡片自身是白卡，外层不包白卡 */}
-          <div className="flex-1 min-h-0 overflow-y-auto" style={{ padding: '0 40px 40px' }}>
+          {/* 卡片列表：随右侧页面整体滚动，卡片自身是白卡，外层不包白卡 */}
+          <div className="shrink-0" style={{ padding: '0 40px 40px' }}>
             <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}>
               {/* 👉 替换为业务卡片数据 */}
               <Card color="white" title="智能客服助手" description="基于大模型的全渠道客服对话助手" tags={['客服', '对话']} />

package/src/_b_end_runtime/preview-registry.jsx

@@ -645,20 +645,22 @@ const CHATBUBBLE_PRESET_TIMESTAMPS = {
 };
 
 /** 预览用：key 保证切换初始选中 / 禁用 / 枚举时 defaultValue 生效 */
-function RadioPreview({ variant, layout, disabled, initialKey }) {
+function RadioPreview({ variant, styleType, layout, disabled, initialKey }) {
   const defaultValue = initialKey === 'a' ? 'a' : initialKey === 'b' ? 'b' : undefined;
+  const isCardStyle = styleType === 'card' || styleType === 'pureCard';
   return (
     <FormControlPreviewWidth>
       <RadioGroup
-        key={`rp-${variant}-${layout}-${disabled}-${initialKey}`}
+        key={`rp-${variant}-${styleType}-${layout}-${disabled}-${initialKey}`}
         variant={variant}
+        styleType={styleType}
         layout={layout}
         disabled={disabled}
         defaultValue={defaultValue}
       >
-        <Radio value="a">选项 A</Radio>
-        <Radio value="b">选项 B</Radio>
-        <Radio value="c" disabled>选项 C（单项禁用）</Radio>
+        <Radio value="a">{isCardStyle ? '单选框标题' : '选项 A'}</Radio>
+        <Radio value="b">{isCardStyle ? '单选框标题' : '选项 B'}</Radio>
+        <Radio value="c">{isCardStyle ? '单选框标题' : '选项 C'}</Radio>
       </RadioGroup>
     </FormControlPreviewWidth>
   );
@@ -2042,6 +2044,8 @@ export const PREVIEW_REGISTRY = {
         options: [
           { id: 'task-plan', label: '任务规划' },
           { id: 'config-form', label: '配置表单' },
+          { id: 'option-card', label: '澄清确认卡片1' },
+          { id: 'form-card', label: '澄清确认卡片2' },
         ],
         default: 'task-plan',
         hidden: ({ controlValues }) => (controlValues.subComponent || 'execution-flow') !== 'card',
@@ -2212,6 +2216,59 @@ export const PREVIEW_REGISTRY = {
             '  timestamp="18:16"',
             '/>',
           ],
+          'option-card': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  confirms={[',
+            '    {',
+            '      mode: "option-card",',
+            '      title: "澄清确认",',
+            '      iconName: "clipboard-check-stroked",',
+            '      primaryActionLabel: "确认",',
+            '      defaultSelectedValue: "handoff-guide",',
+            '      options: [',
+            '        { value: "handoff-guide", label: "方案1： 用户请求转人工但系统未触发转接，持续引导自助操作" },',
+            '        { value: "handoff", label: "方案2： 用户请求转人工" },',
+            '        { value: "self-service", label: "方案3： 持续引导自助操作" },',
+            '      ],',
+            '      onPrimaryAction: ({ value, option }) => {},',
+            '    },',
+            '  ]}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
+          'form-card': [
+            '<ChatMessage',
+            '  header',
+            '  title=""',
+            '  steps={null}',
+            '  confirms={[',
+            '    {',
+            '      mode: "form-card",',
+            '      title: "澄清确认",',
+            '      iconName: "clipboard-check-stroked",',
+            '      primaryActionLabel: "确认",',
+            '      formItems: [',
+            '        { id: "scene", label: "业务场景", type: "select", placeholder: "请选择业务场景", defaultValue: "after-sales", options: [',
+            '          { value: "after-sales", label: "售后服务" },',
+            '          { value: "pre-sales", label: "售前咨询" },',
+            '          { value: "logistics", label: "物流配送" },',
+            '        ], fullWidth: true },',
+            '        { id: "channel", label: "处理渠道", type: "select", placeholder: "请选择处理渠道", defaultValue: "self-service", options: [',
+            '          { value: "self-service", label: "自助引导" },',
+            '          { value: "handoff", label: "转人工" },',
+            '        ], fullWidth: true },',
+            '        { id: "remark", label: "补充说明", type: "input", placeholder: "请输入补充说明（可选）", fullWidth: true },',
+            '      ],',
+            '    },',
+            '  ]}',
+            '  actions',
+            '  timestamp="18:16"',
+            '/>',
+          ],
         },
         'user-message': {
           text: [
@@ -3227,6 +3284,17 @@ export const PREVIEW_REGISTRY = {
     jsxSource: radioJsxRaw,
 
     controls: [
+      {
+        id: 'styleType',
+        label: '样式分类',
+        type: 'seg',
+        options: [
+          { id: 'basic', label: '基础样式' },
+          { id: 'card', label: '带圆点单选卡片' },
+          { id: 'pureCard', label: '单选卡片' },
+        ],
+        default: 'basic',
+      },
       {
         id: 'initialKey',
         label: '初始选中',
@@ -3251,6 +3319,7 @@ export const PREVIEW_REGISTRY = {
     ],
 
     mapProps: (cv) => ({
+      styleType: cv.styleType || 'basic',
       initialKey: cv.initialKey || 'none',
       disabled: cv.state === 'disabled',
     }),
@@ -3258,7 +3327,9 @@ export const PREVIEW_REGISTRY = {
     generateUsage: (enums, cv) => {
       const lines = [`import RadioGroup, { Radio } from './components/Radio';`];
       const props = [];
+      const styleType = cv.styleType || 'basic';
       if (enums.variant && enums.variant !== 'brand') props.push(`variant="${enums.variant}"`);
+      if (styleType !== 'basic') props.push(`styleType="${styleType}"`);
       if (enums.layout && enums.layout !== 'vertical') props.push(`layout="${enums.layout}"`);
       if (cv.initialKey === 'a') props.push('defaultValue="a"');
       if (cv.initialKey === 'b') props.push('defaultValue="b"');
@@ -3268,9 +3339,15 @@ export const PREVIEW_REGISTRY = {
       lines.push('<RadioGroup');
       props.forEach((p) => lines.push(`  ${p}`));
       lines.push('>');
-      lines.push('  <Radio value="a">选项 A</Radio>');
-      lines.push('  <Radio value="b">选项 B</Radio>');
-      lines.push('  <Radio value="c" disabled>选项 C（单项禁用）</Radio>');
+      if (styleType === 'card' || styleType === 'pureCard') {
+        lines.push('  <Radio value="a">单选框标题</Radio>');
+        lines.push('  <Radio value="b">单选框标题</Radio>');
+        lines.push('  <Radio value="c" disabled>单选框标题</Radio>');
+      } else {
+        lines.push('  <Radio value="a">选项 A</Radio>');
+        lines.push('  <Radio value="b">选项 B</Radio>');
+        lines.push('  <Radio value="c" disabled>选项 C（单项禁用）</Radio>');
+      }
       lines.push('</RadioGroup>');
       return lines.join('\n');
     },

package/src/index.d.ts

@@ -636,10 +636,12 @@ export interface SelectProps extends TfdsCommonProps {
 }
 export const Select: React.FC<SelectProps>;
 
-/** RadioGroup — 互斥单选：同一组内只能选一个值。适合选项少、需要并排或纵列展示全部标签的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。 */
+/** RadioGroup — 互斥单选：同一组内只能选一个值。支持基础样式、带圆点单选卡片、单选卡片 3 类形态，适合选项少且需要平铺比较的表单场景。多选请用 CheckboxGroup；布尔即时开关请用 Switch；选项很多请用 Select。 */
 export interface RadioGroupProps extends TfdsCommonProps {
   /** enum<brand | black>, default: "brand" */
   variant?: "brand" | "black";
+  /** enum<basic | card | pureCard>, default: "basic" */
+  styleType?: "basic" | "card" | "pureCard";
   /** enum<vertical | horizontal>, default: "vertical" */
   layout?: "vertical" | "horizontal";
   /** boolean, default: false */