@tfdesign/b-end 1.0.14 → 1.0.15

package/src/_b_end_runtime/components/Card.jsx

@@ -35,6 +35,13 @@ const DEFAULT_ANIMATED_DESCRIPTION = '基于业务目标、历史数据和运营
 const DEFAULT_ANIMATED_ICON = 'magic-wand-01-stroked';
 const DEFAULT_ANIMATED_BADGE = 'AI 推荐';
 const DEFAULT_ANIMATED_ACTION_TEXT = '立即体验';
+const DEFAULT_INFO3_TITLE = '抖音生服订单已签收后还能申请退款吗？';
+const DEFAULT_INFO3_DESCRIPTION = '已签收订单仍可在 7 天无理由保障期内发起退款，需提供商品照片或服务异常说明，平台介入后通常 24h 内出结果。';
+const DEFAULT_INFO3_STATUS = '生效';
+const DEFAULT_INFO3_META_ITEMS = [
+  { iconName: 'tag-01-stroked', value: 'QA' },
+  { iconName: 'clock-stroked', value: '2026-04-21 10:30' },
+];
 const DEFAULT_INFO_STATS = [
   { iconName: 'users-01-stroked', value: '128.6K', tooltip: '累计启用该能力的创作者数量' },
   { iconName: 'star-01-stroked', value: '4.9', tooltip: '用户综合评分，满分 5 分' },
@@ -53,6 +60,12 @@ const CARD_SURFACE = [
   'hover:shadow-card',
 ].join(' ');
 
+const CARD_INTERACTIVE = [
+  'cursor-pointer',
+  'focus:outline-none',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blueGrey-300',
+].join(' ');
+
 const DATA_CARD = 'min-h-[var(--size-card-min-height)] flex-col justify-between gap-7';
 const PRODUCT_CARD = 'min-h-[96px] flex-row items-center gap-5 [&_.tfds-tag.bg-white]:hidden';
 const INFO_CARD = 'min-h-[148px] flex-row items-start gap-6 p-6 [&_.tfds-tag.bg-white]:hidden';
@@ -266,6 +279,34 @@ const ANIMATED_TONE_STYLE = {
   },
 };
 
