@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/AvatarGroup.jsx

@@ -0,0 +1,80 @@
+import Avatar from './Avatar';
+import { getTeamMemberByName } from '../teamMembers';
+
+/**
+ * AvatarGroup — B端头像组组件（Tailwind 内联）
+ *
+ * 对齐 Figma AvatarGroup 组件集，展示 5 个头像按固定 10px 重叠的多人场景。
+ * 头像单项直接复用 Avatar 组件，仅通过宿主处理重叠层级和图片微调覆盖。
+ *
+ * **何时用**：强调「多人参与、协作氛围」的装饰性缩略（人数与顺序不可配）。
+ * **不用**：要展示真实成员列表、可点姓名、或人数 ≠5 → 用 `Avatar` 列表/表格列，勿强行用本组件。
+ *
+ * @prop {'s'|'default'|'m'} [size='s'] — 头像组尺寸，对应单项 32 / 40 / 48px
+ * @prop {string} [className=''] — 自定义类名
+ * @prop {React.CSSProperties|undefined} [style=undefined] — 自定义内联样式
+ */
+
+/* ── 容器 → 头像组排列 ── */
+const GROUP = 'relative flex isolate items-start pr-avatar-group-overlap';
+
+/* ── 单项 → 复用 Avatar 并关闭默认人像缩放 ── */
+const ITEM_CLASS = [
+  '-mr-avatar-group-overlap',
+  'after:pointer-events-none',
+  'after:absolute',
+  'after:inset-0',
+  'after:rounded-full',
+  "after:content-['']",
+  'after:shadow-[inset_0_0_0_1px_var(--color-fill)]',
+  '[&_img]:scale-100',
+  '[&_img]:translate-y-0',
+].join(' ');
+
+/* ── 尺寸 → 单项边长 ── */
+const SIZE_CLASS = {
+  s: 'size-8',
+  default: 'size-10',
+  m: 'size-12',
+};
+
+/* ── 头像组资源 ── */
+const GROUP_IMAGES = [
+  getTeamMemberByName('李思儒')?.avatarSrc,
+  getTeamMemberByName('程程murphy')?.avatarSrc,
+  getTeamMemberByName('刘德琳')?.avatarSrc,
+  getTeamMemberByName('段然')?.avatarSrc,
+  getTeamMemberByName('郭泽智')?.avatarSrc,
+];
+
+export default function AvatarGroup({
+  size = 's',
+  className = '',
+  style,
+  ...rest
+}) {
+  const resolvedSize = SIZE_CLASS[size] ? size : 's';
+
+  return (
+    <div
+      className={[`tfds-avatar-group`, [GROUP, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+      style={style}
+      {...rest}
+     data-tfds-component="AvatarGroup">
+      {GROUP_IMAGES.filter(Boolean).map((src, index) => (
+        <Avatar
+          key={src}
+          size={resolvedSize}
+          type="image"
+          src={src}
+          alt=""
+          aria-hidden="true"
+          className={ITEM_CLASS}
+          style={{
+            zIndex: GROUP_IMAGES.length - index,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+/**
+ * AvatarGroup — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：容器 → 头像项 → 尺寸
+ */
+export const AVATAR_GROUP_TOKEN_MAP = {
+  base: [
+    { label: '排列', cssProp: 'display', value: 'flex' },
+    { label: '隔离', cssProp: 'isolation', value: 'isolate' },
+    { label: '右侧补偿', cssProp: 'padding-right', token: '--spacing-avatar-group-overlap', value: '10px' },
+  ],
+  头像项: [
+    { label: '重叠间距', cssProp: 'margin-right', token: '--spacing-avatar-group-overlap', value: '-10px' },
+    { label: '裁切', cssProp: 'overflow', value: 'hidden' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' },
+  ],
+  sizes: {
+    s: [
+      { label: '单项边长', cssProp: 'width / height', token: '--spacing-8', value: '32px' },
+    ],
+    default: [
+      { label: '单项边长', cssProp: 'width / height', token: '--spacing-10', value: '40px' },
+    ],
+    m: [
+      { label: '单项边长', cssProp: 'width / height', token: '--spacing-12', value: '48px' },
+    ],
+  },
+};

package/src/_b_end_runtime/components/Button.jsx

@@ -0,0 +1,144 @@
+/**
+ * Button — 触发离散动作（提交、取消、打开弹窗、行内操作）
+ *
+ * **何时用**：改变业务状态、导航至任务、打开抽屉/对话框；与 `Tabs`（切换同容器内面板）区分。
+ * **组合**：仅图标时用 `icon` + `iconOnly`，必须传 `tooltip` 说明真实操作。
+ *
+ * @prop {'button'|'a'|import('react').ElementType} [as='button'] — 根元素类型（链接式操作可用 `as="a"`）
+ * @prop {'primary'|'outline-brand'|'outline-black'|'ghost-brand'|'ghost-black'|'text-brand'|'text-black'} [variant='primary'] — 变体（primary = 每视图唯一主操作）
+ * @prop {'sm'|'md'} [size='md'] — 高度档位，md 与 Input md 对齐
+ * @prop {'rounded'|'full'} [radius='rounded'] — 圆角
+ * @prop {import('react').ReactNode} [icon=null] — 图标插槽（通常传 `<Icon />`）
+ * @prop {boolean} [iconOnly=false] — 是否仅图标
+ * @prop {import('react').ReactNode} [tooltip=null] — 仅图标按钮的操作说明，hover/focus 时通过 Tooltip 展示
+ * @prop {boolean} [disabled=false]
+ * @prop {boolean} [loading=false]
+ */
+
+import Tooltip from './Tooltip';
+
+/* ── 基础样式（所有变体 / 尺寸共用） ── */
+const BASE = [
+  'tfds-button',
+  'inline-flex items-center justify-center',
+  '[font-family:inherit] [font-weight:var(--font-semibold)]',
+  'border cursor-pointer select-none',
+  'transition-all duration-150 leading-none',
+  '[outline:2px_solid_transparent] outline-offset-2',
+  'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
+].join(' ');
+
+/* ── 变体 → Tailwind 类名 ── */
+const VARIANT_CLASS = {
+  primary: [
+    'bg-grey-950 text-white border-transparent',
+    'hover:bg-grey-900',
+    'active:bg-grey-800 active:scale-[0.97]',
+    'focus-visible:outline-grey-400',
+  ].join(' '),
+  'outline-brand': [
+    'bg-white text-brand-700 border-border-brand',
+    'hover:bg-brand-50',
+    'active:bg-brand-100',
+    'focus-visible:outline-brand-200',
+  ].join(' '),
+  'outline-black': [
+    'bg-white text-foreground border-border-default',
+    'hover:bg-blueGrey-50 hover:border-border-strong',
+    'active:bg-blueGrey-100',
+    'focus-visible:outline-blueGrey-400',
+  ].join(' '),
+  'ghost-brand': [
+    'bg-transparent text-brand-700 border-transparent',
+    'hover:bg-brand-50',
+    'active:bg-brand-100',
+    'focus-visible:outline-brand-200',
+  ].join(' '),
+  'ghost-black': [
+    'bg-transparent text-foreground border-transparent',
+    'hover:bg-blueGrey-100',
+    'active:bg-blueGrey-200',
+    'focus-visible:outline-blueGrey-400',
+  ].join(' '),
+  'text-brand': [
+    'bg-transparent text-brand-700 border-transparent',
+    'hover:text-brand-800',
+    'active:text-brand-900',
+    'focus-visible:outline-brand-200',
+  ].join(' '),
+  'text-black': [
+    'bg-transparent text-foreground border-transparent',
+    'hover:text-blueGrey-700',
+    'active:text-blueGrey-600',
+    'focus-visible:outline-blueGrey-400',
+  ].join(' '),
+};
+
+/* ── 尺寸 → Tailwind 类名 ── */
+const SIZE_CLASS = {
+  sm: 'h-[24px] py-1 px-2 text-xs gap-1',
+  md: 'h-[36px] py-2 px-3 text-sm gap-2',
+};
+
+/* ── 圆角 → Tailwind 类名 ── */
+const RADIUS_CLASS = {
+  rounded: 'rounded-md',
+  full: 'rounded-full',
+};
+
+export default function Button({
+  as = 'button',
+  variant = 'primary',
+  size = 'md',
+  radius = 'rounded',
+  icon,
+  iconOnly = false,
+  tooltip = null,
+  disabled = false,
+  loading = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  const cls = [
+    BASE,
+    VARIANT_CLASS[variant],
+    SIZE_CLASS[size],
+    RADIUS_CLASS[radius],
+    iconOnly && '!p-0 !gap-0 aspect-square',
+    loading && 'cursor-wait pointer-events-none',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconSlot = loading
+    ? <span className="inline-block w-[1em] h-[1em] border-2 border-current border-t-transparent rounded-full animate-spin shrink-0" />
+    : icon;
+
+  const Component = as;
+  const hasIconOnlyTooltip = iconOnly && tooltip !== null && tooltip !== undefined && tooltip !== '';
+  const ariaLabel = rest['aria-label'] ?? (hasIconOnlyTooltip && typeof tooltip === 'string' ? tooltip : undefined);
+
+  const buttonNode = (
+    <Component
+      className={cls}
+      data-tfds-component="Button"
+      disabled={Component === 'button' ? disabled : undefined}
+      aria-busy={loading || undefined}
+      {...rest}
+      aria-label={ariaLabel}
+    >
+      {iconSlot}
+      {!iconOnly && children}
+    </Component>
+  );
+
+  if (!hasIconOnlyTooltip) {
+    return buttonNode;
+  }
+
+  return (
+    <Tooltip content={tooltip} placement="top">
+      {buttonNode}
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,90 @@
+/**
+ * Button — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Button.jsx
+ */
+export const BUTTON_TOKEN_MAP = {
+  base: [
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '边框宽度', cssProp: 'border-width', value: '1px' },
+  ],
+  variants: {
+    primary: [
+      { label: '背景色',   cssProp: 'background', token: '--color-grey-950', value: '#111116' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-grey-900', value: '#1C1C23', state: 'hover' },
+      { label: '按下背景', cssProp: 'background', token: '--color-grey-800', value: '#2E2F38', state: 'active' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-white', value: '#FFFFFF', semanticRef: 'text-inverse' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-grey-400', value: '#878892', state: 'focus' },
+    ],
+    'outline-brand': [
+      { label: '背景色',   cssProp: 'background', token: '--color-white', value: '#FFFFFF', semanticRef: 'bg-surface' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', state: 'hover', semanticRef: 'status-primary.bg' },
+      { label: '按下背景', cssProp: 'background', token: '--color-brand-100', value: '#CFF3EA', state: 'active' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', semanticRef: 'text-link' },
+      { label: '边框色',   cssProp: 'border-color', token: '--color-border-brand', value: '#56D3BC', semanticRef: 'border-brand' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    'outline-black': [
+      { label: '背景色',   cssProp: 'background', token: '--color-white', value: '#FFFFFF', semanticRef: 'bg-surface' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-blueGrey-50', value: '#FCFCFD', state: 'hover' },
+      { label: '按下背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'active' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '边框色',   cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+      { label: '悬浮边框', cssProp: 'border-color', token: '--color-border-strong', value: '#D0D5DD', state: 'hover', semanticRef: 'border-strong' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+    ],
+    'ghost-brand': [
+      { label: '背景色',   cssProp: 'background', value: 'transparent' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', state: 'hover', semanticRef: 'status-primary.bg' },
+      { label: '按下背景', cssProp: 'background', token: '--color-brand-100', value: '#CFF3EA', state: 'active' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', semanticRef: 'text-link' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    'ghost-black': [
+      { label: '背景色',   cssProp: 'background', value: 'transparent' },
+      { label: '悬浮背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'hover' },
+      { label: '按下背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'active' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+    ],
+    'text-brand': [
+      { label: '背景色',   cssProp: 'background', value: 'transparent' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', semanticRef: 'text-link' },
+      { label: '悬浮文字', cssProp: 'color', token: '--color-brand-800', value: '#129683', state: 'hover', semanticRef: 'text-link.hover' },
+      { label: '按下文字', cssProp: 'color', token: '--color-brand-900', value: '#0D786A', state: 'active', semanticRef: 'text-link.active' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-brand-200', value: '#A8E8D7', state: 'focus' },
+    ],
+    'text-black': [
+      { label: '背景色',   cssProp: 'background', value: 'transparent' },
+      { label: '文字颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+      { label: '悬浮文字', cssProp: 'color', token: '--color-blueGrey-700', value: '#475467', state: 'hover', semanticRef: 'text-secondary' },
+      { label: '按下文字', cssProp: 'color', token: '--color-blueGrey-600', value: '#667085', state: 'active', semanticRef: 'text-tertiary' },
+      { label: '聚焦环',   cssProp: 'outline-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'focus' },
+    ],
+  },
+  sizes: {
+    sm: [
+      { label: '高度',     cssProp: 'height', value: '24px' },
+      { label: '水平内距', cssProp: 'padding-inline', token: '--spacing-2', value: '8px' },
+      { label: '垂直内距', cssProp: 'padding-block',  token: '--spacing-1', value: '4px' },
+      { label: '字号',     cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '间距',     cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    md: [
+      { label: '高度',     cssProp: 'height', value: '36px' },
+      { label: '水平内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+      { label: '垂直内距', cssProp: 'padding-block',  token: '--spacing-2', value: '8px' },
+      { label: '字号',     cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '间距',     cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    ],
+  },
+  iconOnly: [
+    { label: '宽高比',   cssProp: 'aspect-ratio', value: '1:1' },
+    { label: '内距',     cssProp: 'padding', value: '0' },
+    { label: '间距',     cssProp: 'gap', value: '0' },
+    { label: '操作说明', cssProp: 'interaction', value: '所有 iconOnly 纯图标按钮必须传 tooltip；hover/focus 通过 Tooltip 展示真实操作文案' },
+  ],
+  radii: {
+    rounded: [{ label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' }],
+    full:    [{ label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' }],
+  },
+};