one-design-next 0.0.86 → 0.0.87

package/dist/skill-slot/index.js

@@ -20,9 +20,13 @@ function skillMatchesQuery(skill, query) {
  * 模块级自增 + useState 初始化，保证每个实例 mount 期间 id 稳定。 */
 var skillSlotIdSeq = 0;
 
+/** 技能管理入口左侧 icon。备选：layers / blocks / puzzle / settings-2 / book-open */
+var MANAGE_SKILLS_ICON = 'layout-grid';
+
 /**
  * menu/card 行内描述：仅在被 line-clamp 截断时，hover 0.5s 右侧 Popover 出全文。
- * 始终挂载 Popover（用 visible 关掉未截断态），避免条件挂载导致 ref/测量丢帧。
+ * menu 1 行、card 最多 2 行。始终挂载 Popover（用 visible 关掉未截断态），
+ * 避免条件挂载导致 ref/测量丢帧。
  */
 function SkillDescPopover(_ref) {
   var description = _ref.description,
@@ -141,15 +145,9 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   }, [visibleGroups, catalogSkills, searchableMenu, searchQuery]);
   var showGroupTitles = showGroupTitlesProp !== null && showGroupTitlesProp !== void 0 ? showGroupTitlesProp : variant === 'menu';
   var groupedWithTitles = !!(skillGroups && showGroupTitles);
-  /* menu 变体：HoverFill 完全只管鼠标交互（命令式状态机，不变）；键盘 ↑↓
-   * 走独立的 CSS [data-odn-skill-slot-item-highlighted] 视觉层。
-   *
-   * 两条轨道**视觉上不重叠**：button:hover 时不画键盘高亮 bg（让 HoverFill
-   * 显示），鼠标离开后键盘高亮才显出。鼠标进入 item 时 onMouseEnter 同步
-   * activeIndex → highlighted 转移过来，鼠标走后 highlighted 接力。
-   *
-   * 颜色用 HoverFill 默认 hoverColor 同值（rgba(33,34,38,0.05)），过渡也用
-   * 颜色 transition，视觉看起来一致。
+  /* menu 变体：HoverFill 只管鼠标。键盘高亮视觉暂时关闭（见 style），
+   * 避免 mouseleave 后 ::before 接力造成闪一下。`activeIndex` / ↑↓ / Enter
+   * 数据层仍工作，恢复视觉时解开 item-highlighted ::before 即可。
    *
    * 键盘导航（仅 menu）：
    * - 受控：业务传 `activeIndex`（如 composer 把 editor 的 ↑↓ 转发进来），
@@ -170,6 +168,11 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   var isControlled = activeIndex !== undefined && activeIndex !== null;
   var currentIndex = isControlled ? activeIndex : internalActiveIndex;
   var itemRefs = useRef([]);
+  var listAreaRef = useRef(null);
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    listAreaMinHeight = _useState12[0],
+    setListAreaMinHeight = _useState12[1];
 
   /* SkillItem.disabled 为唯一禁用来源（不再与选中态互斥）。 */
   var isItemDisabled = function isItemDisabled(skill) {
@@ -232,6 +235,20 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   },
   // currentIndex / skills 变化时句柄需读到最新值
   [currentIndex, skills]);
+  useLayoutEffect(function () {
+    if (!searchableMenu) {
+      setListAreaMinHeight(null);
+      return;
+    }
+    if (skills.length === 0) return;
+    var el = listAreaRef.current;
+    if (!el) return;
+    var h = Math.round(el.getBoundingClientRect().height);
+    if (h <= 0) return;
+    setListAreaMinHeight(function (prev) {
+      return prev === h ? prev : h;
+    });
+  }, [searchableMenu, skills]);
   var handleMenuKeyDown = function handleMenuKeyDown(e) {
     if (skills.length === 0) return;
     switch (e.key) {
@@ -333,23 +350,21 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     }) : null)));
   };
 
