@tfdesign/b-end 1.0.8 → 1.0.10

package/src/_b_end_runtime/components/Card.jsx

@@ -2,12 +2,13 @@ import Avatar from './Avatar';
 import FormTitle from './FormTitle';
 import Icon from './Icon';
 import Tag from './Tag';
+import Tooltip from './Tooltip';
 import duanRanAvatar from './team-avatar-assets/duan-ran.png';
 
 const DEFAULT_STATS = [
-  { iconName: 'users-01-stroked', value: '1,289' },
-  { iconName: 'message-chat-square-stroked', value: '1,289' },
-  { iconName: 'hearts-stroked', value: '276' },
+  { iconName: 'users-01-stroked', value: '1,289', tooltip: '近 7 天触达用户数' },
+  { iconName: 'message-chat-square-stroked', value: '1,289', tooltip: '近 7 天累计会话量' },
+  { iconName: 'hearts-stroked', value: '276', tooltip: '近 7 天收藏或点赞次数' },
 ];
 
 const DEFAULT_TAGS = ['标签', '标签'];
@@ -29,10 +30,15 @@ const DEFAULT_INFO_LAYOUT = 'icon-right';
 const DEFAULT_DATA_ICON_VISIBLE = 'hidden';
 const DEFAULT_DATA_ICON_TONE = 'blue';
 const DEFAULT_DATA_ICON_STYLE = 'inverse';
