@tfdesign/b-end 1.0.13 → 1.0.15

package/src/_b_end_runtime/components/ConversationList.jsx

@@ -46,7 +46,7 @@ const DEFAULT_SECTIONS = [
         time: '13:32',
         avatarSrc: liSiruAvatar,
         tags: [
-          { label: '异常监控提醒', variant: 'grey' },
+          { label: '异常提醒', variant: 'grey' },
           { label: '待干预', variant: 'red' },
         ],
       },
@@ -70,7 +70,7 @@ const DEFAULT_SECTIONS = [
         time: '12:40',
         avatarSrc: guoZhezhiAvatar,
         tags: [
-          { label: '退款执行错误', variant: 'grey' },
+          { label: '退款异常', variant: 'grey' },
           { label: '待干预', variant: 'red' },
         ],
       },
@@ -89,7 +89,7 @@ const DEFAULT_SECTIONS = [
         time: '11:22',
         avatarSrc: chengchengAvatar,
         tags: [
-          { label: '24时30分', variant: 'grey', iconName: 'alarm-clock-stroked' },
+          { label: '24时+', variant: 'grey', iconName: 'alarm-clock-stroked' },
           { label: '托管中', variant: 'green' },
         ],
       },
@@ -112,7 +112,7 @@ const DEFAULT_SECTIONS = [
         time: '09:46',
         avatarSrc: liuDelinAvatar,
         tags: [
-          { label: '协商不成功', variant: 'grey' },
+          { label: '协商未成', variant: 'grey' },
           { label: '托管中', variant: 'green' },
         ],
       },
@@ -248,7 +248,7 @@ const TIME = 'ml-auto shrink-0 pl-2 text-foreground-muted';
 const AVATAR_ONLY_HEADER = 'flex h-8 w-full items-center justify-center';
 const AVATAR_ONLY_LIST = 'flex min-h-0 flex-1 flex-col self-stretch gap-1 overflow-y-auto';
 const AVATAR_ONLY_ITEM = [
-  'relative inline-flex h-[68px] w-full items-center rounded-xl px-4',
+  'relative inline-flex h-[68px] min-h-[68px] w-full shrink-0 items-center rounded-xl px-4',
   'transition-colors duration-150 hover:bg-fill active:bg-fill-active',
   'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
 ].join(' ');
@@ -276,10 +276,11 @@ const CARD_MESSAGE_REGION_GENERATING = 'h-[196px] gap-3';
 const CARD_MESSAGE_REGION_EDITABLE = 'h-[155px] gap-3';
 const CARD_MESSAGE_ROW_BASE = 'flex w-full';
 const CARD_MESSAGE_ROW_USER = 'justify-start';
-const CARD_MESSAGE_ROW_AGENT = 'justify-end';
+const CARD_MESSAGE_ROW_OUTGOING = 'justify-end';
 const CARD_MESSAGE_BUBBLE_BASE = 'max-w-[calc(100%-24px)] rounded-lg px-2 py-1.5 text-xs leading-4 text-foreground';
 const CARD_MESSAGE_BUBBLE_USER = 'rounded-tl-none bg-fill';
-const CARD_MESSAGE_BUBBLE_AGENT = 'rounded-tr-none bg-[image:var(--gradient-ai-fill-1)]';
+const CARD_MESSAGE_BUBBLE_BOT = 'rounded-tr-none bg-[image:var(--gradient-ai-fill-1)]';
+const CARD_MESSAGE_BUBBLE_AGENT = 'rounded-tr-none bg-chat-outgoing';
 const CARD_DIVIDER = 'h-px w-full bg-border-default';
 const CARD_FOOTER_BASE = 'shrink-0';
 const CARD_FOOTER_REPLIED = 'px-4 py-4 text-xs leading-4 text-[#22272759]';
