@agentscope-ai/design 1.0.26-beta.1768906295632 → 1.0.26

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

@@ -6,8 +6,8 @@
 | 属性名 | 描述 | 类型 | 默认值 | 
 |--------|--------|--------|--------|
 | language | 语言 | string \| string[] | (必填) | 
-| value | 值 | string | (必填) | 
+| value | 值 | string |  | 
 | className | 类名 | string |  | 
 | theme | 主题 | 'dark' \| 'light' |  | 
 | readOnly | 只读 | boolean |  | 
-| onChange |  | (value: string) => void |  | 
+| onChange |  | (value?: string) => void |  | 

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

@@ -0,0 +1,28 @@
+
+
+<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
+#### API
+
+##### FileIcon Props
+
+| 属性名 | 描述 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| src |  | string |  | 
+| image |  | string |  | 
+| type |  | string | (必填) | 
+| size |  | number |  | 
+| style |  | React.CSSProperties |  | 
+
+
+##### FileCard Props
+
+| 属性名 | 描述 | 类型 | 默认值 | 
+|--------|--------|--------|--------|
+| iconSize |  | number |  | 
+| src |  | string |  | 
+| type |  | string | (必填) | 
+| name |  | string | (必填) | 
+| desc |  | string |  | 
+| size |  | number |  | 
+| width |  | React.CSSProperties['width'] |  | 
+| children |  | React.ReactNode |  | 

package/llms/docs/changelog/index.zh-CN.llms.txt

@@ -1,5 +1,26 @@
 
 
+### 1.0.25
+`2025-01-07`
+
+##### Fixed
+
+- 修复 Tooltip 弹出框内部样式优先级问题
+
+### 1.0.24
+`2025-01-04`
+
+##### Changed
+
+- Video 组件添加 enableFullscreen 参数，支持全屏播放
+
+### 1.0.22
+`2025-12-29`
+
+##### Changed
+
+- Carbon 主题修改 `colorTextOnPrimary` 颜色变量为 '#ffffff'
+
 ### 1.0.21
 `2025-12-25`
 

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

@@ -0,0 +1,150 @@
+
+
+# Icon Library
+
+
+
+```tsx
+import React, { useMemo, useState } from 'react';
+import * as SparkIcons from '@agentscope-ai/icons';
+import { Input, Radio, message, copy } from '@agentscope-ai/design';
+
+/**
+ * Icons Library
+ * - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
+ * - 支持搜索、点击复制
+ */
+
+interface IconItem {
+  /** 图标导出名称 */
+  name: string;
+  /** 图标 React 组件 */
+  Icon: React.ComponentType<any>;
+}
+
+type CopyMode = 'name' | 'import' | 'jsx';
+
+const GRID_STYLE: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+  gap: 12,
+};
+
+const CARD_STYLE: React.CSSProperties = {
+  padding: 12,
+  borderRadius: 8,
+  cursor: 'pointer',
+  border: '1px solid var(--sps-color-border-secondary)',
+  background: 'var(--sps-color-bg-base)',
+};
+
+const NAME_STYLE: React.CSSProperties = {
+  marginTop: 8,
+  fontSize: 12,
+  lineHeight: '16px',
+  color: 'var(--sps-color-text-tertiary)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%',
+  fontFamily:
+    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+};
+
+export default function IconLibrary() {
+  const [keyword, setKeyword] = useState<string>('');
+  const [copyMode, setCopyMode] = useState<CopyMode>('name');
+
+  const allIcons = useMemo<IconItem[]>(() => {
+    return Object.entries(SparkIcons)
+      .filter(([name, Icon]) => {
+        if (!name.startsWith('Spark')) return false;
+        return typeof Icon === 'function';
+      })
+      .map(([name, Icon]) => ({
+        name,
+        Icon: Icon as React.ComponentType<any>,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, []);
+
+  const filteredIcons = useMemo<IconItem[]>(() => {
+    const q = keyword.trim().toLowerCase();
+    if (!q) return allIcons;
+    return allIcons.filter((item) => item.name.toLowerCase().includes(q));
+  }, [allIcons, keyword]);
+
+  const handleCopy = (item: IconItem) => {
+    let text = item.name;
+    if (copyMode === 'import') {
+      text = `import { ${item.name} } from '@agentscope-ai/icons';`;
+    }
+    if (copyMode === 'jsx') {
+      text = `<${item.name} style={{ fontSize: 24 }} />`;
+    }
+
+    copy(text);
+    message.success('已复制');
+  };
+
+  return (
+    <div style={{ padding: 16 }}>
+      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+        <Input
+          placeholder="搜索图标（按导出名）"
+          value={keyword}
+          onChange={(e) => setKeyword((e?.target as any)?.value || '')}
+          style={{ maxWidth: 360 }}
+          allowClear
+        />
+        <Radio.Group
+          value={copyMode}
+          onChange={(e) => setCopyMode(e.target.value)}
+          optionType="button"
+          buttonStyle="solid"
+          options={[
+            { label: '复制名称', value: 'name' },
+            { label: '复制 import', value: 'import' },
+            { label: '复制 JSX', value: 'jsx' },
+          ]}
+        />
+        <div style={{ color: 'var(--sps-color-text-tertiary)', fontSize: 12 }}>
+          共 {filteredIcons.length} 个
+        </div>
+      </div>
+
+      <div style={{ marginTop: 16, ...GRID_STYLE }}>
+        {filteredIcons.map((item) => {
+          const Icon = item.Icon;
+          return (
+            <div
+              key={item.name}
+              style={CARD_STYLE}
+              onClick={() => handleCopy(item)}
+            >
+              <div
+                style={{
+                  width: 48,
+                  height: 48,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon style={{ fontSize: 24 }} />
+              </div>
+              <div style={NAME_STYLE} title={item.name}>
+                {item.name}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+
+```
+
+查看全部图标

