one-design-next 0.0.35 → 0.0.37

package/dist/_genui-types.d.ts

@@ -143,6 +143,13 @@ export interface SkillItem {
      */
     disabled?: boolean;
 }
+/** 技能分组，用于在 SkillSlot menu 变体中按组名分隔展示。 */
+export interface SkillGroup {
+    /** 分组名称（可空，空时不渲染标题） */
+    groupName: string;
+    /** 组内技能列表 */
+    skills: SkillItem[];
+}
 /**
  * Composer 发送时的有序内容 IR（与编辑器内出现顺序一致）。
  *

package/dist/_genui-types.js

@@ -19,6 +19,8 @@
  * 发送时经 `rawValueToSegments` 转为 `ComposerSegment` 的 invocation / mention。
  */
 
+/** 技能分组，用于在 SkillSlot menu 变体中按组名分隔展示。 */
+
 /**
  * Composer 发送时的有序内容 IR（与编辑器内出现顺序一致）。
  *

package/dist/composer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Attachment, ComposerSegment, SkillItem, SendMeta } from '../_genui-types';
+import type { Attachment, ComposerSegment, SkillGroup, SkillItem, SendMeta } from '../_genui-types';
 import type { ChipData } from '../_genui-types';
 import type { ComposerParamPanelContext } from './param-panel';
 import './style';
@@ -104,6 +104,15 @@ export interface ComposerProps {
     toolsLabeled?: boolean;
     /** 技能列表；当 tools 包含 'skill' 时生效 */
     skills?: SkillItem[];
+    /**
+     * 分组技能列表（优先级高于 `skills`）。
+     * menu 变体下按分组名分隔展示，组间带标题。
+     */
+    skillGroups?: SkillGroup[];
+    /**
+     * 技能管理回调。提供后会在 skill 弹窗底部渲染「管理技能」按钮。
+     */
+    onManageSkills?: () => void;
     /**
      * skill 弹窗列表的最大高度（px）。超出此高度后出现滚动条。
      * 不传则不限高（适合 skill 较少的场景）。

package/dist/composer/index.js

@@ -95,6 +95,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     _ref$toolsLabeled = _ref.toolsLabeled,
     toolsLabeled = _ref$toolsLabeled === void 0 ? true : _ref$toolsLabeled,
     skills = _ref.skills,
+    skillGroups = _ref.skillGroups,
+    onManageSkills = _ref.onManageSkills,
     skillMenuMaxHeight = _ref.skillMenuMaxHeight,
     skillMenuWidth = _ref.skillMenuWidth,
     _ref$submitType = _ref.submitType,
@@ -545,20 +547,41 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     });
   }, [skills, triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query]);
 
-  /* trigger 浮层渲染条件：editor 处于 `/` 触发态 + 业务方传了 skills。
+  /* grouped 版本的 trigger query 筛选：按组分别过滤，保留非空组。 */
+  var filteredSkillGroups = useMemo(function () {
+    var _triggerInfo$query2;
+    if (!skillGroups) return undefined;
+    var q = triggerInfo === null || triggerInfo === void 0 || (_triggerInfo$query2 = triggerInfo.query) === null || _triggerInfo$query2 === void 0 ? void 0 : _triggerInfo$query2.trim().toLowerCase();
+    if (!q) return skillGroups;
+    return skillGroups.map(function (g) {
+      return {
+        groupName: g.groupName,
+        skills: g.skills.filter(function (s) {
+          return s.label.toLowerCase().includes(q);
+        })
+      };
+    }).filter(function (g) {
+      return g.skills.length > 0;
+    });
+  }, [skillGroups, triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query]);
+
+  /* trigger 浮层渲染条件：editor 处于 `/` 触发态 + 业务方传了 skills 或 skillGroups。
    * `@` 触发本轮不接（mention 数据源待业务接入），onTriggerChange 拿到也不弹。 */
