one-design-next 0.0.120 → 0.0.122

package/dist/_genui-types.d.ts

@@ -142,11 +142,25 @@ export interface ChipData {
      *
      * **不是正文内容**：既不进 `value`（无 marker），也不进剪贴板；只在
      * 「结构谓词成立」时作为派生的只读视觉渲染在 chip 之后——即该 chip 是
-     * 最后一个内容、且其后**一个字符都没有**（空格 / 换行都算内容；详见
-     * `resolveHintTarget`）。
+     * 最后一个内容、其后**一个字符都没有**（空格 / 换行都算内容），且它的
+     * hint 还没关闭（见 `hintClosed`；详见 `resolveHintTarget`）。
      * 发送时由 `rawValueToSegments` 按同一谓词追加为 `ComposerHintSegment`。
      */
     hint?: string;
+    /**
+     * 该 chip 的 hint 是否已经关闭（一次性，只关不开）。
+     *
+     * hint 的机会只有一次：只要这颗 chip **后面出现过东西**——插入时后面就有
+     * 文字、用户后面敲了字符 / 空格 / 换行，或者又插了一块 skill——就置为
+     * `true`。此后即使把后面的内容删回空串，灰字也不会再出现，发送时也不再补
+     * `hint` 段。
+     *
+     * 由编辑器在内容变化时写入（`resolveHintClosedChipIds`），业务不需要读写；
+     * 它随 `chips` 快照透传，业务若把 chips 一起存进草稿，恢复后 hint 也保持
+     * 关闭。skill 本身没有 `hint` 时不写这个字段——那是「没有这个能力」，不是
+     * 状态。
+     */
+    hintClosed?: boolean;
 }
 export interface SkillItem {
     id: string;
@@ -159,6 +173,8 @@ export interface SkillItem {
      * 选中插入后，只要该 skill chip 是输入框里最后一个内容且其后没有其它内容
      * （空格 / 换行都算内容），就会以只读灰字形式渲染在 chip 后面；用户在其后
      * 输入任何字符或换行即自动隐藏。与光标位置无关。
+     * 灰字是一次性的：一旦收起（或者插入时后面本来就有内容），再把后面的内容
+     * 删掉也不会重新出现。
      */
     hint?: string;
     /**
@@ -224,7 +240,8 @@ export interface ComposerMentionSegment {
 }
 /**
  * 派生的 skill 提示段：**不是用户输入的内容**，而是「最后一个 skill chip + 其后
- * 无内容」这一结构谓词成立时，由 Composer 在发送瞬间追加的模板文案。
+ * 无内容 + hint 未关闭」这一结构谓词成立时，由 Composer 在发送瞬间追加的模板
+ * 文案。
  *
  * 只在 `onSend` 的 segments 里出现；不出现在 `value` / `chips` / 剪贴板里。
  * 需要忽略它的业务可以直接 filter，或用 `isHintSegment` 收窄。

package/dist/_genui-types.js

@@ -56,7 +56,8 @@ export var ComposerSegmentType = {
 
 /**
  * 派生的 skill 提示段：**不是用户输入的内容**，而是「最后一个 skill chip + 其后
- * 无内容」这一结构谓词成立时，由 Composer 在发送瞬间追加的模板文案。
+ * 无内容 + hint 未关闭」这一结构谓词成立时，由 Composer 在发送瞬间追加的模板
+ * 文案。
  *
  * 只在 `onSend` 的 segments 里出现；不出现在 `value` / `chips` / 剪贴板里。
  * 需要忽略它的业务可以直接 filter，或用 `isHintSegment` 收窄。

package/dist/chat-group/index.d.ts

@@ -24,6 +24,10 @@ export interface ChatGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ti
      * 左侧文件夹 icon（用户分组缩进标识）。默认 `false`。
      */
     folderIcon?: boolean;
+    /** 替换默认文件夹图标。 */
+    folder?: ReactNode;
+    /** 替换默认展开箭头。 */
+    chevron?: ReactNode;
     /**
      * 分区头样式（如「未分组」）。与 ChatList「分组」同为 12px / black-9，
      * 不是用户文件夹组。
@@ -36,6 +40,11 @@ export interface ChatGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ti
     extra?: ReactNode;
     /** 强制显示 extra（如菜单打开时） */
     extraVisible?: boolean;
+    /**
+     * 标题右侧条数。平时占宽；组头悬停、键盘焦点或 `extraVisible` 时退出，
+     * 同一位置换成 `extra`。不传则不展示。不从 children 计数。
+     */
+    count?: ReactNode;
     /**
      * 组内每页条数。默认 5；`false` 关闭分页（搜索命中等）。
      * 首次展开与每次「展开更多」都只增加一页，收起再打开回到第一页。
@@ -48,7 +57,7 @@ export interface ChatGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ti
     overflowHint?: boolean;
     children?: ReactNode;
 }
-export declare function ChatGroup({ title, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, renaming: renamingProp, defaultRenaming, onRenamingChange, onRename, folderIcon, section, extra, extraVisible, previewLimit, overflowHint, children, className, ...rest }: ChatGroupProps): React.JSX.Element;
+export declare function ChatGroup({ title, collapsible, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, renaming: renamingProp, defaultRenaming, onRenamingChange, onRename, folderIcon, folder, chevron, section, extra, extraVisible, count, previewLimit, overflowHint, children, className, ...rest }: ChatGroupProps): React.JSX.Element;
 export declare namespace ChatGroup {
     var displayName: string;
 }

package/dist/chat-group/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["title", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "renaming", "defaultRenaming", "onRenamingChange", "onRename", "folderIcon", "section", "extra", "extraVisible", "previewLimit", "overflowHint", "children", "className"];
+var _excluded = ["title", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "renaming", "defaultRenaming", "onRenamingChange", "onRename", "folderIcon", "folder", "chevron", "section", "extra", "extraVisible", "count", "previewLimit", "overflowHint", "children", "className"];
 import clsx from 'clsx';
 import React, { Children, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import HoverFill from "../hover-fill";
@@ -66,10 +66,13 @@ export function ChatGroup(_ref2) {
     onRename = _ref2.onRename,
     _ref2$folderIcon = _ref2.folderIcon,
     folderIcon = _ref2$folderIcon === void 0 ? false : _ref2$folderIcon,
+    folder = _ref2.folder,
+    chevron = _ref2.chevron,
     _ref2$section = _ref2.section,
     section = _ref2$section === void 0 ? false : _ref2$section,
     extra = _ref2.extra,
     extraVisible = _ref2.extraVisible,
+    count = _ref2.count,
     previewLimit = _ref2.previewLimit,
     _ref2$overflowHint = _ref2.overflowHint,
     overflowHint = _ref2$overflowHint === void 0 ? true : _ref2$overflowHint,
@@ -172,15 +175,31 @@ export function ChatGroup(_ref2) {
   }, /*#__PURE__*/React.createElement("div", {
     "data-odn-chat-group-slot-inner": true
   }, expandHint)) : expandHint : null);
