@tfdesign/b-end 1.1.4 → 1.1.6

package/src/_b_end_runtime/components/Filter.jsx

@@ -74,15 +74,17 @@ const TONE_CLASS = {
 };
 
 const LABEL_CLASS = '[font-weight:var(--font-semibold)]';
+const LABEL_DEFAULT_COLOR_CLASS = '[color:var(--tfds-text-secondary,var(--color-foreground-secondary))]';
 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-[var(--spacing-1)]',
 ].join(' ');
+const CLEAR_DEFAULT_CLASS = 'text-foreground-disabled hover:text-foreground-secondary';
+const CLEAR_SELECTED_CLASS = '![color:var(--color-brand-500)] hover:![color:var(--color-brand-700)]';
 const PANEL_CLASS = [
   'rounded-[var(--radius-md)] border border-solid border-border-default',
   'bg-surface shadow-lg',
@@ -441,13 +443,19 @@ export default function Filter({
         onKeyDown={handleKeyDown}
         {...rest}
       >
-        <span className={LABEL_CLASS}>{label}</span>
+        <span className={[
+          LABEL_CLASS,
+          tone === 'outline' || tone === 'fill' ? LABEL_DEFAULT_COLOR_CLASS : '',
+        ].filter(Boolean).join(' ')}>{label}</span>
         {hasValue ? <span className={VALUE_CLASS}>{derivedValue}</span> : null}
         {children}
         {showClear ? (
           <button
             type="button"
-            className={CLEAR_CLASS}
+            className={[
+              CLEAR_CLASS,
+              isSelected ? CLEAR_SELECTED_CLASS : CLEAR_DEFAULT_CLASS,
+            ].filter(Boolean).join(' ')}
             tabIndex={-1}
             aria-label="清除"
             onClick={handleClear}

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

@@ -15,6 +15,7 @@ export const FILTER_TOKEN_MAP = {
   ],
   文字: [
     { label: '标签字重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
+    { label: '默认标签色', cssProp: 'color', token: '--text-secondary', value: '#475467', semanticRef: 'text-secondary', state: 'default' },
     { 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' },
@@ -44,6 +45,8 @@ export const FILTER_TOKEN_MAP = {
     { 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: 'color', token: '--color-brand-500', value: '#56D3BC', state: 'selected' },
+    { label: '选中清除悬浮颜色', cssProp: 'color', token: '--color-brand-700', value: '#0F7F70', state: 'selected+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' },

package/src/_b_end_runtime/components/FormTitle.jsx

@@ -8,7 +8,7 @@
  * **AI / 页面生成：层级选型（必须按场景选 variant，禁止手写 h2/h3）**
  * | 场景 | variant | 说明 |
  * |------|---------|------|
- * | 整体页面左上角总标题、工作台名、Playground 页面主标题（如 `Model Playground`） | `form` | 全页最高层级，20px 大字号，左侧**没有**绿色竖条；需要说明时描述在标题下方 |
+ * | 整体页面左上角总标题、工作台名、Playground 页面主标题（如 `Model Playground`） | `form` | 全页最高层级，18px 大字号，左侧**没有**绿色竖条；需要说明时描述在标题下方 |
  * | 页面内一级板块 / 列表管理页单张主白卡顶栏主标题 | `level-1` | 左侧品牌色竖条 + 16px 标题；用于页面总标题之下的大卡片/一级内容块，不用于整页左上角总标题 |
  * | `level-1` 之下的第一级分区 / 白卡内大模块标题 | `level-2` | 14px 竖条；有板块说明诉求时描述显示在标题**同行右侧** |
  * | `level-2` 再下的子分组、折叠面板头、表格上方小区域标题 | `level-3` | 与 level-2 同阶字级，用于再嵌套一层时的视觉降级（仍带竖条） |
@@ -31,7 +31,7 @@ const VARIANT_CONFIG = {
   form: {
     root: 'inline-flex max-w-full min-w-0 flex-col items-start gap-1',
     titleWrap: 'flex shrink-0 items-center gap-[6px]',
-    title: 'shrink-0 whitespace-nowrap text-xl [font-weight:var(--font-semibold)] leading-7 text-foreground',
+    title: 'shrink-0 whitespace-nowrap text-lg [font-weight:var(--font-semibold)] leading-7 text-foreground',
     description: 'whitespace-pre-wrap text-sm font-normal leading-5 text-foreground-muted',
     indicator: null,
     descriptionPlacement: 'bottom',

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

@@ -9,7 +9,7 @@ export const FORM_TITLE_TOKEN_MAP = {
   variants: {
     form: [
       { label: '标题色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
-      { label: '标题号', cssProp: 'font-size', token: '--text-xl', value: '20px' },
+      { label: '标题号', cssProp: 'font-size', token: '--text-lg', value: '18px' },
       { label: '标题重', cssProp: 'font-weight', token: '--font-semibold', value: '600' },
       { label: '标题高', cssProp: 'line-height', value: '28px' },
       { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },

package/src/_b_end_runtime/components/FullScreenPage.jsx

@@ -35,10 +35,10 @@ const BG_CLASS = {
   grey: 'bg-blueGrey-200',
 };
 
-/* ── 顶栏：透明背景，无分割线，左右 24px / 上下 16px ── */
+/* ── 顶栏：透明背景，无分割线，左右/上下均使用页面四周间距 16px ── */
 const HEADER = [
   'flex shrink-0 items-center justify-between gap-3',
-  'px-6 py-4',
+  'px-4 py-4',
 ].join(' ');
 
 /* ── 顶栏标题 ── */

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

@@ -1,8 +1,9 @@
 export const FULL_SCREEN_PAGE_TOKEN_MAP = {
   顶栏: [
     { label: '背景色', cssProp: 'background', value: 'transparent' },
-    { label: '高度', cssProp: 'height', value: '56px' },
-    { label: '横向内距', cssProp: 'padding-inline', value: '16px' },
+    { label: '横向内距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-4', value: '16px' },
+    { label: '与内容区左右对齐', cssProp: 'alignment', value: '对齐内容区四周外距' },
   ],
   标题: [
     { label: '颜色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
@@ -12,6 +13,9 @@ export const FULL_SCREEN_PAGE_TOKEN_MAP = {
   内容区: [
     { label: '白底背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
     { label: '灰底背景', cssProp: 'background', token: '--color-blueGrey-200', value: '#F2F4F7', state: 'bg=grey' },
+    { label: '内容左右/底部外距', cssProp: 'padding-inline + padding-bottom', token: '--spacing-4', value: '16px' },
+    { label: '内容顶部外距', cssProp: 'padding-top', value: '0px', description: '避免与顶栏底部 16px 叠加成 32px' },
+    { label: '顶栏到板块间距', cssProp: 'visual-gap', token: '--spacing-4', value: '16px' },
   ],
   引用组件: [
     { label: '返回按钮', cssProp: '—', value: 'Button ghost-black sm iconOnly' },

package/src/_b_end_runtime/components/TagBar.jsx

@@ -28,8 +28,7 @@ import Input from './Input';
  * @prop {boolean} collapsed — 当前收起状态（受控）
  * @prop {boolean} [defaultCollapsed=false] — 非受控初始收起状态
  * @prop {(collapsed: boolean) => void} [onCollapsedChange=null] — 收起状态变化回调
- * @prop {'transparent'|'panel'} [tone='transparent'] — 背景风格：`transparent` 根节点透明底，用于①**外层独立白圆角卡**内嵌（大卡片/双白卡左列，由父容器提供白底与圆角）或②**单一大白卡**内左列（与主内容共白底、上下撑满）；`panel` 为组件**自带浅灰底**的侧条样式，背景色固定为 `--color-blueGrey-100`，用于灰色独立导航条，**不是**白色独立卡片（白卡请外层 div + `transparent`）。
- * @prop {boolean} [resizable=true] — 是否支持右侧拖拽调宽
+ * @prop {boolean} [resizable=false] — 已废弃：TagBar 自身不再绘制右侧拖拽把手；独立白卡场景由外层容器负责拖拽调宽
  * @prop {number} width — 当前宽度（受控）
  * @prop {number} [defaultWidth=240] — 非受控初始宽度
  * @prop {number} [minWidth=160] — 最小展开宽度
@@ -362,8 +361,6 @@ const ROW_CONTENT_TERTIARY = 'flex h-full w-full min-w-0 flex-1 items-center gap
 const BUSINESS_ROW = 'group flex h-9 w-full items-center gap-2 rounded-[8px] px-3 transition-colors duration-150';
 const BUSINESS_MENU = 'absolute left-0 right-0 top-[calc(100%+8px)] z-30 flex flex-col gap-[4px] rounded-[8px] border border-border-default bg-surface p-1 shadow-lg';
 const BUSINESS_MENU_ITEM = 'flex w-full items-center gap-2 rounded-[8px] px-3 py-2 text-left text-sm leading-5 text-foreground transition-colors duration-150 hover:bg-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200';
-const RESIZE_HANDLE_CLASS = 'absolute top-0 bottom-0 -right-[6px] z-20 w-3 cursor-col-resize touch-none select-none focus-visible:outline-none';
-const RESIZE_HANDLE_BAR_CLASS = 'absolute right-[5px] top-0 bottom-0 w-[2px] rounded-full bg-transparent transition-colors duration-150';
 const CHEVRON_BUTTON_CLASS = 'inline-flex h-3 w-4 shrink-0 items-center justify-center rounded-[4px] text-foreground-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200';
 
 const ICON_BG_CLASS = {
@@ -736,8 +733,6 @@ export default function TagBar({
   collapsed,
   defaultCollapsed = false,
   onCollapsedChange = null,
-  tone = 'transparent',
-  resizable = true,
   width,
   defaultWidth = DEFAULT_EXPANDED_WIDTH,
   minWidth = DEFAULT_MIN_WIDTH,
@@ -772,8 +767,6 @@ export default function TagBar({
   const [lastExpandedWidth, setLastExpandedWidth] = useState(Math.max(normalizedDefaultWidth, minWidth));
   const [focusSearchOnExpand, setFocusSearchOnExpand] = useState(false);
   const [businessMenuOpen, setBusinessMenuOpen] = useState(false);
-  const [isResizeActive, setIsResizeActive] = useState(false);
-  const dragStateRef = useRef(null);
   const businessMenuRef = useRef(null);
   const businessAreaRef = useRef(null);
 
@@ -838,13 +831,6 @@ export default function TagBar({
   const renderedSelectedItemId = isCollapsed ? collapsedTreeSelectedItemId : resolvedSelectedItemId;
   const isCollapsedBusinessSelected = isCollapsed && resolvedSelectedItemId === currentBusiness.id;
 
-  /**
-   * 宽度策略：
-   * - 展开态：宽度在 [minWidth, maxWidth] 内（避免出现“非折叠但过窄”的尴尬态）
-   * - 折叠态：渲染宽度固定为 DEFAULT_COLLAPSED_WIDTH，内部仍可更新 lastExpandedWidth 以便恢复
-   */
-  const clampExpandedWidth = useCallback((value) => clampWidth(value, minWidth, normalizedMaxWidth), [minWidth, normalizedMaxWidth]);
-
   const updateWidth = useCallback((nextWidth) => {
     const clampedWidth = clampWidth(nextWidth, DEFAULT_COLLAPSED_WIDTH, normalizedMaxWidth);
     if (!isWidthControlled) {
@@ -921,109 +907,9 @@ export default function TagBar({
     }
   }, [isCollapsed, updateCollapsed]);
 
-  const handleResizePointerDown = useCallback((event) => {
-    if (!resizable) return;
-
-    event.preventDefault();
-    setIsResizeActive(true);
-    dragStateRef.current = {
-      startX: event.clientX,
-      startWidth: isCollapsed ? Math.max(lastExpandedWidth, minWidth) : resolvedTargetWidth,
-      latestWidth: isCollapsed ? Math.max(lastExpandedWidth, minWidth) : resolvedTargetWidth,
-      latestRawWidth: isCollapsed ? Math.max(lastExpandedWidth, minWidth) : resolvedTargetWidth,
-    };
-
-    if (!isCollapsedControlled) {
-      if (innerManualCollapsed) setInnerManualCollapsed(false);
-      if (innerAutoCollapsed) setInnerAutoCollapsed(false);
-    }
-
-    const previousUserSelect = document.body.style.userSelect;
-    document.body.style.userSelect = 'none';
-
-    const handlePointerMove = (moveEvent) => {
-      if (!dragStateRef.current) return;
-      const deltaX = moveEvent.clientX - dragStateRef.current.startX;
-      const nextRawWidth = dragStateRef.current.startWidth + deltaX;
-      const nextWidth = clampExpandedWidth(nextRawWidth);
-      const clampedWidth = updateWidth(nextWidth);
-      dragStateRef.current.latestWidth = clampedWidth;
-      dragStateRef.current.latestRawWidth = nextRawWidth;
-    };
-
-    const stopDragging = () => {
-      const finalRawWidth = dragStateRef.current?.latestRawWidth ?? dragStateRef.current?.startWidth ?? resolvedTargetWidth;
-      dragStateRef.current = null;
-      setIsResizeActive(false);
-      document.body.style.userSelect = previousUserSelect;
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', stopDragging);
-      // 松手时才做折叠判定：避免拖拽过程中闪烁
-      if (finalRawWidth < normalizedCollapseThreshold) {
-        updateCollapsed(true, { source: 'auto', restoreWidth: false });
-      }
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-    window.addEventListener('pointerup', stopDragging, { once: true });
-  }, [
-    resizable,
-    isCollapsed,
-    lastExpandedWidth,
-    minWidth,
-    resolvedTargetWidth,
-    isCollapsedControlled,
-    innerManualCollapsed,
-    innerAutoCollapsed,
-    normalizedCollapseThreshold,
-    clampExpandedWidth,
-    updateWidth,
-    updateCollapsed,
-  ]);
-
-  const handleResizeKeyDown = useCallback((event) => {
-    if (!resizable) return;
-
-    let nextWidth = isCollapsed ? Math.max(lastExpandedWidth, minWidth) : resolvedTargetWidth;
-    if (event.key === 'ArrowLeft') nextWidth -= 16;
-    if (event.key === 'ArrowRight') nextWidth += 16;
-    if (event.key === 'Home') nextWidth = normalizedCollapseThreshold;
-    if (event.key === 'End') nextWidth = normalizedMaxWidth;
-    if (nextWidth === (isCollapsed ? Math.max(lastExpandedWidth, minWidth) : resolvedTargetWidth)) return;
-
-    event.preventDefault();
-    if (!isCollapsedControlled) {
-      if (innerManualCollapsed) setInnerManualCollapsed(false);
-      if (innerAutoCollapsed) setInnerAutoCollapsed(false);
-    }
-    updateWidth(clampExpandedWidth(nextWidth));
-    if (nextWidth < normalizedCollapseThreshold) {
-      updateCollapsed(true, { source: 'auto', restoreWidth: false });
-    }
-  }, [
-    resizable,
-    isCollapsed,
-    lastExpandedWidth,
-    minWidth,
-    resolvedTargetWidth,
-    normalizedCollapseThreshold,
-    normalizedMaxWidth,
-    isCollapsedControlled,
-    innerManualCollapsed,
-    innerAutoCollapsed,
-    clampExpandedWidth,
-    updateWidth,
-    updateCollapsed,
-  ]);
-
-  const rootBackgroundClass =
-    tone === 'panel'
-    ? 'bg-blueGrey-100'
-    : 'bg-transparent';
-
   return (
     <aside
-      className={`${ROOT_BASE} ${rootBackgroundClass} ${className}`.trim()}
+      className={`${ROOT_BASE} bg-transparent ${className}`.trim()}
       style={{ width: `${renderedWidth}px`, padding: '16px', ...style }}
       aria-label="标签栏"
       data-tfds-component="TagBar"
@@ -1105,32 +991,6 @@ export default function TagBar({
           />
         </div>
       ) : null}
-
-      {resizable ? (
-        <div
-          className={RESIZE_HANDLE_CLASS}
-          role="separator"
-          aria-label="调整标签栏宽度"
-          aria-orientation="vertical"
-          aria-valuemin={DEFAULT_COLLAPSED_WIDTH}
-          aria-valuemax={normalizedMaxWidth}
-          aria-valuenow={Math.round(renderedWidth)}
-          tabIndex={0}
-          onPointerDown={handleResizePointerDown}
-          onKeyDown={handleResizeKeyDown}
-          onPointerEnter={() => setIsResizeActive(true)}
-          onPointerLeave={() => {
-            if (!dragStateRef.current) setIsResizeActive(false);
-          }}
-          onFocus={() => setIsResizeActive(true)}
-          onBlur={() => {
-            if (!dragStateRef.current) setIsResizeActive(false);
-          }}
-          data-tfds-component="TagBar.ResizeHandle"
-        >
-          <span className={`${RESIZE_HANDLE_BAR_CLASS} ${isResizeActive ? 'bg-border-default' : 'bg-transparent'}`} />
-        </div>
-      ) : null}
     </aside>
   );
 }

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

@@ -28,8 +28,8 @@ export const TAGBAR_TOKEN_MAP = {
     { label: '悬浮底', cssProp: 'background', value: 'rgba(83, 96, 143, 0.04)', state: 'hover' },
   ],
   整栏: [
-    { label: '展开背景', cssProp: 'background', value: 'linear-gradient(270deg, rgb(249,250,251) 37.08%, rgb(255,255,255) 100%)' },
-    { label: '收起背景', cssProp: 'background', token: '--color-blueGrey-100', value: '#F9FAFB', state: 'collapsed' },
+    { label: '组件背景', cssProp: 'background', value: 'transparent（背景由所属父容器决定）' },
+    { label: '收起背景', cssProp: 'background', value: 'transparent（背景由所属父容器决定）', state: 'collapsed' },
     { label: '分隔线', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
   ],
   头部: [
@@ -62,7 +62,7 @@ export const TAGBAR_TOKEN_MAP = {
   ],
   尺寸: [
     { label: '展开宽度', cssProp: 'width', value: '240px' },
-    { label: '收起宽度', cssProp: 'width', value: '76px' },
+    { label: '收起宽度', cssProp: 'width', value: '72px' },
     { label: '顶部业务高', cssProp: 'height', value: '36px' },
     { label: '节点高度', cssProp: 'height', value: '32px' },
     { label: '图标槽宽', cssProp: 'width', value: '16px' },