one-design-next 0.0.82 → 0.0.83

package/dist/composer/index.js

@@ -894,7 +894,9 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       },
       popupClassName: "odn-composer-skill-popup",
       popup: /*#__PURE__*/React.createElement(SkillSlot, {
+        key: toolMenuOpen ? 'open' : 'closed',
         variant: "menu",
+        searchable: true,
         skills: skillGroups ? undefined : skills,
         skillGroups: skillGroups,
         showGroupTitles: showGroupTitles,

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

@@ -63,6 +63,11 @@ export interface SkillSlotProps {
      * 不传则保持默认布局宽度。
      */
     itemWidth?: number;
+    /**
+     * menu 变体：在列表顶部显示搜索框，按 label / description 即时过滤，命中字高亮。
+     * bar / card 忽略。本轮不做搜索框内的键盘导航。
+     */
+    searchable?: boolean;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/skill-slot/index.js

@@ -4,8 +4,17 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Fragment, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
+import Input from "../input";
 import Popover from "../popover";
+import { highlightQueryText } from "../stream-text/highlight-query-text";
 import "./style";
+function skillMatchesQuery(skill, query) {
+  var _skill$description;
+  var q = query.trim().toLowerCase();
+  if (!q) return true;
+  if (skill.label.toLowerCase().includes(q)) return true;
+  return ((_skill$description = skill.description) !== null && _skill$description !== void 0 ? _skill$description : '').toLowerCase().includes(q);
+}
 
 /* 给 listbox / option 生成稳定且唯一的 id 前缀（aria-activedescendant 需要）。
  * 模块级自增 + useState 初始化，保证每个实例 mount 期间 id 稳定。 */
@@ -16,7 +25,8 @@ var skillSlotIdSeq = 0;
  * 始终挂载 Popover（用 visible 关掉未截断态），避免条件挂载导致 ref/测量丢帧。
  */
 function SkillDescPopover(_ref) {
-  var description = _ref.description;
+  var description = _ref.description,
+    highlightQuery = _ref.highlightQuery;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -59,11 +69,11 @@ function SkillDescPopover(_ref) {
     visible: truncated ? undefined : false,
     popup: /*#__PURE__*/React.createElement("span", {
       "data-odn-skill-slot-desc-full": true
-    }, description)
+    }, highlightQueryText(description, highlightQuery))
   }, /*#__PURE__*/React.createElement("span", {
     ref: ref,
     "data-odn-skill-slot-item-desc": true
-  }, description));
+  }, highlightQueryText(description, highlightQuery)));
 }
 
 /** 命令式句柄：供"焦点不在 menu 上"的宿主（如 composer 的 contenteditable）转发键盘。 */
@@ -82,15 +92,53 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     menuMaxHeight = _ref2.menuMaxHeight,
     menuWidth = _ref2.menuWidth,
     itemWidth = _ref2.itemWidth,
+    _ref2$searchable = _ref2.searchable,
+    searchable = _ref2$searchable === void 0 ? false : _ref2$searchable,
     className = _ref2.className,
     style = _ref2.style;