+  var showCount = !editingTitle && count !== null && count !== undefined && count !== false && count !== '';
+  var showExtra = Boolean(extra) && !editingTitle;
+  // 条数和 extra 叠在同一格里，格子宽度取两者较大值。
+  // 让位时只切换可见性，长标题旁的箭头不会跟着挪。
+  var showTrailing = showCount && showExtra ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-group-aside": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-group-count": true
+  }, count), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-group-extra": true
+  }, extra)) : /*#__PURE__*/React.createElement(React.Fragment, null, showCount ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-group-count": true
+  }, count) : null, showExtra ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-group-extra": true
+  }, extra) : null);
   var header = /*#__PURE__*/React.createElement("div", {
     "data-odn-chat-group-header": true
   }, editingTitle ? /*#__PURE__*/React.createElement("div", {
     "data-odn-chat-group-rename": true
-  }, folderIcon ? /*#__PURE__*/React.createElement(Icon, {
-    name: "folder",
-    size: 14,
+  }, folderIcon ? /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-folder-icon": true
-  }) : null, /*#__PURE__*/React.createElement("input", {
+  }, folder !== null && folder !== void 0 ? folder : /*#__PURE__*/React.createElement(Icon, {
+    name: "folder",
+    size: 14
+  })) : null, /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     value: draft,
     "aria-label": "\u91CD\u547D\u540D\u5206\u7EC4",
@@ -208,27 +227,28 @@ export function ChatGroup(_ref2) {
     "data-odn-chat-group-trigger": true,
     onClick: toggle,
     "aria-expanded": !collapsed
-  }, folderIcon ? /*#__PURE__*/React.createElement(Icon, {
-    name: "folder",
-    size: 14,
+  }, folderIcon ? /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-folder-icon": true
-  }) : null, /*#__PURE__*/React.createElement("span", {
+  }, folder !== null && folder !== void 0 ? folder : /*#__PURE__*/React.createElement(Icon, {
+    name: "folder",
+    size: 14
+  })) : null, /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-title": true
-  }, title), /*#__PURE__*/React.createElement(Icon, {
-    name: "right",
-    size: 12,
+  }, title), /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-chevron": true
-  })) : /*#__PURE__*/React.createElement("div", {
+  }, chevron !== null && chevron !== void 0 ? chevron : /*#__PURE__*/React.createElement(Icon, {
+    name: "right",
+    size: 12
+  }))) : /*#__PURE__*/React.createElement("div", {
     "data-odn-chat-group-title-row": true
-  }, folderIcon ? /*#__PURE__*/React.createElement(Icon, {
-    name: "folder",
-    size: 14,
+  }, folderIcon ? /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-folder-icon": true
-  }) : null, /*#__PURE__*/React.createElement("span", {
+  }, folder !== null && folder !== void 0 ? folder : /*#__PURE__*/React.createElement(Icon, {
+    name: "folder",
+    size: 14
+  })) : null, /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-group-title": true
-  }, title)), extra && !editingTitle ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-group-extra": true
-  }, extra) : null);
+  }, title)), showTrailing);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-odn-chat-group": true,
     "data-odn-chat-group-collapsed": collapsed || undefined,