-  var triggerMenuVisible = !!(triggerInfo && triggerInfo.trigger === '/' && skills && skills.length > 0);
+  var hasSkills = !!(skills && skills.length > 0) || !!(skillGroups && skillGroups.length > 0);
+  var triggerMenuVisible = !!(triggerInfo && triggerInfo.trigger === '/' && hasSkills);
 
   /* query 变化或浮层关闭 → 高亮项重置到「最上方的可用项」（跳过 disabled）。
    * 用 query 而不是 triggerInfo 整体当依赖：rect 变化（光标移位）不应该 reset。 */
   useEffect(function () {
-    var _ref3;
-    var list = (_ref3 = filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : skills) !== null && _ref3 !== void 0 ? _ref3 : [];
+    var _ref3, _ref4, _ref5;
+    var list = (_ref3 = (_ref4 = filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : skills) !== null && _ref4 !== void 0 ? _ref4 : (_ref5 = filteredSkillGroups !== null && filteredSkillGroups !== void 0 ? filteredSkillGroups : skillGroups) === null || _ref5 === void 0 ? void 0 : _ref5.flatMap(function (g) {
+      return g.skills;
+    })) !== null && _ref3 !== void 0 ? _ref3 : [];
     var first = list.findIndex(function (s) {
       return !s.disabled;
     });
     setTriggerActiveIndex(first === -1 ? 0 : first);
-  }, [filteredSkills, skills, triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query, triggerInfo == null]);
+  }, [filteredSkills, filteredSkillGroups, skills, skillGroups, triggerInfo === null || triggerInfo === void 0 ? void 0 : triggerInfo.query, triggerInfo == null]);
 
   /* editor 在 trigger 激活时把 ↑↓Enter Esc Tab 丢过来。返回 true = editor 别管了。
    * - ↑↓ 改高亮 index（夹在 [0, max] 内）
@@ -582,9 +605,11 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       return true;
     }
     if (e.key === 'Enter' && !e.shiftKey || e.key === 'Tab') {
-      var _triggerSkillSlotRef$3, _triggerSkillSlotRef$4;
+      var _ref6, _triggerSkillSlotRef$3, _triggerSkillSlotRef$4;
       e.preventDefault();
-      var _skill = (_triggerSkillSlotRef$3 = (_triggerSkillSlotRef$4 = triggerSkillSlotRef.current) === null || _triggerSkillSlotRef$4 === void 0 ? void 0 : _triggerSkillSlotRef$4.getActiveSkill()) !== null && _triggerSkillSlotRef$3 !== void 0 ? _triggerSkillSlotRef$3 : filteredSkills === null || filteredSkills === void 0 ? void 0 : filteredSkills[triggerActiveIndex];
+      var _skill = (_ref6 = (_triggerSkillSlotRef$3 = (_triggerSkillSlotRef$4 = triggerSkillSlotRef.current) === null || _triggerSkillSlotRef$4 === void 0 ? void 0 : _triggerSkillSlotRef$4.getActiveSkill()) !== null && _triggerSkillSlotRef$3 !== void 0 ? _triggerSkillSlotRef$3 : filteredSkills === null || filteredSkills === void 0 ? void 0 : filteredSkills[triggerActiveIndex]) !== null && _ref6 !== void 0 ? _ref6 : filteredSkillGroups === null || filteredSkillGroups === void 0 ? void 0 : filteredSkillGroups.flatMap(function (g) {
+        return g.skills;
+      })[triggerActiveIndex];
       if (_skill) handleSelectSkill(_skill, 'trigger');
       return true;
     }
@@ -596,7 +621,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       return true;
     }
     return false;
-  }, [filteredSkills, handleSelectSkill, triggerActiveIndex, triggerMenuVisible]);
+  }, [filteredSkills, filteredSkillGroups, handleSelectSkill, triggerActiveIndex, triggerMenuVisible]);
 
   /* trigger 浮 anchor：跟随 caret 的 0×0 隐形元素，给 Popover 当 children。
    * Popover 需要 DOM children 当 reference，没有"虚拟 anchor" API，只能这么搞。 */
