@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,135 @@
+/**
+ * TOKEN_MAP 顺序：文本类 → 容器与布局 → 尺寸与状态 → 底部「引用组件」
+ * 与 ConversationList.jsx 中 Tailwind 类及默认布局数值对齐。
+ */
+export const CONVERSATION_LIST_TOKEN_MAP = {
+  标题栏文案: [
+    { label: '标题颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+  ],
+  会话文字: [
+    { label: '标题颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '标题行高', cssProp: 'line-height', value: '24px' },
+    { label: '辅助色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '辅助字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '辅助行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+  ],
+  容器: [
+    { label: '默认宽度', cssProp: 'width', value: '400px' },
+    { label: '根背景', cssProp: 'background', value: '透明（继承父级）' },
+    { label: '展开内边距', cssProp: 'padding', token: '--spacing-4', value: '16px' },
+    { label: '展开间距', cssProp: 'gap', token: '--spacing-4', value: '16px' },
+    { label: '收起内边距', cssProp: 'padding', value: '12px 16px', state: 'collapsed' },
+    { label: '收起间距', cssProp: 'gap', token: '--spacing-4', value: '16px', state: 'collapsed' },
+  ],
+  标题栏: [
+    { label: '高度', cssProp: 'height', value: '26px' },
+    { label: '图标按钮', cssProp: 'width/height', value: '26px' },
+    { label: '按钮圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    { label: '图标尺寸', cssProp: 'icon-size', token: '--size-icon-16', value: '16px' },
+    { label: '收起钮字色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '收起钮悬浮', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'hover' },
+    { label: '收起钮按下', cssProp: 'background', token: '--color-fill-active', value: 'rgba(83, 96, 143, 0.15)', state: 'active' },
+    { label: '工具钮字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '工具钮悬浮', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'hover' },
+    { label: '工具钮按下', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'active' },
+  ],
+  分段筛选: [
+    { label: '组件', cssProp: '—', value: 'Tabs / variant=segment / size=sm' },
+  ],
+  分组标题: [
+    { label: '与列表项间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '分组之间间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '高度', cssProp: 'height', token: '--spacing-5', value: '20px' },
+    { label: '内边距', cssProp: 'padding', value: '2px' },
+    { label: '文字颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+  ],
+  会话项: [
+    { label: '列表项之间间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '内边距', cssProp: 'padding', token: '--spacing-3', value: '12px' },
+    { label: '图文间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    { label: '选中背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', state: 'active' },
+    { 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-brand-500', value: '#56D3BC', state: 'active' },
+    { label: '悬浮背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'hover' },
+    { label: '按下背景', cssProp: 'background', token: '--color-fill-active', value: 'rgba(83, 96, 143, 0.15)', state: 'active' },
+  ],
+  收起态: [
+    { label: '列宽', cssProp: 'width', value: '88px' },
+    { label: '行高', cssProp: 'height', value: '68px' },
+    { 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' },
+  ],
+  卡片列表: [
+    { label: '卡片圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px', state: 'card' },
+    { label: '卡片投影', cssProp: 'box-shadow', token: '--shadow-list', value: '0 0 16px 0 rgba(101,115,137,0.06)', state: 'card' },
+    { label: '卡片最小宽度', cssProp: 'min-width', value: '333px', state: 'card' },
+    { label: '双列阈值', cssProp: 'width', value: '> 580px 时切为 2 列', state: 'card-responsive' },
+    { label: '双列布局', cssProp: 'grid-template-columns', value: 'repeat(2, minmax(0, 1fr))', state: 'card-responsive' },
+    { label: '三列阈值', cssProp: 'width', value: '> 950px 时切为 3 列', state: 'card-responsive' },
+    { label: '三列布局', cssProp: 'grid-template-columns', value: 'repeat(3, minmax(0, 1fr))', state: 'card-responsive' },
+    { label: '卡片纵向间距', cssProp: 'row-gap', token: '--spacing-4', value: '16px', state: 'card' },
+    { label: '卡片横向间距', cssProp: 'column-gap', token: '--spacing-4', value: '16px', state: 'card' },
+    { label: '卡片背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', state: 'card' },
+    { label: '选中内描边', cssProp: 'box-shadow', token: '--color-brand-500', value: 'inset 0 0 0 1.5px var(--color-brand-500)', state: 'card-active' },
+    { label: '选中投影', cssProp: 'box-shadow', token: '--shadow-list', value: '0 0 16px 0 rgba(101,115,137,0.06)', state: 'card-active' },
+  ],
+  卡片头部: [
+    { label: '头部横向内边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', state: 'card' },
+    { label: '头部顶部内边距', cssProp: 'padding-top', token: '--spacing-3', value: '12px', state: 'card' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600', state: 'card' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-sm', value: '14px', state: 'card' },
+    { label: '头像尺寸', cssProp: 'width/height', value: '32px', state: 'card' },
+  ],
+  卡片消息区: [
+    { label: '消息区高度', cssProp: 'height', value: '196px（已回复 / 生成中）', state: 'card-replied-generating' },
+    { 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: '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: '气泡圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（对角缺口按消息方向处理）', state: 'card' },
+    { label: '气泡字号', cssProp: 'font-size', token: '--text-xs', value: '12px', state: 'card' },
+  ],
+  卡片底部: [
+    { label: '已回复内边距', cssProp: 'padding', token: '--spacing-4', value: '16px', state: 'replied' },
+    { label: '已回复文字色', cssProp: 'color', value: '#22272759', state: 'replied' },
+    { label: '生成态内边距', cssProp: 'padding', token: '--spacing-4', value: '16px', state: 'generating' },
+    { label: '生成态图标', cssProp: 'icon-size', token: '--size-icon-12', value: '12px', state: 'generating' },
+    { label: '生成态文案间距', cssProp: 'gap', token: '--spacing-2', value: '8px', state: 'generating' },
+    { label: '生成态文字色', cssProp: 'color', value: '#22272759', state: 'generating' },
+    { label: '输入态分割线', cssProp: 'border-top-color', token: '--color-border-default', value: 'rgba(45, 66, 107, 0.12)', state: 'editable' },
+    { label: '输入态内边距', cssProp: 'padding', token: '--spacing-3', value: '12px', state: 'editable' },
+    { label: '输入态上下间距', cssProp: 'row-gap', token: '--spacing-3', value: '12px', state: 'editable' },
+    { label: '发送按钮组件', cssProp: 'component', value: 'Button / variant=primary / size=sm / iconOnly', state: 'editable' },
+    { label: '发送按钮尺寸', cssProp: 'width/height', token: '--size-6', value: '24px', state: 'editable' },
+    { label: '发送按钮圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px', state: 'editable' },
+    { label: '发送按钮位置', cssProp: 'justify-self', value: '底部右对齐', state: 'editable' },
+    { label: '发送按钮背景', cssProp: 'background', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary', state: 'editable' },
+    { label: '发送按钮前景', cssProp: 'color', token: '--color-white', value: '#FFFFFF', state: 'editable' },
+    { label: '发送后结果', cssProp: 'interaction', value: '点击发送后将 draftText 追加为 agent 消息气泡，并切换为 replied', state: 'editable' },
+    { label: '发送事件', cssProp: 'event', value: 'onSend({ item, draftText, nextItem, sectionId })', state: 'editable' },
+  ],
+  宽度把手: [
+    { label: '指示条', cssProp: 'background', token: '--color-brand-500', value: '#56D3BC', state: 'focus-hover' },
+    { label: '默认条', cssProp: 'background', token: '--color-transparent', value: 'transparent' },
+  ],
+  引用组件: [
+    { label: '分段筛选', cssProp: '—', value: 'Tabs / variant=segment / size=sm' },
+    { label: '顶栏操作', cssProp: '—', value: 'Tooltip + Button / variant=ghost-black / size=sm / iconOnly（hover 浅底方块）' },
+    { label: '头像', cssProp: '—', value: 'Avatar / shape=round / size=s / type=image' },
+    { label: '状态标签', cssProp: '—', value: 'Tag / size=m / radius=md' },
+    { label: '行内图标', cssProp: '—', value: 'Icon / file-05-stroked 12px；分组 chevron-up-stroked 16px' },
+  ],
+};

package/src/_b_end_runtime/components/ConversationListPreview.jsx

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import ConversationList, {
+  CONVERSATION_LIST_SAMPLE_SECTIONS,
+  getConversationListEditableDraftText,
+} from './ConversationList';
+
+const CANVAS = 'flex h-full min-h-0 w-full justify-center overflow-hidden p-6';
+const FRAME_DEFAULT = 'flex h-full min-h-0 w-[400px] max-w-full';
+const FRAME_CARD = 'flex h-full min-h-0 w-full min-w-[333px] max-w-[1120px]';
+const CARD_PREVIEW_STATUS_BY_MODE = {
+  'card-all': 'all',
+  'card-replied': 'replied',
+  'card-generating': 'generating',
+  'card-editable': 'editable',
+};
+const CARD_PREVIEW_STATUS_SEQUENCE = ['replied', 'generating', 'editable'];
+
+function getFirstPreviewItemId(sections) {
+  const resolvedSections = Array.isArray(sections) && sections.length > 0
+    ? sections
+    : CONVERSATION_LIST_SAMPLE_SECTIONS;
+
+  for (const section of resolvedSections) {
+    const firstItem = section?.items?.[0];
+    if (firstItem?.id) return firstItem.id;
+  }
+
+  return null;
+}
+
+function getMixedPreviewCardStatus(flatIndex) {
+  return CARD_PREVIEW_STATUS_SEQUENCE[flatIndex % CARD_PREVIEW_STATUS_SEQUENCE.length] || 'replied';
+}
+
+export default function ConversationListPreview({ previewMode = 'expanded' }) {
+  const frameRef = useRef(null);
+  const isPreviewModeCard = previewMode in CARD_PREVIEW_STATUS_BY_MODE;
+  const previewVariant = isPreviewModeCard ? 'card' : 'default';
+  const [layoutVariant, setLayoutVariant] = useState(previewVariant);
+  const isCardMode = layoutVariant === 'card';
+
+  const previewSections = useMemo(() => {
+    if (!isCardMode) return undefined;
+
+    const footerState = CARD_PREVIEW_STATUS_BY_MODE[previewMode];
+    if (!footerState) return CONVERSATION_LIST_SAMPLE_SECTIONS;
+
+    let flatIndex = 0;
+
+    return CONVERSATION_LIST_SAMPLE_SECTIONS.map((section) => ({
+      ...section,
+      items: (section.items || []).map((item) => {
+        const resolvedStatus = footerState === 'all'
+          ? getMixedPreviewCardStatus(flatIndex)
+          : footerState;
+        flatIndex += 1;
+
+        return {
+          ...item,
+          status: resolvedStatus,
+          draftText: resolvedStatus === 'editable' ? getConversationListEditableDraftText(item) : '',
+        };
+      }),
+    }));
+  }, [isCardMode, previewMode]);
+  const firstPreviewItemId = useMemo(() => getFirstPreviewItemId(previewSections), [previewSections]);
+  const [activeItemId, setActiveItemId] = useState(() => firstPreviewItemId);
+
+  useEffect(() => {
+    setLayoutVariant(previewVariant);
+  }, [previewVariant]);
+
+  useEffect(() => {
+    setActiveItemId(firstPreviewItemId);
+  }, [firstPreviewItemId, previewMode]);
+
+  useEffect(() => {
+    if (isCardMode || isPreviewModeCard) return undefined;
+
+    let rafId = window.requestAnimationFrame(() => {
+      const resizeHandle = frameRef.current?.querySelector('[role="separator"][aria-label="调整会话列表宽度"]');
+      if (!resizeHandle) return;
+
+      resizeHandle.dispatchEvent(new KeyboardEvent('keydown', {
+        key: previewMode === 'collapsed' ? 'Home' : 'End',
+        bubbles: true,
+      }));
+    });
+
+    return () => {
+      window.cancelAnimationFrame(rafId);
+    };
+  }, [isCardMode, isPreviewModeCard, previewMode]);
+
+  return (
+    <div className={CANVAS}>
+      <div ref={frameRef} className={isCardMode ? FRAME_CARD : FRAME_DEFAULT}>
+        <ConversationList
+          variant={layoutVariant}
+          onVariantChange={setLayoutVariant}
+          sections={previewSections}
+          activeItemId={activeItemId}
+          onItemClick={(item) => setActiveItemId(item.id)}
+        />
+      </div>
+    </div>
+  );
+}

package/src/_b_end_runtime/components/CustomerServiceWorkspaceFrame.jsx

@@ -0,0 +1,324 @@
+/**
+ * CustomerServiceWorkspaceFrame — 客服工作台框架
+ *
+ * 像素对齐 Figma「在线Agent」框架：浅灰底、顶部在线状态/指标/工具/模式切换、
+ * 下方半透明工作区与右侧主白卡。组件只负责框架承载，不内置具体会话业务。
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Icon from './Icon';
+import Button from './Button';
+import Tabs from './Tabs';
+
+const DEFAULT_STATS = [
+  { id: 'online-users', iconName: 'users-01-stroked', value: '12', label: '在线接待数' },
+  { id: 'completed', iconName: 'annotation-check-stroked', value: '36', label: '已处理数' },
+  { id: 'progress', iconName: 'bar-chart-10-stroked', value: '7/23', label: '目标进度' },
+];
+
+const DEFAULT_TOOLS = [
+  { id: 'insight', iconName: 'bar-chart-square-02-stroked', label: '数据看板' },
+  { id: 'announcement', iconName: 'announcement-01-stroked', label: '公告' },
+  { id: 'settings', iconName: 'settings-02-stroked', label: '设置' },
+];
+
+const DEFAULT_MODES = [
+  { id: 'basic', label: '基础模式' },
+  { id: 'managed', label: '托管模式' },
+];
+
+// 覆盖深度必须大于 16px 圆角半径，避免主面板圆角切角处露出左板块右边界。
+const PANEL_OVERLAP = 32;
+
+const ROOT = [
+  'tfds-customer-service-workspace-frame',
+  'flex size-full min-h-[560px] items-start overflow-hidden rounded-xl bg-blueGrey-200',
+  '[font-family:inherit] text-foreground',
+].join(' ');
+const SHELL = 'flex h-full min-w-0 flex-1 flex-col gap-4 overflow-hidden p-4';
+const TOP_BAR = 'grid min-h-[24px] w-full shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 overflow-hidden pl-3';
+const AGENT_GROUP = 'flex min-w-0 shrink-0 items-center gap-3 rounded-xl';
+const AGENT_NAME = 'm-0 whitespace-nowrap text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground';
+const STATUS_DOT_WRAP = 'flex size-4 shrink-0 items-center justify-center py-1';
+const STATUS_DOT = 'size-[10px] rounded-full bg-green-500';
+const STATUS_BUTTON = 'shrink-0';
+const STATUS_TEXT = 'whitespace-nowrap text-sm [font-weight:var(--font-semibold)] leading-5';
+const METRICS_SLOT = 'flex min-w-0 items-center justify-center';
+const MODE_SLOT = 'flex min-w-0 items-center justify-end';
+const METRICS_CARD = 'flex shrink-0 items-center gap-4 rounded-md border border-white bg-white/60 px-4 py-1';
+const METRIC_ITEM = 'flex shrink-0 items-center gap-1';
+const METRIC_TEXT = 'm-0 max-w-[44px] truncate text-xs [font-weight:var(--font-semibold)] leading-4 text-foreground';
+const METRIC_DIVIDER = 'h-3 w-px bg-border-default';
+const TOOL_GROUP = 'flex shrink-0 items-center gap-3';
+const MODE_TABS = 'shrink-0';
+const WORKSPACE = [
+  'relative flex min-h-0 w-full flex-1 items-stretch',
+  'overflow-visible',
+].join(' ');
+const SIDE_PLACEHOLDER = 'relative z-0 h-full shrink-0 overflow-hidden rounded-xl border border-white bg-white/50';
+const SIDE_CONTENT = 'absolute inset-y-0 left-0 min-w-0 overflow-hidden';
+const RESIZE_HANDLE = [
+  'group/resize absolute top-0 bottom-0 z-20 flex w-2 -translate-x-1/2 cursor-col-resize items-stretch justify-center',
+  'border-0 bg-transparent p-0',
+  'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blueGrey-400',
+].join(' ');
+const RESIZE_HANDLE_LINE = [
+  'my-4 w-px rounded-full bg-transparent transition-colors duration-150',
+  'group-hover/resize:bg-brand-400 group-focus-visible/resize:bg-brand-500 group-active/resize:bg-brand-500',
+].join(' ');
+const MAIN_PANEL = [
+  'relative z-10 flex h-full min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-xl border border-white bg-surface',
+  'shadow-[0px_0px_16px_0px_rgba(101,115,137,0.06)]',
+].join(' ');
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function normalizeItems(items, fallback) {
+  return Array.isArray(items) && items.length > 0 ? items : fallback;
+}
+
+function resolveMaxSideWidth(workspaceWidth, maxSideWidth, minSideWidth, mainMinWidth) {
+  const finiteMaxSideWidth = Number.isFinite(maxSideWidth) ? maxSideWidth : Number.POSITIVE_INFINITY;
+  if (workspaceWidth <= 0) {
+    return Math.max(minSideWidth, Number.isFinite(finiteMaxSideWidth) ? finiteMaxSideWidth : 9999);
+  }
+  const maxByMainPanel = workspaceWidth > 0
+    ? workspaceWidth + PANEL_OVERLAP - mainMinWidth
+    : finiteMaxSideWidth;
+  const nextMax = Math.min(finiteMaxSideWidth, maxByMainPanel);
+  return Math.max(minSideWidth, Number.isFinite(nextMax) ? nextMax : minSideWidth);
+}
+
+export default function CustomerServiceWorkspaceFrame({
+  agentName = '客服名称',
+  onlineDuration = '02:27:58',
+  onlineLabel = '在线',
+  stats = DEFAULT_STATS,
+  tools = DEFAULT_TOOLS,
+  modes = DEFAULT_MODES,
+  mode,
+  defaultMode = 'basic',
+  onModeChange,
+  leftPanel = null,
+  mainPanel = null,
+  children = null,
+  sideWidth = 432,
+  minSideWidth = 100,
+  leftContentMinWidth = 0,
+  maxSideWidth = Number.POSITIVE_INFINITY,
+  mainMinWidth = 380,
+  resizable = true,
+  onSideWidthChange,
+  className = '',
+  style = null,
+}) {
+  const workspaceRef = useRef(null);
+  const modeItems = useMemo(() => normalizeItems(modes, DEFAULT_MODES), [modes]);
+  const statItems = useMemo(() => normalizeItems(stats, DEFAULT_STATS), [stats]);
+  const toolItems = useMemo(() => normalizeItems(tools, DEFAULT_TOOLS), [tools]);
+  const isControlled = typeof mode === 'string';
+  const [innerMode, setInnerMode] = useState(defaultMode);
+  const [workspaceWidth, setWorkspaceWidth] = useState(0);
+  const resolvedLeftContentMinWidth = Math.max(0, Number.isFinite(leftContentMinWidth) ? leftContentMinWidth : 0);
+  const resolvedMinSideWidth = Math.max(minSideWidth, resolvedLeftContentMinWidth + PANEL_OVERLAP);
+  const resolvedMaxSideWidth = resolveMaxSideWidth(workspaceWidth, maxSideWidth, resolvedMinSideWidth, mainMinWidth);
+  const [currentSideWidth, setCurrentSideWidth] = useState(() => clamp(sideWidth, resolvedMinSideWidth, maxSideWidth));
+  const activeMode = isControlled ? mode : innerMode;
+  const activeModeIndex = useMemo(() => {
+    const matchedIndex = modeItems.findIndex((item) => item.id === activeMode);
+    return matchedIndex >= 0 ? matchedIndex : 0;
+  }, [activeMode, modeItems]);
+  const resolvedMain = mainPanel ?? children;
+
+  useEffect(() => {
+    const workspaceNode = workspaceRef.current;
+    if (!workspaceNode) return undefined;
+
+    function updateWorkspaceWidth() {
+      setWorkspaceWidth(workspaceNode.getBoundingClientRect().width);
+    }
+
+    updateWorkspaceWidth();
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateWorkspaceWidth) : null;
+    observer?.observe(workspaceNode);
+    window.addEventListener('resize', updateWorkspaceWidth);
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', updateWorkspaceWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    setCurrentSideWidth(clamp(sideWidth, resolvedMinSideWidth, resolvedMaxSideWidth));
+  }, [resolvedMinSideWidth, resolvedMaxSideWidth, sideWidth]);
+
+  function handleModeChange(nextMode) {
+    if (!isControlled) setInnerMode(nextMode);
+    onModeChange?.(nextMode);
+  }
+
+  function handleModeTabChange(nextIndex) {
+    const nextMode = modeItems[nextIndex]?.id;
+    if (!nextMode) return;
+    handleModeChange(nextMode);
+  }
+
+  function updateSideWidth(nextWidth) {
+    const resolvedWidth = clamp(nextWidth, resolvedMinSideWidth, resolvedMaxSideWidth);
+    setCurrentSideWidth(resolvedWidth);
+    onSideWidthChange?.(resolvedWidth);
+  }
+
+  function handleResizePointerDown(event) {
+    if (!resizable) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = currentSideWidth;
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    function handlePointerMove(moveEvent) {
+      updateSideWidth(startWidth + moveEvent.clientX - startX);
+    }
+
+    function handlePointerUp() {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    }
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+  }
+
+  function handleResizeKeyDown(event) {
+    if (!resizable) return;
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
+    const delta = event.shiftKey ? 32 : 16;
+    updateSideWidth(currentSideWidth + (event.key === 'ArrowRight' ? delta : -delta));
+  }
+
+  return (
+    <section
+      className={[ROOT, className].filter(Boolean).join(' ')}
+      style={style}
+      data-tfds-component="CustomerServiceWorkspaceFrame"
+      aria-label="客服工作台框架"
+    >
+      <div className={SHELL}>
+        <header className={TOP_BAR} data-tfds-component="CustomerServiceWorkspaceFrame.Header">
+          <div className={AGENT_GROUP}>
+            <p className={AGENT_NAME}>{agentName}</p>
+            <Button
+              type="button"
+              variant="text-black"
+              size="md"
+              className={STATUS_BUTTON}
+              icon={(
+                <span className={STATUS_DOT_WRAP} aria-hidden="true">
+                  <span className={STATUS_DOT} />
+                </span>
+              )}
+              aria-label={`${onlineLabel} ${onlineDuration}`}
+            >
+              <span className={STATUS_TEXT}>{onlineLabel} {onlineDuration}</span>
+            </Button>
+          </div>
+
+          <div className={METRICS_SLOT}>
+            <div className={METRICS_CARD} data-tfds-component="CustomerServiceWorkspaceFrame.Metrics">
+              {statItems.map((item, index) => (
+                <div className={METRIC_ITEM} key={item.id || `${item.iconName}-${index}`} title={item.label}>
+                  <Icon name={item.iconName} size={14} className="text-foreground" aria-hidden="true" />
+                  <p className={METRIC_TEXT}>{item.value}</p>
+                </div>
+              ))}
+              {toolItems.length > 0 ? <span className={METRIC_DIVIDER} aria-hidden="true" /> : null}
+              {toolItems.length > 0 ? (
+                <div className={TOOL_GROUP}>
+                  {toolItems.map((item) => (
+                    <Button
+                      key={item.id || item.iconName}
+                      type="button"
+                      variant="ghost-black"
+                      size="sm"
+                      icon={<Icon name={item.iconName} size={16} />}
+                      iconOnly
+                      aria-label={item.label}
+                      title={item.label}
+                    />
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <div className={MODE_SLOT}>
+            <Tabs
+              variant="segment"
+              size="sm"
+              className={MODE_TABS}
+              aria-label="工作台模式"
+              items={modeItems.map((item) => ({ label: item.label }))}
+              activeIndex={activeModeIndex}
+              onChange={handleModeTabChange}
+            />
+          </div>
+        </header>
+
+        <div ref={workspaceRef} className={WORKSPACE} data-tfds-component="CustomerServiceWorkspaceFrame.Workspace">
+          <aside
+            className={SIDE_PLACEHOLDER}
+            style={{ width: `${currentSideWidth}px` }}
+            data-tfds-component="CustomerServiceWorkspaceFrame.LeftPanel"
+          >
+            <div
+              className={SIDE_CONTENT}
+              style={{ right: `${PANEL_OVERLAP}px` }}
+              data-tfds-component="CustomerServiceWorkspaceFrame.LeftPanelContent"
+            >
+              {leftPanel}
+            </div>
+          </aside>
+          <main
+            className={MAIN_PANEL}
+            style={{ marginLeft: `-${PANEL_OVERLAP}px`, minWidth: `${mainMinWidth}px` }}
+            data-tfds-component="CustomerServiceWorkspaceFrame.MainPanel"
+          >
+            {resolvedMain}
+          </main>
+          {resizable ? (
+            <button
+              type="button"
+              className={RESIZE_HANDLE}
+              style={{ left: `${currentSideWidth - PANEL_OVERLAP}px` }}
+              aria-label="调整客服工作台左右面板宽度"
+              aria-orientation="vertical"
+              aria-valuemin={Math.round(resolvedMinSideWidth)}
+              aria-valuemax={Math.round(resolvedMaxSideWidth)}
+              aria-valuenow={currentSideWidth}
+              data-tfds-component="CustomerServiceWorkspaceFrame.ResizeHandle"
+              onPointerDown={handleResizePointerDown}
+              onKeyDown={handleResizeKeyDown}
+            >
+              <span className={RESIZE_HANDLE_LINE} aria-hidden="true" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export {
+  DEFAULT_STATS as CUSTOMER_SERVICE_WORKSPACE_FRAME_STATS,
+  DEFAULT_TOOLS as CUSTOMER_SERVICE_WORKSPACE_FRAME_TOOLS,
+  DEFAULT_MODES as CUSTOMER_SERVICE_WORKSPACE_FRAME_MODES,
+};

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

@@ -0,0 +1,69 @@
+/**
+ * CustomerServiceWorkspaceFrame token map
+ * 对齐 Figma 节点「在线Agent」客服工作台框架。
+ */
+
+export const CUSTOMER_SERVICE_WORKSPACE_FRAME_TOKEN_MAP = {
+  容器: [
+    { label: '根背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7' },
+    { label: '根圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px' },
+    { label: '外层内边距', cssProp: 'padding', token: '--spacing-4', value: '16px' },
+    { label: '纵向间距', cssProp: 'gap', token: '--spacing-4', value: '16px' },
+    { label: '最小高度', cssProp: 'min-height', value: '560px' },
+  ],
+  顶部栏: [
+    { label: '高度', cssProp: 'min-height', value: '24px' },
+    { label: '栅格对齐', cssProp: 'grid-template-columns', value: 'minmax(0,1fr) auto minmax(0,1fr)' },
+    { label: '数据栏对齐', cssProp: 'justify-self', value: 'center（默认随页面宽度动态居中）' },
+    { label: '左侧内边距', cssProp: 'padding-left', token: '--spacing-3', value: '12px' },
+    { label: '在线状态组件', cssProp: 'component', value: 'Button / as=button / variant=text-black / size=md' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+    { label: '在线点尺寸', cssProp: 'width/height', value: '10px' },
+    { label: '在线点颜色', cssProp: 'background', token: '--color-green-500', value: '#3EB346' },
+  ],
+  指标工具区: [
+    { label: '背景', cssProp: 'background', value: 'rgba(255,255,255,0.6)' },
+    { label: '描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（Figma 6px，落到现有 md 档）' },
+    { label: '横向内边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+    { label: '纵向内边距', cssProp: 'padding-block', token: '--spacing-1', value: '4px' },
+    { label: '指标图标尺寸', cssProp: 'icon-size', value: '14px' },
+    { label: '工具图标尺寸', cssProp: 'icon-size', value: '16px' },
+    { label: '分隔线高度', cssProp: 'height', value: '12px' },
+    { label: '指标文字字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '指标文字字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+  ],
+  模式切换: [
+    { label: '切换组件', cssProp: 'component', value: 'Tabs / variant=segment / size=sm' },
+    { label: '外层背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)' },
+    { label: '外层内边距', cssProp: 'padding', token: '--spacing-1', value: '4px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（Figma 6px，落到现有 md 档）' },
+    { label: '选中背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '选中文字', cssProp: 'color', token: '--color-foreground', value: '#182230' },
+    { label: '未选中文字', cssProp: 'color', token: '--color-foreground-muted', value: '#667085' },
+    { label: '选项尺寸', cssProp: 'height / padding-inline', value: '28px / 12px（SM）' },
+    { label: '文字规格', cssProp: 'font', value: '12px / 16px / semibold' },
+  ],
+  工作区: [
+    { label: '工作区外层', cssProp: 'position / background', value: 'relative / transparent（只负责横向布局、覆盖层级与拖拽，不承担可见圆角）' },
+    { label: '左侧板块背景', cssProp: 'background', value: 'rgba(255,255,255,0.5)' },
+    { label: '左侧板块描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },
+    { label: '左侧板块圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px（自身四角；右侧两角被主面板覆盖，最终只露出左上 / 左下）' },
+    { label: '左侧默认宽度', cssProp: 'width', value: '432px（可拖拽调整；可视 ConversationList 区域 400px + 主面板覆盖区 32px）' },
+    { label: '左侧框架兜底最小宽度', cssProp: 'min-width', value: '100px（无明确业务组件最小宽度时使用）' },
+    { label: '左侧内容最小宽度', cssProp: 'leftContentMinWidth', value: '动态来自左侧业务组件；ConversationList 默认列表纯头像锁定宽度为 88px，卡片列表最小宽度为 333px' },
+    { label: '左侧实际拖拽最小宽度', cssProp: 'resolvedMinSideWidth', value: 'max(100px 框架兜底, 左侧内容最小宽度 + 32px 覆盖安全区)；ConversationList 默认列表为 120px，卡片列表为 365px' },
+    { label: '左侧最大宽度', cssProp: 'max-width', value: '动态计算：min(显式 maxSideWidth, 工作区宽度 + 32px 覆盖量 - 380px 主白卡最小宽度)' },
+    { label: '左侧内容安全区', cssProp: 'right', value: '32px（扣除主面板覆盖区，避免左侧内容被右侧主白卡裁切）' },
+    { label: '主面板覆盖量', cssProp: 'margin-left', value: '-32px（必须大于 16px 圆角半径；右侧主面板覆盖左侧板块右边界，避免圆角切角处露出左板块描边形成残缺）' },
+    { label: '拖拽热区宽度', cssProp: 'width', value: '8px' },
+    { label: '拖拽热区位置', cssProp: 'left', value: 'leftPanelWidth - 32px（覆盖在主面板左边缘上，不占布局宽度）' },
+    { label: '主面板背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '主面板描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF' },
+    { label: '主面板最小宽度', cssProp: 'min-width', value: '380px（拖拽时右侧纯白容器不可小于该宽度）' },
+    { label: '主面板可见圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px（四角）' },
+    { label: '主面板投影', cssProp: 'box-shadow', value: '0 0 16px 0 rgba(101,115,137,0.06)' },
+  ],
+};