package/dist/chat-group/style/index.css

@@ -26,6 +26,9 @@
 [data-odn-chat-group-header]:hover, [data-odn-chat-group-header]:has(:focus-visible) {
   gap: 4px;
 }
+[data-odn-chat-group-header]:hover:has([data-odn-chat-group-aside]), [data-odn-chat-group-header]:has(:focus-visible):has([data-odn-chat-group-aside]) {
+  gap: 0;
+}
 [data-odn-chat-group-header]:hover [data-odn-chat-group-extra], [data-odn-chat-group-header]:has(:focus-visible) [data-odn-chat-group-extra] {
   flex-basis: auto;
   width: auto;
@@ -39,6 +42,10 @@
   gap: 4px;
 }
 
+[data-odn-chat-group-extra-visible] [data-odn-chat-group-header]:has([data-odn-chat-group-aside]) {
+  gap: 0;
+}
+
 [data-odn-chat-group-extra-visible] [data-odn-chat-group-extra] {
   flex-basis: auto;
   width: auto;
@@ -115,6 +122,51 @@
   white-space: nowrap;
 }
 
+[data-odn-chat-group-count] {
+  flex: none;
+  color: var(--odn-color-black-9);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+[data-odn-chat-group-aside] {
+  display: grid;
+  flex: none;
+  align-items: center;
+  justify-items: end;
+}
+
+[data-odn-chat-group-aside] > [data-odn-chat-group-count],
+[data-odn-chat-group-aside] > [data-odn-chat-group-extra] {
+  grid-area: 1/1;
+}
+
+[data-odn-chat-group-aside] > [data-odn-chat-group-extra] {
+  width: auto;
+  max-width: none;
+  min-width: 0;
+  flex-basis: auto;
+  overflow: visible;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-odn-chat-group-header]:hover [data-odn-chat-group-aside] > [data-odn-chat-group-count],
+[data-odn-chat-group-header]:has(:focus-visible) [data-odn-chat-group-aside] > [data-odn-chat-group-count],
+[data-odn-chat-group-extra-visible] [data-odn-chat-group-aside] > [data-odn-chat-group-count] {
+  visibility: hidden;
+}
+
+[data-odn-chat-group-header]:hover [data-odn-chat-group-aside] > [data-odn-chat-group-extra],
+[data-odn-chat-group-header]:has(:focus-visible) [data-odn-chat-group-aside] > [data-odn-chat-group-extra],
+[data-odn-chat-group-extra-visible] [data-odn-chat-group-aside] > [data-odn-chat-group-extra] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
 [data-odn-chat-group-extra] {
   flex: 0 0 0;
   display: flex;

package/dist/composer/editor.js

@@ -29,7 +29,7 @@ import { buildClipboardPayload, COMPOSER_CLIPBOARD_MIME, parseClipboardPayload,
 import { useChipManager } from "./hooks/useChipManager";
 import { useChipSelectionMarker } from "./hooks/useChipSelectionMarker";
 import { chipHasEditableParams, ComposerInlineRef } from "./inline-ref";
-import { resolveHintTarget } from "./segments";
+import { resolveHintClosedChipIds, resolveHintTarget } from "./segments";
 import { COMPOSER_HINT_ACCEPT_ATTR, COMPOSER_HINT_ACCEPT_SELECTOR, COMPOSER_HINT_ATTR, createLineRoot, createLineRootWithText, ensureCaretAnchorAfter, ensureLineRoots, getPlainText, isEditorEmpty, isLineRoot, LINE_ATTR_NAME, normalizeEditorDom, probeTrigger, stripInvisibleChars, ZWSP } from "./utils";
 
 /** Composer editor 触发态对外信号——告诉父组件该弹浮层选 skill 了。 */
@@ -490,6 +490,9 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
   var getChipsRef = useRef(function () {
     return [];
   });
+  /* hint 关闭器：与 getChipsRef 同一套「ref 打破声明顺序」做法——fireChange 声明
+   * 在 useChipManager 之前，而关闭方法由后者提供。 */
+  var closeChipHintsRef = useRef(function () {});
 
   /* ---- 派生 hint：imperative DOM 同步 ----
    * hint 必须是 chip host 的**兄弟节点**，不能塞在 host 内部：host 是
@@ -615,11 +618,16 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     normalizeEditorDom(el);
     var chips = getChipsRef.current();
     var raw = getPlainText(el);
-    /* 派生 hint 与 value 同源同刻重算：结构谓词只依赖 raw + chips（换行也算
+    /* hint 是一次性的：先把「后面出现过东西」的 chip 永久关闭，再算谓词。
+     * 顺序不能反——反了的话，删到空的那一帧会先渲染出灰字再被移除（闪一下）。
+     * 关闭会改写 chips 快照，所以谓词必须用关闭后的快照重新取。
+     *
+     * 派生 hint 与 value 同源同刻重算：结构谓词只依赖 raw + chips（换行也算
      * 内容，所以按 Enter 后 hint 自动消失）。必须先落 DOM 再算 empty / 高度——
      * 否则「chip 被删」时残留的 hint 文本会让 placeholder 判定与 lite 升格
      * 判定晚一拍。 */
-    syncHintNode(resolveHintTarget(raw, chips));
+    closeChipHintsRef.current(resolveHintClosedChipIds(raw, chips));
+    syncHintNode(resolveHintTarget(raw, getChipsRef.current()));
     var showPlaceholder = shouldShowPlaceholder(el);
     if (forceNonEmptyOnceRef.current && showPlaceholder) {
       setEmpty(false);
@@ -648,10 +656,12 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     syncChipsAfterDomMutation = _useChipManager.syncChipsAfterDomMutation,
     removeChip = _useChipManager.removeChip,
     updateChipData = _useChipManager.updateChipData,
+    closeChipHints = _useChipManager.closeChipHints,
     getChipHost = _useChipManager.getChipHost,
     getChips = _useChipManager.getChips,
     resetChips = _useChipManager.resetChips;
   getChipsRef.current = getChips;
+  closeChipHintsRef.current = closeChipHints;
   useChipSelectionMarker(editorRef, chips);
   var insertSerializedAtRangeRef = useRef(insertSerializedAtRange);
   insertSerializedAtRangeRef.current = insertSerializedAtRange;

package/dist/composer/hooks/useChipManager.d.ts

@@ -49,6 +49,14 @@ export interface UseChipManagerReturn {
     removeChip: (id: string) => void;
     /** 更新 chip 数据（参数面板关闭保存等）。 */
     updateChipData: (id: string, patch: Partial<ChipData>) => void;
+    /**
+     * 把这些 chip 的 hint 标记为已关闭（`ChipData.hintClosed`）。
+     *
+     * 只改 chips 快照里的数据，**不抛 onChange / 不走 onAfterMutate**：调用点在
+     * fireChange 内部，走 onAfterMutate 会立刻再进一次 fireChange（递归）。
+     * 幂等：已经关闭的 / 不存在的 id 直接忽略。
+     */
+    closeChipHints: (ids: readonly string[]) => void;
     /** 按 id 取 chip host（参数面板 anchor）。 */
     getChipHost: (id: string) => HTMLSpanElement | null;
     /** 当前 chip 快照（读 ref，插入后同步 onChange 时可用）。 */

package/dist/composer/hooks/useChipManager.js

@@ -397,6 +397,27 @@ onAfterMutate) {
     setChips(next);
     onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
   }, [onAfterMutate]);
+  var closeChipHints = useCallback(function (ids) {
+    if (ids.length === 0) return;
+    var targets = new Set(ids);
+    var mutated = false;
+    /* 不就地写 `data`：insertChip / insertSerializedAtRange 拿到的对象可能属于
+     * 调用方（defaultChips / insertContent 的 chips），原地改会把内部状态写到
+     * 业务数据上。 */
+    var next = chipsRef.current.map(function (chip) {
+      if (!targets.has(chip.data.id) || chip.data.hintClosed) return chip;
+      mutated = true;
+      return _objectSpread(_objectSpread({}, chip), {}, {
+        data: _objectSpread(_objectSpread({}, chip.data), {}, {
+          hintClosed: true
+        })
+      });
+    });
+    if (!mutated) return;
+    chipsRef.current = next;
+    // 不调 onAfterMutate：调用方就在 fireChange 里，否则会递归
+    setChips(next);
+  }, []);
   var getChipHost = useCallback(function (id) {
     var _chipsRef$current$fin, _chipsRef$current$fin2;
     return (_chipsRef$current$fin = (_chipsRef$current$fin2 = chipsRef.current.find(function (c) {
@@ -422,6 +443,7 @@ onAfterMutate) {
     syncChipsAfterDomMutation: syncChipsAfterDomMutation,
     removeChip: removeChip,
     updateChipData: updateChipData,
+    closeChipHints: closeChipHints,
     getChipHost: getChipHost,
     getChips: getChips,
     resetChips: resetChips

package/dist/composer/index.d.ts

@@ -111,11 +111,11 @@ export interface ComposerProps {
      * `segments`：有序内容 IR，业务按数组顺序自定义拼后端。
      * `meta`：附件 / 联网搜索等非正文数据；为空时不传。
      *
-     * **派生 `hint` 段**：当最后一个 chip 是带 `SkillItem.hint` 的 skill、且其后
-     * 一个字符都没有（空格 / 换行都算内容）时，该提示文案会作为
-     * `{ type: 'hint', data: { text } }` 出现在 segments 末尾——与输入框里那段
-     * 灰字同源同谓词，不会漂移。不需要它的业务直接 filter / `isHintSegment`
-     * 判一下即可。
+     * **派生 `hint` 段**：当最后一个 chip 是带 `SkillItem.hint` 的 skill、其后
+     * 一个字符都没有（空格 / 换行都算内容）、且这颗 chip 的 hint 还没关闭时，
+     * 该提示文案会作为 `{ type: 'hint', data: { text } }` 出现在 segments 末尾
+     * ——与输入框里那段灰字同源同谓词，不会漂移。不需要它的业务直接 filter /
+     * `isHintSegment` 判一下即可。
      *
      * 兼容旧链路（需要单串文本）：业务可调 `segmentsToReadableText(segments)`。
      *

package/dist/composer/index.js

@@ -514,9 +514,10 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
    *   - segments：有序 IR（text / invocation / mention 交替）
    *   - meta：attachments / webSearch 等非正文数据；都为空时不传
    *
-   * 派生 hint：最后一个 chip 是 skill 且其后没有内容时，`rawValueToSegments`
-   * 会在末尾追加一段 `hint`（与该 chip 后面渲染的灰字同源、同谓词）。
-   * 它不属于用户输入，也不是受控 value 的一部分。
+   * 派生 hint：最后一个 chip 是 skill、其后没有内容、且它的 hint 还没关闭时，
+   * `rawValueToSegments` 会在末尾追加一段 `hint`（与该 chip 后面渲染的灰字
+   * 同源、同谓词）。它不属于用户输入，也不是受控 value 的一部分；hint 一旦
+   * 关闭（`ChipData.hintClosed`）就不再追加——没显示给用户的模板不会被发出去。
    *
    * 需要单串文本的业务方在 onSend 内自行调 segmentsToReadableText。
    * onSend 返回 false 或 Promise<false> 时视为发送失败，不清空；否则正常清空。

package/dist/composer/segments.d.ts

@@ -6,7 +6,10 @@
  * - `rawValueToSegments`：库内部用，把含零宽 marker 的 raw value + chip 列表
  *   还原为 `ComposerSegment[]`。
  * - `resolveHintTarget`：结构谓词——「最后一个 chip 之后一个字符都没有
- *   （空格 / 换行都算内容）+ 该 chip 带 hint」，渲染与发送都靠它。
+ *   （空格 / 换行都算内容）+ 该 chip 带 hint + hint 未关闭」，渲染与发送
+ *   都靠它。
+ * - `resolveHintClosedChipIds`：找出「一次性机会已作废」的 chip（自己的尾串
+ *   出现过内容），由编辑器写回 `ChipData.hintClosed`。
  * - `segmentsToReadableText`：业务可选工具，按指定占位符格式把 segments 拼成
  *   一句话（默认 `[Skill: label]` / `[@label]`，与 ComposerMention 兼容）。
  * - `segmentsHasContent`：是否含可见内容；库内 send 校验用，业务可复用。
@@ -31,14 +34,30 @@ export interface ComposerHintTarget {
  * 1. `value` 里存在 marker（即至少有一个 chip）
  * 2. 最后一个 marker 之后**一个字符都没有**（空格 / 换行都算内容）
  * 3. 该 marker 对应的 chip 带 hint 文本（`@` 触发的 mention chip 不参与）
+ * 4. 该 chip 的 hint 还没关闭（`hintClosed`，一次性）
  */
 export declare function resolveHintTarget(raw: string, chips: ChipData[]): ComposerHintTarget | null;
+/**
+ * 找出「hint 的一次性机会已经作废」的 chip id（编辑器据此写回 `hintClosed`）。
+ *
+ * 判据只看每颗 chip **后面出现过什么**：本 marker 与下个 marker 之间有字符
+ * （文字 / 空格 / 换行），或者后面还有别的 marker（又插了一块），hint 的
+ * 机会就作废。因此它同时覆盖两类情况：
+ * - 插入时就落在正文中间（或后面紧跟着另一块）：hint 从未出现，之后把后面
+ *   删空也不该再冒出来
+ * - 展示过又被内容顶掉：删回空串也不该回来
+ *
+ * 纯函数，幂等（已关闭的 chip 直接跳过，重复调用结果一致）；没有 hint 文本的
+ * chip 不参与——没能力 ≠ 状态。
+ */
+export declare function resolveHintClosedChipIds(raw: string, chips: ChipData[]): string[];
 /**
  * 从含零宽 marker 的 raw value + chip 列表构建有序 segments。
  *
  * 这是「编辑器状态 → 发送内容」的**唯一映射**：
  * 1. marker 依次还原为 invocation / mention，与文本段按出现顺序交替
- * 2. 末尾按结构谓词补一段派生的 `hint`（skill 在最后且其后一个字符都没有时）
+ * 2. 末尾按结构谓词补一段派生的 `hint`（skill 在最后、其后一个字符都没有、
+ *    且 hint 还没关闭时）
  *
  * 因此 `rawValueToSegments(value, chips)` 与 `onSend` 收到的 segments 一致，
  * 业务可以放心用它做预览 / 调试。

package/dist/composer/segments.js

@@ -6,7 +6,10 @@
  * - `rawValueToSegments`：库内部用，把含零宽 marker 的 raw value + chip 列表
  *   还原为 `ComposerSegment[]`。
  * - `resolveHintTarget`：结构谓词——「最后一个 chip 之后一个字符都没有
- *   （空格 / 换行都算内容）+ 该 chip 带 hint」，渲染与发送都靠它。
+ *   （空格 / 换行都算内容）+ 该 chip 带 hint + hint 未关闭」，渲染与发送
+ *   都靠它。
+ * - `resolveHintClosedChipIds`：找出「一次性机会已作废」的 chip（自己的尾串
+ *   出现过内容），由编辑器写回 `ChipData.hintClosed`。
  * - `segmentsToReadableText`：业务可选工具，按指定占位符格式把 segments 拼成
  *   一句话（默认 `[Skill: label]` / `[@label]`，与 ComposerMention 兼容）。
  * - `segmentsHasContent`：是否含可见内容；库内 send 校验用，业务可复用。
@@ -36,17 +39,22 @@ export var isHintSegment = function isHintSegment(s) {
 };
 
 /* ────────────────────────────────────────────────────────────────────
- * Hint 结构谓词 · 「最后一个 chip + 其后一个字符都没有」
+ * Hint 结构谓词 · 「最后一个 chip + 其后一个字符都没有 + 没关闭」
  *
  * hint 不是内容，而是内容结构的投影：只要最后一个 chip 之后的 value 是
- * **空串**，且该 chip 带 hint，就命中。
+ * **空串**，且该 chip 带 hint、且它的 hint 还没关闭，就命中。
  *
  * 空格、换行、文字**都算内容**：用户在 chip 后面敲下第一个字符 / 按下
  * Enter（含 Shift+Enter）都说明 skill 块之后已经有东西了，hint 必须让位。
- * 反过来，把这些字符（包括换行）删干净、chip 后面重新变成空串，hint 才回来。
  * 插入 chip 本身不会写空格（见 useChipManager.insertChip）：行尾插入后尾串
  * 就是空串，hint 立刻命中，不需要为「自动补的空格」做特殊判断。
  *
+ * hint 是**一次性**的：只要这颗 chip 后面出现过东西——文字 / 空格 / 换行，
+ * 或者又插了一块——hint 就永久关闭（`ChipData.hintClosed`），之后把内容删回
+ * 空串也不会再出现，发送时也不再补 `hint` 段。因此「插入时后面本来就有内容」
+ * 的 chip 从一开始就是关闭态，不会因为后面被删空而凭空冒出灰字。关闭由
+ * `resolveHintClosedChipIds` 判定、编辑器在同一次内容变化里写回。
+ *
  * 谓词与光标位置无关——用户在前面打字不影响。**渲染（Editor）与发送
  * （Composer）都只依赖这一个谓词**，每次内容变化重算一次，两处永远一致。
  * ──────────────────────────────────────────────────────────────────── */
@@ -56,7 +64,7 @@ export var isHintSegment = function isHintSegment(s) {
 /**
  * 最后一个 marker 的 chip id 与它之后的尾串；没有 chip 时返回 null。
  *
- * 「尾串」是 hint 判定的唯一输入：谓词要求它是**空串**。
+ * 「尾串」是结构判定的一部分：谓词要求它是**空串**（另外还要求 hint 未关闭）。
  */
 function getLastMarkerTail(raw) {
   var markers = parseMarkers(raw);
@@ -73,6 +81,7 @@ function getLastMarkerTail(raw) {
  * 1. `value` 里存在 marker（即至少有一个 chip）
  * 2. 最后一个 marker 之后**一个字符都没有**（空格 / 换行都算内容）
  * 3. 该 marker 对应的 chip 带 hint 文本（`@` 触发的 mention chip 不参与）
+ * 4. 该 chip 的 hint 还没关闭（`hintClosed`，一次性）
  */
 export function resolveHintTarget(raw, chips) {
   var _chip$hint;
@@ -83,19 +92,64 @@ export function resolveHintTarget(raw, chips) {
   });
   if (!chip || chip.kind === 'mention') return null;
   var text = (_chip$hint = chip.hint) === null || _chip$hint === void 0 ? void 0 : _chip$hint.trim();
-  if (!text) return null;
+  if (!text || chip.hintClosed) return null;
   return {
     chipId: chip.id,
     text: text
   };
 }
 
+/**
+ * 找出「hint 的一次性机会已经作废」的 chip id（编辑器据此写回 `hintClosed`）。
+ *
+ * 判据只看每颗 chip **后面出现过什么**：本 marker 与下个 marker 之间有字符
+ * （文字 / 空格 / 换行），或者后面还有别的 marker（又插了一块），hint 的
+ * 机会就作废。因此它同时覆盖两类情况：
+ * - 插入时就落在正文中间（或后面紧跟着另一块）：hint 从未出现，之后把后面
+ *   删空也不该再冒出来
+ * - 展示过又被内容顶掉：删回空串也不该回来
+ *
+ * 纯函数，幂等（已关闭的 chip 直接跳过，重复调用结果一致）；没有 hint 文本的
+ * chip 不参与——没能力 ≠ 状态。
+ */
+export function resolveHintClosedChipIds(raw, chips) {
+  /* 先看有没有「还开着 hint 的 chip」：没有就不必解析 marker（无 hint 的
+   * composer 每次输入都会走到这里）。 */
+  var hasCandidate = chips.some(function (chip) {
+    var _chip$hint2;
+    return chip.kind !== 'mention' && !chip.hintClosed && !!((_chip$hint2 = chip.hint) !== null && _chip$hint2 !== void 0 && _chip$hint2.trim());
+  });
+  if (!hasCandidate || !raw) return [];
+  var markers = parseMarkers(raw);
+  if (markers.length === 0) return [];
+  var chipById = new Map(chips.map(function (chip) {
+    return [chip.id, chip];
+  }));
+  var closed = [];
+  var seen = new Set();
+  markers.forEach(function (marker, index) {
+    var _chip$hint3, _next$rawStart;
+    var chip = chipById.get(marker.id);
+    if (!chip || chip.kind === 'mention' || chip.hintClosed) return;
+    if (!((_chip$hint3 = chip.hint) !== null && _chip$hint3 !== void 0 && _chip$hint3.trim()) || seen.has(chip.id)) return;
+    var next = markers[index + 1];
+    /* 尾串 = 本 marker 结束 → 下个 marker 开始 */
+    var hasTextAfter = raw.slice(marker.rawEnd, (_next$rawStart = next === null || next === void 0 ? void 0 : next.rawStart) !== null && _next$rawStart !== void 0 ? _next$rawStart : raw.length).length > 0;
+    if (next || hasTextAfter) {
+      seen.add(chip.id);
+      closed.push(chip.id);
+    }
+  });
+  return closed;
+}
+
 /**
  * 从含零宽 marker 的 raw value + chip 列表构建有序 segments。
  *
  * 这是「编辑器状态 → 发送内容」的**唯一映射**：
  * 1. marker 依次还原为 invocation / mention，与文本段按出现顺序交替
- * 2. 末尾按结构谓词补一段派生的 `hint`（skill 在最后且其后一个字符都没有时）
+ * 2. 末尾按结构谓词补一段派生的 `hint`（skill 在最后、其后一个字符都没有、
+ *    且 hint 还没关闭时）
  *
  * 因此 `rawValueToSegments(value, chips)` 与 `onSend` 收到的 segments 一致，
  * 业务可以放心用它做预览 / 调试。

package/dist/skill-card/index.js

@@ -82,9 +82,9 @@ export var skillCardSwitchStyle = {
   '--odn-switch-track-bg': 'rgba(74, 97, 143, 0.1)',
   '--odn-switch-track-bg-hover': 'rgba(74, 97, 143, 0.14)',
   '--odn-switch-track-bg-active': 'rgba(74, 97, 143, 0.18)',
-  '--odn-switch-track-bg-checked': '#2694FD',
-  '--odn-switch-track-bg-checked-hover': '#2694FD',
-  '--odn-switch-track-bg-checked-active': '#2694FD'
+  '--odn-switch-track-bg-checked': 'var(--odn-color-brand-6)',
+  '--odn-switch-track-bg-checked-hover': 'var(--odn-color-brand-6)',
+  '--odn-switch-track-bg-checked-active': 'var(--odn-color-brand-6)'
 };
 var TAG_GAP = 6;
 var MIN_TRUNCATABLE_TAG_WIDTH = 36;

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

@@ -5,12 +5,16 @@ html {
   --odn-skill-card-action-gap: 8px;
   --odn-skill-card-hover-duration: 0.3s;
   --odn-skill-card-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
-  --odn-skill-card-text: rgba(0, 0, 0, 0.95);
-  --odn-skill-card-secondary: rgba(51, 55, 61, 0.58);
-  --odn-skill-card-source: #296bef;
-  --odn-skill-card-source-bg: rgba(41, 107, 239, 0.1);
-  --odn-skill-card-soft-bg: rgba(74, 97, 143, 0.08);
-  --odn-skill-card-border: rgba(74, 97, 143, 0.08);
+  --odn-skill-card-text: var(--odn-color-black-12);
+  --odn-skill-card-secondary: var(--odn-color-black-9);
+  --odn-skill-card-source: var(--odn-color-brand-6);
+  --odn-skill-card-source-bg: color-mix(
+    in srgb,
+    var(--odn-color-brand-6) 10%,
+    transparent
+  );
+  --odn-skill-card-soft-bg: var(--odn-color-black-3);
+  --odn-skill-card-border: var(--odn-color-black-3);
 }
 
 [data-odn-skill-card] {
@@ -73,7 +77,7 @@ html {
   width: 230px;
   height: 130px;
   transform: rotate(-8.4deg);
-  background-image: radial-gradient(ellipse at center, rgb(38, 148, 253), transparent 60%);
+  background-image: radial-gradient(ellipse at center, var(--odn-color-brand-6), transparent 60%);
 }
 
 [data-odn-skill-card][data-odn-skill-card-hoverable=true]:hover [data-odn-skill-card-glow] {
@@ -107,7 +111,7 @@ html {
   overflow: hidden;
   border: 1px solid var(--odn-color-black-1);
   border-radius: 8px;
-  color: rgb(38, 148, 253);
+  color: var(--odn-color-brand-6);
   object-fit: cover;
 }
 
@@ -132,7 +136,7 @@ html {
 [data-odn-skill-card-copy] {
   position: absolute;
   top: var(--odn-skill-card-padding);
-  right: 70px;
+  right: var(--odn-skill-card-padding);
   left: 80px;
   z-index: 20;
   display: flex;
@@ -144,6 +148,10 @@ html {
   transition: left var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), right var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease), transform var(--odn-skill-card-hover-duration) var(--odn-skill-card-hover-ease);
 }
 
+[data-odn-skill-card][data-odn-skill-card-control=toggle] [data-odn-skill-card-copy] {
+  right: 70px;
+}
+
 [data-odn-skill-card][data-odn-skill-card-control=add] [data-odn-skill-card-copy] {
   right: 62px;
 }
@@ -185,8 +193,8 @@ html {
 
 [data-odn-skill-card-name] {
   min-width: 0;
-  max-width: calc(100% - 8px);
-  flex: 0 1 auto;
+  max-width: 100%;
+  flex: 0 0 auto;
   overflow: hidden;
   color: var(--odn-skill-card-text);
   font-size: 14px;
@@ -198,7 +206,7 @@ html {
 
 [data-odn-skill-card-alias] {
   min-width: 0;
-  flex: 1 1 0;
+  flex: 1 1 auto;
   overflow: hidden;
   color: var(--odn-skill-card-secondary);
   font-size: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",
@@ -79,6 +79,7 @@
     "echarts": "^6.1.0",
     "echarts-for-react": "^3.0.6",
     "ldrs": "^1.1.9",
+    "modern-screenshot": "4.7.0",
     "motion": "^12.40.0",
     "rc-cascader": "^3.34.0",
     "rc-select": "^14.16.8",
@@ -90,7 +91,9 @@
     "rc-virtual-list": "^3.19.2",
     "react-d3-cloud": "^1.0.6",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "tdesign-icons-react": "0.6.11",
+    "tdesign-react": "1.18.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",