@@ -688,7 +713,10 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     }), effectiveLabeled && /*#__PURE__*/React.createElement("span", null, "\u8054\u7F51")));
   };
   var renderSkillBtn = function renderSkillBtn() {
-    if (!skills || skills.length === 0) return null;
+    var hasAnySkills = skills && skills.length > 0 || skillGroups && skillGroups.some(function (g) {
+      return g.skills.length > 0;
+    });
+    if (!hasAnySkills) return null;
     return /*#__PURE__*/React.createElement(Popover, {
       key: "skill",
       trigger: "click",
@@ -703,14 +731,16 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       popupClassName: "odn-composer-skill-popup",
       popup: /*#__PURE__*/React.createElement(SkillSlot, {
         variant: "menu",
-        skills: skills,
+        skills: skillGroups ? undefined : skills,
+        skillGroups: skillGroups,
         menuMaxHeight: skillMenuMaxHeight,
         style: {
           width: skillMenuWidth !== null && skillMenuWidth !== void 0 ? skillMenuWidth : 260
         },
         onSelect: function onSelect(s) {
           return handleSelectSkill(s, 'btn');
-        }
+        },
+        onManageSkills: onManageSkills
       })
     }, /*#__PURE__*/React.createElement(HoverFill, {
       "data-odn-composer-tool-btn-wrap": true,
@@ -731,7 +761,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       "aria-disabled": disabled || undefined,
       title: effectiveLabeled ? undefined : '技能'
     }, /*#__PURE__*/React.createElement(Icon, {
-      name: "puzzle",
+      name: "command",
       size: 16
     }), effectiveLabeled && /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD"))));
   };
@@ -895,7 +925,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
 
   /* trigger 浮层：anchor 是 fixed 定位的 0×0 隐形 div，跟随 caret 处的 trigger rect。
    * 共用 SkillSlot 渲染，过滤后的列表为空时仍显示 menu（empty 视觉由 SkillSlot 自己处理）。 */
-  var triggerMenu = skills && skills.length > 0 ? /*#__PURE__*/React.createElement(Popover, {
+  var triggerMenu = hasSkills ? /*#__PURE__*/React.createElement(Popover, {
     trigger: "click",
     arrowed: false,
     placement: "topLeft",
@@ -912,7 +942,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     popup: /*#__PURE__*/React.createElement(SkillSlot, {
       ref: triggerSkillSlotRef,
       variant: "menu",
-      skills: filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : [],
+      skills: skillGroups ? undefined : filteredSkills !== null && filteredSkills !== void 0 ? filteredSkills : [],
+      skillGroups: filteredSkillGroups,
       activeIndex: triggerActiveIndex,
       onActiveIndexChange: setTriggerActiveIndex,
       menuMaxHeight: skillMenuMaxHeight,
@@ -921,7 +952,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       },
       onSelect: function onSelect(s) {
         return handleSelectSkill(s, 'trigger');
-      }
+      },
+      onManageSkills: onManageSkills
     })
   }, /*#__PURE__*/React.createElement("div", {
     ref: triggerAnchorRef,

package/dist/index.d.ts

@@ -76,6 +76,6 @@ export { default as StreamPulse, type StreamPulseProps } from './stream-pulse';
 export { default as Suggestions, type SuggestionsProps } from './suggestions';
 export { default as UserBubble, type UserBubbleProps } from './user-bubble';
 export { default as Welcome, type WelcomeProps } from './welcome';
-export type { ToolCall, ToolStatus, Source, Attachment, PreviewTarget, PreviewTab, SendMeta, ComposerSegment, ComposerTextSegment, ComposerInvocationSegment, ComposerMentionSegment, TextData, InvocationData, MentionData, InlineRefState, SkillItem, AgentEvent, Conversation, MessageSnapshot, ChatMessage } from './_genui-types';
+export type { ToolCall, ToolStatus, Source, Attachment, PreviewTarget, PreviewTab, SendMeta, ComposerSegment, ComposerTextSegment, ComposerInvocationSegment, ComposerMentionSegment, TextData, InvocationData, MentionData, InlineRefState, SkillItem, SkillGroup, AgentEvent, Conversation, MessageSnapshot, ChatMessage } from './_genui-types';
 export { ComposerSegmentType } from './_genui-types';
 export { rawValueToSegments, segmentsToReadableText, segmentsHasContent, isTextSegment, isInvocationSegment, isMentionSegment, type SegmentsToReadableTextOptions, } from './composer/segments';

package/dist/skill-slot/index.d.ts

@@ -1,12 +1,25 @@
 /// <reference types="react" />
-import type { SkillItem } from '../_genui-types';
+import type { SkillGroup, SkillItem } from '../_genui-types';
 import './style';
 export interface SkillSlotProps {
-    skills: SkillItem[];
+    /**
+     * 技能列表（扁平结构）。
+     * 当 `skillGroups` 未提供时生效；提供 `skillGroups` 则忽略此项。
+     */
+    skills?: SkillItem[];
+    /**
+     * 分组技能列表。menu 变体下按组名分隔展示，组间带标题。
+     * 优先级高于 `skills`。
+     */
+    skillGroups?: SkillGroup[];
     variant?: 'menu' | 'bar' | 'card';
     /** 选中态（业务"已选"语义）。命中的 item 视觉上 active + disabled 互斥。 */
     value?: string | null;
     onSelect?: (skill: SkillItem) => void;
+    /**
+     * 技能管理回调。提供后 menu 变体会在列表底部渲染「管理技能」按钮。
+     */
+    onManageSkills?: () => void;
     /**
      * 受控的"键盘高亮"项 index（区别于 `value` 的"业务选中"语义）。仅 menu 变体响应。
      *

package/dist/skill-slot/index.js

@@ -1,19 +1,17 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import Tooltip from "../tooltip";
@@ -26,17 +24,26 @@ var skillSlotIdSeq = 0;
 /** 命令式句柄：供"焦点不在 menu 上"的宿主（如 composer 的 contenteditable）转发键盘。 */
 
 export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
-  var skills = _ref.skills,
+  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,
     activeIndex = _ref.activeIndex,
     onActiveIndexChange = _ref.onActiveIndexChange,
     menuMaxHeight = _ref.menuMaxHeight,
     itemWidth = _ref.itemWidth,
     className = _ref.className,
     style = _ref.style;
+  /* 优先使用 skillGroups，否则回退到 skills；两者都未提供则为空数组。 */
+  var skills = useMemo(function () {
+    if (skillGroups) return skillGroups.flatMap(function (g) {
+      return g.skills;
+    });
+    return skillsProp !== null && skillsProp !== void 0 ? skillsProp : [];
+  }, [skillGroups, skillsProp]);
   /* menu 变体：HoverFill 完全只管鼠标交互（命令式状态机，不变）；键盘 ↑↓
    * 走独立的 CSS [data-odn-skill-slot-item-highlighted] 视觉层。
    *
@@ -176,99 +183,133 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
   };
   if (skills.length === 0) return null;
 
-  /* menu variant 有 scroll-wrap 时，width 挂在外层 scroll-wrap 上；
-   * 没有 scroll-wrap 时 width 留在 list div 上。
-   * 这里把 style 拆成两部分：widthStyle 单独提取，listStyle 是其余属性。 */
+  /* menu variant 有 scroll-wrap 时，滚动仅包裹技能列表，footer 固定在底部不参与滚动。 */
   var hasScrollWrap = variant === 'menu' && menuMaxHeight != null;
-  var _ref2 = style !== null && style !== void 0 ? style : {},
-    styleWidth = _ref2.width,
-    listStyleRest = _objectWithoutProperties(_ref2, _excluded);
-  var widthStyle = styleWidth != null ? {
-    width: styleWidth
-  } : {};
-  var listContent = /*#__PURE__*/React.createElement("div", {
-    "data-odn-skill-slot": true,
-    "data-odn-skill-slot-variant": variant,
-    id: variant === 'menu' ? listboxId : undefined,
-    role: variant === 'menu' ? 'listbox' : undefined,
-    tabIndex: variant === 'menu' ? 0 : undefined,
-    "aria-activedescendant": variant === 'menu' && currentIndex >= 0 ? "".concat(listboxId, "-opt-").concat(currentIndex) : undefined,
-    onKeyDown: variant === 'menu' ? handleMenuKeyDown : undefined,
-    onFocus: variant === 'menu' ? handleMenuFocus : undefined,
-    onBlur: variant === 'menu' ? handleMenuBlur : undefined,
-    className: className,
-    style: _objectSpread(_objectSpread({}, hasScrollWrap ? listStyleRest : style), variant !== 'menu' && itemWidth != null ? {
-      '--odn-skill-slot-item-width': "".concat(itemWidth, "px")
-    } : {})
-  }, skills.map(function (skill, index) {
+
+  /* 渲染单个菜单项（menu variant）——提取为独立函数以便扁平/分组共用。 */
+  var renderMenuItem = function renderMenuItem(skill, index) {
     var active = value === skill.id;
     var highlighted = currentIndex === index;
-    /* disabled 与 active 互斥时，active 优先（已选中不应再渲染禁用样态）。
-     * onSelect 通过 button[disabled] 自然短路；HoverFill 也走 disabled 关掉 hover 反馈。 */
     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);
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: skill.id,
+      "data-odn-skill-slot-item-wrap": true,
+      bgClassName: "odn-skill-slot-item-bg",
+      disabled: active || disabled,
+      onMouseEnter: function onMouseEnter() {
+        if (disabled) return;
+        if (isControlled) {
+          if (onActiveIndexChange && activeIndex !== index) onActiveIndexChange(index);
+        } else if (internalActiveIndex !== index) {
+          setInternalActiveIndex(index);
         }
-      }, /*#__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') {
-      /* HoverFill 包 button：鼠标 hover 视觉由 HoverFill 命令式控制；
-       * 键盘高亮走 button 上的 data-odn-skill-slot-item-highlighted ::before 层。
-       * 两层互斥（hover 时不画 ::before），颜色同值，视觉一致。 */
-      return /*#__PURE__*/React.createElement(HoverFill, {
-        key: skill.id,
-        "data-odn-skill-slot-item-wrap": true,
-        bgClassName: "odn-skill-slot-item-bg",
-        disabled: active || disabled,
-        onMouseEnter: function onMouseEnter() {
-          /* 鼠标进入：把高亮 index 同步过来，让鼠标/键盘两条轨道始终指向同一项，
-           * 避免鼠标移开后键盘 active 还指向另一项造成"鬼影高亮"。
-           * 受控走 onActiveIndexChange，非受控更新内部 state。 */
-          if (disabled) return;
-          if (isControlled) {
-            if (onActiveIndexChange && activeIndex !== index) onActiveIndexChange(index);
-          } else if (internalActiveIndex !== index) {
-            setInternalActiveIndex(index);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      id: "".concat(listboxId, "-opt-").concat(index),
+      ref: function ref(el) {
+        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",
+      "aria-selected": highlighted,
+      tabIndex: -1,
+      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
+    }), /*#__PURE__*/React.createElement("span", {
+      "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))));
+  };
+
+  /* 渲染底部"技能管理"按钮（仅 menu 变体 + 提供 onManageSkills 时。不参与键盘导航）。 */
+  var renderManageFooter = function renderManageFooter() {
+    if (variant !== 'menu' || !onManageSkills) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      "data-odn-skill-slot-divider": true
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "data-odn-skill-slot-manage-btn": true,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      onClick: onManageSkills
+    }, /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD\u7BA1\u7406"), /*#__PURE__*/React.createElement(Icon, {
+      name: "right",
+      size: 12
+    })));
+  };
+
+  /* 分组模式下渲染 menu 列表（带分组标题）。 */
+  var renderMenuGroups = function renderMenuGroups() {
+    var flatIndex = 0;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: group.groupName || "_group_".concat(flatIndex)
+      }, 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);
+      }));
+    }));
+  };
+
+  /* 扁平模式下渲染所有项（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);
           }
-        }
-        /* 阻止 contenteditable 在 mousedown 时 blur，否则点 menu item 的瞬间
-         * editor 失焦 → trigger probe / chip 插入 selection 拿不到位置。 */,
-        onMouseDown: function onMouseDown(e) {
-          return e.preventDefault();
-        }
-      }, /*#__PURE__*/React.createElement("button", {
+        }, /*#__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",
-        id: "".concat(listboxId, "-opt-").concat(index),
-        ref: function ref(el) {
-          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",
-        "aria-selected": highlighted,
-        tabIndex: -1,
         disabled: disabled,
         "aria-disabled": disabled || undefined,
         onClick: function onClick() {
@@ -277,52 +318,54 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
       }, /*#__PURE__*/React.createElement(Icon, {
         name: skill.icon,
         size: 14
-      }), /*#__PURE__*/React.createElement("span", {
-        "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))));
-    }
-    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);
+      }), skill.label);
+      if (skill.description) {
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          key: skill.id,
+          popup: skill.description,
+          placement: "top",
+          offset: 6
+        }, barButton);
       }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: skill.icon,
