@tfdesign/b-end 1.0.8 → 1.0.10

package/src/_b_end_runtime/preview-registry.jsx

@@ -1109,14 +1109,20 @@ export const PREVIEW_REGISTRY = {
     component: CardPreview,
     tokenMap: CARD_TOKEN_MAP,
     jsxSource: cardJsxRaw,
-    configHiddenEnums: ['type', 'infoIconTone', 'infoMetaBadgeVariant', 'dataIconTone'],
+    configHiddenEnums: ['type', 'infoMetaBadgeVariant', 'dataIconTone'],
+    previewBgEnumBinding: {
+      name: 'color',
+      map: { grey: 'white', white: 'grey' },
+    },
     enumTitles: {
       color: '颜色',
+      infoIconTone: '图标色系',
       infoIconStyle: '图标样式',
       infoLayout: '图标位置',
       productInfoLayout: '图标位置',
       dataIconVisible: '是否显示图标',
       dataIconStyle: '图标样式',
+      animatedTone: '图标色系',
     },
 
     controls: [
@@ -1127,14 +1133,15 @@ export const PREVIEW_REGISTRY = {
         options: [
           { id: 'default', label: '数据卡片' },
           { id: 'product', label: '商品卡片' },
-          { id: 'info', label: '信息卡片' },
+          { id: 'info', label: '信息卡片1' },
+          { id: 'info2', label: '信息卡片2' },
         ],
         default: 'default',
       },
     ],
 
     mapProps: (cv, enums) => {
-      const type = cv.category === 'product' || cv.category === 'info' ? cv.category : 'data';
+      const type = ['product', 'info', 'info2'].includes(cv.category) ? cv.category : 'data';
       return {
         type,
         color: enums.color || 'white',
@@ -1146,14 +1153,21 @@ export const PREVIEW_REGISTRY = {
         infoMetaBadgeVariant: undefined,
         dataIconVisible: enums.dataIconVisible || 'hidden',
         dataIconStyle: enums.dataIconStyle || 'inverse',
+        animatedTone: enums.animatedTone || 'grey',
       };
     },
 
-    getVisibleEnumProps: ({ enumProps, controlValues = {} }) => {
+    getVisibleEnumProps: ({ enumProps, controlValues = {}, enumValues = {} }) => {
       const category = controlValues.category || 'default';
       const props = enumProps || [];
       if (category === 'info') {
-        return props.filter((prop) => ['color', 'infoIconStyle', 'infoLayout'].includes(prop.name));
+        const visibleNames = ['color', 'infoLayout', 'infoIconStyle'];
+        if ((enumValues.infoIconStyle || 'inverse') === 'tone') {
+          visibleNames.push('infoIconTone');
+        }
+        return visibleNames
+          .map((name) => props.find((prop) => prop.name === name))
+          .filter(Boolean);
       }
       if (category === 'product') {
         const colorProp = props.find((prop) => prop.name === 'color');
@@ -1163,13 +1177,22 @@ export const PREVIEW_REGISTRY = {
           layoutProp ? { ...layoutProp, name: 'productInfoLayout', default: 'default' } : null,
         ].filter(Boolean);
       }
-      return props.filter((prop) => ['color', 'dataIconVisible', 'dataIconStyle'].includes(prop.name));
+      if (category === 'info2') {
+        return props.filter((prop) => ['color', 'animatedTone'].includes(prop.name));
+      }
+      const dataVisibleNames = ['color', 'dataIconVisible'];
+      if ((enumValues.dataIconVisible || 'hidden') === 'visible') {
+        dataVisibleNames.push('dataIconStyle');
+      }
+      return dataVisibleNames
+        .map((name) => props.find((prop) => prop.name === name))
+        .filter(Boolean);
     },
 
     generateUsage: (enums, cv = {}) => {
       const lines = [`import Card from './components/Card';`];
       const color = enums.color || 'white';
-      const type = cv.category === 'product' || cv.category === 'info' ? cv.category : 'data';
+      const type = ['product', 'info', 'info2'].includes(cv.category) ? cv.category : 'data';
       lines.push('');
 
       if (type === 'data') {
@@ -1191,6 +1214,7 @@ export const PREVIEW_REGISTRY = {
       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 (color !== 'white') lines.push(`    color="${color}"`);
       if (type === 'product') {
         lines.push('    title="海底捞门店通用双人套餐"');
@@ -1202,18 +1226,33 @@ export const PREVIEW_REGISTRY = {
         lines.push('    description="抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。"');
         lines.push('    infoIconName="magic-wand-01-stroked"');
         lines.push(`    infoIconStyle="${enums.infoIconStyle || 'inverse'}"`);
+        if ((enums.infoIconStyle || 'inverse') === 'tone') {
+          lines.push(`    infoIconTone="${enums.infoIconTone || 'pink'}"`);
+        }
         lines.push(`    infoLayout="${enums.infoLayout || 'icon-right'}"`);
         lines.push('    infoMetaBadge="官方能力"');
         lines.push('    infoMetaLabel="段然"');
         lines.push('    infoStats={[');
-        lines.push('      { iconName: "users-01-stroked", value: "128.6K" },');
-        lines.push('      { iconName: "star-01-stroked", value: "4.9" },');
-        lines.push('      { iconName: "play-circle-stroked", value: "立即体验" },');
+        lines.push('      { iconName: "users-01-stroked", value: "128.6K", tooltip: "累计启用该能力的创作者数量" },');
+        lines.push('      { iconName: "star-01-stroked", value: "4.9", tooltip: "用户综合评分，满分 5 分" },');
+        lines.push('      { iconName: "check-circle-stroked", value: "98.6%", tooltip: "近 30 天内容生成任务成功完成率" },');
         lines.push('    ]}');
+      } else if (type === 'info2') {
+        lines.push('    title="智能策略生成"');
+        lines.push('    description="基于业务目标、历史数据和运营规则，自动生成可执行策略建议。"');
+        lines.push('    animatedIconName="magic-wand-01-stroked"');
+        lines.push(`    animatedTone="${enums.animatedTone || 'grey'}"`);
+        lines.push('    animatedBadge="AI 推荐"');
+        lines.push('    animatedActionText="立即体验"');
+        lines.push('    onAction={() => {}}');
       } else {
         lines.push('    title="更新用户资料"');
         lines.push('    description="更新用户个人资料信息，支持修改昵称、头像、简介等。"');
-        lines.push('    stats={stats}');
+        lines.push('    stats={[');
+        lines.push('      { iconName: "users-01-stroked", value: "1,289", tooltip: "近 7 天触达用户数" },');
+        lines.push('      { iconName: "message-chat-square-stroked", value: "1,289", tooltip: "近 7 天累计会话量" },');
+        lines.push('      { iconName: "hearts-stroked", value: "276", tooltip: "近 7 天收藏或点赞次数" },');
+        lines.push('    ]}');
         lines.push('    tags={["社区", "收藏星标"]}');
         if ((enums.dataIconVisible || 'hidden') === 'visible') {
           lines.push('    dataIconVisible="visible"');

package/src/_b_end_runtime/tokens.js

@@ -188,7 +188,7 @@ export const SEMANTIC_CSS_MAP = {
   'text-tertiary': 'foreground-muted', 'text-disabled': 'foreground-disabled', 'text-inverse': 'foreground-inverse',
   'bg-page': 'page', 'bg-surface': 'surface', 'bg-elevated': 'elevated', 'bg-disabled': 'disabled', 'bg-card-secondary': 'card-secondary', 'bg-chat-incoming': 'chat-incoming', 'bg-chat-outgoing': 'chat-outgoing', 'bg-chat-outgoing-ai': 'chat-outgoing-ai',
   'fill-default': 'fill', 'fill-hover': 'fill-hover', 'fill-active': 'fill-active',
-  'border-default': 'border-default', 'border-strong': 'border-strong', 'border-brand': 'border-brand', 'border-brand-strong': 'border-brand-strong',
+  'border-default': 'border-default', 'border-strong': 'border-strong', 'border-brand': 'border-brand',
   'overlay-bg': 'overlay', 'focus-ring': 'ring',
 };
 
@@ -227,9 +227,6 @@ export const TOKEN_SEMANTIC_MAP = {
   'border-default':       { label: '默认描边',       color: '#E4E7EC', primitiveRef: 'blueGrey-300' },
   'border-strong':        { label: '强调/悬浮描边', color: '#D0D5DD', primitiveRef: 'blueGrey-400' },
   'border-brand':         { label: '品牌描边',       color: '#56D3BC', primitiveRef: 'brand-500' },
-  'border-brand-strong':  { label: '品牌强调描边', color: '#32C4AC', primitiveRef: 'brand-600' },
-  /** rgba 细线：ChatMessage 追问/执行流卡片描边；必须进 theme.css，否则 var() 失效时浏览器退化为深黑描边 */
-  'border-line-light':    { label: '细线描边 rgba',  color: 'rgba(22,24,35,0.08)' },
 
   // ── overlay: 蒙层 ──
   'overlay-bg':           { label: '蒙层背景',       color: 'rgba(22, 22, 26, 0.60)', primitiveRef: 'grey-950/60%' },

package/src/index.d.ts

@@ -47,7 +47,7 @@ export interface IconProps extends TfdsCommonProps {
 }
 export const Icon: React.FC<IconProps>;
 
-/** NavBar — 业务竖向导航栏，集成品牌区、业务入口切换、平台首页模块高亮、主导航、底部工具按钮和用户头像。 */
+/** NavBar — 业务竖向导航栏，集成品牌区、业务入口切换、统一 navItems 主导航、底部工具按钮和用户头像。 */
 export interface NavBarProps extends TfdsCommonProps {
   /** enum<ola | bytehi>, default: "ola" */
   platform?: "ola" | "bytehi";
@@ -67,6 +67,8 @@ export interface NavBarProps extends TfdsCommonProps {
   onAppChange?: (...args: any[]) => any;
   /** string, default: "平台首页" */
   moduleLabel?: string;
+  /** string, default: "home-smile-stroked" */
+  moduleIconName?: string;
   /** boolean, default: true */
   activeModule?: boolean;
   /** array, default: null */
@@ -153,10 +155,10 @@ export interface TagBarProps extends TfdsCommonProps {
 }
 export const TagBar: React.FC<TagBarProps>;
 
-/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片和信息卡片三类结构。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。 */
+/** Card — 业务信息摘要卡片，支持数据卡片、商品卡片、信息卡片1和信息卡片2。颜色使用遵循背景反衬原则：灰色背景用白底卡，白色背景用灰底卡。 */
 export interface CardProps extends TfdsCommonProps {
-  /** enum<data | product | info>, default: "data" */
-  type?: "data" | "product" | "info";
+  /** enum<data | product | info | info2 | animated>, default: "data" */
+  type?: "data" | "product" | "info" | "info2" | "animated";
   /** enum<white | grey>, default: "white" */
   color?: "white" | "grey";
   /** string, default: "智能服务近7天趋势分析" */
@@ -189,6 +191,14 @@ export interface CardProps extends TfdsCommonProps {
   dataIconTone?: "pink" | "blue" | "green" | "orange" | "purple" | "brand" | "grey";
   /** enum<tone | inverse>, default: "inverse" */
   dataIconStyle?: "tone" | "inverse";
+  /** enum<brand | blue | purple | green | orange | grey>, default: "grey" */
+  animatedTone?: "brand" | "blue" | "purple" | "green" | "orange" | "grey";
+  /** string, default: "magic-wand-01-stroked" */
+  animatedIconName?: string;
+  /** string, default: "AI 推荐" */
+  animatedBadge?: string;
+  /** string, default: "立即体验" */
+  animatedActionText?: string;
   /** string, default: "段然" */
   infoMetaLabel?: string;
   /** string, default: "官方能力" */

package/theme.css

@@ -224,8 +224,6 @@
   --color-border-default: var(--color-blueGrey-300);  /* 默认描边 ← blueGrey-300 */
   --color-border-strong: var(--color-blueGrey-400);  /* 强调/悬浮描边 ← blueGrey-400 */
   --color-border-brand: var(--color-brand-500);  /* 品牌描边 ← brand-500 */
-  --color-border-brand-strong: var(--color-brand-600);  /* 品牌强调描边 ← brand-600 */
-  --color-border-line-light: rgba(22,24,35,0.08);  /* 细线描边 rgba ← literal */
   --color-overlay: rgba(22, 22, 26, 0.60);  /* 蒙层背景 ← grey-950/60% */
   --color-ring: var(--color-brand-500);  /* 焦点环 ← brand-500 */