@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,146 @@
+/**
+ * Toast — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Toast.jsx
+ *
+ * 设计对齐 HiUI Toast 条：圆角 12px（lg）、内距 12px、行内水平间距 8px（gap-x-2）、主文案 14px 半粗、
+ * 轻阴影双层（0 0 1px + 0 4px 14px）；四语义类型对应品牌/绿/橙/红浅底与同色描边。
+ */
+export const TOAST_TOKEN_MAP = {
+  容器: [
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    {
+      label: '语义描边',
+      cssProp: 'border-color',
+      value: '与 type 同色 1px',
+      state: 'bordered=true',
+    },
+    {
+      label: '语义描边',
+      cssProp: 'border-color',
+      value: 'transparent（border-transparent）',
+      state: 'bordered=false',
+    },
+    { label: '内距', cssProp: 'padding', token: '--spacing-3', value: '12px' },
+    { label: '最小高度', cssProp: 'min-height', value: '44px' },
+    { label: '行内水平间距', cssProp: 'column-gap', token: '--spacing-2', value: '8px' },
+    {
+      label: '宽度',
+      cssProp: 'width',
+      value: 'fit-content，随内容撑开',
+    },
+    {
+      label: '最大宽度',
+      cssProp: 'max-width',
+      value: 'min(100%, 560px)，防超长与窄屏溢出',
+    },
+    { label: '阴影', cssProp: 'box-shadow', value: '0 0 1px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.1)' },
+    {
+      label: '信息底',
+      cssProp: 'background',
+      token: '--color-brand-50',
+      value: '#EAFAF6',
+      state: 'type=info',
+    },
+    {
+      label: '信息边',
+      cssProp: 'border-color',
+      token: '--color-teal-600',
+      value: '#129683',
+      state: 'type=info',
+    },
+    {
+      label: '成功底',
+      cssProp: 'background',
+      token: '--color-green-50',
+      value: '#F0FDF4',
+      state: 'type=success',
+    },
+    {
+      label: '成功边',
+      cssProp: 'border-color',
+      token: '--color-green-500',
+      value: '#3EB346',
+      state: 'type=success',
+    },
+    {
+      label: '警示底',
+      cssProp: 'background',
+      token: '--color-orange-50',
+      value: '#FFF5EE',
+      state: 'type=warning',
+    },
+    {
+      label: '警示边',
+      cssProp: 'border-color',
+      token: '--color-orange-500',
+      value: '#FA8B14',
+      state: 'type=warning',
+    },
+    {
+      label: '错误底',
+      cssProp: 'background',
+      token: '--color-red-50',
+      value: '#FEF2F1',
+      state: 'type=error',
+    },
+    {
+      label: '错误边',
+      cssProp: 'border-color',
+      token: '--color-red-500',
+      value: '#F74331',
+      state: 'type=error',
+    },
+  ],
+  主文案: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '字重', cssProp: 'font-weight', value: '600' },
+  ],
+  状态图标: [
+    { label: '左侧外边距', cssProp: 'margin-left', token: '--spacing-1', value: '4px' },
+    { label: '尺寸', cssProp: 'width', token: '--spacing-5', value: '20px' },
+    {
+      label: '信息色',
+      cssProp: 'color',
+      token: '--color-teal-600',
+      value: '#129683',
+      state: 'type=info',
+    },
+    {
+      label: '成功色',
+      cssProp: 'color',
+      token: '--color-green-500',
+      value: '#3EB346',
+      state: 'type=success',
+    },
+    {
+      label: '警示色',
+      cssProp: 'color',
+      token: '--color-orange-500',
+      value: '#FA8B14',
+      state: 'type=warning',
+    },
+    {
+      label: '错误色',
+      cssProp: 'color',
+      token: '--color-red-500',
+      value: '#F74331',
+      state: 'type=error',
+    },
+  ],
+  文字操作: [
+    { label: '组件', cssProp: '—', value: 'Button variant=text-brand size=sm + !text-sm' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '与主文案间距', cssProp: 'column-gap', token: '--spacing-2', value: '8px' },
+    { label: '操作项间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '默认字色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D' },
+    { label: '悬浮字色', cssProp: 'color', token: '--color-brand-800', value: '#129683', state: 'hover' },
+    { label: '按下字色', cssProp: 'color', token: '--color-brand-900', value: '#0D786A', state: 'active' },
+  ],
+  引用组件: [
+    { label: '关闭按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly（无色底、前景色图标 lucide X）' },
+    { label: '文字操作', cssProp: '—', value: 'Button text-brand sm（1～2 项）' },
+    { label: '状态图标', cssProp: '—', value: 'Icon md（info-circle / check-circle / alert-triangle / alert-circle）' },
+  ],
+};