package/llms/docs/guide/tokens&variables.zh-CN.llms.txt

@@ -383,7 +383,7 @@
 
  "colorTextWhite": "#ffffff",
  "colorTextBlack": "#000000",
- "colorTextOnPrimary": "#000000",
+ "colorTextOnPrimary": "#ffffff",
   "colorFillDisable": "#898989",
   "colorPurple": "#615CED",
   "colorPurpleHover": "#8383F0",

package/llms/docs/guide/vibe-coding.zh-CN.llms.txt

@@ -6,9 +6,8 @@
 
 为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
 
-
-- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
-- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
+- [index.llms.txt](https://unpkg.com/@agentscope-ai/design@1.0.26/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
+- [all.llms.txt](https://unpkg.com/@agentscope-ai/design@1.0.26/llms/all.llms.txt)：Spark Design 的完整文档
 
 在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
 

package/llms/docs/icons/iconLibrary.zh-CN.llms.txt

@@ -0,0 +1,308 @@
+
+
+# Icon Library
+
+
+
+```tsx
+import React, { useEffect, useMemo, useState } from 'react';
+import * as SparkIcons from '@agentscope-ai/icons';
+import { Input, Radio, message, copy } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { useLocale } from 'dumi';
+import { SparkSearchLine } from '@agentscope-ai/icons';
+import { categorizeIcon, ICON_CATEGORIES } from './iconCategories';
+import $i18n from '@/i18n';
+
+/**
+ * Icons Library
+ * - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
+ * - 支持搜索、点击复制
+ */
+
+interface IconItem {
+  /** 图标导出名称 */
+  name: string;
+  /** 图标 React 组件 */
+  Icon: React.ComponentType<any>;
+  /** 图标分类 */
+  category: string;
+}
+
+type CopyMode = 'name' | 'import' | 'jsx';
+
+const useStyles = createStyles(() => ({
+  container: {
+    position: 'relative',
+    padding: 16,
+    paddingTop: 72,
+  },
+  toolbar: {
+    position: 'fixed',
+    width: '100%',
+    padding: '16px',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    gap: 12,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    background: 'var(--sps-color-bg-base)',
+    borderBottom: '1px solid var(--sps-color-border-secondary)',
+    marginBottom: '16px',
+  },
+  toolbarLeft: {
+    display: 'flex',
+    gap: 12,
+    alignItems: 'center',
+  },
+  toolbarRight: {
+    display: 'flex',
+    gap: 12,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexWrap: 'wrap',
+  },
+  search: {
+    maxWidth: 300,
+  },
+  count: {
+    color: 'var(--sps-color-text-tertiary)',
+    fontSize: 12,
+  },
+  groups: {
+    marginTop: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+  },
+  groupTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: 'var(--sps-color-text-base)',
+    marginBottom: 12,
+  },
+  groupCount: {
+    marginLeft: 8,
+    fontSize: 12,
+    fontWeight: 400,
+    color: 'var(--sps-color-text-tertiary)',
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+    gap: 12,
+  },
+  card: {
+    padding: 12,
+    borderRadius: 8,
+    cursor: 'pointer',
+    border: '1px solid var(--sps-color-border-secondary)',
+    background: 'var(--sps-color-bg-base)',
+  },
+  iconWrap: {
+    width: 48,
+    height: 48,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  name: {
+    marginTop: 8,
+    fontSize: 12,
+    lineHeight: '16px',
+    color: 'var(--sps-color-text-tertiary)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: '100%',
+    fontFamily:
+      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+}));
+
+export default function IconLibrary() {
+  const { styles } = useStyles();
+  const locale = useLocale();
+  const [keyword, setKeyword] = useState<string>('');
+  const [copyMode, setCopyMode] = useState<CopyMode>('name');
+
+  useEffect(() => {
+    // 同步 dumi 站点语言到 $i18n（$i18n 识别 zh-cn / en）
+    $i18n.updateLocale(locale.id === 'zh-CN' ? 'zh-cn' : 'en');
+  }, [locale.id]);
+
+  const excludedIcons = useMemo(
+    () =>
+      new Set([
+        'SparkDelete01LineCopy',
+        'SparkA2d2dFill',
+        'SparkA3d3dFill',
+        'SparkBoldLine1',
+        'SparkShanguangdengweikaiqiFlashlightOffLine',
+        'SparkZhinengshengchengAiGenerateLine',
+        'SparkQqkongjianQzoneFill',
+        'SparkAccountManagementFill',
+      ]),
+    [],
+  );
+
+  const allIcons = useMemo<IconItem[]>(() => {
+    return Object.entries(SparkIcons)
+      .filter(([name, Icon]) => {
+        if (!name.startsWith('Spark')) return false;
+        if (excludedIcons.has(name)) return false;
+        return typeof Icon === 'function';
+      })
+      .map(([name, Icon]) => ({
+        name,
+        Icon: Icon as React.ComponentType<any>,
+        category: categorizeIcon(name),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [excludedIcons]);
+
+  const filteredIcons = useMemo<IconItem[]>(() => {
+    const q = keyword.trim().toLowerCase();
+    if (!q) return allIcons;
+    return allIcons.filter((item) => item.name.toLowerCase().includes(q));
+  }, [allIcons, keyword]);
+
+  const groupedIcons = useMemo<Record<string, IconItem[]>>(() => {
+    return filteredIcons.reduce<Record<string, IconItem[]>>((acc, icon) => {
+      const key = icon.category;
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(icon);
+      return acc;
+    }, {});
+  }, [filteredIcons]);
+
+  const orderedCategories = useMemo<string[]>(() => {
+    const configOrder = Object.keys(ICON_CATEGORIES);
+    const existing = new Set(Object.keys(groupedIcons));
+    const ordered = configOrder.filter((k) => existing.has(k));
+    const rest = Object.keys(groupedIcons)
+      .filter((k) => !configOrder.includes(k))
+      .sort((a, b) => a.localeCompare(b));
+    return [...ordered, ...rest];
+  }, [groupedIcons]);
+
+  const handleCopy = (item: IconItem) => {
+    let text = item.name;
+    if (copyMode === 'import') {
+      text = `import { ${item.name} } from '@agentscope-ai/icons';`;
+    }
+    if (copyMode === 'jsx') {
+      text = `<${item.name} style={{ fontSize: 24 }} />`;
+    }
+
+    copy(text);
+    message.success(
+      $i18n.get({
+        id: 'docs.icons.IconLibrary.CopySuccess',
+        dm: '已复制',
+      }),
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarLeft}>
+          <Input
+            placeholder={$i18n.get({
+              id: 'docs.icons.IconLibrary.SearchPlaceholder',
+              dm: '搜索图标（按导出名）',
+            })}
+            value={keyword}
+            onChange={(e) => setKeyword((e?.target as any)?.value || '')}
+            className={styles.search}
+            prefix={<SparkSearchLine style={{ fontSize: 16 }} />}
+            allowClear
+          />
+        </div>
+
+        <div className={styles.toolbarRight}>
+          <div className={styles.count}>
+            {$i18n.get(
+              {
+                id: 'docs.icons.IconLibrary.TotalCount',
+                dm: '共 {count} 个',
+              },
+              { count: String(filteredIcons.length) },
+            )}
+          </div>
+          <Radio.Group
+            value={copyMode}
+            onChange={(e) => setCopyMode(e.target.value)}
+            optionType="button"
+            buttonStyle="solid"
+            options={[
+              {
+                label: $i18n.get({
+                  id: 'docs.icons.IconLibrary.CopyName',
+                  dm: '复制名称',
+                }),
+                value: 'name',
+              },
+              {
+                label: $i18n.get({
+                  id: 'docs.icons.IconLibrary.CopyImport',
+                  dm: '复制 import',
+                }),
+                value: 'import',
+              },
+              {
+                label: $i18n.get({
+                  id: 'docs.icons.IconLibrary.CopyJSX',
+                  dm: '复制 JSX',
+                }),
+                value: 'jsx',
+              },
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className={styles.groups}>
+        {orderedCategories.map((category) => {
+          const list = groupedIcons[category] || [];
+          return (
+            <div key={category}>
+              <div className={styles.groupTitle}>
+                {category}
+                <span className={styles.groupCount}>({list.length})</span>
+              </div>
+
+              <div className={styles.grid}>
+                {list.map((item) => {
+                  const Icon = item.Icon;
+                  return (
+                    <div
+                      key={item.name}
+                      className={styles.card}
+                      onClick={() => handleCopy(item)}
+                    >
+                      <div className={styles.iconWrap}>
+                        <Icon style={{ fontSize: 24 }} />
+                      </div>
+                      <div className={styles.name} title={item.name}>
+                        {item.name}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+
+```
+
+查看全部图标

package/llms/docs/icons/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