@tfdesign/b-end 1.0.13 → 1.0.15

package/src/_b_end_runtime/preview-registry.jsx

@@ -1171,13 +1171,14 @@ export const PREVIEW_REGISTRY = {
           { id: 'product', label: '商品卡片' },
           { id: 'info', label: '信息卡片1' },
           { id: 'info2', label: '信息卡片2' },
+          { id: 'info3', label: '信息卡片3' },
         ],
         default: 'default',
       },
     ],
 
     mapProps: (cv, enums) => {
-      const type = ['product', 'info', 'info2'].includes(cv.category) ? cv.category : 'data';
+      const type = ['product', 'info', 'info2', 'info3'].includes(cv.category) ? cv.category : 'data';
       return {
         type,
         color: enums.color || 'white',
@@ -1216,6 +1217,9 @@ export const PREVIEW_REGISTRY = {
       if (category === 'info2') {
         return props.filter((prop) => ['color', 'animatedTone'].includes(prop.name));
       }
+      if (category === 'info3') {
+        return props.filter((prop) => prop.name === 'color');
+      }
       const dataVisibleNames = ['color', 'dataIconVisible'];
       if ((enumValues.dataIconVisible || 'hidden') === 'visible') {
         dataVisibleNames.push('dataIconStyle');
@@ -1228,7 +1232,7 @@ export const PREVIEW_REGISTRY = {
     generateUsage: (enums, cv = {}) => {
       const lines = [`import Card from './components/Card';`];
       const color = enums.color || 'white';
-      const type = ['product', 'info', 'info2'].includes(cv.category) ? cv.category : 'data';
+      const type = ['product', 'info', 'info2', 'info3'].includes(cv.category) ? cv.category : 'data';
       lines.push('');
 
       if (type === 'data') {
@@ -1241,16 +1245,17 @@ export const PREVIEW_REGISTRY = {
       }
 
       if (color === 'grey') {
-        lines.push('/* 白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：白色背景容器里，推荐使用灰底 Card 做层次分隔 */');
         lines.push('<div className="bg-white p-6">');
       } else {
-        lines.push('/* 灰色背景容器里，推荐使用白底 Card 做内容承载 */');
+        lines.push('/* 所有 Card 分类都遵守同一规则：灰色、浅灰或其他非纯白背景容器里，推荐使用白底 Card 做内容承载 */');
         lines.push('<div className="bg-blueGrey-200 p-6">');
       }
       lines.push('  <Card');
       if (type === 'product') lines.push('    type="product"');
       if (type === 'info') lines.push('    type="info"');
       if (type === 'info2') lines.push('    type="info2"');
+      if (type === 'info3') lines.push('    type="info3"');
       if (color !== 'white') lines.push(`    color="${color}"`);
       if (type === 'product') {
         lines.push('    title="海底捞门店通用双人套餐"');
@@ -1281,6 +1286,17 @@ export const PREVIEW_REGISTRY = {
         lines.push('    animatedBadge="AI 推荐"');
         lines.push('    animatedActionText="立即体验"');
         lines.push('    onAction={() => {}}');
+      } else if (type === 'info3') {
+        lines.push('    title="抖音生服订单已签收后还能申请退款吗？"');
+        lines.push('    description="已签收订单仍可在 7 天无理由保障期内发起退款，需提供商品照片或服务异常说明，平台介入后通常 24h 内出结果。"');
+        lines.push('    status="生效"');
+        lines.push('    metaItems={[');
+        lines.push('      { iconName: "tag-01-stroked", value: "QA" },');
+        lines.push('      { iconName: "clock-stroked", value: "2026-04-21 10:30" },');
+        lines.push('      { value: "李思儒" },');
+        lines.push('    ]}');
+        lines.push('    actionAriaLabel="查看知识详情"');
+        lines.push('    onAction={() => {}}');
       } else {
         lines.push('    title="更新用户资料"');
         lines.push('    description="更新用户个人资料信息，支持修改昵称、头像、简介等。"');

package/src/index.d.ts

@@ -155,7 +155,7 @@ export interface TagBarProps extends TfdsCommonProps {
 }
 export const TagBar: React.FC<TagBarProps>;
 
-/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。 */
+/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。所有卡片分类统一遵循背景反衬原则：灰色/浅灰/非纯白背景用白底卡，纯白背景用灰底卡。 */
 export interface CardProps extends TfdsCommonProps {
   /** enum<data | product | info | info2 | animated>, default: "data" */
   type?: "data" | "product" | "info" | "info2" | "animated";
@@ -261,7 +261,7 @@ export interface ConversationListProps extends TfdsCommonProps {
 }
 export const ConversationList: React.FC<ConversationListProps>;
 
-/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并可按当前选中 tab 拆分出独立栏，最多支持 3 栏。 */
+/** InfoDisplayPanel — 信息展示面板框架，用于客服工作台、在线 Agent、工单详情右侧信息区等场景；默认以主栏承载全部 tabs，并按业务动态 tab1 / tab2 / tab3 拆分为 1-3 栏，支持整体宽度与栏间宽度拖拽。 */
 export interface InfoDisplayPanelProps extends TfdsCommonProps {
   /** array, default: null */
   panels?: unknown[];
@@ -452,6 +452,8 @@ export interface TabsProps extends TfdsCommonProps {
   defaultIndex?: number;
   /** function, default: null */
   onChange?: (...args: any[]) => any;
+  /** enum<auto | visible>, default: "auto" */
+  overflow?: "auto" | "visible";
 }
 export const Tabs: React.FC<TabsProps>;