one-design-next 0.0.50 → 0.0.52

package/dist/composer/index.d.ts

@@ -110,9 +110,15 @@ export interface ComposerProps {
      */
     skillGroups?: SkillGroup[];
     /**
-     * 技能管理回调。提供后会在 skill 弹窗底部渲染「管理技能」按钮。
+     * 技能管理回调。提供后会在 skill 弹窗底部渲染按钮。
      */
     onManageSkills?: () => void;
+    /**
+     * 技能管理按钮的自定义内容（ReactNode）。
+     * 仅在 `onManageSkills` 提供时生效。
+     * 不传时默认渲染「技能管理」文字 + 右箭头图标。
+     */
+    skillManageFooter?: React.ReactNode;
     /**
      * skill 弹窗列表的最大高度（px）。超出此高度后出现滚动条。
      * 不传则不限高（适合 skill 较少的场景）。

package/dist/composer/index.js

@@ -97,6 +97,7 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
     skills = _ref.skills,
     skillGroups = _ref.skillGroups,
     onManageSkills = _ref.onManageSkills,
+    skillManageFooter = _ref.skillManageFooter,
     skillMenuMaxHeight = _ref.skillMenuMaxHeight,
     skillMenuWidth = _ref.skillMenuWidth,
     _ref$submitType = _ref.submitType,
@@ -743,7 +744,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
         onSelect: function onSelect(s) {
           return handleSelectSkill(s, 'btn');
         },
-        onManageSkills: onManageSkills
+        onManageSkills: onManageSkills,
+        skillManageFooter: skillManageFooter
       })
     }, /*#__PURE__*/React.createElement(HoverFill, {
       "data-odn-composer-tool-btn-wrap": true,
@@ -956,7 +958,8 @@ export var Composer = /*#__PURE__*/forwardRef(function Composer(_ref, ref) {
       onSelect: function onSelect(s) {
         return handleSelectSkill(s, 'trigger');
       },
-      onManageSkills: onManageSkills
+      onManageSkills: onManageSkills,
+      skillManageFooter: skillManageFooter
     })
   }, /*#__PURE__*/React.createElement("div", {
     ref: triggerAnchorRef,

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

@@ -17,9 +17,16 @@ export interface SkillSlotProps {
     value?: string | null;
     onSelect?: (skill: SkillItem) => void;
     /**
-     * 技能管理回调。提供后 menu 变体会在列表底部渲染「管理技能」按钮。
+     * 技能管理回调。提供后 menu 变体会在列表底部渲染按钮。
+     * 按钮内容默认显示「技能管理」文字 + 右箭头图标；可通过 `skillManageFooter` 自定义。
      */
     onManageSkills?: () => void;
+    /**
+     * 技能管理按钮的自定义内容（ReactNode）。
+     * 仅在 `onManageSkills` 提供且 `variant='menu'` 时生效。
+     * 不传时默认渲染「技能管理」文字 + 右箭头图标。
+     */
+    skillManageFooter?: React.ReactNode;
     /**
      * 受控的"键盘高亮"项 index（区别于 `value` 的"业务选中"语义）。仅 menu 变体响应。
      *

package/dist/skill-slot/index.js

@@ -31,6 +31,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
     value = _ref.value,
     onSelect = _ref.onSelect,
     onManageSkills = _ref.onManageSkills,
+    skillManageFooter = _ref.skillManageFooter,
     activeIndex = _ref.activeIndex,
     onActiveIndexChange = _ref.onActiveIndexChange,
     menuMaxHeight = _ref.menuMaxHeight,
@@ -240,6 +241,10 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
   /* 渲染底部"技能管理"按钮（仅 menu 变体 + 提供 onManageSkills 时。不参与键盘导航）。 */
   var renderManageFooter = function renderManageFooter() {
     if (variant !== 'menu' || !onManageSkills) return null;
+    var defaultFooter = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD\u7BA1\u7406"), /*#__PURE__*/React.createElement(Icon, {
+      name: "right",
+      size: 12
+    }));
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       "data-odn-skill-slot-divider": true
     }), /*#__PURE__*/React.createElement("button", {
@@ -249,10 +254,7 @@ export var SkillSlot = /*#__PURE__*/forwardRef(function SkillSlot(_ref, ref) {
         return e.preventDefault();
       },
       onClick: onManageSkills
-    }, /*#__PURE__*/React.createElement("span", null, "\u6280\u80FD\u7BA1\u7406"), /*#__PURE__*/React.createElement(Icon, {
-      name: "right",
-      size: 12
-    })));
+    }, skillManageFooter !== null && skillManageFooter !== void 0 ? skillManageFooter : defaultFooter));
   };
 
   /* 分组模式下渲染 menu 列表（带分组标题）。 */

