one-design-next 0.0.69 → 0.0.71

package/dist/skill-slot/index.js

@@ -1,33 +1,89 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
-import Tooltip from "../tooltip";
+import Popover from "../popover";
 import "./style";
 
 /* 给 listbox / option 生成稳定且唯一的 id 前缀（aria-activedescendant 需要）。
  * 模块级自增 + useState 初始化，保证每个实例 mount 期间 id 稳定。 */
 var skillSlotIdSeq = 0;
 
+/**
+ * menu/card 行内描述：仅在被 line-clamp 截断时，hover 0.5s 右侧 Popover 出全文。
+ * 始终挂载 Popover（用 visible 关掉未截断态），避免条件挂载导致 ref/测量丢帧。
+ */
+function SkillDescPopover(_ref) {
+  var description = _ref.description;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    truncated = _useState2[0],
+    setTruncated = _useState2[1];
+  useLayoutEffect(function () {
+    var _document$fonts, _document$fonts$then;
+    var el = ref.current;
+    if (!el) return;
+    var measure = function measure() {
+      /* line-clamp 截断时 scrollHeight 会大于可见 clientHeight */
+      var next = el.scrollHeight > el.clientHeight + 1;
+      setTruncated(function (prev) {
+        return prev === next ? prev : next;
+      });
+    };
+    measure();
+    /* 弹层/字体未稳时首帧易漏判：双 rAF + ResizeObserver + fonts.ready */
+    var raf2 = 0;
+    var raf1 = requestAnimationFrame(function () {
+      measure();
+      raf2 = requestAnimationFrame(measure);
+    });
+    var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measure) : null;
+    ro === null || ro === void 0 || ro.observe(el);
+    if (el.parentElement) ro === null || ro === void 0 || ro.observe(el.parentElement);
+    var fontsReady = (_document$fonts = document.fonts) === null || _document$fonts === void 0 || (_document$fonts = _document$fonts.ready) === null || _document$fonts === void 0 || (_document$fonts$then = _document$fonts.then) === null || _document$fonts$then === void 0 ? void 0 : _document$fonts$then.call(_document$fonts, measure);
+    return function () {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      ro === null || ro === void 0 || ro.disconnect();
+      /* fonts.ready 无法取消，measure 内 setState 在 unmount 后由 React 忽略 */
+      void fontsReady;
+    };
+  }, [description]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    placement: "right",
+    mouseEnterDelay: 0.5
+    /* 未截断强制关闭；截断后交还给 hover 非受控 */,
+    visible: truncated ? undefined : false,
+    popup: /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-slot-desc-full": true
+    }, description)
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-odn-skill-slot-item-desc": true
+  }, description));
+}
+
 /** 命令式句柄：供"焦点不在 menu 上"的宿主（如 composer 的 contenteditable）转发键盘。 */
 
-export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
-  var skillsProp = _ref.skills,
-    skillGroups = _ref.skillGroups,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'bar' : _ref$variant,
-    value = _ref.value,
-    onSelect = _ref.onSelect,
-    onManageSkills = _ref.onManageSkills,
-    skillManageFooter = _ref.skillManageFooter,
-    activeIndex = _ref.activeIndex,
-    onActiveIndexChange = _ref.onActiveIndexChange,
-    menuMaxHeight = _ref.menuMaxHeight,
-    itemWidth = _ref.itemWidth,
-    className = _ref.className,
-    style = _ref.style;
+export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
+  var skillsProp = _ref2.skills,
+    skillGroups = _ref2.skillGroups,
+    showGroupTitlesProp = _ref2.showGroupTitles,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'bar' : _ref2$variant,
+    onSelect = _ref2.onSelect,
+    onManageSkills = _ref2.onManageSkills,
+    skillManageFooter = _ref2.skillManageFooter,
+    activeIndex = _ref2.activeIndex,
+    onActiveIndexChange = _ref2.onActiveIndexChange,
+    menuMaxHeight = _ref2.menuMaxHeight,
+    menuWidth = _ref2.menuWidth,
+    itemWidth = _ref2.itemWidth,
+    className = _ref2.className,
+    style = _ref2.style;
   /* 优先使用 skillGroups，否则回退到 skills；两者都未提供则为空数组。 */
   var skills = useMemo(function () {
     if (skillGroups) return skillGroups.flatMap(function (g) {
@@ -35,6 +91,8 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
     });
     return skillsProp !== null && skillsProp !== void 0 ? skillsProp : [];
   }, [skillGroups, skillsProp]);
