@agentscope-ai/design 1.0.21 → 1.0.22

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 (5) hide show
  1. package/lib/antd/themes/generateTheme.js +30 -32
  2. package/llms/all.llms.txt +1182 -288
  3. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +4 -3
  4. package/llms/index.llms.txt +13 -6
  5. package/package.json +1 -1
package/llms/all.llms.txt CHANGED
@@ -1,18 +1,5 @@
1
1
 
2
2
 
3
- <DemoTitle title="Video" desc="视频展示">
4
- #### API
5
-
6
- | 属性名 | 描述 | 类型 | 默认值 |
7
- |--------|--------|--------|--------|
8
- | mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
9
- | children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
10
-
11
-
12
-
13
-
14
-
15
-
16
3
  <DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
17
4
  #### API
18
5
 
@@ -191,6 +178,19 @@
191
178
 
192
179
 
193
180
 
181
+ <DemoTitle title="Video" desc="视频展示">
182
+ #### API
183
+
184
+ | 属性名 | 描述 | 类型 | 默认值 |
185
+ |--------|--------|--------|--------|
186
+ | mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
187
+ | children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
188
+
189
+
190
+
191
+
192
+
193
+
194
194
  <DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
195
195
  #### API
196
196
 
@@ -374,47 +374,6 @@ type RangeDisabledTime = (
374
374
 
375
375
 
376
376
 
377
- <DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
378
- #### API
379
-
380
- | 属性名 | 描述 | 类型 | 默认值 |
381
- |--------|--------|--------|--------|
382
- | label | Switch后的内容 | ReactNode | |
383
-
384
- <AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
385
-
386
-
387
- ## antd API
388
-
389
- 通用属性参考：[通用属性](/docs/react/common-props)
390
-
391
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
392
- |--------|--------|--------|--------|--------|
393
- | autoFocus | 组件自动获取焦点 | boolean | false | |
394
- | checked | 指定当前是否选中 | boolean | false | |
395
- | checkedChildren | 选中时的内容 | ReactNode | - | |
396
- | className | Switch 器类名 | string | - | |
397
- | defaultChecked | 初始是否选中 | boolean | false | |
398
- | defaultValue | defaultChecked | boolean | - | 5.12.0 |
399
- | disabled | 是否禁用 | boolean | false | |
400
- | loading | 加载中的开关 | boolean | false | |
401
- | size | 开关大小，可选值： | string | default | |
402
- | unCheckedChildren | 非选中时的内容 | ReactNode | - | |
403
- | value | checked | boolean | - | 5.12.0 |
404
- | onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
405
- | onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
406
-
407
-
408
- ## 方法
409
-
410
- | 名称 | 描述 |
411
- |--------|--------|
412
- | blur() | 移除焦点 |
413
- | focus() | 获取焦点 |
414
-
415
-
416
-
417
-
418
377
  <DemoTitle title="Table" desc="展示行列数据。">
419
378
  #### API
420
379
 
@@ -670,6 +629,47 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
670
629
 
671
630
 
672
631
 
632
+ <DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
633
+ #### API
634
+
635
+ | 属性名 | 描述 | 类型 | 默认值 |
636
+ |--------|--------|--------|--------|
637
+ | label | Switch后的内容 | ReactNode | |
638
+
639
+ <AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
640
+
641
+
642
+ ## antd API
643
+
644
+ 通用属性参考：[通用属性](/docs/react/common-props)
645
+
646
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
647
+ |--------|--------|--------|--------|--------|
648
+ | autoFocus | 组件自动获取焦点 | boolean | false | |
649
+ | checked | 指定当前是否选中 | boolean | false | |
650
+ | checkedChildren | 选中时的内容 | ReactNode | - | |
651
+ | className | Switch 器类名 | string | - | |
652
+ | defaultChecked | 初始是否选中 | boolean | false | |
653
+ | defaultValue | defaultChecked | boolean | - | 5.12.0 |
654
+ | disabled | 是否禁用 | boolean | false | |
655
+ | loading | 加载中的开关 | boolean | false | |
656
+ | size | 开关大小，可选值： | string | default | |
657
+ | unCheckedChildren | 非选中时的内容 | ReactNode | - | |
658
+ | value | checked | boolean | - | 5.12.0 |
659
+ | onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
660
+ | onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
661
+
662
+
663
+ ## 方法
664
+
665
+ | 名称 | 描述 |
666
+ |--------|--------|
667
+ | blur() | 移除焦点 |
668
+ | focus() | 获取焦点 |
669
+
670
+
671
+
672
+
673
673
  <DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
674
674
  #### API
675
675
 
@@ -870,67 +870,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
870
870
 
871
871
 
872
872
 
873
- <DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
874
- ## antd API
875
-
876
- 通用属性参考：[通用属性](/docs/react/common-props)
877
-
878
- ### Skeleton
879
-
880
- | 属性 | 说明 | 类型 | 默认值 |
881
- |--------|--------|--------|--------|
882
- | active | 是否展示动画效果 | boolean | false |
883
- | avatar | 是否显示头像占位图 | boolean \| | false |
884
- | loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
885
- | paragraph | 是否显示段落占位图 | boolean \| | true |
886
- | round | 为 true 时，段落和标题显示圆角 | boolean | false |
887
- | title | 是否显示标题占位图 | boolean \| | true |
888
-
889
-
890
- ### SkeletonAvatarProps
891
-
892
- | 属性 | 说明 | 类型 | 默认值 |
893
- |--------|--------|--------|--------|
894
- | active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
895
- | shape | 指定头像的形状 | circle | - |
896
- | size | 设置头像占位图的大小 | number \| | - |
897
-
898
-
899
- ### SkeletonTitleProps
900
-
901
- | 属性 | 说明 | 类型 | 默认值 |
902
- |--------|--------|--------|--------|
903
- | width | 设置标题占位图的宽度 | number \| string | - |
904
-
905
-
906
- ### SkeletonParagraphProps
907
-
908
- | 属性 | 说明 | 类型 | 默认值 |
909
- |--------|--------|--------|--------|
910
- | rows | 设置段落占位图的行数 | number | - |
911
- | width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
912
-
913
-
914
- ### SkeletonButtonProps
915
-
916
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
917
- |--------|--------|--------|--------|--------|
918
- | active | 是否展示动画效果 | boolean | false | |
919
- | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
920
- | shape | 指定按钮的形状 | circle | - | |
921
- | size | 设置按钮的大小 | large | - | |
922
-
923
-
924
- ### SkeletonInputProps
925
-
926
- | 属性 | 说明 | 类型 | 默认值 |
927
- |--------|--------|--------|--------|
928
- | active | 是否展示动画效果 | boolean | false |
929
- | size | 设置输入框的大小 | large | - |
930
-
931
-
932
-
933
-
934
873
  <DemoTitle title="Select" desc="下拉选择器">
935
874
  ## antd API
936
875
 
@@ -1029,6 +968,67 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1029
968
 
1030
969
 
1031
970
 
971
+ <DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
972
+ ## antd API
973
+
974
+ 通用属性参考：[通用属性](/docs/react/common-props)
975
+
976
+ ### Skeleton
977
+
978
+ | 属性 | 说明 | 类型 | 默认值 |
979
+ |--------|--------|--------|--------|
980
+ | active | 是否展示动画效果 | boolean | false |
981
+ | avatar | 是否显示头像占位图 | boolean \| | false |
982
+ | loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
983
+ | paragraph | 是否显示段落占位图 | boolean \| | true |
984
+ | round | 为 true 时，段落和标题显示圆角 | boolean | false |
985
+ | title | 是否显示标题占位图 | boolean \| | true |
986
+
987
+
988
+ ### SkeletonAvatarProps
989
+
990
+ | 属性 | 说明 | 类型 | 默认值 |
991
+ |--------|--------|--------|--------|
992
+ | active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
993
+ | shape | 指定头像的形状 | circle | - |
994
+ | size | 设置头像占位图的大小 | number \| | - |
995
+
996
+
997
+ ### SkeletonTitleProps
998
+
999
+ | 属性 | 说明 | 类型 | 默认值 |
1000
+ |--------|--------|--------|--------|
1001
+ | width | 设置标题占位图的宽度 | number \| string | - |
1002
+
1003
+
1004
+ ### SkeletonParagraphProps
1005
+
1006
+ | 属性 | 说明 | 类型 | 默认值 |
1007
+ |--------|--------|--------|--------|
1008
+ | rows | 设置段落占位图的行数 | number | - |
1009
+ | width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
1010
+
1011
+
1012
+ ### SkeletonButtonProps
1013
+
1014
+ | 属性 | 说明 | 类型 | 默认值 | 版本 |
1015
+ |--------|--------|--------|--------|--------|
1016
+ | active | 是否展示动画效果 | boolean | false | |
1017
+ | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
1018
+ | shape | 指定按钮的形状 | circle | - | |
1019
+ | size | 设置按钮的大小 | large | - | |
1020
+
1021
+
1022
+ ### SkeletonInputProps
1023
+
1024
+ | 属性 | 说明 | 类型 | 默认值 |
1025
+ |--------|--------|--------|--------|
1026
+ | active | 是否展示动画效果 | boolean | false |
1027
+ | size | 设置输入框的大小 | large | - |
1028
+
1029
+
1030
+
1031
+
1032
1032
  <DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
1033
1033
  ## API
1034
1034
 
@@ -1201,28 +1201,72 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1201
1201
 
1202
1202
 
1203
1203
 
1204
- <DemoTitle title="Progress" desc="用于指示任务的完成进度">
1204
+ <DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
1205
+ #### API
1206
+
1207
+ <AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
1208
+
1209
+
1205
1210
  ## antd API
1206
1211
 
1207
1212
  通用属性参考：[通用属性](/docs/react/common-props)
1208
1213
 
1209
- 各类型共用的属性。
1210
-
1211
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
1214
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1212
1215
  |--------|--------|--------|--------|--------|
1213
- | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
1214
- | percent | 百分比 | number | 0 | - |
1215
- | showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
1216
- | status | 状态，可选： | string | - | - |
1217
- | strokeColor | 进度条的色彩 | string | - | - |
1218
- | strokeLinecap | 进度条的样式 | round | round | - |
1219
- | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
1220
- | trailColor | 未完成的分段的颜色 | string | - | - |
1221
- | type | 类型，可选 | string | line | - |
1222
- | size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
1216
+ | content | 卡片内容 | ReactNode \| () => ReactNode | - | |
1217
+ | title | 卡片标题 | ReactNode \| () => ReactNode | - | |
1223
1218
 
1224
1219
 
1225
- ### `type="line"`
1220
+ <!-- 共同的 API -->
1221
+ 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1222
+
1223
+ <!-- prettier-ignore -->
1224
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1225
+ |--------|--------|--------|--------|--------|
1226
+ | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1227
+ | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1228
+ | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1229
+ | color | 背景颜色 | string | - | 4.3.0 |
1230
+ | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1231
+ | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1232
+ | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1233
+ | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1234
+ | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1235
+ | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1236
+ | placement | 气泡框位置，可选 | string | top | |
1237
+ | trigger | 触发行为，可选 | string \| string[] | hover | |
1238
+ | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1239
+ | zIndex | 设置 Tooltip 的 | number | - | |
1240
+ | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1241
+
1242
+ ## 注意
1243
+
1244
+ 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
1245
+
1246
+
1247
+
1248
+ <DemoTitle title="Progress" desc="用于指示任务的完成进度">
1249
+ ## antd API
1250
+
1251
+ 通用属性参考：[通用属性](/docs/react/common-props)
1252
+
1253
+ 各类型共用的属性。
1254
+
1255
+ | 属性 | 说明 | 类型 | 默认值 | 版本 |
1256
+ |--------|--------|--------|--------|--------|
1257
+ | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
1258
+ | percent | 百分比 | number | 0 | - |
1259
+ | showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
1260
+ | status | 状态，可选： | string | - | - |
1261
+ | strokeColor | 进度条的色彩 | string | - | - |
1262
+ | strokeLinecap | 进度条的样式 | round | round | - |
1263
+ | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
1264
+ | trailColor | 未完成的分段的颜色 | string | - | - |
1265
+ | type | 类型，可选 | string | line | - |
1266
+ | size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
1267
+
1268
+
1269
+ ### `type="line"`
1226
1270
 
1227
1271
  | 属性 | 说明 | 类型 | 默认值 | 版本 |
1228
1272
  |--------|--------|--------|--------|--------|
@@ -1253,50 +1297,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1253
1297
 
1254
1298
 
1255
1299
 
1256
- <DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
1257
- #### API
1258
-
1259
- <AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
1260
-
1261
-
1262
- ## antd API
1263
-
1264
- 通用属性参考：[通用属性](/docs/react/common-props)
1265
-
1266
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1267
- |--------|--------|--------|--------|--------|
1268
- | content | 卡片内容 | ReactNode \| () => ReactNode | - | |
1269
- | title | 卡片标题 | ReactNode \| () => ReactNode | - | |
1270
-
1271
-
1272
- <!-- 共同的 API -->
1273
- 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1274
-
1275
- <!-- prettier-ignore -->
1276
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1277
- |--------|--------|--------|--------|--------|
1278
- | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1279
- | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1280
- | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1281
- | color | 背景颜色 | string | - | 4.3.0 |
1282
- | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1283
- | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1284
- | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1285
- | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1286
- | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1287
- | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1288
- | placement | 气泡框位置，可选 | string | top | |
1289
- | trigger | 触发行为，可选 | string \| string[] | hover | |
1290
- | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1291
- | zIndex | 设置 Tooltip 的 | number | - | |
1292
- | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1293
-
1294
- ## 注意
1295
-
1296
- 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
1297
-
1298
-
1299
-
1300
1300
  <DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
1301
1301
  #### API
1302
1302
 
@@ -2781,6 +2781,49 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
2781
2781
 
2782
2782
 
2783
2783
 
2784
+ <DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
2785
+ ## API
2786
+
2787
+ | 属性名 | 描述 | 类型 | 默认值 |
2788
+ |--------|--------|--------|--------|
2789
+ | type | 空状态类型 | \| 'noData'
2790
+ \| 'networkError'
2791
+ \| '404'
2792
+ \| 'arrears'
2793
+ \| 'desktopOnly'
2794
+ \| 'noAudio'
2795
+ \| 'noImage'
2796
+ \| 'noVideo'
2797
+ \| 'noAccess'
2798
+ \| 'error'
2799
+ \| 'noModel'
2800
+ \| 'noApp'
2801
+ \| 'success'
2802
+ \| 'failed'
2803
+ \| 'inProgress'
2804
+ \| 'stayTuned' | 'noData' |
2805
+ | texture | 是否显示纹理 | boolean | true |
2806
+ | image | 图片地址 | string | 默认是no data的图片 |
2807
+ | imageStyle | 图片样式 | React.CSSProperties | |
2808
+ | title | 标题内容 | React.ReactNode | |
2809
+ | description | 自定义描述内容 | React.ReactNode | |
2810
+ | onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
2811
+ | okText | ok按钮的文本 | React.ReactNode | |
2812
+ | okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
2813
+ | okButtonProps | ok按钮的props | SparkButtonProps | |
2814
+ | children | 自定义空状态的内容 | React.ReactNode | |
2815
+ | className | 自定义空状态的类名 | string | |
2816
+ | style | 自定义空状态的样式 | React.CSSProperties | |
2817
+ | size | 自定义空状态的大小 | React.CSSProperties['width'] | |
2818
+ | autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
2819
+
2820
+
2821
+ <AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
2822
+
2823
+
2824
+
2825
+
2826
+
2784
2827
  <DemoTitle title="Dropdown" desc="向下弹出的列表。">
2785
2828
  #### API
2786
2829
 
@@ -2932,49 +2975,6 @@ const dividerItem = {
2932
2975
 
2933
2976
 
2934
2977
 
2935
- <DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
2936
- ## API
2937
-
2938
- | 属性名 | 描述 | 类型 | 默认值 |
2939
- |--------|--------|--------|--------|
2940
- | type | 空状态类型 | \| 'noData'
2941
- \| 'networkError'
2942
- \| '404'
2943
- \| 'arrears'
2944
- \| 'desktopOnly'
2945
- \| 'noAudio'
2946
- \| 'noImage'
2947
- \| 'noVideo'
2948
- \| 'noAccess'
2949
- \| 'error'
2950
- \| 'noModel'
2951
- \| 'noApp'
2952
- \| 'success'
2953
- \| 'failed'
2954
- \| 'inProgress'
2955
- \| 'stayTuned' | 'noData' |
2956
- | texture | 是否显示纹理 | boolean | true |
2957
- | image | 图片地址 | string | 默认是no data的图片 |
2958
- | imageStyle | 图片样式 | React.CSSProperties | |
2959
- | title | 标题内容 | React.ReactNode | |
2960
- | description | 自定义描述内容 | React.ReactNode | |
2961
- | onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
2962
- | okText | ok按钮的文本 | React.ReactNode | |
2963
- | okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
2964
- | okButtonProps | ok按钮的props | SparkButtonProps | |
2965
- | children | 自定义空状态的内容 | React.ReactNode | |
2966
- | className | 自定义空状态的类名 | string | |
2967
- | style | 自定义空状态的样式 | React.CSSProperties | |
2968
- | size | 自定义空状态的大小 | React.CSSProperties['width'] | |
2969
- | autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
2970
-
2971
-
2972
- <AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
2973
-
2974
-
2975
-
2976
-
2977
-
2978
2978
  <DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
2979
2979
  #### API
2980
2980
 
@@ -3428,77 +3428,6 @@ export type FormatType =
3428
3428
 
3429
3429
 
3430
3430
 
3431
- <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
3432
- #### API
3433
-
3434
- | 属性名 | 描述 | 类型 | 默认值 |
3435
- |--------|--------|--------|--------|
3436
- | description | 描述文本 | string | |
3437
- | descriptionClassName | 描述文本的样式类名 | string | |
3438
- | descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
3439
-
3440
-
3441
- <AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
3442
-
3443
-
3444
- ## antd API
3445
-
3446
- 通用属性参考：[通用属性](/docs/react/common-props)
3447
-
3448
- #### Checkbox
3449
-
3450
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3451
- |--------|--------|--------|--------|--------|
3452
- | autoFocus | 自动获取焦点 | boolean | false | |
3453
- | checked | 指定当前是否选中 | boolean | false | |
3454
- | defaultChecked | 初始是否选中 | boolean | false | |
3455
- | disabled | 失效状态 | boolean | false | |
3456
- | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
3457
- | onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
3458
- | onBlur | 失去焦点时的回调 | function() | - | |
3459
- | onFocus | 获得焦点时的回调 | function() | - | |
3460
-
3461
-
3462
- #### Checkbox.Group
3463
-
3464
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3465
- |--------|--------|--------|--------|--------|
3466
- | defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
3467
- | disabled | 整组失效 | boolean | false | |
3468
- | name | CheckboxGroup 下所有 | string | - | |
3469
- | options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
3470
- | value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
3471
- | title | 选项的 title | string | - | |
3472
- | className | 选项的类名 | string | - | 5.25.0 |
3473
- | style | 选项的样式 | React.CSSProperties | - | |
3474
- | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
3475
-
3476
-
3477
- ##### Option
3478
-
3479
-
3480
- ```typescript
3481
- interface Option {
3482
- label: string;
3483
- value: string;
3484
- disabled?: boolean;
3485
- }
3486
- ```
3487
-
3488
-
3489
- ### 方法
3490
-
3491
- #### Checkbox
3492
-
3493
- | 名称 | 描述 | 版本 |
3494
- |--------|--------|--------|
3495
- | blur() | 移除焦点 | |
3496
- | focus() | 获取焦点 | |
3497
- | nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
3498
-
3499
-
3500
-
3501
-
3502
3431
  <DemoTitle title="CodeBlock" desc="代码块">
3503
3432
  #### API
3504
3433
 
@@ -3577,6 +3506,77 @@ interface Option {
3577
3506
 
3578
3507
 
3579
3508
 
3509
+ <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
3510
+ #### API
3511
+
3512
+ | 属性名 | 描述 | 类型 | 默认值 |
3513
+ |--------|--------|--------|--------|
3514
+ | description | 描述文本 | string | |
3515
+ | descriptionClassName | 描述文本的样式类名 | string | |
3516
+ | descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
3517
+
3518
+
3519
+ <AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
3520
+
3521
+
3522
+ ## antd API
3523
+
3524
+ 通用属性参考：[通用属性](/docs/react/common-props)
3525
+
3526
+ #### Checkbox
3527
+
3528
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3529
+ |--------|--------|--------|--------|--------|
3530
+ | autoFocus | 自动获取焦点 | boolean | false | |
3531
+ | checked | 指定当前是否选中 | boolean | false | |
3532
+ | defaultChecked | 初始是否选中 | boolean | false | |
3533
+ | disabled | 失效状态 | boolean | false | |
3534
+ | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
3535
+ | onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
3536
+ | onBlur | 失去焦点时的回调 | function() | - | |
3537
+ | onFocus | 获得焦点时的回调 | function() | - | |
3538
+
3539
+
3540
+ #### Checkbox.Group
3541
+
3542
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3543
+ |--------|--------|--------|--------|--------|
3544
+ | defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
3545
+ | disabled | 整组失效 | boolean | false | |
3546
+ | name | CheckboxGroup 下所有 | string | - | |
3547
+ | options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
3548
+ | value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
3549
+ | title | 选项的 title | string | - | |
3550
+ | className | 选项的类名 | string | - | 5.25.0 |
3551
+ | style | 选项的样式 | React.CSSProperties | - | |
3552
+ | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
3553
+
3554
+
3555
+ ##### Option
3556
+
3557
+
3558
+ ```typescript
3559
+ interface Option {
3560
+ label: string;
3561
+ value: string;
3562
+ disabled?: boolean;
3563
+ }
3564
+ ```
3565
+
3566
+
3567
+ ### 方法
3568
+
3569
+ #### Checkbox
3570
+
3571
+ | 名称 | 描述 | 版本 |
3572
+ |--------|--------|--------|
3573
+ | blur() | 移除焦点 | |
3574
+ | focus() | 获取焦点 | |
3575
+ | nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
3576
+
3577
+
3578
+
3579
+
3580
3580
  <DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
3581
3581
  #### API
3582
3582
 
@@ -4059,6 +4059,349 @@ const confirmed = await modal.confirm({ ... });
4059
4059
 
4060
4060
 
4061
4061
 
4062
+ ## 内置主题
4063
+
4064
+ Alibaba Cloud Spark Design 提供四种内置主题：
4065
+
4066
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
4067
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
4068
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
4069
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
4070
+
4071
+ ### 示例用法
4072
+
4073
+
4074
+ ```tsx
4075
+ import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
4076
+
4077
+ const App = () => {
4078
+ return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
4079
+ };
4080
+
4081
+ export default App;
4082
+ ```
4083
+
4084
+
4085
+ ## 从 Antd token 生成您自己的主题
4086
+
4087
+ 如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
4088
+
4089
+
4090
+ ```tsx
4091
+ import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
4092
+ const yourToken = {
4093
+ borderRadiusXS: 2,
4094
+ borderRadiusSM: 4,
4095
+ borderRadius: 6,
4096
+ borderRadiusLG: 8,
4097
+ borderRadiusXL: 12,
4098
+ borderRadiusFull: 999,
4099
+ wireframe: false,
4100
+ colorPrimaryBg: '#F2F0FF',
4101
+ colorPrimaryBgHover: '#F2F0FF',
4102
+ colorPrimaryBorder: '#E2DEFF',
4103
+ colorPrimaryBorderHover: '#BCB5FF',
4104
+ // ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
4105
+ };
4106
+ const darkMode = false;
4107
+ const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
4108
+ const App = () => {
4109
+ return (
4110
+ <ConfigProvider {...yourThemeWithSparkStyle}>
4111
+ Hello Spark Design!
4112
+ </ConfigProvider>
4113
+ );
4114
+ };
4115
+
4116
+ export default App;
4117
+ ```
4118
+
4119
+
4120
+ 您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
4121
+
4122
+
4123
+
4124
+ <div align="center"><a name="readme-top"></a>
4125
+ <img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
4126
+ <h1>Alibaba Cloud Spark Design</h1>
4127
+ </div>
4128
+
4129
+ # 概述
4130
+
4131
+ Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
4132
+ <br />
4133
+ <br />
4134
+
4135
+ ## ✨ 特性
4136
+
4137
+
4138
+ - <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
4139
+ - 🛡 使用 TypeScript 编写，具有可预测的静态类型。
4140
+ - 🧠 为 LLM 产品设计的各种场景组件。
4141
+ - 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
4142
+ - 🎨 多种预设主题。
4143
+ - ☀️ 轻松切换明暗模式。
4144
+
4145
+ ## 📦 安装
4146
+
4147
+
4148
+ ```bash
4149
+ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
4150
+ ```
4151
+
4152
+
4153
+ ## Tree Shaking 支持
4154
+
4155
+ @agentscope-ai/design 默认基于 ES 模块支持 tree shaking
4156
+
4157
+ ## TypeScript
4158
+
4159
+ @agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
4160
+
4161
+ ## 内置主题
4162
+
4163
+ 我们提供四种内置主题：
4164
+
4165
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
4166
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
4167
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
4168
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
4169
+
4170
+ ## 🏗️ 开源
4171
+
4172
+ [@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
4173
+
4174
+
4175
+
4176
+ # 使用
4177
+
4178
+ 如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
4179
+
4180
+
4181
+ ```tsx
4182
+ import {
4183
+ ConfigProvider,
4184
+ purpleTheme,
4185
+ Button,
4186
+ IconFont,
4187
+ IconButton,
4188
+ } from '@agentscope-ai/design';
4189
+ import { Flex } from 'antd';
4190
+ import zhCN from 'antd/locale/zh_CN';
4191
+ import { useState } from 'react';
4192
+
4193
+ const App = () => {
4194
+ const prefix = 'sps';
4195
+ const iconSymbol = 'spark-effciency-line';
4196
+ const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
4197
+ return (
4198
+ <ConfigProvider
4199
+ {...purpleTheme}
4200
+ prefix={prefix}
4201
+ prefixCls={prefix}
4202
+ iconfont={iconfont}
4203
+ locale={zhCN}
4204
+ style={{
4205
+ width: '100%',
4206
+ height: '100%',
4207
+ }}
4208
+ >
4209
+ <Flex
4210
+ style={{
4211
+ width: '100%',
4212
+ height: '100%',
4213
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4214
+ }}
4215
+ justify="center"
4216
+ align="center"
4217
+ >
4218
+ <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
4219
+ <Flex gap={8}>
4220
+ <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
4221
+ <IconFont type={iconSymbol} />
4222
+ </Flex>
4223
+ <Flex gap={8}>
4224
+ <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
4225
+ <Button type="primary" iconType={iconSymbol}>
4226
+ 添加用户
4227
+ </Button>
4228
+ </Flex>
4229
+ <Flex gap={8}>
4230
+ <div style={{ width: '100px', lineHeight: '32px' }}>
4231
+ IconButton:
4232
+ </div>
4233
+ <IconButton iconType={iconSymbol}></IconButton>
4234
+ </Flex>
4235
+ </Flex>
4236
+ </Flex>
4237
+ </ConfigProvider>
4238
+ );
4239
+ };
4240
+
4241
+ export default App;
4242
+ ```
4243
+
4244
+
4245
+
4246
+
4247
+ # 从 Antd 迁移
4248
+
4249
+ ## 📦 安装
4250
+
4251
+
4252
+ ```bash
4253
+ $ npm install @agentscope-ai/icons @agentscope-ai/design --save
4254
+ ```
4255
+
4256
+
4257
+ ## 🔨 使用
4258
+
4259
+ 从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
4260
+
4261
+
4262
+ ```tsx
4263
+ import {
4264
+ Button,
4265
+ Image,
4266
+ ConfigProvider,
4267
+ purpleDarkTheme,
4268
+ purpleTheme,
4269
+ } from '@agentscope-ai/design';
4270
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4271
+ import { Flex } from 'antd';
4272
+ import zhCN from 'antd/locale/zh_CN';
4273
+ import { useState } from 'react';
4274
+
4275
+ const App = () => {
4276
+ const [colorMode, setColorMode] = useState('light');
4277
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4278
+
4279
+ const prefix = 'sps';
4280
+ return (
4281
+ <ConfigProvider
4282
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4283
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4284
+ prefixCls={prefix}
4285
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4286
+ locale={zhCN} // 来自 Ant Design 的语言包
4287
+ style={{
4288
+ width: '100%',
4289
+ height: '100%',
4290
+ }}
4291
+ >
4292
+ <div
4293
+ style={{
4294
+ width: '100%',
4295
+ height: '100%',
4296
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4297
+ }}
4298
+ >
4299
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4300
+ <Image
4301
+ width={120}
4302
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4303
+ />
4304
+ <div
4305
+ style={{
4306
+ color: `var(--${prefix}-ant-color-text-base)`,
4307
+ fontSize: '24px',
4308
+ textAlign: 'center',
4309
+ }}
4310
+ >
4311
+ Hello Spark Design!
4312
+ </div>
4313
+ <Button
4314
+ type="primary"
4315
+ onClick={() => {
4316
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4317
+ }}
4318
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4319
+ >
4320
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4321
+ </Button>
4322
+ </Flex>
4323
+ </div>
4324
+ </ConfigProvider>
4325
+ );
4326
+ };
4327
+
4328
+ export default App;
4329
+ ```
4330
+
4331
+
4332
+ 如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
4333
+
4334
+
4335
+ ```tsx
4336
+ import {
4337
+ ConfigProvider,
4338
+ purpleDarkTheme,
4339
+ purpleTheme,
4340
+ } from '@agentscope-ai/design';
4341
+ import { Button, Image, Flex } from 'antd';
4342
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4343
+ import zhCN from 'antd/locale/zh_CN';
4344
+ import { useState } from 'react';
4345
+
4346
+ const App = () => {
4347
+ const [colorMode, setColorMode] = useState('light');
4348
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4349
+
4350
+ const prefix = 'sps';
4351
+ return (
4352
+ <ConfigProvider
4353
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4354
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4355
+ prefixCls={prefix}
4356
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4357
+ locale={zhCN} // 来自 Ant Design 的语言包
4358
+ style={{
4359
+ width: '100%',
4360
+ height: '100%',
4361
+ }}
4362
+ >
4363
+ <div
4364
+ style={{
4365
+ width: '100%',
4366
+ height: '100%',
4367
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4368
+ }}
4369
+ >
4370
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4371
+ <Image
4372
+ width={120}
4373
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4374
+ />
4375
+ <div
4376
+ style={{
4377
+ color: `var(--${prefix}-ant-color-text-base)`,
4378
+ fontSize: '24px',
4379
+ textAlign: 'center',
4380
+ }}
4381
+ >
4382
+ Hello Spark Design!
4383
+ </div>
4384
+ <Button
4385
+ type="primary"
4386
+ onClick={() => {
4387
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4388
+ }}
4389
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4390
+ >
4391
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4392
+ </Button>
4393
+ </Flex>
4394
+ </div>
4395
+ </ConfigProvider>
4396
+ );
4397
+ };
4398
+
4399
+ export default App;
4400
+ ```
4401
+
4402
+
4403
+
4404
+
4062
4405
  # 使用
4063
4406
 
4064
4407
 
@@ -4085,6 +4428,557 @@ export default () => {
4085
4428
 
4086
4429
 
4087
4430
 
4431
+ # Vibe 编程
4432
+
4433
+ ## LLMs.txt
4434
+
4435
+ 为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
4436
+
4437
+
4438
+ - [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
4439
+ - [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
4440
+
4441
+ 在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
4442
+
4443
+ ## D2C
4444
+
4445
+ 在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
4446
+
4447
+
4448
+ - 准确识别 icon
4449
+ - 使用标准 css token
4450
+ - 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
4451
+ - 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
4452
+
4453
+ <div>
4454
+ <video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
4455
+ </div>
4456
+
4457
+ 我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
4458
+
4459
+
4460
+
4461
+ # 从零开始使用
4462
+
4463
+ ## 📦 安装
4464
+
4465
+
4466
+ ```bash
4467
+ $ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
4468
+ ```
4469
+
4470
+
4471
+ ## 🔨 使用
4472
+
4473
+
4474
+ ```tsx
4475
+ import {
4476
+ Button,
4477
+ Image,
4478
+ ConfigProvider,
4479
+ purpleDarkTheme,
4480
+ purpleTheme,
4481
+ } from '@agentscope-ai/design';
4482
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4483
+ import { Flex } from 'antd';
4484
+ import zhCN from 'antd/locale/zh_CN';
4485
+ import { useState } from 'react';
4486
+
4487
+ const App = () => {
4488
+ const [colorMode, setColorMode] = useState('light');
4489
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4490
+
4491
+ const prefix = 'sps';
4492
+ return (
4493
+ <ConfigProvider
4494
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4495
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4496
+ prefixCls={prefix}
4497
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4498
+ locale={zhCN} // 来自 Ant Design 的语言包
4499
+ style={{
4500
+ width: '100%',
4501
+ height: '100%',
4502
+ }}
4503
+ >
4504
+ <div
4505
+ style={{
4506
+ width: '100%',
4507
+ height: '100%',
4508
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4509
+ }}
4510
+ >
4511
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4512
+ <Image
4513
+ width={120}
4514
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4515
+ />
4516
+ <div
4517
+ style={{
4518
+ color: `var(--${prefix}-ant-color-text-base)`,
4519
+ fontSize: '24px',
4520
+ textAlign: 'center',
4521
+ }}
4522
+ >
4523
+ Hello Spark Design!
4524
+ </div>
4525
+ <Button
4526
+ type="primary"
4527
+ onClick={() => {
4528
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4529
+ }}
4530
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4531
+ >
4532
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4533
+ </Button>
4534
+ </Flex>
4535
+ </div>
4536
+ </ConfigProvider>
4537
+ );
4538
+ };
4539
+
4540
+ export default App;
4541
+ ```
4542
+
4543
+
4544
+
4545
+
4546
+ # Tokens
4547
+
4548
+ 除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
4549
+
4550
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
4551
+
4552
+ ```json
4553
+ {
4554
+ "borderRadiusXS": 2,
4555
+ "borderRadiusSM": 4,
4556
+ "borderRadius": 6,
4557
+ "borderRadiusLG": 8,
4558
+ "borderRadiusXL": 12,
4559
+ "borderRadiusFull": 999,
4560
+ "wireframe": false,
4561
+ "colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
4562
+ "colorPrimaryBgHover": "#F2F0FF",
4563
+ "colorPrimaryBorder": "#E2DEFF",
4564
+ "colorPrimaryBorderHover": "#BCB5FF",
4565
+ "colorPrimaryHover": "#9189FA",
4566
+ "colorPrimary": "#615CED",
4567
+ "colorPrimaryActive": "#4444C7",
4568
+ "colorPrimaryTextHover": "#9189FA",
4569
+ "colorPrimaryText": "#615CED",
4570
+ "colorPrimaryTextActive": "#4444C7",
4571
+ "colorTextBase": "#26244c",
4572
+ "colorBgBase": "#FFFFFF",
4573
+ "colorText": "rgba(38, 36, 76, 0.88)",
4574
+ "colorTextSecondary": "rgba(38, 36, 76, 0.65)",
4575
+ "colorTextTertiary": "rgba(38, 36, 76, 0.45)",
4576
+ "colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
4577
+ "colorBorder": "#cdd0dc",
4578
+ "colorBorderSecondary": "#e6e8ee",
4579
+ "colorFill": "#cdd0dc5c",
4580
+ "colorFillSecondary": "#cdd0dc33",
4581
+ "colorFillTertiary": "#cdd0dc26",
4582
+ "colorFillQuaternary": "#cdd0dc1a",
4583
+ "colorBgContainer": "#FFFFFF",
4584
+ "colorBgElevated": "#FFFFFF",
4585
+ "colorBgLayout": "#f9fafd",
4586
+ "colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
4587
+ "colorBgMask": "rgba(20, 19, 39, 0.45)",
4588
+ "colorInfo": "#0B83F1",
4589
+ "colorInfoHover": "#5EBCFF",
4590
+ "colorInfoBorder": "#87D1FF",
4591
+ "colorInfoText": "#0B83F1",
4592
+ "colorInfoBg": "#E6F7FF",
4593
+ "colorInfoBgHover": "#B0E3FF",
4594
+ "colorInfoBorderHover": "#5EBCFF",
4595
+ "colorSuccess": "#5BB98B",
4596
+ "colorSuccessHover": "#ABD4BE",
4597
+ "colorSuccessBg": "#EBFAF0",
4598
+ "colorSuccessBgHover": "#DFEDE4",
4599
+ "colorSuccessBorder": "#D3E0D9",
4600
+ "colorSuccessBorderHover": "#ABD4BE",
4601
+ "colorWarning": "#FAAD14",
4602
+ "colorWarningHover": "#FFD666",
4603
+ "colorWarningBg": "#FFFBE6",
4604
+ "colorWarningBgHover": "#FFF1B8",
4605
+ "colorWarningBorder": "#FFE58F",
4606
+ "colorWarningBorderHover": "#FFD666",
4607
+ "colorError": "#FF4D4F",
4608
+ "colorErrorHover": "#FF7875",
4609
+ "colorErrorBg": "#FFF2F0",
4610
+ "colorErrorBgHover": "#FFF1F0",
4611
+ "colorErrorBorder": "#FFCCC7",
4612
+ "colorErrorBorderHover": "#FFA39E",
4613
+ "colorLink": "#615CED",
4614
+ "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
4615
+ "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4616
+
4617
+ "colorTextWhite": "#ffffff",
4618
+ "colorTextOnPrimary": "#ffffff",
4619
+ "colorFillDisable": "#DBDAE7",
4620
+ "colorPurple": "#615CED",
4621
+ "colorPurpleHover": "#8080FF",
4622
+ "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
4623
+ "colorPink": "#EC4899",
4624
+ "colorPinkHover": "#E593BC",
4625
+ "colorPinkBg": "rgba(251, 220, 239, 0.8)",
4626
+ "colorYellow": "#EAB308",
4627
+ "colorYellowHover": "#F1D372",
4628
+ "colorYellowBg": "rgba(255, 250, 184, 0.8)",
4629
+ "colorOrange": "#FA8125",
4630
+ "colorOrangeHover": "#E88C45",
4631
+ "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
4632
+ "colorTeal": "#14B8A6",
4633
+ "colorTealHover": "#5FB3A9",
4634
+ "colorTealBg": "rgba(200, 244, 233, 0.8)",
4635
+ "colorBlue": "#0090FF",
4636
+ "colorBlueHover": "#72BCF5",
4637
+ "colorBlueBg": "rgba(194, 229, 255, 0.8)",
4638
+ "colorMauve": "#8E8C99",
4639
+ "colorMauveHover": "#C0BFC8",
4640
+ "colorMauveBg": "rgba(239, 240, 243, 0.8)",
4641
+ "colorSlate": "#1E293B",
4642
+ "colorSlateHover": "#475569",
4643
+ "colorSlateBg": "#E2E8F0",
4644
+ "colorLavender": "#A77BFF",
4645
+ "colorLavenderHover": "#BB99FF",
4646
+ "colorLavenderBg": "rgba(226, 212, 255, 0.8)",
4647
+
4648
+ "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4649
+ "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4650
+ "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
4651
+ }
4652
+ ```
4653
+
4654
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
4655
+
4656
+ ```json
4657
+ {
4658
+ "borderRadiusXS": 2,
4659
+ "borderRadiusSM": 4,
4660
+ "borderRadius": 6,
4661
+ "borderRadiusLG": 8,
4662
+ "borderRadiusXL": 12,
4663
+ "borderRadiusFull": 999,
4664
+ "wireframe": false,
4665
+ "colorPrimaryBg": "#202041",
4666
+ "colorPrimaryBgHover": "#202041",
4667
+ "colorPrimaryBorder": "#2B2A55",
4668
+ "colorPrimaryBorderHover": "#373476",
4669
+ "colorPrimaryHover": "#857DE3",
4670
+ "colorPrimary": "#5551CC",
4671
+ "colorPrimaryActive": "#4643A1",
4672
+ "colorPrimaryTextHover": "#857DE3",
4673
+ "colorPrimaryText": "#5551CC",
4674
+ "colorPrimaryTextActive": "#4643A1",
4675
+ "colorTextBase": "#E7E7ED",
4676
+ "colorBgBase": "#000000",
4677
+ "colorText": "rgba(231, 231, 237, 0.88)",
4678
+ "colorTextSecondary": "rgba(231, 231, 237, 0.65)",
4679
+ "colorTextTertiary": "rgba(231, 231, 237, 0.45)",
4680
+ "colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
4681
+ "colorBorder": "rgba(71, 71, 97, 0.8)",
4682
+ "colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
4683
+ "colorFill": "rgba(231, 231, 237, 0.18)",
4684
+ "colorFillSecondary": "rgba(231, 231, 237, 0.12)",
4685
+ "colorFillTertiary": "rgba(231, 231, 237, 0.08)",
4686
+ "colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
4687
+ "colorBgContainer": "#0F0F14",
4688
+ "colorBgElevated": "#0F0F14",
4689
+ "colorBgLayout": "#0F0F14",
4690
+ "colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
4691
+ "colorBgMask": "rgba(5, 5, 8, 0.8)",
4692
+ "colorInfo": "#0B83F1",
4693
+ "colorInfoHover": "rgba(42, 114, 165, 1)",
4694
+ "colorInfoBorder": "rgba(135, 209, 255, 0.2)",
4695
+ "colorInfoText": "#0B83F1",
4696
+ "colorInfoBg": "rgba(27, 73, 115, 0.25)",
4697
+ "colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
4698
+ "colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
4699
+ "colorSuccess": "#5BB98B",
4700
+ "colorSuccessHover": "rgba(87, 141, 112, 1)",
4701
+ "colorSuccessBg": "rgba(0, 50, 26, 0.25)",
4702
+ "colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
4703
+ "colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
4704
+ "colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
4705
+ "colorWarning": "#FAAD14",
4706
+ "colorWarningHover": "rgba(170, 136, 43, 1)",
4707
+ "colorWarningBg": "rgba(129, 116, 49, 0.25)",
4708
+ "colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
4709
+ "colorWarningBorder": "rgba(255, 229, 143, 0.2)",
4710
+ "colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
4711
+ "colorError": "#FF4D4F",
4712
+ "colorErrorHover": "rgba(165, 50, 48, 1)",
4713
+ "colorErrorBg": "rgba(129, 46, 46, 0.25)",
4714
+ "colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
4715
+ "colorErrorBorder": "rgba(255, 204, 199, 0.2)",
4716
+ "colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
4717
+ "colorLink": "#5551CC",
4718
+ "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
4719
+ "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
4720
+
4721
+ "colorTextWhite": "#fff",
4722
+ "colorTextOnPrimary": "#fff",
4723
+ "colorFillDisable": "#8D8C98",
4724
+ "colorPurple": "#5551CC",
4725
+ "colorPurpleHover": "#8383F0",
4726
+ "colorPurpleBg": "rgba(226, 222, 255, 0.2)",
4727
+ "colorPink": "#EC4899",
4728
+ "colorPinkHover": "#E494BC",
4729
+ "colorPinkBg": "rgba(251, 220, 239, 0.2)",
4730
+ "colorYellow": "#EAB308",
4731
+ "colorYellowHover": "#DBBE62",
4732
+ "colorYellowBg": "rgba(255, 250, 184, 0.2)",
4733
+ "colorOrange": "#FA8125",
4734
+ "colorOrangeHover": "#F7A25F",
4735
+ "colorOrangeBg": "rgba(255, 232, 201, 0.2)",
4736
+ "colorTeal": "#14B8A6",
4737
+ "colorTealHover": "#7BC7BE",
4738
+ "colorTealBg": "rgba(200, 244, 233, 0.2)",
4739
+ "colorBlue": "#0090FF",
4740
+ "colorBlueHover": "#83BFED",
4741
+ "colorBlueBg": "rgba(194, 229, 255, 0.2)",
4742
+ "colorMauve": "#8E8C99",
4743
+ "colorMauveHover": "#BBB8CA",
4744
+ "colorMauveBg": "rgba(239, 240, 243, 0.2)",
4745
+ "colorSlate": "#2C3A50",
4746
+ "colorSlateHover": "#354252",
4747
+ "colorSlateBg": "#232B36",
4748
+ "colorLavender": "#A77BFF",
4749
+ "colorLavenderHover": "#BFA5F3",
4750
+ "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
4751
+
4752
+ "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.16),0px 12px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
4753
+ "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.16),-12px 0px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02);",
4754
+ "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
4755
+ }
4756
+
4757
+ ```
4758
+
4759
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
4760
+
4761
+ ```json
4762
+ {
4763
+ "borderRadiusXS": 2,
4764
+ "borderRadiusSM": 4,
4765
+ "borderRadius": 6,
4766
+ "borderRadiusLG": 8,
4767
+ "borderRadiusXL": 12,
4768
+ "borderRadiusFull": 999,
4769
+ "wireframe": false,
4770
+ "colorPrimaryBg": "rgba(244, 244, 247, 1)",
4771
+ "colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
4772
+ "colorPrimaryBorder": "rgba(62, 63, 66, 1)",
4773
+ "colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
4774
+ "colorPrimaryHover": "rgba(38, 38, 41, 1)",
4775
+ "colorPrimary": "rgba(26, 26, 29, 1)",
4776
+ "colorPrimaryActive": "rgba(0, 0, 0, 1)",
4777
+ "colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
4778
+ "colorPrimaryText": "rgba(26, 26, 29, 1)",
4779
+ "colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
4780
+ "colorTextBase": "rgba(26, 26, 29, 1)",
4781
+ "colorBgBase": "rgba(255, 255, 255, 1)",
4782
+ "colorText": "rgba(26, 26, 29, 0.88)",
4783
+ "colorTextSecondary": "rgba(26, 26, 29, 0.65)",
4784
+ "colorTextTertiary": "rgba(26, 26, 29, 0.45)",
4785
+ "colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
4786
+ "colorBorder": "rgba(187, 187, 193, 1)",
4787
+ "colorBorderSecondary": "rgba(234, 234, 234, 1)",
4788
+ "colorFill": "rgba(0, 0, 43, 0.06)",
4789
+ "colorFillSecondary": "rgba(0, 0, 85, 0.03)",
4790
+ "colorFillTertiary": "rgba(205, 208, 220, 0.15)",
4791
+ "colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
4792
+ "colorBgContainer": "rgba(255, 255, 255, 1)",
4793
+ "colorBgElevated": "rgba(255, 255, 255, 1)",
4794
+ "colorBgLayout": "rgba(250, 250, 251, 1)",
4795
+ "colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
4796
+ "colorBgMask": "rgba(0, 0, 0, 0.45)",
4797
+ "colorInfo": "rgba(11, 131, 241, 1)",
4798
+ "colorInfoHover": "rgba(94, 188, 255, 1)",
4799
+ "colorInfoBorder": "rgba(135, 209, 255, 1)",
4800
+ "colorInfoText": "rgba(11, 131, 241, 1)",
4801
+ "colorInfoBg": "rgba(230, 247, 255, 1)",
4802
+ "colorInfoBgHover": "rgba(176, 227, 255, 1)",
4803
+ "colorInfoBorderHover": "rgba(94, 188, 255, 1)",
4804
+ "colorSuccess": "rgba(91, 185, 139, 1)",
4805
+ "colorSuccessHover": "rgba(171, 212, 190, 1)",
4806
+ "colorSuccessBg": "rgba(235, 250, 240, 1)",
4807
+ "colorSuccessBgHover": "rgba(223, 237, 228, 1)",
4808
+ "colorSuccessBorder": "rgba(211, 224, 217, 1)",
4809
+ "colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
4810
+ "colorWarning": "rgba(250, 173, 20, 1)",
4811
+ "colorWarningHover": "rgba(255, 214, 102, 1)",
4812
+ "colorWarningBg": "rgba(255, 251, 230, 1)",
4813
+ "colorWarningBgHover": "rgba(255, 241, 184, 1)",
4814
+ "colorWarningBorder": "rgba(255, 229, 143, 1)",
4815
+ "colorWarningBorderHover": "rgba(255, 214, 102, 1)",
4816
+ "colorError": "rgba(255, 77, 79, 1)",
4817
+ "colorErrorHover": "rgba(255, 120, 117, 1)",
4818
+ "colorErrorBg": "rgba(255, 242, 240, 1)",
4819
+ "colorErrorBgHover": "rgba(255, 241, 240, 1)",
4820
+ "colorErrorBorder": "rgba(255, 204, 199, 1)",
4821
+ "colorErrorBorderHover": "rgba(255, 163, 158, 1)",
4822
+ "colorLink": "rgba(0, 77, 255, 1)",
4823
+ "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
4824
+ "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4825
+
4826
+ "colorTextWhite": "#ffffff",
4827
+ "colorTextOnPrimary": "#ffffff",
4828
+ "colorFillDisable": "rgba(232, 232, 235, 1)",
4829
+ "colorPurple": "rgba(97, 92, 237, 1)",
4830
+ "colorPurpleHover": "#8080FF",
4831
+ "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
4832
+ "colorPink": "rgba(236, 72, 153, 1)",
4833
+ "colorPinkHover": "#E593BC",
4834
+ "colorPinkBg": "rgba(251, 220, 239, 0.8)",
4835
+ "colorYellow": "rgba(234, 179, 8, 1)",
4836
+ "colorYellowHover": "#F1D372",
4837
+ "colorYellowBg": "rgba(255, 250, 184, 0.8)",
4838
+ "colorOrange": "rgba(250, 129, 37, 1)",
4839
+ "colorOrangeHover": "#E88C45",
4840
+ "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
4841
+ "colorTeal": "rgba(20, 184, 166, 1)",
4842
+ "colorTealHover": "#5FB3A9",
4843
+ "colorTealBg": "rgba(200, 244, 233, 0.8)",
4844
+ "colorBlue": "rgba(0, 144, 255, 1)",
4845
+ "colorBlueHover": "#72BCF5",
4846
+ "colorBlueBg": "rgba(194, 229, 255, 0.8)",
4847
+ "colorMauve": "rgba(142, 140, 153, 1)",
4848
+ "colorMauveHover": "#C0BFC8",
4849
+ "colorMauveBg": "rgba(239, 240, 243, 0.8)",
4850
+ "colorSlate": "#2C3A50",
4851
+ "colorSlateHover": "#354252",
4852
+ "colorSlateBg": "#232B36",
4853
+ "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4854
+ "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
4855
+ "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
4856
+ }
4857
+
4858
+ ```
4859
+
4860
+ <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
4861
+
4862
+ ```json
4863
+ {
4864
+ "borderRadiusXS": 2,
4865
+ "borderRadiusSM": 4,
4866
+ "borderRadius": 6,
4867
+ "borderRadiusLG": 8,
4868
+ "borderRadiusXL": 12,
4869
+ "borderRadiusFull": 999,
4870
+ "wireframe": false,
4871
+ "colorPrimaryBg": "#181818",
4872
+ "colorPrimaryBgHover": "#2E2E2E",
4873
+ "colorPrimaryBorder": "#323232",
4874
+ "colorPrimaryBorderHover": "#2C2C2C",
4875
+ "colorPrimaryHover": "#DFDFDF",
4876
+ "colorPrimary": "#E4E4E4",
4877
+ "colorPrimaryActive": "#7E7E7E",
4878
+ "colorPrimaryTextHover": "#909090",
4879
+ "colorPrimaryText": "#676767",
4880
+ "colorPrimaryTextActive": "#959595",
4881
+ "colorTextBase": "#E7E7ED",
4882
+ "colorBgBase": "#0A0A0B",
4883
+ "colorText": "#E7E7EDC7",
4884
+ "colorTextSecondary": "#E7E7EDA6",
4885
+ "colorTextTertiary": "#E7E7ED73",
4886
+ "colorTextQuaternary": "#E7E7ED40",
4887
+ "colorBorder": "#5B5B5BCC",
4888
+ "colorBorderSecondary": "#323232CC",
4889
+ "colorFill": "#E7E7ED2E",
4890
+ "colorFillSecondary": "#E7E7ED1F",
4891
+ "colorFillTertiary": "#E7E7ED14",
4892
+ "colorFillQuaternary": "#E7E7ED0A",
4893
+ "colorBgContainer": "#121212",
4894
+ "colorBgElevated": "#212121",
4895
+ "colorBgLayout": "#141414",
4896
+ "colorBgSpotlight": "#525252D9",
4897
+ "colorBgMask": "#050508CC",
4898
+ "colorInfo": "#0B83F1",
4899
+ "colorInfoHover": "#5EBCFF",
4900
+ "colorInfoBorder": "#3990C9",
4901
+ "colorInfoText": "#0B83F1",
4902
+ "colorInfoBg": "#112233",
4903
+ "colorInfoBgHover": "#264866",
4904
+ "colorInfoBorderHover": "#5EBCFF",
4905
+ "colorSuccess": "#5BB98B",
4906
+ "colorSuccessHover": "#74A47C",
4907
+ "colorSuccessBg": "#293631",
4908
+ "colorSuccessBgHover": "#3F5147",
4909
+ "colorSuccessBorder": "#73A377",
4910
+ "colorSuccessBorderHover": "#ABD4BE",
4911
+ "colorWarning": "#FAAD14",
4912
+ "colorWarningHover": "#FF8C28",
4913
+ "colorWarningBg": "#2D231A",
4914
+ "colorWarningBgHover": "#4D3B23",
4915
+ "colorWarningBorder": "#FFA628",
4916
+ "colorWarningBorderHover": "#FFD666",
4917
+ "colorError": "#FF4D4F",
4918
+ "colorErrorHover": "#EE654E",
4919
+ "colorErrorBg": "#2B0B08",
4920
+ "colorErrorBgHover": "#4A2A28",
4921
+ "colorErrorBorder": "#EE5B4E",
4922
+ "colorErrorBorderHover": "#FFA39E",
4923
+ "colorLink": "#4D7DFF",
4924
+ "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
4925
+ "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
4926
+
4927
+ "colorTextWhite": "#ffffff",
4928
+ "colorTextBlack": "#000000",
4929
+ "colorTextOnPrimary": "#ffffff",
4930
+ "colorFillDisable": "#898989",
4931
+ "colorPurple": "#615CED",
4932
+ "colorPurpleHover": "#8383F0",
4933
+ "colorPurpleBg": "#6964877A",
4934
+ "colorPink": "#EC4899",
4935
+ "colorPinkHover": "#E494BC",
4936
+ "colorPinkBg": "#53424D7A",
4937
+ "colorYellow": "#EAB308",
4938
+ "colorYellowHover": "#DBBE62",
4939
+ "colorYellowBg": "#9585527A",
4940
+ "colorOrange": "#FA8125",
4941
+ "colorOrangeHover": "#F7A25F",
4942
+ "colorOrangeBg": "#6F58417A",
4943
+ "colorTeal": "#14B8A6",
4944
+ "colorTealHover": "#7BC7BE",
4945
+ "colorTealBg": "#4658547A",
4946
+ "colorBlue": "#0090FF",
4947
+ "colorBlueHover": "#83BFED",
4948
+ "colorBlueBg": "#5E76897A",
4949
+ "colorMauve": "#8E8C99",
4950
+ "colorMauveHover": "#BBB8CA",
4951
+ "colorMauveBg": "#5859647A",
4952
+ "colorSlate": "#2C3A50",
4953
+ "colorSlateHover": "#354252",
4954
+ "colorSlateBg": "#232B36",
4955
+ "colorLavender": "#A77BFF",
4956
+ "colorLavenderHover": "#BFA5F3",
4957
+ "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
4958
+
4959
+ "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
4960
+ "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
4961
+ "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
4962
+
4963
+ }
4964
+ ```
4965
+
4966
+ # CSS 变量
4967
+
4968
+ Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
4969
+
4970
+
4971
+ ```less
4972
+ .example {
4973
+ background: var(--sps-color-bg-base);
4974
+ color: var(--sps-color-pink);
4975
+ }
4976
+ // 提示：您可以将 'sps' 替换为您自己的前缀
4977
+ ```
4978
+
4979
+
4980
+
4981
+
4088
4982
  ### 1.0.21
4089
4983
  `2025-12-25`
4090
4984