@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/InfoDisplayPanelPreview.jsx

@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from 'react';
+import InfoDisplayPanel from './InfoDisplayPanel';
+
+const MIN_PREVIEW_WIDTH = 200;
+const CANVAS = 'relative flex h-full min-h-0 w-full items-stretch justify-end overflow-visible';
+const FRAME = 'relative flex h-full min-h-0 max-w-full items-stretch justify-end overflow-visible';
+const RESIZE_HANDLE = [
+  'group/info-panel-preview-resize absolute inset-y-0 left-0 z-30 flex w-4 -translate-x-full cursor-col-resize items-stretch justify-end 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-panel-preview-resize:bg-brand-400 group-focus-visible/info-panel-preview-resize:bg-brand-500 group-active/info-panel-preview-resize:bg-brand-500',
+].join(' ');
+
+const SINGLE_TAB_PANELS = [
+  {
+    id: 'profile',
+    tabs: [{ id: 'profile', label: '用户信息' }],
+  },
+];
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export default function InfoDisplayPanelPreview({ contentCount = 'multi' }) {
+  const rootRef = useRef(null);
+  const [availableWidth, setAvailableWidth] = useState(0);
+  const [frameWidth, setFrameWidth] = useState(null);
+  const isSingleTab = contentCount === 'single';
+
+  useEffect(() => {
+    const node = rootRef.current;
+    if (!node) return undefined;
+
+    function updateWidth() {
+      setAvailableWidth(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(() => {
+    if (!Number.isFinite(availableWidth) || availableWidth <= 0) return;
+    setFrameWidth(availableWidth);
+  }, [availableWidth]);
+
+  const maxWidth = Number.isFinite(availableWidth) && availableWidth > 0
+    ? availableWidth
+    : MIN_PREVIEW_WIDTH;
+  const currentWidth = clamp(frameWidth ?? maxWidth, MIN_PREVIEW_WIDTH, maxWidth);
+
+  function updateFrameWidth(nextWidth) {
+    setFrameWidth(clamp(nextWidth, MIN_PREVIEW_WIDTH, maxWidth));
+  }
+
+  function handleResizePointerDown(event) {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = currentWidth;
+    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;
+      updateFrameWidth(startWidth - delta);
+    }
+
+    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 (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'Home' && event.key !== 'End') return;
+    event.preventDefault();
+
+    if (event.key === 'Home') {
+      updateFrameWidth(maxWidth);
+      return;
+    }
+
+    if (event.key === 'End') {
+      updateFrameWidth(MIN_PREVIEW_WIDTH);
+      return;
+    }
+
+    const delta = event.shiftKey ? 32 : 16;
+    updateFrameWidth(currentWidth + (event.key === 'ArrowLeft' ? delta : -delta));
+  }
+
+  return (
+    <div ref={rootRef} className={CANVAS}>
+      <div className={FRAME} style={{ width: `${currentWidth}px` }}>
+        <button
+          type="button"
+          className={RESIZE_HANDLE}
+          aria-label="调整信息展示面板整体宽度"
+          aria-orientation="vertical"
+          aria-valuemin={MIN_PREVIEW_WIDTH}
+          aria-valuemax={Math.round(maxWidth)}
+          aria-valuenow={Math.round(currentWidth)}
+          onPointerDown={handleResizePointerDown}
+          onKeyDown={handleResizeKeyDown}
+        >
+          <span className={RESIZE_HANDLE_LINE} aria-hidden="true" />
+        </button>
+        <InfoDisplayPanel
+          className="!h-full w-full"
+          panels={isSingleTab ? SINGLE_TAB_PANELS : undefined}
+        />
+      </div>
+    </div>
+  );
+}

package/src/_b_end_runtime/components/Input.jsx

@@ -0,0 +1,258 @@
+/**
+ * Input — 单行文本输入（用户自造字符串）
+ *
+ * **何时用**：名称、搜索词、备注等不可穷举或需键盘录入的值。
+ * **不用**：合法值仅来自固定列表 → `Select` 或 `Radio`；纯数字与步进 → `InputNumber`。
+ *
+ * @prop {'default'|'error'} [status='default'] — 状态
+ * @prop {boolean} [disabled=false] — 是否禁用
+ * @prop {import('react').ReactNode} [prefix=null] — 前缀
+ * @prop {import('react').ReactNode} [suffix=null] — 后缀
+ * @prop {boolean} [allowClear=false] — 可清除
+ * @prop {string} [aiSuggestion] — 输入框下方单条 AI 推荐文案
+ * @prop {string[]} [aiSuggestions] — 输入框下方多条 AI 推荐文案
+ * @prop {string} [placeholder='请输入'] — 占位
+ * @prop {string} value — 当前值（受控）
+ * @prop {string} [defaultValue] — 非受控初值
+ * @prop {(e: import('react').ChangeEvent<HTMLInputElement>) => void} [onChange] — 变更回调
+ * @prop {() => void} [onClear] — 清除回调
+ * @prop {(suggestion: string) => void} [onAdoptSuggestion] — 采纳 AI 推荐回调
+ * @prop {() => void} [onRefreshAiSuggestions] — 刷新 AI 推荐回调
+ * @prop {string} [className=''] — 类名
+ */
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import AiSuggestionPanel, { AiRefreshButton, buildSuggestionGroupsFromFlatList } from './AiSuggestionShared';
+
+/* ── 根容器基础样式 ── */
+const WRAPPER_BASE = [
+  'inline-flex flex-col items-start w-[var(--size-input-width,100%)] max-w-full gap-1',
+  '[font-family:inherit]',
+].join(' ');
+
+/* ── 输入框基础样式 ── */
+const FIELD_BASE = [
+  'tfds-input',
+  'group relative inline-flex items-center w-full',
+  'border [border-style:solid] rounded-md',
+  'transition-all duration-150',
+  'outline-none',
+  '[font-family:inherit]',
+].join(' ');
+
+/* ── 状态 → 容器背景 / 边框（聚焦仅 1px 描边，聚焦优先级高于悬浮） ── */
+const STATUS_CLASS = {
+  default: [
+    'bg-surface border-border-default',
+    'hover:border-border-strong',
+    'focus-within:border-primary',
+    'focus-within:hover:border-primary',
+  ].join(' '),
+  error: [
+    'bg-red-50 border-border-default',
+    'hover:bg-red-100',
+    'focus-within:border-red-500',
+    'focus-within:hover:border-red-500 focus-within:hover:bg-red-50',
+  ].join(' '),
+};
+
+/* ── 固定 MD 尺寸 → 高度 / 内边距 / 字号 / 间距 ── */
+const SIZE_CLASS = 'h-[var(--size-control-md)] pl-3 pr-3 text-sm gap-2';
+
+/* ── 禁用态（覆盖 status 的颜色，保留当前边框） ── */
+const DISABLED_CLASS = 'bg-disabled border-border-default cursor-not-allowed opacity-60';
+
+/* ── 原生 input 样式（透明无边框，继承容器字号；聚焦时 placeholder 更淡） ── */
+const INPUT_BASE = [
+  'flex-1 min-w-0 bg-transparent border-none outline-none',
+  'text-foreground placeholder:text-foreground-muted',
+  'focus:placeholder:text-foreground-disabled',
+  '[font-family:inherit] [font-size:inherit] leading-[var(--leading-5)]',
+  'disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled',
+  'p-0 m-0',
+].join(' ');
+
+/* ── 前后缀插槽 ── */
+const ADDON_CLASS = 'inline-flex size-[16px] items-center justify-center shrink-0 text-foreground-muted [&>svg]:size-[16px]';
+
+/* ── 清除按钮（hover 或聚焦时出现） ── */
+const CLEAR_CLASS = [
+  'inline-flex items-center justify-center shrink-0 size-[var(--spacing-4)]',
+  'rounded-full cursor-pointer',
+  'text-foreground-disabled hover:text-foreground-secondary',
+  'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-150',
+  'bg-transparent border-none p-0',
+].join(' ');
+
+const TRAILING_CLASS = 'absolute right-3 top-1/2 inline-flex -translate-y-1/2 items-center gap-2';
+
+const INPUT_LOCAL_FALLBACK_SUGGESTION_GROUPS = [
+  ['您好，这边已经收到您的反馈，正在为您核实处理。'],
+  ['您好，问题已记录，这边会尽快同步处理进展。'],
+];
+
+function dispatchNativeInputValue(input, nextValue) {
+  if (!input) return;
+  const descriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+  descriptor?.set?.call(input, nextValue);
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function getInputPaddingClasses(hasSuffix, activeButtonCount) {
+  const base = hasSuffix ? 'pr-7' : '';
+  if (activeButtonCount === 0) return base;
+
+  if (activeButtonCount === 1) {
+    return `${base} group-hover:pr-8 group-focus-within:pr-8`.trim();
+  }
+  return `${base} group-hover:pr-14 group-focus-within:pr-14`.trim();
+}
+
+export default function Input({
+  size: _size = 'md',
+  status = 'default',
+  disabled = false,
+  prefix,
+  suffix,
+  allowClear = false,
+  aiSuggestion,
+  aiSuggestions,
+  placeholder = '请输入',
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  onAdoptSuggestion,
+  onRefreshAiSuggestions,
+  className = '',
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue || '');
+  const [isSuggestionDismissed, setIsSuggestionDismissed] = useState(false);
+  const [suggestionIndex, setSuggestionIndex] = useState(0);
+
+  const currentValue = isControlled ? value : innerValue;
+  const showClear = allowClear && !disabled && Boolean(currentValue);
+  const suggestionGroups = useMemo(() => {
+    const source = Array.isArray(aiSuggestions) && aiSuggestions.length > 0
+      ? aiSuggestions
+      : (typeof aiSuggestion === 'string' && aiSuggestion.trim().length > 0 ? [aiSuggestion] : []);
+    return buildSuggestionGroupsFromFlatList(source, INPUT_LOCAL_FALLBACK_SUGGESTION_GROUPS);
+  }, [aiSuggestion, aiSuggestions]);
+  const activeSuggestions = suggestionGroups[suggestionIndex] || suggestionGroups[0] || [];
+  const suggestionList = useMemo(
+    () => activeSuggestions.map((item, index) => ({
+      id: `input-ai-suggestion-${suggestionIndex}-${index}`,
+      label: item,
+      value: item,
+    })),
+    [activeSuggestions, suggestionIndex]
+  );
+  const showSuggestion = !disabled && !isSuggestionDismissed && suggestionList.length > 0;
+  const canRefreshLocally = suggestionGroups.length > 1;
+  const showAiRefresh = !disabled && suggestionList.length > 0
+    && (canRefreshLocally || typeof onRefreshAiSuggestions === 'function');
+  const activeButtonCount = (showClear ? 1 : 0) + (showAiRefresh ? 1 : 0);
+
+  useEffect(() => {
+    setIsSuggestionDismissed(false);
+    setSuggestionIndex(0);
+  }, [aiSuggestion, aiSuggestions]);
+
+  const handleChange = useCallback((e) => {
+    if (!isControlled) setInnerValue(e.target.value);
+    onChange?.(e);
+  }, [isControlled, onChange]);
+
+  const handleClear = useCallback(() => {
+    if (!isControlled) {
+      setInnerValue('');
+      if (inputRef.current) inputRef.current.value = '';
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  }, [isControlled, onClear]);
+
+  const handleAdoptSuggestion = useCallback((suggestion) => {
+    if (!suggestion?.value) return;
+    dispatchNativeInputValue(inputRef.current, suggestion.value);
+    onAdoptSuggestion?.(suggestion.value);
+    setIsSuggestionDismissed(true);
+    inputRef.current?.focus();
+  }, [onAdoptSuggestion]);
+
+  const handleRefreshAiSuggestions = useCallback(() => {
+    if (canRefreshLocally) {
+      setSuggestionIndex((prev) => (prev + 1) % suggestionGroups.length);
+    }
+    onRefreshAiSuggestions?.();
+    setIsSuggestionDismissed(false);
+    inputRef.current?.focus();
+  }, [canRefreshLocally, onRefreshAiSuggestions, suggestionGroups.length]);
+
+  const wrapperCls = [
+    WRAPPER_BASE,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const fieldCls = [
+    FIELD_BASE,
+    disabled ? DISABLED_CLASS : STATUS_CLASS[status],
+    SIZE_CLASS,
+  ].filter(Boolean).join(' ');
+
+  const inputCls = [
+    INPUT_BASE,
+    getInputPaddingClasses(Boolean(suffix), activeButtonCount),
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={wrapperCls}>
+      <div className={fieldCls} data-tfds-component="Input">
+        {prefix ? <span className={ADDON_CLASS}>{prefix}</span> : null}
+        <input
+          ref={inputRef}
+          className={inputCls}
+          placeholder={placeholder}
+          disabled={disabled}
+          value={isControlled ? value : undefined}
+          defaultValue={isControlled ? undefined : defaultValue}
+          onChange={handleChange}
+          {...rest}
+        />
+        {(showClear || showAiRefresh || suffix) ? (
+          <span className={TRAILING_CLASS}>
+            {showClear ? (
+              <button
+                type="button"
+                className={CLEAR_CLASS}
+                onClick={handleClear}
+                aria-label="清除"
+                tabIndex={-1}
+              >
+                <svg viewBox="0 0 16 16" fill="none" className="size-[16px]">
+                  <circle cx="8" cy="8" r="7" fill="currentColor" fillOpacity="0.15" />
+                  <path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </button>
+            ) : null}
+            {showAiRefresh ? (
+              <AiRefreshButton onClick={handleRefreshAiSuggestions} />
+            ) : null}
+            {suffix ? <span className={ADDON_CLASS}>{suffix}</span> : null}
+          </span>
+        ) : null}
+      </div>
+      {showSuggestion ? (
+        <AiSuggestionPanel
+          suggestions={suggestionList}
+          onSelect={handleAdoptSuggestion}
+          getSuggestionKey={(suggestion) => suggestion.id}
+          getSuggestionLabel={(suggestion) => suggestion.label}
+          getSuggestionAriaLabel={(_, index) => `采纳 AI 推荐内容 ${index + 1}`}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Input — TOKEN_MAP（供平台属性面板展示）
+ */
+export const INPUT_TOKEN_MAP = {
+  base: [],
+  输入文字: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '行高', cssProp: 'line-height', value: '20px' },
+  ],
+  占位符: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '聚焦色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled', state: 'focus' },
+  ],
+  禁用文字: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+  ],
+  前后缀: [
+    { label: '颜色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '图标尺寸', cssProp: 'width / height', token: '--spacing-4', value: '16px' },
+  ],
+  AI推荐列表: [
+    { label: '上间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '列表圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '列表内边距', cssProp: 'padding', token: '--spacing-1', value: '4px' },
+    { label: '条目间距', cssProp: 'gap', token: '--spacing-0_5', value: '2px' },
+    { label: '列表背景', cssProp: 'background', 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%)' },
+    { label: '条目圆角', cssProp: 'border-radius', token: '--radius-sm', value: '6px' },
+    { label: '条目横向内边距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+    { label: '条目纵向内边距', cssProp: 'padding-block', token: '--spacing-1', value: '4px' },
+    { label: 'Hover 背景', cssProp: 'background', token: '--gradient-ai-fill-2', value: 'linear-gradient(-45deg, rgba(254, 224, 253, 1) 0%, rgba(233, 218, 255, 1) 25%, rgba(213, 225, 255, 1) 48%, rgba(213, 243, 248, 1) 83%, rgba(213, 247, 242, 1) 100%)', state: 'hover' },
+    { label: '文字颜色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+  ],
+  刷新推荐按钮: [
+    { label: '图标尺寸', cssProp: 'width / height', token: '--spacing-4', value: '16px' },
+    { label: '图标颜色', cssProp: 'background-image', token: '--gradient-ai-fill-3', value: 'linear-gradient(-45deg, rgba(255, 153, 248, 1) 0%, rgba(181, 131, 255, 1) 25%, rgba(114, 156, 255, 1) 48%, rgba(117, 218, 231, 1) 83%, rgba(115, 230, 204, 1) 100%)', semanticRef: 'ai-fill-3' },
+  ],
+  容器: [
+    { label: '默认宽度', cssProp: 'width', token: '--size-input-width', value: '300px' },
+    { label: '背景色', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '悬浮边框', cssProp: 'border-color', token: '--color-blueGrey-400', value: '#D0D5DD', state: 'hover' },
+    { label: '聚焦边框', cssProp: 'border-color', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'focus' },
+    { label: '错态背景', cssProp: 'background', token: '--color-red-50', value: '#FEF2F1', semanticRef: 'status-danger', state: 'error' },
+    { label: '错态悬浮', cssProp: 'background', token: '--color-red-100', value: '#FCD9D7', state: 'error+hover' },
+    { label: '错态聚焦', cssProp: 'border-color', token: '--color-red-500', value: '#F74331', semanticRef: 'status-danger', state: 'error+focus' },
+    { label: '禁用背景', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '透明度', cssProp: 'opacity', value: '0.6', state: 'disabled' },
+  ],
+  sizes: {
+    sm: [
+      { label: '高度', cssProp: 'height', token: '--size-control-sm', value: '24px' },
+      { label: '左内边距', cssProp: 'padding-left', token: '--spacing-2', value: '8px' },
+      { label: '右内边距', cssProp: 'padding-right', token: '--spacing-2', value: '8px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+      { label: '元素间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    ],
+    md: [
+      { label: '高度', cssProp: 'height', token: '--size-control-md', value: '36px' },
+      { label: '左内边距', cssProp: 'padding-left', token: '--spacing-3', value: '12px' },
+      { label: '右内边距', cssProp: 'padding-right', token: '--spacing-3', value: '12px' },
+      { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+      { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    ],
+  },
+};