+  var showGroupTitles = showGroupTitlesProp !== null && showGroupTitlesProp !== void 0 ? showGroupTitlesProp : variant === 'menu';
+  var groupedWithTitles = !!(skillGroups && showGroupTitles);
   /* menu 变体：HoverFill 完全只管鼠标交互（命令式状态机，不变）；键盘 ↑↓
    * 走独立的 CSS [data-odn-skill-slot-item-highlighted] 视觉层。
    *
@@ -52,22 +110,22 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
    *   维护高亮 index，监听 ↑↓ / Home / End 移动、Enter / Space 选中，
    *   并自动跳过 disabled 项、把高亮项滚动进视口。 */
 
-  var _useState = useState(function () {
+  var _useState3 = useState(function () {
       return "odn-skill-slot-".concat(++skillSlotIdSeq);
     }),
-    _useState2 = _slicedToArray(_useState, 1),
-    listboxId = _useState2[0];
-  var _useState3 = useState(-1),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internalActiveIndex = _useState4[0],
-    setInternalActiveIndex = _useState4[1];
-  var isControlled = activeIndex != null;
+    _useState4 = _slicedToArray(_useState3, 1),
+    listboxId = _useState4[0];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalActiveIndex = _useState6[0],
+    setInternalActiveIndex = _useState6[1];
+  var isControlled = activeIndex !== undefined && activeIndex !== null;
   var currentIndex = isControlled ? activeIndex : internalActiveIndex;
   var itemRefs = useRef([]);
 
-  /* disabled 与 active 互斥：已选中项不算 disabled（与渲染逻辑保持一致）。 */
+  /* SkillItem.disabled 为唯一禁用来源（不再与选中态互斥）。 */
   var isItemDisabled = function isItemDisabled(skill) {
-    return !!skill.disabled && value !== skill.id;
+    return !!skill.disabled;
   };
 
   /* 高亮项变化时滚动进视口（menu 列表可能超出浮层高度）。 */
@@ -175,18 +233,17 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
   if (skills.length === 0) return null;
 
   /* menu variant 有 scroll-wrap 时，滚动仅包裹技能列表，footer 固定在底部不参与滚动。 */
-  var hasScrollWrap = variant === 'menu' && menuMaxHeight != null;
+  var hasScrollWrap = variant === 'menu' && menuMaxHeight !== undefined && menuMaxHeight !== null;
 
   /* 渲染单个菜单项（menu variant）——提取为独立函数以便扁平/分组共用。 */
   var renderMenuItem = function renderMenuItem(skill, index) {
-    var active = value === skill.id;
     var highlighted = currentIndex === index;
-    var disabled = !!skill.disabled && !active;
+    var disabled = !!skill.disabled;
     return /*#__PURE__*/React.createElement(HoverFill, {
       key: skill.id,
       "data-odn-skill-slot-item-wrap": true,
       bgClassName: "odn-skill-slot-item-bg",
-      disabled: active || disabled,
+      disabled: disabled,
       onMouseEnter: function onMouseEnter() {
         if (disabled) return;
         if (isControlled) {
@@ -205,7 +262,6 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
         itemRefs.current[index] = el;
       },
       "data-odn-skill-slot-item": true,
-      "data-odn-skill-slot-item-active": active || undefined,
       "data-odn-skill-slot-item-highlighted": highlighted || undefined,
       "data-odn-skill-slot-item-disabled": disabled || undefined,
       role: "option",
@@ -223,9 +279,9 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
       "data-odn-skill-slot-item-content": true
     }, /*#__PURE__*/React.createElement("span", {
       "data-odn-skill-slot-item-label": true
-    }, skill.label), skill.description && /*#__PURE__*/React.createElement("span", {
-      "data-odn-skill-slot-item-desc": true
-    }, skill.description))));
+    }, skill.label), skill.description ? /*#__PURE__*/React.createElement(SkillDescPopover, {
+      description: skill.description
+    }) : null)));
   };
 
   /* 渲染底部"技能管理"按钮（仅 menu 变体 + 提供 onManageSkills 时。不参与键盘导航）。 */
@@ -246,83 +302,108 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
       onClick: onManageSkills
     }, skillManageFooter !== null && skillManageFooter !== void 0 ? skillManageFooter : defaultFooter));
   };
