@agentscope-ai/design 1.0.18 → 1.0.19-beta.1765957449539

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 (14) hide show
  1. package/lib/components/commonComponents/CodeBlock/index.js +21 -12
  2. package/llms/all.llms.txt +1736 -831
  3. package/llms/components/commonComponents/Audio/index.zh-CN.llms.txt +7 -0
  4. package/llms/components/commonComponents/Video/index.zh-CN.llms.txt +5 -1
  5. package/llms/docs/guide/fromAntd.zh-CN.llms.txt +156 -0
  6. package/llms/docs/guide/fromScratch.zh-CN.llms.txt +83 -0
  7. package/llms/docs/guide/iconfont.zh-CN.llms.txt +69 -0
  8. package/llms/docs/guide/overview.zh-CN.llms.txt +51 -0
  9. package/llms/docs/guide/theme.zh-CN.llms.txt +61 -0
  10. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +433 -0
  11. package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +29 -0
  12. package/llms/index.llms.txt +56 -47
  13. package/package.json +4 -3
  14. package/scripts/mcp-docs-server.js +2 -2
package/llms/all.llms.txt CHANGED
@@ -1,52 +1,5 @@
1
1
 
2
2
 
3
- <DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
4
- #### API
5
-
6
- | 属性名 | 描述 | 类型 | 默认值 |
7
- |--------|--------|--------|--------|
8
- | mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
9
- | maxHeight | 最大高度 | number \| string | '90vh' |
10
-
11
-
12
- <AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
13
-
14
-
15
- ## antd API
16
-
17
- 通用属性参考：[通用属性](/docs/react/common-props)
18
-
19
- | 参数 | 说明 | 类型 | 默认值 |
20
- |--------|--------|--------|--------|
21
- | title | 提示文字 | ReactNode \| () => ReactNode | - |
22
-
23
-
24
- ### 共同的 API
25
-
26
- 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
27
-
28
- <!-- prettier-ignore -->
29
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
30
- |--------|--------|--------|--------|--------|
31
- | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
32
- | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
33
- | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
34
- | color | 背景颜色 | string | - | 4.3.0 |
35
- | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
36
- | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
37
- | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
38
- | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
39
- | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
40
- | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
41
- | placement | 气泡框位置，可选 | string | top | |
42
- | trigger | 触发行为，可选 | string \| string[] | hover | |
43
- | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
44
- | zIndex | 设置 Tooltip 的 | number | - | |
45
- | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
46
-
47
-
48
-
49
-
50
3
  <DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
51
4
  #### API
52
5
 
@@ -143,6 +96,53 @@
143
96
 
144
97
 
145
98
 
99
+ <DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
100
+ #### API
101
+
102
+ | 属性名 | 描述 | 类型 | 默认值 |
103
+ |--------|--------|--------|--------|
104
+ | mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
105
+ | maxHeight | 最大高度 | number \| string | '90vh' |
106
+
107
+
108
+ <AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
109
+
110
+
111
+ ## antd API
112
+
113
+ 通用属性参考：[通用属性](/docs/react/common-props)
114
+
115
+ | 参数 | 说明 | 类型 | 默认值 |
116
+ |--------|--------|--------|--------|
117
+ | title | 提示文字 | ReactNode \| () => ReactNode | - |
118
+
119
+
120
+ ### 共同的 API
121
+
122
+ 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
123
+
124
+ <!-- prettier-ignore -->
125
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
126
+ |--------|--------|--------|--------|--------|
127
+ | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
128
+ | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
129
+ | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
130
+ | color | 背景颜色 | string | - | 4.3.0 |
131
+ | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
132
+ | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
133
+ | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
134
+ | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
135
+ | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
136
+ | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
137
+ | placement | 气泡框位置，可选 | string | top | |
138
+ | trigger | 触发行为，可选 | string \| string[] | hover | |
139
+ | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
140
+ | zIndex | 设置 Tooltip 的 | number | - | |
141
+ | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
142
+
143
+
144
+
145
+
146
146
  <DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
147
147
  #### API
148
148
 
