@agentscope-ai/design 1.0.16 → 1.0.18
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.
- package/lib/antd/styles/button.style.js +13 -1
- package/lib/antd/styles/index.style.js +3 -1
- package/lib/antd/styles/tree.style.d.ts +6 -0
- package/lib/antd/styles/tree.style.js +18 -0
- package/lib/antd/themes/bailianDarkTheme.json +3 -1
- package/lib/antd/themes/bailianTheme.json +4 -2
- package/lib/antd/themes/carbonDarkTheme.json +3 -1
- package/lib/antd/themes/carbonTheme.json +3 -1
- package/lib/antd/themes/generateTheme.js +30 -29
- package/lib/components/commonComponents/Audio/Control.d.ts +53 -0
- package/lib/components/commonComponents/{Video → Audio}/Control.js +18 -15
- package/lib/components/commonComponents/Audio/Control.style.d.ts +1 -0
- package/lib/components/commonComponents/Audio/Control.style.js +14 -0
- package/lib/components/commonComponents/Audio/demo/demo1.d.ts +2 -0
- package/lib/components/commonComponents/Audio/demo/demo1.js +11 -0
- package/lib/components/commonComponents/Audio/index.d.ts +10 -0
- package/lib/components/commonComponents/Audio/index.js +164 -0
- package/lib/components/commonComponents/Audio/index.style.d.ts +1 -0
- package/lib/components/commonComponents/Audio/index.style.js +10 -0
- package/lib/components/commonComponents/Button/demo/demo1.js +7 -0
- package/lib/components/commonComponents/Button/index.js +2 -1
- package/lib/components/commonComponents/CollapsePanel/demo/demo1.js +6 -6
- package/lib/components/commonComponents/CollapsePanel/index.js +4 -4
- package/lib/components/commonComponents/EllipsisTip/index.d.ts +8 -1
- package/lib/components/commonComponents/EllipsisTip/index.js +33 -3
- package/lib/components/commonComponents/Empty/index.d.ts +6 -0
- package/lib/components/commonComponents/Empty/index.js +22 -7
- package/lib/components/commonComponents/Empty/index.style.js +1 -1
- package/lib/components/commonComponents/Pagination/index.js +33 -42
- package/lib/components/commonComponents/Pagination/index.style.js +1 -1
- package/lib/components/commonComponents/PromptsEditor/VarRender.js +1 -1
- package/lib/components/commonComponents/SliderSelector/index.d.ts +1 -1
- package/lib/components/commonComponents/SliderSelector/index.js +8 -4
- package/lib/components/commonComponents/Steps/index.js +2 -1
- package/lib/components/commonComponents/Steps/index.style.js +5 -1
- package/lib/components/commonComponents/Table/index.style.js +27 -1
- package/lib/components/commonComponents/Tabs/index.js +9 -8
- package/lib/components/commonComponents/Tooltip/demo/demo3.d.ts +3 -0
- package/lib/components/commonComponents/Tooltip/demo/demo3.js +25 -0
- package/lib/components/commonComponents/Tooltip/index.d.ts +7 -1
- package/lib/components/commonComponents/Tooltip/index.js +12 -1
- package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
- package/lib/components/commonComponents/Video/index.d.ts +5 -6
- package/lib/components/commonComponents/Video/index.js +14 -9
- package/lib/components/commonComponents/Video/index.style.js +2 -4
- package/lib/components/mobileComponents/MobileDrawer/index.style.js +7 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -0
- package/lib/typings.d.ts +12 -0
- package/llms/all.llms.txt +889 -1772
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
- package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +2 -1
- package/llms/index.llms.txt +47 -47
- package/package.json +4 -4
- package/scripts/mcp-docs-server.js +4 -4
- package/lib/components/commonComponents/Video/Control.d.ts +0 -19
- package/llms/docs/guide/fromAntd.zh-CN.llms.txt +0 -156
- package/llms/docs/guide/fromScratch.zh-CN.llms.txt +0 -83
- package/llms/docs/guide/iconfont.zh-CN.llms.txt +0 -69
- package/llms/docs/guide/overview.zh-CN.llms.txt +0 -51
- package/llms/docs/guide/theme.zh-CN.llms.txt +0 -61
- package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +0 -425
- package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +0 -29
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
| className | 自定义空状态的类名 | string | |
|
|
35
35
|
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
36
36
|
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
37
|
+
| autoFit | 是否自适应容器宽度,当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
37
38
|
|
|
38
39
|
|
|
39
40
|
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
7
|
|--------|--------|--------|--------|
|
|
8
|
-
| mode | 颜色模式 | 'dark' \| 'light' | '
|
|
8
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
9
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
9
10
|
|
|
10
11
|
|
|
11
12
|
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
package/llms/index.llms.txt
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
# 索引
|
|
2
2
|
|
|
3
|
-
- [Alert](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
4
|
-
- [AlertDialog](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
5
|
-
- [Anchor](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
6
|
-
- [Avatar](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
7
|
-
- [Breadcrumb](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
8
|
-
- [Button](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
9
|
-
- [Card](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
10
|
-
- [Checkbox](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
11
|
-
- [CodeBlock](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
12
|
-
- [Collapse](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
13
|
-
- [CollapsePanel](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
14
|
-
- [DatePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
15
|
-
- [Descriptions](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
16
|
-
- [Drawer](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
17
|
-
- [Dropdown](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
18
|
-
- [Empty](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
19
|
-
- [FloatButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
20
|
-
- [Form](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
21
|
-
- [IconButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
22
|
-
- [Image](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
23
|
-
- [Input](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
24
|
-
- [InputNumber](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
25
|
-
- [Message](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
26
|
-
- [Modal](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
27
|
-
- [Notification](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
28
|
-
- [Pagination](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
29
|
-
- [Popconfirm](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
30
|
-
- [Popover](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
31
|
-
- [Progress](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
32
|
-
- [PromptsEditor](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
33
|
-
- [Radio](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
34
|
-
- [RadioButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
35
|
-
- [Result](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
36
|
-
- [Select](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
37
|
-
- [Skeleton](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
38
|
-
- [Slider](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
39
|
-
- [Spinner](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
40
|
-
- [Statistic](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
41
|
-
- [Steps](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
42
|
-
- [Switch](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
43
|
-
- [Table](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
44
|
-
- [Tabs](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
45
|
-
- [Tag](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
46
|
-
- [TimePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
47
|
-
- [Tooltip](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
48
|
-
- [Upload](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
49
|
-
- [Video](https://unpkg.com/browse/@agentscope-ai/design@1.0.
|
|
3
|
+
- [Alert](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Alert/index.zh-CN.llms.txt)
|
|
4
|
+
- [AlertDialog](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt)
|
|
5
|
+
- [Anchor](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt)
|
|
6
|
+
- [Avatar](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt)
|
|
7
|
+
- [Breadcrumb](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt)
|
|
8
|
+
- [Button](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Button/index.zh-CN.llms.txt)
|
|
9
|
+
- [Card](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Card/index.zh-CN.llms.txt)
|
|
10
|
+
- [Checkbox](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt)
|
|
11
|
+
- [CodeBlock](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt)
|
|
12
|
+
- [Collapse](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt)
|
|
13
|
+
- [CollapsePanel](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt)
|
|
14
|
+
- [DatePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt)
|
|
15
|
+
- [Descriptions](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt)
|
|
16
|
+
- [Drawer](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt)
|
|
17
|
+
- [Dropdown](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt)
|
|
18
|
+
- [Empty](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Empty/index.zh-CN.llms.txt)
|
|
19
|
+
- [FloatButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt)
|
|
20
|
+
- [Form](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Form/index.zh-CN.llms.txt)
|
|
21
|
+
- [IconButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt)
|
|
22
|
+
- [Image](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Image/index.zh-CN.llms.txt)
|
|
23
|
+
- [Input](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Input/index.zh-CN.llms.txt)
|
|
24
|
+
- [InputNumber](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt)
|
|
25
|
+
- [Message](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Message/index.zh-CN.llms.txt)
|
|
26
|
+
- [Modal](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Modal/index.zh-CN.llms.txt)
|
|
27
|
+
- [Notification](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Notification/index.zh-CN.llms.txt)
|
|
28
|
+
- [Pagination](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt)
|
|
29
|
+
- [Popconfirm](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt)
|
|
30
|
+
- [Popover](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Popover/index.zh-CN.llms.txt)
|
|
31
|
+
- [Progress](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Progress/index.zh-CN.llms.txt)
|
|
32
|
+
- [PromptsEditor](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt)
|
|
33
|
+
- [Radio](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Radio/index.zh-CN.llms.txt)
|
|
34
|
+
- [RadioButton](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt)
|
|
35
|
+
- [Result](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Result/index.zh-CN.llms.txt)
|
|
36
|
+
- [Select](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Select/index.zh-CN.llms.txt)
|
|
37
|
+
- [Skeleton](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt)
|
|
38
|
+
- [Slider](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Slider/index.zh-CN.llms.txt)
|
|
39
|
+
- [Spinner](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt)
|
|
40
|
+
- [Statistic](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt)
|
|
41
|
+
- [Steps](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Steps/index.zh-CN.llms.txt)
|
|
42
|
+
- [Switch](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Switch/index.zh-CN.llms.txt)
|
|
43
|
+
- [Table](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Table/index.zh-CN.llms.txt)
|
|
44
|
+
- [Tabs](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt)
|
|
45
|
+
- [Tag](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Tag/index.zh-CN.llms.txt)
|
|
46
|
+
- [TimePicker](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt)
|
|
47
|
+
- [Tooltip](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt)
|
|
48
|
+
- [Upload](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Upload/index.zh-CN.llms.txt)
|
|
49
|
+
- [Video](https://unpkg.com/browse/@agentscope-ai/design@1.0.17/llms/components/commonComponents/Video/index.zh-CN.llms.txt)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentscope-ai/design",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "AgentScope Spark Design - UI Library for AgentScope AI",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"prepare": "npm run dumi:setup",
|
|
39
39
|
"start": "npm run dev",
|
|
40
40
|
"test": "vitest",
|
|
41
|
-
"publish:manual": "npm run build && npm publish"
|
|
41
|
+
"publish:manual": "npm run build && npm run build:mcp&& npm publish"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@agentscope-ai/icons": "^1.0.35",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"ahooks": "^3.7.8",
|
|
68
68
|
"antd-style": "^3.7.1",
|
|
69
69
|
"dayjs": "^1.11.7",
|
|
70
|
-
"dompurify": "^2.3.
|
|
70
|
+
"dompurify": "^2.3.12",
|
|
71
71
|
"js-cookie": "^3.0.5",
|
|
72
72
|
"lodash-es": "^4.17.21",
|
|
73
73
|
"query-string": "^7.1.3",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"@vitejs/plugin-react": "^4.3.3",
|
|
98
98
|
"@vitejs/plugin-react-swc": "^3.7.1",
|
|
99
99
|
"@vitest/coverage-istanbul": "2.1.4",
|
|
100
|
-
"@vitest/ui": "2.1.
|
|
100
|
+
"@vitest/ui": "2.1.9",
|
|
101
101
|
"ahooks": "^3.8.1",
|
|
102
102
|
"antd": "^5.23.0",
|
|
103
103
|
"classnames": "^2.5.1",
|
|
@@ -6257,7 +6257,7 @@ module.exports = __toCommonJS(mcp_exports);
|
|
|
6257
6257
|
// package.json
|
|
6258
6258
|
var package_default = {
|
|
6259
6259
|
name: "@agentscope-ai/design",
|
|
6260
|
-
version: "1.0.
|
|
6260
|
+
version: "1.0.18",
|
|
6261
6261
|
description: "AgentScope Spark Design - UI Library for AgentScope AI",
|
|
6262
6262
|
repository: {
|
|
6263
6263
|
type: "git",
|
|
@@ -6295,7 +6295,7 @@ var package_default = {
|
|
|
6295
6295
|
prepare: "npm run dumi:setup",
|
|
6296
6296
|
start: "npm run dev",
|
|
6297
6297
|
test: "vitest",
|
|
6298
|
-
"publish:manual": "npm run build && npm publish"
|
|
6298
|
+
"publish:manual": "npm run build && npm run build:mcp&& npm publish"
|
|
6299
6299
|
},
|
|
6300
6300
|
dependencies: {
|
|
6301
6301
|
"@agentscope-ai/icons": "^1.0.35",
|
|
@@ -6324,7 +6324,7 @@ var package_default = {
|
|
|
6324
6324
|
ahooks: "^3.7.8",
|
|
6325
6325
|
"antd-style": "^3.7.1",
|
|
6326
6326
|
dayjs: "^1.11.7",
|
|
6327
|
-
dompurify: "^2.3.
|
|
6327
|
+
dompurify: "^2.3.12",
|
|
6328
6328
|
"js-cookie": "^3.0.5",
|
|
6329
6329
|
"lodash-es": "^4.17.21",
|
|
6330
6330
|
"query-string": "^7.1.3",
|
|
@@ -6354,7 +6354,7 @@ var package_default = {
|
|
|
6354
6354
|
"@vitejs/plugin-react": "^4.3.3",
|
|
6355
6355
|
"@vitejs/plugin-react-swc": "^3.7.1",
|
|
6356
6356
|
"@vitest/coverage-istanbul": "2.1.4",
|
|
6357
|
-
"@vitest/ui": "2.1.
|
|
6357
|
+
"@vitest/ui": "2.1.9",
|
|
6358
6358
|
ahooks: "^3.8.1",
|
|
6359
6359
|
antd: "^5.23.0",
|
|
6360
6360
|
classnames: "^2.5.1",
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface VideoPlayerControllerProps {
|
|
3
|
-
isPlaying: boolean;
|
|
4
|
-
className?: string;
|
|
5
|
-
currentTime?: number;
|
|
6
|
-
duration?: number;
|
|
7
|
-
enableAudio?: boolean;
|
|
8
|
-
muted?: boolean;
|
|
9
|
-
onMute?: () => void;
|
|
10
|
-
onPlayPause?: () => void;
|
|
11
|
-
onFullscreen?: () => void;
|
|
12
|
-
onProgressClick?: (time: number) => void;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* 视频播放器控制器组件
|
|
16
|
-
* 包含播放/暂停、音量控制、进度条、时间显示和全屏按钮
|
|
17
|
-
*/
|
|
18
|
-
declare const VideoPlayerController: React.FC<VideoPlayerControllerProps>;
|
|
19
|
-
export default VideoPlayerController;
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# 从 Antd 迁移
|
|
4
|
-
|
|
5
|
-
## 📦 安装
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## 🔨 使用
|
|
14
|
-
|
|
15
|
-
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容,这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能,可以尝试使用这些组件而不是 antd 的组件。
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
```tsx
|
|
19
|
-
import {
|
|
20
|
-
Button,
|
|
21
|
-
Image,
|
|
22
|
-
ConfigProvider,
|
|
23
|
-
purpleDarkTheme,
|
|
24
|
-
purpleTheme,
|
|
25
|
-
} from '@agentscope-ai/design';
|
|
26
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
27
|
-
import { Flex } from 'antd';
|
|
28
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
29
|
-
import { useState } from 'react';
|
|
30
|
-
|
|
31
|
-
const App = () => {
|
|
32
|
-
const [colorMode, setColorMode] = useState('light');
|
|
33
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
34
|
-
|
|
35
|
-
const prefix = 'sps';
|
|
36
|
-
return (
|
|
37
|
-
<ConfigProvider
|
|
38
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
39
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
40
|
-
prefixCls={prefix}
|
|
41
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数,您可以从 https://www.iconfont.cn/ 获取
|
|
42
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
43
|
-
style={{
|
|
44
|
-
width: '100%',
|
|
45
|
-
height: '100%',
|
|
46
|
-
}}
|
|
47
|
-
>
|
|
48
|
-
<div
|
|
49
|
-
style={{
|
|
50
|
-
width: '100%',
|
|
51
|
-
height: '100%',
|
|
52
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
53
|
-
}}
|
|
54
|
-
>
|
|
55
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
56
|
-
<Image
|
|
57
|
-
width={120}
|
|
58
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
59
|
-
/>
|
|
60
|
-
<div
|
|
61
|
-
style={{
|
|
62
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
63
|
-
fontSize: '24px',
|
|
64
|
-
textAlign: 'center',
|
|
65
|
-
}}
|
|
66
|
-
>
|
|
67
|
-
Hello Spark Design!
|
|
68
|
-
</div>
|
|
69
|
-
<Button
|
|
70
|
-
type="primary"
|
|
71
|
-
onClick={() => {
|
|
72
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
73
|
-
}}
|
|
74
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
75
|
-
>
|
|
76
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
77
|
-
</Button>
|
|
78
|
-
</Flex>
|
|
79
|
-
</div>
|
|
80
|
-
</ConfigProvider>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export default App;
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
如果您想继续使用 antd 的组件,那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
```tsx
|
|
92
|
-
import {
|
|
93
|
-
ConfigProvider,
|
|
94
|
-
purpleDarkTheme,
|
|
95
|
-
purpleTheme,
|
|
96
|
-
} from '@agentscope-ai/design';
|
|
97
|
-
import { Button, Image, Flex } from 'antd';
|
|
98
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
99
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
100
|
-
import { useState } from 'react';
|
|
101
|
-
|
|
102
|
-
const App = () => {
|
|
103
|
-
const [colorMode, setColorMode] = useState('light');
|
|
104
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
105
|
-
|
|
106
|
-
const prefix = 'sps';
|
|
107
|
-
return (
|
|
108
|
-
<ConfigProvider
|
|
109
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
110
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
111
|
-
prefixCls={prefix}
|
|
112
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数,您可以从 https://www.iconfont.cn/ 获取
|
|
113
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
114
|
-
style={{
|
|
115
|
-
width: '100%',
|
|
116
|
-
height: '100%',
|
|
117
|
-
}}
|
|
118
|
-
>
|
|
119
|
-
<div
|
|
120
|
-
style={{
|
|
121
|
-
width: '100%',
|
|
122
|
-
height: '100%',
|
|
123
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
124
|
-
}}
|
|
125
|
-
>
|
|
126
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
127
|
-
<Image
|
|
128
|
-
width={120}
|
|
129
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
130
|
-
/>
|
|
131
|
-
<div
|
|
132
|
-
style={{
|
|
133
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
134
|
-
fontSize: '24px',
|
|
135
|
-
textAlign: 'center',
|
|
136
|
-
}}
|
|
137
|
-
>
|
|
138
|
-
Hello Spark Design!
|
|
139
|
-
</div>
|
|
140
|
-
<Button
|
|
141
|
-
type="primary"
|
|
142
|
-
onClick={() => {
|
|
143
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
144
|
-
}}
|
|
145
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
146
|
-
>
|
|
147
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
148
|
-
</Button>
|
|
149
|
-
</Flex>
|
|
150
|
-
</div>
|
|
151
|
-
</ConfigProvider>
|
|
152
|
-
);
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
export default App;
|
|
156
|
-
```
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# 从零开始使用
|
|
4
|
-
|
|
5
|
-
## 📦 安装
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## 🔨 使用
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
```tsx
|
|
17
|
-
import {
|
|
18
|
-
Button,
|
|
19
|
-
Image,
|
|
20
|
-
ConfigProvider,
|
|
21
|
-
purpleDarkTheme,
|
|
22
|
-
purpleTheme,
|
|
23
|
-
} from '@agentscope-ai/design';
|
|
24
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
25
|
-
import { Flex } from 'antd';
|
|
26
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
27
|
-
import { useState } from 'react';
|
|
28
|
-
|
|
29
|
-
const App = () => {
|
|
30
|
-
const [colorMode, setColorMode] = useState('light');
|
|
31
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
32
|
-
|
|
33
|
-
const prefix = 'sps';
|
|
34
|
-
return (
|
|
35
|
-
<ConfigProvider
|
|
36
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
37
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
38
|
-
prefixCls={prefix}
|
|
39
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数,您可以从 https://www.iconfont.cn/ 获取
|
|
40
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
41
|
-
style={{
|
|
42
|
-
width: '100%',
|
|
43
|
-
height: '100%',
|
|
44
|
-
}}
|
|
45
|
-
>
|
|
46
|
-
<div
|
|
47
|
-
style={{
|
|
48
|
-
width: '100%',
|
|
49
|
-
height: '100%',
|
|
50
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
51
|
-
}}
|
|
52
|
-
>
|
|
53
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
54
|
-
<Image
|
|
55
|
-
width={120}
|
|
56
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
57
|
-
/>
|
|
58
|
-
<div
|
|
59
|
-
style={{
|
|
60
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
61
|
-
fontSize: '24px',
|
|
62
|
-
textAlign: 'center',
|
|
63
|
-
}}
|
|
64
|
-
>
|
|
65
|
-
Hello Spark Design!
|
|
66
|
-
</div>
|
|
67
|
-
<Button
|
|
68
|
-
type="primary"
|
|
69
|
-
onClick={() => {
|
|
70
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
71
|
-
}}
|
|
72
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
73
|
-
>
|
|
74
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
75
|
-
</Button>
|
|
76
|
-
</Flex>
|
|
77
|
-
</div>
|
|
78
|
-
</ConfigProvider>
|
|
79
|
-
);
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export default App;
|
|
83
|
-
```
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# 使用
|
|
4
|
-
|
|
5
|
-
如果您有自己的 iconfont 项目,可以将您的图标集成到 Spark Design 中,并通过简单的符号名称访问您的图标。
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
```tsx
|
|
9
|
-
import {
|
|
10
|
-
ConfigProvider,
|
|
11
|
-
purpleTheme,
|
|
12
|
-
Button,
|
|
13
|
-
IconFont,
|
|
14
|
-
IconButton,
|
|
15
|
-
} from '@agentscope-ai/design';
|
|
16
|
-
import { Flex } from 'antd';
|
|
17
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
18
|
-
import { useState } from 'react';
|
|
19
|
-
|
|
20
|
-
const App = () => {
|
|
21
|
-
const prefix = 'sps';
|
|
22
|
-
const iconSymbol = 'spark-effciency-line';
|
|
23
|
-
const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
|
|
24
|
-
return (
|
|
25
|
-
<ConfigProvider
|
|
26
|
-
{...purpleTheme}
|
|
27
|
-
prefix={prefix}
|
|
28
|
-
prefixCls={prefix}
|
|
29
|
-
iconfont={iconfont}
|
|
30
|
-
locale={zhCN}
|
|
31
|
-
style={{
|
|
32
|
-
width: '100%',
|
|
33
|
-
height: '100%',
|
|
34
|
-
}}
|
|
35
|
-
>
|
|
36
|
-
<Flex
|
|
37
|
-
style={{
|
|
38
|
-
width: '100%',
|
|
39
|
-
height: '100%',
|
|
40
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
41
|
-
}}
|
|
42
|
-
justify="center"
|
|
43
|
-
align="center"
|
|
44
|
-
>
|
|
45
|
-
<Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
|
|
46
|
-
<Flex gap={8}>
|
|
47
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
|
|
48
|
-
<IconFont type={iconSymbol} />
|
|
49
|
-
</Flex>
|
|
50
|
-
<Flex gap={8}>
|
|
51
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
|
|
52
|
-
<Button type="primary" iconType={iconSymbol}>
|
|
53
|
-
添加用户
|
|
54
|
-
</Button>
|
|
55
|
-
</Flex>
|
|
56
|
-
<Flex gap={8}>
|
|
57
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>
|
|
58
|
-
IconButton:
|
|
59
|
-
</div>
|
|
60
|
-
<IconButton iconType={iconSymbol}></IconButton>
|
|
61
|
-
</Flex>
|
|
62
|
-
</Flex>
|
|
63
|
-
</Flex>
|
|
64
|
-
</ConfigProvider>
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export default App;
|
|
69
|
-
```
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<div align="center"><a name="readme-top"></a>
|
|
4
|
-
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
5
|
-
<h1>Alibaba Cloud Spark Design</h1>
|
|
6
|
-
</div>
|
|
7
|
-
|
|
8
|
-
# 概述
|
|
9
|
-
|
|
10
|
-
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库,包含丰富的基础组件和场景组件,专为构建优秀的 LLM 产品而设计。
|
|
11
|
-
<br />
|
|
12
|
-
<br />
|
|
13
|
-
|
|
14
|
-
## ✨ 特性
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design,兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
18
|
-
- 🛡 使用 TypeScript 编写,具有可预测的静态类型。
|
|
19
|
-
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
20
|
-
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用,构建企业级 LLM 应用。
|
|
21
|
-
- 🎨 多种预设主题。
|
|
22
|
-
- ☀️ 轻松切换明暗模式。
|
|
23
|
-
|
|
24
|
-
## 📦 安装
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
## Tree Shaking 支持
|
|
33
|
-
|
|
34
|
-
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
35
|
-
|
|
36
|
-
## TypeScript
|
|
37
|
-
|
|
38
|
-
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
39
|
-
|
|
40
|
-
## 内置主题
|
|
41
|
-
|
|
42
|
-
我们提供四种内置主题:
|
|
43
|
-
|
|
44
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
45
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme(暗色模式)</div>
|
|
46
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
47
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme(暗色模式)</div>
|
|
48
|
-
|
|
49
|
-
## 🏗️ 开源
|
|
50
|
-
|
|
51
|
-
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源,预计将在 2025 年底完成。目前,您可以通过 npm 访问我们的项目。
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
## 内置主题
|
|
4
|
-
|
|
5
|
-
Alibaba Cloud Spark Design 提供四种内置主题:
|
|
6
|
-
|
|
7
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
8
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme(暗色模式)</div>
|
|
9
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
10
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme(暗色模式)</div>
|
|
11
|
-
|
|
12
|
-
### 示例用法
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
17
|
-
|
|
18
|
-
const App = () => {
|
|
19
|
-
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export default App;
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
## 从 Antd token 生成您自己的主题
|
|
27
|
-
|
|
28
|
-
如果您已经有了 Antd 主题,仍然可以使用 generateThemeByToken 生成 spark 风格的主题
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
```tsx
|
|
32
|
-
import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
|
|
33
|
-
const yourToken = {
|
|
34
|
-
borderRadiusXS: 2,
|
|
35
|
-
borderRadiusSM: 4,
|
|
36
|
-
borderRadius: 6,
|
|
37
|
-
borderRadiusLG: 8,
|
|
38
|
-
borderRadiusXL: 12,
|
|
39
|
-
borderRadiusFull: 999,
|
|
40
|
-
wireframe: false,
|
|
41
|
-
colorPrimaryBg: '#F2F0FF',
|
|
42
|
-
colorPrimaryBgHover: '#F2F0FF',
|
|
43
|
-
colorPrimaryBorder: '#E2DEFF',
|
|
44
|
-
colorPrimaryBorderHover: '#BCB5FF',
|
|
45
|
-
// ... 您可以在下一个文档中找到完整版本的 tokens:Tokens 和 CSS 变量
|
|
46
|
-
};
|
|
47
|
-
const darkMode = false;
|
|
48
|
-
const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
|
|
49
|
-
const App = () => {
|
|
50
|
-
return (
|
|
51
|
-
<ConfigProvider {...yourThemeWithSparkStyle}>
|
|
52
|
-
Hello Spark Design!
|
|
53
|
-
</ConfigProvider>
|
|
54
|
-
);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export default App;
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
您仍然可以修改生成的主题:`yourThemeWithSparkStyle`,但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
|