+  var renderCardItem = function renderCardItem(skill) {
+    var disabled = !!skill.disabled;
+    return /*#__PURE__*/React.createElement("button", {
+      key: skill.id,
+      type: "button",
+      "data-odn-skill-slot-item": true,
+      "data-odn-skill-slot-item-disabled": disabled || undefined,
+      disabled: disabled,
+      "aria-disabled": disabled || undefined,
+      onClick: function onClick() {
+        return onSelect === null || onSelect === void 0 ? void 0 : onSelect(skill);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-slot-card-header": true
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-slot-item-icon": true
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: skill.icon,
+      size: 16
+    })), /*#__PURE__*/React.createElement("span", {
+      "data-odn-skill-slot-item-label": true
+    }, skill.label)), skill.description ? /*#__PURE__*/React.createElement(SkillDescPopover, {
+      description: skill.description
+    }) : null);
+  };
+  var renderBarItem = function renderBarItem(skill) {
+    var disabled = !!skill.disabled;
+    var barButton = /*#__PURE__*/React.createElement("button", {
+      key: skill.id,
+      type: "button",
+      "data-odn-skill-slot-item": true,
+      "data-odn-skill-slot-item-disabled": disabled || undefined,
+      disabled: disabled,
+      "aria-disabled": disabled || undefined,
+      onClick: function onClick() {
+        return onSelect === null || onSelect === void 0 ? void 0 : onSelect(skill);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: skill.icon,
+      size: 14
+    }), skill.label);
+
+    /* bar 无行内描述：整颗 chip hover 0.5s 后向上 Popover 出全文 */
+    if (skill.description) {
+      return /*#__PURE__*/React.createElement(Popover, {
+        key: skill.id,
+        placement: "top",
+        mouseEnterDelay: 0.5,
+        popup: /*#__PURE__*/React.createElement("span", {
+          "data-odn-skill-slot-desc-full": true
+        }, skill.description)
+      }, barButton);
+    }
+    return barButton;
+  };
 
-  /* 分组模式下渲染 menu 列表（带分组标题）。 */
-  var renderMenuGroups = function renderMenuGroups() {
+  /* 分组渲染：是否画标题由 showGroupTitles 决定。
+   * menu 项必须与标题/分割线同级挂在 list 根下——HoverFill 跨项共享背景要求同一
+   * parentNode；若再包一层 group / group-items，跨组必闪。bar/card 不用 HoverFill，
+   * 仍用 group 壳承接 flex/grid。 */
+  var renderGroups = function renderGroups() {
     var flatIndex = 0;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group) {
+    if (variant === 'menu') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group, groupIdx) {
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: group.groupName || "_group_".concat(groupIdx)
+        }, groupIdx > 0 ? /*#__PURE__*/React.createElement("div", {
+          "data-odn-skill-slot-divider": true,
+          "data-odn-skill-slot-group-divider": true
+        }) : null, showGroupTitles && group.groupName ? /*#__PURE__*/React.createElement("div", {
+          "data-odn-skill-slot-group-header": true
+        }, group.groupName) : null, group.skills.map(function (skill) {
+          return renderMenuItem(skill, flatIndex++);
+        }));
+      }));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group, groupIdx) {
       return /*#__PURE__*/React.createElement("div", {
-        key: group.groupName || "_group_".concat(flatIndex)
-      }, group.groupName && /*#__PURE__*/React.createElement("div", {
+        key: group.groupName || "_group_".concat(groupIdx),
+        "data-odn-skill-slot-group": true
+      }, showGroupTitles && group.groupName ? /*#__PURE__*/React.createElement("div", {
         "data-odn-skill-slot-group-header": true
-      }, group.groupName), group.skills.map(function (skill) {
-        var idx = flatIndex++;
-        return renderMenuItem(skill, idx);
-      }));
+      }, group.groupName) : null, /*#__PURE__*/React.createElement("div", {
+        "data-odn-skill-slot-group-items": true
+      }, group.skills.map(function (skill) {
+        return variant === 'card' ? renderCardItem(skill) : renderBarItem(skill);
+      })));
     }));
   };
 
   /* 扁平模式下渲染所有项（menu / bar / card）。 */
   var renderFlatItems = function renderFlatItems() {
     return skills.map(function (skill, index) {
-      var active = value === skill.id;
-      var highlighted = currentIndex === index;
-      var disabled = !!skill.disabled && !active;
-      if (variant === 'card') {
-        return /*#__PURE__*/React.createElement("button", {
-          key: skill.id,
-          type: "button",
-          "data-odn-skill-slot-item": true,
-          "data-odn-skill-slot-item-active": active || undefined,
-          "data-odn-skill-slot-item-disabled": disabled || undefined,
-          disabled: disabled,
-          "aria-disabled": disabled || undefined,
-          onClick: function onClick() {
-            return onSelect === null || onSelect === void 0 ? void 0 : onSelect(skill);
-          }
-        }, /*#__PURE__*/React.createElement("span", {
-          "data-odn-skill-slot-card-header": true
-        }, /*#__PURE__*/React.createElement("span", {
-          "data-odn-skill-slot-item-icon": true
-        }, /*#__PURE__*/React.createElement(Icon, {
-          name: skill.icon,
-          size: 16
-        })), /*#__PURE__*/React.createElement("span", {
-          "data-odn-skill-slot-item-label": true
-        }, skill.label)), skill.description && /*#__PURE__*/React.createElement("span", {
-          "data-odn-skill-slot-item-desc": true
-        }, skill.description));
-      }
-      if (variant === 'menu') {
-        return renderMenuItem(skill, index);
-      }
-      var barButton = /*#__PURE__*/React.createElement("button", {
-        key: skill.id,
-        type: "button",
-        "data-odn-skill-slot-item": true,
-        "data-odn-skill-slot-item-active": active || undefined,
-        "data-odn-skill-slot-item-disabled": disabled || undefined,
-        disabled: disabled,
-        "aria-disabled": disabled || undefined,
-        onClick: function onClick() {
-          return onSelect === null || onSelect === void 0 ? void 0 : onSelect(skill);
-        }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: skill.icon,
-        size: 14
-      }), skill.label);
-      if (skill.description) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
-          key: skill.id,
-          popup: skill.description,
-          placement: "top",
-          offset: 6
-        }, barButton);
-      }
-      return barButton;
+      if (variant === 'card') return renderCardItem(skill);
+      if (variant === 'menu') return renderMenuItem(skill, index);
+      return renderBarItem(skill);
     });
   };
