@agentscope-ai/design 1.0.16-rc.0 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/commonComponents/SliderSelector/index.d.ts +1 -1
  2. package/lib/components/commonComponents/SliderSelector/index.js +4 -8
  3. package/lib/components/commonComponents/Steps/index.js +1 -2
  4. package/llms/all.llms.txt +502 -501
  5. package/llms/index.llms.txt +47 -47
  6. package/package.json +3 -3
package/lib/components/commonComponents/SliderSelector/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export interface SliderSelectorProps {
3
3
  className?: string;
4
- onChange?: (val: number | null) => void;
4
+ onChange: (val: number | null) => void;
5
5
  value?: number | null;
6
6
  min: number;
7
7
  max: number;
package/lib/components/commonComponents/SliderSelector/index.js CHANGED
@@ -19,19 +19,15 @@ export default function SliderSelector(props) {
19
19
  /**InputNumber为受控组件，会导致min和max失效，所以需要手动处理 */
20
20
  var numVal = typeof val === 'string' ? parseFloat(val) : val;
21
21
  if (numVal === null || isNaN(numVal)) {
22
- var _props$onChange;
23
- (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, null);
22
+ props.onChange(null);
24
23
  return;
25
24
  }
26
25
  if (numVal < props.min) {
27
- var _props$onChange2;
28
- (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, props.min);
26
+ props.onChange(props.min);
29
27
  } else if (numVal > props.max) {
30
- var _props$onChange3;
31
- (_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, props.max);
28
+ props.onChange(props.max);
32
29
  } else {
33
- var _props$onChange4;
34
- (_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 || _props$onChange4.call(props, numVal);
30
+ props.onChange(numVal);
35
31
  }
36
32
  };
37
33
  return /*#__PURE__*/_jsxs(_Fragment, {
package/lib/components/commonComponents/Steps/index.js CHANGED
@@ -9,7 +9,6 @@ import { SparkTrueLine } from '@agentscope-ai/icons';
9
9
  import { Steps } from 'antd';
10
10
  import { useMemo } from 'react';
11
11
  import { useStyle } from "./index.style";
12
- import classNames from 'classnames';
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
14
13
  import { Fragment as _Fragment } from "react/jsx-runtime";
15
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,7 +45,7 @@ var SparkSteps = function SparkSteps(props) {
46
45
  return /*#__PURE__*/_jsxs(_Fragment, {
47
46
  children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Steps, _objectSpread(_objectSpread({}, props), {}, {
48
47
  items: items,
49
- className: classNames("".concat(sparkPrefix, "-steps"), props.className)
48
+ className: "".concat(sparkPrefix, "-steps")
50
49
  }))]
51
50
  });
52
51
  };
package/llms/all.llms.txt CHANGED
@@ -1,14 +1,5 @@
1
1
 
2
2
 
3
- <DemoTitle title="Video" desc="视频展示">
4
- #### API
5
-
6
- <AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
7
-
8
-
9
-
10
-
11
-
12
3
  <DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
13
4
  #### API
14
5
 
@@ -105,6 +96,15 @@
105
96
 
106
97
 
107
98
 
99
+ <DemoTitle title="Video" desc="视频展示">
100
+ #### API
101
+
102
+ <AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
103
+
104
+
105
+
106
+
107
+
108
108
  <DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
109
109
  #### API
110
110
 
@@ -264,41 +264,6 @@ type RangeDisabledTime = (
264
264
 
265
265
 
266
266
 
267
- <DemoTitle title="Tag" desc="进行标记和分类的小标签">
268
- #### API
269
-
270
- | 属性名 | 描述 | 类型 | 默认值 |
271
- |--------|--------|--------|--------|
272
- | size | 尺寸 | 'small' \| 'middle' | 'middle' |
273
- | color | 标签色 | SparkTagColors \| string | 'purple' |
274
-
275
- <AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
276
-
277
-
278
- ## antd API
279
-
280
- 通用属性参考：[通用属性](/docs/react/common-props)
281
-
282
- ### Tag
283
-
284
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
285
- |--------|--------|--------|--------|--------|
286
- | closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
287
- | icon | 设置图标 | ReactNode | - | |
288
- | bordered | 是否有边框 | boolean | true | 5.4.0 |
289
- | onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
290
-
291
-
292
- ### Tag.CheckableTag
293
-
294
- | 参数 | 说明 | 类型 | 默认值 |
295
- |--------|--------|--------|--------|
296
- | checked | 设置标签的选中状态 | boolean | false |
297
- | onChange | 点击标签时触发的回调 | (checked) => void | - |
298
-
299
-
300
-
301
-
302
267
  <DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
303
268
  #### API
304
269
 
@@ -369,6 +334,41 @@ type RangeDisabledTime = (
369
334
 
370
335
 
371
336
 
337
+ <DemoTitle title="Tag" desc="进行标记和分类的小标签">
338
+ #### API
339
+
340
+ | 属性名 | 描述 | 类型 | 默认值 |
341
+ |--------|--------|--------|--------|
342
+ | size | 尺寸 | 'small' \| 'middle' | 'middle' |
343
+ | color | 标签色 | SparkTagColors \| string | 'purple' |
344
+
345
+ <AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
346
+
347
+
348
+ ## antd API
349
+
350
+ 通用属性参考：[通用属性](/docs/react/common-props)
351
+
352
+ ### Tag
353
+
354
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
355
+ |--------|--------|--------|--------|--------|
356
+ | closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
357
+ | icon | 设置图标 | ReactNode | - | |
358
+ | bordered | 是否有边框 | boolean | true | 5.4.0 |
359
+ | onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
360
+
361
+
362
+ ### Tag.CheckableTag
363
+
364
+ | 参数 | 说明 | 类型 | 默认值 |
365
+ |--------|--------|--------|--------|
366
+ | checked | 设置标签的选中状态 | boolean | false |
367
+ | onChange | 点击标签时触发的回调 | (checked) => void | - |
368
+
369
+
370
+
371
+
372
372
  <DemoTitle title="Table" desc="展示行列数据。">
373
373
  #### API
374
374
 
@@ -624,6 +624,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
624
624
 
625
625
 
626
626
 
627
+ <DemoTitle title="Statistic" desc="展示统计数值">
628
+ #### API
629
+
630
+ <AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
631
+
632
+
633
+ ## antd API
634
+
635
+ 通用属性参考：[通用属性](/docs/react/common-props)
636
+
637
+ #### Statistic
638
+
639
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
640
+ |--------|--------|--------|--------|--------|
641
+ | decimalSeparator | 设置小数点 | string | . | |
642
+ | formatter | 自定义数值展示 | (value) => ReactNode | - | |
643
+ | groupSeparator | 设置千分位标识符 | string | , | |
644
+ | loading | 数值是否加载中 | boolean | false | 4.8.0 |
645
+ | precision | 数值精度 | number | - | |
646
+ | prefix | 设置数值的前缀 | ReactNode | - | |
647
+ | suffix | 设置数值的后缀 | ReactNode | - | |
648
+ | title | 数值的标题 | ReactNode | - | |
649
+ | value | 数值内容 | string \| number | - | |
650
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
651
+
652
+
653
+ #### Statistic.Countdown <Badge type="error">Deprecated</Badge>
654
+
655
+ <!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
656
+
657
+ <!-- prettier-ignore -->
658
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
659
+ |--------|--------|--------|--------|--------|
660
+ | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
661
+ | prefix | 设置数值的前缀 | ReactNode | - | |
662
+ | suffix | 设置数值的后缀 | ReactNode | - | |
663
+ | title | 数值的标题 | ReactNode | - | |
664
+ | value | 数值内容 | number | - | |
665
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
666
+ | onFinish | 倒计时完成时触发 | () => void | - | |
667
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
668
+
669
+
670
+ #### Statistic.Timer <Badge>5.25.0+</Badge>
671
+
672
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
673
+ |--------|--------|--------|--------|--------|
674
+ | type | 计时类型，正计时或者倒计时 | countdown | - | |
675
+ | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
676
+ | prefix | 设置数值的前缀 | ReactNode | - | |
677
+ | suffix | 设置数值的后缀 | ReactNode | - | |
678
+ | title | 数值的标题 | ReactNode | - | |
679
+ | value | 数值内容 | number | - | |
680
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
681
+ | onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
682
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
683
+
684
+
685
+
686
+
627
687
  <DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
628
688
  #### API
629
689
 
@@ -788,83 +848,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
788
848
 
789
849
 
790
850
 
791
- <DemoTitle title="Statistic" desc="展示统计数值">
792
- #### API
793
-
794
- <AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
795
-
796
-
797
- ## antd API
798
-
799
- 通用属性参考：[通用属性](/docs/react/common-props)
800
-
801
- #### Statistic
802
-
803
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
804
- |--------|--------|--------|--------|--------|
805
- | decimalSeparator | 设置小数点 | string | . | |
806
- | formatter | 自定义数值展示 | (value) => ReactNode | - | |
807
- | groupSeparator | 设置千分位标识符 | string | , | |
808
- | loading | 数值是否加载中 | boolean | false | 4.8.0 |
809
- | precision | 数值精度 | number | - | |
810
- | prefix | 设置数值的前缀 | ReactNode | - | |
811
- | suffix | 设置数值的后缀 | ReactNode | - | |
812
- | title | 数值的标题 | ReactNode | - | |
813
- | value | 数值内容 | string \| number | - | |
814
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
815
-
816
-
817
- #### Statistic.Countdown <Badge type="error">Deprecated</Badge>
818
-
819
- <!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
820
-
821
- <!-- prettier-ignore -->
822
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
823
- |--------|--------|--------|--------|--------|
824
- | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
825
- | prefix | 设置数值的前缀 | ReactNode | - | |
826
- | suffix | 设置数值的后缀 | ReactNode | - | |
827
- | title | 数值的标题 | ReactNode | - | |
828
- | value | 数值内容 | number | - | |
829
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
830
- | onFinish | 倒计时完成时触发 | () => void | - | |
831
- | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
832
-
833
-
834
- #### Statistic.Timer <Badge>5.25.0+</Badge>
835
-
836
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
837
- |--------|--------|--------|--------|--------|
838
- | type | 计时类型，正计时或者倒计时 | countdown | - | |
839
- | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
840
- | prefix | 设置数值的前缀 | ReactNode | - | |
841
- | suffix | 设置数值的后缀 | ReactNode | - | |
842
- | title | 数值的标题 | ReactNode | - | |
843
- | value | 数值内容 | number | - | |
844
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
845
- | onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
846
- | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
847
-
848
-
849
-
850
-
851
- <DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
852
- #### API
853
-
854
- | 属性名 | 描述 | 类型 | 默认值 |
855
- |--------|--------|--------|--------|
856
- | tip | indicator下方的tip | React.ReactNode | - |
857
- | indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
858
- | children | 被spinner包裹的子元素 | React.ReactNode | - |
859
- | style | spinner最外层的样式 | React.CSSProperties | - |
860
- | className | spinner的类名 | string | - |
861
- | percent | 进度条的百分比 | number | - |
862
- | spinning | 是否为加载中状态 | boolean | false |
863
- | showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
864
-
865
-
866
-
867
-
868
851
  <DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
869
852
  ## antd API
870
853
 
@@ -1024,14 +1007,19 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1024
1007
 
1025
1008
 
1026
1009
 
1027
- <DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
1028
- ## API
1010
+ <DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
1011
+ #### API
1029
1012
 
1030
1013
  | 属性名 | 描述 | 类型 | 默认值 |
1031
1014
  |--------|--------|--------|--------|
1032
- | texture | 是否显示纹理 | boolean | false |
1033
-
1034
-
1015
+ | tip | indicator下方的tip | React.ReactNode | - |
1016
+ | indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
1017
+ | children | 被spinner包裹的子元素 | React.ReactNode | - |
1018
+ | style | spinner最外层的样式 | React.CSSProperties | - |
1019
+ | className | spinner的类名 | string | - |
1020
+ | percent | 进度条的百分比 | number | - |
1021
+ | spinning | 是否为加载中状态 | boolean | false |
1022
+ | showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
1035
1023
 
1036
1024
 
1037
1025
 
@@ -1111,6 +1099,18 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1111
1099
 
1112
1100
 
1113
1101
 
1102
+ <DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
1103
+ ## API
1104
+
1105
+ | 属性名 | 描述 | 类型 | 默认值 |
1106
+ |--------|--------|--------|--------|
1107
+ | texture | 是否显示纹理 | boolean | false |
1108
+
1109
+
1110
+
1111
+
1112
+
1113
+
1114
1114
  <DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
1115
1115
  #### API
1116
1116
 
@@ -1179,25 +1179,8 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1179
1179
 
1180
1180
 
1181
1181
 
1182
- <DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
1183
- #### API
1184
-
1185
- | 属性名 | 描述 | 类型 | 默认值 |
1186
- |--------|--------|--------|--------|
1187
- | maxLength | 可以输入内容的最大长度 | number | |
1188
- | value | 输入的内容 | string | (必填) |
1189
- | className | 输入内容的类名 | string | |
1190
- | onChange | 输入内容的回调 | (value: string) => void | |
1191
- | variables | 可以插入的变量列表 | Array | |
1192
- | onCreate | 新增变量的触发回调 | () => void | |
1193
- | createBtnText | 新增变量的按钮文本 | string | |
1194
- | tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
1195
-
1196
-
1197
-
1198
-
1199
- <DemoTitle title="Progress" desc="用于指示任务的完成进度">
1200
- ## antd API
1182
+ <DemoTitle title="Progress" desc="用于指示任务的完成进度">
1183
+ ## antd API
1201
1184
 
1202
1185
  通用属性参考：[通用属性](/docs/react/common-props)
1203
1186
 
@@ -1292,6 +1275,23 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1292
1275
 
1293
1276
 
1294
1277
 
1278
+ <DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
1279
+ #### API
1280
+
1281
+ | 属性名 | 描述 | 类型 | 默认值 |
1282
+ |--------|--------|--------|--------|
1283
+ | maxLength | 可以输入内容的最大长度 | number | |
1284
+ | value | 输入的内容 | string | (必填) |
1285
+ | className | 输入内容的类名 | string | |
1286
+ | onChange | 输入内容的回调 | (value: string) => void | |
1287
+ | variables | 可以插入的变量列表 | Array | |
1288
+ | onCreate | 新增变量的触发回调 | () => void | |
1289
+ | createBtnText | 新增变量的按钮文本 | string | |
1290
+ | tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
1291
+
1292
+
1293
+
1294
+
1295
1295
  <DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
1296
1296
  #### API
1297
1297
 
@@ -1492,6 +1492,106 @@ notification.config({
1492
1492
 
1493
1493
 
1494
1494
 
1495
+ <DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
1496
+ #### API
1497
+
1498
+ | 属性名 | 描述 | 类型 | 默认值 |
1499
+ |--------|--------|--------|--------|
1500
+ | conent | 显示的内容 | string | "" |
1501
+
1502
+ <AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
1503
+
1504
+
1505
+ ## antd API
1506
+
1507
+ 通用属性参考：[通用属性](/docs/react/common-props)
1508
+
1509
+ 组件提供了一些静态方法，使用方式和参数如下：
1510
+
1511
+
1512
+ - `message.success(content, [duration], onClose)`
1513
+ - `message.error(content, [duration], onClose)`
1514
+ - `message.info(content, [duration], onClose)`
1515
+ - `message.warning(content, [duration], onClose)`
1516
+ - `message.loading(content, [duration], onClose)`
1517
+
1518
+ | 参数 | 说明 | 类型 | 默认值 |
1519
+ |--------|--------|--------|--------|
1520
+ | content | 提示内容 | ReactNode \| config | - |
1521
+ | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
1522
+ | onClose | 关闭时触发的回调函数 | function | - |
1523
+
1524
+
1525
+ 组件同时提供 promise 接口。
1526
+
1527
+
1528
+ - `message[level](content, [duration]).then(afterClose)`
1529
+ - `message[level](content, [duration], onClose).then(afterClose)`
1530
+
1531
+ 其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
1532
+
1533
+ 也可以对象的形式传递参数：
1534
+
1535
+
1536
+ - `message.open(config)`
1537
+ - `message.success(config)`
1538
+ - `message.error(config)`
1539
+ - `message.info(config)`
1540
+ - `message.warning(config)`
1541
+ - `message.loading(config)`
1542
+
1543
+ `config` 对象属性如下：
1544
+
1545
+ | 参数 | 说明 | 类型 | 默认值 |
1546
+ |--------|--------|--------|--------|
1547
+ | className | 自定义 CSS class | string | - |
1548
+ | content | 提示内容 | ReactNode | - |
1549
+ | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
1550
+ | icon | 自定义图标 | ReactNode | - |
1551
+ | key | 当前提示的唯一标志 | string \| number | - |
1552
+ | style | 自定义内联样式 | | - |
1553
+ | onClick | 点击 message 时触发的回调函数 | function | - |
1554
+ | onClose | 关闭时触发的回调函数 | function | - |
1555
+
1556
+
1557
+ ### 全局方法
1558
+
1559
+ 还提供了全局配置和全局销毁方法：
1560
+
1561
+
1562
+ - `message.config(options)`
1563
+ - `message.destroy()`
1564
+
1565
+ 也可通过 `message.destroy(key)` 来关闭一条消息。
1566
+
1567
+ #### message.config
1568
+
1569
+ 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
1570
+
1571
+
1572
+ ```js
1573
+ message.config({
1574
+ top: 100,
1575
+ duration: 2,
1576
+ maxCount: 3,
1577
+ rtl: true,
1578
+ prefixCls: 'my-message',
1579
+ });
1580
+ ```
1581
+
1582
+
1583
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1584
+ |--------|--------|--------|--------|--------|
1585
+ | duration | 默认自动关闭延时，单位秒 | number | 3 | |
1586
+ | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
1587
+ | maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
1588
+ | prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
1589
+ | rtl | 是否开启 RTL 模式 | boolean | false | |
1590
+ | top | 消息距离顶部的位置 | string \| number | 8 | |
1591
+
1592
+
1593
+
1594
+
1495
1595
  <DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
1496
1596
  #### API
1497
1597
 
@@ -1662,106 +1762,6 @@ const confirmed = await modal.confirm({ ... });
1662
1762
 
1663
1763
 
1664
1764
 
1665
- <DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
1666
- #### API
1667
-
1668
- | 属性名 | 描述 | 类型 | 默认值 |
1669
- |--------|--------|--------|--------|
1670
- | conent | 显示的内容 | string | "" |
1671
-
1672
- <AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
1673
-
1674
-
1675
- ## antd API
1676
-
1677
- 通用属性参考：[通用属性](/docs/react/common-props)
1678
-
1679
- 组件提供了一些静态方法，使用方式和参数如下：
1680
-
1681
-
1682
- - `message.success(content, [duration], onClose)`
1683
- - `message.error(content, [duration], onClose)`
1684
- - `message.info(content, [duration], onClose)`
1685
- - `message.warning(content, [duration], onClose)`
1686
- - `message.loading(content, [duration], onClose)`
1687
-
1688
- | 参数 | 说明 | 类型 | 默认值 |
1689
- |--------|--------|--------|--------|
1690
- | content | 提示内容 | ReactNode \| config | - |
1691
- | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
1692
- | onClose | 关闭时触发的回调函数 | function | - |
1693
-
1694
-
1695
- 组件同时提供 promise 接口。
1696
-
1697
-
1698
- - `message[level](content, [duration]).then(afterClose)`
1699
- - `message[level](content, [duration], onClose).then(afterClose)`
1700
-
1701
- 其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
1702
-
1703
- 也可以对象的形式传递参数：
1704
-
1705
-
1706
- - `message.open(config)`
1707
- - `message.success(config)`
1708
- - `message.error(config)`
1709
- - `message.info(config)`
1710
- - `message.warning(config)`
1711
- - `message.loading(config)`
1712
-
1713
- `config` 对象属性如下：
1714
-
1715
- | 参数 | 说明 | 类型 | 默认值 |
1716
- |--------|--------|--------|--------|
1717
- | className | 自定义 CSS class | string | - |
1718
- | content | 提示内容 | ReactNode | - |
1719
- | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
1720
- | icon | 自定义图标 | ReactNode | - |
1721
- | key | 当前提示的唯一标志 | string \| number | - |
1722
- | style | 自定义内联样式 | | - |
1723
- | onClick | 点击 message 时触发的回调函数 | function | - |
1724
- | onClose | 关闭时触发的回调函数 | function | - |
1725
-
1726
-
1727
- ### 全局方法
1728
-
1729
- 还提供了全局配置和全局销毁方法：
1730
-
1731
-
1732
- - `message.config(options)`
1733
- - `message.destroy()`
1734
-
1735
- 也可通过 `message.destroy(key)` 来关闭一条消息。
1736
-
1737
- #### message.config
1738
-
1739
- 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
1740
-
1741
-
1742
- ```js
1743
- message.config({
1744
- top: 100,
1745
- duration: 2,
1746
- maxCount: 3,
1747
- rtl: true,
1748
- prefixCls: 'my-message',
1749
- });
1750
- ```
1751
-
1752
-
1753
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1754
- |--------|--------|--------|--------|--------|
1755
- | duration | 默认自动关闭延时，单位秒 | number | 3 | |
1756
- | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
1757
- | maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
1758
- | prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
1759
- | rtl | 是否开启 RTL 模式 | boolean | false | |
1760
- | top | 消息距离顶部的位置 | string \| number | 8 | |
1761
-
1762
-
1763
-
1764
-
1765
1765
  <DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
1766
1766
  #### API
1767
1767
 
@@ -1982,31 +1982,77 @@ type TransformAction =
1982
1982
 
1983
1983
 
1984
1984
 
1985
- <DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
1985
+ <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
1986
1986
  #### API
1987
1987
 
1988
1988
  | 属性名 | 描述 | 类型 | 默认值 |
1989
1989
  |--------|--------|--------|--------|
1990
- | shape | 形态 | 'default' \| 'round' | default 默认 |
1991
-
1992
-
1993
- <AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
1990
+ | icon | icon | ReactNode \| string | |
1991
+ | iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
1992
+ | bordered | 边框 | boolean | true |
1993
+ | shape | 形状 | 'default' \| 'circle' | 'default' |
1994
1994
 
1995
1995
 
1996
1996
  ## antd API
1997
1997
 
1998
1998
  通用属性参考：[通用属性](/docs/react/common-props)
1999
1999
 
2000
- ### Input
2000
+ 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
2001
2001
 
2002
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2002
+ 按钮的属性说明如下：
2003
+
2004
+ | 属性 | 说明 | 类型 | 默认值 | 版本 |
2003
2005
  |--------|--------|--------|--------|--------|
2004
- | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
2005
- | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
2006
- | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
2007
- | classNames | 语义化结构 class | Record< | - | 5.4.0 |
2008
- | count | 字符计数配置 | | - | 5.10.0 |
2009
- | defaultValue | 输入框默认内容 | string | - | |
2006
+ | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
2007
+ | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
2008
+ | classNames | 语义化结构 class | | - | 5.4.0 |
2009
+ | color | 设置按钮的颜色 | default | - | default |
2010
+ | danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
2011
+ | disabled | 设置按钮失效状态 | boolean | false | |
2012
+ | ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
2013
+ | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
2014
+ | htmlType | 设置 | submit | button | |
2015
+ | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
2016
+ | loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
2017
+ | styles | 语义化结构 style | | - | 5.4.0 |
2018
+ | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
2019
+ | onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
2020
+ | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
2021
+
2022
+
2023
+ 支持原生 button 的其他所有属性。
2024
+
2025
+ ### PresetColors
2026
+
2027
+ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
2028
+
2029
+
2030
+
2031
+ <DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
2032
+ #### API
2033
+
2034
+ | 属性名 | 描述 | 类型 | 默认值 |
2035
+ |--------|--------|--------|--------|
2036
+ | shape | 形态 | 'default' \| 'round' | default 默认 |
2037
+
2038
+
2039
+ <AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
2040
+
2041
+
2042
+ ## antd API
2043
+
2044
+ 通用属性参考：[通用属性](/docs/react/common-props)
2045
+
2046
+ ### Input
2047
+
2048
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
2049
+ |--------|--------|--------|--------|--------|
2050
+ | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
2051
+ | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
2052
+ | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
2053
+ | classNames | 语义化结构 class | Record< | - | 5.4.0 |
2054
+ | count | 字符计数配置 | | - | 5.10.0 |
2055
+ | defaultValue | 输入框默认内容 | string | - | |
2010
2056
  | disabled | 是否禁用状态，默认为 false | boolean | false | |
2011
2057
  | id | 输入框的 id | string | - | |
2012
2058
  | maxLength | 最大长度 | number | - | |
@@ -2117,52 +2163,6 @@ interface CountConfig {
2117
2163
 
2118
2164
 
2119
2165
 
2120
- <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
2121
- #### API
2122
-
2123
- | 属性名 | 描述 | 类型 | 默认值 |
2124
- |--------|--------|--------|--------|
2125
- | icon | icon | ReactNode \| string | |
2126
- | iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
2127
- | bordered | 边框 | boolean | true |
2128
- | shape | 形状 | 'default' \| 'circle' | 'default' |
2129
-
2130
-
2131
- ## antd API
2132
-
2133
- 通用属性参考：[通用属性](/docs/react/common-props)
2134
-
2135
- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
2136
-
2137
- 按钮的属性说明如下：
2138
-
2139
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
2140
- |--------|--------|--------|--------|--------|
2141
- | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
2142
- | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
2143
- | classNames | 语义化结构 class | | - | 5.4.0 |
2144
- | color | 设置按钮的颜色 | default | - | default |
2145
- | danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
2146
- | disabled | 设置按钮失效状态 | boolean | false | |
2147
- | ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
2148
- | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
2149
- | htmlType | 设置 | submit | button | |
2150
- | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
2151
- | loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
2152
- | styles | 语义化结构 style | | - | 5.4.0 |
2153
- | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
2154
- | onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
2155
- | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
2156
-
2157
-
2158
- 支持原生 button 的其他所有属性。
2159
-
2160
- ### PresetColors
2161
-
2162
- type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
2163
-
2164
-
2165
-
2166
2166
  <DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
2167
2167
  #### API
2168
2168
 
@@ -3364,6 +3364,21 @@ export type FormatType =
3364
3364
 
3365
3365
 
3366
3366
 
3367
+ <DemoTitle title="CodeBlock" desc="代码块">
3368
+ #### API
3369
+
3370
+ | 属性名 | 描述 | 类型 | 默认值 |
3371
+ |--------|--------|--------|--------|
3372
+ | language | 语言 | string \| string[] | (必填) |
3373
+ | value | 值 | string | (必填) |
3374
+ | className | 类名 | string | |
3375
+ | theme | 主题 | 'dark' \| 'light' | |
3376
+ | readOnly | 只读 | boolean | |
3377
+ | onChange | | (value: string) => void | |
3378
+
3379
+
3380
+
3381
+
3367
3382
  <DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
3368
3383
  #### API
3369
3384
 
@@ -3422,21 +3437,6 @@ export type FormatType =
3422
3437
 
3423
3438
 
3424
3439
 
3425
- <DemoTitle title="CodeBlock" desc="代码块">
3426
- #### API
3427
-
3428
- | 属性名 | 描述 | 类型 | 默认值 |
3429
- |--------|--------|--------|--------|
3430
- | language | 语言 | string \| string[] | (必填) |
3431
- | value | 值 | string | (必填) |
3432
- | className | 类名 | string | |
3433
- | theme | 主题 | 'dark' \| 'light' | |
3434
- | readOnly | 只读 | boolean | |
3435
- | onChange | | (value: string) => void | |
3436
-
3437
-
3438
-
3439
-
3440
3440
  <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
3441
3441
  #### API
3442
3442
 
@@ -4158,6 +4158,77 @@ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
4158
4158
 
4159
4159
 
4160
4160
 
4161
+ # 使用
4162
+
4163
+ 如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
4164
+
4165
+
4166
+ ```tsx
4167
+ import {
4168
+ ConfigProvider,
4169
+ purpleTheme,
4170
+ Button,
4171
+ IconFont,
4172
+ IconButton,
4173
+ } from '@agentscope-ai/design';
4174
+ import { Flex } from 'antd';
4175
+ import zhCN from 'antd/locale/zh_CN';
4176
+ import { useState } from 'react';
4177
+
4178
+ const App = () => {
4179
+ const prefix = 'sps';
4180
+ const iconSymbol = 'spark-effciency-line';
4181
+ const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
4182
+ return (
4183
+ <ConfigProvider
4184
+ {...purpleTheme}
4185
+ prefix={prefix}
4186
+ prefixCls={prefix}
4187
+ iconfont={iconfont}
4188
+ locale={zhCN}
4189
+ style={{
4190
+ width: '100%',
4191
+ height: '100%',
4192
+ }}
4193
+ >
4194
+ <Flex
4195
+ style={{
4196
+ width: '100%',
4197
+ height: '100%',
4198
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4199
+ }}
4200
+ justify="center"
4201
+ align="center"
4202
+ >
4203
+ <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
4204
+ <Flex gap={8}>
4205
+ <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
4206
+ <IconFont type={iconSymbol} />
4207
+ </Flex>
4208
+ <Flex gap={8}>
4209
+ <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
4210
+ <Button type="primary" iconType={iconSymbol}>
4211
+ 添加用户
4212
+ </Button>
4213
+ </Flex>
4214
+ <Flex gap={8}>
4215
+ <div style={{ width: '100px', lineHeight: '32px' }}>
4216
+ IconButton:
4217
+ </div>
4218
+ <IconButton iconType={iconSymbol}></IconButton>
4219
+ </Flex>
4220
+ </Flex>
4221
+ </Flex>
4222
+ </ConfigProvider>
4223
+ );
4224
+ };
4225
+
4226
+ export default App;
4227
+ ```
4228
+
4229
+
4230
+
4231
+
4161
4232
  # 从 Antd 迁移
4162
4233
 
4163
4234
  ## 📦 安装
@@ -4316,103 +4387,6 @@ export default App;
4316
4387
 
4317
4388
 
4318
4389
 
4319
- # 使用
4320
-
4321
- 如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
4322
-
4323
-
4324
- ```tsx
4325
- import {
4326
- ConfigProvider,
4327
- purpleTheme,
4328
- Button,
4329
- IconFont,
4330
- IconButton,
4331
- } from '@agentscope-ai/design';
4332
- import { Flex } from 'antd';
4333
- import zhCN from 'antd/locale/zh_CN';
4334
- import { useState } from 'react';
4335
-
4336
- const App = () => {
4337
- const prefix = 'sps';
4338
- const iconSymbol = 'spark-effciency-line';
4339
- const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
4340
- return (
4341
- <ConfigProvider
4342
- {...purpleTheme}
4343
- prefix={prefix}
4344
- prefixCls={prefix}
4345
- iconfont={iconfont}
4346
- locale={zhCN}
4347
- style={{
4348
- width: '100%',
4349
- height: '100%',
4350
- }}
4351
- >
4352
- <Flex
4353
- style={{
4354
- width: '100%',
4355
- height: '100%',
4356
- backgroundColor: `var(--${prefix}-color-bg-base)`,
4357
- }}
4358
- justify="center"
4359
- align="center"
4360
- >
4361
- <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
4362
- <Flex gap={8}>
4363
- <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
4364
- <IconFont type={iconSymbol} />
4365
- </Flex>
4366
- <Flex gap={8}>
4367
- <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
4368
- <Button type="primary" iconType={iconSymbol}>
4369
- 添加用户
4370
- </Button>
4371
- </Flex>
4372
- <Flex gap={8}>
4373
- <div style={{ width: '100px', lineHeight: '32px' }}>
4374
- IconButton:
4375
- </div>
4376
- <IconButton iconType={iconSymbol}></IconButton>
4377
- </Flex>
4378
- </Flex>
4379
- </Flex>
4380
- </ConfigProvider>
4381
- );
4382
- };
4383
-
4384
- export default App;
4385
- ```
4386
-
4387
-
4388
-
4389
-
4390
- # 使用
4391
-
4392
-
4393
-
4394
- ```tsx
4395
- import { SparkLoadingLine } from '@agentscope-ai/icons';
4396
-
4397
- export default () => {
4398
- return (
4399
- <SparkLoadingLine
4400
- className="your-class-name"
4401
- style={{ color: 'var(--sps-color-primary)' }}
4402
- spin
4403
- size={48}
4404
- />
4405
- );
4406
- };
4407
-
4408
- ```
4409
-
4410
- 基本用法
4411
-
4412
- 访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
4413
-
4414
-
4415
-
4416
4390
  # Vibe 编程
4417
4391
 
4418
4392
  ## LLMs.txt
@@ -4443,91 +4417,6 @@ export default () => {
4443
4417
 
4444
4418
 
4445
4419
 
4446
- # 从零开始使用
4447
-
4448
- ## 📦 安装
4449
-
4450
-
4451
- ```bash
4452
- $ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
4453
- ```
4454
-
4455
-
4456
- ## 🔨 使用
4457
-
4458
-
4459
- ```tsx
4460
- import {
4461
- Button,
4462
- Image,
4463
- ConfigProvider,
4464
- purpleDarkTheme,
4465
- purpleTheme,
4466
- } from '@agentscope-ai/design';
4467
- import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4468
- import { Flex } from 'antd';
4469
- import zhCN from 'antd/locale/zh_CN';
4470
- import { useState } from 'react';
4471
-
4472
- const App = () => {
4473
- const [colorMode, setColorMode] = useState('light');
4474
- const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4475
-
4476
- const prefix = 'sps';
4477
- return (
4478
- <ConfigProvider
4479
- {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4480
- prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4481
- prefixCls={prefix}
4482
- iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4483
- locale={zhCN} // 来自 Ant Design 的语言包
4484
- style={{
4485
- width: '100%',
4486
- height: '100%',
4487
- }}
4488
- >
4489
- <div
4490
- style={{
4491
- width: '100%',
4492
- height: '100%',
4493
- backgroundColor: `var(--${prefix}-color-bg-base)`,
4494
- }}
4495
- >
4496
- <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4497
- <Image
4498
- width={120}
4499
- src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4500
- />
4501
- <div
4502
- style={{
4503
- color: `var(--${prefix}-ant-color-text-base)`,
4504
- fontSize: '24px',
4505
- textAlign: 'center',
4506
- }}
4507
- >
4508
- Hello Spark Design!
4509
- </div>
4510
- <Button
4511
- type="primary"
4512
- onClick={() => {
4513
- setColorMode(colorMode === 'light' ? 'dark' : 'light');
4514
- }}
4515
- icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4516
- >
4517
- {colorMode === 'light' ? '暗色' : '亮色'} 模式
4518
- </Button>
4519
- </Flex>
4520
- </div>
4521
- </ConfigProvider>
4522
- );
4523
- };
4524
-
4525
- export default App;
4526
- ```
4527
-
4528
-
4529
-
4530
-
4531
4420
  # Tokens
4532
4421
 
4533
4422
  除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
@@ -4951,3 +4840,115 @@ Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生
4951
4840
  }
4952
4841
  // 提示：您可以将 'sps' 替换为您自己的前缀
4953
4842
  ```
4843
+
4844
+
4845
+
4846
+
4847
+ # 从零开始使用
4848
+
4849
+ ## 📦 安装
4850
+
4851
+
4852
+ ```bash
4853
+ $ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
4854
+ ```
4855
+
4856
+
4857
+ ## 🔨 使用
4858
+
4859
+
4860
+ ```tsx
4861
+ import {
4862
+ Button,
4863
+ Image,
4864
+ ConfigProvider,
4865
+ purpleDarkTheme,
4866
+ purpleTheme,
4867
+ } from '@agentscope-ai/design';
4868
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4869
+ import { Flex } from 'antd';
4870
+ import zhCN from 'antd/locale/zh_CN';
4871
+ import { useState } from 'react';
4872
+
4873
+ const App = () => {
4874
+ const [colorMode, setColorMode] = useState('light');
4875
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4876
+
4877
+ const prefix = 'sps';
4878
+ return (
4879
+ <ConfigProvider
4880
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4881
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4882
+ prefixCls={prefix}
4883
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4884
+ locale={zhCN} // 来自 Ant Design 的语言包
4885
+ style={{
4886
+ width: '100%',
4887
+ height: '100%',
4888
+ }}
4889
+ >
4890
+ <div
4891
+ style={{
4892
+ width: '100%',
4893
+ height: '100%',
4894
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4895
+ }}
4896
+ >
4897
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4898
+ <Image
4899
+ width={120}
4900
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4901
+ />
4902
+ <div
4903
+ style={{
4904
+ color: `var(--${prefix}-ant-color-text-base)`,
4905
+ fontSize: '24px',
4906
+ textAlign: 'center',
4907
+ }}
4908
+ >
4909
+ Hello Spark Design!
4910
+ </div>
4911
+ <Button
4912
+ type="primary"
4913
+ onClick={() => {
4914
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4915
+ }}
4916
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4917
+ >
4918
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4919
+ </Button>
4920
+ </Flex>
4921
+ </div>
4922
+ </ConfigProvider>
4923
+ );
4924
+ };
4925
+
4926
+ export default App;
4927
+ ```
4928
+
4929
+
4930
+
4931
+
4932
+ # 使用
4933
+
4934
+
4935
+
4936
+ ```tsx
4937
+ import { SparkLoadingLine } from '@agentscope-ai/icons';
4938
+
4939
+ export default () => {
4940
+ return (
4941
+ <SparkLoadingLine
4942
+ className="your-class-name"
4943
+ style={{ color: 'var(--sps-color-primary)' }}
4944
+ spin
4945
+ size={48}
4946
+ />
4947
+ );
4948
+ };
4949
+
4950
+ ```
4951
+
4952
+ 基本用法
4953
+
4954
+ 访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
package/llms/index.llms.txt CHANGED
@@ -1,49 +1,49 @@
1
1
  # 索引
2
2
 
3
- - [Alert](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Alert/index.zh-CN.llms.txt)
4
- - [AlertDialog](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt)
5
- - [Anchor](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt)
6
- - [Avatar](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt)
7
- - [Breadcrumb](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt)
8
- - [Button](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Button/index.zh-CN.llms.txt)
9
- - [Card](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Card/index.zh-CN.llms.txt)
10
- - [Checkbox](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt)
11
- - [CodeBlock](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt)
12
- - [Collapse](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt)
13
- - [CollapsePanel](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt)
14
- - [DatePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt)
15
- - [Descriptions](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt)
16
- - [Drawer](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt)
17
- - [Dropdown](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt)
18
- - [Empty](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Empty/index.zh-CN.llms.txt)
19
- - [FloatButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt)
20
- - [Form](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Form/index.zh-CN.llms.txt)
21
- - [IconButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt)
22
- - [Image](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Image/index.zh-CN.llms.txt)
23
- - [Input](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Input/index.zh-CN.llms.txt)
24
- - [InputNumber](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt)
25
- - [Message](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Message/index.zh-CN.llms.txt)
26
- - [Modal](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Modal/index.zh-CN.llms.txt)
27
- - [Notification](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Notification/index.zh-CN.llms.txt)
28
- - [Pagination](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt)
29
- - [Popconfirm](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt)
30
- - [Popover](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Popover/index.zh-CN.llms.txt)
31
- - [Progress](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Progress/index.zh-CN.llms.txt)
32
- - [PromptsEditor](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt)
33
- - [Radio](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Radio/index.zh-CN.llms.txt)
34
- - [RadioButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt)
35
- - [Result](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Result/index.zh-CN.llms.txt)
36
- - [Select](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Select/index.zh-CN.llms.txt)
37
- - [Skeleton](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt)
38
- - [Slider](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Slider/index.zh-CN.llms.txt)
39
- - [Spinner](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt)
40
- - [Statistic](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt)
41
- - [Steps](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Steps/index.zh-CN.llms.txt)
42
- - [Switch](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Switch/index.zh-CN.llms.txt)
43
- - [Table](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Table/index.zh-CN.llms.txt)
44
- - [Tabs](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt)
45
- - [Tag](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Tag/index.zh-CN.llms.txt)
46
- - [TimePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt)
47
- - [Tooltip](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt)
48
- - [Upload](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Upload/index.zh-CN.llms.txt)
49
- - [Video](https://unpkg.com/browse/@agentscope-ai/design@1.0.16-rc.0/llms/components/commonComponents/Video/index.zh-CN.llms.txt)
3
+ - [Alert](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Alert/index.zh-CN.llms.txt)
4
+ - [AlertDialog](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt)
5
+ - [Anchor](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt)
6
+ - [Avatar](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt)
7
+ - [Breadcrumb](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt)
8
+ - [Button](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Button/index.zh-CN.llms.txt)
9
+ - [Card](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Card/index.zh-CN.llms.txt)
10
+ - [Checkbox](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt)
11
+ - [CodeBlock](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt)
12
+ - [Collapse](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt)
13
+ - [CollapsePanel](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt)
14
+ - [DatePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt)
15
+ - [Descriptions](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt)
16
+ - [Drawer](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt)
17
+ - [Dropdown](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt)
18
+ - [Empty](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Empty/index.zh-CN.llms.txt)
19
+ - [FloatButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt)
20
+ - [Form](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Form/index.zh-CN.llms.txt)
21
+ - [IconButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt)
22
+ - [Image](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Image/index.zh-CN.llms.txt)
23
+ - [Input](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Input/index.zh-CN.llms.txt)
24
+ - [InputNumber](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt)
25
+ - [Message](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Message/index.zh-CN.llms.txt)
26
+ - [Modal](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Modal/index.zh-CN.llms.txt)
27
+ - [Notification](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Notification/index.zh-CN.llms.txt)
28
+ - [Pagination](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt)
29
+ - [Popconfirm](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt)
30
+ - [Popover](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Popover/index.zh-CN.llms.txt)
31
+ - [Progress](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Progress/index.zh-CN.llms.txt)
32
+ - [PromptsEditor](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt)
33
+ - [Radio](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Radio/index.zh-CN.llms.txt)
34
+ - [RadioButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt)
35
+ - [Result](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Result/index.zh-CN.llms.txt)
36
+ - [Select](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Select/index.zh-CN.llms.txt)
37
+ - [Skeleton](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt)
38
+ - [Slider](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Slider/index.zh-CN.llms.txt)
39
+ - [Spinner](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt)
40
+ - [Statistic](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt)
41
+ - [Steps](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Steps/index.zh-CN.llms.txt)
42
+ - [Switch](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Switch/index.zh-CN.llms.txt)
43
+ - [Table](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Table/index.zh-CN.llms.txt)
44
+ - [Tabs](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt)
45
+ - [Tag](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Tag/index.zh-CN.llms.txt)
46
+ - [TimePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt)
47
+ - [Tooltip](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt)
48
+ - [Upload](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Upload/index.zh-CN.llms.txt)
49
+ - [Video](https://unpkg.com/browse/@agentscope-ai/design@1.0.15/llms/components/commonComponents/Video/index.zh-CN.llms.txt)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentscope-ai/design",
3
- "version": "1.0.16-rc.0",
3
+ "version": "1.0.16",
4
4
  "description": "AgentScope Spark Design - UI Library for AgentScope AI",
5
5
  "repository": {
6
6
  "type": "git",
@@ -67,7 +67,7 @@
67
67
  "ahooks": "^3.7.8",
68
68
  "antd-style": "^3.7.1",
69
69
  "dayjs": "^1.11.7",
70
- "dompurify": "^2.3.12",
70
+ "dompurify": "^2.3.8",
71
71
  "js-cookie": "^3.0.5",
72
72
  "lodash-es": "^4.17.21",
73
73
  "query-string": "^7.1.3",
@@ -97,7 +97,7 @@
97
97
  "@vitejs/plugin-react": "^4.3.3",
98
98
  "@vitejs/plugin-react-swc": "^3.7.1",
99
99
  "@vitest/coverage-istanbul": "2.1.4",
100
- "@vitest/ui": "2.1.9",
100
+ "@vitest/ui": "2.1.4",
101
101
  "ahooks": "^3.8.1",
102
102
  "antd": "^5.23.0",
103
103
  "classnames": "^2.5.1",