one-design-next 0.0.119 → 0.0.121

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

@@ -22,6 +22,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { svgData } from "../icon/svg-data";
 import ScrollArea from "../scroll-area";
 import { caretBeforeHintIn, caretRangeFromPoint, findChipHostBeforeCaret, getCaretBeforeHint, getCurrentLine, isCaretBeforeHint, isCaretOnHintLine, isPointOnHint, isPositionAfterHint, mergeLineIntoPreviousAtCaretStart, normalizeCollapsedCaretAtChipBoundary, normalizeCollapsedCaretBeforeHint, resolveCaretMove, splitLineAt, wouldArrowCrossHint } from "./caret";
 import { buildClipboardPayload, COMPOSER_CLIPBOARD_MIME, parseClipboardPayload, plainTextFromClipboardPayload, remapClipboardPayload } from "./clipboard";
@@ -102,8 +103,36 @@ var findDirectHint = function findDirectHint(line) {
   return null;
 };
 
+/** 小块右侧的箭头图标：OD icon `arrow-right-to-line`（文案 → 填入的指向）。 */
+var HINT_ACCEPT_ICON_NAME = 'arrow-right-to-line';
+
+/**
+ * 拼一个 `<svg>` 图标节点。
+ *
+ * 小块由 DOM API 直接构建（editor 的 children 归 contenteditable 自治，不走
+ * React），所以这里从图标数据里取 viewBox / content 自己建元素；描边用
+ * `currentColor`，颜色跟随父级文字色。尺寸取 12：与本块 12px 文案同高，
+ * Lucide 的 24 viewBox 缩到 12 后描边正好 1px，与文字笔画同重。
+ */
+var createHintAcceptArrowNode = function createHintAcceptArrowNode() {
+  var _svgData$HINT_ACCEPT_ = svgData[HINT_ACCEPT_ICON_NAME],
+    viewBox = _svgData$HINT_ACCEPT_.viewBox,
+    content = _svgData$HINT_ACCEPT_.content;
+  var arrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  arrow.setAttribute('data-odn-composer-hint-accept-arrow', '');
+  arrow.setAttribute('viewBox', viewBox);
+  arrow.setAttribute('width', '12');
+  arrow.setAttribute('height', '12');
+  arrow.setAttribute('fill', 'none');
+  /* 装饰性图标：文案已经说清动作，不给读屏重复播报。 */
+  arrow.setAttribute('aria-hidden', 'true');
+  arrow.setAttribute('focusable', 'false');
+  arrow.innerHTML = content;
+  return arrow;
+};
+
 /**
- * hint 末尾的「按 TAB 键填入」小块：点它 = 按 Tab 填入这段模板文案。
+ * hint 末尾的「TAB 键填入」小块：点它 = 按 Tab 填入这段模板文案。
  *
  * 与 hint 文本是同级节点（见 `COMPOSER_HINT_ACCEPT_ATTR` 的说明），由
  * `syncHintNode` 一起插入 / 移除，不进 value / 剪贴板 / segments。
@@ -120,16 +149,13 @@ var createHintAcceptNode = function createHintAcceptNode() {
    * - aria-label 会盖掉可见文案，反而违反「可见标签即无障碍名」。
    * - title 是浏览器原生 tooltip：延迟出现、样式不可控、会盖住灰字。 */
 
-  var prefix = document.createElement('span');
-  prefix.setAttribute('data-odn-composer-hint-accept-prefix', '');
-  prefix.textContent = '按';
   var key = document.createElement('span');
   key.setAttribute('data-odn-composer-hint-accept-key', '');
   key.textContent = 'TAB';
   var label = document.createElement('span');
   label.setAttribute('data-odn-composer-hint-accept-label', '');
   label.textContent = '键填入';
-  accept.append(prefix, key, label);
+  accept.append(key, label, createHintAcceptArrowNode());
   return accept;
 };
 
