@agentscope-ai/design 1.0.27 → 1.0.28-beta.1769761940248

package/lib/components/commonComponents/CodeBlock/index.d.ts

@@ -1,3 +1,4 @@
+import { Extension } from '@codemirror/state';
 export interface CodeBlockProps {
     /**
      * @description 语言
@@ -24,6 +25,12 @@ export interface CodeBlockProps {
      */
     readOnly?: boolean;
     onChange?: (value?: string) => void;
+    /**
+     * @description 扩展
+     * @descriptionEn Extensions
+     * @default []
+     */
+    extensions?: Extension[];
 }
 export declare const langExtensionsMap: Record<string, any[]>;
 export declare const beautifulJson: (val?: string, count?: number) => string;

package/lib/components/commonComponents/CodeBlock/index.js

@@ -78,9 +78,9 @@ var CodeMirrorWrapper = function CodeMirrorWrapper(props) {
     }
     return props.theme === 'dark' ? vscodeDark : vscodeLight;
   }, [isDarkMode, props.theme]);
-  var extensions = typeof props.language === 'string' ? [].concat(_toConsumableArray(langExtensionsMap[props.language] || []), _toConsumableArray(props.value && props.language in lintExtensionsMap ? lintExtensionsMap[props.language] : [])) : props.language.reduce(function (ext, lang) {
+  var extensions = (props.extensions || []).concat(typeof props.language === 'string' ? [].concat(_toConsumableArray(langExtensionsMap[props.language] || []), _toConsumableArray(props.value && props.language in lintExtensionsMap ? lintExtensionsMap[props.language] : [])) : props.language.reduce(function (ext, lang) {
     return [].concat(_toConsumableArray(ext), [langExtensionsMap[lang]]);
-  }, []);
+  }, []));
   var codeMirrorElement = /*#__PURE__*/_jsx("div", {
     className: cls("".concat(sparkPrefix, "-code-block"), props.className),
     children: /*#__PURE__*/_jsx(CodeMirror, _objectSpread({

package/lib/components/commonComponents/CodeBlock/index.style.d.ts

@@ -1 +1,7 @@
+/**
+ * CodeBlock 组件样式
+ * 所有 CodeMirror 相关样式都限定在组件根类名下，
+ * 通过选择器层级提高优先级，避免使用 !important，
+ * 方便外部业务覆盖样式
+ */
 export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/CodeBlock/index.style.js

@@ -1,7 +1,14 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-code-block {\n  width: 100%;\n}\n\n.cm-theme {\n  border: none !important;\n  border-radius: 0 !important;\n}\n\n.cm-gutters {\n  border-right: none !important;\n  background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-editor {\n  background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-gutterElement:not(:first-child) {\n  color: var(--", "-color-text-tertiary);\n  height: 24px !important;\n  line-height: 24px !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  span:not([title*=\"Unfold line\"]) {\n    height: 30px !important;\n  }\n}\n\n.cm-line {\n  height: 24px !important;\n  line-height: 24px !important;\n}\n\n.cm-lineNumbers .cm-gutterElement {\n  padding: 0px 4px 0px 12px !important;\n}\n\n.cm-activeLine,\n.cm-activeLineGutter {\n  background-color: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-button {\n  background-image: none !important;\n  background: var(--", "-color-bg-base) !important;\n  border: 1px solid var(--", "-color-border-secondary) !important;\n  border-radius: 4px !important;\n  \n  &:hover {\n    color: var(--", "-color-text-secondary);\n    cursor: pointer;\n  }\n}\n\n.cm-search {\n  background: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-panel.cm-search label {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cm-panel.cm-search [name=close] {\n  right: 8px !important;\n  background: none !important;\n  font-size: 16px !important;\n  color: var(--", "-color-text-tertiary) !important;\n}\n\n.cm-textfield {\n  border-radius: 4px;\n}\n\n.cm-panel.cm-search input[type=checkbox] {\n  border: 1px solid var(--", "-color-border-secondary) !important;\n}\n\n.cm-focused {\n  outline: none !important;\n}\n"])), function (p) {
+
+/**
+ * CodeBlock 组件样式
+ * 所有 CodeMirror 相关样式都限定在组件根类名下，
+ * 通过选择器层级提高优先级，避免使用 !important，
+ * 方便外部业务覆盖样式
+ */
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-code-block {\n  width: 100%;\n\n  /* CodeMirror \u4E3B\u9898\u6837\u5F0F */\n  .cm-theme {\n    border: none;\n    border-radius: 0;\n  }\n\n  /* \u884C\u53F7\u69FD\u6837\u5F0F */\n  .cm-gutters {\n    border-right: none;\n    background-color: var(--", "-color-bg-base);\n  }\n\n  /* \u7F16\u8F91\u5668\u80CC\u666F */\n  .cm-editor {\n    background-color: var(--", "-color-bg-base);\n  }\n\n  /* \u884C\u53F7\u5143\u7D20\u6837\u5F0F */\n  .cm-gutterElement:not(:first-child) {\n    color: var(--", "-color-text-tertiary);\n    min-height: 24px;\n    line-height: 24px;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding-top: 0;\n  }\n\n  /* \u4EE3\u7801\u884C\u6837\u5F0F - \u4E0D\u8BBE\u7F6E\u56FA\u5B9A\u9AD8\u5EA6\uFF0C\u8BA9 CodeMirror \u81EA\u52A8\u8BA1\u7B97\u4EE5\u652F\u6301\u6362\u884C */\n  .cm-line {\n    min-height: 24px;\n    line-height: 24px;\n  }\n\n  /* \u884C\u53F7\u5185\u8FB9\u8DDD */\n  .cm-lineNumbers .cm-gutterElement {\n    padding: 0px 4px 0px 12px;\n  }\n\n  /* \u5F53\u524D\u884C\u9AD8\u4EAE */\n  .cm-activeLine,\n  .cm-activeLineGutter {\n    background-color: var(--", "-color-fill-secondary);\n  }\n\n  /* \u6309\u94AE\u6837\u5F0F */\n  .cm-button {\n    background-image: none;\n    background: var(--", "-color-bg-base);\n    border: 1px solid var(--", "-color-border-secondary);\n    border-radius: 4px;\n    \n    &:hover {\n      color: var(--", "-color-text-secondary);\n      cursor: pointer;\n    }\n  }\n\n  /* \u641C\u7D22\u9762\u677F\u6837\u5F0F */\n  .cm-search {\n    background: var(--", "-color-fill-secondary);\n  }\n\n  .cm-panel.cm-search label {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .cm-panel.cm-search [name=close] {\n    right: 8px;\n    background: none;\n    font-size: 16px;\n    color: var(--", "-color-text-tertiary);\n  }\n\n  /* \u6587\u672C\u8F93\u5165\u6846\u6837\u5F0F */\n  .cm-textfield {\n    border-radius: 4px;\n  }\n\n  .cm-panel.cm-search input[type=checkbox] {\n    border: 1px solid var(--", "-color-border-secondary);\n  }\n\n  /* \u805A\u7126\u6837\u5F0F */\n  .cm-focused {\n    outline: none;\n  }\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/Pagination/index.js

@@ -16,13 +16,19 @@ import classNames from 'classnames';
 import { useStyle } from "./index.style";
 
 /**
- * 获取默认的分页大小选择器配置
- * 使用函数形式以支持动态国际化
+ * 获取默认的分页大小选项
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var getDefaultShowSizeChange = function getDefaultShowSizeChange() {
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+/**
+ * 根据 pageSizeOptions 生成带国际化文案的选项配置
+ * @param pageSizeOptions 分页大小选项数组
+ */
+var getShowSizeChangeOptions = function getShowSizeChangeOptions() {
+  var pageSizeOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_PAGE_SIZE_OPTIONS;
   var itemsText = $i18n.get({
     id: 'components.commonComponents.Pagination.Items',
     dm: '条'
@@ -32,19 +38,12 @@ var getDefaultShowSizeChange = function getDefaultShowSizeChange() {
     dm: '页'
   });
   return {
-    options: [{
-      label: "10 ".concat(itemsText, " / ").concat(pageText),
-      value: 10
-    }, {
-      label: "20 ".concat(itemsText, " / ").concat(pageText),
-      value: 20
-    }, {
-      label: "50 ".concat(itemsText, " / ").concat(pageText),
-      value: 50
-    }, {
-      label: "100 ".concat(itemsText, " / ").concat(pageText),
-      value: 100
-    }]
+    options: pageSizeOptions.map(function (size) {
+      return {
+        label: "".concat(size, " ").concat(itemsText, " / ").concat(pageText),
+        value: Number(size)
+      };
+    })
   };
 };
 export default (function (props) {
@@ -105,21 +104,21 @@ export default (function (props) {
     shouldShowSizeChanger = restProps.total && restProps.total > 50;
   }
   var getMergedShowSizeChange = function getMergedShowSizeChange() {
-    if (props.showSizeChanger === true) {
-      // 用户手动设置为 true，使用预置选项（动态获取以支持国际化）
-      return getDefaultShowSizeChange();
-    }
     if (props.showSizeChanger === false) {
       // 用户手动设为 false
       return false;
     }
     if (_typeof(props.showSizeChanger) === 'object' && props.showSizeChanger) {
-      // 用户手动传入的优先
+      // 用户手动传入对象配置，优先使用
       return props.showSizeChanger;
     }
+    if (props.showSizeChanger === true) {
+      // 用户手动设置为 true，使用 pageSizeOptions 或预置选项
+      return getShowSizeChangeOptions(restProps.pageSizeOptions);
+    }
     if (restProps.total && restProps.total > 50) {
-      // 数据量大于 50，使用预置选项（动态获取以支持国际化）
-      return getDefaultShowSizeChange();
+      // 数据量大于 50，使用 pageSizeOptions 或预置选项
+      return getShowSizeChangeOptions(restProps.pageSizeOptions);
     }
     return false;
   };

package/lib/components/commonComponents/PromptsEditor/index.d.ts

@@ -9,7 +9,7 @@ export interface PromptsEditorProps {
      * @description 输入的内容
      * @descriptionEn Input content value
      */
-    value: string;
+    value?: string;
     /**
      * @description 输入内容的类名
      * @descriptionEn CSS class name for the input content
@@ -42,6 +42,12 @@ export interface PromptsEditorProps {
      * @descriptionEn Text of the tips, set to false to hide the tips
      */
     tipsText?: string | React.ReactNode | false;
+    /**
+     * @description 仅可读
+     * @descriptionEn Read only
+     * @default false
+     */
+    readOnly?: boolean;
 }
 export declare const langExtensionsMap: Record<string, any[]>;
 declare const _default: React.MemoExoticComponent<(props: PromptsEditorProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/components/commonComponents/PromptsEditor/index.js

@@ -69,6 +69,7 @@ export var langExtensionsMap = {
 };
 var empty = [];
 var Editor = function Editor(props) {
+  var _props$value;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var variables = props.variables || empty;
@@ -128,11 +129,12 @@ var Editor = function Editor(props) {
         lineNumbers: false,
         foldGutter: false,
         highlightActiveLine: false
-      }
+      },
+      readOnly: props.readOnly
     }, getTheme), /*#__PURE__*/_jsxs("div", {
       className: styles.footer,
       children: [tips, props.maxLength ? /*#__PURE__*/_jsxs("div", {
-        children: [props.value.length, "/", props.maxLength]
+        children: [((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) || 0, "/", props.maxLength]
       }) : null]
     })]
   });

package/lib/components/commonComponents/Tabs/index.d.ts

@@ -7,6 +7,12 @@ export interface SparkTabsProps extends Omit<TabsProps, 'type'> {
      * @default true
      */
     type?: 'line' | 'card' | 'editable-card' | 'segmented';
+    /**
+     * @description 类名
+     * @descriptionEn ClassName
+     * @default ''
+     */
+    className?: string;
 }
 declare const SparkTabs: {
     (props: SparkTabsProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/Tabs/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 = ["type", "centered"];
+var _excluded = ["type", "centered", "className"];
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -25,6 +25,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var SparkTabs = function SparkTabs(props) {
   var type = props.type,
     centered = props.centered,
+    className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
   var _getCommonConfig = getCommonConfig(),
     sparkPrefix = _getCommonConfig.sparkPrefix;
@@ -61,8 +62,8 @@ var SparkTabs = function SparkTabs(props) {
 
   // 缓存 className
   var segmentedClassName = useMemo(function () {
-    return classNames("".concat(sparkPrefix, "-segmented-tab-bar"), _defineProperty({}, "".concat(sparkPrefix, "-segmented-tab-bar-centered"), centered));
-  }, [sparkPrefix, centered]);
+    return classNames("".concat(sparkPrefix, "-segmented-tab-bar"), _defineProperty({}, "".concat(sparkPrefix, "-segmented-tab-bar-centered"), centered), className);
+  }, [sparkPrefix, centered, className]);
 
   // 获取当前选中 tab 的内容
   var activeContent = useMemo(function () {
@@ -89,8 +90,9 @@ var SparkTabs = function SparkTabs(props) {
     });
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({}, props), {}, {
-      type: type
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({}, restProps), {}, {
+      type: type,
+      className: className
     }))]
   });
 };