-      size: 14
-    }), skill.label);
+      return barButton;
+    });
+  };
+  var listBody = variant === 'menu' && skillGroups ? renderMenuGroups() : renderFlatItems();
+  var manageFooter = renderManageFooter();
 
-    /* description 包 Tooltip 给可点击项使用——禁用项 button[disabled] 本身不会触发
-     * hover/focus，Tooltip 自然不弹；保持包裹结构无副作用。 */
-    if (skill.description) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        key: skill.id,
-        popup: skill.description,
-        placement: "top",
-        offset: 6
-      }, barButton);
-    }
-    return barButton;
-  }));
+  /* 共享的属性容器：menu variant 的 aria / keyboard / 交互属性 */
+  var listAttrs = variant === 'menu' ? {
+    id: listboxId,
+    role: 'listbox',
+    tabIndex: 0,
+    'aria-activedescendant': currentIndex >= 0 ? "".concat(listboxId, "-opt-").concat(currentIndex) : undefined,
+    onKeyDown: handleMenuKeyDown,
+    onFocus: handleMenuFocus,
+    onBlur: handleMenuBlur
+  } : {};
   if (hasScrollWrap) {
-    return /*#__PURE__*/React.createElement("div", {
+    /* 滚动仅包裹技能列表，footer 固定在底部不参与滚动 */
+    return /*#__PURE__*/React.createElement("div", _extends({
+      "data-odn-skill-slot": true,
+      "data-odn-skill-slot-variant": variant,
+      className: className,
+      style: style
+    }, listAttrs), /*#__PURE__*/React.createElement("div", {
       "data-odn-skill-slot-scroll-wrap": true,
-      style: _objectSpread({
+      style: {
         maxHeight: menuMaxHeight,
         overflowY: 'auto'
-      }, widthStyle)
-    }, listContent);
+      }
+    }, listBody), manageFooter);
   }
