@tfdesign/b-end 1.0.11 → 1.0.13

package/src/_b_end_runtime/components/Filter.jsx

@@ -0,0 +1,390 @@
+/**
+ * Filter — B 端筛选胶囊项
+ *
+ * 用于筛选栏中的单个触发器/已选筛选条件；传入 options 时内置多选下拉面板。
+ *
+ * @prop {string} [label='筛选项'] — 筛选项名称
+ * @prop {string|number|null} [value=null] — 已选值，存在时显示在 label 后
+ * @prop {Array<{label:string,value:string|number,disabled?:boolean}>} [options=[]] — 多选下拉选项
+ * @prop {Array<string|number>} [selectedValues] — 受控多选值
+ * @prop {Array<string|number>} [defaultValue=[]] — 非受控初始多选值
+ * @prop {function|null} [onChange=null] — 多选变更回调
+ * @prop {boolean} [selected=false] — 品牌色选中态
+ * @prop {boolean} [filled=false] — 中性填充态，适合 hover/轻强调容器
+ * @prop {boolean} [disabled=false] — 禁用态
+ * @prop {boolean} [closable=false] — 有展示值时是否显示清除图标；已选多选值默认显示清除入口
+ * @prop {function|null} [onClear=null] — 清除回调
+ * @prop {string} [className=''] — 附加类名
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+const PANEL_GAP = 4;
+const PANEL_MAX_HEIGHT = 260;
+const PANEL_Z_INDEX = 10000;
+
+const BASE = [
+  'tfds-filter',
+  'inline-flex h-[var(--size-control-md)] shrink-0 items-center justify-center gap-[var(--spacing-2)]',
+  'rounded-[var(--radius-full)] border border-solid',
+  'px-[var(--spacing-3)]',
+  'text-[var(--text-sm)] leading-[var(--leading-5)] tracking-[var(--tracking-normal)]',
+  '[font-family:inherit]',
+  'select-none whitespace-nowrap outline-none',
+  'transition-all duration-150',
+].join(' ');
+
+const TONE_CLASS = {
+  outline: [
+    'bg-surface border-border-default text-foreground',
+    'hover:border-border-strong',
+    'active:bg-fill-active',
+    'data-[open=true]:border-primary data-[open=true]:hover:border-primary',
+  ].join(' '),
+  fill: [
+    'bg-fill border-border-default text-foreground',
+    'hover:bg-fill-hover hover:border-border-strong',
+    'active:bg-fill-active',
+    'data-[open=true]:border-primary data-[open=true]:hover:border-primary',
+  ].join(' '),
+  selected: [
+    'bg-brand-50 border-brand-300 text-brand-800',
+    'hover:bg-brand-100 hover:border-brand-400',
+    'active:bg-brand-100',
+    'data-[open=true]:border-primary data-[open=true]:hover:border-primary',
+  ].join(' '),
+  disabled: [
+    'bg-disabled border-grey-100 text-foreground-disabled',
+    'cursor-not-allowed pointer-events-none',
+  ].join(' '),
+  selectedDisabled: [
+    'bg-brand-50 border-brand-200 text-brand-300',
+    'cursor-not-allowed pointer-events-none',
+  ].join(' '),
+};
+
+const LABEL_CLASS = '[font-weight:var(--font-semibold)]';
+const VALUE_CLASS = '[font-weight:var(--font-normal)]';
+const ICON_CLASS = 'inline-flex size-[var(--spacing-3)] shrink-0 items-center justify-center [&>svg]:size-[var(--spacing-3)]';
+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',
+  'transition-opacity duration-150',
+  'bg-transparent border-none p-0 mr-1',
+].join(' ');
+const PANEL_CLASS = [
+  'rounded-[var(--radius-md)] border border-solid border-border-default',
+  'bg-surface shadow-lg',
+  '[padding-block:var(--spacing-1)] overflow-y-auto overflow-x-hidden',
+  '[font-family:inherit]',
+].join(' ');
+const OPTION_CLASS = [
+  'flex min-h-[var(--size-control-md)] cursor-pointer items-center gap-[var(--spacing-2)] px-[var(--spacing-3)] py-[var(--spacing-2)]',
+  'text-[var(--text-sm)] leading-[var(--leading-5)] text-foreground',
+  'transition-colors duration-100',
+  'hover:bg-fill',
+].join(' ');
+const OPTION_DISABLED_CLASS = 'cursor-not-allowed text-foreground-disabled opacity-50 hover:bg-transparent';
+const CHECKBOX_BOX_BASE = [
+  'flex size-[var(--spacing-4)] shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-solid',
+  'transition-colors duration-150',
+].join(' ');
+const CHECKBOX_BOX_OFF = 'border-foreground-muted bg-transparent';
+const CHECKBOX_BOX_ON = 'border-brand-500 bg-brand-500 text-white';
+
+function ChevronIcon() {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ClearIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-[var(--spacing-4)]" aria-hidden="true">
+      <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>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" className="size-[var(--spacing-3)]" aria-hidden="true">
+      <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function getValueKey(item) {
+  return String(item);
+}
+
+function normalizeOptions(options) {
+  const source = Array.isArray(options) && options.length > 0 ? options : [];
+  return source
+    .map((item) => {
+      if (typeof item === 'string' || typeof item === 'number') {
+        return { label: String(item), value: item };
+      }
+      if (!item || typeof item !== 'object') return null;
+      const value = item.value ?? item.label;
+      if (value === undefined || value === null || value === '') return null;
+      return {
+        label: item.label != null ? String(item.label) : String(value),
+        value,
+        disabled: item.disabled === true,
+      };
+    })
+    .filter(Boolean);
+}
+
+function normalizeValueList(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.filter((item) => item !== undefined && item !== null && item !== '');
+}
+
+function measurePanelPosition(triggerEl) {
+  const rect = triggerEl.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - rect.bottom - PANEL_GAP;
+  const spaceAbove = rect.top - PANEL_GAP;
+  const fitsBelow = spaceBelow >= 160 || spaceBelow >= spaceAbove;
+  const maxHeight = Math.max(120, Math.min(PANEL_MAX_HEIGHT, (fitsBelow ? spaceBelow : spaceAbove) - 4));
+  return {
+    top: fitsBelow ? rect.bottom + PANEL_GAP : rect.top - maxHeight - PANEL_GAP,
+    left: rect.left,
+    width: Math.max(rect.width, 180),
+    maxHeight,
+  };
+}
+
+export default function Filter({
+  label = '筛选项',
+  value = null,
+  options = [],
+  selectedValues,
+  defaultValue = [],
+  onChange = null,
+  selected = false,
+  filled = false,
+  disabled = false,
+  closable = false,
+  onClear = null,
+  className = '',
+  children,
+  ...rest
+}) {
+  const uid = useId();
+  const listboxId = `${uid}-filter-listbox`;
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);
+  const hasDropdown = normalizedOptions.length > 0;
+  const isControlled = selectedValues !== undefined;
+  const [innerValues, setInnerValues] = useState(() => normalizeValueList(defaultValue));
+  const [open, setOpen] = useState(false);
+  const [panelStyle, setPanelStyle] = useState({
+    top: 0,
+    left: 0,
+    width: 180,
+    maxHeight: PANEL_MAX_HEIGHT,
+  });
+  const currentValues = isControlled ? normalizeValueList(selectedValues) : innerValues;
+  const selectedKeySet = useMemo(
+    () => new Set(currentValues.map(getValueKey)),
+    [currentValues],
+  );
+  const selectedOptions = useMemo(
+    () => normalizedOptions.filter((item) => selectedKeySet.has(getValueKey(item.value))),
+    [normalizedOptions, selectedKeySet],
+  );
+  const derivedValue = useMemo(() => {
+    if (value !== null && value !== undefined && value !== '') return value;
+    if (selectedOptions.length === 1) return selectedOptions[0].label;
+    if (selectedOptions.length > 1) return `已选 ${selectedOptions.length} 项`;
+    return null;
+  }, [selectedOptions, value]);
+  const hasValue = derivedValue !== null && derivedValue !== undefined && derivedValue !== '';
+  const isSelected = selected || selectedOptions.length > 0;
+  const tone = disabled
+    ? (isSelected ? 'selectedDisabled' : 'disabled')
+    : (isSelected ? 'selected' : (filled ? 'fill' : 'outline'));
+  const showClear = (closable || selectedOptions.length > 0) && !disabled && hasValue;
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    setPanelStyle(measurePanelPosition(triggerRef.current));
+  }, []);
+
+  const commitValues = useCallback((nextValues, event) => {
+    if (!isControlled) {
+      setInnerValues(nextValues);
+    }
+    onChange?.(nextValues, event);
+  }, [isControlled, onChange]);
+
+  const toggleOption = useCallback((option, event) => {
+    if (option.disabled) return;
+    const optionKey = getValueKey(option.value);
+    const exists = selectedKeySet.has(optionKey);
+    const nextValues = exists
+      ? currentValues.filter((item) => getValueKey(item) !== optionKey)
+      : [...currentValues, option.value];
+    commitValues(nextValues, event);
+  }, [commitValues, currentValues, selectedKeySet]);
+
+  const toggleOpen = useCallback(() => {
+    if (disabled || !hasDropdown) return;
+    setOpen((prev) => {
+      const next = !prev;
+      if (next) {
+        requestAnimationFrame(updatePosition);
+      }
+      return next;
+    });
+  }, [disabled, hasDropdown, updatePosition]);
+
+  const handleClear = (event) => {
+    event.stopPropagation();
+    if (disabled) return;
+    if (hasDropdown) {
+      commitValues([], event);
+      setOpen(false);
+    }
+    onClear?.(event);
+    triggerRef.current?.focus();
+  };
+
+  const handleKeyDown = (event) => {
+    if (disabled || !hasDropdown) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      toggleOpen();
+    }
+    if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const handleScrollOrResize = () => updatePosition();
+    document.addEventListener('mousedown', handlePointerDown);
+    window.addEventListener('resize', handleScrollOrResize);
+    window.addEventListener('scroll', handleScrollOrResize, true);
+    updatePosition();
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      window.removeEventListener('resize', handleScrollOrResize);
+      window.removeEventListener('scroll', handleScrollOrResize, true);
+    };
+  }, [open, updatePosition]);
+
+  const panel = open && !disabled && hasDropdown ? (
+    <div
+      ref={panelRef}
+      id={listboxId}
+      role="listbox"
+      aria-multiselectable="true"
+      className={PANEL_CLASS}
+      style={{
+        position: 'fixed',
+        top: panelStyle.top,
+        left: panelStyle.left,
+        width: panelStyle.width,
+        maxHeight: panelStyle.maxHeight,
+        zIndex: PANEL_Z_INDEX,
+      }}
+    >
+      {normalizedOptions.map((option, index) => {
+        const checked = selectedKeySet.has(getValueKey(option.value));
+        return (
+          <div
+            key={`${getValueKey(option.value)}-${index}`}
+            role="option"
+            aria-selected={checked}
+            aria-disabled={option.disabled || undefined}
+            className={[
+              OPTION_CLASS,
+              checked ? 'bg-brand-50 text-brand-500 hover:bg-brand-50' : '',
+              option.disabled ? OPTION_DISABLED_CLASS : '',
+            ].filter(Boolean).join(' ')}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={(event) => toggleOption(option, event)}
+          >
+            <span className={[
+              CHECKBOX_BOX_BASE,
+              checked ? CHECKBOX_BOX_ON : CHECKBOX_BOX_OFF,
+              option.disabled ? 'border-border-default bg-disabled text-foreground-disabled' : '',
+            ].filter(Boolean).join(' ')}>
+              {checked ? <CheckIcon /> : null}
+            </span>
+            <span className="min-w-0 flex-1 truncate">{option.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        role={hasDropdown ? 'combobox' : 'button'}
+        tabIndex={disabled ? -1 : 0}
+        className={[
+          BASE,
+          TONE_CLASS[tone],
+          disabled ? '' : 'cursor-pointer',
+          className,
+        ].filter(Boolean).join(' ')}
+        aria-disabled={disabled || undefined}
+        data-tfds-component="Filter"
+        data-open={open || undefined}
+        data-selected={isSelected || undefined}
+        data-filled={filled || undefined}
+        aria-expanded={hasDropdown ? open : undefined}
+        aria-haspopup={hasDropdown ? 'listbox' : undefined}
+        aria-controls={hasDropdown ? listboxId : undefined}
+        onClick={toggleOpen}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        <span className={LABEL_CLASS}>{label}</span>
+        {hasValue ? <span className={VALUE_CLASS}>{derivedValue}</span> : null}
+        {children}
+        {showClear ? (
+          <button
+            type="button"
+            className={CLEAR_CLASS}
+            tabIndex={-1}
+            aria-label="清除"
+            onClick={handleClear}
+          >
+            <ClearIcon />
+          </button>
+        ) : (
+          <span className={ICON_CLASS} aria-hidden="true">
+            <ChevronIcon />
+          </span>
+        )}
+      </div>
+      {panel ? createPortal(panel, document.body) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,98 @@
+/**
+ * Filter — TOKEN_MAP（供平台属性面板展示）
+ */
+export const FILTER_TOKEN_MAP = {
+  base: [
+    { label: '高度', cssProp: 'height', token: '--size-control-md', value: '36px' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-full', value: '9999px' },
+    { label: '左侧内距', cssProp: 'padding-left', token: '--spacing-3', value: '12px（对齐 Select md）' },
+    { label: '右侧内距', cssProp: 'padding-right', token: '--spacing-3', value: '12px（对齐 Select md）' },
+    { label: '垂直内距', cssProp: 'padding-block', value: '由 --size-control-md 36px 与 --leading-5 20px 自然居中计算，不单独写裸值' },
+    { label: '内容间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '描边宽度', cssProp: 'border-width', value: '1px' },
+  ],
+  文字: [
+    { label: '标签字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+    { label: '值字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '常态文字', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '禁用文字', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled', state: 'disabled' },
+    { label: '选中文字', cssProp: 'color', token: '--color-brand-800', value: '#129683', semanticRef: 'status-primary', state: 'selected' },
+    { label: '禁用选中文字', cssProp: 'color', token: '--color-brand-300', value: '#87DEC9', state: 'selected+disabled' },
+  ],
+  容器: [
+    { 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-color', token: '--color-border-strong', value: '#D0D5DD', semanticRef: 'border-strong', state: 'hover' },
+    { label: '展开描边', cssProp: 'border-color', token: '--color-primary', value: '#56D3BC', semanticRef: 'status-primary', state: 'open' },
+    { label: '展开焦点', cssProp: 'box-shadow / ring', value: '无额外 ring，仅 1px 边框变色（对齐 Select）', state: 'open' },
+    { label: '填充背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default', state: 'filled' },
+    { label: '填充悬浮', cssProp: 'background', token: '--color-fill-hover', value: 'rgba(83, 96, 143, 0.12)', semanticRef: 'fill-hover', state: 'filled+hover' },
+    { label: '填充按下', cssProp: 'background', token: '--color-fill-active', value: 'rgba(83, 96, 143, 0.15)', semanticRef: 'fill-active', state: 'active' },
+    { label: '选中背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg', state: 'selected' },
+    { label: '选中描边', cssProp: 'border-color', token: '--color-brand-300', value: '#87DEC9', state: 'selected' },
+    { label: '选中悬浮背景', cssProp: 'background', token: '--color-brand-100', value: '#CFF3EA', state: 'selected+hover' },
+    { label: '禁用背景', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled', state: 'disabled' },
+    { label: '禁用描边', cssProp: 'border-color', token: '--color-grey-100', value: '#E6E7EA', state: 'disabled' },
+    { label: '禁用选中描边', cssProp: 'border-color', token: '--color-brand-200', value: '#A8E8D7', state: 'selected+disabled' },
+  ],
+  图标: [
+    { label: '下拉尺寸', cssProp: 'width / height', token: '--spacing-3', value: '12px' },
+    { label: '下拉颜色', cssProp: 'color', value: 'inherit（继承当前文字色）' },
+    { label: '下拉图标', cssProp: 'icon', value: 'ChevronIcon，线宽 1.4px' },
+    { label: '清除尺寸', cssProp: 'width / height', token: '--spacing-4', value: '16px（对齐 Select）' },
+    { label: '清除颜色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    { label: '清除悬浮颜色', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', semanticRef: 'text-secondary', state: 'hover' },
+    { label: '清除右外距', cssProp: 'margin-right', token: '--spacing-1', value: '4px（对齐 Select）' },
+    { label: '清除图标', cssProp: 'icon', value: 'ClearIcon，16px viewBox，圆底透明度 15%（对齐 Select）' },
+    { label: '勾选图标尺寸', cssProp: 'width / height', token: '--spacing-3', value: '12px' },
+  ],
+  下拉面板: [
+    { label: '触发间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '最小宽度', cssProp: 'min-width', value: '180px' },
+    { label: '最大高度', cssProp: 'max-height', value: '260px' },
+    { 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: 'box-shadow', value: 'shadow-lg' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-1', value: '4px' },
+    { label: '层级', cssProp: 'z-index', value: '10000' },
+  ],
+  多选项: [
+    { label: '最小高度', cssProp: 'min-height', token: '--size-control-md', value: '36px' },
+    { label: '横向内距', cssProp: 'padding-inline', token: '--spacing-3', value: '12px' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-2', value: '8px' },
+    { label: '内容间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '选中背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg', state: 'selected' },
+    { label: '选中文字', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC', semanticRef: 'status-primary', state: 'selected' },
+    { label: '悬浮背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default', state: 'hover' },
+    { label: '禁用文字', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled', state: 'disabled' },
+    { label: 'Checkbox 尺寸', cssProp: 'width / height', token: '--spacing-4', value: '16px' },
+    { label: 'Checkbox 圆角', cssProp: 'border-radius', token: '--radius-sm', value: '6px' },
+    { label: 'Checkbox 选中', cssProp: 'background / border-color', token: '--color-brand-500', value: '#56D3BC' },
+  ],
+  states: {
+    outline: [
+      { 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: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    ],
+    fill: [
+      { label: '背景色', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+      { label: '边框色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+      { label: '文字色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    ],
+    selected: [
+      { label: '背景色', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', semanticRef: 'status-primary.bg' },
+      { label: '边框色', cssProp: 'border-color', token: '--color-brand-300', value: '#87DEC9' },
+      { label: '文字色', cssProp: 'color', token: '--color-brand-800', value: '#129683', semanticRef: 'status-primary' },
+    ],
+    disabled: [
+      { label: '背景色', cssProp: 'background', token: '--color-disabled', value: '#F9FAFB', semanticRef: 'bg-disabled' },
+      { label: '边框色', cssProp: 'border-color', token: '--color-grey-100', value: '#E6E7EA' },
+      { label: '文字色', cssProp: 'color', token: '--color-foreground-disabled', value: '#98A2B3', semanticRef: 'text-disabled' },
+    ],
+  },
+};

package/src/_b_end_runtime/components/Input.jsx

@@ -19,6 +19,7 @@
  * @prop {(suggestion: string) => void} [onAdoptSuggestion] — 采纳 AI 推荐回调
  * @prop {() => void} [onRefreshAiSuggestions] — 刷新 AI 推荐回调
  * @prop {string} [className=''] — 类名
+ * @prop {import('react').CSSProperties} [style] — 根容器样式，常用于设置 `--size-input-width`
  */
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import AiSuggestionPanel, { AiRefreshButton, buildSuggestionGroupsFromFlatList } from './AiSuggestionShared';
@@ -124,6 +125,7 @@ export default function Input({
   onAdoptSuggestion,
   onRefreshAiSuggestions,
   className = '',
+  style,
   ...rest
 }) {
   const inputRef = useRef(null);
@@ -208,7 +210,7 @@ export default function Input({
   ].filter(Boolean).join(' ');
 
   return (
-    <div className={wrapperCls}>
+    <div className={wrapperCls} style={style}>
       <div className={fieldCls} data-tfds-component="Input">
         {prefix ? <span className={ADDON_CLASS}>{prefix}</span> : null}
         <input

package/src/_b_end_runtime/components/Modal.jsx

@@ -40,6 +40,7 @@ const FOOTER_ROW =
 const FOOTER_HINT =
   'm-0 min-w-[7.5rem] flex-1 text-xs font-normal leading-4 text-foreground-secondary';
 const ACTIONS = 'flex shrink-0 items-center justify-end gap-3';
+const BODY_BOTTOM_GAP = 'shrink-0 h-6';
 
 /**
  * Modal — 模态对话框面板（仅面板本体，遮罩与定位由外层处理）
@@ -60,7 +61,7 @@ const ACTIONS = 'flex shrink-0 items-center justify-end gap-3';
  * @prop {function} [onClose=null] — 关闭回调，传入才显示关闭按钮
  * @prop {function} [onCancel=null] — 取消回调，传入才显示取消按钮
  * @prop {function} [onConfirm=null] — 确定回调，传入才显示确定按钮
- * @prop {ReactNode} [footer=null] — 自定义底栏，传入则替换默认底栏
+ * @prop {ReactNode} [footer=null] — 自定义底栏，传入则替换默认底栏；若底栏整体为空则自动保留 24px 底部留白
  * @prop {string} [bodyClassName=''] — 内容区附加类名
  * @prop {string} [className=''] — 附加类名
  * @prop {object} [style] — 内联样式
@@ -88,6 +89,10 @@ export default function Modal({
   const subtitleId = `${uid}-subtitle`;
 
   const sizeClass = layout === 'center' ? SIZE_CLASS[size] : '';
+  const hasDefaultFooterContent = Boolean((showFooterHint && footerHint) || onCancel || onConfirm);
+  const shouldRenderCustomFooter = footer != null;
+  const shouldRenderDefaultFooter = !shouldRenderCustomFooter && hasDefaultFooterContent;
+  const shouldRenderBodyBottomGap = !shouldRenderCustomFooter && !hasDefaultFooterContent;
 
   return (
     <div
@@ -125,9 +130,9 @@ export default function Modal({
 
       <div className={[BODY_CLASS[layout], bodyClassName].filter(Boolean).join(' ')}>{children}</div>
 
-      {footer != null ? (
+      {shouldRenderCustomFooter ? (
         <div className={FOOTER}>{footer}</div>
-      ) : (
+      ) : shouldRenderDefaultFooter ? (
         <footer className={FOOTER}>
           <div className={FOOTER_ROW}>
             {showFooterHint && footerHint ? (
@@ -149,6 +154,8 @@ export default function Modal({
             </div>
           </div>
         </footer>
+      ) : (
+        <div className={BODY_BOTTOM_GAP} aria-hidden="true" />
       )}
     </div>
   );