-  /* 渲染底部"技能管理"按钮（仅 menu 变体 + 提供 onManageSkills 时。不参与键盘导航）。 */
-  var renderManageFooter = function renderManageFooter() {
+  /* 「技能管理」按钮：有搜索时进顶栏右侧 hug；无搜索时仍在列表底部。不参与键盘导航。 */
+  var renderManageBtn = function renderManageBtn() {
     if (variant !== 'menu' || !onManageSkills) return null;
-    var defaultFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD\u7BA1\u7406"), /*#__PURE__*/React.createElement(Icon, {
-      name: "right",
-      size: 12
-    }));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      "data-odn-skill-slot-divider": true
-    }), /*#__PURE__*/React.createElement("button", {
+    var defaultFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      name: MANAGE_SKILLS_ICON,
+      size: 14
+    }), /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD\u7BA1\u7406"));
+    return /*#__PURE__*/React.createElement("button", {
       type: "button",
       "data-odn-skill-slot-manage-btn": true,
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
       },
       onClick: onManageSkills
-    }, skillManageFooter !== null && skillManageFooter !== void 0 ? skillManageFooter : defaultFooter));
+    }, skillManageFooter !== null && skillManageFooter !== void 0 ? skillManageFooter : defaultFooter);
   };
   var renderCardItem = function renderCardItem(skill) {
     var disabled = !!skill.disabled;
@@ -417,14 +432,14 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, visibleGroups.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", {
+        }, 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++);
-        }));
+        }), groupIdx < visibleGroups.length - 1 ? /*#__PURE__*/React.createElement("div", {
+          "data-odn-skill-slot-divider": true,
+          "data-odn-skill-slot-group-divider": true
+        }) : null);
       }));
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, visibleGroups.map(function (group, groupIdx) {
@@ -453,8 +468,10 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   /* 有 skillGroups：始终按组遍历（保序）；无标题时仍走分组 DOM，仅不渲染 header，
    * bar/card 用 group-items 承接原有 flex/grid，避免拍平后丢组边界。 */
   var listBody = visibleGroups ? renderGroups() : renderFlatItems();
-  var manageFooter = renderManageFooter();
+  var manageBtn = renderManageBtn();
   var searchBar = searchableMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-toolbar": true
+  }, /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot-search": true,
     onCompositionStart: function onCompositionStart() {
       composingRef.current = true;
@@ -481,11 +498,20 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
       name: "search",
       size: 14
     })
-  })), /*#__PURE__*/React.createElement("div", {
+  })), manageBtn ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-toolbar-divider": true,
+    "aria-hidden": true
+  }), manageBtn) : null), /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot-divider": true
   })) : null;
+  var manageFooter = !searchableMenu && manageBtn ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-divider": true
+  }), manageBtn) : null;
   var emptyState = searchableMenu && skills.length === 0 ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-skill-slot-empty": true
+    "data-odn-skill-slot-empty": true,
+    style: listAreaMinHeight ? {
+      minHeight: listAreaMinHeight
+    } : undefined
   }, "\u672A\u627E\u5230\u76F8\u5173\u6280\u80FD") : null;
 
   /* 共享的属性容器：menu variant 的 aria / keyboard / 交互属性 */
@@ -515,6 +541,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
 
   /* listbox 挂在列表容器上，搜索框 / footer 不进 listbox。 */
   var menuList = /*#__PURE__*/React.createElement("div", _extends({
+    ref: hasScrollWrap ? undefined : listAreaRef,
     "data-odn-skill-slot-list": true
   }, listAttrs), skills.length > 0 ? listBody : emptyState);
   return /*#__PURE__*/React.createElement("div", {
@@ -524,6 +551,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     className: className,
     style: rootStyle
   }, searchBar, hasScrollWrap ? /*#__PURE__*/React.createElement("div", {
+    ref: listAreaRef,
     "data-odn-skill-slot-scroll-wrap": true,
     style: {
       maxHeight: menuMaxHeight,

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

@@ -16,7 +16,7 @@
 }
 
 .odn-skill-slot-item-bg {
-  border-radius: 0;
+  border-radius: 4px;
 }
 
 /* ---- menu 滚动包装层 ----
@@ -50,11 +50,28 @@
   outline: none;
 }
 
-/* 顶栏滤镜行：与底部「技能管理」同构（无描边、热区不拉通栏）。
+/* 顶栏：搜索 + 可选「技能管理」（hug 靠右）。
  * 左右 4px 与菜单上下 padding 对齐；选择器压过 Input 默认描边 / 聚焦蓝框。 */
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] {
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-toolbar] {
+  display: flex;
+  align-items: center;
   flex-shrink: 0;
+  gap: 4px;
   margin: 0 4px;
+  min-width: 0;
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-toolbar-divider] {
+  flex: 0 0 auto;
+  align-self: center;
+  width: 1px;
+  height: 12px;
+  background: var(--odn-color-black-4);
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] {
+  flex: 1;
+  min-width: 0;
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input] {
@@ -63,17 +80,19 @@
   min-width: 0;
   box-sizing: border-box;
   align-items: center;
+  /* 与技能项 icon↔名称 同为 8px；关掉 Input small 默认的 4px icon margin，否则会叠成 12px */
   gap: 8px;
-  padding: 8px 12px;
+  --odn-input-icon-margin-inline-small: 0;
+  height: 32px;
+  padding: 6px 12px;
   font-size: 13px;
-  line-height: 22px;
+  line-height: 20px;
   color: var(--odn-color-black-12);
   border: none;
   border-radius: 4px;
   background: transparent;
   box-shadow: none;
   outline: none;
-  transition: background-color 0.15s;
 }
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input][data-odn-input-focused=true] {
   border: none;
@@ -81,12 +100,18 @@
   outline: none;
   background: transparent;
 }
-[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input]:hover {
-  background: rgba(33, 34, 38, 0.05);
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input-el]::placeholder {
+  color: var(--odn-color-black-8);
+  opacity: 1;
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input-left-element] {
   color: var(--odn-color-black-9);
+  gap: 0;
+}
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input-left-element] > svg {
+  margin-inline-end: 0;
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-search-mark] {
@@ -104,6 +129,10 @@
 }
 
 [data-odn-skill-slot-empty] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   padding: 20px 12px;
   font-size: 13px;
   line-height: 20px;