-  /* 优先使用 skillGroups，否则回退到 skills；两者都未提供则为空数组。 */
-  var skills = useMemo(function () {
+  var searchableMenu = variant === 'menu' && searchable;
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchInput = _useState4[0],
+    setSearchInput = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchQuery = _useState6[0],
+    setSearchQuery = _useState6[1];
+  var composingRef = useRef(false);
+
+  /* 目录全集：过滤前的列表。目录为空才整棵不渲染。 */
+  var catalogSkills = useMemo(function () {
     if (skillGroups) return skillGroups.flatMap(function (g) {
       return g.skills;
     });
     return skillsProp !== null && skillsProp !== void 0 ? skillsProp : [];
   }, [skillGroups, skillsProp]);
+  var visibleGroups = useMemo(function () {
+    if (!skillGroups) return undefined;
+    if (!searchableMenu) return skillGroups;
+    return skillGroups.map(function (g) {
+      return {
+        groupName: g.groupName,
+        skills: g.skills.filter(function (s) {
+          return skillMatchesQuery(s, searchQuery);
+        })
+      };
+    }).filter(function (g) {
+      return g.skills.length > 0;
+    });
+  }, [skillGroups, searchableMenu, searchQuery]);
+
+  /* 优先使用过滤后的 skillGroups，否则回退到 skills。 */
+  var skills = useMemo(function () {
+    if (visibleGroups) return visibleGroups.flatMap(function (g) {
+      return g.skills;
+    });
+    if (!searchableMenu) return catalogSkills;
+    return catalogSkills.filter(function (s) {
+      return skillMatchesQuery(s, searchQuery);
+    });
+  }, [visibleGroups, catalogSkills, searchableMenu, searchQuery]);
   var showGroupTitles = showGroupTitlesProp !== null && showGroupTitlesProp !== void 0 ? showGroupTitlesProp : variant === 'menu';
   var groupedWithTitles = !!(skillGroups && showGroupTitles);
   /* menu 变体：HoverFill 完全只管鼠标交互（命令式状态机，不变）；键盘 ↑↓
@@ -110,15 +158,15 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
    *   维护高亮 index，监听 ↑↓ / Home / End 移动、Enter / Space 选中，
    *   并自动跳过 disabled 项、把高亮项滚动进视口。 */
 
-  var _useState3 = useState(function () {
+  var _useState7 = useState(function () {
       return "odn-skill-slot-".concat(++skillSlotIdSeq);
     }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    listboxId = _useState4[0];
-  var _useState5 = useState(-1),
-    _useState6 = _slicedToArray(_useState5, 2),
-    internalActiveIndex = _useState6[0],
-    setInternalActiveIndex = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 1),
+    listboxId = _useState8[0];
+  var _useState9 = useState(-1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    internalActiveIndex = _useState10[0],
+    setInternalActiveIndex = _useState10[1];
   var isControlled = activeIndex !== undefined && activeIndex !== null;
   var currentIndex = isControlled ? activeIndex : internalActiveIndex;
   var itemRefs = useRef([]);
@@ -230,7 +278,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
     if (e.currentTarget.contains(e.relatedTarget)) return;
     setInternalActiveIndex(-1);
   };
-  if (skills.length === 0) return null;
+  if (catalogSkills.length === 0) return null;
 
   /* menu variant 有 scroll-wrap 时，滚动仅包裹技能列表，footer 固定在底部不参与滚动。 */
   var hasScrollWrap = variant === 'menu' && menuMaxHeight !== undefined && menuMaxHeight !== null;
@@ -279,8 +327,9 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, 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(SkillDescPopover, {
-      description: skill.description
+    }, highlightQueryText(skill.label, searchableMenu ? searchQuery : undefined)), skill.description ? /*#__PURE__*/React.createElement(SkillDescPopover, {
+      description: skill.description,
+      highlightQuery: searchableMenu ? searchQuery : undefined
     }) : null)));
   };
 
@@ -365,7 +414,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   var renderGroups = function renderGroups() {
     var flatIndex = 0;
     if (variant === 'menu') {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group, groupIdx) {
+      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", {
@@ -378,7 +427,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
         }));
       }));
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, skillGroups.map(function (group, groupIdx) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, visibleGroups.map(function (group, groupIdx) {
       return /*#__PURE__*/React.createElement("div", {
         key: group.groupName || "_group_".concat(groupIdx),
         "data-odn-skill-slot-group": true
@@ -403,8 +452,41 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
 
   /* 有 skillGroups：始终按组遍历（保序）；无标题时仍走分组 DOM，仅不渲染 header，
    * bar/card 用 group-items 承接原有 flex/grid，避免拍平后丢组边界。 */
-  var listBody = skillGroups ? renderGroups() : renderFlatItems();
+  var listBody = visibleGroups ? renderGroups() : renderFlatItems();
   var manageFooter = renderManageFooter();
+  var searchBar = searchableMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-search": true,
+    onCompositionStart: function onCompositionStart() {
+      composingRef.current = true;
+    },
+    onCompositionEnd: function onCompositionEnd(e) {
+      composingRef.current = false;
+      var value = e.target instanceof HTMLInputElement ? e.target.value : searchInput;
+      setSearchInput(value);
+      setSearchQuery(value);
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    light: true,
+    size: "small",
+    allowClear: true,
+    placeholder: "\u641C\u7D22\u6280\u80FD\u540D\u79F0\u6216\u63CF\u8FF0",
+    value: searchInput,
+    onChange: function onChange(e, value) {
+      setSearchInput(value);
+      var composing = composingRef.current || e.nativeEvent.isComposing;
+      if (composing) return;
+      setSearchQuery(value);
+    },
+    leftElement: /*#__PURE__*/React.createElement(Icon, {
+      name: "search",
+      size: 14
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-divider": true
+  })) : null;
+  var emptyState = searchableMenu && skills.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-empty": true
+  }, "\u672A\u627E\u5230\u76F8\u5173\u6280\u80FD") : null;
 
   /* 共享的属性容器：menu variant 的 aria / keyboard / 交互属性 */
   var listAttrs = variant === 'menu' ? {
@@ -421,29 +503,33 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref2, ref) {
   } : {}), variant !== 'menu' && itemWidth !== undefined && itemWidth !== null ? {
     '--odn-skill-slot-item-width': "".concat(itemWidth, "px")
   } : {}), style);
-  if (hasScrollWrap) {
-    /* 滚动仅包裹技能列表，footer 固定在底部不参与滚动 */
-    return /*#__PURE__*/React.createElement("div", _extends({
+  if (variant !== 'menu') {
+    return /*#__PURE__*/React.createElement("div", {
       "data-odn-skill-slot": true,
       "data-odn-skill-slot-variant": variant,
       "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
       className: className,
       style: rootStyle
-    }, listAttrs), /*#__PURE__*/React.createElement("div", {
-      "data-odn-skill-slot-scroll-wrap": true,
-      style: {
-        maxHeight: menuMaxHeight,
-        overflowY: 'auto'
-      }
-    }, listBody), manageFooter);
+    }, listBody);
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+
+  /* listbox 挂在列表容器上，搜索框 / footer 不进 listbox。 */
+  var menuList = /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-skill-slot-list": true
+  }, listAttrs), skills.length > 0 ? listBody : emptyState);
+  return /*#__PURE__*/React.createElement("div", {
     "data-odn-skill-slot": true,
     "data-odn-skill-slot-variant": variant,
     "data-odn-skill-slot-grouped": groupedWithTitles || undefined,
     className: className,
     style: rootStyle
-  }, listAttrs), listBody, manageFooter);
+  }, searchBar, hasScrollWrap ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-skill-slot-scroll-wrap": true,
+    style: {
+      maxHeight: menuMaxHeight,
+      overflowY: 'auto'
+    }
+  }, menuList) : menuList, manageFooter);
 });
 SkillSlot.displayName = 'SkillSlot';
 export default SkillSlot;

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

@@ -41,6 +41,76 @@
   outline: none;
 }
 
+[data-odn-skill-slot-list] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+[data-odn-skill-slot-list]:focus, [data-odn-skill-slot-list]:focus-visible {
+  outline: none;
+}
+
+/* 顶栏滤镜行：与底部「技能管理」同构（无描边、热区不拉通栏）。
+ * 左右 4px 与菜单上下 padding 对齐；选择器压过 Input 默认描边 / 聚焦蓝框。 */
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] {
+  flex-shrink: 0;
+  margin: 0 4px;
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-search] [data-odn-input] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 22px;
+  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;
+  box-shadow: none;
+  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-left-element] {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-search-mark] {
+  background: transparent;
+  color: var(--odn-color-brand-6);
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+[data-odn-skill-slot-empty] {
+  padding: 20px 12px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--odn-color-black-8);
+  text-align: center;
+}
+
 [data-odn-skill-slot][data-odn-skill-slot-variant=menu] [data-odn-skill-slot-item-wrap] {
   display: block;
 }
@@ -171,9 +241,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  box-sizing: border-box;
+  margin: 0 4px;
   padding: 8px 12px;
   border: none;
+  border-radius: 4px;
   background: transparent;
   font-size: 13px;
   color: var(--odn-color-black-9);

package/package.json

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