@agentscope-ai/design 1.0.26-beta.1769162388973 → 1.0.26
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/components/commonComponents/Audio/Control.style.js +1 -1
- package/lib/index.d.ts +8 -9
- package/lib/index.js +6 -7
- package/llms/all.llms.txt +1695 -1122
- package/llms/docs/changelog/index.zh-CN.llms.txt +0 -9
- package/llms/docs/guide/iconLibrary.zh-CN.llms.txt +150 -0
- package/llms/docs/icons/sparkIcons.zh-CN.llms.txt +25 -0
- package/llms/index.llms.txt +24 -20
- package/package.json +1 -1
- package/lib/components/commonComponents/MediaPreview/demo/demo1.d.ts +0 -1
- package/lib/components/commonComponents/MediaPreview/demo/demo1.js +0 -44
- package/lib/components/commonComponents/MediaPreview/index.d.ts +0 -23
- package/lib/components/commonComponents/MediaPreview/index.js +0 -352
- package/lib/components/commonComponents/MediaPreview/index.style.d.ts +0 -1
- package/lib/components/commonComponents/MediaPreview/index.style.js +0 -54
- package/llms/components/commonComponents/MediaPreview/index.zh-CN.llms.txt +0 -21
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
# Icon Library
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import React, { useMemo, useState } from 'react';
|
|
9
|
+
import * as SparkIcons from '@agentscope-ai/icons';
|
|
10
|
+
import { Input, Radio, message, copy } from '@agentscope-ai/design';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Icons Library
|
|
14
|
+
* - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
|
|
15
|
+
* - 支持搜索、点击复制
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
interface IconItem {
|
|
19
|
+
/** 图标导出名称 */
|
|
20
|
+
name: string;
|
|
21
|
+
/** 图标 React 组件 */
|
|
22
|
+
Icon: React.ComponentType<any>;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
type CopyMode = 'name' | 'import' | 'jsx';
|
|
26
|
+
|
|
27
|
+
const GRID_STYLE: React.CSSProperties = {
|
|
28
|
+
display: 'grid',
|
|
29
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
30
|
+
gap: 12,
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const CARD_STYLE: React.CSSProperties = {
|
|
34
|
+
padding: 12,
|
|
35
|
+
borderRadius: 8,
|
|
36
|
+
cursor: 'pointer',
|
|
37
|
+
border: '1px solid var(--sps-color-border-secondary)',
|
|
38
|
+
background: 'var(--sps-color-bg-base)',
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const NAME_STYLE: React.CSSProperties = {
|
|
42
|
+
marginTop: 8,
|
|
43
|
+
fontSize: 12,
|
|
44
|
+
lineHeight: '16px',
|
|
45
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
46
|
+
overflow: 'hidden',
|
|
47
|
+
textOverflow: 'ellipsis',
|
|
48
|
+
whiteSpace: 'nowrap',
|
|
49
|
+
width: '100%',
|
|
50
|
+
fontFamily:
|
|
51
|
+
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export default function IconLibrary() {
|
|
55
|
+
const [keyword, setKeyword] = useState<string>('');
|
|
56
|
+
const [copyMode, setCopyMode] = useState<CopyMode>('name');
|
|
57
|
+
|
|
58
|
+
const allIcons = useMemo<IconItem[]>(() => {
|
|
59
|
+
return Object.entries(SparkIcons)
|
|
60
|
+
.filter(([name, Icon]) => {
|
|
61
|
+
if (!name.startsWith('Spark')) return false;
|
|
62
|
+
return typeof Icon === 'function';
|
|
63
|
+
})
|
|
64
|
+
.map(([name, Icon]) => ({
|
|
65
|
+
name,
|
|
66
|
+
Icon: Icon as React.ComponentType<any>,
|
|
67
|
+
}))
|
|
68
|
+
.sort((a, b) => a.name.localeCompare(b.name));
|
|
69
|
+
}, []);
|
|
70
|
+
|
|
71
|
+
const filteredIcons = useMemo<IconItem[]>(() => {
|
|
72
|
+
const q = keyword.trim().toLowerCase();
|
|
73
|
+
if (!q) return allIcons;
|
|
74
|
+
return allIcons.filter((item) => item.name.toLowerCase().includes(q));
|
|
75
|
+
}, [allIcons, keyword]);
|
|
76
|
+
|
|
77
|
+
const handleCopy = (item: IconItem) => {
|
|
78
|
+
let text = item.name;
|
|
79
|
+
if (copyMode === 'import') {
|
|
80
|
+
text = `import { ${item.name} } from '@agentscope-ai/icons';`;
|
|
81
|
+
}
|
|
82
|
+
if (copyMode === 'jsx') {
|
|
83
|
+
text = `<${item.name} style={{ fontSize: 24 }} />`;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
copy(text);
|
|
87
|
+
message.success('已复制');
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
return (
|
|
91
|
+
<div style={{ padding: 16 }}>
|
|
92
|
+
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
|
93
|
+
<Input
|
|
94
|
+
placeholder="搜索图标（按导出名）"
|
|
95
|
+
value={keyword}
|
|
96
|
+
onChange={(e) => setKeyword((e?.target as any)?.value || '')}
|
|
97
|
+
style={{ maxWidth: 360 }}
|
|
98
|
+
allowClear
|
|
99
|
+
/>
|
|
100
|
+
<Radio.Group
|
|
101
|
+
value={copyMode}
|
|
102
|
+
onChange={(e) => setCopyMode(e.target.value)}
|
|
103
|
+
optionType="button"
|
|
104
|
+
buttonStyle="solid"
|
|
105
|
+
options={[
|
|
106
|
+
{ label: '复制名称', value: 'name' },
|
|
107
|
+
{ label: '复制 import', value: 'import' },
|
|
108
|
+
{ label: '复制 JSX', value: 'jsx' },
|
|
109
|
+
]}
|
|
110
|
+
/>
|
|
111
|
+
<div style={{ color: 'var(--sps-color-text-tertiary)', fontSize: 12 }}>
|
|
112
|
+
共 {filteredIcons.length} 个
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div style={{ marginTop: 16, ...GRID_STYLE }}>
|
|
117
|
+
{filteredIcons.map((item) => {
|
|
118
|
+
const Icon = item.Icon;
|
|
119
|
+
return (
|
|
120
|
+
<div
|
|
121
|
+
key={item.name}
|
|
122
|
+
style={CARD_STYLE}
|
|
123
|
+
onClick={() => handleCopy(item)}
|
|
124
|
+
>
|
|
125
|
+
<div
|
|
126
|
+
style={{
|
|
127
|
+
width: 48,
|
|
128
|
+
height: 48,
|
|
129
|
+
display: 'flex',
|
|
130
|
+
alignItems: 'center',
|
|
131
|
+
justifyContent: 'center',
|
|
132
|
+
}}
|
|
133
|
+
>
|
|
134
|
+
<Icon style={{ fontSize: 24 }} />
|
|
135
|
+
</div>
|
|
136
|
+
<div style={NAME_STYLE} title={item.name}>
|
|
137
|
+
{item.name}
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
);
|
|
141
|
+
})}
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
查看全部图标
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
# 使用
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
9
|
+
|
|
10
|
+
export default () => {
|
|
11
|
+
return (
|
|
12
|
+
<SparkLoadingLine
|
|
13
|
+
className="your-class-name"
|
|
14
|
+
style={{ color: 'var(--sps-color-primary)' }}
|
|
15
|
+
spin
|
|
16
|
+
size={48}
|
|
17
|
+
/>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
基本用法
|
|
24
|
+
|
|
25
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
package/llms/index.llms.txt
CHANGED
|
@@ -1,49 +1,53 @@
|
|
|
1
1
|
# 索引
|
|
2
2
|
|
|
3
|
+
- [](components/commonComponents/Video/index.zh-CN.llms.txt)
|
|
3
4
|
- [](components/commonComponents/Upload/index.zh-CN.llms.txt)
|
|
4
5
|
- [](components/commonComponents/Tooltip/index.zh-CN.llms.txt)
|
|
5
|
-
- [](components/commonComponents/
|
|
6
|
-
- [](components/commonComponents/TimePicker/index.zh-CN.llms.txt)
|
|
6
|
+
- [](components/commonComponents/Table/index.zh-CN.llms.txt)
|
|
7
7
|
- [](components/commonComponents/Tag/index.zh-CN.llms.txt)
|
|
8
8
|
- [](components/commonComponents/Tabs/index.zh-CN.llms.txt)
|
|
9
9
|
- [](components/commonComponents/Switch/index.zh-CN.llms.txt)
|
|
10
|
-
- [](components/commonComponents/
|
|
10
|
+
- [](components/commonComponents/TimePicker/index.zh-CN.llms.txt)
|
|
11
11
|
- [](components/commonComponents/Steps/index.zh-CN.llms.txt)
|
|
12
|
-
- [](components/commonComponents/Spinner/index.zh-CN.llms.txt)
|
|
13
12
|
- [](components/commonComponents/Statistic/index.zh-CN.llms.txt)
|
|
13
|
+
- [](components/commonComponents/Spinner/index.zh-CN.llms.txt)
|
|
14
14
|
- [](components/commonComponents/Slider/index.zh-CN.llms.txt)
|
|
15
15
|
- [](components/commonComponents/Skeleton/index.zh-CN.llms.txt)
|
|
16
|
-
- [](components/commonComponents/Select/index.zh-CN.llms.txt)
|
|
17
16
|
- [](components/commonComponents/RadioButton/index.zh-CN.llms.txt)
|
|
17
|
+
- [](components/commonComponents/Select/index.zh-CN.llms.txt)
|
|
18
18
|
- [](components/commonComponents/Result/index.zh-CN.llms.txt)
|
|
19
|
-
- [](components/commonComponents/Radio/index.zh-CN.llms.txt)
|
|
20
19
|
- [](components/commonComponents/Progress/index.zh-CN.llms.txt)
|
|
20
|
+
- [](components/commonComponents/Radio/index.zh-CN.llms.txt)
|
|
21
|
+
- [](components/commonComponents/PromptsEditor/index.zh-CN.llms.txt)
|
|
21
22
|
- [](components/commonComponents/Popover/index.zh-CN.llms.txt)
|
|
22
23
|
- [](components/commonComponents/Popconfirm/index.zh-CN.llms.txt)
|
|
23
|
-
- [](components/commonComponents/Modal/index.zh-CN.llms.txt)
|
|
24
|
-
- [](components/commonComponents/MediaPreview/index.zh-CN.llms.txt)
|
|
25
|
-
- [](components/commonComponents/Message/index.zh-CN.llms.txt)
|
|
26
24
|
- [](components/commonComponents/Pagination/index.zh-CN.llms.txt)
|
|
27
25
|
- [](components/commonComponents/Notification/index.zh-CN.llms.txt)
|
|
26
|
+
- [](components/commonComponents/Modal/index.zh-CN.llms.txt)
|
|
27
|
+
- [](components/commonComponents/Message/index.zh-CN.llms.txt)
|
|
28
28
|
- [](components/commonComponents/InputNumber/index.zh-CN.llms.txt)
|
|
29
|
-
- [](components/commonComponents/PromptsEditor/index.zh-CN.llms.txt)
|
|
30
29
|
- [](components/commonComponents/Image/index.zh-CN.llms.txt)
|
|
31
|
-
- [](components/commonComponents/IconButton/index.zh-CN.llms.txt)
|
|
32
30
|
- [](components/commonComponents/Input/index.zh-CN.llms.txt)
|
|
31
|
+
- [](components/commonComponents/IconButton/index.zh-CN.llms.txt)
|
|
33
32
|
- [](components/commonComponents/Form/index.zh-CN.llms.txt)
|
|
34
|
-
- [](components/commonComponents/
|
|
33
|
+
- [](components/commonComponents/FloatButton/index.zh-CN.llms.txt)
|
|
35
34
|
- [](components/commonComponents/Dropdown/index.zh-CN.llms.txt)
|
|
36
35
|
- [](components/commonComponents/Empty/index.zh-CN.llms.txt)
|
|
37
|
-
- [](components/commonComponents/FloatButton/index.zh-CN.llms.txt)
|
|
38
|
-
- [](components/commonComponents/Drawer/index.zh-CN.llms.txt)
|
|
39
|
-
- [](components/commonComponents/CollapsePanel/index.zh-CN.llms.txt)
|
|
40
36
|
- [](components/commonComponents/Descriptions/index.zh-CN.llms.txt)
|
|
37
|
+
- [](components/commonComponents/FileIcon/index.zh-CN.llms.txt)
|
|
41
38
|
- [](components/commonComponents/DatePicker/index.zh-CN.llms.txt)
|
|
42
|
-
- [](components/commonComponents/
|
|
43
|
-
- [](components/commonComponents/
|
|
44
|
-
- [](components/commonComponents/Card/index.zh-CN.llms.txt)
|
|
39
|
+
- [](components/commonComponents/Drawer/index.zh-CN.llms.txt)
|
|
40
|
+
- [](components/commonComponents/CollapsePanel/index.zh-CN.llms.txt)
|
|
45
41
|
- [](components/commonComponents/Checkbox/index.zh-CN.llms.txt)
|
|
46
|
-
- [](components/commonComponents/
|
|
42
|
+
- [](components/commonComponents/CodeBlock/index.zh-CN.llms.txt)
|
|
43
|
+
- [](components/commonComponents/Collapse/index.zh-CN.llms.txt)
|
|
47
44
|
- [](components/commonComponents/Button/index.zh-CN.llms.txt)
|
|
48
45
|
- [](components/commonComponents/Breadcrumb/index.zh-CN.llms.txt)
|
|
49
|
-
- [](components/commonComponents/
|
|
46
|
+
- [](components/commonComponents/Card/index.zh-CN.llms.txt)
|
|
47
|
+
- [](components/commonComponents/Avatar/index.zh-CN.llms.txt)
|
|
48
|
+
- [](components/commonComponents/Audio/index.zh-CN.llms.txt)
|
|
49
|
+
- [](components/commonComponents/Anchor/index.zh-CN.llms.txt)
|
|
50
|
+
- [](components/commonComponents/AlertDialog/index.zh-CN.llms.txt)
|
|
51
|
+
- [](components/commonComponents/Alert/index.zh-CN.llms.txt)
|
|
52
|
+
- [使用](docs/guide/sparkIcons.zh-CN.llms.txt)
|
|
53
|
+
- [Icon Library](docs/icons/iconLibrary.zh-CN.llms.txt)
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function (): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import { Button, MediaPreview } from "../../../..";
|
|
8
|
-
import { useState } from 'react';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
var mediaList = [{
|
|
13
|
-
type: 'image',
|
|
14
|
-
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
15
|
-
alt: 'Image 1'
|
|
16
|
-
}, {
|
|
17
|
-
type: 'video',
|
|
18
|
-
src: 'https://cloud.video.taobao.com/vod/MgaPySDXyyWMT4QM-CWYjX6BlVMGNei259qPTCCQ7ew.mp4',
|
|
19
|
-
alt: 'Video 1'
|
|
20
|
-
}, {
|
|
21
|
-
type: 'image',
|
|
22
|
-
src: 'https://img.alicdn.com/imgextra/i4/O1CN01LwpgZg1DJokMyCkBJ_!!6000000000196-2-tps-312-312.png',
|
|
23
|
-
alt: 'Image 2'
|
|
24
|
-
}];
|
|
25
|
-
export default function () {
|
|
26
|
-
var _useState = useState(false),
|
|
27
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
-
visible = _useState2[0],
|
|
29
|
-
setVisible = _useState2[1];
|
|
30
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
31
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
|
32
|
-
onClick: function onClick() {
|
|
33
|
-
return setVisible(true);
|
|
34
|
-
},
|
|
35
|
-
children: "Open Media Preview"
|
|
36
|
-
}), /*#__PURE__*/_jsx(MediaPreview, {
|
|
37
|
-
visible: visible,
|
|
38
|
-
mediaList: mediaList,
|
|
39
|
-
onClose: function onClose() {
|
|
40
|
-
return setVisible(false);
|
|
41
|
-
}
|
|
42
|
-
})]
|
|
43
|
-
});
|
|
44
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface MediaItem {
|
|
3
|
-
/** 媒体类型 */
|
|
4
|
-
type: 'image' | 'video';
|
|
5
|
-
/** 媒体资源地址 */
|
|
6
|
-
src: string;
|
|
7
|
-
/** 媒体替代文本 */
|
|
8
|
-
alt?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface MediaPreviewProps {
|
|
11
|
-
/** 自定义样式类名 */
|
|
12
|
-
className?: string;
|
|
13
|
-
/** 是否显示预览 */
|
|
14
|
-
visible: boolean;
|
|
15
|
-
/** 媒体列表 */
|
|
16
|
-
mediaList: MediaItem[];
|
|
17
|
-
/** 当前选中的索引 */
|
|
18
|
-
currentIndex?: number;
|
|
19
|
-
/** 关闭回调 */
|
|
20
|
-
onClose: () => void;
|
|
21
|
-
}
|
|
22
|
-
declare const MediaPreview: React.FC<MediaPreviewProps>;
|
|
23
|
-
export default MediaPreview;
|