@@ -113,6 +142,7 @@
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-wrap] {
   display: block;
+  margin: 0 4px;
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item] {
@@ -133,26 +163,20 @@
   margin-top: 4px;
 }
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item] {
-  /* 键盘高亮：独立视觉层，颜色与 HoverFill 默认 hoverColor 完全一致，过渡用
-   * 颜色 transition 模拟 HoverFill 的渐入感。
-   *
-   * 关键互斥规则：button:hover 时不画键盘高亮，让 HoverFill（外层包裹）显示。
-   * 这样鼠标真 hover 当前项时，HoverFill 的视觉是唯一来源；鼠标离开后键盘
-   * 高亮 bg 才出现接力。两条轨道始终只有一个出现，不重叠。
+  /* 键盘高亮视觉暂时关闭：鼠标离开后不要用 ::before 接力，避免和 HoverFill 退场叠出闪一下。
+   * 数据层 `data-odn-skill-slot-item-highlighted` / composer 转发 ↑↓ 仍保留，恢复时解开下面即可。
    *
-   * ::before 而不是直接 background：HoverFill 自己的 bg div 是绝对定位在 button
-   * 之外的，但布局上 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)::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: rgba(33, 34, 38, 0.05);
-  border-radius: 0;
-  transition: background-color 0.18s ease;
-  pointer-events: none;
-  z-index: -1;
+   * &[data-odn-skill-slot-item-highlighted]:not(:hover)::before {
+   *   content: '';
+   *   position: absolute;
+   *   inset: 0;
+   *   background: rgba(33, 34, 38, 0.05);
+   *   border-radius: 4px;
+   *   transition: background-color 0.18s ease;
+   *   pointer-events: none;
+   *   z-index: -1;
+   * }
+   */
 }
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-label] {
@@ -162,29 +186,32 @@
 
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-desc] {
   font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
   color: var(--odn-color-black-9);
-  /* 描述固定最多 2 行，不可配置 */
+  /* 描述固定 1 行；超长由 SkillDescPopover 在截断时 hover 出全文 */
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   overflow: hidden;
   word-break: break-word;
 }
 
-/* ---- menu 分组标题 ---- */
+/* ---- menu 分组标题 ----
+ * 分类名不做 uppercase。组间分割线画在组末、左右内缩，不跟标题叠尾线。 */
 [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;
+  padding: 0 16px 4px;
+  font-size: 12px;
+  font-weight: 500;
   color: var(--odn-color-black-8);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
   line-height: 20px;
   user-select: none;
   pointer-events: none;
 }
 
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-list] > [data-odn-skill-slot-group-header]:first-child {
+  padding-top: 4px;
+}
+
 /* 无组标题时：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] {
@@ -224,26 +251,34 @@
   pointer-events: none;
 }
 
-/* ---- menu 底部分隔线 ---- */
+/* ---- menu 分隔线 ----
+ * 通栏：搜索栏 / 技能管理，标「内容 ↔ 系统操作」。
+ * 组间：仅无标题时出现，左右内缩对齐文案（macOS 菜单）。 */
 [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);
 }
 
-/* 组间分割线：略收紧上下留白，避免与组标题叠出过大空隙 */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-group-divider] {
-  margin: 4px 0 2px;
+  box-sizing: content-box;
+  margin: 0 16px;
+  padding: 8px 0;
+  background-clip: content-box;
 }
 
-/* ---- menu 底部管理按钮 ---- */
+/* ---- menu 管理按钮：hug 内容宽；在顶栏靠右，无搜索时仍在列表底 ---- */
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn] {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+  width: max-content;
   box-sizing: border-box;
+  gap: 4px;
   margin: 0 4px;
-  padding: 8px 12px;
+  height: 32px;
+  padding: 0 12px;
   border: none;
   border-radius: 4px;
   background: transparent;
@@ -251,6 +286,7 @@
   color: var(--odn-color-black-9);
   cursor: pointer;
   font-family: inherit;
+  white-space: nowrap;
   transition: background-color 0.15s;
 }
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-manage-btn]:hover {
@@ -260,6 +296,10 @@
   background: rgba(33, 34, 38, 0.08);
 }
 
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-toolbar] [data-odn-skill-slot-manage-btn] {
+  margin: 0;
+}
+
 /* ---- 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.86",
+  "version": "0.0.87",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",