@@ -407,13 +408,17 @@ function sortCardTags(tags) {
 }
 
 function ConversationCardMessage({ message }) {
-  const isAgent = message.role === 'agent';
+  const isUser = message.role === 'user';
+  const isBot = message.role === 'bot';
+  const bubbleClassName = isUser
+    ? CARD_MESSAGE_BUBBLE_USER
+    : (isBot ? CARD_MESSAGE_BUBBLE_BOT : CARD_MESSAGE_BUBBLE_AGENT);
 
   return (
-    <div className={[CARD_MESSAGE_ROW_BASE, isAgent ? CARD_MESSAGE_ROW_AGENT : CARD_MESSAGE_ROW_USER].join(' ')}>
+    <div className={[CARD_MESSAGE_ROW_BASE, isUser ? CARD_MESSAGE_ROW_USER : CARD_MESSAGE_ROW_OUTGOING].join(' ')}>
       <div className={[
         CARD_MESSAGE_BUBBLE_BASE,
-        isAgent ? CARD_MESSAGE_BUBBLE_AGENT : CARD_MESSAGE_BUBBLE_USER,
+        bubbleClassName,
       ].join(' ')}>
         {message.text}
       </div>
@@ -499,6 +504,7 @@ function ConversationCardFooter({ card, onSend }) {
             icon={<Icon name="send-01-stroked" size={16} aria-hidden="true" />}
             iconOnly
             className="!h-6 !w-6 !rounded-md !p-1"
+            tooltip="发送回复"
             onKeyDown={(event) => {
               event.stopPropagation();
             }}
@@ -1049,17 +1055,16 @@ function ConversationListDefaultVariant({
       {!isCardVariant && isAvatarOnly ? (
         <>
           <div className={AVATAR_ONLY_HEADER}>
-            <Tooltip content="展开会话列表">
-              <Button
-                type="button"
-                variant="ghost-black"
-                size="sm"
-                icon={<Icon name="layout-right-stroked" size={16} />}
-                iconOnly
-                onClick={handleExpandFromAvatarOnly}
-                aria-label="展开会话列表"
-              />
-            </Tooltip>
+            <Button
+              type="button"
+              variant="ghost-black"
+              size="sm"
+              icon={<Icon name="layout-right-stroked" size={16} />}
+              iconOnly
+              tooltip="展开会话列表"
+              onClick={handleExpandFromAvatarOnly}
+              aria-label="展开会话列表"
+            />
           </div>
           <div className={AVATAR_ONLY_LIST}>
             {avatarOnlyItems.map((item) => (
@@ -1077,65 +1082,60 @@ function ConversationListDefaultVariant({
           <header className={HEADER}>
             <div className={HEADER_MAIN}>
               {!isCardVariant && collapsible ? (
-                <Tooltip content="收起会话列表">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="layout-right-stroked" size={16} />}
-                    iconOnly
-                    onClick={handleCollapseToAvatarOnly}
-                    aria-label="收起会话列表"
-                  />
-                </Tooltip>
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="layout-right-stroked" size={16} />}
+                  iconOnly
+                  tooltip="收起会话列表"
+                  onClick={handleCollapseToAvatarOnly}
+                  aria-label="收起会话列表"
+                />
               ) : null}
               <h2 className={TITLE}>{title}</h2>
             </div>
             {showActions ? (
               <div className={ACTIONS}>
                 {showLayoutToggle ? (
-                  <Tooltip content={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}>
-                    <Button
-                      type="button"
-                      variant="ghost-black"
-                      size="sm"
-                      icon={<Icon name="switch-horizontal-01-stroked" size={16} />}
-                      iconOnly
-                      onClick={handleVariantToggle}
-                      aria-label={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
-                    />
-                  </Tooltip>
-                ) : null}
-                <Tooltip content="搜索会话">
                   <Button
                     type="button"
                     variant="ghost-black"
                     size="sm"
-                    icon={<Icon name="search-lg-stroked" size={16} />}
+                    icon={<Icon name="switch-horizontal-01-stroked" size={16} />}
                     iconOnly
-                    aria-label="搜索会话"
+                    tooltip={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
+                    onClick={handleVariantToggle}
+                    aria-label={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
                   />
-                </Tooltip>
-                <Tooltip content="筛选会话">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="filter-funnel-01-stroked" size={16} />}
-                    iconOnly
-                    aria-label="筛选会话"
-                  />
-                </Tooltip>
-                <Tooltip content="查看工单文件">
-                  <Button
-                    type="button"
-                    variant="ghost-black"
-                    size="sm"
-                    icon={<Icon name="file-05-stroked" size={16} />}
-                    iconOnly
-                    aria-label="查看工单文件"
-                  />
-                </Tooltip>
+                ) : null}
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="search-lg-stroked" size={16} />}
+                  iconOnly
+                  tooltip="搜索会话"
+                  aria-label="搜索会话"
+                />
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="filter-funnel-01-stroked" size={16} />}
+                  iconOnly
+                  tooltip="筛选会话"
+                  aria-label="筛选会话"
+                />
+                <Button
+                  type="button"
+                  variant="ghost-black"
+                  size="sm"
+                  icon={<Icon name="file-05-stroked" size={16} />}
+                  iconOnly
+                  tooltip="查看工单文件"
+                  aria-label="查看工单文件"
+                />
               </div>
             ) : null}
           </header>

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

@@ -63,7 +63,7 @@ export const CONVERSATION_LIST_TOKEN_MAP = {
   ],
   收起态: [
     { label: '列宽', cssProp: 'width', value: '88px' },
-    { label: '行高', cssProp: 'height', value: '68px' },
+    { label: '行高', cssProp: 'height/min-height', value: '68px（固定高度，不参与 flex 压缩；运行时需同时具备 h-[68px] min-h-[68px] shrink-0）' },
     { label: '选中投影', cssProp: 'box-shadow', token: '--shadow-list', value: '0 0 16px 0 rgba(101,115,137,0.06)', state: 'active' },
     { label: '选中左条', cssProp: 'background', token: '--color-data-0', value: '#24CDA5', state: 'active' },
   ],
@@ -93,14 +93,16 @@ export const CONVERSATION_LIST_TOKEN_MAP = {
     { label: '消息区高度', cssProp: 'height', value: '155px（输入文案）', state: 'card-editable' },
     { label: '消息区横向内边距', cssProp: 'padding-inline', token: '--spacing-4', value: '16px', state: 'card' },
     { label: '消息区底部内边距', cssProp: 'padding-bottom', token: '--spacing-2', value: '8px', state: 'card' },
-    { label: '消息区滚动', cssProp: 'overflow-y', value: 'auto', state: 'card' },
+    { label: '消息区滚动', cssProp: 'overflow-y', value: 'auto（固定高度内滚动查看与右侧 IM 同源的完整气泡消息流，不允许按条数截断）', state: 'card' },
     { label: '消息气泡纵向间距', cssProp: 'row-gap', token: '--spacing-3', value: '12px', state: 'card' },
   ],
   卡片消息气泡: [
     { label: '用户气泡背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', state: 'card-user' },
-    { label: 'AI 气泡背景', cssProp: 'background-image', 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%)', state: 'card-agent' },
+    { label: 'AI 气泡背景', cssProp: 'background-image', 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%)', state: 'card-bot' },
+    { label: '人工客服气泡背景', cssProp: 'background', token: '--color-chat-outgoing', value: 'var(--bg-chat-outgoing)', state: 'card-agent' },
     { label: '气泡圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px（对角缺口按消息方向处理）', state: 'card' },
     { label: '气泡字号', cssProp: 'font-size', token: '--text-xs', value: '12px', state: 'card' },
+    { label: '与右侧聊天一致性', cssProp: 'content/style-source', value: '卡片气泡是右侧 IM 对话气泡的缩小版完整消息流；文案、角色、颜色语义必须同源一致。user -> grey，bot -> ai 渐变，agent -> default 浅青；允许降低字号或隐藏辅助元素，但不允许截断消息条数', state: 'card-preview' },
   ],
   卡片底部: [
     { label: '已回复内边距', cssProp: 'padding', token: '--spacing-4', value: '16px', state: 'replied' },

package/src/_b_end_runtime/components/FullScreenPage.jsx

@@ -75,6 +75,7 @@ export default function FullScreenPage({
               icon={<ArrowLeft size={16} strokeWidth={2} />}
               iconOnly
               onClick={onBack}
+              tooltip="返回"
               aria-label="返回"
               className="shrink-0"
               data-tfds-component="FullScreenPage.Back"

package/src/_b_end_runtime/components/InfoDisplayPanel.jsx

@@ -3,6 +3,8 @@
  *
  * 用于客服工作台 / 在线 Agent / 工单详情右侧信息区，将多个可切换的信息面板
  * 组织为“主栏 + 拆分栏”结构。组件只负责框架、拆分/合并和 Tabs，不规定 tabs 内容。
+ * tabs 来自业务数据动态配置：1 个分类单栏展示，2 个分类最多双栏，3 个及以上分类且宽度足够时最多三栏。
+ * 嵌入客服工作台框架时，必须保留整体信息栏拖拽、内部栏间拖拽、拆分/合并和最小宽度保护。
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -10,7 +12,6 @@ import Button from './Button';
 import FormTitle from './FormTitle';
 import Icon from './Icon';
 import Tabs from './Tabs';
-import Tooltip from './Tooltip';
 
 const DEFAULT_PANELS = [
   {
@@ -307,20 +308,17 @@ function PanelHeader({
 
       {!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>
+          <Button
+            type="button"
+            variant="ghost-black"
+            size="md"
+            icon={<Icon name={splitActionIcon} size={16} />}
+            iconOnly
+            tooltip={splitActionTooltip}
+            disabled={splitActionDisabled}
+            aria-label={splitActionLabel}
+            onClick={onSplitAction}
+          />
         </div>
       ) : null}
       <span className={HEADER_LINE} aria-hidden="true" />

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

@@ -17,6 +17,7 @@ export const INFO_DISPLAY_PANEL_TOKEN_MAP = {
   分栏: [
     { label: '布局模型', cssProp: 'layout', value: '主栏 + 拆分栏；主栏永远在最右侧，拆分栏固定追加在主栏左侧' },
     { label: '最大栏数', cssProp: 'max-columns', value: '3 栏（1 个主栏 + 最多 2 个拆分栏）' },
+    { label: '动态拆分能力', cssProp: 'split-model', value: '按业务 tabs 动态支持 tab1 / tab2 / tab3：1 个分类单栏展示，2 个分类最多双栏，3 个及以上分类且宽度足够时最多三栏' },
     { 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 分隔线）' },
@@ -24,6 +25,7 @@ export const INFO_DISPLAY_PANEL_TOKEN_MAP = {
     { 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: 'customer-service-rule', value: '嵌入客服工作台框架时，必须完整保留整体信息栏拖拽、内部栏间拖拽、拆分/合并、宽度门槛和最小栏宽保护' },
     { label: '拖拽最小宽度', cssProp: 'min-column-width', value: '每栏最小 200px' },
     { label: '预览验证', cssProp: 'preview-resize', value: '预览态默认撑满容器，并支持从组件左侧边缘拖拽整体宽度，用于验证单栏 / 双栏 / 三栏门槛' },
   ],

package/src/_b_end_runtime/components/Modal.jsx

@@ -122,6 +122,7 @@ export default function Modal({
             icon={<X size={16} strokeWidth={2} />}
             iconOnly
             onClick={onClose}
+            tooltip="关闭"
             aria-label="关闭"
             className="shrink-0"
           />

package/src/_b_end_runtime/components/Sheet.jsx

@@ -94,6 +94,7 @@ export default function Sheet({
             icon={<X size={16} strokeWidth={2} />}
             iconOnly
             onClick={onClose}
+            tooltip="关闭"
             aria-label="关闭"
             className="shrink-0"
           />

package/src/_b_end_runtime/components/Table.jsx

@@ -607,6 +607,7 @@ function renderTextButtonValue(value) {
         iconOnly
         icon={<Icon name={iconName} size="sm" />}
         className={[ICON_ONLY_BUTTON_RESET, TEXT_BUTTON_ICON_CLASS, 'ml-[2px]'].join(' ')}
+        tooltip={typeof value === 'object' ? value.tooltip || value.ariaLabel || value.label || '单元格操作' : '单元格操作'}
         aria-label="单元格操作"
         onClick={onClick}
       />
@@ -720,6 +721,7 @@ function renderActionsValue(value) {
               icon={<Icon name={action.iconName || 'dots-horizontal-stroked'} size="sm" />}
               className={[ICON_ONLY_BUTTON_RESET, MORE_ACTION_BUTTON_CLASS].join(' ')}
               onClick={action.onClick}
+              tooltip={action.tooltip || action.ariaLabel || action.label || '更多操作'}
               aria-label={action.ariaLabel || action.label || '更多操作'}
             />
           );
@@ -755,6 +757,7 @@ function renderDragHandleValue(value) {
       iconOnly
       icon={<Icon name="dots-grid-stroked" size="sm" />}
       className={[ICON_ONLY_BUTTON_RESET, DRAG_HANDLE_BUTTON_CLASS].join(' ')}
+      tooltip="拖拽排序"
       aria-label="拖拽排序"
       onClick={onClick}
     />
@@ -888,6 +891,7 @@ function CardFormActions({ record, context, onView, onMore }) {
         variant="ghost-black"
         iconOnly
         icon={<Icon name="dots-horizontal-stroked" />}
+        tooltip="更多"
         aria-label="更多"
         onClick={() => onMore?.(record, context)}
       />
@@ -956,6 +960,7 @@ function CardFormItem({
             variant="ghost-black"
             iconOnly
             icon={<Icon name="chevron-right-stroked" />}
+            tooltip={expanded ? '收起子项' : '展开子项'}
             aria-label={expanded ? '收起子项' : '展开子项'}
             aria-expanded={hasChildren ? expanded : undefined}
             onClick={(event) => {
@@ -1169,6 +1174,7 @@ export default function Table({
               className={[ICON_ONLY_BUTTON_RESET, PAGE_ARROW_BUTTON_CLASS].join(' ')}
               onClick={() => handlePageChange(safeCurrent - 1)}
               disabled={safeCurrent <= 1}
+              tooltip="上一页"
               aria-label="上一页"
               data-tfds-component="Table.Pagination"
             />
@@ -1207,6 +1213,7 @@ export default function Table({
               className={[ICON_ONLY_BUTTON_RESET, PAGE_ARROW_BUTTON_CLASS].join(' ')}
               onClick={() => handlePageChange(safeCurrent + 1)}
               disabled={safeCurrent >= totalPages}
+              tooltip="下一页"
               aria-label="下一页"
               data-tfds-component="Table.Pagination"
             />

package/src/_b_end_runtime/components/Tabs.jsx

@@ -12,12 +12,22 @@
  * @prop {number} [activeIndex=0] — 受控：当前选中索引
  * @prop {number} [defaultIndex=0] — 非受控初始索引
  * @prop {function} [onChange=null] — `(index) => void` 切换回调
+ * @prop {'auto'|'visible'} [overflow='auto'] — 宽度不足时默认横向滚动，禁止撑破卡片/页面容器
  * @prop {string} [className=''] — 根节点类名
  */
 import { useState } from 'react';
 
 /* ── 容器样式 ── */
-const CONTAINER_BASE = 'inline-flex items-center relative w-fit';
+const VIEWPORT_BASE = 'tfds-tabs block max-w-full min-w-0';
+const VIEWPORT_OVERFLOW = {
+  auto: [
+    'overflow-x-auto overflow-y-hidden overscroll-x-contain',
+    '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
+  ].join(' '),
+  visible: 'overflow-visible',
+};
+
+const CONTAINER_BASE = 'inline-flex w-max max-w-none items-center relative';
 
 const CONTAINER_VARIANT = {
   line:    'gap-2 bg-transparent border-b border-b-border',
@@ -98,27 +108,59 @@ export default function Tabs({
   activeIndex,
   defaultIndex = 0,
   onChange,
+  overflow = 'auto',
   className = '',
   ...rest
 }) {
   const [internalIndex, setInternalIndex] = useState(defaultIndex);
   const isControlled = activeIndex !== undefined;
   const currentIndex = isControlled ? (activeIndex ?? 0) : internalIndex;
+  const tabs = items ?? [];
 
   const handleClick = (index) => {
     if (!isControlled) setInternalIndex(index);
     onChange?.(index);
   };
 
+  const handleKeyDown = (event) => {
+    const lastIndex = tabs.length - 1;
+    if (lastIndex < 0) return;
+
+    const nextIndexMap = {
+      ArrowRight: Math.min(currentIndex + 1, lastIndex),
+      ArrowLeft: Math.max(currentIndex - 1, 0),
+      Home: 0,
+      End: lastIndex,
+    };
+    const nextIndex = nextIndexMap[event.key];
+    if (nextIndex === undefined || nextIndex === currentIndex) return;
+
+    event.preventDefault();
+    handleClick(nextIndex);
+    event.currentTarget.querySelectorAll('[role="tab"]')[nextIndex]?.focus();
+  };
+
   const containerCls = [
     CONTAINER_BASE,
     CONTAINER_VARIANT[variant],
+  ].filter(Boolean).join(' ');
+
+  const viewportCls = [
+    VIEWPORT_BASE,
+    VIEWPORT_OVERFLOW[overflow] || VIEWPORT_OVERFLOW.auto,
     className,
   ].filter(Boolean).join(' ');
 
   return (
-    <div className={[`tfds-tabs`, containerCls].filter(Boolean).join(' ')} role="tablist" {...rest} data-tfds-component="Tabs">
-      {(items ?? []).map((item, index) => {
+    <div
+      className={viewportCls}
+      role="tablist"
+      onKeyDown={handleKeyDown}
+      {...rest}
+      data-tfds-component="Tabs"
+    >
+      <div className={containerCls}>
+      {tabs.map((item, index) => {
         const isActive = index === currentIndex;
         const itemCls = [
           ITEM_BASE,
@@ -144,6 +186,7 @@ export default function Tabs({
           </button>
         );
       })}
+      </div>
     </div>
   );
 }

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

@@ -5,6 +5,9 @@
 export const TABS_TOKEN_MAP = {
   base: [
     { label: '默认尺寸', cssProp: 'size', value: 'SM（内容区 / 卡片内 / 表单分段 / 筛选维度默认）' },
+    { label: '宽度适配', cssProp: 'overflow-x', value: 'auto（默认启用横向滚动；Tabs 不允许撑破卡片 / 页面容器）' },
+    { label: '容器上限', cssProp: 'max-width', value: '100%（根节点必须 max-w-full + min-w-0）' },
+    { label: '内容宽度', cssProp: 'width', value: 'w-max（内层按 tab 内容自然宽度排列，外层负责裁切与滚动）' },
     { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
     { label: '行高', cssProp: 'line-height', value: '20px' },
     { label: '图标尺寸', cssProp: 'width/height', value: '16px' },

package/src/_b_end_runtime/components/TagBar.jsx

@@ -566,6 +566,7 @@ function BusinessSwitcher({
           iconOnly
           icon={<Icon name="switch-horizontal-01-stroked" size="xs" className="text-foreground-muted" aria-hidden="true" />}
           className="shrink-0"
+          tooltip="切换业务线"
           aria-label="切换业务线"
           aria-haspopup="menu"
           aria-expanded={menuOpen}
@@ -1097,6 +1098,7 @@ export default function TagBar({
             radius="rounded"
             iconOnly
             icon={<Icon name="layout-left-stroked" size="sm" aria-hidden="true" />}
+            tooltip={isCollapsed ? '展开标签栏' : '收起标签栏'}
             aria-label={isCollapsed ? '展开标签栏' : '收起标签栏'}
             onClick={() => updateCollapsed(!isCollapsed)}
             data-tfds-component="TagBar.CollapseToggle"

package/src/_b_end_runtime/components/Toast.jsx

@@ -111,6 +111,7 @@ export default function Toast({
           icon={<X size={16} strokeWidth={2} />}
           iconOnly
           onClick={onClose}
+          tooltip="关闭"
           aria-label="关闭"
           className="shrink-0 border-transparent bg-transparent shadow-none"
         />

package/src/_b_end_runtime/components/Upload.jsx

@@ -413,6 +413,7 @@ export const Upload = ({
                       radius="rounded"
                       iconOnly
                       icon={<Icon name="refresh-cw-01-stroked" size="xs" />}
+                      tooltip="重试上传"
                       onClick={(e) => {
                         e.stopPropagation();
                         retryItem(fileItem);