@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/Card.jsx

@@ -0,0 +1,460 @@
+import Avatar from './Avatar';
+import FormTitle from './FormTitle';
+import Icon from './Icon';
+import Tag from './Tag';
+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' },
+];
+
+const DEFAULT_TAGS = ['标签', '标签'];
+const DEFAULT_DATA_TITLE = '智能服务近7天趋势分析';
+const DEFAULT_DATA_DESCRIPTION = '针对指定业务场景下智能服务核心指标、运行路径、渠道等进行趋势分析，并输出总结报告';
+const DEFAULT_PRODUCT_TITLE = '海底捞门店通用双人套餐';
+const DEFAULT_PRODUCT_DESCRIPTION = '数量 1 · ¥128.00 · 月售 2,361';
+const DEFAULT_PRODUCT_STATUS = '已使用';
+const DEFAULT_INFO_TITLE = '抖音 AI 创作助手';
+const DEFAULT_INFO_DESCRIPTION = '抖音官方 AI 创作能力，支持短视频脚本、标题推荐、封面文案和热点灵感生成，帮助创作者提升内容生产效率。';
+const DEFAULT_INFO_META = '段然';
+const DEFAULT_INFO_BADGE = '官方能力';
+const DEFAULT_INFO_ICON_TONE = 'pink';
+const DEFAULT_INFO_ICON_STYLE = 'inverse';
+const DEFAULT_INFO_BADGE_VARIANT = 'purple';
+const DEFAULT_INFO_ICON = 'magic-wand-01-stroked';
+const DEFAULT_INFO_META_AVATAR = duanRanAvatar;
+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_INFO_STATS = [
+  { iconName: 'users-01-stroked', value: '128.6K' },
+  { iconName: 'star-01-stroked', value: '4.9' },
+  { iconName: 'play-circle-stroked', value: '立即体验' },
+];
+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>"
+)}`;
+
+/* ── 卡片容器 ── */
+const CARD_SURFACE = [
+  'tfds-card',
+  'group flex w-full',
+  'rounded-xl border p-5',
+  'transition-all duration-200',
+  'hover:shadow-card',
+].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';
+
+const CARD_VARIANT_CLASS = {
+  white: 'border-white bg-card-secondary hover:border-white hover:bg-surface',
+};
+
+const CARD_VARIANT_STYLE = {
+  grey: {
+    backgroundColor: 'var(--color-blueGrey-100)',
+    borderColor: 'var(--color-blueGrey-300)',
+  },
+};
+
+/* ── 内容区 ── */
+const CONTENT = 'flex w-full flex-col items-start gap-4';
+const COPY = 'flex w-full flex-col items-start gap-2';
+const TITLE = 'm-0 w-full text-base [font-weight:var(--font-semibold)] leading-card-title text-foreground';
+const DESCRIPTION = 'm-0 w-full text-sm font-normal leading-card-copy text-foreground-muted';
+const DATA_TAGS = 'flex flex-wrap items-center gap-2';
+const DATA_ICON_ROW = 'flex w-full items-start gap-5';
+const DATA_CONTENT_INNER = 'flex min-w-0 flex-1 flex-col items-start gap-4';
+const DATA_ICON_FRAME_BASE = 'inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border';
+
+/* ── 数据行 ── */
+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';
+
+/* ── 商品卡片 ── */
+const PRODUCT_IMAGE_FRAME = [
+  'relative h-14 w-14 shrink-0 overflow-hidden',
+  '[border-radius:var(--radius-lg)] border border-white bg-surface shadow-sm',
+].join(' ');
+const PRODUCT_IMAGE = 'h-full w-full object-cover';
+const PRODUCT_BODY = 'flex h-14 min-w-0 flex-1 flex-col justify-center gap-2';
+const PRODUCT_HEADER = 'flex min-w-0 items-start justify-between gap-3';
+const PRODUCT_HEADER_ICON_RIGHT = 'flex min-w-0 items-center gap-2 [&>h3]:flex-initial';
+const PRODUCT_CARD_ICON_RIGHT = 'min-h-[96px] flex-row-reverse items-center gap-5 [&_.tfds-tag.bg-white]:hidden';
+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';
+
+/* ── 信息卡片 ── */
+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',
+  blue: 'border-blue-100 bg-blue-50 text-blue-600',
+  green: 'border-green-100 bg-green-50 text-green-600',
+  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',
+};
+const INFO_ICON_STYLE_CLASS = {
+  tone: null,
+  inverse: 'border-black bg-black text-white',
+};
+const INFO_BADGE_VARIANTS = new Set([
+  'brand',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'purple',
+  'pink',
+  'teal',
+  'grey',
+  'white',
+  'ai',
+]);
+const INFO_BODY = 'flex min-w-0 flex-1 flex-col gap-5';
+const INFO_HEADER = 'flex min-w-0 flex-col gap-2';
+const INFO_HEADER_INLINE = 'flex min-w-0 items-start justify-between gap-3';
+const INFO_HEADER_ROW = 'flex min-w-0 items-center gap-2';
+const INFO_TITLE = 'm-0 min-w-0 flex-initial line-clamp-1 text-base [font-weight:var(--font-semibold)] leading-card-title text-foreground';
+const INFO_DESCRIPTION = 'm-0 w-full text-sm font-normal leading-5 text-foreground-muted line-clamp-2';
+const INFO_TITLE_GROUP = [
+  'min-w-0 flex-1 gap-2',
+  '[&>div>span]:line-clamp-1 [&>div>span]:!text-base [&>div>span]:!leading-card-title',
+  '[&>span]:line-clamp-2 [&>span]:!text-xs [&>span]:!leading-5',
+].join(' ');
+const INFO_TITLE_GROUP_ICON_RIGHT = [
+  INFO_TITLE_GROUP,
+  '[&>div]:gap-2',
+  '[&>div]:items-center',
+].join(' ');
+const INFO_FOOTER = 'flex min-w-0 flex-wrap items-center justify-between gap-x-8 gap-y-3';
+const INFO_META = 'inline-flex h-4 min-w-0 items-center gap-2 text-xs font-normal leading-4 text-foreground-muted';
+const INFO_META_AVATAR = [
+  '[&>img]:!scale-100',
+  '[&>img]:!translate-y-0',
+  '[&>img]:!object-center',
+].join(' ');
+const INFO_STATS = 'flex h-4 flex-wrap items-center gap-5';
+const INFO_STAT = [
+  'inline-flex h-4 items-center gap-2',
+  'text-xs font-normal leading-4 text-foreground-muted',
+  '[&>svg]:block [&>svg]:shrink-0',
+].join(' ');
+
+/* ── 底部 ── */
+const FOOTER = 'flex w-full items-center justify-between gap-4';
+const ACTION = [
+  'card-action inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
+  'border border-transparent text-foreground-muted',
+  'transition-all duration-200',
+  'hover:border-black hover:text-black',
+  'active:scale-[0.96]',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blueGrey-300',
+  'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+  'group-hover:border-black group-hover:text-black',
+].join(' ');
+
+/**
+ * Card — 业务信息摘要卡片
+ * @prop {'data'|'product'|'info'} [type='data'] — 卡片类型：data 为数据卡片，product 为商品卡片，info 为信息卡片
+ * @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 {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 {'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 {function|null} [onAction=null] — 数据卡片右侧箭头操作回调
+ * @prop {string} [actionAriaLabel='查看卡片详情'] — 右侧操作按钮无障碍文案
+ * @prop {string} [className=''] — 附加类名
+ * @prop {object} [style] — 内联样式
+ *
+ * 通用 tags 仅用于数据卡片左下角；商品和信息卡片不渲染标题左侧通用标签。
+ * 卡片容器默认半透明白底，hover 后补满白底并出现业务卡片专用投影。
+ */
+export default function Card({
+  type = 'data',
+  title,
+  description,
+  color = 'white',
+  stats = null,
+  tags = null,
+  productStatus = DEFAULT_PRODUCT_STATUS,
+  productImageSrc,
+  productImageAlt = '商品图',
+  infoIconName = DEFAULT_INFO_ICON,
+  infoIconTone = DEFAULT_INFO_ICON_TONE,
+  infoIconStyle = DEFAULT_INFO_ICON_STYLE,
+  infoLayout = DEFAULT_INFO_LAYOUT,
+  infoMetaLabel = DEFAULT_INFO_META,
+  infoMetaBadge = DEFAULT_INFO_BADGE,
+  infoMetaBadgeVariant = null,
+  infoMetaAvatarSrc = DEFAULT_INFO_META_AVATAR,
+  infoMetaAvatarAlt = '用户头像',
+  infoStats = null,
+  dataIconVisible = DEFAULT_DATA_ICON_VISIBLE,
+  dataIconName = null,
+  dataIconTone = DEFAULT_DATA_ICON_TONE,
+  dataIconStyle = DEFAULT_DATA_ICON_STYLE,
+  onAction,
+  actionAriaLabel = '查看卡片详情',
+  className = '',
+  style,
+}) {
+  const resolvedType = type === 'product' || type === 'info' ? type : 'data';
+  const resolvedColor = color === 'grey' ? 'grey' : 'white';
+  const resolvedTitle = title || (
+    resolvedType === 'product'
+      ? DEFAULT_PRODUCT_TITLE
+      : (resolvedType === 'info' ? DEFAULT_INFO_TITLE : DEFAULT_DATA_TITLE)
+  );
+  const resolvedDescription = description || (
+    resolvedType === 'product'
+      ? DEFAULT_PRODUCT_DESCRIPTION
+      : (resolvedType === 'info' ? DEFAULT_INFO_DESCRIPTION : DEFAULT_DATA_DESCRIPTION)
+  );
+  const resolvedStats = Array.isArray(stats) && stats.length > 0 ? stats : DEFAULT_STATS;
+  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 resolvedInfoIconTone = Object.prototype.hasOwnProperty.call(INFO_ICON_TONE_CLASS, infoIconTone)
+    ? infoIconTone
+    : DEFAULT_INFO_ICON_TONE;
+  const resolvedInfoIconStyle = Object.prototype.hasOwnProperty.call(INFO_ICON_STYLE_CLASS, infoIconStyle)
+    ? infoIconStyle
+    : DEFAULT_INFO_ICON_STYLE;
+  const resolvedInfoLayout = infoLayout === 'default' || infoLayout === 'icon-right'
+    ? infoLayout
+    : DEFAULT_INFO_LAYOUT;
+  const resolvedInfoMetaBadgeVariant = resolvedInfoIconStyle === 'tone'
+    ? 'grey'
+    : (INFO_BADGE_VARIANTS.has(infoMetaBadgeVariant) ? infoMetaBadgeVariant : DEFAULT_INFO_BADGE_VARIANT);
+  const resolvedDataIconTone = Object.prototype.hasOwnProperty.call(INFO_ICON_TONE_CLASS, dataIconTone)
+    ? dataIconTone
+    : DEFAULT_DATA_ICON_TONE;
+  const resolvedDataIconStyle = Object.prototype.hasOwnProperty.call(INFO_ICON_STYLE_CLASS, dataIconStyle)
+    ? dataIconStyle
+    : DEFAULT_DATA_ICON_STYLE;
+  const resolvedDataIconVisible = dataIconVisible === 'visible' ? 'visible' : DEFAULT_DATA_ICON_VISIBLE;
+  const hasDataIcon = resolvedType === 'data' && resolvedDataIconVisible === 'visible' && !!dataIconName;
+  const cardStyle = {
+    ...(CARD_VARIANT_STYLE[resolvedColor] || {}),
+    ...style,
+  };
+
+  if (resolvedType === 'product') {
+    return (
+      <article
+        className={[
+          CARD_SURFACE,
+          resolvedInfoLayout === 'icon-right' ? PRODUCT_CARD_ICON_RIGHT : PRODUCT_CARD,
+          CARD_VARIANT_CLASS[resolvedColor],
+          className,
+        ].filter(Boolean).join(' ')}
+        style={cardStyle}
+        data-tfds-component="Card"
+      >
+        <div className={PRODUCT_IMAGE_FRAME}>
+          <img
+            className={PRODUCT_IMAGE}
+            src={productImageSrc || DEFAULT_PRODUCT_IMAGE_SRC}
+            alt={productImageSrc ? productImageAlt : ''}
+            aria-hidden={productImageSrc ? undefined : true}
+          />
+        </div>
+
+        <div className={PRODUCT_BODY}>
+          <div className={resolvedInfoLayout === 'icon-right' ? PRODUCT_HEADER_ICON_RIGHT : PRODUCT_HEADER}>
+            <h3 className={PRODUCT_TITLE}>{resolvedTitle}</h3>
+            <Tag variant="green" size="l" radius="md" className="shrink-0">
+              {productStatus || DEFAULT_PRODUCT_STATUS}
+            </Tag>
+          </div>
+          <p className={PRODUCT_DESCRIPTION}>{resolvedDescription}</p>
+        </div>
+      </article>
+    );
+  }
+
+  if (resolvedType === 'info') {
+    const iconNode = (
+      <span
+        className={[
+          INFO_ICON_FRAME_BASE,
+          resolvedInfoIconStyle === 'inverse'
+            ? INFO_ICON_STYLE_CLASS.inverse
+            : INFO_ICON_TONE_CLASS[resolvedInfoIconTone],
+        ].join(' ')}
+        aria-hidden="true"
+      >
+        <Icon name={infoIconName || DEFAULT_INFO_ICON} size={24} />
+      </span>
+    );
+
+    const badgeNode = infoMetaBadge ? (
+      <Tag
+        variant={resolvedInfoMetaBadgeVariant}
+        size="l"
+        radius="md"
+        fontWeight="bold"
+        className="shrink-0 self-center"
+      >
+        {infoMetaBadge}
+      </Tag>
+    ) : null;
+
+    return (
+      <article
+        className={[CARD_SURFACE, INFO_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+        style={cardStyle}
+        data-tfds-component="Card"
+      >
+        {resolvedInfoLayout === 'icon-right' ? null : iconNode}
+
+        <div className={INFO_BODY}>
+          {resolvedInfoLayout === 'icon-right' ? (
+            <div className={INFO_HEADER_INLINE}>
+              <FormTitle
+                variant="form"
+                title={resolvedTitle}
+                description={resolvedDescription}
+                showDescription
+                titleSuffix={badgeNode}
+                className={INFO_TITLE_GROUP_ICON_RIGHT}
+              />
+              {iconNode}
+            </div>
+          ) : (
+            <div className={INFO_HEADER}>
+              <div className={INFO_HEADER_ROW}>
+                <h3 className={INFO_TITLE}>{resolvedTitle}</h3>
+                {badgeNode}
+              </div>
+              <p className={INFO_DESCRIPTION}>{resolvedDescription}</p>
+            </div>
+          )}
+
+          <div className={INFO_FOOTER}>
+            <span className={INFO_META}>
+              <Avatar
+                type="image"
+                shape="round"
+                size="xxs"
+                src={infoMetaAvatarSrc}
+                alt={infoMetaAvatarSrc ? infoMetaAvatarAlt : `${infoMetaLabel || DEFAULT_INFO_META}头像`}
+                className={INFO_META_AVATAR}
+              />
+              <span className="truncate">{infoMetaLabel || DEFAULT_INFO_META}</span>
+            </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>
+              ))}
+            </div>
+          </div>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article
+      className={[CARD_SURFACE, DATA_CARD, CARD_VARIANT_CLASS[resolvedColor], className].filter(Boolean).join(' ')}
+      style={cardStyle}
+      data-tfds-component="Card"
+    >
+      {hasDataIcon ? (
+        <div className={DATA_ICON_ROW}>
+          <div className={DATA_CONTENT_INNER}>
+            <div className={COPY}>
+              <h3 className={TITLE}>{resolvedTitle}</h3>
+              <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>
+              ))}
+            </div>
+          </div>
+          <span
+            className={[
+              DATA_ICON_FRAME_BASE,
+              resolvedDataIconStyle === 'inverse'
+                ? INFO_ICON_STYLE_CLASS.inverse
+                : INFO_ICON_TONE_CLASS[resolvedDataIconTone],
+            ].join(' ')}
+            aria-hidden="true"
+          >
+            <Icon name={dataIconName} size={24} />
+          </span>
+        </div>
+      ) : (
+        <div className={CONTENT}>
+          <div className={COPY}>
+            <h3 className={TITLE}>{resolvedTitle}</h3>
+            <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>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className={FOOTER}>
+        <div className={DATA_TAGS}>
+          {resolvedTags.slice(0, 2).map((tag, index) => (
+            <Tag key={`${tag}-${index}`} variant="grey" size="l" radius="md" fontWeight="bold">
+              {tag}
+            </Tag>
+          ))}
+        </div>
+        <button
+          type="button"
+          className={ACTION}
+          aria-label={actionAriaLabel}
+          onClick={onAction}
+          disabled={!onAction}
+        >
+          <Icon name="arrow-narrow-right-stroked" size={16} />
+        </button>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,124 @@
+export const CARD_TOKEN_MAP = {
+  base: [],
+  标题: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-card-title', value: '22px' },
+  ],
+  描述: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-card-copy', value: '21px' },
+  ],
+  数据: [
+    { label: '适用内容类型', cssProp: 'usage', value: '指标摘要 / 趋势分析 / 工具入口 / 优秀知识模版 / 优秀案例模版 / 脚本模版 / 话术模版 / 内容生成模版 / 服务 SOP 模版' },
+    { label: '标签位置', cssProp: 'placement', value: '卡片左下角，与右侧操作按钮水平对齐' },
+    { label: '标签组件', cssProp: 'component', value: 'Tag / variant=grey / size=l / radius=md' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '图标色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { 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: '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 内边距一致' },
+    { label: '图标样式配置', cssProp: 'prop', value: 'dataIconStyle: inverse（黑底白标，默认） / tone（彩色浅底）' },
+    { label: '标签颜色规则', cssProp: 'variant', value: '数据卡片所有类型默认统一 grey，不跟随 dataIconStyle 变化' },
+    { label: '图标色系配置', cssProp: 'prop', value: 'dataIconTone: pink / blue / green / orange / purple / brand / grey，默认 blue' },
+    { label: '图标尺寸（右侧）', cssProp: 'icon-size', value: '24px' },
+  ],
+  商品卡片: [
+    { label: '布局模式', cssProp: 'prop', value: 'infoLayout: 图标在左(default) / 图标在右(icon-right)' },
+    { label: '图片尺寸', cssProp: 'width/height', value: '56px' },
+    { label: '右侧文案区高度', cssProp: 'height', value: '56px' },
+    { label: '图片圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    { label: '图文间距', cssProp: 'gap', token: '--spacing-5', value: '20px，与商品卡片 p-5 内边距一致' },
+    { label: '图标在右布局', cssProp: 'display', value: 'icon-right: 商品图移动到右侧，状态标签紧跟主标题右侧，间距 8px' },
+    { label: '状态标签', cssProp: 'component', value: 'Tag / variant=green / size=l / radius=md' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '标题颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '副标题颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '最小高度', cssProp: 'min-height', value: '96px' },
+  ],
+  信息卡片: [
+    { label: '布局模式', cssProp: 'prop', value: 'infoLayout: 图标在左(default) / 图标在右(icon-right)' },
+    { label: '图标在左', cssProp: 'display', value: '左侧图标 + 右侧标题/副标题/右上徽标 + 底部辅助信息' },
+    { label: '图标在右', cssProp: 'display', value: '左侧标题/副标题/底部辅助信息 + 最右侧图标；徽标紧跟标题右侧，间距 8px' },
+    { label: '最小高度', cssProp: 'min-height', value: '148px' },
+    { label: '内边距', cssProp: 'padding', token: '--spacing-6', value: '24px' },
+    { label: '图文间距', cssProp: 'gap', token: '--spacing-6', value: '24px' },
+    { label: '默认场景', cssProp: 'content', value: '抖音 AI 创作助手 / 官方 AI 能力' },
+    { label: '图标组件', cssProp: 'component', value: 'Icon / 默认 magic-wand-01-stroked' },
+    { label: '图标容器尺寸', cssProp: 'width/height', value: '48px' },
+    { 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: 'color', token: '--color-*-600', value: '同色系 600 token / brand 使用 brand-600' },
+    { label: '反色图标样式', cssProp: 'background/color', value: 'inverse: 黑背景 + 白色 icon' },
+    { label: '图标尺寸', cssProp: 'icon-size', value: '24px' },
+    { label: '标题组件', cssProp: 'component', value: 'FormTitle / variant=form / showDescription' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-base', value: '16px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '副标题字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '副标题行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '副标题颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '徽标组件', cssProp: 'component', value: 'Tag / variant 跟随 infoIconStyle / size=l / radius=md' },
+    { 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: 'align-items', value: '所有布局均水平排列并垂直居中对齐' },
+    { label: '昵称头像', cssProp: 'component', value: 'Avatar / type=image / shape=round / size=xxs' },
+    { label: '昵称头像尺寸', cssProp: 'width/height', value: '16px' },
+    { label: '昵称头像资源', cssProp: 'asset', value: 'team-avatar-assets/duan-ran.png' },
+    { label: '头像与昵称间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { 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: '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: 'content', value: '启用量 / 评分 / 调用量 / 响应率 / 转化率 / 更新时间 / 操作入口' },
+  ],
+  卡片: [
+    { 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' },
+    { label: '灰底背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB' },
+    { label: '灰底描边', cssProp: 'border-color', token: '--color-blueGrey-300', value: '#E4E7EC' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px' },
+    { label: '投影', cssProp: 'box-shadow', token: '--shadow-card', value: '0 30px 50px 0 rgba(0, 9, 36, 0.05)', state: 'hover' },
+  ],
+  操作: [
+    { 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' },
+    { label: '描边色', cssProp: 'border-color', token: '--color-black', value: '#000000', state: 'hover' },
+    { label: '尺寸', cssProp: 'width/height', token: '--spacing-7', value: '28px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' },
+  ],
+  尺寸: [
+    { label: '最小列宽', cssProp: 'min-width', token: '--size-card-width', value: '400px' },
+    { label: '高度', cssProp: 'min-height', token: '--size-card-min-height', value: '201px' },
+    { label: '内边距', cssProp: 'padding', token: '--spacing-5', value: '20px' },
+    { label: '层间距', cssProp: 'gap', token: '--spacing-7', value: '28px' },
+  ],
+  引用组件: [
+    { 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: '数据卡片图标', 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' },
+  ],
+};

package/src/_b_end_runtime/components/CardPreview.jsx

@@ -0,0 +1,51 @@
+import Card from './Card';
+
+const CANVAS = 'flex w-full justify-center p-6';
+
+export default function CardPreview({
+  type = 'data',
+  color = 'white',
+  infoIconTone = 'pink',
+  infoIconStyle,
+  infoMetaBadgeVariant,
+  infoLayout,
+  dataIconVisible,
+  dataIconStyle,
+}) {
+  const isProduct = type === 'product';
+  const isInfo = type === 'info';
+  const isData = !isProduct && !isInfo;
+  const resolvedInfoIconStyle = isInfo ? (infoIconStyle || 'inverse') : infoIconStyle;
+  const resolvedInfoLayout = isInfo
+    ? (infoLayout || 'icon-right')
+    : (isProduct ? (infoLayout || 'default') : infoLayout);
+  const resolvedDataIconVisible = isData ? (dataIconVisible || 'hidden') : undefined;
+  const resolvedDataIconStyle = isData ? (dataIconStyle || 'inverse') : undefined;
+
+  return (
+    <div className={CANVAS}>
+      <div className={isProduct ? 'w-full max-w-[520px]' : 'w-full'}>
+        <Card
+          type={type}
+          color={color}
+          title={isProduct ? '海底捞门店通用双人套餐' : undefined}
+          description={isProduct ? '数量 1 · ¥128.00 · 月售 2,361' : undefined}
+          tags={isProduct || isInfo ? [] : undefined}
+          productStatus={isProduct ? '已使用' : undefined}
+          infoIconTone={isInfo ? infoIconTone : undefined}
+          infoIconStyle={isInfo ? resolvedInfoIconStyle : undefined}
+          infoLayout={isProduct || isInfo ? resolvedInfoLayout : undefined}
+          infoMetaLabel={isInfo ? '段然' : undefined}
+          infoMetaBadge={isInfo ? '官方能力' : undefined}
+          infoMetaBadgeVariant={isInfo ? infoMetaBadgeVariant : undefined}
+          dataIconVisible={isData ? resolvedDataIconVisible : undefined}
+          dataIconName={isData && resolvedDataIconVisible === 'visible' ? 'edit-04-stroked' : undefined}
+          dataIconTone={isData ? 'blue' : undefined}
+          dataIconStyle={isData ? resolvedDataIconStyle : undefined}
+          actionAriaLabel={isProduct ? undefined : '查看卡片详情'}
+          onAction={isProduct ? undefined : () => {}}
+        />
+      </div>
+    </div>
+  );
+}