package/src/_b_end_runtime/components/Tooltip.jsx

@@ -0,0 +1,282 @@
+/**
+ * Tooltip — 文字提示气泡（Tailwind 内联）
+ *
+ * 默认深色变体（grey-800 背景 + 白字）；hover/focus 触发；
+ * tone="light" 仅供 TagInput +N 展示更多标签等特定内容型场景使用。
+ * 通过 createPortal 渲染到 document.body 以避开父容器 overflow 裁切，
+ * 定位为 fixed 并随滚动/resize 同步。
+ *
+ * 默认开启 autoFlip：当用户指定方向上空间不足时，自动翻转到对侧主轴
+ * （top↔bottom、left↔right），副轴对齐（start/center/end）保持。
+ *
+ * 文本容器固定规格：圆角 8px、内距上下 8px / 左右 12px、字号 14px、行高 20px。
+ *
+ * Props:
+ *   content        — 气泡内容（string 或 ReactNode）
+ *   tone           — 'dark' | 'light'，默认 'dark'
+ *   placement      — 12 选其一：top/top-start/top-end/bottom/bottom-start/bottom-end/
+ *                    left/left-start/left-end/right/right-start/right-end，默认 'top'
+ *   arrow          — 是否显示箭头，默认 true
+ *   autoFlip       — 视口边缘是否自动翻转方向，默认 true
+ *   defaultOpen    — 是否默认常驻显示（用于预览/调试），默认 false
+ *   mouseEnterDelay— 进入延迟（ms），默认 100
+ *   mouseLeaveDelay— 离开延迟（ms），默认 100
+ *   className      — 附加到气泡的类名
+ *   triggerClassName — 触发器包裹层类名，默认 'inline-flex'
+ *   children       — 触发器（任意 React 子节点，会被包裹到触发器容器中）
+ */
+
+import { useState, useRef, useLayoutEffect, useEffect, useId, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+/* ── 常量配置 ── */
+const GAP = 8;            // 触发器与气泡的间距
+const ARROW_W = 12;       // 箭头底边长
+const ARROW_H = 6;        // 箭头高度（凸出气泡外的距离）
+const SAFE_MARGIN = 4;    // 视口边缘安全距离
+const ARROW_EDGE_MIN = 14; // 箭头中心距气泡边的最小距离（避开圆角）
+
+/* ── 气泡基础样式（含固定内距/字号） ── */
+const BUBBLE = [
+  'pointer-events-none',
+  'rounded-md',
+  'whitespace-pre-line break-words',
+  'max-w-[280px]',
+  'font-normal',
+  'px-3 py-2 text-sm leading-5',
+].join(' ');
+
+const TONE_CLASS = {
+  dark: 'bg-grey-800 text-white shadow-md',
+  light: 'border border-border bg-white text-foreground shadow-md',
+};
+
+const ARROW_FILL_CLASS = {
+  dark: 'fill-grey-800',
+  light: 'fill-white',
+};
+
+/* ── 主轴翻转映射 ── */
+const FLIP_MAIN = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+
+/* ── 拆解 placement → [main, side] ── */
+function parsePlacement(p) {
+  const [main, side] = p.split('-');
+  return [main, side]; // side 可能是 undefined（即 center）
+}
+
+/* ── 计算气泡 left/top（视口坐标系） ── */
+function computePosition(trigger, tw, th, placement) {
+  const [main, side] = parsePlacement(placement);
+  let top = 0;
+  let left = 0;
+
+  if (main === 'top') top = trigger.top - th - GAP;
+  else if (main === 'bottom') top = trigger.bottom + GAP;
+  else if (main === 'left') left = trigger.left - tw - GAP;
+  else if (main === 'right') left = trigger.right + GAP;
+
+  if (main === 'top' || main === 'bottom') {
+    if (side === 'start') left = trigger.left;
+    else if (side === 'end') left = trigger.right - tw;
+    else left = trigger.left + (trigger.width - tw) / 2;
+  } else {
+    if (side === 'start') top = trigger.top;
+    else if (side === 'end') top = trigger.bottom - th;
+    else top = trigger.top + (trigger.height - th) / 2;
+  }
+
+  return { top, left };
+}
+
+/* ── 视口边缘检测，空间不足则翻转主轴 ── */
+function flipPlacement(placement, trigger, tw, th, vw, vh) {
+  const [main, side] = parsePlacement(placement);
+  let fits = true;
+
+  if (main === 'top') fits = trigger.top - th - GAP >= SAFE_MARGIN;
+  else if (main === 'bottom') fits = trigger.bottom + th + GAP <= vh - SAFE_MARGIN;
+  else if (main === 'left') fits = trigger.left - tw - GAP >= SAFE_MARGIN;
+  else if (main === 'right') fits = trigger.right + tw + GAP <= vw - SAFE_MARGIN;
+
+  if (fits) return placement;
+  return side ? `${FLIP_MAIN[main]}-${side}` : FLIP_MAIN[main];
+}
+
+/* ── 计算箭头在气泡边上的偏移（从气泡左/上算起） ── */
+function computeArrowOffset(actualPlacement, trigger, pos, tw, th) {
+  const [main] = parsePlacement(actualPlacement);
+  if (main === 'top' || main === 'bottom') {
+    const triggerCenterX = trigger.left + trigger.width / 2;
+    const raw = triggerCenterX - pos.left;
+    return Math.max(ARROW_EDGE_MIN, Math.min(tw - ARROW_EDGE_MIN, raw));
+  }
+  const triggerCenterY = trigger.top + trigger.height / 2;
+  const raw = triggerCenterY - pos.top;
+  return Math.max(ARROW_EDGE_MIN, Math.min(th - ARROW_EDGE_MIN, raw));
+}
+
+/* ── 箭头 SVG（按主轴方向画对应朝向的三角） ── */
+function ArrowSvg({ main, tone = 'dark' }) {
+  const fillClass = ARROW_FILL_CLASS[tone] || ARROW_FILL_CLASS.dark;
+  // 横向：底边 ARROW_W、高 ARROW_H
+  if (main === 'top') {
+    // tooltip 在触发器上方 → 箭头朝下
+    return (
+      <svg width={ARROW_W} height={ARROW_H} viewBox={`0 0 ${ARROW_W} ${ARROW_H}`} className={['block', fillClass].join(' ')} aria-hidden>
+        <path d={`M0 0 L${ARROW_W} 0 L${ARROW_W / 2} ${ARROW_H} Z`} />
+      </svg>
+    );
+  }
+  if (main === 'bottom') {
+    return (
+      <svg width={ARROW_W} height={ARROW_H} viewBox={`0 0 ${ARROW_W} ${ARROW_H}`} className={['block', fillClass].join(' ')} aria-hidden>
+        <path d={`M0 ${ARROW_H} L${ARROW_W} ${ARROW_H} L${ARROW_W / 2} 0 Z`} />
+      </svg>
+    );
+  }
+  // 纵向：宽 ARROW_H、高 ARROW_W
+  if (main === 'left') {
+    return (
+      <svg width={ARROW_H} height={ARROW_W} viewBox={`0 0 ${ARROW_H} ${ARROW_W}`} className={['block', fillClass].join(' ')} aria-hidden>
+        <path d={`M0 0 L0 ${ARROW_W} L${ARROW_H} ${ARROW_W / 2} Z`} />
+      </svg>
+    );
+  }
+  return (
+    <svg width={ARROW_H} height={ARROW_W} viewBox={`0 0 ${ARROW_H} ${ARROW_W}`} className={['block', fillClass].join(' ')} aria-hidden>
+      <path d={`M${ARROW_H} 0 L${ARROW_H} ${ARROW_W} L0 ${ARROW_W / 2} Z`} />
+    </svg>
+  );
+}
+
+export default function Tooltip({
+  content,
+  tone = 'dark',
+  placement = 'top',
+  arrow = true,
+  autoFlip = true,
+  defaultOpen = false,
+  mouseEnterDelay = 100,
+  mouseLeaveDelay = 100,
+  className = '',
+  triggerClassName = 'inline-flex',
+  children,
+}) {
+  const triggerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const enterTimer = useRef(null);
+  const leaveTimer = useRef(null);
+
+  const [open, setOpen] = useState(defaultOpen);
+  const [pos, setPos] = useState({ top: 0, left: 0, actualPlacement: placement, arrowOffset: 0 });
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !bubbleRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const bubble = bubbleRef.current.getBoundingClientRect();
+    const tw = bubble.width;
+    const th = bubble.height;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const actualPlacement = autoFlip
+      ? flipPlacement(placement, trigger, tw, th, vw, vh)
+      : placement;
+    const p = computePosition(trigger, tw, th, actualPlacement);
+    const arrowOffset = computeArrowOffset(actualPlacement, trigger, p, tw, th);
+    setPos({ top: p.top, left: p.left, actualPlacement, arrowOffset });
+  }, [placement, autoFlip]);
+
+  useLayoutEffect(() => {
+    if (open) updatePosition();
+  }, [open, content, updatePosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onScroll = () => updatePosition();
+    const onResize = () => updatePosition();
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onResize);
+    };
+  }, [open, updatePosition]);
+
+  const clearTimers = () => {
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    enterTimer.current = null;
+    leaveTimer.current = null;
+  };
+
+  const handleEnter = () => {
+    clearTimers();
+    enterTimer.current = setTimeout(() => setOpen(true), mouseEnterDelay);
+  };
+
+  const handleLeave = () => {
+    clearTimers();
+    leaveTimer.current = setTimeout(() => setOpen(false), mouseLeaveDelay);
+  };
+
+  useEffect(() => () => clearTimers(), []);
+
+  const tooltipId = useId();
+  const [main] = parsePlacement(pos.actualPlacement);
+  const resolvedTone = TONE_CLASS[tone] ? tone : 'dark';
+
+  /* ── 箭头容器定位（相对气泡 absolute） ── */
+  let arrowStyle = {};
+  if (main === 'top') {
+    arrowStyle = { position: 'absolute', bottom: -ARROW_H, left: pos.arrowOffset - ARROW_W / 2 };
+  } else if (main === 'bottom') {
+    arrowStyle = { position: 'absolute', top: -ARROW_H, left: pos.arrowOffset - ARROW_W / 2 };
+  } else if (main === 'left') {
+    arrowStyle = { position: 'absolute', right: -ARROW_H, top: pos.arrowOffset - ARROW_W / 2 };
+  } else {
+    arrowStyle = { position: 'absolute', left: -ARROW_H, top: pos.arrowOffset - ARROW_W / 2 };
+  }
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className={triggerClassName}
+        onMouseEnter={handleEnter}
+        onMouseLeave={handleLeave}
+        onFocus={handleEnter}
+        onBlur={handleLeave}
+        aria-describedby={open ? tooltipId : undefined}
+      >
+        {children}
+      </span>
+      {open && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={bubbleRef}
+              id={tooltipId}
+              role="tooltip"
+              className={[`tfds-tooltip`, [BUBBLE, TONE_CLASS[resolvedTone], className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
+              data-tfds-component="Tooltip"
+              style={{
+                position: 'fixed',
+                top: pos.top,
+                left: pos.left,
+                zIndex: 9999,
+              }}
+            >
+              {content}
+              {arrow ? (
+                <span style={arrowStyle} aria-hidden>
+                  <ArrowSvg main={main} tone={resolvedTone} />
+                </span>
+              ) : null}
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+/**
+ * Tooltip — TOKEN_MAP（供平台属性面板展示）
+ * 组件实现代码见 Tooltip.jsx
+ *
+ * 设计说明：
+ * - 默认深色变体：背景 grey-800（#2E2F38，中性深灰）
+ * - light 变体仅供 TagInput +N 展示更多标签等特定内容型场景使用
+ * - 文字白色，圆角 md=8px，阴影 shadow-md
+ * - 文本容器固定规格：内距上下 8px / 左右 12px，字号 14px、行高 20px
+ * - 12 方位 placement，开启 autoFlip 时空间不足自动翻转主轴
+ * - 触发器与气泡间距统一 8px，箭头底边 12px、高度 6px
+ *
+ * 平台属性面板按 key 顺序渲染：气泡 → 箭头 → 触发交互 → 定位行为。
+ */
+export const TOOLTIP_TOKEN_MAP = {
+  气泡: [
+    { label: '背景色', cssProp: 'background', token: '--color-grey-800', value: '#2E2F38' },
+    { label: '文字颜色', cssProp: 'color', token: '--color-white', value: '#FFFFFF' },
+    { label: '白底场景', cssProp: 'tone', value: 'light 仅用于 TagInput +N 更多标签' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '横向内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-2', value: '8px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '阴影', cssProp: 'box-shadow', token: '--shadow-md', value: '0 4px 6px -1px rgba(0,0,0,0.1)' },
+    { label: '最大宽度', cssProp: 'max-width', value: '280px' },
+  ],
+  箭头: [
+    { label: '颜色', cssProp: 'fill', token: '--color-grey-800', value: '#2E2F38' },
+    { label: '底边宽', cssProp: 'width', value: '12px' },
+    { label: '高度', cssProp: 'height', value: '6px' },
+    { label: '距气泡边最小偏移', cssProp: 'edge-min', value: '14px' },
+  ],
+  触发交互: [
+    { label: '触发方式', cssProp: 'trigger', value: 'hover / focus' },
+    { label: '触发器与气泡间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '进入延迟', cssProp: 'enter-delay', value: '100ms' },
+    { label: '离开延迟', cssProp: 'leave-delay', value: '100ms' },
+  ],
+  定位行为: [
+    { label: '渲染目标', cssProp: 'portal', value: 'document.body' },
+    { label: '定位方式', cssProp: 'position', value: 'fixed' },
+    { label: '层级', cssProp: 'z-index', value: '9999' },
+    { label: '边缘安全距离', cssProp: 'safe-margin', value: '4px' },
+    { label: '空间不足', cssProp: 'auto-flip', value: '主轴翻转（top↔bottom，left↔right）' },
+  ],
+};

package/src/_b_end_runtime/components/TooltipPreview.jsx

@@ -0,0 +1,50 @@
+/**
+ * TooltipPreview — Tooltip 在平台预览页中的演示包装
+ *
+ * Tooltip 必须 hover/focus 才会出现，预览页直接渲染会"看不到东西"。
+ * 这里固定一个中央触发器（虚线方框 + 文字），让 Tooltip 默认 open，
+ * 切换 placement 时即可稳定看到 12 个方位的视觉效果。
+ *
+ * 模式（preview-only，不进入 Tooltip 组件本身的 props）：
+ *   mode='pinned' — 默认 open，便于截图/对比
+ *   mode='hover'  — 不强制 open，鼠标移到触发器上才出现，演示真实交互
+ */
+
+import Tooltip from './Tooltip';
+
+const TRIGGER_BASE = [
+  'inline-flex items-center justify-center',
+  'h-9 px-4 rounded-md',
+  'text-sm text-foreground-secondary',
+  'bg-elevated border border-dashed border-border-default',
+  'cursor-default select-none',
+].join(' ');
+
+export default function TooltipPreview({
+  placement = 'top',
+  arrow = true,
+  autoFlip = true,
+  mode = 'pinned',
+  content = '这是一段提示文案',
+  triggerLabel = '触发元素',
+}) {
+  const isPinned = mode === 'pinned';
+
+  return (
+    <div
+      className="flex items-center justify-center w-full"
+      style={{ minHeight: '200px' }}
+    >
+      <Tooltip
+        key={`${placement}-${arrow}-${autoFlip}-${mode}`}
+        content={content}
+        placement={placement}
+        arrow={arrow}
+        autoFlip={autoFlip}
+        defaultOpen={isPinned}
+      >
+        <span className={TRIGGER_BASE}>{triggerLabel}</span>
+      </Tooltip>
+    </div>
+  );
+}