@agentscope-ai/design 1.0.15 → 1.0.16

package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt

@@ -0,0 +1,111 @@
+
+
+<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
+#### API
+
+<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
+
+
+## antd API
+
+
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+
+```jsx
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
+```
+
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 | 
+| autoFocus | 自动获取焦点 | boolean | false |  | 
+| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 | 
+| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 | 
+| className | 选择器类名 | string | - |  | 
+| defaultValue | 默认时间 |  | - |  | 
+| disabled | 禁用全部操作 | boolean | false |  | 
+| disabledTime | 不可选择的时间 |  | - | 4.19.0 | 
+| format | 展示的时间格式 | string | HH:mm:ss |  | 
+| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  | 
+| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  | 
+| hourStep | 小时选项间隔 | number | 1 |  | 
+| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  | 
+| minuteStep | 分钟选项间隔 | number | 1 |  | 
+| needConfirm | 是否需要确认按钮，为  | boolean | - | 5.14.0 | 
+| open | 面板是否打开 | boolean | false |  | 
+| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 |  | 
+| placement | 选择框弹出的位置 | bottomLeft | bottomLeft |  | 
+| popupClassName | 弹出层类名 | string | - |  | 
+| popupStyle | 弹出层样式对象 | object | - |  | 
+| prefix | 自定义前缀 | ReactNode | - | 5.22.0 | 
+| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  | 
+| secondStep | 秒选项间隔 | number | 1 |  | 
+| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | 
+| size | 输入框大小， | large | - |  | 
+| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | 
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  | 
+| use12Hours | 使用 12 小时制，为 true 时  | boolean | false |  | 
+| value | 当前时间 |  | - |  | 
+| variant | 形态变体 | outlined | outlined | 5.13.0 \|  | 
+| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - |  | 
+| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  | 
+| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  | 
+
+
+#### DisabledTime
+
+
+```typescript
+type DisabledTime = (now: Dayjs) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+  disabledMilliseconds?: (
+    selectedHour: number,
+    selectedMinute: number,
+    selectedSecond: number,
+  ) => number[];
+};
+```
+
+
+注意：`disabledMilliseconds` 为 `5.14.0` 新增。
+
+## 方法
+
+| 名称 | 描述 | 版本 | 
+|--------|--------|--------|
+| blur() | 移除焦点 |  | 
+| focus() | 获取焦点 |  | 
+
+
+## RangePicker
+
+属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| disabledTime | 不可选择的时间 |  | - | 4.19.0 | 
+| order | 始末时间是否自动排序 | boolean | true | 4.1.0 | 
+
+
+### RangeDisabledTime
+
+
+```typescript
+type RangeDisabledTime = (
+  now: Dayjs,
+  type = 'start' | 'end',
+) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```

package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt

@@ -0,0 +1,44 @@
+
+
+<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
+#### API
+
+| 属性名 | 描述 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| mode | 颜色模式 | 'dark' \| 'light' | 'light' | 
+
+
+<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+| 参数 | 说明 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| title | 提示文字 | ReactNode \| () => ReactNode | - | 
+
+
+### 共同的 API
+
+以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
+
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| align | 该值将合并到 placement 的配置中，设置参考  | object | - |  | 
+| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 | 
+| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  | 
+| color | 背景颜色 | string | - | 4.3.0 | 
+| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 | 
+| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 | 
+| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 | 
+| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  | 
+| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  | 
+| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |  | 
+| placement | 气泡框位置，可选  | string | top |  | 
+| trigger | 触发行为，可选  | string \| string[] | hover |  | 
+| open | 用于手动控制浮层显隐，小于 4.23.0 使用  | boolean | false | 4.23.0 | 
+| zIndex | 设置 Tooltip 的  | number | - |  | 
+| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 | 

package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt

@@ -0,0 +1,95 @@
+
+
+<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
+#### API
+
+<AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
+
+
+## antd API
+
+通用属性参考：[通用属性](/docs/react/common-props)
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| accept | 接受上传的文件类型，详见  | string | - |  | 
+| action | 上传的地址 | string \| (file) => Promise | - |  | 
+| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回  | (file, fileList) => boolean \| Promise \|  | - |  | 
+| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - |  | 
+| data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => object \| Promise | - |  | 
+| defaultFileList | 默认已经上传的文件列表 | object[] | - |  | 
+| directory | 支持上传文件夹（ | boolean | false |  | 
+| disabled | 是否禁用 | boolean | false | 对于自定义 Upload children 时请将 disabled 属性同时传给 child node 确保 disabled 渲染效果保持一致 | 
+| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到  |  | - |  | 
+| headers | 设置上传的请求头部，IE10 以上有效 | object | - |  | 
+| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  | 
+| isImageUrl | 自定义缩略图是否使用  标签进行显示 | (file: UploadFile) => boolean |  |  | 
+| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 | 
+| listType | 上传列表的内建样式，支持四种基本样式  | string | text | picture-circle | 
+| maxCount | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件 | number | - | 4.10.0 | 
+| method | 上传请求的 http method | string | post |  | 
+| multiple | 是否支持多选文件， | boolean | false |  | 
+| name | 发到后台的文件参数名 | string | file |  | 
+| openFileDialogOnClick | 点击打开文件对话框 | boolean | true |  | 
+| pastable | 是否支持粘贴文件 | boolean | false | 5.25.0 | 
+| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise | - |  | 
+| progress | 自定义进度条样式 |  | { strokeWidth: 2, showInfo: false } | 4.3.0 | 
+| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定  | boolean \| { extra?: ReactNode \| (file: UploadFile) => ReactNode, showPreviewIcon?: boolean \| (file: UploadFile) => boolean, showDownloadIcon?: boolean \| (file: UploadFile) => boolean, showRemoveIcon?: boolean \| (file: UploadFile) => boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | extra | 
+| withCredentials | 上传请求时是否携带 cookie | boolean | false |  | 
+| onChange | 上传文件改变时的回调，上传每个阶段都会触发该事件。详见  | function | - |  | 
+| onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 | 
+| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |  | 
+| onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |  | 
+| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除               | function(file): boolean \| Promise | -   |  | 
+
+
+### UploadFile
+
+继承自 File，附带额外属性用于渲染。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 
+|--------|--------|--------|--------|--------|
+| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.20.0 | 
+| name | 文件名 | string | - | - | 
+| percent | 上传进度 | number | - | - | 
+| status | 上传状态，不同状态展示颜色也会有所不同 | error | - | - | 
+| thumbUrl | 缩略图地址 | string | - | - | 
+| uid | 唯一标识符，不设置时会自动生成 | string | - | - | 
+| url | 下载地址 | string | - | - | 
+
+
+### onChange
+
+💡 上传中、完成、失败都会调用这个函数。
+
+文件状态改变的回调，返回为：
+
+
+```jsx
+{
+  file: { /* ... */ },
+  fileList: [ /* ... */ ],
+  event: { /* ... */ },
+}
+```
+
+
+
+1. `file` 当前操作的文件对象。
+
+
+```jsx
+   {
+      uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
+      name: 'xx.png',   // 文件名
+      status: 'done' | 'uploading' | 'error' | 'removed' , //  beforeUpload 拦截的文件没有 status 状态属性
+      response: '{"status": "success"}', // 服务端响应内容
+      linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
+   }
+```
+
+
+
+2. `fileList` 当前的文件列表。
+
+3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

package/llms/components/commonComponents/Video/index.zh-CN.llms.txt

@@ -0,0 +1,7 @@
+
+
+<DemoTitle title="Video" desc="视频展示">
+#### API
+
+<AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
+

package/llms/docs/guide/fromAntd.zh-CN.llms.txt

@@ -0,0 +1,156 @@
+
+
+# 从 Antd 迁移
+
+## 📦 安装
+
+
+```bash
+$ npm install @agentscope-ai/icons @agentscope-ai/design --save
+```
+
+
+## 🔨 使用
+
+从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
+
+
+```tsx
+import {
+  Button,
+  Image,
+  ConfigProvider,
+  purpleDarkTheme,
+  purpleTheme,
+} from '@agentscope-ai/design';
+import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
+import { Flex } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { useState } from 'react';
+
+const App = () => {
+  const [colorMode, setColorMode] = useState('light');
+  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
+
+  const prefix = 'sps';
+  return (
+    <ConfigProvider
+      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
+      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
+      prefixCls={prefix}
+      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
+      locale={zhCN} // 来自 Ant Design 的语言包
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: `var(--${prefix}-color-bg-base)`,
+        }}
+      >
+        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
+          <Image
+            width={120}
+            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
+          />
+          <div
+            style={{
+              color: `var(--${prefix}-ant-color-text-base)`,
+              fontSize: '24px',
+              textAlign: 'center',
+            }}
+          >
+            Hello Spark Design!
+          </div>
+          <Button
+            type="primary"
+            onClick={() => {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }}
+            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
+          >
+            {colorMode === 'light' ? '暗色' : '亮色'} 模式
+          </Button>
+        </Flex>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```
+
+
+如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
+
+
+```tsx
+import {
+  ConfigProvider,
+  purpleDarkTheme,
+  purpleTheme,
+} from '@agentscope-ai/design';
+import { Button, Image, Flex } from 'antd';
+import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
+import zhCN from 'antd/locale/zh_CN';
+import { useState } from 'react';
+
+const App = () => {
+  const [colorMode, setColorMode] = useState('light');
+  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
+
+  const prefix = 'sps';
+  return (
+    <ConfigProvider
+      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
+      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
+      prefixCls={prefix}
+      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
+      locale={zhCN} // 来自 Ant Design 的语言包
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: `var(--${prefix}-color-bg-base)`,
+        }}
+      >
+        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
+          <Image
+            width={120}
+            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
+          />
+          <div
+            style={{
+              color: `var(--${prefix}-ant-color-text-base)`,
+              fontSize: '24px',
+              textAlign: 'center',
+            }}
+          >
+            Hello Spark Design!
+          </div>
+          <Button
+            type="primary"
+            onClick={() => {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }}
+            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
+          >
+            {colorMode === 'light' ? '暗色' : '亮色'} 模式
+          </Button>
+        </Flex>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```

package/llms/docs/guide/fromScratch.zh-CN.llms.txt

@@ -0,0 +1,83 @@
+
+
+# 从零开始使用
+
+## 📦 安装
+
+
+```bash
+$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
+```
+
+
+## 🔨 使用
+
+
+```tsx
+import {
+  Button,
+  Image,
+  ConfigProvider,
+  purpleDarkTheme,
+  purpleTheme,
+} from '@agentscope-ai/design';
+import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
+import { Flex } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { useState } from 'react';
+
+const App = () => {
+  const [colorMode, setColorMode] = useState('light');
+  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
+
+  const prefix = 'sps';
+  return (
+    <ConfigProvider
+      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
+      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
+      prefixCls={prefix}
+      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
+      locale={zhCN} // 来自 Ant Design 的语言包
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: `var(--${prefix}-color-bg-base)`,
+        }}
+      >
+        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
+          <Image
+            width={120}
+            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
+          />
+          <div
+            style={{
+              color: `var(--${prefix}-ant-color-text-base)`,
+              fontSize: '24px',
+              textAlign: 'center',
+            }}
+          >
+            Hello Spark Design!
+          </div>
+          <Button
+            type="primary"
+            onClick={() => {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }}
+            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
+          >
+            {colorMode === 'light' ? '暗色' : '亮色'} 模式
+          </Button>
+        </Flex>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```

package/llms/docs/guide/iconfont.zh-CN.llms.txt

@@ -0,0 +1,69 @@
+
+
+# 使用
+
+如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
+
+
+```tsx
+import {
+  ConfigProvider,
+  purpleTheme,
+  Button,
+  IconFont,
+  IconButton,
+} from '@agentscope-ai/design';
+import { Flex } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { useState } from 'react';
+
+const App = () => {
+  const prefix = 'sps';
+  const iconSymbol = 'spark-effciency-line';
+  const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
+  return (
+    <ConfigProvider
+      {...purpleTheme}
+      prefix={prefix}
+      prefixCls={prefix}
+      iconfont={iconfont}
+      locale={zhCN}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <Flex
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: `var(--${prefix}-color-bg-base)`,
+        }}
+        justify="center"
+        align="center"
+      >
+        <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
+          <Flex gap={8}>
+            <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
+            <IconFont type={iconSymbol} />
+          </Flex>
+          <Flex gap={8}>
+            <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
+            <Button type="primary" iconType={iconSymbol}>
+              添加用户
+            </Button>
+          </Flex>
+          <Flex gap={8}>
+            <div style={{ width: '100px', lineHeight: '32px' }}>
+              IconButton:
+            </div>
+            <IconButton iconType={iconSymbol}></IconButton>
+          </Flex>
+        </Flex>
+      </Flex>
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```

package/llms/docs/guide/overview.zh-CN.llms.txt

@@ -0,0 +1,51 @@
+
+
+<div align="center"><a name="readme-top"></a>
+  <img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
+  <h1>Alibaba Cloud Spark Design</h1>
+</div>
+
+# 概述
+
+Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
+<br />
+<br />
+
+## ✨ 特性
+
+
+- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
+- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
+- 🧠 为 LLM 产品设计的各种场景组件。
+- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
+- 🎨 多种预设主题。
+- ☀️ 轻松切换明暗模式。
+
+## 📦 安装
+
+
+```bash
+npm install antd @agentscope-ai/icons @agentscope-ai/design --save
+```
+
+
+## Tree Shaking 支持
+
+@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
+
+## TypeScript
+
+@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
+
+## 内置主题
+
+我们提供四种内置主题：
+
+<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
+<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
+<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
+<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
+
+## 🏗️ 开源
+
+[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。

package/llms/docs/guide/sparkIcons.zh-CN.llms.txt

@@ -0,0 +1,25 @@
+
+
+# 使用
+
+
+
+```tsx
+import { SparkLoadingLine } from '@agentscope-ai/icons';
+
+export default () => {
+  return (
+    <SparkLoadingLine
+      className="your-class-name"
+      style={{ color: 'var(--sps-color-primary)' }}
+      spin
+      size={48}
+    />
+  );
+};
+
+```
+
+基本用法
+
+访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon