@fjyueke/arco-mcp 1.0.0

package/README.md

@@ -0,0 +1,85 @@
+# Arco Design Mobile MCP
+
+基于 Model Context Protocol (MCP) 提供 Arco Design Mobile 组件库文档查询能力。
+
+## 介绍
+
+Arco Design Mobile MCP 是一项独立的 MCP 服务，旨在将 Arco Design Mobile 与大模型连接起来。它使大模型能够直接从文档中检索组件、API数据。
+
+- 直接使用 npx 运行
+- 无需外部依赖，只需要 Node 环境
+
+## 安装
+
+```bash
+npm install -g @fjyueke/arco-mcp
+```
+
+## 使用
+
+### Cursor 用法
+
+```json
+{
+  "mcpServers": {
+    "@fjyueke/arco-mcp": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@fjyueke/arco-mcp"
+      ],
+      "env": {}
+    }
+  }
+}
+```
+
+### 工具接口
+
+| 工具名 | 功能 |
+|--------|------|
+| `list-components` | 列出所有组件 |
+| `get-component-docs` | 获取组件详细文档 |
+| `get-component-props` | 获取组件属性和 API |
+| `list-component-example` | 获取组件示例代码 |
+
+## 同步组件文档
+
+```bash
+npm run sync
+```
+
+## 构建
+
+```bash
+npm run build
+```
+
+## 发布
+
+```bash
+npm publish --access public
+```
+
+## 配置
+
+配置文件位于 `src/config.ts`：
+
+```typescript
+{
+  paths: {
+    dataDir: "metaData",
+    componentsDir: "metaData/components",
+    componentsIndexPath: "metaData/components-index.json"
+  },
+  server: {
+    name: "arco-mcp",
+    version: "1.0.0",
+    description: "Provides documentation, examples for Arco Design Mobile components"
+  }
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// src/tools/components.ts
+import { z } from "zod";
+
+// src/services/component.service.ts
+import { existsSync, readdirSync } from "fs";
+import { readFile } from "fs/promises";
+import { join as join3 } from "path";
+
+// src/config.ts
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var config = {
+  paths: {
+    dataDir: resolve(__dirname, "../metaData"),
+    componentsDir: resolve(__dirname, "../metaData/components"),
+    componentsIndexPath: resolve(
+      __dirname,
+      "../metaData/components-index.json"
+    )
+  },
+  server: {
+    name: "arco-mcp",
+    version: "1.0.0",
+    description: "Provides documentation, examples for Arco Design Mobile components"
+  }
+};
+
+// src/utils/logger.ts
+import { appendFile, mkdir } from "fs/promises";
+import { dirname as dirname2, join as join2, resolve as resolve2 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname2 = dirname2(fileURLToPath2(import.meta.url));
+var LOG_DIR = resolve2(__dirname2, "../../logs");
+var LOG_FILE = join2(LOG_DIR, "mcp.log");
+async function ensureLogDir() {
+  try {
+    await mkdir(LOG_DIR, { recursive: true });
+  } catch {
+  }
+}
+async function writeLog(level, message) {
+  await ensureLogDir();
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const logLine = `[${timestamp}] [${level}] ${message}
+`;
+  await appendFile(LOG_FILE, logLine);
+}
+var logService = {
+  async info(message) {
+    await writeLog("INFO", message);
+  },
+  async error(message) {
+    await writeLog("ERROR", message);
+  },
+  async warn(message) {
+    await writeLog("WARN", message);
+  }
+};
+
+// src/services/component.service.ts
+var componentRegistryCache = null;
+var fetchComponentRegistry = async () => {
+  if (componentRegistryCache) {
+    return componentRegistryCache;
+  }
+  try {
+    const indexData = await readFile(config.paths.componentsIndexPath, "utf-8");
+    componentRegistryCache = JSON.parse(indexData);
+    return componentRegistryCache;
+  } catch (error) {
+    await logService.error(error.message);
+    return [];
+  }
+};
+var locateComponentByName = async (componentName) => {
+  const components = await fetchComponentRegistry();
+  return components.find(
+    (c) => c.name.toLowerCase() === componentName.toLowerCase() || c.dirName.toLowerCase() === componentName.toLowerCase()
+  );
+};
+var retrieveComponentDocumentation = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return `Documentation for component "${componentName}" not found`;
+  }
+  const docPath = join3(config.paths.componentsDir, component.dirName, "doc.md");
+  try {
+    if (existsSync(docPath)) {
+      return await readFile(docPath, "utf-8");
+    } else {
+      return `Documentation for ${component.name} not found`;
+    }
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load documentation for ${component.name}`;
+  }
+};
+var fetchComponentApiDetails = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return `API documentation for component "${componentName}" not found`;
+  }
+  try {
+    const apiPath = join3(
+      config.paths.componentsDir,
+      component.dirName,
+      "api.md"
+    );
+    if (existsSync(apiPath)) {
+      return await readFile(apiPath, "utf-8");
+    }
+    return `API documentation for ${component.name} not found`;
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load API documentation for ${component.name}`;
+  }
+};
+var fetchComponentExamples = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return "Component not found";
+  }
+  const examplesDir = join3(
+    config.paths.componentsDir,
+    component.dirName,
+    "example"
+  );
+  if (!existsSync(examplesDir)) {
+    return `No example found for ${component.name}`;
+  }
+  try {
+    const files = readdirSync(examplesDir);
+    const tsxFiles = files.filter((file) => file.endsWith(".tsx"));
+    if (tsxFiles.length === 0) {
+      return `No example found for ${component.name}`;
+    }
+    const examples = [];
+    for (const tsxFile of tsxFiles) {
+      const content = await readFile(join3(examplesDir, tsxFile), "utf-8");
+      examples.push(`## ${tsxFile}
+
+\`\`\`tsx
+${content}
+\`\`\``);
+    }
+    return examples.join("\n\n");
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load examples for ${component.name}`;
+  }
+};
+
+// src/tools/components.ts
+function registerArcoTools(server) {
+  server.tool(
+    "list-components",
+    "Lists all available Arco Design Mobile components",
+    async () => {
+      const components = await fetchComponentRegistry();
+      return {
+        content: [
+          {
+            type: "text",
+            text: components.map((c) => c.name).join(", ")
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "get-component-docs",
+    "Gets detailed documentation for a specific Arco Design Mobile component",
+    { componentName: z.string() },
+    async (args) => {
+      const documentation = await retrieveComponentDocumentation(
+        args.componentName
+      );
+      return {
+        content: [
+          {
+            type: "text",
+            text: documentation
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "get-component-props",
+    "Gets the props and API documentation for a specific Arco Design Mobile component",
+    { componentName: z.string() },
+    async (args) => {
+      const propsSection = await fetchComponentApiDetails(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: propsSection
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "list-component-example",
+    "Lists all example available for a specific Arco Design Mobile component with descriptions",
+    { componentName: z.string() },
+    async (args) => {
+      const examplesMarkdown = await fetchComponentExamples(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: examplesMarkdown
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/index.ts
+async function startMcpServer() {
+  const server = new McpServer({
+    name: config.server.name,
+    version: config.server.version,
+    description: config.server.description
+  });
+  await logService.info("\u670D\u52A1\u542F\u52A8\u6210\u529F");
+  registerArcoTools(server);
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+startMcpServer().catch(async (error) => {
+  await logService.error(`\u670D\u52A1\u542F\u52A8\u5931\u8D25: ${error.message}`);
+  process.exit(1);
+});

package/metaData/components/action-sheet/doc.md

@@ -0,0 +1,102 @@
+### 反馈
+
+# 动作面板 ActionSheet
+
+动作面板组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|items|选项配置，详情见 ActionSheetItemOptions|ActionSheetItemOptions\[\]|必填|
+|cancelText|取消按钮内容，传值则会展示，点击后关闭动作面板|ReactNode|-|
+|title|面板标题内容|ReactNode|-|
+|subTitle|面板副标题内容|ReactNode|-|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|close|关闭菜单方法|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|必填|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|open|打开动作面板|(config: ActionSheetProps) =\> \{ close: () =\> void; update: (newConfig: ActionSheetProps) =\> void; \}|
+
+> ActionSheetItemOptions
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|选项文字内容|ReactNode|
+|status|状态，disabled 状态下不可点，danger 状态字体飘红|"normal" \| "disabled" \| "danger"|
+|className|选项文字自定义类名|string|
+|style|选项文字自定义样式|CSSProperties|
+|onClick|点击选项事件，返回值为 true 时可以阻止动作面板关闭|(e?: MouseEvent\<HTMLElement, MouseEvent\>) =\> boolean \| void \| Promise\<boolean \| void\>|
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|

package/metaData/components/action-sheet/example/index.tsx

@@ -0,0 +1,199 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    ReactNode,
+    CSSProperties,
+} from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { Promise } from 'es6-promise';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Popup, { PopupProps, PopupRef } from '../popup';
+import { OpenBaseProps } from '../masking';
+import { open } from './methods';
+
+export interface ActionSheetItemOptions {
+    /**
+     * 选项文字内容
+     * @en Option text
+     */
+    content: ReactNode;
+    /**
+     * 状态，disabled 状态下不可点，danger 状态字体飘红
+     * @en Status, it isn't clickable in disabled status, its font is red in danger status
+     * */
+    status?: 'normal' | 'disabled' | 'danger';
+    /**
+     * 选项文字自定义类名
+     * @en Custom classname for option content
+     */
+    className?: string;
+    /**
+     * 选项文字自定义样式
+     * @en Custom stylesheet for option content
+     */
+    style?: CSSProperties;
+    /**
+     * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
+     * @en Click option event, actionSheet will be prevent from closing when returning true
+     */
+    onClick?: (
+        e?: React.MouseEvent<HTMLElement, MouseEvent>,
+    ) => (void | boolean) | Promise<void | boolean>;
+}
+
+export interface ActionSheetProps
+    extends Omit<
+        PopupProps,
+        'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'
+    > {
+    /**
+     * 选项配置，详情见 ActionSheetItemOptions
+     * @en Option setting, see ActionSheetItemOptions for details
+     */
+    items: ActionSheetItemOptions[];
+    /**
+     * 取消按钮内容，传值则会展示，点击后关闭动作面板
+     * @en Cancel button content, the value will be shown, actionSheet will be closed when clicked
+     */
+    cancelText?: ReactNode;
+    /**
+     * 面板标题内容
+     * @en Title content
+     */
+    title?: ReactNode;
+    /**
+     * 面板副标题内容
+     * @en Sub title content
+     */
+    subTitle?: ReactNode;
+    /**
+     * 从底部滑出的菜单内容是否适配ipx底部
+     * @en Whether the content of the menu that slides out from the bottom fits the bottom of the iphoneX
+     * @default true
+     */
+    needBottomOffset?: boolean;
+}
+
+export interface ActionSheetRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+const ActionSheet = forwardRef((props: ActionSheetProps, ref: Ref<ActionSheetRef>) => {
+    const {
+        className = '',
+        items,
+        cancelText,
+        close,
+        title,
+        subTitle,
+        needBottomOffset = true,
+        ...otherProps
+    } = props;
+    const popupRef = useRef<PopupRef>(null);
+
+    useImperativeHandle(ref, () => popupRef.current!);
+
+    function handleItemClick(
+        e: React.MouseEvent<HTMLElement, MouseEvent>,
+        item: ActionSheetItemOptions,
+    ) {
+        e.stopPropagation();
+        if (item.status === 'disabled') {
+            return;
+        }
+        const result = item.onClick ? item.onClick(e) : null;
+        if (!result || typeof result === 'boolean') {
+            !result && close?.(e);
+        } else if (result && result.then) {
+            result.then(res => !res && close?.(e));
+        }
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <Popup
+                    ref={popupRef}
+                    className={cls(`${prefixCls}-action-sheet`, className)}
+                    contentClass={`${prefixCls}-action-sheet-content`}
+                    close={close}
+                    direction="bottom"
+                    needBottomOffset={needBottomOffset}
+                    {...otherProps}
+                >
+                    {title || subTitle ? (
+                        <div className={`${prefixCls}-action-sheet-header`}>
+                            {title ? (
+                                <div className={`${prefixCls}-action-sheet-title`}>{title}</div>
+                            ) : null}
+                            {subTitle ? (
+                                <div className={`${prefixCls}-action-sheet-sub-title`}>
+                                    {subTitle}
+                                </div>
+                            ) : null}
+                        </div>
+                    ) : null}
+                    <div className={`${prefixCls}-action-sheet-list`}>
+                        {(items || []).map((item, index) =>
+                            item.content ? (
+                                <div
+                                    className={cls(
+                                        `${prefixCls}-action-sheet-item`,
+                                        item.className,
+                                        item.status || 'normal',
+                                    )}
+                                    key={index}
+                                    style={item.style}
+                                    onClick={e => handleItemClick(e, item)}
+                                >
+                                    {item.content}
+                                </div>
+                            ) : null,
+                        )}
+                    </div>
+                    {cancelText ? (
+                        <div
+                            className={`${prefixCls}-action-sheet-item cancel-item`}
+                            onClick={e => {
+                                e.stopPropagation();
+                                close?.(e);
+                            }}
+                        >
+                            {cancelText}
+                        </div>
+                    ) : null}
+                </Popup>
+            )}
+        </ContextLayout>
+    );
+});
+
+export function methodsGenerator<P extends OpenBaseProps>(Comp: React.FunctionComponent<P>) {
+    return {
+        /**
+         * 打开动作面板
+         * @desc {en} Open actionsheet
+         * @param {ActionSheetProps} config setting
+         * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+
+const ActionSheetWithGlobalContext = CompWithGlobalContext(ActionSheet);
+
+/**
+ * 动作面板组件
+ * @en ActionSheet Component
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 动作面板
+ * @name_en ActionSheet
+ */
+export default componentWrapper(ActionSheet, methodsGenerator(ActionSheetWithGlobalContext));

package/metaData/components/action-sheet/example/methods.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { open as maskingOpen, OpenBaseProps } from '../masking/methods';
+
+export function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>) {
+    return maskingOpen(Component, 'ARCO_ACTION_SHEET');
+}

package/metaData/components/avatar/doc.md

@@ -0,0 +1,57 @@
+### 信息展示
+
+# 头像 Avatar
+
+头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|shape|形状|"circle" \| "square"|"circle"|
+|size|尺寸|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|"small"|
+|src|图片头像的资源地址|string|-|
+|imageProps|图片头像组件参数，透传给Image组件|Partial\<ImageProps & RefAttributes\<ImageRef\>\>|-|
+|decoration|图片头像上的装饰|ReactNode|null|
+|textAvatar|文字头像，中文建议取两个字，英文建议在三个字以下|string|""|
+|avatarStyle|头像元素的自定义样式|CSSProperties|{}|
+|avatarClass|头像元素的自定义类名|string|""|
+|autoFixFontSize|是否自动根据头像尺寸调整字体大小|boolean|true|
+|autoFixFontOffset|自动调整文字头像大小时，文字距离头像容器左右的安全距离|number|2|
+|avatarName|头像旁的用户名信息|string|""|
+|avatarDesc|头像旁的辅助信息，需要和用户名一起出现|string|""|
+|renderInfo|自定义头像描述信息|ReactNode|null|
+|defaultOverLap|头像组件为空时默认的状态|ReactNode|用户图标|
+|onClick|点击头像的回调事件|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|() => {}|
+|onClickDecoration|点击头像上的装饰|(e: MouseEvent\<HTMLElement, MouseEvent\>) =\> void|() => {}|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|
+
+> Avatar.Group
+
+头像叠层
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|isGroup|是否为头像组|boolean|必填|
+|shape|形状，优先级低于Avatar组件本身|"circle" \| "square"|"circle"|
+|size|尺寸，优先级低于Avatar组件本身|"medium" \| "large" \| "small" \| "smaller" \| "ultra\-small"|"medium"|
+|zIndexOrder|头像组叠层层级顺序，z\-index值大小，desc \- 降序，asc \- 升序|"desc" \| "asc"|"desc"|
+|children|自定义组件内容|ReactNode|null|
+|className|自定义类名|string|""|
+|style|自定义样式|CSSProperties|{}|
+
+> AvatarGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|