-  var listBody = variant === 'menu' && skillGroups ? renderMenuGroups() : renderFlatItems();
+
+  /* 有 skillGroups：始终按组遍历（保序）；无标题时仍走分组 DOM，仅不渲染 header，
+   * bar/card 用 group-items 承接原有 flex/grid，避免拍平后丢组边界。 */
+  var listBody = skillGroups ? renderGroups() : renderFlatItems();
   var manageFooter = renderManageFooter();
 
   /* 共享的属性容器：menu variant 的 aria / keyboard / 交互属性 */
@@ -335,13 +416,19 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
     onFocus: handleMenuFocus,
     onBlur: handleMenuBlur
   } : {};
+  var rootStyle = _objectSpread(_objectSpread(_objectSpread({}, variant === 'menu' && menuWidth !== undefined && menuWidth !== null ? {
+    width: menuWidth
+  } : {}), variant !== 'menu' && itemWidth !== undefined && itemWidth !== null ? {
+    '--odn-skill-slot-item-width': "".concat(itemWidth, "px")
+  } : {}), style);
   if (hasScrollWrap) {
     /* 滚动仅包裹技能列表，footer 固定在底部不参与滚动 */
     return /*#__PURE__*/React.createElement("div", _extends({
       "data-odn-skill-slot": true,
       "data-odn-skill-slot-variant": variant,
+      "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
       className: className,
-      style: style
+      style: rootStyle
     }, listAttrs), /*#__PURE__*/React.createElement("div", {
       "data-odn-skill-slot-scroll-wrap": true,
       style: {
@@ -353,10 +440,9 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-odn-skill-slot": true,
     "data-odn-skill-slot-variant": variant,
+    "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
     className: className,
-    style: _objectSpread(_objectSpread({}, variant !== 'menu' && itemWidth != null ? {
-      '--odn-skill-slot-item-width': "".concat(itemWidth, "px")
-    } : {}), style)
+    style: rootStyle
   }, listAttrs), listBody, manageFooter);
 });
 SkillSlot.displayName = 'SkillSlot';

package/dist/skill-slot/style/index.css

