one-design-next 0.0.120 → 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/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.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",