@agentscope-ai/design 1.0.14 → 1.0.15

package/README.zh-CN.md

@@ -0,0 +1,312 @@
+# @agentscope-ai/design
+
+[![NPM version](https://img.shields.io/npm/v/@agentscope-ai/design.svg?style=flat)](https://npmjs.org/package/@agentscope-ai/design)
+[![NPM downloads](http://img.shields.io/npm/dm/@agentscope-ai/design.svg?style=flat)](https://npmjs.org/package/@agentscope-ai/design)
+
+AgentScope Spark Design - 阿里云飞天实验室 UI 组件库
+
+## ✨ 特性
+
+- 🎨 基于 Ant Design 5 的自定义主题系统
+- 🔧 50+ 封装增强的 UI 组件
+- 📱 支持移动端组件
+- 🎯 自定义图标系统（@agentscope-ai/icons）
+- 🌐 国际化支持（中文/英文）
+- 📝 完整的 TypeScript 类型支持
+- 🎨 CSS-in-JS 样式方案（antd-style）
+
+## 📦 安装
+
+```bash
+# 使用 npm
+npm install @agentscope-ai/design antd --save
+
+# 使用 pnpm
+pnpm add @agentscope-ai/design antd
+
+# 使用 yarn
+yarn add @agentscope-ai/design antd
+```
+
+## 🚀 快速开始
+
+### 1. 配置图标覆盖
+
+为了让所有 antd 组件使用 Spark Design 的自定义图标，需要在项目的 `package.json` 中添加 overrides 配置：
+
+```json
+{
+  "dependencies": {
+    "@agentscope-ai/design": "^1.0.0",
+    "antd": "^5.18.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@ant-design/icons": "@agentscope-ai/icons-override-antd"
+    }
+  },
+  "overrides": {
+    "@ant-design/icons": "@agentscope-ai/icons-override-antd"
+  }
+}
+```
+
+配置完成后，**删除现有依赖并重新安装**：
+
+```bash
+rm -rf node_modules
+rm -f package-lock.json pnpm-lock.yaml yarn.lock
+npm install  # 或 pnpm install
+```
+
+### 2. 使用组件
+
+```tsx
+import { ConfigProvider, Button, Modal, carbonTheme } from '@agentscope-ai/design';
+
+function App() {
+  return (
+    <ConfigProvider {...carbonTheme}>
+      <Button type="primary">按钮</Button>
+      <Modal title="标题" open={false}>
+        内容
+      </Modal>
+    </ConfigProvider>
+  );
+}
+```
+
+## 📂 目录结构
+
+```
+spark-design/
+├── src/
+│   ├── antd/                          # antd 相关配置
+│   │   ├── styles/                    # 组件局部样式覆盖
+│   │   └── themes/                    # 主题配置
+│   │       ├── bailianTheme.json      # 百炼主题（亮色）
+│   │       ├── bailianDarkTheme.json  # 百炼主题（暗色）
+│   │       ├── carbonTheme.json       # Carbon 主题（亮色）
+│   │       └── carbonDarkTheme.json   # Carbon 主题（暗色）
+│   ├── components/
+│   │   ├── commonComponents/          # 通用组件（50+）
+│   │   │   ├── Alert/
+│   │   │   ├── Button/
+│   │   │   ├── Modal/
+│   │   │   ├── ...
+│   │   └── mobileComponents/          # 移动端组件
+│   │       ├── MobileModal/
+│   │       ├── MobileDrawer/
+│   │       └── MobileAlertDialog/
+│   ├── hooks/                         # 公共 Hooks
+│   │   └── useGlobalStyle/
+│   ├── libs/                          # 工具函数库
+│   │   ├── requestPop/                # POP 请求封装
+│   │   ├── requestSse/                # SSE 请求封装
+│   │   └── ...
+│   ├── i18n/                          # 国际化配置
+│   └── index.ts                       # 入口文件
+├── docs/                              # 文档
+└── package.json
+```
+
+## 🎨 主题系统
+
+### 预置主题
+
+```tsx
+import { 
+  ConfigProvider,
+  carbonTheme,        // Carbon 亮色主题
+  carbonDarkTheme,    // Carbon 暗色主题
+  bailianTheme,       // 百炼亮色主题
+  bailianDarkTheme,   // 百炼暗色主题
+} from '@agentscope-ai/design';
+
+// 使用 Carbon 主题
+<ConfigProvider {...carbonTheme}>
+  <App />
+</ConfigProvider>
+
+// 使用百炼暗色主题
+<ConfigProvider {...bailianDarkTheme}>
+  <App />
+</ConfigProvider>
+```
+
+### 自定义主题
+
+```tsx
+import { generateThemeByToken } from '@agentscope-ai/design';
+
+const customTheme = generateThemeByToken({
+  colorPrimary: '#1890ff',
+  borderRadius: 6,
+  // ... 更多 token
+});
+```
+
+## 📦 组件列表
+
+### 通用组件
+
+| 组件 | 描述 |
+| --- | --- |
+| `Button` | 按钮 |
+| `Modal` | 对话框 |
+| `Drawer` | 抽屉 |
+| `Input` | 输入框 |
+| `Select` | 选择器 |
+| `Form` | 表单 |
+| `Table` | 表格 |
+| `Tabs` | 标签页 |
+| `Tag` | 标签 |
+| `Tooltip` | 文字提示 |
+| `Popover` | 气泡卡片 |
+| `Popconfirm` | 气泡确认框 |
+| `message` | 全局提示 |
+| `notification` | 通知提醒框 |
+| `Empty` | 空状态 |
+| `Spinner` | 加载中 |
+| `Progress` | 进度条 |
+| `Steps` | 步骤条 |
+| `Pagination` | 分页 |
+| `Breadcrumb` | 面包屑 |
+| `Dropdown` | 下拉菜单 |
+| `Checkbox` | 多选框 |
+| `Radio` | 单选框 |
+| `RadioButton` | 单选按钮组 |
+| `Switch` | 开关 |
+| `Slider` | 滑动输入条 |
+| `DatePicker` | 日期选择器 |
+| `TimePicker` | 时间选择器 |
+| `Upload` | 上传 |
+| `Avatar` | 头像 |
+| `Badge` | 徽标 |
+| `Card` | 卡片 |
+| `Collapse` | 折叠面板 |
+| `Descriptions` | 描述列表 |
+| `Result` | 结果页 |
+| `Statistic` | 统计数值 |
+| `Alert` | 警告提示 |
+| `AlertDialog` | 警告对话框 |
+| `CodeBlock` | 代码块 |
+| `IconButton` | 图标按钮 |
+| `EllipsisTip` | 文本省略提示 |
+| `HelpIcon` | 帮助图标 |
+| `FileIcon` | 文件图标 |
+| `Video` | 视频播放器 |
+
+### 移动端组件
+
+| 组件 | 描述 |
+| --- | --- |
+| `MobileModal` | 移动端对话框 |
+| `MobileDrawer` | 移动端抽屉 |
+| `MobileAlertDialog` | 移动端警告对话框 |
+
+### Hooks
+
+| Hook | 描述 |
+| --- | --- |
+| `useGlobalStyle` | 全局样式 Hook |
+
+### 工具函数
+
+| 函数 | 描述 |
+| --- | --- |
+| `requestPop` | 阿里云 POP 请求封装 |
+| `requestPopSse` | POP SSE 请求封装 |
+| `requestSse` | SSE 请求封装 |
+| `delay` | 延迟函数 |
+| `copy` | 复制到剪贴板 |
+| `waitForDom` | 等待 DOM 元素 |
+| `waitForFunc` | 等待函数执行 |
+| `safeHtml` | 安全 HTML 处理 |
+| `base64Encoder` | Base64 编码 |
+| `base64Decoder` | Base64 解码 |
+| `parseJsonSafely` | 安全 JSON 解析 |
+
+## 🛠 配置说明
+
+### 包管理器兼容性
+
+- ✅ **npm**: 使用 `overrides` 字段
+- ✅ **pnpm**: 使用 `pnpm.overrides` 字段
+- ✅ **yarn**: 使用 `resolutions` 字段
+
+建议同时配置 `overrides` 和 `pnpm.overrides`，确保在不同包管理器下都能正常工作。
+
+### TypeScript 支持
+
+如果遇到类型错误，可以在 `tsconfig.json` 中添加路径映射：
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@ant-design/icons": ["node_modules/@agentscope-ai/icons-override-antd"]
+    }
+  }
+}
+```
+
+### Vite 配置
+
+```javascript
+// vite.config.js
+export default {
+  resolve: {
+    alias: {
+      '@ant-design/icons': '@agentscope-ai/icons-override-antd'
+    }
+  }
+}
+```
+
+### Lightning 配置
+
+```javascript
+// lightning.config.mts
+{
+  build: {
+    resolve: {
+      alias: {
+        '@ant-design/icons': path.resolve(
+          __dirname,
+          './node_modules/@agentscope-ai/icons-override-antd',
+        )
+      }
+    }
+  }
+}
+```
+
+## 🔧 故障排除
+
+### 图标未正确显示？
+
+1. **确认配置**：检查 `package.json` 中的 overrides 配置是否正确
+2. **清理依赖**：删除 `node_modules` 和锁文件后重新安装
+3. **检查版本**：确保使用兼容的 antd 版本 (^5.18.0)
+4. **构建工具**：检查是否需要额外的 alias 配置
+
+### 开发环境和生产环境表现不一致？
+
+这通常是缓存问题，尝试：
+- 清理构建缓存
+- 添加构建工具的 alias 配置
+- 确保 overrides 配置在所有环境中都生效
+
+## 📖 更新日志
+
+查看 [CHANGELOG.md](./CHANGELOG.md) 了解版本更新信息。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 许可证
+
+MIT
+

package/lib/antd/styles/alert.style.js

@@ -1,7 +1,13 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../libs/createStyle";
-export var useAlertStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-alert {\n  .", "-alert-close-icon {\n    font-size: 16px;\n    \n    .anticon-close {\n      color: var(--", "-color-text);\n    }\n  }\n}\n"])), function (p) {
+export var useAlertStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-alert {\n  .", "-alert-close-icon {\n    font-size: 16px;\n    \n    .anticon-close {\n      color: var(--", "-color-text);\n    }\n  }\n\n  .", "-alert-icon {\n    font-size: 15px;\n  }\n\n  &.", "-alert-with-description {\n    .", "-alert-icon {\n      display: inline-block;\n      line-height: 24px;\n      font-size: 15px;\n    }\n  }\n \n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/antd/styles/dropdown.style.js

@@ -1,7 +1,11 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../libs/createStyle";
-export var useDropdownStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-dropdown .", "-dropdown-menu {\n  box-shadow: var(--", "-box-shadow);\n  border: 1px solid var(--", "-color-border-secondary);\n  \n  .", "-dropdown-menu-item.", "-dropdown-menu-item-active.", "-dropdown-menu-item-danger:not(.", "-dropdown-menu-item-disabled) {\n    color: var(--", "-color-error);\n    background-color: var(--", "-color-error-bg-hover);\n  }\n  \n  .", "-dropdown-menu-title-content {\n    text-align: left;\n  }\n}\n"])), function (p) {
+export var useDropdownStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-dropdown .", "-dropdown-menu {\n  box-shadow: var(--", "-box-shadow);\n  border: 1px solid var(--", "-color-border-secondary);\n  \n  .", "-dropdown-menu-item.", "-dropdown-menu-item-active.", "-dropdown-menu-item-danger:not(.", "-dropdown-menu-item-disabled) {\n    color: var(--", "-color-error);\n    background-color: var(--", "-color-error-bg-hover);\n  }\n\n  .", "-dropdown-menu-item:hover {\n    background-color: var(--", "-color-fill-tertiary);\n  }\n  \n  .", "-dropdown-menu-title-content {\n    text-align: left;\n  }\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/antd/styles/select.style.js

@@ -1,7 +1,15 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../libs/createStyle";
-export var useSelectStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-select-dropdown {\n  border: 1px solid var(--", "-color-border-secondary);\n  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);\n  border-radius: var(--", "-border-radius);\n}\n\n.", "-select-outlined:not(.", "-select-customize-input) .", "-select-selector {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-select .", "-select-arrow {\n  color: var(--", "-color-text-secondary);\n}\n\n.", "-select-outlined.", "-select-multiple {\n  .", "-select-selection-item {\n    border-radius: 4px;\n    background-color: var(--", "-color-mauve-bg);\n  }\n}\n\n.", "-select-selection-overflow {\n  color: var(--", "-color-mauve);\n  \n  .", "-select-selection-item-remove {\n    .anticon-close {\n      font-size: 14px;\n      color: var(--", "-color-mauve);\n    }\n  }\n}\n\n.", "-select-disabled.", "-select-multiple .", "-select-selection-overflow .", "-select-selection-item {\n  color: var(--", "-color-mauve);\n}\n\n.", "-select .", "-select-selection-placeholder {\n  color: var(--", "-color-text-tertiary);\n}\n"])), function (p) {
+export var useSelectStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-select-dropdown {\n  border: 1px solid var(--", "-color-border-secondary);\n  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);\n  border-radius: var(--", "-border-radius);\n\n  .", "-select-item-option-active,\n  .", "-select-item-option-active:not(.", "-select-item-option-disabled) {\n    background-color: var(--", "-color-fill-tertiary);\n  }\n}\n\n.", "-select-outlined:not(.", "-select-customize-input) .", "-select-selector {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-select .", "-select-arrow {\n  color: var(--", "-color-text-secondary);\n}\n\n.", "-select-outlined.", "-select-multiple {\n  .", "-select-selection-item {\n    border-radius: 4px;\n    background-color: var(--", "-color-mauve-bg);\n  }\n}\n\n.", "-select-selection-overflow {\n  color: var(--", "-color-mauve);\n  \n  .", "-select-selection-item-remove {\n    .anticon-close {\n      font-size: 14px;\n      color: var(--", "-color-mauve);\n    }\n  }\n}\n\n.", "-select-disabled.", "-select-multiple .", "-select-selection-overflow .", "-select-selection-item {\n  color: var(--", "-color-mauve);\n}\n\n.", "-select .", "-select-selection-placeholder {\n  color: var(--", "-color-text-tertiary);\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/Alert/demo/demo2.js

@@ -22,6 +22,11 @@ export default (function () {
       type: "warning",
       message: "I am a description of a component.",
       showIcon: true
+    }), /*#__PURE__*/_jsx(Alert, {
+      type: "error",
+      message: "I am a description of a component.",
+      description: "I am a description of a component.",
+      showIcon: true
     })]
   });
 });

package/lib/components/commonComponents/Tabs/index.style.js

@@ -1,7 +1,13 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tabs {\n  .", "-tabs-tab.", "-tabs-tab-active .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 500;\n  }\n  \n  .", "-tabs-tab .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 400;\n  }\n  \n  .", "-tabs-ink-bar {\n    background: var(--", "-color-primary);\n  }\n}\n\n.", "-tabs-nav::before {\n  display: none !important;\n}\n\n.", "-segmented-item {\n  &::after {\n    background: none !important;\n    opacity: 1 !important;\n  }\n  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text);\n  }\n}\n\n.", "-segmented-tab-bar {\n  margin-bottom: 16px;\n  background: var(--", "-color-fill-tertiary);\n  align-self: baseline;\n  \n  &.", "-segmented-tab-bar-centered {\n    align-self: center;\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tabs {\n  .", "-tabs-tab.", "-tabs-tab-active .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 500;\n  }\n  \n  .", "-tabs-tab .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 400;\n  }\n  \n  .", "-tabs-ink-bar {\n    background: var(--", "-color-primary);\n  }\n}\n\n.", "-tabs-nav::before {\n  display: none !important;\n}\n\n.", "-segmented-item {\n  &::after {\n    background: none !important;\n    opacity: 1 !important;\n  }\n  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text-secondary);\n  }\n}\n\n.", "-segmented-item-selected {  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text);\n  }\n}\n\n.", "-segmented-tab-bar {\n  margin-bottom: 16px;\n  background: var(--", "-color-fill-tertiary);\n  align-self: baseline;\n  \n  &.", "-segmented-tab-bar-centered {\n    align-self: center;\n  }\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/Tag/demo/demo1.js

@@ -2,7 +2,7 @@ import { Tag } from "../../../..";
 import { Flex } from 'antd';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var COLOR_LIST = ['purple', 'pink', 'yellow', 'teal', 'blue', 'mauve'];
+var COLOR_LIST = ['purple', 'pink', 'yellow', 'teal', 'blue', 'mauve', 'success', 'error', 'warning', 'info'];
 export default (function () {
   return /*#__PURE__*/_jsx(Flex, {
     align: "center",

package/lib/components/commonComponents/Tag/index.d.ts

@@ -7,7 +7,11 @@ declare enum SparkTagColors {
     Teal = "teal",
     Blue = "blue",
     Mauve = "mauve",
-    Transparent = "transparent"
+    Transparent = "transparent",
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
 }
 export interface SparkTagProps extends TagProps {
     /**

package/lib/components/commonComponents/Tag/index.js

@@ -23,6 +23,10 @@ var SparkTagColors = /*#__PURE__*/function (SparkTagColors) {
   SparkTagColors["Blue"] = "blue";
   SparkTagColors["Mauve"] = "mauve";
   SparkTagColors["Transparent"] = "transparent";
+  SparkTagColors["Success"] = "success";
+  SparkTagColors["Error"] = "error";
+  SparkTagColors["Warning"] = "warning";
+  SparkTagColors["Info"] = "info";
   return SparkTagColors;
 }(SparkTagColors || {});
 var SparkTag = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/commonComponents/Tag/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tag {\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  \n  .", "-tag-close-icon {\n    margin-left: 0;\n  }\n}\n\n.", "-tag-small {\n  height: 20px;\n  font-size: 12px;\n  padding: 0 4px;\n}\n\n.", "-tag-middle {\n  height: 24px;\n  font-size: 14px;\n  padding: 0 6px;\n}\n\n.", "-tag-purple {\n  color: var(--", "-color-purple);\n  background: var(--", "-color-purple-bg);\n}\n\n.", "-tag-pink {\n  color: var(--", "-color-pink);\n  background: var(--", "-color-pink-bg);\n}\n\n.", "-tag-yellow {\n  color: var(--", "-color-yellow);\n  background: var(--", "-color-yellow-bg);\n}\n\n.", "-tag-teal {\n  color: var(--", "-color-teal);\n  background: var(--", "-color-teal-bg);\n}\n\n.", "-tag-blue {\n  color: var(--", "-color-blue);\n  background: var(--", "-color-blue-bg);\n}\n\n.", "-tag-mauve {\n  color: var(--", "-color-mauve);\n  background: var(--", "-color-mauve-bg);\n}\n\n.", "-tag-transparent {\n  color: var(--", "-color-text-tertiary);\n  background: transparent;\n  border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tag {\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  \n  .", "-tag-close-icon {\n    margin-left: 0;\n  }\n}\n\n.", "-tag-small {\n  height: 20px;\n  font-size: 12px;\n  padding: 0 4px;\n}\n\n.", "-tag-middle {\n  height: 24px;\n  font-size: 14px;\n  padding: 0 6px;\n}\n\n.", "-tag-purple {\n  color: var(--", "-color-purple);\n  background: var(--", "-color-purple-bg);\n\n  .", "-tag-close-icon {\n    color: var(--", "-color-purple);\n  }\n}\n\n.", "-tag-pink {\n  color: var(--", "-color-pink);\n  background: var(--", "-color-pink-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-pink);\n  }\n}\n\n.", "-tag-yellow {\n  color: var(--", "-color-yellow);\n  background: var(--", "-color-yellow-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-yellow);\n  }\n}\n\n.", "-tag-teal {\n  color: var(--", "-color-teal);\n  background: var(--", "-color-teal-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-teal);\n  }\n}\n\n.", "-tag-blue {\n  color: var(--", "-color-blue);\n  background: var(--", "-color-blue-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-blue);\n}\n}\n\n.", "-tag-mauve {\n  color: var(--", "-color-mauve);\n  background: var(--", "-color-mauve-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-mauve);\n  }\n}\n\n.", "-tag-success {\n  color: var(--", "-color-success);\n  background: var(--", "-color-success-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-success);\n  }\n}\n\n.", "-tag-error {\n  color: var(--", "-color-error);\n  background: var(--", "-color-error-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-error);\n  }\n}\n\n.", "-tag-warning {\n  color: var(--", "-color-warning);\n  background: var(--", "-color-warning-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-warning);\n  }\n}\n\n.", "-tag-info {\n  color: var(--", "-color-info);\n  background: var(--", "-color-info-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-info);\n  }\n}\n\n.", "-tag-transparent {\n  color: var(--", "-color-text-tertiary);\n  background: transparent;\n  border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
@@ -15,36 +15,100 @@ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _t
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {

package/lib/index.js

@@ -85,6 +85,7 @@ export { default as requestSse } from "./libs/requestSse";
 export { default as ConfigProvider } from "./components/commonComponents/ConfigProvider";
 export { getCommonConfig, setCommonConfig, useCommonConfig } from "./config";
 export { base64Decoder, base64Encoder, parseJsonSafely } from "./libs/string";
+
 /**
  * 主题
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/design",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "AgentScope Spark Design - UI Library for AgentScope AI",
   "repository": {
     "type": "git",

package/lib/components/commonComponents/AlertDialog/mobile.d.ts

@@ -1,38 +0,0 @@
-import { ModalProps } from "../../../index";
-import { SyntheticEvent } from 'react';
-export interface AlertDialogProps extends ModalProps {
-    /**
-     * @description 类型
-     * @descriptionEn type
-     * @default info
-     */
-    type?: 'success' | 'info' | 'warning' | 'error' | 'confirm';
-    /**
-     * @description 确认按钮是否带有danger属性
-     * @descriptionEn whether the confirm button has a danger property
-     * @default false
-     */
-    danger?: boolean;
-    /**
-     * @description 内容
-     * @descriptionEn content
-     * @default -
-     */
-    content?: React.ReactNode;
-    /**
-     * @description 关闭时触发的回调函数
-     * @descriptionEn callback function triggered when closed
-     * @default -
-     */
-    onClose?: (e: SyntheticEvent<Element, Event>) => any;
-}
-type AlertDialogStaticProps = Omit<AlertDialogProps, 'type' | 'open'>;
-declare const _default: {
-    (props: AlertDialogProps): JSX.Element;
-    success: (props?: AlertDialogStaticProps) => void;
-    info: (props?: AlertDialogStaticProps) => void;
-    warning: (props?: AlertDialogStaticProps) => void;
-    error: (props?: AlertDialogStaticProps) => void;
-    confirm: (props?: AlertDialogStaticProps) => void;
-};
-export default _default;