@@ -74,7 +74,7 @@
    * 之外的，但布局上 button 和 HoverFill 占同位置；button 给个 background 不会
    * 跟 HoverFill 视觉打架，但 ::before 写法以后想加扩散动画更灵活。 */
 }
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item][data-odn-skill-slot-item-highlighted]:not(:hover):not([data-odn-skill-slot-item-active])::before {
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item][data-odn-skill-slot-item-highlighted]:not(:hover)::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -84,10 +84,6 @@
   pointer-events: none;
   z-index: -1;
 }
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item][data-odn-skill-slot-item-active] {
-  color: var(--odn-color-brand-6);
-  background: color-mix(in srgb, var(--odn-color-brand-6) 10%, transparent);
-}
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-label] {
   font-size: 13px;
@@ -96,6 +92,14 @@
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-desc] {
   font-size: 12px;
+  line-height: 20px;
+  color: var(--odn-color-black-9);
+  /* 描述固定最多 2 行，不可配置 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
 }
 
 /* ---- menu 分组标题 ---- */
@@ -111,6 +115,45 @@
   pointer-events: none;
 }
 
+/* 无组标题时：group 壳不参与布局，子项仍挂在根 flex/grid 上（与拍平一致） */
+[data-odn-skill-slot]:not([data-odn-skill-slot-grouped]) [data-odn-skill-slot-group],
+[data-odn-skill-slot]:not([data-odn-skill-slot-grouped]) [data-odn-skill-slot-group-items] {
+  display: contents;
+}
+
+/* 有组标题：根改为纵向堆叠组；组内再承接原 bar flex / card grid */
+[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=bar],
+[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=card] {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 12px;
+  grid-template-columns: none;
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=bar] [data-odn-skill-slot-group-items] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-grouped][data-odn-skill-slot-variant=card] [data-odn-skill-slot-group-items] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=bar] [data-odn-skill-slot-group-header],
+[data-odn-skill-slot][data-odn-skill-slot-variant=card] [data-odn-skill-slot-group-header] {
+  padding: 0 2px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--odn-color-black-8);
+  line-height: 20px;
+  user-select: none;
+  pointer-events: none;
+}
+
 /* ---- menu 底部分隔线 ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-divider] {
   margin: 4px 0;
@@ -118,6 +161,11 @@
   background: var(--odn-color-black-5);
 }
 
+/* 组间分割线：略收紧上下留白，避免与组标题叠出过大空隙 */
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-group-divider] {
+  margin: 4px 0 2px;
+}
+
 /* ---- menu 底部管理按钮 ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn] {
   display: flex;
@@ -174,11 +222,6 @@
   background: var(--odn-color-black-3);
   color: var(--odn-color-black-12);
 }
-[data-odn-skill-slot][data-odn-skill-slot-variant=bar] [data-odn-skill-slot-item][data-odn-skill-slot-item-active] {
-  border-color: var(--odn-color-brand-6);
-  background: color-mix(in srgb, var(--odn-color-brand-6) 8%, transparent);
-  color: var(--odn-color-brand-6);
-}
 
 /* ---- variant: card ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=card] {
@@ -206,13 +249,6 @@
   background: var(--odn-color-white);
   box-shadow: var(--odn-shadow-1);
 }
-[data-odn-skill-slot][data-odn-skill-slot-variant=card] [data-odn-skill-slot-item][data-odn-skill-slot-item-active] {
-  background: color-mix(in srgb, var(--odn-color-cyan-5) 8%, var(--odn-color-white));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--odn-color-cyan-5) 16%, transparent);
-}
-[data-odn-skill-slot][data-odn-skill-slot-variant=card] [data-odn-skill-slot-item][data-odn-skill-slot-item-active] [data-odn-skill-slot-item-label] {
-  color: var(--odn-color-brand-6);
-}
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=card] [data-odn-skill-slot-card-header] {
   display: inline-flex;
@@ -242,9 +278,13 @@
   font-weight: 400;
   color: var(--odn-color-black-9);
   line-height: 20px;
-  white-space: nowrap;
+  /* 描述固定最多 2 行，不可配置（原单行 ellipsis 改为 2 行 clamp） */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
+  white-space: normal;
 }
 
 [data-odn-skill-slot-item-content] {
@@ -264,6 +304,17 @@
 
 [data-odn-skill-slot-item-desc] {
   font-size: 12px;
-  color: var(--odn-color-black-8);
+  color: var(--odn-color-black-9);
   line-height: 20px;
+}
+
+/* 描述全文 Popover 内容 */
+[data-odn-skill-slot-desc-full] {
+  display: inline-block;
+  max-width: 280px;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--odn-color-black-9);
+  word-break: break-word;
+  white-space: pre-wrap;
 }

package/dist/tooltip/index.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["as", "arrowed", "autoPlacements", "offset", "popupStyle", "popupClassName", "mouseEnterDelay", "mouseLeaveDelay", "flip", "matchWidth", "portal", "shift", "children", "placement"],
+var _excluded = ["as", "arrowed", "autoPlacements", "offset", "popupStyle", "popupClassName", "mouseEnterDelay", "mouseLeaveDelay", "flip", "matchWidth", "portal", "shift", "children", "placement", "visible", "transitionDuration"],
   _excluded2 = ["onMouseEnter", "onMouseLeave"];
 import React, { useEffect, useRef, useState } from 'react';
 import PopBase from "../pop-base";
@@ -31,6 +31,8 @@ var TooltipGroup = function TooltipGroup(props) {
     children = props.children,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'top' : _props$placement,
+    visibleProp = props.visible,
+    transitionDuration = props.transitionDuration,
     otherProps = _objectWithoutProperties(props, _excluded);
   var Tag = as;
   var tooltipInfos = React.Children.toArray(children).map(function (child) {
@@ -61,7 +63,20 @@ var TooltipGroup = function TooltipGroup(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     offsetY = _useState8[0],
     setOffsetY = _useState8[1];
+
+  /* 受控 visible=false：强制收起（如 Composer 技能菜单展开时禁用入口 tooltip） */
+  useEffect(function () {
+    if (visibleProp === false) {
+      clearTimeout(hoverTimer.current);
+      setVisible(false);
+    }
+  }, [visibleProp]);
+  var effectiveVisible = visibleProp === false ? false : visible;
   var handleMouseEnter = function handleMouseEnter(e, index) {
+    var _tooltipInfos$index;
+    if (visibleProp === false) return;
+    var popup = (_tooltipInfos$index = tooltipInfos[index]) === null || _tooltipInfos$index === void 0 ? void 0 : _tooltipInfos$index.popup;
+    if (popup === false || popup === null || popup === undefined) return;
     clearTimeout(hoverTimer.current);
     var currentTarget = e.currentTarget;
     hoverTimer.current = window.setTimeout(function () {
@@ -83,25 +98,25 @@ var TooltipGroup = function TooltipGroup(props) {
         targetTop = _currentTarget$getBou.top,
         targetWidth = _currentTarget$getBou.width,
         targetHeight = _currentTarget$getBou.height;
-      var offsetX = 0;
-      var offsetY = 0;
+      var nextOffsetX = 0;
+      var nextOffsetY = 0;
       if (placement.startsWith('top') || placement.startsWith('bottom')) {
-        offsetX = targetLeft - left - width / 2 + targetWidth / 2;
+        nextOffsetX = targetLeft - left - width / 2 + targetWidth / 2;
         if (placement.startsWith('top')) {
-          offsetY = targetTop - top;
+          nextOffsetY = targetTop - top;
         } else {
-          offsetY = targetTop - top - height + targetHeight;
+          nextOffsetY = targetTop - top - height + targetHeight;
         }
       } else if (placement.startsWith('left') || placement.startsWith('right')) {
-        offsetY = targetTop - top - height / 2 + targetHeight / 2;
+        nextOffsetY = targetTop - top - height / 2 + targetHeight / 2;
         if (placement.startsWith('left')) {
-          offsetX = targetLeft - left;
+          nextOffsetX = targetLeft - left;
         } else {
-          offsetX = targetLeft - left - width + targetWidth;
+          nextOffsetX = targetLeft - left - width + targetWidth;
         }
       }
-      setOffsetX(offsetX);
-      setOffsetY(offsetY);
+      setOffsetX(nextOffsetX);
+      setOffsetY(nextOffsetY);
     }, visible ? 0 : mouseEnterDelay * 1000);
   };
   var handleMouseLeave = function handleMouseLeave() {
@@ -135,9 +150,11 @@ var TooltipGroup = function TooltipGroup(props) {
     portal: portal,
     shift: shift,
     placement: placement,
-    visible: visible,
+    visible: effectiveVisible
+    /* 受控强制收起时硬切，避免与技能面板等叠层时残留淡出 */,
+    transitionDuration: visibleProp === false ? 0 : transitionDuration,
     popupStyle: _objectSpread(_objectSpread({}, popupStyle), {}, {
-      transform: "translate(".concat(offsetX, "px, ").concat(offsetY, "px) scale(").concat(visible ? 1 : 0.8, ")")
+      transform: "translate(".concat(offsetX, "px, ").concat(offsetY, "px) scale(").concat(effectiveVisible ? 1 : 0.8, ")")
     })
   }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
     ref: tagRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",