+const DEFAULT_ANIMATED_TITLE = '智能策略生成';
+const DEFAULT_ANIMATED_DESCRIPTION = '基于业务目标、历史数据和运营规则，自动生成可执行策略建议。';
+const DEFAULT_ANIMATED_ICON = 'magic-wand-01-stroked';
+const DEFAULT_ANIMATED_BADGE = 'AI 推荐';
+const DEFAULT_ANIMATED_ACTION_TEXT = '立即体验';
 const DEFAULT_INFO_STATS = [
-  { iconName: 'users-01-stroked', value: '128.6K' },
-  { iconName: 'star-01-stroked', value: '4.9' },
-  { iconName: 'play-circle-stroked', value: '立即体验' },
+  { iconName: 'users-01-stroked', value: '128.6K', tooltip: '累计启用该能力的创作者数量' },
+  { iconName: 'star-01-stroked', value: '4.9', tooltip: '用户综合评分，满分 5 分' },
+  { iconName: 'check-circle-stroked', value: '98.6%', tooltip: '近 30 天内容生成任务成功完成率' },
 ];
 const DEFAULT_PRODUCT_IMAGE_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(
   "<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='#2B90D9'/><stop offset='100%' stop-color='#0A355A'/></linearGradient></defs><rect width='96' height='96' fill='url(#g)'/><circle cx='72' cy='24' r='10' fill='rgba(255,255,255,0.28)'/><path d='M0 66C13 52 25 49 38 56C50 62 59 60 69 51C76 45 85 43 96 45V96H0Z' fill='rgba(255,255,255,0.24)'/></svg>"
@@ -76,6 +82,38 @@ const DATA_ICON_FRAME_BASE = 'inline-flex h-12 w-12 shrink-0 items-center justif
 const STATS = 'flex flex-wrap items-center gap-5';
 const STAT = 'inline-flex items-center gap-2 text-xs font-normal leading-4 text-foreground-muted';
 
+function renderMetricItem({ iconName, value, tooltip, description }, index, className = STAT) {
+  const statTooltip = tooltip || description;
+  const statNode = (
+    <span
+      className={className}
+      tabIndex={statTooltip ? 0 : undefined}
+    >
+      <Icon name={iconName} size={14} />
+      <span>{value}</span>
+    </span>
+  );
+
+  if (!statTooltip) {
+    return (
+      <span key={`${iconName}-${value}-${index}`}>
+        {statNode}
+      </span>
+    );
+  }
+
+  return (
+    <Tooltip
+      key={`${iconName}-${value}-${index}`}
+      content={statTooltip}
+      placement="top"
+      triggerClassName="inline-flex"
+    >
+      {statNode}
+    </Tooltip>
+  );
+}
+
 /* ── 商品卡片 ── */
 const PRODUCT_IMAGE_FRAME = [
   'relative h-14 w-14 shrink-0 overflow-hidden',
@@ -89,7 +127,7 @@ const PRODUCT_CARD_ICON_RIGHT = 'min-h-[96px] flex-row-reverse items-center gap-
 const PRODUCT_TITLE = 'm-0 line-clamp-1 min-w-0 flex-1 text-base [font-weight:var(--font-semibold)] leading-card-title text-foreground';
 const PRODUCT_DESCRIPTION = 'm-0 line-clamp-1 text-sm font-normal leading-card-copy text-foreground-muted';
 
-/* ── 信息卡片 ── */
+/* ── 信息卡片1 ── */
 const INFO_ICON_FRAME_BASE = 'inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border';
 const INFO_ICON_TONE_CLASS = {
   pink: 'border-pink-100 bg-pink-50 text-pink-600',
@@ -98,7 +136,22 @@ const INFO_ICON_TONE_CLASS = {
   orange: 'border-orange-100 bg-orange-50 text-orange-600',
   purple: 'border-purple-100 bg-purple-50 text-purple-600',
   brand: 'border-brand-100 bg-brand-50 text-brand-600',
-  grey: 'border-blueGrey-100 bg-blueGrey-50 text-blueGrey-600',
+  grey: 'border-border-default bg-fill text-blueGrey-600',
+};
+const INFO_ICON_TONE_HOVER_CLASS = [
+  'transition-colors duration-200',
+  'group-hover:bg-[var(--tfds-card-info-icon-hover-bg)]',
+  'group-hover:border-transparent',
+  'group-hover:text-white',
+].join(' ');
+const INFO_ICON_TONE_HOVER_STYLE = {
+  pink: { '--tfds-card-info-icon-hover-bg': 'var(--color-pink-500)' },
+  blue: { '--tfds-card-info-icon-hover-bg': 'var(--color-blue-500)' },
+  green: { '--tfds-card-info-icon-hover-bg': 'var(--color-green-500)' },
+  orange: { '--tfds-card-info-icon-hover-bg': 'var(--color-orange-500)' },
+  purple: { '--tfds-card-info-icon-hover-bg': 'var(--color-purple-500)' },
+  brand: { '--tfds-card-info-icon-hover-bg': 'var(--color-brand-500)' },
+  grey: { '--tfds-card-info-icon-hover-bg': 'var(--color-black)' },
 };
 const INFO_ICON_STYLE_CLASS = {
   tone: null,
@@ -149,6 +202,70 @@ const INFO_STAT = [
   '[&>svg]:block [&>svg]:shrink-0',
 ].join(' ');
 
+/* ── 信息卡片2 ── */
+const ANIMATED_CARD = [
+  'relative min-h-[180px] flex-col overflow-hidden p-6',
+  'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-blueGrey-300',
+].join(' ');
+const ANIMATED_CONTENT = 'relative z-10 flex min-h-0 flex-1 flex-col justify-between gap-5';
+const ANIMATED_HEADER = 'flex items-start gap-4';
+const ANIMATED_ICON_FRAME = [
+  'inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-[var(--radius-lg)] border',
+  'transition-colors duration-200',
+  'group-hover:[--tfds-card-animated-icon-bg:var(--tfds-card-animated-icon-hover-bg)]',
+  'group-hover:[--tfds-card-animated-icon-border:transparent]',
+  'group-hover:[--tfds-card-animated-icon-color:var(--color-white)]',
+].join(' ');
+const ANIMATED_COPY = 'flex min-w-0 flex-col gap-2';
+const ANIMATED_TITLE = 'm-0 line-clamp-1 text-base [font-weight:var(--font-semibold)] leading-card-title text-foreground';
+const ANIMATED_DESCRIPTION = 'm-0 line-clamp-2 text-sm font-normal leading-card-copy text-foreground-muted';
+const ANIMATED_SLOT = 'text-sm leading-card-copy text-foreground-secondary';
+const ANIMATED_FOOTER = 'flex items-center justify-between gap-4';
+const ANIMATED_TONE_STYLE = {
+  brand: {
+    '--tfds-card-animated-accent': 'var(--color-brand-600)',
+    '--tfds-card-animated-icon-bg': 'var(--color-brand-50)',
+    '--tfds-card-animated-icon-border': 'var(--color-brand-100)',
+    '--tfds-card-animated-icon-color': 'var(--color-brand-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-brand-500)',
+  },
+  blue: {
+    '--tfds-card-animated-accent': 'var(--color-blue-600)',
+    '--tfds-card-animated-icon-bg': 'var(--color-blue-50)',
+    '--tfds-card-animated-icon-border': 'var(--color-blue-100)',
+    '--tfds-card-animated-icon-color': 'var(--color-blue-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-blue-500)',
+  },
+  purple: {
+    '--tfds-card-animated-accent': 'var(--color-purple-600)',
+    '--tfds-card-animated-icon-bg': 'var(--color-purple-50)',
+    '--tfds-card-animated-icon-border': 'var(--color-purple-100)',
+    '--tfds-card-animated-icon-color': 'var(--color-purple-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-purple-500)',
+  },
+  green: {
+    '--tfds-card-animated-accent': 'var(--color-green-600)',
+    '--tfds-card-animated-icon-bg': 'var(--color-green-50)',
+    '--tfds-card-animated-icon-border': 'var(--color-green-100)',
+    '--tfds-card-animated-icon-color': 'var(--color-green-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-green-500)',
+  },
+  orange: {
+    '--tfds-card-animated-accent': 'var(--color-orange-600)',
+    '--tfds-card-animated-icon-bg': 'var(--color-orange-50)',
+    '--tfds-card-animated-icon-border': 'var(--color-orange-100)',
+    '--tfds-card-animated-icon-color': 'var(--color-orange-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-orange-500)',
+  },
+  grey: {
+    '--tfds-card-animated-accent': 'var(--color-blueGrey-700)',
+    '--tfds-card-animated-icon-bg': 'var(--color-fill)',
+    '--tfds-card-animated-icon-border': 'var(--color-border-default)',
+    '--tfds-card-animated-icon-color': 'var(--color-blueGrey-700)',
+    '--tfds-card-animated-icon-hover-bg': 'var(--color-black)',
+  },
+};
+
 /* ── 底部 ── */
 const FOOTER = 'flex w-full items-center justify-between gap-4';
 const ACTION = [
@@ -164,35 +281,39 @@ const ACTION = [
 
 /**
  * Card — 业务信息摘要卡片
- * @prop {'data'|'product'|'info'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片
+ * @prop {'data'|'product'|'info'|'info2'|'animated'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片1，info2 为信息卡片2；animated 为旧版兼容别名
  * @prop {string} [title] — 卡片标题，商品卡片中为商品标题
  * @prop {string} [description] — 卡片描述，商品卡片中为数量、价格等辅助信息
  * @prop {'white'|'grey'} [color='white'] — 卡片颜色：white 为白底默认样式，grey 为 Blue Grey 灰底样式
- * @prop {Array<{iconName: string, value: string}>|null} [stats=null] — 指标数组，建议 1-3 项
- * @prop {string[]|null} [tags=null] — 数据卡片标签数组，建议 1-2 个短标签；商品卡片和信息卡片不渲染通用 tags
+ * @prop {Array<{iconName: string, value: string, tooltip?: string}>|null} [stats=null] — 数据卡片指标数组，最多展示 3 项；tooltip 用于 hover/focus 展示详细说明
+ * @prop {string[]|null} [tags=null] — 数据卡片标签数组，建议 1-2 个短标签；商品卡片和信息卡片1不渲染通用 tags
  * @prop {string} [productStatus='已使用'] — 商品状态标签文案
  * @prop {string} [productImageSrc] — 商品卡片左侧商品图地址
  * @prop {string} [productImageAlt='商品图'] — 商品图无障碍文案
- * @prop {string} [infoIconName='magic-wand-01-stroked'] — 信息卡片左侧图标名称
- * @prop {'pink'|'blue'|'green'|'orange'|'purple'|'brand'|'grey'} [infoIconTone='pink'] — 信息卡片左侧图标色系
- * @prop {'tone'|'inverse'} [infoIconStyle='inverse'] — 信息卡片图标容器样式：tone 为同色系浅底，inverse 为黑底白 icon
- * @prop {'default'|'icon-right'} [infoLayout='icon-right'] — 卡片主视觉布局：信息卡片为 default 左侧图标 / icon-right 右侧图标；商品卡片为 default 左侧商品图 / icon-right 右侧商品图
+ * @prop {string} [infoIconName='magic-wand-01-stroked'] — 信息卡片1左侧图标名称
+ * @prop {'pink'|'blue'|'green'|'orange'|'purple'|'brand'|'grey'} [infoIconTone='pink'] — 信息卡片1左侧图标色系
+ * @prop {'tone'|'inverse'} [infoIconStyle='inverse'] — 信息卡片1图标容器样式：tone 为同色系浅底，inverse 为黑底白 icon
+ * @prop {'default'|'icon-right'} [infoLayout='icon-right'] — 卡片主视觉布局：信息卡片1为 default 左侧图标 / icon-right 右侧图标；商品卡片为 default 左侧商品图 / icon-right 右侧商品图
  * @prop {'hidden'|'visible'} [dataIconVisible='hidden'] — 数据卡片是否展示右侧图标
  * @prop {string|null} [dataIconName=null] — 数据卡片右侧图标名称；dataIconVisible=visible 时生效
  * @prop {'pink'|'blue'|'green'|'orange'|'purple'|'brand'|'grey'} [dataIconTone='blue'] — 数据卡片右侧图标容器色系
  * @prop {'tone'|'inverse'} [dataIconStyle='inverse'] — 数据卡片右侧图标容器样式：tone 为彩色浅底，inverse 为黑底白 icon
- * @prop {string} [infoMetaLabel='段然'] — 信息卡片底部人名昵称
- * @prop {string} [infoMetaBadge='官方能力'] — 信息卡片右上角徽标文案
- * @prop {'brand'|'red'|'orange'|'yellow'|'green'|'cyan'|'blue'|'purple'|'pink'|'teal'|'grey'|'white'|'ai'|null} [infoMetaBadgeVariant=null] — 信息卡片右上角徽标颜色；黑底白标时可覆盖，彩色浅底时固定 grey
- * @prop {string} [infoMetaAvatarSrc] — 信息卡片底部人名昵称头像
- * @prop {string} [infoMetaAvatarAlt='用户头像'] — 信息卡片底部人名昵称头像无障碍文案
- * @prop {Array<{iconName: string, value: string}>|null} [infoStats=null] — 信息卡片底部右侧辅助项数组
+ * @prop {'brand'|'blue'|'purple'|'green'|'orange'|'grey'} [animatedTone='grey'] — 信息卡片2图标色系
+ * @prop {string|null} [animatedIconName='magic-wand-01-stroked'] — 信息卡片2左上角图标
+ * @prop {string|null} [animatedBadge='AI 推荐'] — 信息卡片2左下角徽标
+ * @prop {string|null} [animatedActionText='立即体验'] — 信息卡片2底部右侧操作文案
+ * @prop {string} [infoMetaLabel='段然'] — 信息卡片1底部人名昵称
+ * @prop {string} [infoMetaBadge='官方能力'] — 信息卡片1右上角徽标文案
+ * @prop {'brand'|'red'|'orange'|'yellow'|'green'|'cyan'|'blue'|'purple'|'pink'|'teal'|'grey'|'white'|'ai'|null} [infoMetaBadgeVariant=null] — 信息卡片1右上角徽标颜色；黑底白标时可覆盖，彩色浅底时固定 grey
+ * @prop {string} [infoMetaAvatarSrc] — 信息卡片1底部人名昵称头像
+ * @prop {string} [infoMetaAvatarAlt='用户头像'] — 信息卡片1底部人名昵称头像无障碍文案
+ * @prop {Array<{iconName: string, value: string, tooltip?: string}>|null} [infoStats=null] — 信息卡片1底部右侧辅助项数组，最多展示 3 项；tooltip 用于 hover/focus 展示详细说明
  * @prop {function|null} [onAction=null] — 数据卡片右侧箭头操作回调
  * @prop {string} [actionAriaLabel='查看卡片详情'] — 右侧操作按钮无障碍文案
  * @prop {string} [className=''] — 附加类名
  * @prop {object} [style] — 内联样式
  *
- * 通用 tags 仅用于数据卡片左下角；商品和信息卡片不渲染标题左侧通用标签。
+ * 通用 tags 仅用于数据卡片左下角；商品和信息卡片1不渲染标题左侧通用标签。
  * 卡片容器默认半透明白底，hover 后补满白底并出现业务卡片专用投影。
  */
 export default function Card({
@@ -219,28 +340,35 @@ export default function Card({
   dataIconName = null,
   dataIconTone = DEFAULT_DATA_ICON_TONE,
   dataIconStyle = DEFAULT_DATA_ICON_STYLE,
+  animatedTone = 'grey',
+  animatedIconName = DEFAULT_ANIMATED_ICON,
+  animatedBadge = DEFAULT_ANIMATED_BADGE,
+  animatedActionText = DEFAULT_ANIMATED_ACTION_TEXT,
+  children,
   onAction,
   actionAriaLabel = '查看卡片详情',
   className = '',
   style,
 }) {
-  const resolvedType = type === 'product' || type === 'info' ? type : 'data';
+  const resolvedType = type === 'product' || type === 'info'
+    ? type
+    : (type === 'info2' || type === 'animated' ? 'info2' : 'data');
   const resolvedColor = color === 'grey' ? 'grey' : 'white';
   const resolvedTitle = title || (
     resolvedType === 'product'
       ? DEFAULT_PRODUCT_TITLE
-      : (resolvedType === 'info' ? DEFAULT_INFO_TITLE : DEFAULT_DATA_TITLE)
+      : (resolvedType === 'info' ? DEFAULT_INFO_TITLE : (resolvedType === 'info2' ? DEFAULT_ANIMATED_TITLE : DEFAULT_DATA_TITLE))
   );
   const resolvedDescription = description || (
     resolvedType === 'product'
       ? DEFAULT_PRODUCT_DESCRIPTION
-      : (resolvedType === 'info' ? DEFAULT_INFO_DESCRIPTION : DEFAULT_DATA_DESCRIPTION)
+      : (resolvedType === 'info' ? DEFAULT_INFO_DESCRIPTION : (resolvedType === 'info2' ? DEFAULT_ANIMATED_DESCRIPTION : DEFAULT_DATA_DESCRIPTION))
   );
-  const resolvedStats = Array.isArray(stats) && stats.length > 0 ? stats : DEFAULT_STATS;
+  const resolvedStats = (Array.isArray(stats) && stats.length > 0 ? stats : DEFAULT_STATS).slice(0, 3);
   const resolvedTags = resolvedType === 'data'
     ? (Array.isArray(tags) && tags.length > 0 ? tags : DEFAULT_TAGS)
     : [];
-  const resolvedInfoStats = Array.isArray(infoStats) && infoStats.length > 0 ? infoStats : DEFAULT_INFO_STATS;
+  const resolvedInfoStats = (Array.isArray(infoStats) && infoStats.length > 0 ? infoStats : DEFAULT_INFO_STATS).slice(0, 3);
   const resolvedInfoIconTone = Object.prototype.hasOwnProperty.call(INFO_ICON_TONE_CLASS, infoIconTone)
     ? infoIconTone
     : DEFAULT_INFO_ICON_TONE;
@@ -261,8 +389,13 @@ export default function Card({
     : DEFAULT_DATA_ICON_STYLE;
   const resolvedDataIconVisible = dataIconVisible === 'visible' ? 'visible' : DEFAULT_DATA_ICON_VISIBLE;
   const hasDataIcon = resolvedType === 'data' && resolvedDataIconVisible === 'visible' && !!dataIconName;
+  const resolvedAnimatedTone = Object.prototype.hasOwnProperty.call(ANIMATED_TONE_STYLE, animatedTone)
+    ? animatedTone
+    : 'grey';
   const cardStyle = {
     ...(CARD_VARIANT_STYLE[resolvedColor] || {}),
+    ...(resolvedType === 'info' && resolvedInfoIconStyle === 'tone' ? INFO_ICON_TONE_HOVER_STYLE[resolvedInfoIconTone] : {}),
+    ...(resolvedType === 'info2' ? ANIMATED_TONE_STYLE[resolvedAnimatedTone] : {}),
     ...style,
   };
 
@@ -308,6 +441,7 @@ export default function Card({
           resolvedInfoIconStyle === 'inverse'
             ? INFO_ICON_STYLE_CLASS.inverse
             : INFO_ICON_TONE_CLASS[resolvedInfoIconTone],
+          resolvedInfoIconStyle === 'tone' ? INFO_ICON_TONE_HOVER_CLASS : null,
         ].join(' ')}
         aria-hidden="true"
       >
@@ -372,13 +506,62 @@ export default function Card({
             </span>
 
             <div className={INFO_STATS}>
-              {resolvedInfoStats.map(({ iconName, value }, index) => (
-                <span key={`${iconName}-${value}-${index}`} className={INFO_STAT}>
-                  <Icon name={iconName} size={14} />
-                  <span>{value}</span>
-                </span>
-              ))}
+              {resolvedInfoStats.map((stat, index) => renderMetricItem(stat, index, INFO_STAT))}
+            </div>
+          </div>
+        </div>
+      </article>
+    );
+  }
+
+  if (resolvedType === 'info2') {
+    return (
+      <article
+        className={[CARD_SURFACE, ANIMATED_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+        style={cardStyle}
+        data-tfds-component="Card"
+      >
+        <div className={ANIMATED_CONTENT}>
+          <div className={ANIMATED_HEADER}>
+            {animatedIconName ? (
+              <span
+                className={ANIMATED_ICON_FRAME}
+                style={{
+                  backgroundColor: 'var(--tfds-card-animated-icon-bg)',
+                  borderColor: 'var(--tfds-card-animated-icon-border)',
+                  color: 'var(--tfds-card-animated-icon-color)',
+                }}
+                aria-hidden="true"
+              >
+                <Icon name={animatedIconName} size={24} />
+              </span>
+            ) : null}
+          </div>
+
+          <div className={ANIMATED_COPY}>
+            <h3 className={ANIMATED_TITLE}>{resolvedTitle}</h3>
+            <p className={ANIMATED_DESCRIPTION}>{resolvedDescription}</p>
+          </div>
+
+          <div className={ANIMATED_FOOTER}>
+            <div className={ANIMATED_SLOT}>
+              {animatedBadge ? (
+                <Tag variant="white" size="l" radius="md" fontWeight="regular">
+                  {animatedBadge}
+                </Tag>
+              ) : children}
             </div>
+            {animatedActionText ? (
+              <button
+                type="button"
+                className={ACTION}
+                aria-label={animatedActionText || actionAriaLabel}
+                onClick={onAction}
+                disabled={!onAction}
+              >
+                <Icon name="arrow-narrow-right-stroked" size={16} />
+              </button>
+            ) : null}
           </div>
         </div>
       </article>
@@ -399,12 +582,7 @@ export default function Card({
               <p className={DESCRIPTION}>{resolvedDescription}</p>
             </div>
             <div className={STATS}>
-              {resolvedStats.map(({ iconName, value }, index) => (
-                <span key={`${iconName}-${value}-${index}`} className={STAT}>
-                  <Icon name={iconName} size={14} />
-                  <span>{value}</span>
-                </span>
-              ))}
+              {resolvedStats.map((stat, index) => renderMetricItem(stat, index))}
             </div>
           </div>
           <span
@@ -427,12 +605,7 @@ export default function Card({
           </div>
 
           <div className={STATS}>
-            {resolvedStats.map(({ iconName, value }, index) => (
-              <span key={`${iconName}-${value}-${index}`} className={STAT}>
-                <Icon name={iconName} size={14} />
-                <span>{value}</span>
-              </span>
-            ))}
+            {resolvedStats.map((stat, index) => renderMetricItem(stat, index))}
           </div>
         </div>
       )}

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

@@ -22,6 +22,8 @@ export const CARD_TOKEN_MAP = {
     { label: '图标尺寸', cssProp: 'icon-size', token: '--size-icon-14', value: '14px' },
     { label: '行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
     { label: '项间距', cssProp: 'gap', token: '--spacing-5', value: '20px' },
+    { label: '数据项数量', cssProp: 'content', value: 'stats 最多展示 3 项动态数据，超出运行时截断' },
+    { label: '数据项结构', cssProp: 'prop', value: 'stats: Array<{ iconName, value, tooltip? }>；tooltip 用于 hover/focus 展示详细说明' },
     { label: '图标显示配置', cssProp: 'prop', value: 'dataIconVisible: hidden（默认不显示） / visible（显示右侧图标）' },
     { label: '右侧图标容器', cssProp: 'width/height', value: '48×48px，圆角 rounded-xl / 16px（仅数据卡片）' },
     { label: '图标与标题区间距', cssProp: 'gap', token: '--spacing-5', value: '20px，与数据卡片 p-5 内边距一致' },
@@ -43,7 +45,7 @@ export const CARD_TOKEN_MAP = {
     { label: '副标题颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
     { label: '最小高度', cssProp: 'min-height', value: '96px' },
   ],
-  信息卡片: [
+  信息卡片1: [
     { label: '布局模式', cssProp: 'prop', value: 'infoLayout: 图标在左(default) / 图标在右(icon-right)' },
     { label: '图标在左', cssProp: 'display', value: '左侧图标 + 右侧标题/副标题/右上徽标 + 底部辅助信息' },
     { label: '图标在右', cssProp: 'display', value: '左侧标题/副标题/底部辅助信息 + 最右侧图标；徽标紧跟标题右侧，间距 8px' },
@@ -56,9 +58,14 @@ export const CARD_TOKEN_MAP = {
     { label: '图标容器圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
     { label: '图标色系配置', cssProp: 'prop', value: 'infoIconTone: pink / blue / green / orange / purple / brand / grey' },
     { label: '图标样式配置', cssProp: 'prop', value: 'infoIconStyle: tone / inverse' },
-    { label: '图标容器背景', cssProp: 'background-color', token: '--color-*-50', value: '同色系 50 token' },
-    { label: '图标容器描边', cssProp: 'border-color', token: '--color-*-100', value: '同色系 100 token' },
+    { label: '图标容器背景', cssProp: 'background-color', token: '--color-*-50', value: '彩色系使用同色系 50 token；grey 使用 fill-default' },
+    { label: 'Grey 图标背景', cssProp: 'background-color', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+    { label: '图标容器描边', cssProp: 'border-color', token: '--color-*-100', value: '彩色系使用同色系 100 token；grey 使用 border-default' },
+    { label: 'Grey 图标描边', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
     { label: '图标颜色', cssProp: 'color', token: '--color-*-600', value: '同色系 600 token / brand 使用 brand-600' },
+    { label: '彩色浅底 Hover 背景', cssProp: 'background-color', token: '--color-*-500 / --color-black', value: 'infoIconStyle=tone 时，hover 自动使用当前 infoIconTone 对应 500 token；grey 单独使用 --color-black' },
+    { label: '彩色浅底 Hover 颜色', cssProp: 'color', token: '--color-white', value: '#FFFFFF' },
+    { label: '彩色浅底 Hover 描边', cssProp: 'border-color', token: 'transparent', value: 'hover 时不显示描边色' },
     { label: '反色图标样式', cssProp: 'background/color', value: 'inverse: 黑背景 + 白色 icon' },
     { label: '图标尺寸', cssProp: 'icon-size', value: '24px' },
     { label: '标题组件', cssProp: 'component', value: 'FormTitle / variant=form / showDescription' },
@@ -72,7 +79,7 @@ export const CARD_TOKEN_MAP = {
     { label: '徽标颜色联动', cssProp: 'variant', value: 'tone: 一律 grey；inverse: 默认 purple 彩色标签，可通过 infoMetaBadgeVariant 覆盖' },
     { label: '彩色标签优先级', cssProp: 'variant', value: 'purple（紫色）> teal（青绿色）> blue（蓝色）> cyan（青色）> orange（橙色）' },
     { label: '徽标位置', cssProp: 'placement', value: '所有布局均紧跟主标题右侧' },
-    { label: '标题与徽标间距', cssProp: 'gap', token: '--spacing-2', value: '8px（所有信息卡片布局）' },
+    { label: '标题与徽标间距', cssProp: 'gap', token: '--spacing-2', value: '8px（所有信息卡片1布局）' },
     { label: '标题与徽标对齐', cssProp: 'align-items', value: '所有布局均水平排列并垂直居中对齐' },
     { label: '昵称头像', cssProp: 'component', value: 'Avatar / type=image / shape=round / size=xxs' },
     { label: '昵称头像尺寸', cssProp: 'width/height', value: '16px' },
@@ -81,13 +88,33 @@ export const CARD_TOKEN_MAP = {
     { label: '身份区行高', cssProp: 'height/line-height', token: '--leading-4', value: '16px，头像与文字垂直居中' },
     { label: '身份文案', cssProp: 'semantic', value: '默认“段然”，可按负责人 / 创建人 / 团队动态替换' },
     { label: '昵称字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
-    { label: '辅助区指标行', cssProp: 'component-style', value: '复用数据卡片指标行样式，infoStats 支持 2-4 项动态配置' },
+    { label: '辅助区指标行', cssProp: 'component-style', value: '复用数据卡片指标行样式，infoStats 最多展示 3 项动态数据' },
     { label: '辅助区对齐', cssProp: 'align-items', value: '整行所有头像、图标、文字高度水平居中对齐' },
     { label: '辅助区间距', cssProp: 'gap', token: '--spacing-5', value: '20px' },
     { label: '辅助项图标', cssProp: 'component', value: 'Icon / 14px' },
     { label: '辅助项文字', cssProp: 'font-size/font-weight', value: '12px / 400' },
+    { label: '辅助项结构', cssProp: 'prop', value: 'infoStats: Array<{ iconName, value, tooltip? }>；tooltip 用于 hover/focus 展示详细说明' },
     { label: '辅助项语义', cssProp: 'content', value: '启用量 / 评分 / 调用量 / 响应率 / 转化率 / 更新时间 / 操作入口' },
   ],
+  信息卡片2: [
+    { label: '适用场景', cssProp: 'usage', value: 'AI 能力推荐 / 重点工具入口 / 配置向导 / 首页推荐能力；单页建议最多 1-2 张' },
+    { label: '结构', cssProp: 'layout', value: '左上图标 + 标题/描述 + 左下角徽标 + 右下角圆形箭头操作入口' },
+    { label: '背景与描边', cssProp: 'background/border', value: '完全复用 Card color=white / grey 的背景、描边和 hover 投影规则' },
+    { label: '交互', cssProp: 'motion', value: '无柔光、无流动动画、无特殊 hover 位移；仅保留普通 Card hover 投影' },
+    { label: '图标色系配置', cssProp: 'prop', value: 'animatedTone: brand / blue / purple / green / orange / grey，默认 grey；仅影响左上图标容器；grey 背景使用 fill-default，描边使用 border-default' },
+    { label: '图标容器', cssProp: 'width/height', value: '48px × 48px' },
+    { label: '图标圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    { label: '图标 Hover 背景', cssProp: 'background-color', token: '--color-*-500 / --color-black', value: 'hover 自动使用当前 animatedTone 对应 500 token；grey 单独使用 --color-black' },
+    { label: '图标 Hover 颜色', cssProp: 'color', token: '--color-white', value: '#FFFFFF' },
+    { label: '图标 Hover 描边', cssProp: 'border-color', token: 'transparent', value: 'hover 时不显示描边色' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+    { label: '描述行数', cssProp: 'line-clamp', value: '最多 2 行' },
+    { label: '徽标位置', cssProp: 'placement', value: '左下角，与标题左边界对齐，并与右下角圆形箭头操作入口同一行垂直居中' },
+    { label: '徽标样式', cssProp: 'component-style', value: 'Tag variant="white" / fontWeight="regular" / size=l / radius=md' },
+    { label: '操作按钮', cssProp: 'component-style', value: '复用数据卡片 ACTION：28px 圆形箭头按钮 / hover 黑色描边与黑色箭头 / active 缩放；无 onAction 时禁用' },
+    { label: '操作文案', cssProp: 'a11y-label', value: 'animatedActionText 作为圆形箭头按钮语义文案，不直接渲染为文字按钮' },
+  ],
   卡片: [
     { label: '白底背景', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', semanticRef: 'bg-card-secondary', state: 'default' },
     { label: '白底 Hover 背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface', state: 'hover' },
@@ -114,11 +141,11 @@ export const CARD_TOKEN_MAP = {
   引用组件: [
     { label: '数据卡片标签', cssProp: 'component', value: 'Tag / variant=white / size=l / radius=md / 左下角' },
     { label: '商品状态标签', cssProp: 'component', value: 'Tag / variant=green / size=l / radius=md' },
-    { label: '信息卡片主图标', cssProp: 'component', value: 'Icon / 同色系浅底 + 描边容器' },
-    { label: '信息卡片标题', cssProp: 'component', value: 'FormTitle / variant=form / showDescription' },
-    { label: '信息卡片徽标', cssProp: 'component', value: 'Tag / infoMetaBadgeVariant / size=l / radius=md' },
-    { label: '信息卡片昵称头像', cssProp: 'component', value: 'Avatar / type=image / shape=round / size=xxs' },
+    { label: '信息卡片1主图标', cssProp: 'component', value: 'Icon / 同色系浅底 + 描边容器' },
+    { label: '信息卡片1标题', cssProp: 'component', value: 'FormTitle / variant=form / showDescription' },
+    { label: '信息卡片1徽标', cssProp: 'component', value: 'Tag / infoMetaBadgeVariant / size=l / radius=md' },
+    { label: '信息卡片1昵称头像', cssProp: 'component', value: 'Avatar / type=image / shape=round / size=xxs' },
     { label: '数据卡片图标', cssProp: 'component', value: 'Icon / users-01-stroked / message-chat-square-stroked / hearts-stroked / arrow-narrow-right-stroked' },
-    { label: '信息卡片图标', cssProp: 'component', value: 'Icon / magic-wand-01-stroked / users-01-stroked / star-01-stroked / play-circle-stroked' },
+    { label: '信息卡片1图标', cssProp: 'component', value: 'Icon / magic-wand-01-stroked / users-01-stroked / star-01-stroked / check-circle-stroked' },
   ],
 };

package/src/_b_end_runtime/components/CardPreview.jsx

@@ -11,10 +11,12 @@ export default function CardPreview({
   infoLayout,
   dataIconVisible,
   dataIconStyle,
+  animatedTone,
 }) {
   const isProduct = type === 'product';
   const isInfo = type === 'info';
-  const isData = !isProduct && !isInfo;
+  const isInfo2 = type === 'info2' || type === 'animated';
+  const isData = !isProduct && !isInfo && !isInfo2;
   const resolvedInfoIconStyle = isInfo ? (infoIconStyle || 'inverse') : infoIconStyle;
   const resolvedInfoLayout = isInfo
     ? (infoLayout || 'icon-right')
@@ -28,8 +30,8 @@ export default function CardPreview({
         <Card
           type={type}
           color={color}
-          title={isProduct ? '海底捞门店通用双人套餐' : undefined}
-          description={isProduct ? '数量 1 · ¥128.00 · 月售 2,361' : undefined}
+          title={isProduct ? '海底捞门店通用双人套餐' : (isInfo2 ? '智能策略生成' : undefined)}
+          description={isProduct ? '数量 1 · ¥128.00 · 月售 2,361' : (isInfo2 ? '基于业务目标、历史数据和运营规则，自动生成可执行策略建议。' : undefined)}
           tags={isProduct || isInfo ? [] : undefined}
           productStatus={isProduct ? '已使用' : undefined}
           infoIconTone={isInfo ? infoIconTone : undefined}
@@ -42,6 +44,10 @@ export default function CardPreview({
           dataIconName={isData && resolvedDataIconVisible === 'visible' ? 'edit-04-stroked' : undefined}
           dataIconTone={isData ? 'blue' : undefined}
           dataIconStyle={isData ? resolvedDataIconStyle : undefined}
+          animatedTone={isInfo2 ? (animatedTone || 'grey') : undefined}
+          animatedIconName={isInfo2 ? 'magic-wand-01-stroked' : undefined}
+          animatedBadge={isInfo2 ? 'AI 推荐' : undefined}
+          animatedActionText={isInfo2 ? '立即体验' : undefined}
           actionAriaLabel={isProduct ? undefined : '查看卡片详情'}
           onAction={isProduct ? undefined : () => {}}
         />

package/src/_b_end_runtime/components/ChatMessage.jsx

@@ -3,7 +3,7 @@
  *
  * 行业对齐：assistant-ui Message / Vercel AI SDK Message / Microsoft Copilot ChatMessage。
  * 与 ChatBubble（仅气泡）、ChatInput（输入器）共同组成 Chat 命名空间。
- * 样式依赖：入口 CSS 须 @import "@tf-designsystem/b-end/theme.css"（提供 --color-border-line-light、--color-blueGrey-*、--tfds-ai-execution-* 等）；缺失时 var() 无效，追问/执行流等易出现深黑描边。
+ * 样式依赖：入口 CSS 须 @import "@tf-designsystem/b-end/theme.css"（提供 --color-border-default、--color-blueGrey-*、--tfds-ai-execution-* 等）；缺失时 var() 无效，追问/执行流等易出现深黑描边。
  * 一个 ChatMessage = 一条会话消息，按 role 渲染：
  *   · role='ai'   AI 输出消息（默认）：header / thinking / plan / 执行流(title+steps/taskGroups)
  *                  / 结果(resultText+resultArtifacts+confirms) / taskBadge / actions / followUps
@@ -333,7 +333,7 @@ const BODY = 'relative flex w-full min-w-0 max-w-full flex-col items-start gap-1
 const HEADER = 'group/exec-header relative flex w-full min-w-0 max-w-full items-start gap-3 py-2 cursor-pointer select-none';
 const HEADER_ICON_WRAP = 'mt-[2px] flex shrink-0 items-center';
 const STATUS_SPINNER_WRAP = 'relative block size-4 shrink-0';
-const STATUS_SPINNER_TRACK = 'absolute inset-[0.67px] rounded-full border border-border-line-light';
+const STATUS_SPINNER_TRACK = 'absolute inset-[0.67px] rounded-full border border-border-default';
 const STATUS_SPINNER_ARC = 'absolute inset-[0.67px] rounded-full animate-[spin_1.1s_linear_infinite]';
 /* 标题：单行截断；不占满宽度，让 chevron 紧贴文字（或省略号）右侧；
    颜色用 text token className（不用 inline style，否则 hover 失效）；
@@ -492,7 +492,7 @@ const TASK_PLAN_FOOTER = 'mt-3 flex w-full min-w-0 items-center justify-end gap-
 const FOLLOW_UP_GROUP = 'flex w-full min-w-0 flex-col items-stretch gap-2';
 const FOLLOW_UP_BUTTON = [
   'inline-flex h-10 w-fit max-w-full items-center justify-start',
-  'rounded-lg border border-border-line-light bg-surface px-3 py-2',
+  'rounded-lg border border-border-default bg-surface px-3 py-2',
   'text-sm font-normal leading-5 tracking-[0] text-left',
   'cursor-pointer transition-all duration-150',
   '[outline:2px_solid_transparent] outline-offset-2',
@@ -1044,7 +1044,7 @@ function ThinkingProcess({ thinkingProcess, tokenStyles }) {
         <div className={THINKING_BODY}>
           <div
             className={THINKING_RAIL}
-            style={{ backgroundColor: 'var(--color-border-line-light)' }}
+            style={{ backgroundColor: 'var(--color-border-default)' }}
             aria-hidden="true"
           />
           <p className={THINKING_TEXT} style={tokenStyles.muted}>
@@ -1081,7 +1081,7 @@ function TaskPlanCard({ taskPlan, tokenStyles }) {
       className={TASK_PLAN_CARD}
       style={{
         backgroundColor: 'var(--color-fill)',
-        borderColor: 'var(--color-border-line-light)',
+        borderColor: 'var(--color-border-default)',
       }}
       data-tfds-component="ChatMessage.TaskPlan"
     >
@@ -1405,7 +1405,7 @@ export function ResultArtifactCard({ artifact, className = '' }) {
   return (
     <div
       className={[RESULT_ARTIFACT_CARD, className].filter(Boolean).join(' ')}
-      style={{ borderColor: 'var(--color-border-line-light)' }}
+      style={{ borderColor: 'var(--color-border-default)' }}
     >
       <div className={RESULT_ARTIFACT_ICON} aria-hidden="true">
         <ArtifactIcon type={a.type} size={32} />
@@ -1828,13 +1828,13 @@ export default function ChatMessage({
   const tokenStyles = {
     title: { color: 'var(--color-blueGrey-800)' },
     muted: { color: 'var(--color-blueGrey-600)' },
-    rail: { backgroundColor: 'var(--color-border-line-light)' },
+    rail: { backgroundColor: 'var(--color-border-default)' },
     card: {
-      borderColor: 'var(--color-border-line-light)',
+      borderColor: 'var(--color-border-default)',
       backgroundColor: 'var(--color-fill)',
     },
     iconWrap: {
-      borderColor: 'var(--color-border-line-light)',
+      borderColor: 'var(--color-border-default)',
       backgroundImage: 'var(--tfds-ai-execution-icon-gradient)',
     },
     humanConfirmCard: {
@@ -2070,7 +2070,7 @@ export default function ChatMessage({
                 <div
                   key={artifact.id}
                   className={RESULT_ARTIFACT_CARD}
-                  style={{ borderColor: 'var(--color-border-line-light)' }}
+                  style={{ borderColor: 'var(--color-border-default)' }}
                 >
                   <div className={RESULT_ARTIFACT_ICON} aria-hidden="true">
                     <ArtifactIcon type={artifact.type} size={32} />