@@ -473,7 +499,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
    * 它不归 React 管（editor 的 children 由 contenteditable 自治），由 fireChange
    * 按结构谓词增删/挪位；`getPlainText` 会整棵子树跳过，所以不进 value / 剪贴板。
    *
-   * 末尾的「按 TAB 键填入」小块是 hint 文本的**兄弟节点**（不是子节点）：hint 的
+   * 末尾的「TAB 键填入」小块是 hint 文本的**兄弟节点**（不是子节点）：hint 的
    * textContent 必须保持纯提示文案（采纳时直接落成正文，调试面板也按它读）。 */
   var hintNodeRef = useRef(null);
   var hintAcceptNodeRef = useRef(null);
@@ -521,7 +547,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     var cur = host.nextSibling;
     while (cur) {
       var _cur$textContent;
-      // 跳过 hint 自身与它的「按 TAB 键填入」小块：上一轮若排到了锚点前面，
+      // 跳过 hint 自身与它的「TAB 键填入」小块：上一轮若排到了锚点前面，
       // 这里顺手挪回末尾
       if (cur === node || cur === accept) {
         cur = cur.nextSibling;
@@ -550,7 +576,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     if (node.parentNode !== parent || node.previousSibling !== anchor) {
       parent.insertBefore(node, anchor.nextSibling);
     }
-    /* 「按 TAB 键填入」小块紧跟 hint 文案之后（同一套行内流），顺序必须是
+    /* 「TAB 键填入」小块紧跟 hint 文案之后（同一套行内流），顺序必须是
      * hint → 小块：caret 的合法落点只到 hint 之前，块本身
      * contentEditable=false，不会成为落点。 */
     if (accept.parentNode !== parent || accept.previousSibling !== node) {
@@ -660,14 +686,14 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
   recomputeTriggerRef.current = recomputeTrigger;
 
   /* ─────────────────────────────────────
-   * 采纳 hint（Tab / 点击「按 TAB 键填入」小块）
+   * 采纳 hint（Tab / 点击「TAB 键填入」小块）
    *
    * hint 只是结构投影（不进 value）；caret 恰好停在 chip 与 hint 之间
    * （= 内容末尾）时按 Tab，表示用户接受这段模板，于是把提示文案落成正文：
    * chip 之后出现内容 → 结构谓词不再命中 → 灰字自动移除，onChange 抛出的
    * value 里带上这段文案，与用户自己敲进去的效果一致。
    *
-   * 鼠标点末尾的「按 TAB 键填入」小块走**同一条链路**，只是带 `force`：
+   * 鼠标点末尾的「TAB 键填入」小块走**同一条链路**，只是带 `force`：
    * 不要求点击前 caret 就停在 hint 之前，先把 caret 归位到 chip 右侧再落。
    * ───────────────────────────────────── */
   var acceptHintAsText = useCallback(function (options) {
@@ -1219,7 +1245,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
     // shift+click 是扩选，不劫持
     if (e.shiftKey) return;
 
-    /* 「按 TAB 键填入」小块：点它等价于按 Tab（同一条采纳链路），且不要求点击前
+    /* 「TAB 键填入」小块：点它等价于按 Tab（同一条采纳链路），且不要求点击前
      * caret 就停在 hint 之前。在 mousedown 阶段接管 + preventDefault，
      * 原生 caret 一帧都不会落到 hint 之后。 */
     if (e.target instanceof Element && e.target.closest(COMPOSER_HINT_ACCEPT_SELECTOR)) {

package/dist/composer/style/index.css

@@ -356,15 +356,16 @@
 }
 
 /* ------------------------------------------------------------------
- * hint 末尾的「按 TAB 键填入」小块（点击 = 按 Tab 填入，见 editor.tsx）
+ * hint 末尾的「TAB 键填入」小块（点击 = 按 Tab 填入，见 editor.tsx）
  *
  * 与 hint 文本是同级节点，一起增删。它不是正文：contentEditable=false、
  * getPlainText 整棵跳过，点它走 force 版 acceptHintAsText。
- * 尺寸对齐 Figma 9857:75425（90 × 22 / 圆角 6 / 内层键帽 28 × 16）：
+ * 尺寸对齐 Figma 9857:75425（22 高 / 圆角 6 / 内层键帽 28 × 16）；
+ * 宽度随内容自然撑开（键帽 + 「键填入」+ 12px 箭头图标，约 90）：
  *   - 编辑器固定 font-size 14 / line-height 24，块高 22 + top 1 → 视觉居中
  *     且不撑高行盒（改编辑器行高时要同步调这个 1px）
  *   - 底色 black-2(5%)、键帽 bg-elevated + black-5(12%) 1px 描边
- *   - 「按」「键填入」与键帽之间 gap 3，左右内边距 4
+ *   - 「键填入」与键帽之间 gap 3，左右内边距 4
  * ----------------------------------------------------------------- */
 [data-odn-composer] [data-odn-composer-hint-accept] {
   display: inline-flex;
@@ -416,12 +417,18 @@
   letter-spacing: 0;
 }
 
-[data-odn-composer] [data-odn-composer-hint-accept-prefix],
 [data-odn-composer] [data-odn-composer-hint-accept-label] {
   font-size: 12px;
   line-height: 20px;
 }
 
+/* 文案右侧的箭头图标（OD icon arrow-right-to-line，DOM 见 editor.tsx）：
+ * 宽高由 svg 属性锁 12，这里只保证它不被 flex 压缩。 */
+[data-odn-composer] [data-odn-composer-hint-accept-arrow] {
+  display: block;
+  flex: none;
+}
+
 /* 禁用态：hint 仍按内容结构展示，但小块不可点（与 editor 冻结一致） */
 [data-odn-composer] [data-odn-composer-editor][data-odn-composer-editor-disabled] [data-odn-composer-hint-accept] {
   cursor: not-allowed;

package/dist/composer/utils.d.ts

@@ -23,7 +23,7 @@ export declare const LINE_ATTR_NAME = "data-composer-line";
 export declare const COMPOSER_HINT_ATTR = "data-odn-composer-skill-hint";
 export declare const COMPOSER_HINT_SELECTOR = "[data-odn-composer-skill-hint]";
 /**
- * 派生 hint 末尾的「按 TAB 键填入」小块（可点击采纳）。
+ * 派生 hint 末尾的「TAB 键填入」小块（可点击采纳）。
  *
  * 与 hint 文本是**兄弟节点**（不是子节点）：hint 自身的 `textContent` 必须
  * 保持纯提示文案——采纳时直接把这段文字落成正文，且 `getPlainText` /

package/dist/composer/utils.js

@@ -40,7 +40,7 @@ export var COMPOSER_HINT_ATTR = 'data-odn-composer-skill-hint';
 export var COMPOSER_HINT_SELECTOR = "[".concat(COMPOSER_HINT_ATTR, "]");
 
 /**
- * 派生 hint 末尾的「按 TAB 键填入」小块（可点击采纳）。
+ * 派生 hint 末尾的「TAB 键填入」小块（可点击采纳）。
  *
  * 与 hint 文本是**兄弟节点**（不是子节点）：hint 自身的 `textContent` 必须
  * 保持纯提示文案——采纳时直接把这段文字落成正文，且 `getPlainText` /
@@ -302,7 +302,7 @@ export function getPlainText(editor) {
   var out = '';
   var visit = function visit(node) {
     if (node instanceof HTMLElement) {
-      // 派生 hint（含末尾的「按 TAB 键填入」小块）整棵子树都不是正文，直接跳过
+      // 派生 hint（含末尾的「TAB 键填入」小块）整棵子树都不是正文，直接跳过
       if (node.hasAttribute(COMPOSER_HINT_ATTR) || node.hasAttribute(COMPOSER_HINT_ACCEPT_ATTR)) return;
       var id = node.dataset[chipIdAttr];
       if (id) {

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.119",
+  "version": "0.0.121",
   "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",