-  return listContent;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-skill-slot": true,
+    "data-odn-skill-slot-variant": variant,
+    className: className,
+    style: _objectSpread(_objectSpread({}, variant !== 'menu' && itemWidth != null ? {
+      '--odn-skill-slot-item-width': "".concat(itemWidth, "px")
+    } : {}), style)
+  }, listAttrs), listBody, manageFooter);
 });
 SkillSlot.displayName = 'SkillSlot';
 export default SkillSlot;

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

@@ -20,16 +20,13 @@
 }
 
 /* ---- menu 滚动包装层 ----
- * max-height 由外部通过 style 传入；overflow-y: auto 由 JS 内联写入。
- * 统一细滚动条样式，并继承 popup 圆角裁剪。 */
+ * max-height / overflow-y: auto 由 JS 内联传入。
+ * 统一细滚动条样式。 */
 [data-odn-skill-slot-scroll-wrap] {
   overflow-y: auto;
+  width: 100%;
   scrollbar-width: thin;
   scrollbar-color: var(--odn-color-border) transparent;
-  /* 内层 list 撑满 scroll-wrap 宽度 */
-}
-[data-odn-skill-slot-scroll-wrap] > [data-odn-skill-slot] {
-  width: 100%;
 }
 
 /* ---- variant: menu ---- */
@@ -101,6 +98,48 @@
   font-size: 12px;
 }
 
+/* ---- menu 分组标题 ---- */
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-group-header] {
+  padding: 6px 12px 2px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--odn-color-black-8);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  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;
+  height: 1px;
+  background: var(--odn-color-black-5);
+}
+
+/* ---- menu 底部管理按钮 ---- */
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--odn-color-black-9);
+  cursor: pointer;
+  font-family: inherit;
+  transition: background-color 0.15s;
+}
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn]:hover {
+  background: rgba(33, 34, 38, 0.05);
+}
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn]:active {
+  background: rgba(33, 34, 38, 0.08);
+}
+
 /* ---- variant: bar ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=bar] {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",