@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/InfoDisplayPanel.jsx

@@ -0,0 +1,620 @@
+/**
+ * InfoDisplayPanel — 信息展示面板框架
+ *
+ * 用于客服工作台 / 在线 Agent / 工单详情右侧信息区，将多个可切换的信息面板
+ * 组织为“主栏 + 拆分栏”结构。组件只负责框架、拆分/合并和 Tabs，不规定 tabs 内容。
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Button from './Button';
+import FormTitle from './FormTitle';
+import Icon from './Icon';
+import Tabs from './Tabs';
+import Tooltip from './Tooltip';
+
+const DEFAULT_PANELS = [
+  {
+    id: 'assistant',
+    tabs: [
+      { id: 'assistant', label: '托管助手' },
+    ],
+  },
+  {
+    id: 'tickets',
+    tabs: [
+      { id: 'history', label: '历史工单' },
+      { id: 'logs', label: '工单日志' },
+      { id: 'tools', label: '信息工具' },
+    ],
+  },
+  {
+    id: 'info',
+    tabs: [
+      { id: 'video', label: '视频信息' },
+      { id: 'user', label: '用户命中实验' },
+      { id: 'records', label: '沟通记录' },
+    ],
+  },
+];
+
+const MIN_PANEL_WIDTH = 200;
+const DIVIDER_WIDTH = 1;
+const MAX_COLUMNS = 3;
+const MAIN_PANEL_ID = 'main';
+const SPLIT_ACTION_ICON = 'layout-right-stroked';
+const MERGE_ACTION_ICON = 'layout-left-stroked';
+const RESIZE_HANDLE_WIDTH = 8;
+
+const ROOT = [
+  'tfds-info-display-panel',
+  'relative flex h-[866px] min-h-[360px] w-full min-w-[200px] overflow-hidden rounded-xl border border-border-default bg-surface text-foreground',
+  '[font-family:inherit]',
+].join(' ');
+const PANEL = 'flex min-w-0 flex-col bg-surface';
+const PANEL_DIVIDER = 'border-l border-border-default';
+const HEADER = 'relative flex h-[56px] shrink-0 items-center justify-between gap-3 px-4';
+const TABS_WRAP = 'flex h-full min-w-0 flex-1 items-center overflow-hidden';
+const ACTIONS = 'flex shrink-0 items-center gap-1';
+const HEADER_LINE = 'pointer-events-none absolute inset-x-0 bottom-0 h-px bg-border-default';
+const CONTENT = 'flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4 [&>*]:min-w-0 [&>*]:w-full';
+const RESIZE_HANDLE = [
+  'group/info-resize absolute inset-y-0 z-20 flex w-2 cursor-col-resize items-stretch justify-center border-0 bg-transparent p-0',
+  'touch-none select-none',
+  'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blueGrey-400',
+].join(' ');
+const RESIZE_HANDLE_LINE = [
+  'h-full w-px rounded-full bg-transparent transition-colors duration-150',
+  'group-hover/info-resize:bg-brand-400 group-focus-visible/info-resize:bg-brand-500 group-active/info-resize:bg-brand-500',
+].join(' ');
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function normalizePanels(panels) {
+  return Array.isArray(panels) && panels.length > 0 ? panels : DEFAULT_PANELS;
+}
+
+function getMinWidthForColumns(columnCount, minPanelWidth = MIN_PANEL_WIDTH) {
+  if (columnCount <= 0) return 0;
+  return (columnCount * minPanelWidth) + ((columnCount - 1) * DIVIDER_WIDTH);
+}
+
+function getMaxColumns(width, minPanelWidth = MIN_PANEL_WIDTH) {
+  if (!Number.isFinite(width) || width <= 0) return 1;
+  if (width >= getMinWidthForColumns(3, minPanelWidth)) return 3;
+  if (width >= getMinWidthForColumns(2, minPanelWidth)) return 2;
+  return 1;
+}
+
+function normalizeTabs(panel) {
+  const tabs = Array.isArray(panel.tabs) && panel.tabs.length > 0
+    ? panel.tabs
+    : [{ id: panel.id, label: panel.title || '信息' }];
+
+  return tabs.map((tab, index) => ({
+    ...tab,
+    id: typeof tab.id === 'string' && tab.id ? tab.id : `${panel.id}-${index}`,
+    sourcePanelId: panel.id,
+    sourcePanel: panel,
+  }));
+}
+
+function buildTabDescriptors(panels) {
+  return panels.flatMap((panel) => normalizeTabs(panel));
+}
+
+function buildEvenWidths(count, totalWidth, minWidth) {
+  if (count <= 0) return [];
+  if (!Number.isFinite(totalWidth) || totalWidth <= 0) {
+    return Array.from({ length: count }, () => minWidth);
+  }
+  const evenWidth = totalWidth / count;
+  return normalizeColumnWidths(
+    Array.from({ length: count }, () => evenWidth),
+    totalWidth,
+    minWidth,
+  );
+}
+
+function normalizeColumnWidths(rawWidths, totalWidth, minWidth) {
+  const count = Array.isArray(rawWidths) ? rawWidths.length : 0;
+  if (count === 0) return [];
+  if (!Number.isFinite(totalWidth) || totalWidth <= 0) {
+    return Array.from({ length: count }, () => minWidth);
+  }
+
+  const minTotalWidth = count * minWidth;
+  if (totalWidth <= minTotalWidth) {
+    return Array.from({ length: count }, (_, index) => (
+      index === count - 1
+        ? Math.max(minWidth, totalWidth - minWidth * (count - 1))
+        : minWidth
+    ));
+  }
+
+  let widths = rawWidths.map((width) => (
+    Number.isFinite(width) && width > 0 ? width : minWidth
+  ));
+
+  while (widths.length < count) widths.push(minWidth);
+  widths = widths.slice(0, count).map((width) => Math.max(minWidth, width));
+
+  let total = widths.reduce((sum, width) => sum + width, 0);
+  if (total < totalWidth) {
+    const extra = (totalWidth - total) / count;
+    widths = widths.map((width) => width + extra);
+    total = widths.reduce((sum, width) => sum + width, 0);
+  }
+
+  if (total > totalWidth) {
+    let overflow = total - totalWidth;
+    while (overflow > 0.5) {
+      const flexibleIndexes = widths
+        .map((width, index) => ({ width, index }))
+        .filter((item) => item.width > minWidth + 0.5);
+      if (flexibleIndexes.length === 0) break;
+      const share = overflow / flexibleIndexes.length;
+      flexibleIndexes.forEach(({ index }) => {
+        const reducible = widths[index] - minWidth;
+        const delta = Math.min(share, reducible, overflow);
+        widths[index] -= delta;
+        overflow -= delta;
+      });
+    }
+  }
+
+  const normalizedTotal = widths.reduce((sum, width) => sum + width, 0);
+  widths[count - 1] += totalWidth - normalizedTotal;
+  return widths;
+}
+
+function reconcileColumnWidths(previousWidths, count, totalWidth, minWidth) {
+  if (count <= 0) return [];
+  if (!Array.isArray(previousWidths) || previousWidths.length !== count) {
+    return buildEvenWidths(count, totalWidth, minWidth);
+  }
+  return normalizeColumnWidths(previousWidths, totalWidth, minWidth);
+}
+
+function resizeAdjacentColumns(widths, leftIndex, delta, minWidth) {
+  if (leftIndex < 0 || leftIndex >= widths.length - 1) return widths;
+  const nextWidths = [...widths];
+  const pairTotal = nextWidths[leftIndex] + nextWidths[leftIndex + 1];
+  const nextLeftWidth = clamp(nextWidths[leftIndex] + delta, minWidth, pairTotal - minWidth);
+  nextWidths[leftIndex] = nextLeftWidth;
+  nextWidths[leftIndex + 1] = pairTotal - nextLeftWidth;
+  return nextWidths;
+}
+
+function resolveInitialMainActiveTab(tabDescriptors, defaultActiveTabs) {
+  if (!Array.isArray(tabDescriptors) || tabDescriptors.length === 0) return '';
+  if (defaultActiveTabs && typeof defaultActiveTabs === 'object') {
+    const preferredIds = [
+      defaultActiveTabs[MAIN_PANEL_ID],
+      ...tabDescriptors.map((tab) => defaultActiveTabs[tab.sourcePanelId]),
+    ].filter((value) => typeof value === 'string' && value);
+
+    const matched = preferredIds.find((value) => tabDescriptors.some((tab) => tab.id === value));
+    if (matched) return matched;
+  }
+  return tabDescriptors[0]?.id ?? '';
+}
+
+function resolveControlledMainActiveTab(tabDescriptors, activeTabs, fallbackTabId) {
+  if (!Array.isArray(tabDescriptors) || tabDescriptors.length === 0) return '';
+  if (activeTabs && typeof activeTabs === 'object') {
+    const preferredIds = [
+      activeTabs[MAIN_PANEL_ID],
+      ...tabDescriptors.map((tab) => activeTabs[tab.sourcePanelId]),
+    ].filter((value) => typeof value === 'string' && value);
+
+    const matched = preferredIds.find((value) => tabDescriptors.some((tab) => tab.id === value));
+    if (matched) return matched;
+  }
+  return fallbackTabId && tabDescriptors.some((tab) => tab.id === fallbackTabId)
+    ? fallbackTabId
+    : (tabDescriptors[0]?.id ?? '');
+}
+
+function buildVisiblePanels(tabDescriptors, splitTabIds, mainActiveTabId) {
+  const tabMap = new Map(tabDescriptors.map((tab) => [tab.id, tab]));
+  const normalizedSplitTabIds = splitTabIds.filter((tabId) => tabMap.has(tabId));
+  const splitTabIdSet = new Set(normalizedSplitTabIds);
+  const mainTabs = tabDescriptors.filter((tab) => !splitTabIdSet.has(tab.id));
+  const resolvedMainActiveTabId = mainTabs.some((tab) => tab.id === mainActiveTabId)
+    ? mainActiveTabId
+    : (mainTabs[0]?.id ?? '');
+
+  const splitPanels = normalizedSplitTabIds.map((tabId, index) => {
+    const tab = tabMap.get(tabId);
+    return {
+      id: `split:${tab.id}`,
+      kind: 'split',
+      order: index,
+      tabs: [tab],
+      activeTabId: tab.id,
+      tab,
+      sourcePanel: tab.sourcePanel,
+      sourcePanelId: tab.sourcePanelId,
+    };
+  });
+
+  const activeMainTab = mainTabs.find((tab) => tab.id === resolvedMainActiveTabId) ?? mainTabs[0] ?? null;
+  const mainPanel = {
+    id: MAIN_PANEL_ID,
+    kind: 'main',
+    tabs: mainTabs,
+    activeTabId: resolvedMainActiveTabId,
+    tab: activeMainTab,
+    sourcePanel: activeMainTab?.sourcePanel ?? null,
+    sourcePanelId: activeMainTab?.sourcePanelId ?? '',
+  };
+
+  return {
+    splitPanels,
+    mainPanel,
+    visiblePanels: [...splitPanels, mainPanel],
+    normalizedSplitTabIds,
+    mainTabs,
+    resolvedMainActiveTabId,
+  };
+}
+
+function PanelHeader({
+  panel,
+  activeTabId,
+  onTabChange,
+  onSplitAction,
+  splitActionLabel,
+  splitActionTitle,
+  splitActionIcon,
+  splitActionDisabled,
+  useTitleFallback,
+}) {
+  const tabs = Array.isArray(panel.tabs) && panel.tabs.length > 0
+    ? panel.tabs
+    : [{ id: panel.id, label: panel.title || '信息' }];
+  const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.id === activeTabId));
+  const splitActionTooltip = splitActionDisabled
+    ? '空间不够，暂不支持拆分'
+    : splitActionTitle;
+
+  return (
+    <div className={HEADER} data-tfds-component="InfoDisplayPanel.Header">
+      <div className={TABS_WRAP}>
+        {useTitleFallback ? (
+          <FormTitle
+            variant="card"
+            title={panel.title || tabs[activeIndex]?.label || tabs[0]?.label || '信息'}
+            className="min-w-0"
+          />
+        ) : (
+          <Tabs
+            variant="line"
+            size="lg"
+            items={tabs.map((tab) => ({ label: tab.label, icon: tab.icon }))}
+            activeIndex={activeIndex}
+            onChange={(nextIndex) => {
+              const nextTab = tabs[nextIndex];
+              if (nextTab) onTabChange(panel.id, nextTab.id);
+            }}
+            aria-label={`${panel.title || tabs[0]?.label || '信息'} tabs`}
+            className="flex w-full max-w-full !border-b-0"
+          />
+        )}
+      </div>
+
+      {!useTitleFallback ? (
+        <div className={ACTIONS}>
+          <Tooltip content={splitActionTooltip} placement="top">
+            <span className="inline-flex">
+              <Button
+                type="button"
+                variant="ghost-black"
+                size="md"
+                icon={<Icon name={splitActionIcon} size={16} />}
+                iconOnly
+                disabled={splitActionDisabled}
+                aria-label={splitActionLabel}
+                onClick={onSplitAction}
+              />
+            </span>
+          </Tooltip>
+        </div>
+      ) : null}
+      <span className={HEADER_LINE} aria-hidden="true" />
+    </div>
+  );
+}
+
+export default function InfoDisplayPanel({
+  panels = DEFAULT_PANELS,
+  columnCount,
+  defaultColumnCount = MAX_COLUMNS,
+  onColumnCountChange,
+  minPanelWidth = MIN_PANEL_WIDTH,
+  activeTabs,
+  defaultActiveTabs,
+  onTabChange,
+  onSplitChange,
+  renderPanelContent,
+  className = '',
+  style = null,
+}) {
+  const rootRef = useRef(null);
+  const panelItems = useMemo(() => normalizePanels(panels), [panels]);
+  const tabDescriptors = useMemo(() => buildTabDescriptors(panelItems), [panelItems]);
+  const isTabsControlled = activeTabs && typeof activeTabs === 'object';
+  const [rootWidth, setRootWidth] = useState(0);
+  const [splitTabIds, setSplitTabIds] = useState([]);
+  const [columnWidths, setColumnWidths] = useState([]);
+  const [innerMainActiveTabId, setInnerMainActiveTabId] = useState(() => (
+    resolveInitialMainActiveTab(tabDescriptors, defaultActiveTabs)
+  ));
+
+  const useTitleFallback = tabDescriptors.length <= 1;
+  const maxColumnCount = getMaxColumns(rootWidth, minPanelWidth);
+  const legacyColumnLimit = clamp(
+    typeof columnCount === 'number' ? columnCount : defaultColumnCount,
+    1,
+    MAX_COLUMNS,
+  );
+  const allowedColumnCount = Math.min(maxColumnCount, legacyColumnLimit, MAX_COLUMNS, Math.max(1, tabDescriptors.length));
+  const resolvedMainActiveTabId = isTabsControlled
+    ? resolveControlledMainActiveTab(tabDescriptors, activeTabs, innerMainActiveTabId)
+    : innerMainActiveTabId;
+  const {
+    visiblePanels,
+    normalizedSplitTabIds,
+    mainTabs,
+    resolvedMainActiveTabId: sanitizedMainActiveTabId,
+  } = useMemo(
+    () => buildVisiblePanels(tabDescriptors, splitTabIds, resolvedMainActiveTabId),
+    [tabDescriptors, splitTabIds, resolvedMainActiveTabId],
+  );
+  const visibleColumnCount = visiblePanels.length;
+
+  useEffect(() => {
+    const node = rootRef.current;
+    if (!node) return undefined;
+
+    function updateWidth() {
+      setRootWidth(node.getBoundingClientRect().width);
+    }
+
+    updateWidth();
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(updateWidth) : null;
+    observer?.observe(node);
+    window.addEventListener('resize', updateWidth);
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', updateWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    const nextMainActiveTabId = resolveInitialMainActiveTab(tabDescriptors, defaultActiveTabs);
+    setInnerMainActiveTabId((current) => {
+      if (current && tabDescriptors.some((tab) => tab.id === current)) return current;
+      return nextMainActiveTabId;
+    });
+  }, [defaultActiveTabs, tabDescriptors]);
+
+  useEffect(() => {
+    setSplitTabIds((prev) => {
+      const sanitized = prev.filter((tabId) => tabDescriptors.some((tab) => tab.id === tabId));
+      if (sanitized.length === prev.length) return prev;
+      return sanitized;
+    });
+  }, [tabDescriptors]);
+
+  useEffect(() => {
+    const maxSplitCount = Math.max(0, allowedColumnCount - 1);
+    setSplitTabIds((prev) => {
+      if (prev.length <= maxSplitCount) return prev;
+      return prev.slice(0, maxSplitCount);
+    });
+  }, [allowedColumnCount]);
+
+  useEffect(() => {
+    if (isTabsControlled) return;
+    if (sanitizedMainActiveTabId && sanitizedMainActiveTabId !== innerMainActiveTabId) {
+      setInnerMainActiveTabId(sanitizedMainActiveTabId);
+    }
+  }, [innerMainActiveTabId, isTabsControlled, sanitizedMainActiveTabId]);
+
+  useEffect(() => {
+    setColumnWidths((prev) => reconcileColumnWidths(prev, visibleColumnCount, rootWidth, minPanelWidth));
+  }, [minPanelWidth, rootWidth, visibleColumnCount]);
+
+  function emitSplitChange(nextSplitTabIds) {
+    const nextState = buildVisiblePanels(tabDescriptors, nextSplitTabIds, resolvedMainActiveTabId);
+    onSplitChange?.({
+      splitTabIds: nextState.normalizedSplitTabIds,
+      visibleColumns: nextState.visiblePanels.length,
+      panels: nextState.visiblePanels,
+    });
+    onColumnCountChange?.(nextState.visiblePanels.length);
+  }
+
+  function handleTabChange(columnId, tabId) {
+    if (columnId === MAIN_PANEL_ID && !isTabsControlled) {
+      setInnerMainActiveTabId(tabId);
+    }
+    const activeDescriptor = tabDescriptors.find((tab) => tab.id === tabId);
+    onTabChange?.({
+      panelId: activeDescriptor?.sourcePanelId ?? columnId,
+      tabId,
+      columnId,
+      isSplit: columnId !== MAIN_PANEL_ID,
+    });
+  }
+
+  function handleSplitTab() {
+    if (!sanitizedMainActiveTabId) return;
+    if (normalizedSplitTabIds.length + 1 >= allowedColumnCount) return;
+    if (mainTabs.length <= 1) return;
+    const nextSplitTabIds = [...normalizedSplitTabIds, sanitizedMainActiveTabId];
+    const nextMainTabs = tabDescriptors.filter((tab) => !nextSplitTabIds.includes(tab.id));
+    const nextMainActiveTabId = nextMainTabs[0]?.id ?? '';
+    if (!isTabsControlled) setInnerMainActiveTabId(nextMainActiveTabId);
+    setSplitTabIds(nextSplitTabIds);
+    emitSplitChange(nextSplitTabIds);
+  }
+
+  function handleMergeTab(tabId) {
+    const nextSplitTabIds = normalizedSplitTabIds.filter((currentId) => currentId !== tabId);
+    setSplitTabIds(nextSplitTabIds);
+    emitSplitChange(nextSplitTabIds);
+  }
+
+  function updateColumnWidths(nextWidths) {
+    setColumnWidths(normalizeColumnWidths(nextWidths, rootWidth, minPanelWidth));
+  }
+
+  function resizeColumnsByHandle(handleIndex, delta) {
+    if (!Array.isArray(columnWidths) || columnWidths.length !== visibleColumnCount) return;
+    updateColumnWidths(resizeAdjacentColumns(columnWidths, handleIndex, delta, minPanelWidth));
+  }
+
+  function handleResizePointerDown(handleIndex, event) {
+    if (visibleColumnCount <= 1) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidths = [...columnWidths];
+    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) {
+      const delta = moveEvent.clientX - startX;
+      setColumnWidths(resizeAdjacentColumns(startWidths, handleIndex, delta, minPanelWidth));
+    }
+
+    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(handleIndex, event) {
+    if (visibleColumnCount <= 1) return;
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
+    const delta = event.shiftKey ? 32 : 16;
+    resizeColumnsByHandle(handleIndex, event.key === 'ArrowRight' ? delta : -delta);
+  }
+
+  function getMainSplitActionState() {
+    if (normalizedSplitTabIds.length + 1 >= allowedColumnCount) {
+      return {
+        disabled: true,
+        title: allowedColumnCount >= MAX_COLUMNS ? '当前最多支持拆分为 3 栏' : '当前容器宽度不足以继续拆分',
+      };
+    }
+    if (mainTabs.length <= 1) {
+      return {
+        disabled: true,
+        title: '主栏至少保留 1 个标签',
+      };
+    }
+    return {
+      disabled: false,
+      title: '将当前选中的标签拆分到主栏左侧',
+    };
+  }
+
+  const mainSplitActionState = getMainSplitActionState();
+  const resolvedColumnWidths = useMemo(
+    () => reconcileColumnWidths(columnWidths, visibleColumnCount, rootWidth, minPanelWidth),
+    [columnWidths, minPanelWidth, rootWidth, visibleColumnCount],
+  );
+  const resizeHandlePositions = useMemo(() => {
+    if (visibleColumnCount <= 1) return [];
+    const positions = [];
+    let offset = 0;
+    for (let index = 0; index < resolvedColumnWidths.length - 1; index += 1) {
+      offset += resolvedColumnWidths[index];
+      positions.push(offset);
+    }
+    return positions;
+  }, [resolvedColumnWidths, visibleColumnCount]);
+
+  return (
+    <section
+      ref={rootRef}
+      className={[ROOT, className].filter(Boolean).join(' ')}
+      style={{
+        ...style,
+        '--tfds-info-panel-min-width': `${minPanelWidth}px`,
+      }}
+      data-tfds-component="InfoDisplayPanel"
+      data-column-count={visibleColumnCount}
+      aria-label="信息展示面板"
+    >
+      {resizeHandlePositions.map((position, handleIndex) => (
+        <button
+          key={`resize-handle-${handleIndex}`}
+          type="button"
+          className={RESIZE_HANDLE}
+          style={{ left: `${position}px`, width: `${RESIZE_HANDLE_WIDTH}px`, transform: 'translateX(-50%)' }}
+          aria-label="调整相邻栏宽度"
+          aria-orientation="vertical"
+          onPointerDown={(event) => handleResizePointerDown(handleIndex, event)}
+          onKeyDown={(event) => handleResizeKeyDown(handleIndex, event)}
+        >
+          <span className={RESIZE_HANDLE_LINE} aria-hidden="true" />
+        </button>
+      ))}
+      {visiblePanels.map((panel, index) => {
+        const activeTabId = panel.activeTabId || panel.tabs?.[0]?.id || '';
+        const activeTabDescriptor = panel.tab ?? tabDescriptors.find((tab) => tab.id === activeTabId) ?? null;
+        const sourcePanel = activeTabDescriptor?.sourcePanel ?? panelItems[0] ?? null;
+
+        return (
+        <section
+          key={panel.id || index}
+          className={[PANEL, index > 0 ? PANEL_DIVIDER : ''].filter(Boolean).join(' ')}
+          style={{ width: `${resolvedColumnWidths[index] ?? 0}px`, minWidth: `${minPanelWidth}px`, flex: '0 0 auto' }}
+          data-tfds-component="InfoDisplayPanel.Panel"
+        >
+          <PanelHeader
+            panel={panel}
+            activeTabId={activeTabId}
+            onTabChange={handleTabChange}
+            onSplitAction={panel.kind === 'main' ? handleSplitTab : () => handleMergeTab(activeTabId)}
+            splitActionLabel={panel.kind === 'main' ? '拆分' : '合并'}
+            splitActionTitle={panel.kind === 'main' ? '拆分' : '合并'}
+            splitActionIcon={panel.kind === 'main' ? SPLIT_ACTION_ICON : MERGE_ACTION_ICON}
+            splitActionDisabled={panel.kind === 'main' ? mainSplitActionState.disabled : false}
+            useTitleFallback={useTitleFallback}
+          />
+          <div className={CONTENT} data-tfds-component="InfoDisplayPanel.Content">
+            {sourcePanel?.content ?? renderPanelContent?.({
+              panel: sourcePanel,
+              index,
+              activeTabId,
+              columnId: panel.id,
+              isSplit: panel.kind === 'split',
+              splitTabIds: normalizedSplitTabIds,
+            }) ?? null}
+          </div>
+        </section>
+      );
+      })}
+    </section>
+  );
+}
+
+export {
+  DEFAULT_PANELS as INFO_DISPLAY_PANEL_DEFAULT_PANELS,
+  MIN_PANEL_WIDTH as INFO_DISPLAY_PANEL_MIN_PANEL_WIDTH,
+};

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

@@ -0,0 +1,71 @@
+/**
+ * InfoDisplayPanel token map
+ * 对齐 Figma 节点「详情区 / 信息展示面板」1 / 2 / 3 栏框架。
+ */
+
+export const INFO_DISPLAY_PANEL_TOKEN_MAP = {
+  外层容器: [
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '描边', cssProp: 'border-color', token: 'border-default', value: '#E4E7EC' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-xl', value: '16px（Figma 12px，落到当前 rounded-xl 规范）' },
+    { label: '默认高度', cssProp: 'height', value: '866px' },
+    { label: '宽度策略', cssProp: 'width', value: 'w-full，默认撑满父容器可用宽度' },
+    { label: '最小宽度', cssProp: 'min-width', value: '200px' },
+    { label: '溢出', cssProp: 'overflow', value: 'hidden' },
+    { label: '组件职责', cssProp: 'role', value: '只提供框架、分栏、Tabs、动作按钮、拖拽和内容插槽；不内置业务占位内容' },
+  ],
+  分栏: [
+    { label: '布局模型', cssProp: 'layout', value: '主栏 + 拆分栏；主栏永远在最右侧，拆分栏固定追加在主栏左侧' },
+    { label: '最大栏数', cssProp: 'max-columns', value: '3 栏（1 个主栏 + 最多 2 个拆分栏）' },
+    { label: 'Tab数量上限', cssProp: 'max-columns', value: '可见栏数同时受 tab 总数限制：1 个 tab 不拆分，2 个 tab 最多 2 栏，>= 3 个 tab 才允许 3 栏' },
+    { label: '单栏最小宽度', cssProp: 'minPanelWidth', value: '200px' },
+    { label: '双栏门槛', cssProp: 'container-width', value: '>= 401px（200px * 2 + 1px 分隔线）' },
+    { label: '三栏门槛', cssProp: 'container-width', value: '>= 602px（200px * 3 + 2px 分隔线）' },
+    { label: '栏间分隔线', cssProp: 'border-left', token: 'border-default', value: '1px' },
+    { label: '空间不足策略', cssProp: 'split-limit', value: '容器宽度 < 401px 时只允许单栏；401px-601px 允许双栏；>= 602px 才允许三栏。宽度不足时主栏拆分按钮进入 Button disabled 态' },
+    { label: '拖拽边界', cssProp: 'resize-handle', value: '组件整体宽度由左外边界单独拖拽；组件内部仅栏与栏之间的分隔线支持拖拽调宽' },
+    { label: '拖拽最小宽度', cssProp: 'min-column-width', value: '每栏最小 200px' },
+    { label: '预览验证', cssProp: 'preview-resize', value: '预览态默认撑满容器，并支持从组件左侧边缘拖拽整体宽度，用于验证单栏 / 双栏 / 三栏门槛' },
+  ],
+  顶部Tabs栏: [
+    { label: '高度', cssProp: 'height', value: '56px' },
+    { label: '横向内边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+    { label: '通栏下描边', cssProp: 'border-bottom', token: 'border-default', value: '1px（由 Header 内独立横线提供，左右贴满当前栏容器）' },
+    { label: 'Tabs间距', cssProp: 'gap', value: '继承基础 Tabs line/lg 的 item padding 与 gap，不手写 tab button' },
+    { 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: 'font-weight', token: '--font-normal', value: '400' },
+    { label: 'Tabs组件', cssProp: 'component', value: 'Tabs variant="line" size="lg"' },
+    { label: '复用要求', cssProp: 'composition', value: '必须复用基础 Tabs 的交互、文字状态和选中指示线；禁止手写 tabs 结构' },
+    { label: 'Tabs来源', cssProp: 'data-source', value: 'tabs 数量、名称和顺序跟随具体生成页面的业务要求，由 panels[].tabs 动态提供' },
+    { label: '主栏Tabs内容', cssProp: 'tabs-source', value: '展示全部未拆分 tabs，顺序保持传入时的原始顺序' },
+    { label: '拆分栏Tabs内容', cssProp: 'tabs-source', value: '每个拆分栏只承载 1 个被拆出的 tab' },
+    { label: '选中指示线', cssProp: 'height/background', token: '--color-brand-500', value: '3px / Brand 500（继承基础 Tabs）' },
+    { label: '单Tab降级', cssProp: 'fallback', value: '当全局仅 1 个 tab 时，不渲染 Tabs，自动使用 FormTitle variant=card 展示标题，并隐藏拆分按钮' },
+  ],
+  右上角动作按钮: [
+    { label: '按钮数量', cssProp: 'count', value: '每栏仅 1 个动作按钮' },
+    { label: '按钮组件', cssProp: 'component', value: 'Button variant="ghost-black" size="md" iconOnly' },
+    { label: '按钮尺寸', cssProp: 'width/height', value: '36px（Button size=md 默认 iconOnly）' },
+    { label: '图标尺寸', cssProp: 'icon-size', value: '16px' },
+    { label: '主栏图标', cssProp: 'icon', value: 'layout-right-stroked' },
+    { label: '拆分栏图标', cssProp: 'icon', value: 'layout-left-stroked' },
+    { label: '主栏动作', cssProp: 'action', value: '拆分当前选中的 tab 到主栏左侧' },
+    { label: '拆分栏动作', cssProp: 'action', value: '合并当前 tab 回主栏' },
+    { label: '主栏提示文案', cssProp: 'tooltip', value: '拆分' },
+    { label: '拆分栏提示文案', cssProp: 'tooltip', value: '合并' },
+    { label: '不可用态', cssProp: 'disabled', value: '容器宽度不足以继续拆分或达到当前可见栏数上限时，主栏拆分按钮使用基础 Button disabled 态' },
+    { label: '禁用提示文案', cssProp: 'tooltip', value: '空间不够，暂不支持拆分' },
+  ],
+  内容区: [
+    { label: '内边距', cssProp: 'padding', token: '--spacing-4', value: '16px' },
+    { label: '内容间距', cssProp: 'gap', token: '--spacing-4', value: '16px' },
+    { label: '滚动策略', cssProp: 'overflow', value: '每栏内容区独立 overflow-auto，不撑高外层框架' },
+    { label: '默认内容', cssProp: 'children/content', value: '默认不渲染占位元素；仅保留空内容插槽' },
+    { label: '内容插槽', cssProp: 'children/content', value: '每个 panel 可传 content 或 renderPanelContent；组件本身不约束具体业务内容，可承载信息卡片、表单、列表、日志、图文详情等任意组件元素' },
+    { label: '子元素宽度', cssProp: 'child-width', value: '默认 min-width: 0; width: 100%，随当前 tab 栏宽度变化自适应' },
+    { label: '内容适配', cssProp: 'responsive', value: 'tab 栏变宽 / 变窄时，内容区和插槽子元素自动跟随栏宽重新适配' },
+    { label: 'AI生成约束', cssProp: 'ai-rule', value: '注入内容必须使用自适应宽度、自动换行或内部滚动；禁止固定大宽度导致拆分栏溢出' },
+  ],
+};