package/dist/table/index.d.ts

@@ -93,6 +93,17 @@ export interface TableProps<T = Record<string, unknown>> extends Omit<RcTablePro
         colIndex: number;
     }) => ReturnType<NonNullable<RcColumnType<T>['onHeaderCell']>> | void;
     popoverIcon?: (typeof iconNames)[number];
+    /**
+     * 是否启用虚拟滚动。启用时需要同时设置 scroll.y 为数值（表示可视区域高度）。
+     * 当数据量较大时（如超过 1000 行），推荐开启虚拟滚动以提升性能。
+     */
+    virtual?: boolean;
+    /**
+     * 虚拟滚动每行高度（px），用于计算可视区域内显示的行数。
+     * 仅在 virtual 为 true 时生效。
+     * @default 24
+     */
+    listItemHeight?: number;
 }
-declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, ...props }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, virtual, listItemHeight, ...props }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/table/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText"],
+var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText", "virtual", "listItemHeight"],
   _excluded2 = ["onSort", "title", "popover", "popoverProps", "popoverIcon"],
   _excluded3 = ["onSort", "filters", "filteredValue", "filterMultiple", "onFilter", "onFilterChange", "title", "popover", "popoverProps", "popoverIcon", "ellipsisPopoverProps", "sortOrder", "render"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -16,7 +16,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import RcTable from 'rc-table';
+import RcTable, { VirtualTable as RcVirtualTable } from 'rc-table';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Button from "../button";
 import Checkbox from "../checkbox";
@@ -113,6 +113,7 @@ var FilterComponent = function FilterComponent(_ref) {
   }, "\u786E\u5B9A")));
 };
 var Table = function Table(_ref2) {
+  var _props$scroll, _props$scroll2;
   var dataSource = _ref2.dataSource,
     columns = _ref2.columns,
     _ref2$bordered = _ref2.bordered,
@@ -131,6 +132,8 @@ var Table = function Table(_ref2) {
     className = _ref2.className,
     style = _ref2.style,
     emptyText = _ref2.emptyText,
+    virtual = _ref2.virtual,
+    listItemHeight = _ref2.listItemHeight,
     props = _objectWithoutProperties(_ref2, _excluded);
   // 渲染带 popover 的标题
   var renderTitleWithPopover = function renderTitleWithPopover(titleContent, popover, popoverProps, popoverIcon) {
@@ -492,6 +495,12 @@ var Table = function Table(_ref2) {
   // 1. 行选择
   // 2. 行展开
   var trClickable = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectOnRowClick) || (rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandOnRowClick);
+
+  // 虚拟模式使用 RcVirtualTable，否则使用 RcTable。
+  // 由于两者 props 类型存在差异（VirtualTableProps 重新定义了 scroll），
+  // 这里统一断言为 RcTable 类型，虚拟模式的专属 props 通过末尾的 spread 覆盖传入。
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var TableComponent = virtual ? RcVirtualTable : RcTable;
   return /*#__PURE__*/React.createElement("div", {
     ref: tableRef,
     "data-odn-table": true,
@@ -501,7 +510,7 @@ var Table = function Table(_ref2) {
     "data-odn-table-loading": loading,
     className: className,
     style: style
-  }, /*#__PURE__*/React.createElement(RcTable, _extends({
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({
     prefixCls: "odn-table",
     data: dataSource,
     columns: finalColumns,
@@ -857,6 +866,12 @@ var Table = function Table(_ref2) {
       offset: "1",
       stopColor: "#C4C7CC"
     })))), "\u6570\u636E\u4E3A\u7A7A")
-  }, props)));
+  }, props, virtual ? {
+    scroll: {
+      x: (_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.x,
+      y: (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.y
+    },
+    listItemHeight: listItemHeight
+  } : {})));
 };
 export default Table;

package/dist/table/style/index.css

@@ -342,4 +342,30 @@ tr > .odn-table-cell:last-child {
   height: 0;
   overflow: hidden;
   pointer-events: none;
+}
+
+.odn-table-placeholder .odn-table-expanded-row-fixed {
+  width: 100% !important;
+}
+
+.odn-table-tbody-virtual {
+  font-size: var(--odn-font-size);
+  line-height: var(--odn-line-height);
+}
+.odn-table-tbody-virtual .odn-table-row {
+  display: flex;
+}
+.odn-table-tbody-virtual .odn-table-row-extra {
+  position: absolute;
+  display: flex;
+}
+.odn-table-tbody-virtual .odn-table-cell {
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--odn-table-border-color);
+}
+.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:first-child {
+  padding-left: var(--odn-table-cell-first-padding-x-start);
+}
+.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:last-child {
+  padding-right: var(--odn-table-cell-last-padding-x-end);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",