one-design-next 0.0.81 → 0.0.83

package/dist/clarify-dock/index.d.ts

@@ -23,7 +23,7 @@ export interface ClarifyDockSpec {
     answeredText?: string;
     /**
      * 单题选项上限（含「其他」），默认 {@link CLARIFY_DOCK_MAX_OPTIONS}。
-     * 超过截断业务选项；有「其他」时优先保留末位。硬顶 26（A–Z）。
+     * 超过截断业务选项；有「其他」时优先保留末位。硬顶 26（1–26）。
      */
     maxOptions?: number;
 }

package/dist/clarify-dock/index.js

@@ -215,16 +215,16 @@ var MULTI_UNSELECTED_ACTIVE_FILL = 'rgba(33, 34, 38, 0.08)';
  */
 export var CLARIFY_DOCK_MAX_OPTIONS = 5;
 
-/** 徽标字母硬顶 A–Z，防止异常大值。 */
-var OPTION_LETTER_HARD_CAP = 26;
+/** 徽标序号硬顶 1–26，防止异常大值。 */
+var OPTION_INDEX_HARD_CAP = 26;
 function resolveMaxOptions(maxOptions) {
   var raw = maxOptions !== null && maxOptions !== void 0 ? maxOptions : CLARIFY_DOCK_MAX_OPTIONS;
   if (!Number.isFinite(raw)) return CLARIFY_DOCK_MAX_OPTIONS;
-  return Math.max(1, Math.min(Math.floor(raw), OPTION_LETTER_HARD_CAP));
+  return Math.max(1, Math.min(Math.floor(raw), OPTION_INDEX_HARD_CAP));
 }