@@ -256,6 +256,54 @@ type RangeDisabledTime = (
256
256
 
257
257
 
258
258
 
259
+ <DemoTitle title="Tag" desc="进行标记和分类的小标签">
260
+ #### API
261
+
262
+ | 属性名 | 描述 | 类型 | 默认值 |
263
+ |--------|--------|--------|--------|
264
+ | size | 尺寸 | 'small' \| 'middle' | 'middle' |
265
+ | color | 标签色 | SparkTagColors \| string | 'purple' |
266
+
267
+ <AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
268
+
269
+
270
+ ## antd API
271
+
272
+ 通用属性参考：[通用属性](/docs/react/common-props)
273
+
274
+ ### Tag
275
+
276
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
277
+ |--------|--------|--------|--------|--------|
278
+ | closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
279
+ | icon | 设置图标 | ReactNode | - | |
280
+ | bordered | 是否有边框 | boolean | true | 5.4.0 |
281
+ | onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
282
+
283
+
284
+ ### Tag.CheckableTag
285
+
286
+ | 参数 | 说明 | 类型 | 默认值 |
287
+ |--------|--------|--------|--------|
288
+ | checked | 设置标签的选中状态 | boolean | false |
289
+ | onChange | 点击标签时触发的回调 | (checked) => void | - |
290
+
291
+
292
+
293
+
294
+ <DemoTitle title="Video" desc="视频展示">
295
+ #### API
296
+
297
+ | 属性名 | 描述 | 类型 | 默认值 |
298
+ |--------|--------|--------|--------|
299
+ | mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
300
+ | children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
301
+
302
+
303
+
304
+
305
+
306
+
259
307
  <DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
260
308
  #### API
261
309
 
@@ -326,41 +374,6 @@ type RangeDisabledTime = (
326
374
 
327
375
 
328
376
 
329
- <DemoTitle title="Tag" desc="进行标记和分类的小标签">
330
- #### API
331
-
332
- | 属性名 | 描述 | 类型 | 默认值 |
333
- |--------|--------|--------|--------|
334
- | size | 尺寸 | 'small' \| 'middle' | 'middle' |
335
- | color | 标签色 | SparkTagColors \| string | 'purple' |
336
-
337
- <AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
338
-
339
-
340
- ## antd API
341
-
342
- 通用属性参考：[通用属性](/docs/react/common-props)
343
-
344
- ### Tag
345
-
346
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
347
- |--------|--------|--------|--------|--------|
348
- | closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
349
- | icon | 设置图标 | ReactNode | - | |
350
- | bordered | 是否有边框 | boolean | true | 5.4.0 |
351
- | onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
352
-
353
-
354
- ### Tag.CheckableTag
355
-
356
- | 参数 | 说明 | 类型 | 默认值 |
357
- |--------|--------|--------|--------|
358
- | checked | 设置标签的选中状态 | boolean | false |
359
- | onChange | 点击标签时触发的回调 | (checked) => void | - |
360
-
361
-
362
-
363
-
364
377
  <DemoTitle title="Table" desc="展示行列数据。">
365
378
  #### API
366
379
 
@@ -616,15 +629,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
616
629
 
617
630
 
618
631
 
619
- <DemoTitle title="Video" desc="视频展示">
620
- #### API
621
-
622
- <AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
623
-
624
-
625
-
626
-
627
-
628
632
  <DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
629
633
  #### API
630
634
 
@@ -666,66 +670,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
666
670
 
667
671
 
668
672
 
669
- <DemoTitle title="Statistic" desc="展示统计数值">
670
- #### API
671
-
672
- <AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
673
-
674
-
675
- ## antd API
676
-
677
- 通用属性参考：[通用属性](/docs/react/common-props)
678
-
679
- #### Statistic
680
-
681
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
682
- |--------|--------|--------|--------|--------|
683
- | decimalSeparator | 设置小数点 | string | . | |
684
- | formatter | 自定义数值展示 | (value) => ReactNode | - | |
685
- | groupSeparator | 设置千分位标识符 | string | , | |
686
- | loading | 数值是否加载中 | boolean | false | 4.8.0 |
687
- | precision | 数值精度 | number | - | |
688
- | prefix | 设置数值的前缀 | ReactNode | - | |
689
- | suffix | 设置数值的后缀 | ReactNode | - | |
690
- | title | 数值的标题 | ReactNode | - | |
691
- | value | 数值内容 | string \| number | - | |
692
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
693
-
694
-
695
- #### Statistic.Countdown <Badge type="error">Deprecated</Badge>
696
-
697
- <!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
698
-
699
- <!-- prettier-ignore -->
700
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
701
- |--------|--------|--------|--------|--------|
702
- | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
703
- | prefix | 设置数值的前缀 | ReactNode | - | |
704
- | suffix | 设置数值的后缀 | ReactNode | - | |
705
- | title | 数值的标题 | ReactNode | - | |
706
- | value | 数值内容 | number | - | |
707
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
708
- | onFinish | 倒计时完成时触发 | () => void | - | |
709
- | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
710
-
711
-
712
- #### Statistic.Timer <Badge>5.25.0+</Badge>
713
-
714
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
715
- |--------|--------|--------|--------|--------|
716
- | type | 计时类型，正计时或者倒计时 | countdown | - | |
717
- | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
718
- | prefix | 设置数值的前缀 | ReactNode | - | |
719
- | suffix | 设置数值的后缀 | ReactNode | - | |
720
- | title | 数值的标题 | ReactNode | - | |
721
- | value | 数值内容 | number | - | |
722
- | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
723
- | onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
724
- | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
725
-
726
-
727
-
728
-
729
673
  <DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
730
674
  #### API
731
675
 
@@ -785,63 +729,62 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
785
729
 
786
730
 
787
731
 
788
- <DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
732
+ <DemoTitle title="Statistic" desc="展示统计数值">
733
+ #### API
734
+
735
+ <AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
736
+
737
+
789
738
  ## antd API
790
739
 
791
740
  通用属性参考：[通用属性](/docs/react/common-props)
792
741
 
793
- ### Skeleton
742
+ #### Statistic
794
743
 
795
- | 属性 | 说明 | 类型 | 默认值 |
796
- |--------|--------|--------|--------|
797
- | active | 是否展示动画效果 | boolean | false |
798
- | avatar | 是否显示头像占位图 | boolean \| | false |
799
- | loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
800
- | paragraph | 是否显示段落占位图 | boolean \| | true |
801
- | round | 为 true 时，段落和标题显示圆角 | boolean | false |
802
- | title | 是否显示标题占位图 | boolean \| | true |
803
-
804
-
805
- ### SkeletonAvatarProps
806
-
807
- | 属性 | 说明 | 类型 | 默认值 |
808
- |--------|--------|--------|--------|
809
- | active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
810
- | shape | 指定头像的形状 | circle | - |
811
- | size | 设置头像占位图的大小 | number \| | - |
812
-
813
-
814
- ### SkeletonTitleProps
815
-
816
- | 属性 | 说明 | 类型 | 默认值 |
817
- |--------|--------|--------|--------|
818
- | width | 设置标题占位图的宽度 | number \| string | - |
819
-
820
-
821
- ### SkeletonParagraphProps
744
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
745
+ |--------|--------|--------|--------|--------|
746
+ | decimalSeparator | 设置小数点 | string | . | |
747
+ | formatter | 自定义数值展示 | (value) => ReactNode | - | |
748
+ | groupSeparator | 设置千分位标识符 | string | , | |
749
+ | loading | 数值是否加载中 | boolean | false | 4.8.0 |
750
+ | precision | 数值精度 | number | - | |
751
+ | prefix | 设置数值的前缀 | ReactNode | - | |
752
+ | suffix | 设置数值的后缀 | ReactNode | - | |
753
+ | title | 数值的标题 | ReactNode | - | |
754
+ | value | 数值内容 | string \| number | - | |
755
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
822
756
 
823
- | 属性 | 说明 | 类型 | 默认值 |
824
- |--------|--------|--------|--------|
825
- | rows | 设置段落占位图的行数 | number | - |
826
- | width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
827
757
 
758
+ #### Statistic.Countdown <Badge type="error">Deprecated</Badge>
828
759
 
829
- ### SkeletonButtonProps
760
+ <!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
830
761
 
831
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
762
+ <!-- prettier-ignore -->
763
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
832
764
  |--------|--------|--------|--------|--------|
833
- | active | 是否展示动画效果 | boolean | false | |
834
- | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
835
- | shape | 指定按钮的形状 | circle | - | |
836
- | size | 设置按钮的大小 | large | - | |
765
+ | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
766
+ | prefix | 设置数值的前缀 | ReactNode | - | |
767
+ | suffix | 设置数值的后缀 | ReactNode | - | |
768
+ | title | 数值的标题 | ReactNode | - | |
769
+ | value | 数值内容 | number | - | |
770
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
771
+ | onFinish | 倒计时完成时触发 | () => void | - | |
772
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
837
773
 
838
774
 
839
- ### SkeletonInputProps
775
+ #### Statistic.Timer <Badge>5.25.0+</Badge>
840
776
 
841
- | 属性 | 说明 | 类型 | 默认值 |
842
- |--------|--------|--------|--------|
843
- | active | 是否展示动画效果 | boolean | false |
844
- | size | 设置输入框的大小 | large | - |
777
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
778
+ |--------|--------|--------|--------|--------|
779
+ | type | 计时类型，正计时或者倒计时 | countdown | - | |
780
+ | format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
781
+ | prefix | 设置数值的前缀 | ReactNode | - | |
782
+ | suffix | 设置数值的后缀 | ReactNode | - | |
783
+ | title | 数值的标题 | ReactNode | - | |
784
+ | value | 数值内容 | number | - | |
785
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
786
+ | onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
787
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
845
788
 
846
789
 
847
790
 
@@ -927,6 +870,67 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
927
870
 
928
871
 
929
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
+
930
934
  <DemoTitle title="Select" desc="下拉选择器">
931
935
  ## antd API
932
936
 
@@ -1197,50 +1201,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1197
1201
 
1198
1202
 
1199
1203
 
1200
- <DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
1201
- #### API
1202
-
1203
- <AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
1204
-
1205
-
1206
- ## antd API
1207
-
1208
- 通用属性参考：[通用属性](/docs/react/common-props)
1209
-
1210
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1211
- |--------|--------|--------|--------|--------|
1212
- | content | 卡片内容 | ReactNode \| () => ReactNode | - | |
1213
- | title | 卡片标题 | ReactNode \| () => ReactNode | - | |
1214
-
1215
-
1216
- <!-- 共同的 API -->
1217
- 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1218
-
1219
- <!-- prettier-ignore -->
1220
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1221
- |--------|--------|--------|--------|--------|
1222
- | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1223
- | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1224
- | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1225
- | color | 背景颜色 | string | - | 4.3.0 |
1226
- | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1227
- | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1228
- | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1229
- | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1230
- | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1231
- | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1232
- | placement | 气泡框位置，可选 | string | top | |
1233
- | trigger | 触发行为，可选 | string \| string[] | hover | |
1234
- | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1235
- | zIndex | 设置 Tooltip 的 | number | - | |
1236
- | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1237
-
1238
- ## 注意
1239
-
1240
- 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
1241
-
1242
-
1243
-
1244
1204
  <DemoTitle title="Progress" desc="用于指示任务的完成进度">
1245
1205
  ## antd API
1246
1206
 
@@ -1293,68 +1253,169 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
1293
1253
 
1294
1254
 
1295
1255
 
1296
- <DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
1297
- ## API
1256
+ <DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
1257
+ #### API
1298
1258
 
1299
1259
  | 属性名 | 描述 | 类型 | 默认值 |
1300
1260
  |--------|--------|--------|--------|
1301
- | hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
1261
+ | type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
1302
1262
 
1303
1263
 
1304
- <AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
1264
+ <AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
1305
1265
 
1306
1266
 
1307
1267
  ## antd API
1308
1268
 
1309
1269
  通用属性参考：[通用属性](/docs/react/common-props)
1310
1270
 
1271
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1272
+ |--------|--------|--------|--------|--------|
1273
+ | cancelButtonProps | cancel 按钮 props | | - | |
1274
+ | cancelText | 取消按钮文字 | string | 取消 | |
1275
+ | disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
1276
+ | icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
1277
+ | okButtonProps | ok 按钮 props | | - | |
1278
+ | okText | 确认按钮文字 | string | 确定 | |
1279
+ | okType | 确认按钮类型 | string | primary | |
1280
+ | showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
1281
+ | title | 确认框标题 | ReactNode \| () => ReactNode | - | |
1282
+ | description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
1283
+ | onCancel | 点击取消的回调 | function(e) | - | |
1284
+ | onConfirm | 点击确认的回调 | function(e) | - | |
1285
+ | onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
1311
1286
 
1312
- ```jsx
1313
- <Pagination onChange={onChange} total={50} />
1314
- ```
1315
1287
 
1288
+ <!-- 共同的 API -->
1289
+ 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1316
1290
 
1291
+ <!-- prettier-ignore -->
1317
1292
  | 参数 | 说明 | 类型 | 默认值 | 版本 |
1318
1293
  |--------|--------|--------|--------|--------|
1319
- | align | 对齐方式 | start \| center \| end | - | 5.19.0 |
1320
- | current | 当前页数 | number | - | |
1321
- | defaultCurrent | 默认的当前页数 | number | 1 | |
1322
- | defaultPageSize | 默认的每页条数 | number | 10 | |
1323
- | disabled | 禁用分页 | boolean | - | |
1324
- | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
1325
- | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
1326
- | pageSize | 每页条数 | number | - | |
1327
- | pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
1328
- | responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
1329
- | showLessItems | 是否显示较少页面内容 | boolean | false | |
1330
- | showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
1331
- | showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
1332
- | showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
1333
- | showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
1334
- | simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
1335
- | size | 当为 | default | default | |
1336
- | total | 数据总数 | number | 0 | |
1337
- | onChange | 页码或 | function(page, pageSize) | - | |
1338
- | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
1294
+ | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1295
+ | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1296
+ | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1297
+ | color | 背景颜色 | string | - | 4.3.0 |
1298
+ | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1299
+ | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1300
+ | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1301
+ | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1302
+ | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1303
+ | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1304
+ | placement | 气泡框位置，可选 | string | top | |
1305
+ | trigger | 触发行为，可选 | string \| string[] | hover | |
1306
+ | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1307
+ | zIndex | 设置 Tooltip 的 | number | - | |
1308
+ | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1339
1309
 
1340
1310
 
1341
1311
 
1342
1312
 
1343
- <DemoTitle title="Notification" desc="用于指示任务的完成进度">
1313
+ <DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
1344
1314
  #### API
1345
1315
 
1346
- <AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
1316
+ <AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
1347
1317
 
1348
1318
 
1349
1319
  ## antd API
1350
1320
 
1351
1321
  通用属性参考：[通用属性](/docs/react/common-props)
1352
1322
 
1323
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1324
+ |--------|--------|--------|--------|--------|
1325
+ | content | 卡片内容 | ReactNode \| () => ReactNode | - | |
1326
+ | title | 卡片标题 | ReactNode \| () => ReactNode | - | |
1353
1327
 
1354
- - `notification.success(config)`
1355
- - `notification.error(config)`
1356
- - `notification.info(config)`
1357
- - `notification.warning(config)`
1328
+
1329
+ <!-- 共同的 API -->
1330
+ 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1331
+
1332
+ <!-- prettier-ignore -->
1333
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1334
+ |--------|--------|--------|--------|--------|
1335
+ | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1336
+ | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1337
+ | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1338
+ | color | 背景颜色 | string | - | 4.3.0 |
1339
+ | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1340
+ | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1341
+ | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1342
+ | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1343
+ | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1344
+ | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1345
+ | placement | 气泡框位置，可选 | string | top | |
1346
+ | trigger | 触发行为，可选 | string \| string[] | hover | |
1347
+ | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1348
+ | zIndex | 设置 Tooltip 的 | number | - | |
1349
+ | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1350
+
1351
+ ## 注意
1352
+
1353
+ 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
1354
+
1355
+
1356
+
1357
+ <DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
1358
+ ## API
1359
+
1360
+ | 属性名 | 描述 | 类型 | 默认值 |
1361
+ |--------|--------|--------|--------|
1362
+ | hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
1363
+
1364
+
1365
+ <AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
1366
+
1367
+
1368
+ ## antd API
1369
+
1370
+ 通用属性参考：[通用属性](/docs/react/common-props)
1371
+
1372
+
1373
+ ```jsx
1374
+ <Pagination onChange={onChange} total={50} />
1375
+ ```
1376
+
1377
+
1378
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1379
+ |--------|--------|--------|--------|--------|
1380
+ | align | 对齐方式 | start \| center \| end | - | 5.19.0 |
1381
+ | current | 当前页数 | number | - | |
1382
+ | defaultCurrent | 默认的当前页数 | number | 1 | |
1383
+ | defaultPageSize | 默认的每页条数 | number | 10 | |
1384
+ | disabled | 禁用分页 | boolean | - | |
1385
+ | hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
1386
+ | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
1387
+ | pageSize | 每页条数 | number | - | |
1388
+ | pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
1389
+ | responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
1390
+ | showLessItems | 是否显示较少页面内容 | boolean | false | |
1391
+ | showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
1392
+ | showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
1393
+ | showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
1394
+ | showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
1395
+ | simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
1396
+ | size | 当为 | default | default | |
1397
+ | total | 数据总数 | number | 0 | |
1398
+ | onChange | 页码或 | function(page, pageSize) | - | |
1399
+ | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
1400
+
1401
+
1402
+
1403
+
1404
+ <DemoTitle title="Notification" desc="用于指示任务的完成进度">
1405
+ #### API
1406
+
1407
+ <AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
1408
+
1409
+
1410
+ ## antd API
1411
+
1412
+ 通用属性参考：[通用属性](/docs/react/common-props)
1413
+
1414
+
1415
+ - `notification.success(config)`
1416
+ - `notification.error(config)`
1417
+ - `notification.info(config)`
1418
+ - `notification.warning(config)`
1358
1419
  - `notification.open(config)`
1359
1420
  - `notification.destroy(key?: String)`
1360
1421
 
@@ -1436,63 +1497,6 @@ notification.config({
1436
1497
 
1437
1498
 
1438
1499
 
1439
- <DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
1440
- #### API
1441
-
1442
- | 属性名 | 描述 | 类型 | 默认值 |
1443
- |--------|--------|--------|--------|
1444
- | type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
1445
-
1446
-
1447
- <AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
1448
-
1449
-
1450
- ## antd API
1451
-
1452
- 通用属性参考：[通用属性](/docs/react/common-props)
1453
-
1454
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1455
- |--------|--------|--------|--------|--------|
1456
- | cancelButtonProps | cancel 按钮 props | | - | |
1457
- | cancelText | 取消按钮文字 | string | 取消 | |
1458
- | disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
1459
- | icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
1460
- | okButtonProps | ok 按钮 props | | - | |
1461
- | okText | 确认按钮文字 | string | 确定 | |
1462
- | okType | 确认按钮类型 | string | primary | |
1463
- | showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
1464
- | title | 确认框标题 | ReactNode \| () => ReactNode | - | |
1465
- | description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
1466
- | onCancel | 点击取消的回调 | function(e) | - | |
1467
- | onConfirm | 点击确认的回调 | function(e) | - | |
1468
- | onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
1469
-
1470
-
1471
- <!-- 共同的 API -->
1472
- 以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
1473
-
1474
- <!-- prettier-ignore -->
1475
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1476
- |--------|--------|--------|--------|--------|
1477
- | align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
1478
- | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
1479
- | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
1480
- | color | 背景颜色 | string | - | 4.3.0 |
1481
- | defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
1482
- | destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
1483
- | fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
1484
- | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
1485
- | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
1486
- | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
1487
- | placement | 气泡框位置，可选 | string | top | |
1488
- | trigger | 触发行为，可选 | string \| string[] | hover | |
1489
- | open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
1490
- | zIndex | 设置 Tooltip 的 | number | - | |
1491
- | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
1492
-
1493
-
1494
-
1495
-
1496
1500
  <DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
1497
1501
  #### API
1498
1502
 
@@ -1663,59 +1667,6 @@ const confirmed = await modal.confirm({ ... });
1663
1667
 
1664
1668
 
1665
1669
 
1666
- <DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
1667
- #### API
1668
-
1669
- <AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
1670
-
1671
-
1672
- ## antd API
1673
-
1674
- 通用属性参考：[通用属性](/docs/react/common-props)
1675
-
1676
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
1677
- |--------|--------|--------|--------|--------|
1678
- | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
1679
- | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
1680
- | autoFocus | 自动获取焦点 | boolean | false | - |
1681
- | changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
1682
- | changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
1683
- | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
1684
- | decimalSeparator | 小数点 | string | - | - |
1685
- | placeholder | 占位符 | string | - | |
1686
- | defaultValue | 初始值 | number | - | - |
1687
- | disabled | 禁用 | boolean | false | - |
1688
- | formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
1689
- | keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
1690
- | max | 最大值 | number | | - |
1691
- | min | 最小值 | number | | - |
1692
- | parser | 指定从 | function(string): number | - | - |
1693
- | precision | 数值精度，配置 | number | - | - |
1694
- | readOnly | 只读 | boolean | false | - |
1695
- | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
1696
- | prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
1697
- | suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
1698
- | size | 输入框大小 | large | - | - |
1699
- | step | 每次改变步数，可以为小数 | number \| string | 1 | - |
1700
- | stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
1701
- | value | 当前值 | number | - | - |
1702
- | variant | 形态变体 | outlined | outlined | 5.13.0 \| |
1703
- | onChange | 变化回调 | function(value: number \| string \| null) | - | - |
1704
- | onPressEnter | 按下回车的回调 | function(e) | - | - |
1705
- | onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
1706
-
1707
-
1708
- ## Ref
1709
-
1710
- | 名称 | 说明 | 参数 | 版本 |
1711
- |--------|--------|--------|--------|
1712
- | blur() | 移除焦点 | - | |
1713
- | focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
1714
- | nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
1715
-
1716
-
1717
-
1718
-
1719
1670
  <DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
1720
1671
  #### API
1721
1672
 
@@ -1816,6 +1767,59 @@ message.config({
1816
1767
 
1817
1768
 
1818
1769
 
1770
+ <DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
1771
+ #### API
1772
+
1773
+ <AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
1774
+
1775
+
1776
+ ## antd API
1777
+
1778
+ 通用属性参考：[通用属性](/docs/react/common-props)
1779
+
1780
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1781
+ |--------|--------|--------|--------|--------|
1782
+ | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
1783
+ | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
1784
+ | autoFocus | 自动获取焦点 | boolean | false | - |
1785
+ | changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
1786
+ | changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
1787
+ | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
1788
+ | decimalSeparator | 小数点 | string | - | - |
1789
+ | placeholder | 占位符 | string | - | |
1790
+ | defaultValue | 初始值 | number | - | - |
1791
+ | disabled | 禁用 | boolean | false | - |
1792
+ | formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
1793
+ | keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
1794
+ | max | 最大值 | number | | - |
1795
+ | min | 最小值 | number | | - |
1796
+ | parser | 指定从 | function(string): number | - | - |
1797
+ | precision | 数值精度，配置 | number | - | - |
1798
+ | readOnly | 只读 | boolean | false | - |
1799
+ | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
1800
+ | prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
1801
+ | suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
1802
+ | size | 输入框大小 | large | - | - |
1803
+ | step | 每次改变步数，可以为小数 | number \| string | 1 | - |
1804
+ | stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
1805
+ | value | 当前值 | number | - | - |
1806
+ | variant | 形态变体 | outlined | outlined | 5.13.0 \| |
1807
+ | onChange | 变化回调 | function(value: number \| string \| null) | - | - |
1808
+ | onPressEnter | 按下回车的回调 | function(e) | - | - |
1809
+ | onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
1810
+
1811
+
1812
+ ## Ref
1813
+
1814
+ | 名称 | 说明 | 参数 | 版本 |
1815
+ |--------|--------|--------|--------|
1816
+ | blur() | 移除焦点 | - | |
1817
+ | focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
1818
+ | nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
1819
+
1820
+
1821
+
1822
+
1819
1823
  <DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
1820
1824
  #### API
1821
1825
 
@@ -1951,7 +1955,174 @@ interface CountConfig {
1951
1955
 
1952
1956
 
1953
1957
 
1954
- <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
1958
+ <DemoTitle title="Image" desc="可预览的图片">
1959
+ #### API
1960
+
1961
+ <AntdApiRef url="https://ant.design/components/image-cn/#api"></AntdApiRef>
1962
+
1963
+
1964
+ ## antd API
1965
+
1966
+ 通用属性参考：[通用属性](/docs/react/common-props)
1967
+
1968
+ ### Image
1969
+
1970
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1971
+ |--------|--------|--------|--------|--------|
1972
+ | alt | 图像描述 | string | - | 4.6.0 |
1973
+ | fallback | 加载失败容错地址 | string | - | 4.6.0 |
1974
+ | height | 图像高度 | string \| number | - | 4.6.0 |
1975
+ | placeholder | 加载占位，为 | ReactNode | - | 4.6.0 |
1976
+ | preview | 预览参数，为 | boolean \| | true | 4.6.0 |
1977
+ | src | 图片地址 | string | - | 4.6.0 |
1978
+ | width | 图像宽度 | string \| number | - | 4.6.0 |
1979
+ | onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
1980
+
1981
+
1982
+ 其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
1983
+
1984
+ ### PreviewType
1985
+
1986
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
1987
+ |--------|--------|--------|--------|--------|
1988
+ | visible | 是否显示 | boolean | - | - |
1989
+ | src | 自定义预览 src | string | - | 4.10.0 |
1990
+ | getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
1991
+ | movable | 是否可移动 | boolean | true | 5.8.0 |
1992
+ | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
1993
+ | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
1994
+ | rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
1995
+ | scaleStep | 1 + scaleStep | number | 0.5 | - |
1996
+ | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
1997
+ | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
1998
+ | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
1999
+ | forceRender | 强制渲染预览图 | boolean | - | - |
2000
+ | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
2001
+ | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
2002
+ | destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
2003
+ | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
2004
+ | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
2005
+
2006
+
2007
+ ## PreviewGroup
2008
+
2009
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
2010
+ |--------|--------|--------|--------|--------|
2011
+ | preview | 预览参数，为 | boolean \| | true | 4.6.0 |
2012
+ | items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
2013
+ | fallback | 加载失败容错地址 | string | - | 5.7.0 |
2014
+
2015
+
2016
+ ### PreviewGroupType
2017
+
2018
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
2019
+ |--------|--------|--------|--------|--------|
2020
+ | visible | 是否显示 | boolean | - | - |
2021
+ | getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
2022
+ | movable | 是否可移动 | boolean | true | 5.8.0 |
2023
+ | current | 当前预览图的 index | number | - | 4.12.0 |
2024
+ | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
2025
+ | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
2026
+ | scaleStep | 1 + scaleStep | number | 0.5 | - |
2027
+ | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
2028
+ | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
2029
+ | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
2030
+ | forceRender | 强制渲染预览图 | boolean | - | - |
2031
+ | countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
2032
+ | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
2033
+ | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
2034
+ | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
2035
+ | onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
2036
+ | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
2037
+
2038
+
2039
+ ## Interface
2040
+
2041
+ ### TransformType
2042
+
2043
+
2044
+ ```typescript
2045
+ {
2046
+ x: number;
2047
+ y: number;
2048
+ rotate: number;
2049
+ scale: number;
2050
+ flipX: boolean;
2051
+ flipY: boolean;
2052
+ }
2053
+ ```
2054
+
2055
+
2056
+ ### TransformAction
2057
+
2058
+
2059
+ ```typescript
2060
+ type TransformAction =
2061
+ | 'flipY'
2062
+ | 'flipX'
2063
+ | 'rotateLeft'
2064
+ | 'rotateRight'
2065
+ | 'zoomIn'
2066
+ | 'zoomOut'
2067
+ | 'close'
2068
+ | 'prev'
2069
+ | 'next'
2070
+ | 'wheel'
2071
+ | 'doubleClick'
2072
+ | 'move'
2073
+ | 'dragRebound'
2074
+ | 'reset';
2075
+ ```
2076
+
2077
+
2078
+ ### ToolbarRenderInfoType
2079
+
2080
+
2081
+ ```typescript
2082
+ {
2083
+ icons: {
2084
+ flipYIcon: React.ReactNode;
2085
+ flipXIcon: React.ReactNode;
2086
+ rotateLeftIcon: React.ReactNode;
2087
+ rotateRightIcon: React.ReactNode;
2088
+ zoomOutIcon: React.ReactNode;
2089
+ zoomInIcon: React.ReactNode;
2090
+ };
2091
+ actions: {
2092
+ onActive?: (index: number) => void; // 5.21.0 之后支持
2093
+ onFlipY: () => void;
2094
+ onFlipX: () => void;
2095
+ onRotateLeft: () => void;
2096
+ onRotateRight: () => void;
2097
+ onZoomOut: () => void;
2098
+ onZoomIn: () => void;
2099
+ onReset: () => void; // 5.17.3 之后支持
2100
+ onClose: () => void;
2101
+ };
2102
+ transform: TransformType,
2103
+ current: number;
2104
+ total: number;
2105
+ image: ImgInfo
2106
+ }
2107
+ ```
2108
+
2109
+
2110
+ ### ImgInfo
2111
+
2112
+
2113
+ ```typescript
2114
+ {
2115
+ url: string;
2116
+ alt: string;
2117
+ width: string | number;
2118
+ height: string | number;
2119
+ }
2120
+ ```
2121
+
2122
+
2123
+
2124
+
2125
+ <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
1955
2126
  #### API
1956
2127
 
1957
2128
  | 属性名 | 描述 | 类型 | 默认值 |
@@ -2610,206 +2781,82 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
2610
2781
 
2611
2782
 
2612
2783
 
2613
- <DemoTitle title="Image" desc="可预览的图片">
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
+
2827
+ <DemoTitle title="Dropdown" desc="向下弹出的列表。">
2614
2828
  #### API
2615
2829
 
2616
- <AntdApiRef url="https://ant.design/components/image-cn/#api"></AntdApiRef>
2830
+ <AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
2617
2831
 
2618
2832
 
2619
2833
  ## antd API
2620
2834
 
2621
2835
  通用属性参考：[通用属性](/docs/react/common-props)
2622
2836
 
2623
- ### Image
2837
+ ### Dropdown
2624
2838
 
2625
2839
  | 参数 | 说明 | 类型 | 默认值 | 版本 |
2626
2840
  |--------|--------|--------|--------|--------|
2627
- | alt | 图像描述 | string | - | 4.6.0 |
2628
- | fallback | 加载失败容错地址 | string | - | 4.6.0 |
2629
- | height | 图像高度 | string \| number | - | 4.6.0 |
2630
- | placeholder | 加载占位，为 | ReactNode | - | 4.6.0 |
2631
- | preview | 预览参数，为 | boolean \| | true | 4.6.0 |
2632
- | src | 图片地址 | string | - | 4.6.0 |
2633
- | width | 图像宽度 | string \| number | - | 4.6.0 |
2634
- | onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
2841
+ | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
2842
+ | autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
2843
+ | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
2844
+ | disabled | 菜单是否禁用 | boolean | - | |
2845
+ | destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
2846
+ | popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
2847
+ | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
2848
+ | menu | 菜单配置项 | | - | 4.24.0 |
2849
+ | overlayClassName | 下拉根元素的类名称 | string | - | |
2850
+ | overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
2851
+ | placement | 菜单弹出位置： | string | bottomLeft | |
2852
+ | trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ | |
2853
+ | open | 菜单是否显示，小于 4.23.0 使用 | boolean | - | 4.23.0 |
2854
+ | onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
2635
2855
 
2636
2856
 
2637
- 其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
2857
+ ### Dropdown.Button
2638
2858
 
2639
- ### PreviewType
2640
-
2641
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2642
- |--------|--------|--------|--------|--------|
2643
- | visible | 是否显示 | boolean | - | - |
2644
- | src | 自定义预览 src | string | - | 4.10.0 |
2645
- | getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
2646
- | movable | 是否可移动 | boolean | true | 5.8.0 |
2647
- | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
2648
- | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
2649
- | rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
2650
- | scaleStep | 1 + scaleStep | number | 0.5 | - |
2651
- | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
2652
- | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
2653
- | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
2654
- | forceRender | 强制渲染预览图 | boolean | - | - |
2655
- | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
2656
- | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
2657
- | destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
2658
- | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
2659
- | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
2660
-
2661
-
2662
- ## PreviewGroup
2663
-
2664
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2665
- |--------|--------|--------|--------|--------|
2666
- | preview | 预览参数，为 | boolean \| | true | 4.6.0 |
2667
- | items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
2668
- | fallback | 加载失败容错地址 | string | - | 5.7.0 |
2669
-
2670
-
2671
- ### PreviewGroupType
2672
-
2673
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2674
- |--------|--------|--------|--------|--------|
2675
- | visible | 是否显示 | boolean | - | - |
2676
- | getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
2677
- | movable | 是否可移动 | boolean | true | 5.8.0 |
2678
- | current | 当前预览图的 index | number | - | 4.12.0 |
2679
- | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
2680
- | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
2681
- | scaleStep | 1 + scaleStep | number | 0.5 | - |
2682
- | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
2683
- | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
2684
- | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
2685
- | forceRender | 强制渲染预览图 | boolean | - | - |
2686
- | countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
2687
- | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
2688
- | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
2689
- | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
2690
- | onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
2691
- | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
2692
-
2693
-
2694
- ## Interface
2695
-
2696
- ### TransformType
2697
-
2698
-
2699
- ```typescript
2700
- {
2701
- x: number;
2702
- y: number;
2703
- rotate: number;
2704
- scale: number;
2705
- flipX: boolean;
2706
- flipY: boolean;
2707
- }
2708
- ```
2709
-
2710
-
2711
- ### TransformAction
2712
-
2713
-
2714
- ```typescript
2715
- type TransformAction =
2716
- | 'flipY'
2717
- | 'flipX'
2718
- | 'rotateLeft'
2719
- | 'rotateRight'
2720
- | 'zoomIn'
2721
- | 'zoomOut'
2722
- | 'close'
2723
- | 'prev'
2724
- | 'next'
2725
- | 'wheel'
2726
- | 'doubleClick'
2727
- | 'move'
2728
- | 'dragRebound'
2729
- | 'reset';
2730
- ```
2731
-
2732
-
2733
- ### ToolbarRenderInfoType
2734
-
2735
-
2736
- ```typescript
2737
- {
2738
- icons: {
2739
- flipYIcon: React.ReactNode;
2740
- flipXIcon: React.ReactNode;
2741
- rotateLeftIcon: React.ReactNode;
2742
- rotateRightIcon: React.ReactNode;
2743
- zoomOutIcon: React.ReactNode;
2744
- zoomInIcon: React.ReactNode;
2745
- };
2746
- actions: {
2747
- onActive?: (index: number) => void; // 5.21.0 之后支持
2748
- onFlipY: () => void;
2749
- onFlipX: () => void;
2750
- onRotateLeft: () => void;
2751
- onRotateRight: () => void;
2752
- onZoomOut: () => void;
2753
- onZoomIn: () => void;
2754
- onReset: () => void; // 5.17.3 之后支持
2755
- onClose: () => void;
2756
- };
2757
- transform: TransformType,
2758
- current: number;
2759
- total: number;
2760
- image: ImgInfo
2761
- }
2762
- ```
2763
-
2764
-
2765
- ### ImgInfo
2766
-
2767
-
2768
- ```typescript
2769
- {
2770
- url: string;
2771
- alt: string;
2772
- width: string | number;
2773
- height: string | number;
2774
- }
2775
- ```
2776
-
2777
-
2778
-
2779
-
2780
- <DemoTitle title="Dropdown" desc="向下弹出的列表。">
2781
- #### API
2782
-
2783
- <AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
2784
-
2785
-
2786
- ## antd API
2787
-
2788
- 通用属性参考：[通用属性](/docs/react/common-props)
2789
-
2790
- ### Dropdown
2791
-
2792
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2793
- |--------|--------|--------|--------|--------|
2794
- | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
2795
- | autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
2796
- | autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
2797
- | disabled | 菜单是否禁用 | boolean | - | |
2798
- | destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
2799
- | popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
2800
- | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
2801
- | menu | 菜单配置项 | | - | 4.24.0 |
2802
- | overlayClassName | 下拉根元素的类名称 | string | - | |
2803
- | overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
2804
- | placement | 菜单弹出位置： | string | bottomLeft | |
2805
- | trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ | |
2806
- | open | 菜单是否显示，小于 4.23.0 使用 | boolean | - | 4.23.0 |
2807
- | onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
2808
-
2809
-
2810
- ### Dropdown.Button
2811
-
2812
- 属性与 Dropdown 的相同。还包含以下属性：
2859
+ 属性与 Dropdown 的相同。还包含以下属性：
2813
2860
 
2814
2861
  | 参数 | 说明 | 类型 | 默认值 | 版本 |
2815
2862
  |--------|--------|--------|--------|--------|
@@ -2928,87 +2975,6 @@ const dividerItem = {
2928
2975
 
2929
2976
 
2930
2977
 
2931
- <DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
2932
- ## API
2933
-
2934
- | 属性名 | 描述 | 类型 | 默认值 |
2935
- |--------|--------|--------|--------|
2936
- | type | 空状态类型 | \| 'noData'
2937
- \| 'networkError'
2938
- \| '404'
2939
- \| 'arrears'
2940
- \| 'desktopOnly'
2941
- \| 'noAudio'
2942
- \| 'noImage'
2943
- \| 'noVideo'
2944
- \| 'noAccess'
2945
- \| 'error'
2946
- \| 'noModel'
2947
- \| 'noApp'
2948
- \| 'success'
2949
- \| 'failed'
2950
- \| 'inProgress'
2951
- \| 'stayTuned' | 'noData' |
2952
- | texture | 是否显示纹理 | boolean | true |
2953
- | image | 图片地址 | string | 默认是no data的图片 |
2954
- | imageStyle | 图片样式 | React.CSSProperties | |
2955
- | title | 标题内容 | React.ReactNode | |
2956
- | description | 自定义描述内容 | React.ReactNode | |
2957
- | onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
2958
- | okText | ok按钮的文本 | React.ReactNode | |
2959
- | okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
2960
- | okButtonProps | ok按钮的props | SparkButtonProps | |
2961
- | children | 自定义空状态的内容 | React.ReactNode | |
2962
- | className | 自定义空状态的类名 | string | |
2963
- | style | 自定义空状态的样式 | React.CSSProperties | |
2964
- | size | 自定义空状态的大小 | React.CSSProperties['width'] | |
2965
- | autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
2966
-
2967
-
2968
- <AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
2969
-
2970
-
2971
-
2972
-
2973
-
2974
- <DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
2975
- #### API
2976
-
2977
- <AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
2978
-
2979
-
2980
- ## antd API
2981
-
2982
- 通用属性参考：[通用属性](/docs/react/common-props)
2983
-
2984
- ### Descriptions
2985
-
2986
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
2987
- |--------|--------|--------|--------|--------|
2988
- | bordered | 是否展示边框 | boolean | false | |
2989
- | colon | 配置 | boolean | true | |
2990
- | column | 一行的 | number \| | 3 | |
2991
- | extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
2992
- | items | 描述列表项内容 | | - | 5.8.0 |
2993
- | layout | 描述布局 | horizontal | horizontal | |
2994
- | size | 设置列表的大小。可以设置为 | default | - | |
2995
- | title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
2996
- | classNames | 语义化结构 class | | - | 5.23.0 |
2997
- | styles | 语义化结构 style | | - | 5.23.0 |
2998
-
2999
-
3000
- ### DescriptionItem
3001
-
3002
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3003
- |--------|--------|--------|--------|--------|
3004
- | label | 内容的描述 | ReactNode | - | |
3005
- | span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
3006
-
3007
-
3008
- span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
3009
-
3010
-
3011
-
3012
2978
  <DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
3013
2979
  #### API
3014
2980
 
@@ -3073,6 +3039,44 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
3073
3039
 
3074
3040
 
3075
3041
 
3042
+ <DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
3043
+ #### API
3044
+
3045
+ <AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
3046
+
3047
+
3048
+ ## antd API
3049
+
3050
+ 通用属性参考：[通用属性](/docs/react/common-props)
3051
+
3052
+ ### Descriptions
3053
+
3054
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3055
+ |--------|--------|--------|--------|--------|
3056
+ | bordered | 是否展示边框 | boolean | false | |
3057
+ | colon | 配置 | boolean | true | |
3058
+ | column | 一行的 | number \| | 3 | |
3059
+ | extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
3060
+ | items | 描述列表项内容 | | - | 5.8.0 |
3061
+ | layout | 描述布局 | horizontal | horizontal | |
3062
+ | size | 设置列表的大小。可以设置为 | default | - | |
3063
+ | title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
3064
+ | classNames | 语义化结构 class | | - | 5.23.0 |
3065
+ | styles | 语义化结构 style | | - | 5.23.0 |
3066
+
3067
+
3068
+ ### DescriptionItem
3069
+
3070
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3071
+ |--------|--------|--------|--------|--------|
3072
+ | label | 内容的描述 | ReactNode | - | |
3073
+ | span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
3074
+
3075
+
3076
+ span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
3077
+
3078
+
3079
+
3076
3080
  <DemoTitle title="CollapsePanel" desc="折叠面板">
3077
3081
  #### API
3078
3082
 
@@ -3357,27 +3361,12 @@ export type FormatType =
3357
3361
  | Array
3358
3362
  | {
3359
3363
  format: string;
3360
- type?: 'mask';
3361
- };
3362
- ```
3363
-
3364
-
3365
- 注意：`type` 定义为 `5.14.0` 新增。
3366
-
3367
-
3368
-
3369
- <DemoTitle title="CodeBlock" desc="代码块">
3370
- #### API
3364
+ type?: 'mask';
3365
+ };
3366
+ ```
3371
3367
 
3372
- | 属性名 | 描述 | 类型 | 默认值 |
3373
- |--------|--------|--------|--------|
3374
- | language | 语言 | string \| string[] | (必填) |
3375
- | value | 值 | string | (必填) |
3376
- | className | 类名 | string | |
3377
- | theme | 主题 | 'dark' \| 'light' | |
3378
- | readOnly | 只读 | boolean | |
3379
- | onChange | | (value: string) => void | |
3380
3368
 
3369
+ 注意：`type` 定义为 `5.14.0` 新增。
3381
3370
 
3382
3371
 
3383
3372
 
@@ -3439,6 +3428,21 @@ export type FormatType =
3439
3428
 
3440
3429
 
3441
3430
 
3431
+ <DemoTitle title="CodeBlock" desc="代码块">
3432
+ #### API
3433
+
3434
+ | 属性名 | 描述 | 类型 | 默认值 |
3435
+ |--------|--------|--------|--------|
3436
+ | language | 语言 | string \| string[] | (必填) |
3437
+ | value | 值 | string | (必填) |
3438
+ | className | 类名 | string | |
3439
+ | theme | 主题 | 'dark' \| 'light' | |
3440
+ | readOnly | 只读 | boolean | |
3441
+ | onChange | | (value: string) => void | |
3442
+
3443
+
3444
+
3445
+
3442
3446
  <DemoTitle title="Card" desc="通用卡片容器">
3443
3447
  #### API
3444
3448
 
@@ -3502,123 +3506,130 @@ export type FormatType =
3502
3506
 
3503
3507
 
3504
3508
 
3505
- <DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
3509
+ <DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
3506
3510
  #### API
3507
3511
 
3508
- #### BreadcrumbItems 配置
3509
-
3510
3512
  | 属性名 | 描述 | 类型 | 默认值 |
3511
3513
  |--------|--------|--------|--------|
3512
- | title | 面包屑项标题 | string \| React.ReactNode | (必填) |
3513
- | iconUrl | 图标地址 | string | '' |
3514
- | dropdown | 下拉菜单配置 | {
3515
- items: Array<{
3516
- key: string;
3517
- label: React.ReactNode;
3518
- }>;
3519
- } | |
3520
-
3514
+ | size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
3515
+ | type | 类型 | \| 'primary'
3516
+ \| 'dashed'
3517
+ \| 'link'
3518
+ \| 'text'
3519
+ \| 'default'
3520
+ \| 'primaryLess'
3521
+ \| 'textCompact' | 'deafult' |
3522
+ | tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
3523
+ | iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
3524
+ | iconSize | 图标大小 | SparkIconFontProps['size'] | |
3521
3525
 
3522
- <AntdApiRef url="https://ant.design/components/breadcrumb-cn/#api"></AntdApiRef>
3526
+ <AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
3523
3527
 
3524
3528
 
3525
3529
  ## antd API
3526
3530
 
3527
3531
  通用属性参考：[通用属性](/docs/react/common-props)
3528
3532
 
3529
- ### Breadcrumb
3533
+ 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
3530
3534
 
3531
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3535
+ 按钮的属性说明如下：
3536
+
3537
+ | 属性 | 说明 | 类型 | 默认值 | 版本 |
3532
3538
  |--------|--------|--------|--------|--------|
3533
- | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
3534
- | params | 路由的参数 | object | - | |
3535
- | separator | 分隔符自定义 | ReactNode | / | |
3539
+ | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
3540
+ | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
3541
+ | classNames | 语义化结构 class | | - | 5.4.0 |
3542
+ | color | 设置按钮的颜色 | default | - | default |
3543
+ | danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
3544
+ | disabled | 设置按钮失效状态 | boolean | false | |
3545
+ | ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
3546
+ | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
3547
+ | htmlType | 设置 | submit | button | |
3548
+ | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
3549
+ | loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
3550
+ | styles | 语义化结构 style | | - | 5.4.0 |
3551
+ | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
3552
+ | onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
3553
+ | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
3536
3554
 
3537
3555
 
3538
- ### ItemType
3556
+ 支持原生 button 的其他所有属性。
3539
3557
 
3540
- type ItemType = Omit | [SeparatorType](#separatortype)
3558
+ ### PresetColors
3541
3559
 
3542
- ### RouteItemType
3560
+ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
3543
3561
 
3544
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3545
- |--------|--------|--------|--------|--------|
3546
- | className | 自定义类名 | string | - | |
3547
- | dropdownProps | 弹出下拉菜单的自定义配置 | | - | |
3548
- | href | 链接的目的地，不能和 | string | - | |
3549
- | path | 拼接路径，每一层都会拼接前一个 | string | - | |
3550
- | menu | 菜单配置项 | | - | 4.24.0 |
3551
- | onClick | 单击事件 | (e:MouseEvent) => void | - | |
3552
3562
 
3553
3563
 
3554
- ### SeparatorType
3564
+ <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
3565
+ #### API
3566
+
3567
+ | 属性名 | 描述 | 类型 | 默认值 |
3568
+ |--------|--------|--------|--------|
3569
+ | description | 描述文本 | string | |
3570
+ | descriptionClassName | 描述文本的样式类名 | string | |
3571
+ | descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
3555
3572
 
3556
3573
 
3557
- ```ts
3558
- const item = {
3559
- type: 'separator', // Must have
3560
- separator: '/',
3561
- };
3562
- ```
3574
+ <AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
3575
+
3576
+
3577
+ ## antd API
3578
+
3579
+ 通用属性参考：[通用属性](/docs/react/common-props)
3563
3580
 
3581
+ #### Checkbox
3564
3582
 
3565
3583
  | 参数 | 说明 | 类型 | 默认值 | 版本 |
3566
3584
  |--------|--------|--------|--------|--------|
3567
- | type | 标记为分隔符 | separator | | 5.3.0 |
3568
- | separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
3569
-
3585
+ | autoFocus | 自动获取焦点 | boolean | false | |
3586
+ | checked | 指定当前是否选中 | boolean | false | |
3587
+ | defaultChecked | 初始是否选中 | boolean | false | |
3588
+ | disabled | 失效状态 | boolean | false | |
3589
+ | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
3590
+ | onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
3591
+ | onBlur | 失去焦点时的回调 | function() | - | |
3592
+ | onFocus | 获得焦点时的回调 | function() | - | |
3570
3593
 
3571
- ### 和 browserHistory 配合
3572
3594
 
3573
- 和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
3595
+ #### Checkbox.Group
3574
3596
 
3597
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3598
+ |--------|--------|--------|--------|--------|
3599
+ | defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
3600
+ | disabled | 整组失效 | boolean | false | |
3601
+ | name | CheckboxGroup 下所有 | string | - | |
3602
+ | options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
3603
+ | value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
3604
+ | title | 选项的 title | string | - | |
3605
+ | className | 选项的类名 | string | - | 5.25.0 |
3606
+ | style | 选项的样式 | React.CSSProperties | - | |
3607
+ | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
3575
3608
 
3576
- ```jsx
3577
- import { Link } from 'react-router';
3578
3609
 
3579
- const items = [
3580
- {
3581
- path: '/index',
3582
- title: 'home',
3583
- },
3584
- {
3585
- path: '/first',
3586
- title: 'first',
3587
- children: [
3588
- {
3589
- path: '/general',
3590
- title: 'General',
3591
- },
3592
- {
3593
- path: '/layout',
3594
- title: 'Layout',
3595
- },
3596
- {
3597
- path: '/navigation',
3598
- title: 'Navigation',
3599
- },
3600
- ],
3601
- },
3602
- {
3603
- path: '/second',
3604
- title: 'second',
3605
- },
3606
- ];
3610
+ ##### Option
3607
3611
 
3608
- function itemRender(currentRoute, params, items, paths) {
3609
- const isLast = currentRoute?.path === items[items.length - 1]?.path;
3610
3612
 
3611
- return isLast ? (
3612
- <span>{currentRoute.title}</span>
3613
- ) : (
3614
- <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
3615
- );
3613
+ ```typescript
3614
+ interface Option {
3615
+ label: string;
3616
+ value: string;
3617
+ disabled?: boolean;
3616
3618
  }
3617
-
3618
- return <Breadcrumb itemRender={itemRender} items={items} />;
3619
3619
  ```
3620
3620
 
3621
3621
 
3622
+ ### 方法
3623
+
3624
+ #### Checkbox
3625
+
3626
+ | 名称 | 描述 | 版本 |
3627
+ |--------|--------|--------|
3628
+ | blur() | 移除焦点 | |
3629
+ | focus() | 获取焦点 | |
3630
+ | nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
3631
+
3632
+
3622
3633
 
3623
3634
 
3624
3635
  <DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
@@ -3660,129 +3671,131 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
3660
3671
 
3661
3672
 
3662
3673
 
3663
- <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
3674
+ <DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
3664
3675
  #### API
3665
3676
 
3677
+ #### BreadcrumbItems 配置
3678
+
3666
3679
  | 属性名 | 描述 | 类型 | 默认值 |
3667
3680
  |--------|--------|--------|--------|
3668
- | description | 描述文本 | string | |
3669
- | descriptionClassName | 描述文本的样式类名 | string | |
3670
- | descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
3681
+ | title | 面包屑项标题 | string \| React.ReactNode | (必填) |
3682
+ | iconUrl | 图标地址 | string | '' |
3683
+ | dropdown | 下拉菜单配置 | {
3684
+ items: Array<{
3685
+ key: string;
3686
+ label: React.ReactNode;
3687
+ }>;
3688
+ } | |
3671
3689
 
3672
3690
 
3673
- <AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
3691
+ <AntdApiRef url="https://ant.design/components/breadcrumb-cn/#api"></AntdApiRef>
3674
3692
 
3675
3693
 
3676
3694
  ## antd API
3677
3695
 
3678
3696
  通用属性参考：[通用属性](/docs/react/common-props)
3679
3697
 
3680
- #### Checkbox
3698
+ ### Breadcrumb
3681
3699
 
3682
3700
  | 参数 | 说明 | 类型 | 默认值 | 版本 |
3683
3701
  |--------|--------|--------|--------|--------|
3684
- | autoFocus | 自动获取焦点 | boolean | false | |
3685
- | checked | 指定当前是否选中 | boolean | false | |
3686
- | defaultChecked | 初始是否选中 | boolean | false | |
3687
- | disabled | 失效状态 | boolean | false | |
3688
- | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
3689
- | onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
3690
- | onBlur | 失去焦点时的回调 | function() | - | |
3691
- | onFocus | 获得焦点时的回调 | function() | - | |
3702
+ | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
3703
+ | params | 路由的参数 | object | - | |
3704
+ | separator | 分隔符自定义 | ReactNode | / | |
3692
3705
 
3693
3706
 
3694
- #### Checkbox.Group
3707
+ ### ItemType
3695
3708
 
3696
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
3697
- |--------|--------|--------|--------|--------|
3698
- | defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
3699
- | disabled | 整组失效 | boolean | false | |
3700
- | name | CheckboxGroup 下所有 | string | - | |
3701
- | options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
3702
- | value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
3703
- | title | 选项的 title | string | - | |
3704
- | className | 选项的类名 | string | - | 5.25.0 |
3705
- | style | 选项的样式 | React.CSSProperties | - | |
3706
- | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
3709
+ type ItemType = Omit | [SeparatorType](#separatortype)
3707
3710
 
3711
+ ### RouteItemType
3708
3712
 
3709
- ##### Option
3713
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3714
+ |--------|--------|--------|--------|--------|
3715
+ | className | 自定义类名 | string | - | |
3716
+ | dropdownProps | 弹出下拉菜单的自定义配置 | | - | |
3717
+ | href | 链接的目的地，不能和 | string | - | |
3718
+ | path | 拼接路径，每一层都会拼接前一个 | string | - | |
3719
+ | menu | 菜单配置项 | | - | 4.24.0 |
3720
+ | onClick | 单击事件 | (e:MouseEvent) => void | - | |
3710
3721
 
3711
3722
 
3712
- ```typescript
3713
- interface Option {
3714
- label: string;
3715
- value: string;
3716
- disabled?: boolean;
3717
- }
3718
- ```
3723
+ ### SeparatorType
3719
3724
 
3720
3725
 
3721
- ### 方法
3726
+ ```ts
3727
+ const item = {
3728
+ type: 'separator', // Must have
3729
+ separator: '/',
3730
+ };
3731
+ ```
3722
3732
 
3723
- #### Checkbox
3724
3733
 
3725
- | 名称 | 描述 | 版本 |
3726
- |--------|--------|--------|
3727
- | blur() | 移除焦点 | |
3728
- | focus() | 获取焦点 | |
3729
- | nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
3734
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
3735
+ |--------|--------|--------|--------|--------|
3736
+ | type | 标记为分隔符 | separator | | 5.3.0 |
3737
+ | separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
3730
3738
 
3731
3739
 
3740
+ ### 和 browserHistory 配合
3732
3741
 
3742
+ 和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
3733
3743
 
3734
- <DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
3735
- #### API
3736
3744
 
3737
- | 属性名 | 描述 | 类型 | 默认值 |
3738
- |--------|--------|--------|--------|
3739
- | size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
3740
- | type | 类型 | \| 'primary'
3741
- \| 'dashed'
3742
- \| 'link'
3743
- \| 'text'
3744
- \| 'default'
3745
- \| 'primaryLess'
3746
- \| 'textCompact' | 'deafult' |
3747
- | tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
3748
- | iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
3749
- | iconSize | 图标大小 | SparkIconFontProps['size'] | |
3745
+ ```jsx
3746
+ import { Link } from 'react-router';
3750
3747
 
3751
- <AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
3748
+ const items = [
3749
+ {
3750
+ path: '/index',
3751
+ title: 'home',
3752
+ },
3753
+ {
3754
+ path: '/first',
3755
+ title: 'first',
3756
+ children: [
3757
+ {
3758
+ path: '/general',
3759
+ title: 'General',
3760
+ },
3761
+ {
3762
+ path: '/layout',
3763
+ title: 'Layout',
3764
+ },
3765
+ {
3766
+ path: '/navigation',
3767
+ title: 'Navigation',
3768
+ },
3769
+ ],
3770
+ },
3771
+ {
3772
+ path: '/second',
3773
+ title: 'second',
3774
+ },
3775
+ ];
3752
3776
 
3777
+ function itemRender(currentRoute, params, items, paths) {
3778
+ const isLast = currentRoute?.path === items[items.length - 1]?.path;
3753
3779
 
3754
- ## antd API
3780
+ return isLast ? (
3781
+ <span>{currentRoute.title}</span>
3782
+ ) : (
3783
+ <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
3784
+ );
3785
+ }
3755
3786
 
3756
- 通用属性参考：[通用属性](/docs/react/common-props)
3787
+ return <Breadcrumb itemRender={itemRender} items={items} />;
3788
+ ```
3757
3789
 
3758
- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
3759
3790
 
3760
- 按钮的属性说明如下：
3761
3791
 
3762
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
3763
- |--------|--------|--------|--------|--------|
3764
- | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
3765
- | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
3766
- | classNames | 语义化结构 class | | - | 5.4.0 |
3767
- | color | 设置按钮的颜色 | default | - | default |
3768
- | danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
3769
- | disabled | 设置按钮失效状态 | boolean | false | |
3770
- | ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
3771
- | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
3772
- | htmlType | 设置 | submit | button | |
3773
- | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
3774
- | loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
3775
- | styles | 语义化结构 style | | - | 5.4.0 |
3776
- | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
3777
- | onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
3778
- | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
3779
3792
 
3793
+ <DemoTitle title="Audio" desc="音频展示">
3794
+ #### API
3780
3795
 
3781
- 支持原生 button 的其他所有属性。
3796
+ ApiParser解析结果为空
3782
3797
 
3783
- ### PresetColors
3784
3798
 
3785
- type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
3786
3799
 
3787
3800
 
3788
3801
 
@@ -4046,6 +4059,120 @@ const confirmed = await modal.confirm({ ... });
4046
4059
 
4047
4060
 
4048
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
+
4049
4176
  # 使用
4050
4177
 
4051
4178
 
@@ -4068,4 +4195,782 @@ export default () => {
4068
4195
 
4069
4196
  基本用法
4070
4197
 
4071
- 访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
4198
+ 访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
4199
+
4200
+
4201
+
4202
+ # 从 Antd 迁移
4203
+
4204
+ ## 📦 安装
4205
+
4206
+
4207
+ ```bash
4208
+ $ npm install @agentscope-ai/icons @agentscope-ai/design --save
4209
+ ```
4210
+
4211
+
4212
+ ## 🔨 使用
4213
+
4214
+ 从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
4215
+
4216
+
4217
+ ```tsx
4218
+ import {
4219
+ Button,
4220
+ Image,
4221
+ ConfigProvider,
4222
+ purpleDarkTheme,
4223
+ purpleTheme,
4224
+ } from '@agentscope-ai/design';
4225
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4226
+ import { Flex } from 'antd';
4227
+ import zhCN from 'antd/locale/zh_CN';
4228
+ import { useState } from 'react';
4229
+
4230
+ const App = () => {
4231
+ const [colorMode, setColorMode] = useState('light');
4232
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4233
+
4234
+ const prefix = 'sps';
4235
+ return (
4236
+ <ConfigProvider
4237
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4238
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4239
+ prefixCls={prefix}
4240
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4241
+ locale={zhCN} // 来自 Ant Design 的语言包
4242
+ style={{
4243
+ width: '100%',
4244
+ height: '100%',
4245
+ }}
4246
+ >
4247
+ <div
4248
+ style={{
4249
+ width: '100%',
4250
+ height: '100%',
4251
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4252
+ }}
4253
+ >
4254
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4255
+ <Image
4256
+ width={120}
4257
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4258
+ />
4259
+ <div
4260
+ style={{
4261
+ color: `var(--${prefix}-ant-color-text-base)`,
4262
+ fontSize: '24px',
4263
+ textAlign: 'center',
4264
+ }}
4265
+ >
4266
+ Hello Spark Design!
4267
+ </div>
4268
+ <Button
4269
+ type="primary"
4270
+ onClick={() => {
4271
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4272
+ }}
4273
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4274
+ >
4275
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4276
+ </Button>
4277
+ </Flex>
4278
+ </div>
4279
+ </ConfigProvider>
4280
+ );
4281
+ };
4282
+
4283
+ export default App;
4284
+ ```
4285
+
4286
+
4287
+ 如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
4288
+
4289
+
4290
+ ```tsx
4291
+ import {
4292
+ ConfigProvider,
4293
+ purpleDarkTheme,
4294
+ purpleTheme,
4295
+ } from '@agentscope-ai/design';
4296
+ import { Button, Image, Flex } from 'antd';
4297
+ import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
4298
+ import zhCN from 'antd/locale/zh_CN';
4299
+ import { useState } from 'react';
4300
+
4301
+ const App = () => {
4302
+ const [colorMode, setColorMode] = useState('light');
4303
+ const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
4304
+
4305
+ const prefix = 'sps';
4306
+ return (
4307
+ <ConfigProvider
4308
+ {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
4309
+ prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
4310
+ prefixCls={prefix}
4311
+ iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
4312
+ locale={zhCN} // 来自 Ant Design 的语言包
4313
+ style={{
4314
+ width: '100%',
4315
+ height: '100%',
4316
+ }}
4317
+ >
4318
+ <div
4319
+ style={{
4320
+ width: '100%',
4321
+ height: '100%',
4322
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4323
+ }}
4324
+ >
4325
+ <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
4326
+ <Image
4327
+ width={120}
4328
+ src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
4329
+ />
4330
+ <div
4331
+ style={{
4332
+ color: `var(--${prefix}-ant-color-text-base)`,
4333
+ fontSize: '24px',
4334
+ textAlign: 'center',
4335
+ }}
4336
+ >
4337
+ Hello Spark Design!
4338
+ </div>
4339
+ <Button
4340
+ type="primary"
4341
+ onClick={() => {
4342
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
4343
+ }}
4344
+ icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
4345
+ >
4346
+ {colorMode === 'light' ? '暗色' : '亮色'} 模式
4347
+ </Button>
4348
+ </Flex>
4349
+ </div>
4350
+ </ConfigProvider>
4351
+ );
4352
+ };
4353
+
4354
+ export default App;
4355
+ ```
4356
+
4357
+
4358
+
4359
+
4360
+ # 使用
4361
+
4362
+ 如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
4363
+
4364
+
4365
+ ```tsx
4366
+ import {
4367
+ ConfigProvider,
4368
+ purpleTheme,
4369
+ Button,
4370
+ IconFont,
4371
+ IconButton,
4372
+ } from '@agentscope-ai/design';
4373
+ import { Flex } from 'antd';
4374
+ import zhCN from 'antd/locale/zh_CN';
4375
+ import { useState } from 'react';
4376
+
4377
+ const App = () => {
4378
+ const prefix = 'sps';
4379
+ const iconSymbol = 'spark-effciency-line';
4380
+ const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
4381
+ return (
4382
+ <ConfigProvider
4383
+ {...purpleTheme}
4384
+ prefix={prefix}
4385
+ prefixCls={prefix}
4386
+ iconfont={iconfont}
4387
+ locale={zhCN}
4388
+ style={{
4389
+ width: '100%',
4390
+ height: '100%',
4391
+ }}
4392
+ >
4393
+ <Flex
4394
+ style={{
4395
+ width: '100%',
4396
+ height: '100%',
4397
+ backgroundColor: `var(--${prefix}-color-bg-base)`,
4398
+ }}
4399
+ justify="center"
4400
+ align="center"
4401
+ >
4402
+ <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
4403
+ <Flex gap={8}>
4404
+ <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
4405
+ <IconFont type={iconSymbol} />
4406
+ </Flex>
4407
+ <Flex gap={8}>
4408
+ <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
4409
+ <Button type="primary" iconType={iconSymbol}>
4410
+ 添加用户
4411
+ </Button>
4412
+ </Flex>
4413
+ <Flex gap={8}>
4414
+ <div style={{ width: '100px', lineHeight: '32px' }}>
4415
+ IconButton:
4416
+ </div>
4417
+ <IconButton iconType={iconSymbol}></IconButton>
4418
+ </Flex>
4419
+ </Flex>
4420
+ </Flex>
4421
+ </ConfigProvider>
4422
+ );
4423
+ };
4424
+
4425
+ export default App;
4426
+ ```
4427
+
4428
+
4429
+
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
+ "colorTextOnPrimary": "#000000",
4929
+ "colorFillDisable": "#898989",
4930
+ "colorPurple": "#615CED",
4931
+ "colorPurpleHover": "#8383F0",
4932
+ "colorPurpleBg": "#6964877A",
4933
+ "colorPink": "#EC4899",
4934
+ "colorPinkHover": "#E494BC",
4935
+ "colorPinkBg": "#53424D7A",
4936
+ "colorYellow": "#EAB308",
4937
+ "colorYellowHover": "#DBBE62",
4938
+ "colorYellowBg": "#9585527A",
4939
+ "colorOrange": "#FA8125",
4940
+ "colorOrangeHover": "#F7A25F",
4941
+ "colorOrangeBg": "#6F58417A",
4942
+ "colorTeal": "#14B8A6",
4943
+ "colorTealHover": "#7BC7BE",
4944
+ "colorTealBg": "#4658547A",
4945
+ "colorBlue": "#0090FF",
4946
+ "colorBlueHover": "#83BFED",
4947
+ "colorBlueBg": "#5E76897A",
4948
+ "colorMauve": "#8E8C99",
4949
+ "colorMauveHover": "#BBB8CA",
4950
+ "colorMauveBg": "#5859647A",
4951
+ "colorSlate": "#2C3A50",
4952
+ "colorSlateHover": "#354252",
4953
+ "colorSlateBg": "#232B36",
4954
+ "colorLavender": "#A77BFF",
4955
+ "colorLavenderHover": "#BFA5F3",
4956
+ "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
4957
+
4958
+ "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)",
4959
+ "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)",
4960
+ "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)",
4961
+ "colorTextBlack": "#000000"
4962
+ }
4963
+ ```
4964
+
4965
+ # CSS 变量
4966
+
4967
+ Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
4968
+
4969
+
4970
+ ```less
4971
+ .example {
4972
+ background: var(--sps-color-bg-base);
4973
+ color: var(--sps-color-pink);
4974
+ }
4975
+ // 提示：您可以将 'sps' 替换为您自己的前缀
4976
+ ```