@agentscope-ai/design 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/design",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "AgentScope Spark Design - UI Library for AgentScope AI",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "prepare": "npm run dumi:setup",
     "start": "npm run dev",
     "test": "vitest",
-    "publish:manual": "npm run build && npm publish"
+    "publish:manual": "npm run build && npm run build:mcp&& npm publish"
   },
   "dependencies": {
     "@agentscope-ai/icons": "^1.0.35",

package/scripts/mcp-docs-server.js

@@ -6257,7 +6257,7 @@ module.exports = __toCommonJS(mcp_exports);
 // package.json
 var package_default = {
   name: "@agentscope-ai/design",
-  version: "1.0.17",
+  version: "1.0.18",
   description: "AgentScope Spark Design - UI Library for AgentScope AI",
   repository: {
     type: "git",
@@ -6295,7 +6295,7 @@ var package_default = {
     prepare: "npm run dumi:setup",
     start: "npm run dev",
     test: "vitest",
-    "publish:manual": "npm run build && npm publish"
+    "publish:manual": "npm run build && npm run build:mcp&& npm publish"
   },
   dependencies: {
     "@agentscope-ai/icons": "^1.0.35",

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

@@ -1,156 +0,0 @@
-
-
-# 从 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

@@ -1,83 +0,0 @@
-
-
-# 从零开始使用
-
-## 📦 安装
-
-
-```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

@@ -1,69 +0,0 @@
-
-
-# 使用
-
-如果您有自己的 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

@@ -1,51 +0,0 @@
-
-
-<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/theme.zh-CN.llms.txt

@@ -1,61 +0,0 @@
-
-
-## 内置主题
-
-Alibaba Cloud Spark Design 提供四种内置主题：
-
-<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>
-
-### 示例用法
-
-
-```tsx
-import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
-
-const App = () => {
-  return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
-};
-
-export default App;
-```
-
-
-## 从 Antd token 生成您自己的主题
-
-如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
-
-
-```tsx
-import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
-const yourToken = {
-  borderRadiusXS: 2,
-  borderRadiusSM: 4,
-  borderRadius: 6,
-  borderRadiusLG: 8,
-  borderRadiusXL: 12,
-  borderRadiusFull: 999,
-  wireframe: false,
-  colorPrimaryBg: '#F2F0FF',
-  colorPrimaryBgHover: '#F2F0FF',
-  colorPrimaryBorder: '#E2DEFF',
-  colorPrimaryBorderHover: '#BCB5FF',
-  // ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
-};
-const darkMode = false;
-const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
-const App = () => {
-  return (
-    <ConfigProvider {...yourThemeWithSparkStyle}>
-      Hello Spark Design!
-    </ConfigProvider>
-  );
-};
-
-export default App;
-```
-
-
-您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。