-function optionLetter(idx) {
-  if (idx < 0 || idx >= OPTION_LETTER_HARD_CAP) return '';
-  return String.fromCharCode(65 + idx);
+function optionIndexLabel(idx) {
+  if (idx < 0 || idx >= OPTION_INDEX_HARD_CAP) return '';
+  return String(idx + 1);
 }
 export function ClarifyDockPanel(_ref2) {
   var msgId = _ref2.msgId,
@@ -248,24 +248,28 @@ export function ClarifyDockPanel(_ref2) {
     _useState10 = _slicedToArray(_useState9, 2),
     otherDraft = _useState10[0],
     setOtherDraft = _useState10[1];
-  var _useState11 = useState(null),
+  var _useState11 = useState(''),
     _useState12 = _slicedToArray(_useState11, 2),
-    dateDraft = _useState12[0],
-    setDateDraft = _useState12[1];
+    textDraft = _useState12[0],
+    setTextDraft = _useState12[1];
   var _useState13 = useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    dateRangeDraft = _useState14[0],
-    setDateRangeDraft = _useState14[1];
-  /** AutoHeight 过渡结束后再递增，驱动选项延后 autofocus */
-  var _useState15 = useState(0),
+    dateDraft = _useState14[0],
+    setDateDraft = _useState14[1];
+  var _useState15 = useState(null),
     _useState16 = _slicedToArray(_useState15, 2),
-    inputFocusEpoch = _useState16[0],
-    setInputFocusEpoch = _useState16[1];
+    dateRangeDraft = _useState16[0],
+    setDateRangeDraft = _useState16[1];
+  /** AutoHeight 过渡结束后再递增，驱动选项延后 autofocus */
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    inputFocusEpoch = _useState18[0],
+    setInputFocusEpoch = _useState18[1];
   var question = spec.questions[page];
   var answer = answers[page];
   var input = question.input;
 
-  /* 切页：回显 other / date / date-range 草稿 */
+  /* 切页：回显 other / text / date / date-range 草稿 */
   useEffect(function () {
     if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' || (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') {
       var _answer$otherText;
@@ -273,6 +277,11 @@ export function ClarifyDockPanel(_ref2) {
     } else {
       setOtherDraft('');
     }
+    if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'text') {
+      setTextDraft(answer.value);
+    } else {
+      setTextDraft('');
+    }
     if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'date') {
       setDateDraft(answer.value ? new Date("".concat(answer.value, "T00:00:00")) : null);
     } else {
@@ -309,6 +318,8 @@ export function ClarifyDockPanel(_ref2) {
           if (hasOther && otherDraft.trim().length === 0) return false;
           return hasRegular || hasOther;
         }
+      case 'text':
+        return answer.value.trim().length > 0;
       case 'date':
         return answer.value.trim().length > 0;
       case 'date-range':
@@ -360,6 +371,8 @@ export function ClarifyDockPanel(_ref2) {
           }
           return labels.join('、');
         }
+      case 'text':
+        return ans.value;
       case 'date':
         return ans.value;
       case 'date-range':
@@ -381,6 +394,12 @@ export function ClarifyDockPanel(_ref2) {
           otherText: otherDraft
         });
       }
+      if (a.kind === 'text') {
+        return {
+          kind: 'text',
+          value: textDraft
+        };
+      }
       if (a.kind === 'date' && dateDraft) {
         return {
           kind: 'date',
@@ -420,6 +439,9 @@ export function ClarifyDockPanel(_ref2) {
             data[q.key] = values;
             break;
           }
+        case 'text':
+          data[q.key] = a.value;
+          break;
         case 'date':
           data[q.key] = a.value;
           break;
@@ -483,6 +505,7 @@ export function ClarifyDockPanel(_ref2) {
       kind: 'skipped'
     };
     setOtherDraft('');
+    setTextDraft('');
     setDateDraft(null);
     setDateRangeDraft(null);
     /* 不按顺序跳过：任意一题跳过后若已全部有值（含已跳），直接提交 */
@@ -502,6 +525,7 @@ export function ClarifyDockPanel(_ref2) {
     if (!isSkipped) return;
     setAnswerForPage(undefined);
     setOtherDraft('');
+    setTextDraft('');
     setDateDraft(null);
     setDateRangeDraft(null);
   };
@@ -552,6 +576,7 @@ export function ClarifyDockPanel(_ref2) {
     answer: isSkipped ? undefined : answer,
     focusEpoch: inputFocusEpoch,
     otherDraft: otherDraft,
+    textDraft: textDraft,
     dateDraft: dateDraft,
     dateRangeDraft: dateRangeDraft,
     onOtherDraftChange: function onOtherDraftChange(v) {
@@ -570,6 +595,13 @@ export function ClarifyDockPanel(_ref2) {
         });
       }
     },
+    onTextChange: function onTextChange(v) {
+      setTextDraft(v);
+      setAnswerForPage(v.trim() ? {
+        kind: 'text',
+        value: v
+      } : undefined);
+    },
     onDateChange: function onDateChange(d) {
       setDateDraft(d);
       setAnswerForPage(d ? {
@@ -671,8 +703,8 @@ function withOtherOption(options, allowOther, maxOptions) {
 
 /**
  * 按 input.kind 适配录入组件：
- * options / options-multi → 选项列表；date → DatePicker；
- * date-range → DateRangePicker。自由文本走自然语言 + Composer，不在此渲染。
+ * options / options-multi → 选项列表；text → Input 单行；
+ * date → DatePicker；date-range → DateRangePicker。
  */
 function QuestionInput(_ref3) {
   var input = _ref3.input,
@@ -680,9 +712,11 @@ function QuestionInput(_ref3) {
     answer = _ref3.answer,
     focusEpoch = _ref3.focusEpoch,
     otherDraft = _ref3.otherDraft,
+    textDraft = _ref3.textDraft,
     dateDraft = _ref3.dateDraft,
     dateRangeDraft = _ref3.dateRangeDraft,
     onOtherDraftChange = _ref3.onOtherDraftChange,
+    onTextChange = _ref3.onTextChange,
     onDateChange = _ref3.onDateChange,
     onDateRangeChange = _ref3.onDateRangeChange,
     onPickSingle = _ref3.onPickSingle,
@@ -704,6 +738,17 @@ function QuestionInput(_ref3) {
       })
     );
   }
+  if (input.kind === 'text') {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-clarify-dock-input-row": true,
+      "data-kind": "text"
+    }, /*#__PURE__*/React.createElement(TextQuestionInput, {
+      value: textDraft,
+      placeholder: input.placeholder,
+      focusEpoch: focusEpoch,
+      onChange: onTextChange
+    }));
+  }
   if (input.kind === 'date') {
     return /*#__PURE__*/React.createElement("div", {
       "data-odn-clarify-dock-input-row": true
@@ -734,25 +779,57 @@ function QuestionInput(_ref3) {
 }
 
 /* ------------------------------------------------------------------ */
-/*  OptionsList · A–E 徽标 + ↑↓ 框选（焦点隔离，不抢 Composer）         */
+/*  TextQuestionInput · 迷你单行输入（撑满宽度，13px）                   */
 /* ------------------------------------------------------------------ */
 
-function OptionsList(_ref4) {
-  var options = _ref4.options,
-    multi = _ref4.multi,
-    answer = _ref4.answer,
+function TextQuestionInput(_ref4) {
+  var value = _ref4.value,
+    placeholder = _ref4.placeholder,
     focusEpoch = _ref4.focusEpoch,
-    otherDraft = _ref4.otherDraft,
-    otherPlaceholder = _ref4.otherPlaceholder,
-    onOtherDraftChange = _ref4.onOtherDraftChange,
-    onPickSingle = _ref4.onPickSingle,
-    onToggleMulti = _ref4.onToggleMulti;
+    _onChange = _ref4.onChange;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (focusEpoch <= 0) return;
+    var id = window.requestAnimationFrame(function () {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    });
+    return function () {
+      return window.cancelAnimationFrame(id);
+    };
+  }, [focusEpoch]);
+  return /*#__PURE__*/React.createElement(Input, {
+    ref: ref,
+    value: value,
+    onChange: function onChange(_, next) {
+      return _onChange(next);
+    },
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '请输入…',
+    size: "small",
+    className: "w-full"
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/*  OptionsList · 1–N 序号徽标 + ↑↓ 框选（焦点隔离，不抢 Composer）      */
+/* ------------------------------------------------------------------ */
+
+function OptionsList(_ref5) {
+  var options = _ref5.options,
+    multi = _ref5.multi,
+    answer = _ref5.answer,
+    focusEpoch = _ref5.focusEpoch,
+    otherDraft = _ref5.otherDraft,
+    otherPlaceholder = _ref5.otherPlaceholder,
+    onOtherDraftChange = _ref5.onOtherDraftChange,
+    onPickSingle = _ref5.onPickSingle,
+    onToggleMulti = _ref5.onToggleMulti;
   var optionRefs = useRef([]);
   /** roving tabindex：当前键盘焦点项；与选中态解耦，避免重渲染丢焦 */
-  var _useState17 = useState(0),
-    _useState18 = _slicedToArray(_useState17, 2),
-    focusedIdx = _useState18[0],
-    setFocusedIdx = _useState18[1];
+  var _useState19 = useState(0),
+    _useState20 = _slicedToArray(_useState19, 2),
+    focusedIdx = _useState20[0],
+    setFocusedIdx = _useState20[1];
   /** 选中态导致「其他」编辑行等结构切换后，在 layout 再聚焦 */
   var pendingFocusIdxRef = useRef(null);
   var resolveSelectedIdx = function resolveSelectedIdx() {
@@ -832,7 +909,7 @@ function OptionsList(_ref4) {
   }, options.map(function (opt, idx) {
     var active = (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' ? answer.value === opt.value : (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi' ? answer.values.includes(opt.value) : false;
     var isOther = opt.value === OTHER_VALUE;
-    var letter = optionLetter(idx);
+    var seq = optionIndexLabel(idx);
     if (isOther && active) {
       var editingRow = /*#__PURE__*/React.createElement("div", {
         "data-odn-clarify-dock-option": true,
@@ -854,10 +931,10 @@ function OptionsList(_ref4) {
             onToggleMulti(opt);
           }
         }
-      }, letter) : /*#__PURE__*/React.createElement("span", {
+      }, seq) : /*#__PURE__*/React.createElement("span", {
         "data-odn-clarify-dock-option-letter": true,
         "aria-hidden": true
-      }, letter), /*#__PURE__*/React.createElement(Input, {
+      }, seq), /*#__PURE__*/React.createElement(Input, {
         value: otherDraft,
         onChange: function onChange(_, value) {
           return onOtherDraftChange(value);
@@ -903,7 +980,7 @@ function OptionsList(_ref4) {
     var optionContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       "data-odn-clarify-dock-option-letter": true,
       "aria-hidden": true
-    }, letter), /*#__PURE__*/React.createElement("span", {
+    }, seq), /*#__PURE__*/React.createElement("span", {
       "data-odn-clarify-dock-option-label": true
     }, opt.label));
 
@@ -950,10 +1027,10 @@ function OptionsList(_ref4) {
  *   - recordAnswer 后 Panel 消失，Trigger 切 Approval 式锁态卡
  */
 export function useClarifyDockState(messages, sessionKey, resetVer) {
-  var _useState19 = useState({}),
-    _useState20 = _slicedToArray(_useState19, 2),
-    answers = _useState20[0],
-    setAnswers = _useState20[1];
+  var _useState21 = useState({}),
+    _useState22 = _slicedToArray(_useState21, 2),
+    answers = _useState22[0],
+    setAnswers = _useState22[1];
 
   /* 切换会话或点「重置」时清空已答标记，避免 Panel / Trigger 状态脱节 */
   useEffect(function () {

package/dist/clarify-dock/style/index.css

@@ -142,16 +142,20 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
 [data-odn-clarify-dock-actions] [data-odn-pagination] {
   flex-shrink: 0;
   font-size: 12px;
+  font-family: inherit;
+  font-variant-numeric: normal;
   line-height: 1.5;
   color: var(--odn-color-black-9);
 }
 
 [data-odn-clarify-dock-actions] [data-odn-pagination-simple-page-value] {
+  font-family: inherit;
+  font-variant-numeric: normal;
   color: var(--odn-color-black-9);
 }
 
 /* ============================================================== */
-/*  Options · A–E 徽标 + 通栏灰底（不复用 Button 尺寸体系）            */
+/*  Options · 1–N 序号徽标 + 通栏灰底（不复用 Button 尺寸体系）         */
 /* ============================================================== */
 [data-odn-clarify-dock] [data-odn-clarify-dock-options] {
   display: flex;
@@ -238,7 +242,8 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
   color: var(--odn-color-black-10);
   font-size: 11px;
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  font-family: inherit;
+  font-variant-numeric: normal;
   line-height: 1;
 }
 
@@ -288,7 +293,8 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
   line-height: 1;
   font-size: 11px;
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  font-family: inherit;
+  font-variant-numeric: normal;
   border: 1px solid var(--odn-color-brand-6);
   background: var(--odn-color-brand-6);
   color: var(--odn-color-bg-elevated);
@@ -542,6 +548,14 @@ div[data-odn-clarify-dock] [data-odn-clarify-dock-body] {
   flex: 0 0 auto;
 }
 
+/* 纯文本题：迷你单行输入，默认撑满宽度，字号 13px，左右 padding 6px，圆角 4px */
+[data-odn-clarify-dock-input-row][data-kind=text] {
+  width: 100%;
+  --odn-input-font-size-small: var(--odn-font-size-text-sm);
+  --odn-input-padding-inline-small: var(--odn-input-padding-block-medium);
+  --odn-input-border-radius-small: var(--odn-border-radius);
+}
+
 div[data-odn-clarify-dock] [data-odn-date-picker-container]:not([data-odn-date-picker-container-range]) {
   display: inline-block;
   box-sizing: border-box;

package/dist/clarify-dock/types.d.ts

@@ -17,6 +17,9 @@ export type ClarifyInput = {
     options: ClarifyOption[];
     allowOther?: boolean;
     otherPlaceholder?: string;
+} | {
+    kind: 'text';
+    placeholder?: string;
 } | {
     kind: 'date';
     placeholder?: string;

package/dist/clarify-dock/types.js

@@ -12,7 +12,7 @@ export function toISODate(d) {
 
 /** 解析 Host 传入的日期边界；非法则忽略。 */
 export function parseClarifyBoundDate(value) {
-  if (value == null) return undefined;
+  if (value === undefined || value === null) return undefined;
   if (value instanceof Date) {
     return Number.isNaN(value.getTime()) ? undefined : value;
   }

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.81",
+  "version": "0.0.83",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",