@fjyueke/arco-mcp 1.0.0 → 1.0.2

package/dist/index.js

@@ -23,7 +23,8 @@ var config = {
     componentsIndexPath: resolve(
       __dirname,
       "../metaData/components-index.json"
-    )
+    ),
+    tokensPath: resolve(__dirname, "../metaData/tokens.json")
   },
   server: {
     name: "arco-mcp",
@@ -156,6 +157,70 @@ ${content}
     return `Failed to load examples for ${component.name}`;
   }
 };
+var fetchComponentStyle = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return "Component not found";
+  }
+  const stylePath = join3(
+    config.paths.componentsDir,
+    component.dirName,
+    "style.md"
+  );
+  try {
+    if (existsSync(stylePath)) {
+      const content = await readFile(stylePath, "utf-8");
+      return `\`\`\`less
+${content}
+\`\`\``;
+    }
+    return `Style documentation for ${component.name} not found`;
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load style for ${component.name}`;
+  }
+};
+var fetchCssTokens = async (category) => {
+  try {
+    const tokensData = await readFile(config.paths.tokensPath, "utf-8");
+    const tokens = JSON.parse(tokensData);
+    if (category) {
+      const categoryTokens = tokens[category];
+      if (categoryTokens) {
+        const result2 = categoryTokens.map(
+          (token) => `- **${token.name}**: ${token.value} - ${token.description}`
+        ).join("\n");
+        return `## ${category}
+
+${result2}`;
+      }
+      return `Category "${category}" not found`;
+    }
+    const categories = Object.keys(tokens);
+    const result = categories.map((cat) => {
+      const catTokens = tokens[cat].map(
+        (token) => `  - ${token.name}: ${token.value}`
+      ).join("\n");
+      return `## ${cat}
+
+${catTokens}`;
+    }).join("\n\n");
+    return result;
+  } catch (error) {
+    await logService.error(`Failed to load CSS tokens: ${error.message}`);
+    return "Failed to load CSS tokens";
+  }
+};
+var listTokenCategories = async () => {
+  try {
+    const tokensData = await readFile(config.paths.tokensPath, "utf-8");
+    const tokens = JSON.parse(tokensData);
+    return Object.keys(tokens).join(", ");
+  } catch (error) {
+    await logService.error(`Failed to load CSS tokens: ${error.message}`);
+    return "Failed to load CSS token categories";
+  }
+};
 
 // src/tools/components.ts
 function registerArcoTools(server) {
@@ -224,6 +289,53 @@ function registerArcoTools(server) {
       };
     }
   );
+  server.tool(
+    "get-component-style",
+    "Gets the style/less file content for a specific Arco Design Mobile component",
+    { componentName: z.string() },
+    async (args) => {
+      const styleContent = await fetchComponentStyle(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: styleContent
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "list-token-categories",
+    "Lists all CSS token categories available in Arco Design Mobile",
+    async () => {
+      const categories = await listTokenCategories();
+      return {
+        content: [
+          {
+            type: "text",
+            text: categories
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "get-css-tokens",
+    "Gets CSS tokens for a specific category or all categories in Arco Design Mobile",
+    { category: z.string().optional() },
+    async (args) => {
+      const tokens = await fetchCssTokens(args.category);
+      return {
+        content: [
+          {
+            type: "text",
+            text: tokens
+          }
+        ]
+      };
+    }
+  );
 }
 
 // src/index.ts

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

@@ -0,0 +1,94 @@
+> 属性/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/style.md

@@ -0,0 +1,57 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-action-sheet {
+    .use-var(color, font-color);
+
+    &-header {
+        .use-var(padding, action-sheet-header-padding);
+        text-align: center;
+        .onepx-border-var(bottom, line-color);
+    }
+
+    &-title {
+        .use-var(font-size, action-sheet-title-font-size);
+        .text-medium();
+    }
+
+    &-sub-title {
+        .use-var(color, sub-info-font-color);
+        .use-var(font-size, action-sheet-sub-title-font-size);
+    }
+
+    &-title + &-sub-title {
+        .rem(margin-top, 4);
+    }
+
+    &-content {
+        .use-var(border-top-left-radius, action-sheet-border-radius);
+        .use-var(border-top-right-radius, action-sheet-border-radius);
+    }
+
+    &-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(height, action-sheet-item-height);
+        .use-var(font-size, action-sheet-item-font-size);
+        .noselect();
+
+        &:not(:last-child) {
+            .onepx-border-var(bottom, line-color);
+        }
+
+        &.disabled {
+            .use-var(color, disabled-color);
+        }
+
+        &.danger {
+            .use-var(color, danger-color);
+        }
+
+        &.cancel-item {
+            border-top-style: solid;
+            .use-var(border-top-color, action-sheet-cancel-border-color);
+            .use-var(border-top-width, action-sheet-cancel-border-width);
+        }
+    }
+}

package/metaData/components/avatar/api.md

@@ -0,0 +1,49 @@
+> 属性/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|

package/metaData/components/avatar/style.md

@@ -0,0 +1,147 @@
+@import "../../../style/mixin.less";
+
+@size-map: @avatar-size-map;
+
+.@{prefix}-avatar {
+    position: relative;
+    font-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .use-var(color, avatar-text-font-color);
+    .use-var(background-color, avatar-background);
+
+    &-mode-image {
+        background-color: transparent !important;
+    }
+
+    &-default-overlap {
+        .use-var(background-color, avatar-default-overlap-background);
+    }
+
+    &-shape-circle {
+        .set-avatar-radius(50%);
+    }
+
+    &-shape-square {
+        .set-avatar-radius(.08rem);
+    }
+
+    .set-avatar-size(length(@size-map));
+
+    &-img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &-decoration {
+        position: absolute;
+    }
+
+    &-text {
+        flex: 0 0 auto;
+        font-weight: bold;
+    }
+
+    &-wrapper {
+        display: inline-block;
+
+        &-with-info {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    &-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .rem-with-rtl(margin-left, 16);
+    }
+
+    &-name {
+        .use-var(color, avatar-name-color);
+    }
+
+    &-desc {
+        .use-var(color, avatar-desc-color);
+    }
+}
+
+.@{prefix}-avatar-group {
+    .@{prefix}-avatar-wrapper-shape-circle {
+        position: relative; // 为了让z-index属性生效
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+
+    .@{prefix}-avatar {
+        border-style: solid;
+        .use-var(border-color, avatar-group-border-color);
+    }
+
+    .set-avatar-group-size(length(@size-map));
+}
+
+.set-avatar-radius(@radius) {
+    border-radius: @radius;
+    .@{prefix}-avatar-img .image-content {
+        border-radius: @radius;
+    }
+}
+
+// 循环设置头像叠层的样式
+.set-avatar-group-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    &-size-@{size} {
+        .@{prefix}-avatar-wrapper {
+            .use-var-with-rtl(margin-left, "avatar-group-@{size}-size-offset");
+        }
+        .@{prefix}-avatar {
+            .use-var(border-width, "avatar-group-@{size}-size-border");
+        }
+    }
+
+    .set-avatar-group-size(@index - 1);
+}
+
+// 循环设置头像的样式
+.set-avatar-size(@index) when (@index > 0) {
+
+    @size: extract(@size-map, @index);
+
+    &-size-@{size} {
+        .use-var(width, "avatar-@{size}-size");
+        .use-var(height, "avatar-@{size}-size");
+    }
+    &-default-icon-size-@{size} {
+        .use-var(font-size, "avatar-default-overlap-@{size}-size");
+    }
+    &-text-size-@{size} {
+        .use-var(font-size, "avatar-@{size}-text-font-size");
+    }
+
+    // 有辅助信息的样式
+    &-wrapper-with-info-size-@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &-name-size-@{size} {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &-desc-size-@{size} {
+        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
+        .use-var(font-size, "avatar-desc-@{size}-font-size");
+        .use-var(line-height, "avatar-desc-@{size}-line-height");
+    }
+
+    .set-avatar-size(@index - 1);
+}

package/metaData/components/badge/api.md

@@ -0,0 +1,20 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|visible|是否展示徽标，visible切换时有动画过渡|boolean|true|
+|text|徽标文案|ReactText|-|
+|dot|显示为一个小红点|boolean|false|
+|maxCount|最大完整展示数字，超出后将展示 \+|number|99|
+|children|内容|ReactNode|-|
+|absolute|是否置于右上角|boolean|false|
+|bordered|是否有白色边框|boolean|false|
+|timeout|动画持续时间(ms)|number \| \{ appear?: number; enter?: number; exit?: number; \}|300|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/badge/style.md

@@ -0,0 +1,74 @@
+@import "../../../style/mixin.less";
+
+@keyframes scale-on {
+
+    0% {
+        transform: scale(0);opacity: 0; }
+
+    100% {
+        transform: scale(1); opacity: 1; }
+}
+
+@keyframes scale-off {
+
+    0% {
+        transform: scale(1); opacity: 1; }
+
+    100% {
+        transform: scale(0); opacity: 0; }
+}
+
+.@{prefix}-scale-enter-active {
+    animation: scale-on cubic-bezier(.3, 1.3, .3, 1) forwards;
+    animation-duration: var(--builtin-transition-scale-enter-duration, .4s);
+}
+
+.@{prefix}-scale-exit-active {
+    animation: scale-off cubic-bezier(.3, 1.3, .3, 1) forwards;
+    animation-duration: var(--builtin-transition-scale-exit-duration, .4s);
+}
+
+.@{prefix}-badge {
+    cursor: pointer;
+    box-sizing: content-box;
+    display: inline-block;
+    z-index: 2;
+    .use-var(color, badge-text-color);
+    .use-var(background-color, badge-background-color);
+    white-space: nowrap;
+    .use-var(border-radius, badge-border-radius);
+    .use-var(height, badge-text-width);
+    .use-var(line-height, badge-text-width);
+    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding, badge-text-padding);
+    .use-var(padding, badge-text-padding, 0);
+
+    &-text {
+        display: block;
+        font-weight: 500;
+        .set-font-size-var(badge-font-size);
+    }
+
+    &-dot {
+        .use-var(width, badge-dot-width);
+        .use-var(height, badge-dot-width);
+        padding: 0;
+        min-width: auto;
+    }
+
+    &-bordered {
+        .use-var(border, badge-border-color, 1PX solid);
+    }
+
+    &-absolute {
+        position: absolute;
+        top: 0;
+        .set-prop-with-rtl(left, 100%);
+        .use-var-with-rtl(margin-left, badge-text-deviation);
+        .use-var(margin-top, badge-text-deviation);
+    }
+
+    &-absolute&-dot {
+        .use-var-with-rtl(margin-left, badge-dot-deviation);
+        .use-var(margin-top, badge-dot-deviation);
+    }
+}

package/metaData/components/button/api.md

@@ -0,0 +1,37 @@
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|type|样式类型|"primary" \| "ghost" \| "default"|"primary"|
+|size|尺寸|"mini" \| "small" \| "medium" \| "large" \| "huge"|"large"|
+|inline|是否为内联样式|boolean|false|
+|loading|是否处于加载中状态|boolean|false|
+|disabled|是否禁用|boolean|false|
+|halfBorder|border是否为0\.5px|boolean|false|
+|icon|图标名，传入Icon组件|ReactNode|-|
+|showTextWhenLoading|加载中是否展示文字|boolean|true|
+|needActive|是否需要点击态|boolean|true|
+|style|自定义样式|CSSProperties|-|
+|shape|按钮形状|"round" \| "semi" \| "square"|"semi"|
+|color|自定义字体颜色|ButtonColorStatus|-|
+|bgColor|自定义背景颜色|ButtonColorStatus|-|
+|borderColor|自定义边框颜色|ButtonColorStatus|-|
+|className|自定义类名|string|-|
+|loadingIcon|加载图标，传入Icon组件type属性或node|ReactNode|-|
+|children|子元素|ReactNode|-|
+|onClick|点击按钮的回调函数|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClickDisabled|禁用状态下点击按钮的回调函数|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|disableWhenLoading|加载中是否禁用按钮操作|boolean|true|
+|coverIconWhenLoading|加载中是否覆盖Icon|boolean|true|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLButtonElement|
+
+> ButtonColorStatus
+
+```
+string | { normal: string; active: string; disabled: string; }
+```