+/* ── 信息卡片3 ── */
+const INFO3_CARD = [
+  'min-h-[148px] flex-col gap-2 rounded-lg p-4',
+  'text-left',
+].join(' ');
+const INFO3_HEADER = 'flex items-start justify-between gap-2';
+const INFO3_TITLE = [
+  'm-0 min-w-0 flex-1 text-base [font-weight:var(--font-semibold)] leading-6 text-blueGrey-900',
+  'line-clamp-2',
+].join(' ');
+const INFO3_DESCRIPTION = 'm-0 line-clamp-2 text-sm font-normal leading-[22px] text-blueGrey-600';
+const INFO3_META = 'flex min-w-0 flex-wrap items-center gap-3 text-xs font-normal leading-4 text-blueGrey-500';
+const INFO3_META_ITEM = 'inline-flex min-w-0 items-center gap-1';
+const INFO3_META_AVATAR = [
+  '[&>img]:!scale-100',
+  '[&>img]:!translate-y-0',
+  '[&>img]:!object-center',
+].join(' ');
+
+const INFO3_STATUS_VARIANT = {
+  生效: 'green',
+  已发布: 'green',
+  草稿: 'grey',
+  审核中: 'orange',
+  已停用: 'red',
+  已下架: 'red',
+};
+
 /* ── 底部 ── */
 const FOOTER = 'flex w-full items-center justify-between gap-4';
 const ACTION = [
@@ -279,9 +320,30 @@ const ACTION = [
   'group-hover:border-black group-hover:text-black',
 ].join(' ');
 
+function getInteractiveCardProps(onAction, actionAriaLabel) {
+  if (typeof onAction !== 'function') return {};
+
+  return {
+    role: 'button',
+    tabIndex: 0,
+    'aria-label': actionAriaLabel,
+    onClick: onAction,
+    onKeyDown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      onAction(event);
+    },
+  };
+}
+
+function handleNestedActionClick(event, onAction) {
+  event.stopPropagation();
+  onAction?.(event);
+}
+
 /**
  * Card — 业务信息摘要卡片
- * @prop {'data'|'product'|'info'|'info2'|'animated'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片1，info2 为信息卡片2；animated 为旧版兼容别名
+ * @prop {'data'|'product'|'info'|'info2'|'info3'|'animated'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片1，info2 为信息卡片2，info3 为信息卡片3；animated 为旧版兼容别名
  * @prop {string} [title] — 卡片标题，商品卡片中为商品标题
  * @prop {string} [description] — 卡片描述，商品卡片中为数量、价格等辅助信息
  * @prop {'white'|'grey'} [color='white'] — 卡片颜色：white 为白底样式，适用于灰/浅灰/非纯白容器；grey 为 Blue Grey 灰底样式，适用于纯白容器
@@ -302,20 +364,25 @@ const ACTION = [
  * @prop {string|null} [animatedIconName='magic-wand-01-stroked'] — 信息卡片2左上角图标
  * @prop {string|null} [animatedBadge='AI 推荐'] — 信息卡片2左下角徽标
  * @prop {string|null} [animatedActionText='立即体验'] — 信息卡片2底部右侧操作文案
+ * @prop {boolean} [selected=false] — 信息卡片3整体选中态，使用浅绿色背景与 brand 描边
+ * @prop {string} [status='生效'] — 信息卡片3右上角状态标签文案
+ * @prop {'brand'|'red'|'orange'|'yellow'|'green'|'cyan'|'blue'|'purple'|'pink'|'teal'|'grey'|'white'|'ai'|null} [statusVariant=null] — 信息卡片3右上角状态标签颜色；不传时按常见状态自动映射
+ * @prop {Array<{iconName?: string, value: string, avatarSrc?: string, avatarAlt?: string}>|null} [metaItems=null] — 信息卡片3底部元信息，适合类型、更新时间、创建人等密集信息
  * @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 {function|null} [onAction=null] — 详情跳转 / 进入二级页回调；传入后整张卡片默认可点击
+ * @prop {string} [actionAriaLabel='查看卡片详情'] — 整卡与右侧操作按钮共用的无障碍文案
  * @prop {string} [className=''] — 附加类名
  * @prop {object} [style] — 内联样式
  *
  * 通用 tags 仅用于数据卡片左下角；商品和信息卡片1不渲染标题左侧通用标签。
  * 所有 Card 分类都遵循“背景反衬”规则：父容器是纯白色时必须使用灰底卡；父容器是灰色、浅灰色或其他非纯白底时必须使用白底卡。
  * 卡片容器默认半透明白底，hover 后补满白底并出现业务卡片专用投影；灰底卡保持灰底与灰描边，并保留相同投影反馈。
+ * 所有 Card 分类只要传入 onAction，就默认整张卡片区域可点击进入；右下角箭头仅作为进入提示，不是唯一热区。
  */
 export default function Card({
   type = 'data',
@@ -345,13 +412,17 @@ export default function Card({
   animatedIconName = DEFAULT_ANIMATED_ICON,
   animatedBadge = DEFAULT_ANIMATED_BADGE,
   animatedActionText = DEFAULT_ANIMATED_ACTION_TEXT,
+  selected = false,
+  status = DEFAULT_INFO3_STATUS,
+  statusVariant = null,
+  metaItems = null,
   children,
   onAction,
   actionAriaLabel = '查看卡片详情',
   className = '',
   style,
 }) {
-  const resolvedType = type === 'product' || type === 'info'
+  const resolvedType = type === 'product' || type === 'info' || type === 'info3'
     ? type
     : (type === 'info2' || type === 'animated' ? 'info2' : 'data');
   // Card 颜色依赖父级背景做反衬，不按卡片类型区分。
@@ -359,12 +430,12 @@ export default function Card({
   const resolvedTitle = title || (
     resolvedType === 'product'
       ? DEFAULT_PRODUCT_TITLE
-      : (resolvedType === 'info' ? DEFAULT_INFO_TITLE : (resolvedType === 'info2' ? DEFAULT_ANIMATED_TITLE : DEFAULT_DATA_TITLE))
+      : (resolvedType === 'info' ? DEFAULT_INFO_TITLE : (resolvedType === 'info2' ? DEFAULT_ANIMATED_TITLE : (resolvedType === 'info3' ? DEFAULT_INFO3_TITLE : DEFAULT_DATA_TITLE)))
   );
   const resolvedDescription = description || (
     resolvedType === 'product'
       ? DEFAULT_PRODUCT_DESCRIPTION
-      : (resolvedType === 'info' ? DEFAULT_INFO_DESCRIPTION : (resolvedType === 'info2' ? DEFAULT_ANIMATED_DESCRIPTION : DEFAULT_DATA_DESCRIPTION))
+      : (resolvedType === 'info' ? DEFAULT_INFO_DESCRIPTION : (resolvedType === 'info2' ? DEFAULT_ANIMATED_DESCRIPTION : (resolvedType === 'info3' ? DEFAULT_INFO3_DESCRIPTION : DEFAULT_DATA_DESCRIPTION)))
   );
   const resolvedStats = (Array.isArray(stats) && stats.length > 0 ? stats : DEFAULT_STATS).slice(0, 3);
   const resolvedTags = resolvedType === 'data'
@@ -394,24 +465,34 @@ export default function Card({
   const resolvedAnimatedTone = Object.prototype.hasOwnProperty.call(ANIMATED_TONE_STYLE, animatedTone)
     ? animatedTone
     : 'grey';
+  const resolvedInfo3MetaItems = Array.isArray(metaItems) && metaItems.length > 0
+    ? metaItems
+    : DEFAULT_INFO3_META_ITEMS;
+  const resolvedStatusVariant = INFO_BADGE_VARIANTS.has(statusVariant)
+    ? statusVariant
+    : (INFO3_STATUS_VARIANT[status] || 'grey');
+  const isClickable = typeof onAction === 'function';
   const cardStyle = {
     ...(CARD_VARIANT_STYLE[resolvedColor] || {}),
     ...(resolvedType === 'info' && resolvedInfoIconStyle === 'tone' ? INFO_ICON_TONE_HOVER_STYLE[resolvedInfoIconTone] : {}),
     ...(resolvedType === 'info2' ? ANIMATED_TONE_STYLE[resolvedAnimatedTone] : {}),
     ...style,
   };
+  const interactiveProps = getInteractiveCardProps(onAction, actionAriaLabel);
 
   if (resolvedType === 'product') {
     return (
       <article
         className={[
           CARD_SURFACE,
+          isClickable ? CARD_INTERACTIVE : null,
           resolvedInfoLayout === 'icon-right' ? PRODUCT_CARD_ICON_RIGHT : PRODUCT_CARD,
           CARD_VARIANT_CLASS[resolvedColor],
           className,
         ].filter(Boolean).join(' ')}
         style={cardStyle}
         data-tfds-component="Card"
+        {...interactiveProps}
       >
         <div className={PRODUCT_IMAGE_FRAME}>
           <img
@@ -465,9 +546,10 @@ export default function Card({
 
     return (
       <article
-        className={[CARD_SURFACE, INFO_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+        className={[CARD_SURFACE, isClickable ? CARD_INTERACTIVE : null, INFO_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
         style={cardStyle}
         data-tfds-component="Card"
+        {...interactiveProps}
       >
         {resolvedInfoLayout === 'icon-right' ? null : iconNode}
 
@@ -519,9 +601,10 @@ export default function Card({
   if (resolvedType === 'info2') {
     return (
       <article
-        className={[CARD_SURFACE, ANIMATED_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+        className={[CARD_SURFACE, isClickable ? CARD_INTERACTIVE : null, ANIMATED_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
         style={cardStyle}
         data-tfds-component="Card"
+        {...interactiveProps}
       >
         <div className={ANIMATED_CONTENT}>
           <div className={ANIMATED_HEADER}>
@@ -558,7 +641,7 @@ export default function Card({
                 type="button"
                 className={ACTION}
                 aria-label={animatedActionText || actionAriaLabel}
-                onClick={onAction}
+                onClick={(event) => handleNestedActionClick(event, onAction)}
                 disabled={!onAction}
               >
                 <Icon name="arrow-narrow-right-stroked" size={16} />
@@ -570,11 +653,64 @@ export default function Card({
     );
   }
 
+  if (resolvedType === 'info3') {
+    return (
+      <article
+        className={[
+          CARD_SURFACE,
+          isClickable ? CARD_INTERACTIVE : null,
+          INFO3_CARD,
+          CARD_VARIANT_CLASS[resolvedColor],
+          className,
+        ].filter(Boolean).join(' ')}
+        style={{
+          ...cardStyle,
+          ...(selected ? { borderColor: 'var(--color-brand-500, #00B384)' } : {}),
+        }}
+        data-tfds-component="Card"
+        data-tfds-card-type="info3"
+        aria-selected={selected || undefined}
+        {...interactiveProps}
+      >
+        <div className={INFO3_HEADER}>
+          <h3 className={INFO3_TITLE}>{resolvedTitle}</h3>
+          {status ? (
+            <Tag variant={resolvedStatusVariant} className="shrink-0">
+              {status}
+            </Tag>
+          ) : null}
+        </div>
+
+        <p className={INFO3_DESCRIPTION}>{resolvedDescription}</p>
+
+        <div className={INFO3_META}>
+          {resolvedInfo3MetaItems.map((item, index) => (
+            <span key={`${item.value}-${index}`} className={INFO3_META_ITEM}>
+              {item.avatarSrc ? (
+                <Avatar
+                  size="xxs"
+                  type="image"
+                  src={item.avatarSrc}
+                  alt={item.avatarAlt || `${item.value}头像`}
+                  className={INFO3_META_AVATAR}
+                />
+              ) : item.iconName ? (
+                <Icon name={item.iconName} size="xs" />
+              ) : null}
+              <span className="truncate">{item.value}</span>
+            </span>
+          ))}
+        </div>
+      </article>
+    );
+  }
+
   return (
     <article
-      className={[CARD_SURFACE, DATA_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+      className={[CARD_SURFACE, isClickable ? CARD_INTERACTIVE : null, DATA_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
       style={cardStyle}
       data-tfds-component="Card"
+      {...interactiveProps}
     >
       {hasDataIcon ? (
         <div className={DATA_ICON_ROW}>
@@ -624,7 +760,7 @@ export default function Card({
           type="button"
           className={ACTION}
           aria-label={actionAriaLabel}
-          onClick={onAction}
+          onClick={(event) => handleNestedActionClick(event, onAction)}
           disabled={!onAction}
         >
           <Icon name="arrow-narrow-right-stroked" size={16} />

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

@@ -98,7 +98,7 @@ export const CARD_TOKEN_MAP = {
   ],
   信息卡片2: [
     { label: '适用场景', cssProp: 'usage', value: 'AI 能力推荐 / 重点工具入口 / 配置向导 / 首页推荐能力；单页建议最多 1-2 张' },
-    { label: '结构', cssProp: 'layout', value: '左上图标 + 标题/描述 + 左下角徽标 + 右下角圆形箭头操作入口' },
+    { 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' },
@@ -112,12 +112,31 @@ export const CARD_TOKEN_MAP = {
     { 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: 'interaction', value: '传入 onAction 时整张卡片默认可点击进入，支持鼠标点击与 Enter / Space 键盘触发' },
+    { label: '操作按钮', cssProp: 'component-style', value: '复用数据卡片 ACTION：28px 圆形箭头按钮 / hover 黑色描边与黑色箭头 / active 缩放；当 onAction 存在时仅作为进入提示热区，点击后与整卡复用同一回调' },
+    { label: '操作文案', cssProp: 'a11y-label', value: 'animatedActionText / actionAriaLabel 同时作为整卡与圆形箭头按钮语义文案，不直接渲染为文字按钮' },
+  ],
+  信息卡片3: [
+    { label: '适用场景', cssProp: 'usage', value: '密集信息列表 / 知识库知识列表 / 规则列表 / 策略列表 / 工单摘要列表；适合在“列表 + 详情面板”联动页面中作为对象条目' },
+    { label: '结构', cssProp: 'layout', value: '标题 + 右上角状态标签 + 两行描述 + 底部元信息行' },
+    { label: '标题', cssProp: 'component-style', value: '主标题最多 2 行，字号 16px，字重 600，行高 24px，颜色 blueGrey-900' },
+    { label: '描述', cssProp: 'component-style', value: '描述最多 2 行，字号 14px，行高 22px，颜色 blueGrey-600' },
+    { label: '状态标签', cssProp: 'component', value: 'Tag / 右上角 / 状态映射 variant：生效/已发布=green，草稿=grey，审核中=orange，已停用/已下架=red；也可通过 statusVariant 覆盖' },
+    { label: '底部元信息', cssProp: 'component', value: 'metaItems: Array<{ iconName?, value, avatarSrc?, avatarAlt? }>；默认用于类型、更新时间、创建人头像与姓名' },
+    { label: '元信息字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '元信息间距', cssProp: 'gap', value: '12px；每个元信息内部 icon/avatar 与文字间距 4px' },
+    { label: '默认背景', cssProp: 'background', value: '完全复用 Card color=white / grey 的背景规则，不单独定义信息卡片3专属底色' },
+    { label: '默认描边', cssProp: 'border-color', value: '完全复用 Card color=white / grey 的描边规则，不单独定义信息卡片3专属描边' },
+    { label: 'Hover 背景', cssProp: 'background', value: '完全复用 Card color=white / grey 的 hover 背景规则' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px，使用 rounded-lg' },
+    { label: '选中提示', cssProp: 'border-color', token: '--color-brand-500', value: '通过 selected 将原本同一条描边从灰色切换为绿色，不新增 ring / outline / 外扩描边' },
+    { label: '选中交互', cssProp: 'interaction', value: '通过 selected 控制整卡描边颜色；Card 只负责样式，选中/取消选中的业务状态由页面维护' },
+    { label: '整卡点击', cssProp: 'interaction', value: '传入 onAction 后整张卡片默认可点击，支持鼠标点击与 Enter / Space 键盘触发；适用于打开或收起右侧详情面板' },
   ],
   卡片: [
     { label: '容器映射规则', cssProp: 'usage', value: '所有卡片分类统一按父容器背景反衬：纯白容器用 grey 灰底卡；灰色 / 浅灰 / 其他非纯白容器用 white 白底卡' },
-    { label: '规则适用范围', cssProp: 'scope', value: '数据卡片 / 商品卡片 / 信息卡片1 / 信息卡片2 全部生效，不因卡片类型变化' },
+    { label: '规则适用范围', cssProp: 'scope', value: '数据卡片 / 商品卡片 / 信息卡片1 / 信息卡片2 / 信息卡片3 全部生效，不因卡片类型变化' },
+    { label: '查看交互规则', cssProp: 'interaction', value: '所有 Card 分类只要传入 onAction（详情跳转能力），默认整张卡片区域都支持点击查看；箭头按钮仅作为进入提示，不是唯一热区' },
     { 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' },
     { label: '白底描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },
@@ -127,6 +146,7 @@ export const CARD_TOKEN_MAP = {
     { label: '投影', cssProp: 'box-shadow', token: '--shadow-card', value: '0 30px 50px 0 rgba(0, 9, 36, 0.05)', state: 'hover' },
   ],
   操作: [
+    { label: '触发热区', cssProp: 'interaction', value: '当 onAction 存在时，整卡为主热区；数据卡片 / 信息卡片2右下角圆形箭头为辅助提示热区' },
     { label: '图标色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary', state: 'default' },
     { label: '图标色', cssProp: 'color', token: '--color-black', value: '#000000', state: 'hover' },
     { label: '描边色', cssProp: 'border-color', token: '--color-transparent', value: 'transparent', state: 'default' },
@@ -147,6 +167,8 @@ export const CARD_TOKEN_MAP = {
     { 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: '信息卡片3状态标签', cssProp: 'component', value: 'Tag / 右上角状态 / variant 由 statusVariant 或状态映射决定' },
+    { label: '信息卡片3元信息头像', 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: '信息卡片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

@@ -16,7 +16,8 @@ export default function CardPreview({
   const isProduct = type === 'product';
   const isInfo = type === 'info';
   const isInfo2 = type === 'info2' || type === 'animated';
-  const isData = !isProduct && !isInfo && !isInfo2;
+  const isInfo3 = type === 'info3';
+  const isData = !isProduct && !isInfo && !isInfo2 && !isInfo3;
   const resolvedInfoIconStyle = isInfo ? (infoIconStyle || 'inverse') : infoIconStyle;
   const resolvedInfoLayout = isInfo
     ? (infoLayout || 'icon-right')
@@ -30,8 +31,8 @@ export default function CardPreview({
         <Card
           type={type}
           color={color}
-          title={isProduct ? '海底捞门店通用双人套餐' : (isInfo2 ? '智能策略生成' : undefined)}
-          description={isProduct ? '数量 1 · ¥128.00 · 月售 2,361' : (isInfo2 ? '基于业务目标、历史数据和运营规则，自动生成可执行策略建议。' : undefined)}
+          title={isProduct ? '海底捞门店通用双人套餐' : (isInfo2 ? '智能策略生成' : (isInfo3 ? '抖音生服订单已签收后还能申请退款吗？' : undefined))}
+          description={isProduct ? '数量 1 · ¥128.00 · 月售 2,361' : (isInfo2 ? '基于业务目标、历史数据和运营规则，自动生成可执行策略建议。' : (isInfo3 ? '已签收订单仍可在 7 天无理由保障期内发起退款，需提供商品照片或服务异常说明，平台介入后通常 24h 内出结果。' : undefined))}
           tags={isProduct || isInfo ? [] : undefined}
           productStatus={isProduct ? '已使用' : undefined}
           infoIconTone={isInfo ? infoIconTone : undefined}
@@ -48,6 +49,13 @@ export default function CardPreview({
           animatedIconName={isInfo2 ? 'magic-wand-01-stroked' : undefined}
           animatedBadge={isInfo2 ? 'AI 推荐' : undefined}
           animatedActionText={isInfo2 ? '立即体验' : undefined}
+          selected={false}
+          status={isInfo3 ? '生效' : undefined}
+          metaItems={isInfo3 ? [
+            { iconName: 'tag-01-stroked', value: 'QA' },
+            { iconName: 'clock-stroked', value: '2026-04-21 10:30' },
+            { value: '李思儒' },
+          ] : undefined}
           actionAriaLabel={isProduct ? undefined : '查看卡片详情'}
           onAction={isProduct ? undefined : () => {}}
         />

package/src/_b_end_runtime/components/ChatMessage.jsx

@@ -797,7 +797,9 @@ function normalizeHumanConfirmNode(node, index) {
     options,
     defaultSelectedValue,
     formItems,
+    formValues: node?.formValues && typeof node.formValues === 'object' ? node.formValues : null,
     onOptionChange: typeof node?.onOptionChange === 'function' ? node.onOptionChange : null,
+    onFormChange: typeof node?.onFormChange === 'function' ? node.onFormChange : null,
     onPrimaryAction: typeof node?.onPrimaryAction === 'function' ? node.onPrimaryAction : null,
     onSecondaryAction: typeof node?.onSecondaryAction === 'function' ? node.onSecondaryAction : null,
     onToggleCollapsed: typeof node?.onToggleCollapsed === 'function' ? node.onToggleCollapsed : null,
@@ -1643,6 +1645,26 @@ function UserMessageContent({ tokens }) {
   );
 }
 
+function getInitialFormValues(formItems = []) {
+  return formItems.reduce((values, item) => {
+    const key = item?.id || item?.name;
+    if (!key) return values;
+    if (item.value !== undefined) values[key] = item.value;
+    else if (item.defaultValue !== undefined) values[key] = item.defaultValue;
+    else if (item.defaultChecked !== undefined) values[key] = item.defaultChecked;
+    else values[key] = '';
+    return values;
+  }, {});
+}
+
+function getFieldChangeValue(raw) {
+  if (raw && typeof raw === 'object' && raw.target) {
+    const { type, checked, value } = raw.target;
+    return type === 'checkbox' ? checked : value;
+  }
+  return raw;
+}
+
 /* ── 人工确认节点 ── */
 function HumanConfirmNode({ node, tokenStyles }) {
   /* 内部自管折叠态（兼容外部受控：node.collapsed + node.onToggleCollapsed 都传时走外部） */
@@ -1656,18 +1678,23 @@ function HumanConfirmNode({ node, tokenStyles }) {
   /* 点击主按钮后进入"已确认"禁用态：内容半透明、按钮禁用 */
   const [confirmed, setConfirmed] = useState(node.defaultConfirmed === true);
   const [selectedOptionValue, setSelectedOptionValue] = useState(node.defaultSelectedValue);
+  const [formValues, setFormValues] = useState(() => node.formValues || getInitialFormValues(node.formItems));
   useEffect(() => {
     if (node.defaultConfirmed === true) setConfirmed(true);
   }, [node.defaultConfirmed]);
   useEffect(() => {
     setSelectedOptionValue(node.defaultSelectedValue);
   }, [node.defaultSelectedValue]);
+  useEffect(() => {
+    setFormValues(node.formValues || getInitialFormValues(node.formItems));
+  }, [node.formItems, node.formValues]);
   const handlePrimary = () => {
     const selectedOption = node.options.find((option) => String(option.value) === String(selectedOptionValue)) ?? null;
     if (typeof node.onPrimaryAction === 'function') {
       node.onPrimaryAction({
         value: selectedOptionValue,
         option: selectedOption,
+        formValues,
       });
     }
     setConfirmed(true);
@@ -1682,11 +1709,41 @@ function HumanConfirmNode({ node, tokenStyles }) {
       node.onOptionChange(nextValue, selectedOption);
     }
   };
+  const handleFormValueChange = (item, rawValue) => {
+    const key = item?.id || item?.name;
+    if (!key) return;
+    const nextValue = getFieldChangeValue(rawValue);
+    setFormValues((prev) => {
+      const nextValues = { ...prev, [key]: nextValue };
+      if (typeof node.onFormChange === 'function') {
+        node.onFormChange(nextValues, {
+          fieldId: key,
+          value: nextValue,
+          item,
+        });
+      }
+      return nextValues;
+    });
+  };
 
   const showIntroText = node.mode === 'text-card' && node.introText && !isCollapsed;
   const showCardBody = !isCollapsed;
   const isOptionCard = node.mode === 'option-card';
   const isFormCard = node.mode === 'form-card';
+  const resolvedFormItems = isFormCard
+    ? node.formItems.map((item) => {
+        const key = item?.id || item?.name;
+        if (!key) return item;
+        return {
+          ...item,
+          value: formValues[key],
+          onChange: (nextValue, ...args) => {
+            handleFormValueChange(item, nextValue);
+            if (typeof item.onChange === 'function') item.onChange(nextValue, ...args);
+          },
+        };
+      })
+    : node.formItems;
 
   const headerClassName = isOptionCard ? HUMAN_CONFIRM_OPTION_HEADER : HUMAN_CONFIRM_HEADER;
   const iconWrapClassName = isOptionCard ? HUMAN_CONFIRM_OPTION_ICON_WRAP : HUMAN_CONFIRM_ICON_WRAP;
@@ -1770,11 +1827,12 @@ function HumanConfirmNode({ node, tokenStyles }) {
               </RadioGroup>
             ) : isFormCard ? (
               <Form
-                items={node.formItems}
+                items={resolvedFormItems}
                 layout="vertical"
                 size="md"
                 disabled={confirmed}
                 className="w-full min-w-0 gap-3 pb-2"
+                onSubmit={(event) => event.preventDefault()}
                 data-tfds-component="ChatMessage.FormCardForm"
               />
             ) : node.description ? (

package/src/_b_end_runtime/components/ConversationList.jsx

@@ -46,7 +46,7 @@ const DEFAULT_SECTIONS = [
         time: '13:32',
         avatarSrc: liSiruAvatar,
         tags: [
-          { label: '异常监控提醒', variant: 'grey' },
+          { label: '异常提醒', variant: 'grey' },
           { label: '待干预', variant: 'red' },
         ],
       },
@@ -70,7 +70,7 @@ const DEFAULT_SECTIONS = [
         time: '12:40',
         avatarSrc: guoZhezhiAvatar,
         tags: [
-          { label: '退款执行错误', variant: 'grey' },
+          { label: '退款异常', variant: 'grey' },
           { label: '待干预', variant: 'red' },
         ],
       },
@@ -89,7 +89,7 @@ const DEFAULT_SECTIONS = [
         time: '11:22',
         avatarSrc: chengchengAvatar,
         tags: [
-          { label: '24时30分', variant: 'grey', iconName: 'alarm-clock-stroked' },
+          { label: '24时+', variant: 'grey', iconName: 'alarm-clock-stroked' },
           { label: '托管中', variant: 'green' },
         ],
       },
@@ -112,7 +112,7 @@ const DEFAULT_SECTIONS = [
         time: '09:46',
         avatarSrc: liuDelinAvatar,
         tags: [
-          { label: '协商不成功', variant: 'grey' },
+          { label: '协商未成', variant: 'grey' },
           { label: '托管中', variant: 'green' },
         ],
       },
@@ -248,7 +248,7 @@ const TIME = 'ml-auto shrink-0 pl-2 text-foreground-muted';
 const AVATAR_ONLY_HEADER = 'flex h-8 w-full items-center justify-center';
 const AVATAR_ONLY_LIST = 'flex min-h-0 flex-1 flex-col self-stretch gap-1 overflow-y-auto';
 const AVATAR_ONLY_ITEM = [
-  'relative inline-flex h-[68px] w-full items-center rounded-xl px-4',
+  'relative inline-flex h-[68px] min-h-[68px] w-full shrink-0 items-center rounded-xl px-4',
   'transition-colors duration-150 hover:bg-fill active:bg-fill-active',
   'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
 ].join(' ');
@@ -276,10 +276,11 @@ const CARD_MESSAGE_REGION_GENERATING = 'h-[196px] gap-3';
 const CARD_MESSAGE_REGION_EDITABLE = 'h-[155px] gap-3';
 const CARD_MESSAGE_ROW_BASE = 'flex w-full';
 const CARD_MESSAGE_ROW_USER = 'justify-start';
-const CARD_MESSAGE_ROW_AGENT = 'justify-end';
+const CARD_MESSAGE_ROW_OUTGOING = 'justify-end';
 const CARD_MESSAGE_BUBBLE_BASE = 'max-w-[calc(100%-24px)] rounded-lg px-2 py-1.5 text-xs leading-4 text-foreground';
 const CARD_MESSAGE_BUBBLE_USER = 'rounded-tl-none bg-fill';
-const CARD_MESSAGE_BUBBLE_AGENT = 'rounded-tr-none bg-[image:var(--gradient-ai-fill-1)]';
+const CARD_MESSAGE_BUBBLE_BOT = 'rounded-tr-none bg-[image:var(--gradient-ai-fill-1)]';
+const CARD_MESSAGE_BUBBLE_AGENT = 'rounded-tr-none bg-chat-outgoing';
 const CARD_DIVIDER = 'h-px w-full bg-border-default';
 const CARD_FOOTER_BASE = 'shrink-0';
 const CARD_FOOTER_REPLIED = 'px-4 py-4 text-xs leading-4 text-[#22272759]';
@@ -407,13 +408,17 @@ function sortCardTags(tags) {
 }
 
 function ConversationCardMessage({ message }) {
-  const isAgent = message.role === 'agent';
+  const isUser = message.role === 'user';
+  const isBot = message.role === 'bot';
+  const bubbleClassName = isUser
+    ? CARD_MESSAGE_BUBBLE_USER
+    : (isBot ? CARD_MESSAGE_BUBBLE_BOT : CARD_MESSAGE_BUBBLE_AGENT);
 
   return (
-    <div className={[CARD_MESSAGE_ROW_BASE, isAgent ? CARD_MESSAGE_ROW_AGENT : CARD_MESSAGE_ROW_USER].join(' ')}>
+    <div className={[CARD_MESSAGE_ROW_BASE, isUser ? CARD_MESSAGE_ROW_USER : CARD_MESSAGE_ROW_OUTGOING].join(' ')}>
       <div className={[
         CARD_MESSAGE_BUBBLE_BASE,
-        isAgent ? CARD_MESSAGE_BUBBLE_AGENT : CARD_MESSAGE_BUBBLE_USER,
+        bubbleClassName,
       ].join(' ')}>
         {message.text}
       </div>

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

@@ -63,7 +63,7 @@ export const CONVERSATION_LIST_TOKEN_MAP = {
   ],
   收起态: [
     { label: '列宽', cssProp: 'width', value: '88px' },
-    { label: '行高', cssProp: 'height', value: '68px' },
+    { label: '行高', cssProp: 'height/min-height', value: '68px（固定高度，不参与 flex 压缩；运行时需同时具备 h-[68px] min-h-[68px] shrink-0）' },
     { label: '选中投影', cssProp: 'box-shadow', token: '--shadow-list', value: '0 0 16px 0 rgba(101,115,137,0.06)', state: 'active' },
     { label: '选中左条', cssProp: 'background', token: '--color-data-0', value: '#24CDA5', state: 'active' },
   ],
@@ -93,14 +93,16 @@ export const CONVERSATION_LIST_TOKEN_MAP = {
     { label: '消息区高度', cssProp: 'height', value: '155px（输入文案）', state: 'card-editable' },
     { label: '消息区横向内边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', state: 'card' },
     { label: '消息区底部内边距', cssProp: 'padding-bottom', token: '--spacing-2', value: '8px', state: 'card' },
-    { label: '消息区滚动', cssProp: 'overflow-y', value: 'auto', state: 'card' },
+    { label: '消息区滚动', cssProp: 'overflow-y', value: 'auto（固定高度内滚动查看与右侧 IM 同源的完整气泡消息流，不允许按条数截断）', state: 'card' },
     { label: '消息气泡纵向间距', cssProp: 'row-gap', token: '--spacing-3', value: '12px', state: 'card' },
   ],
   卡片消息气泡: [
     { label: '用户气泡背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'card-user' },
-    { label: 'AI 气泡背景', cssProp: 'background-image', token: '--gradient-ai-fill-1', value: 'linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%)', state: 'card-agent' },
+    { label: 'AI 气泡背景', cssProp: 'background-image', token: '--gradient-ai-fill-1', value: 'linear-gradient(90deg, rgba(230, 247, 244, 1) 0%, rgba(239, 246, 255, 1) 55%, rgba(243, 245, 255, 1) 90%, rgba(252, 243, 255, 1) 100%)', state: 'card-bot' },
+    { label: '人工客服气泡背景', cssProp: 'background', token: '--color-chat-outgoing', value: 'var(--bg-chat-outgoing)', state: 'card-agent' },
     { label: '气泡圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（对角缺口按消息方向处理）', state: 'card' },
     { label: '气泡字号', cssProp: 'font-size', token: '--text-xs', value: '12px', state: 'card' },
+    { label: '与右侧聊天一致性', cssProp: 'content/style-source', value: '卡片气泡是右侧 IM 对话气泡的缩小版完整消息流；文案、角色、颜色语义必须同源一致。user -> grey，bot -> ai 渐变，agent -> default 浅青；允许降低字号或隐藏辅助元素，但不允许截断消息条数', state: 'card-preview' },
   ],
   卡片底部: [
     { label: '已回复内边距', cssProp: 'padding', token: '--spacing-4', value: '16px', state: 'replied' },