@fjyueke/arco-mcp 1.0.1 → 1.0.3

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,91 @@ ${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 fetchComponentCssVariables = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return "Component not found";
+  }
+  const cssVariablesPath = join3(
+    config.paths.componentsDir,
+    component.dirName,
+    "css-variables.md"
+  );
+  try {
+    if (existsSync(cssVariablesPath)) {
+      const content = await readFile(cssVariablesPath, "utf-8");
+      return content;
+    }
+    return `CSS variables documentation for ${component.name} not found`;
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load CSS variables 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 +310,69 @@ 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(
+    "get-component-css-variables",
+    "Gets CSS variables documentation for a specific Arco Design Mobile component",
+    { componentName: z.string() },
+    async (args) => {
+      const cssVariables = await fetchComponentCssVariables(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: cssVariables
+          }
+        ]
+      };
+    }
+  );
+  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/css-variables.md

@@ -0,0 +1,32 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-actionsheet-load-more-font-size | getRem(14) | 加载更多文字颜色 |
+| --arco-actionsheet-cell-desc-font-size | getRem(14) | 单元格标题文字大小 |
+| --arco-actionsheet-cell-title-font-size | getRem(15) | 单元格标题文字字重 |
+| --arco-actionsheet-cell-desc-margin-top | getRem(2) | 单元格内容文字大小 |
+| --arco-actionsheet-cell-content-font-size | getRem(14) | 单元格右箭头图标颜色 |
+| --arco-actionsheet-cell-arrow-gutter | getRem(8) | 单元格右箭头自定义图标大小 |
+| --arco-actionsheet-cell-arrow-font-size | getRem(12) | 单元格背景色 |
+| --arco-actionsheet-cell-font-size | getRem(16) | 单元格两侧横向间距 |
+| --arco-actionsheet-cell-horizontal-padding | getRem(16) | 单元格基础样式高度 |
+| --arco-actionsheet-cell-item-height | getRem(54) | 单元格有描述文字时的高度 |
+| --arco-actionsheet-cell-item-has-desc-height | getRem(74) | 单元格标签文字右侧间距 |
+| --arco-actionsheet-cell-label-gutter | getRem(24) | 单元格标签图标右侧间距 |
+| --arco-actionsheet-cell-label-icon-gutter | getRem(12) | 单元格标签图标大小 |
+| --arco-actionsheet-cell-label-icon-font-size | getRem(20) | 单元格头部和尾部说明文字大小 |
+| --arco-actionsheet-cell-extra-font-size | getRem(14) | 单元格头部和尾部说明文字行高 |
+| --arco-actionsheet-cell-extra-line-height | getRem(20) | 单元格头部和尾部说明内边距 |
+| --arco-actionsheet-count-down-font-size | getRem(16) | 倒计时默认字体行高 |
+| --arco-actionsheet-count-down-line-height | getRem(22) | 倒计时默认字体颜色 |
+| --arco-actionsheet-item-height | getRem(54) | 动作面板选项字体大小 |
+| --arco-actionsheet-item-font-size | getRem(16) | 动作面板顶部圆角值 |
+| --arco-actionsheet-border-radius | getRem(8) | 动作面板取消按钮顶线颜色 |
+| --arco-actionsheet-header-padding | getRem(16) | 动作面板头部标题字体大小 |
+| --arco-actionsheet-title-font-size | getRem(16) | 动作面板头部描述字体大小 |
+| --arco-actionsheet-sub-title-font-size | getRem(14) | 搜索栏内边距大小 |

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/css-variables.md

@@ -0,0 +1,64 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-avatar-large-size | getRem(56) | medium 头像组件的大小 |
+| --arco-avatar-medium-size | getRem(48) | small 头像组件的大小 |
+| --arco-avatar-small-size | getRem(40) | smaller 头像组件的大小 |
+| --arco-avatar-smaller-size | getRem(32) | ultra-small 头像组件的大小 |
+| --arco-avatar-ultra-small-size | getRem(24) | large 头像组件默认头像图标大小 |
+| --arco-avatar-default-overlap-large-size | getRem(28) | medium 头像组件默认头像图标大小 |
+| --arco-avatar-default-overlap-medium-size | getRem(24) | small 头像组件默认头像图标大小 |
+| --arco-avatar-default-overlap-small-size | getRem(20) | smaller 头像组件默认头像图标大小 |
+| --arco-avatar-default-overlap-smaller-size | getRem(16) | ultra-small 头像组件默认头像图标大小 |
+| --arco-avatar-default-overlap-ultra-small-size | getRem(12) | 头像组件背景色 |
+| --arco-avatar-large-text-font-size | getRem(16) | medium 字体头像字体大小 |
+| --arco-avatar-medium-text-font-size | getRem(16) | small 字体头像字体大小 |
+| --arco-avatar-small-text-font-size | getRem(14) | smaller 字体头像字体大小 |
+| --arco-avatar-smaller-text-font-size | getRem(12) | ultra-small 字体头像字体大小 |
+| --arco-avatar-ultra-small-text-font-size | getRem(10) | large 头像叠层组件头像重叠偏移量 |
+| --arco-avatar-group-large-size-offset | getRem(-12) | large 头像叠层组件头像border宽度 |
+| --arco-avatar-group-large-size-border | getRem(1.5) | medium 头像叠层组件头像重叠偏移量 |
+| --arco-avatar-group-medium-size-offset | getRem(-12) | medium 头像叠层组件头像border宽度 |
+| --arco-avatar-group-medium-size-border | getRem(1.5) | small 头像叠层组件头像重叠偏移量 |
+| --arco-avatar-group-small-size-offset | getRem(-12) | small 头像叠层组件头像border宽度 |
+| --arco-avatar-group-small-size-border | getRem(1.5) | smaller 头像叠层组件头像重叠偏移量 |
+| --arco-avatar-group-smaller-size-offset | getRem(-8) | smaller 头像叠层组件头像border宽度 |
+| --arco-avatar-group-smaller-size-border | getRem(1) | ultra-small 头像叠层组件头像重叠偏移量 |
+| --arco-avatar-group-ultra-small-size-offset | getRem(-8) | ultra-small 头像叠层组件头像border宽度 |
+| --arco-avatar-group-ultra-small-size-border | getRem(1) | 头像叠层border颜色 |
+| --arco-avatar-info-box-large-size | getRem(88) | medium大小带有辅助信息的头像组件容器高度 |
+| --arco-avatar-info-box-medium-size | getRem(80) | small大小带有辅助信息的头像组件容器高度 |
+| --arco-avatar-info-box-small-size | getRem(80) | smaller大小带有辅助信息的头像组件容器高度 |
+| --arco-avatar-info-box-smaller-size | getRem(64) | ultra-small大小带有辅助信息的头像组件容器高度 |
+| --arco-avatar-info-box-ultra-small-size | getRem(56) | large 头像组件用户名文字大小 |
+| --arco-avatar-name-large-font-size | getRem(18) | large 头像组件用户名文字行高 |
+| --arco-avatar-name-large-line-height | getRem(26) | large 头像组件辅助信息文字大小 |
+| --arco-avatar-desc-large-font-size | getRem(14) | large 头像组件辅助信息文字行高 |
+| --arco-avatar-desc-large-line-height | getRem(20) | large 头像组件用户名和辅助信息间距的大小 |
+| --arco-avatar-desc-large-margin-top | getRem(2) | medium 头像组件用户名文字大小 |
+| --arco-avatar-name-medium-font-size | getRem(18) | medium 头像组件用户名文字行高 |
+| --arco-avatar-name-medium-line-height | getRem(26) | medium 头像组件辅助信息文字大小 |
+| --arco-avatar-desc-medium-font-size | getRem(14) | medium 头像组件辅助信息文字行高 |
+| --arco-avatar-desc-medium-line-height | getRem(20) | medium 头像组件用户名和辅助信息间距的大小 |
+| --arco-avatar-desc-medium-margin-top | getRem(2) | small 头像组件用户名文字大小 |
+| --arco-avatar-name-small-font-size | getRem(16) | small 头像组件用户名文字行高 |
+| --arco-avatar-name-small-line-height | getRem(24) | small 头像组件辅助信息文字大小 |
+| --arco-avatar-desc-small-font-size | getRem(12) | small 头像组件辅助信息文字行高 |
+| --arco-avatar-desc-small-line-height | getRem(16) | small 头像组件用户名和辅助信息间距的大小 |
+| --arco-avatar-desc-small-margin-top | getRem(0) | smaller 头像组件用户名文字大小 |
+| --arco-avatar-name-smaller-font-size | getRem(14) | smaller 头像组件用户名文字行高 |
+| --arco-avatar-name-smaller-line-height | getRem(20) | smaller 头像组件辅助信息文字大小 |
+| --arco-avatar-desc-smaller-font-size | getRem(12) | smaller 头像组件辅助信息文字行高 |
+| --arco-avatar-desc-smaller-line-height | getRem(16) | smaller 头像组件用户名和辅助信息间距的大小 |
+| --arco-avatar-desc-smaller-margin-top | getRem(0) | ultra-small 头像组件用户名文字大小 |
+| --arco-avatar-name-ultra-small-font-size | getRem(13) | ultra-small 头像组件用户名文字行高 |
+| --arco-avatar-name-ultra-small-line-height | getRem(18) | ultra-small 头像组件辅助信息文字大小 |
+| --arco-avatar-desc-ultra-small-font-size | getRem(10) | ultra-small 头像组件辅助信息文字行高 |
+| --arco-avatar-desc-ultra-small-line-height | getRem(14) | ultra-small 头像组件用户名和辅助信息间距的大小 |
+| --arco-avatar-desc-ultra-small-margin-top | getRem(2) | 头像组件用户名字体颜色 |
+| --arco-avatar-skeleton-avatar-size | getRem(32) | 骨架屏金刚位图标区宽度 |

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/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/css-variables.md

@@ -0,0 +1,29 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --arco-button-dialog-footer-android-button-gutter | getRem(28) | 对话框（独立按钮样式）主按钮背景色 |
+| --arco-button-dialog-button-footer-height | getRem(36) | 对话框（独立按钮样式）按钮圆角值 |
+| --arco-button-dialog-button-footer-border-radius | getRem(30) | 对话框（独立按钮样式）按钮间距 |
+| --arco-button-dialog-button-footer-gutter | getRem(8) | 轮播图自动轮播时的动画曲线 |
+| --arco-button-icon-text-gutter | getRem(4) | primary 类型按钮背景色 |
+| --arco-button-huge-height | getRem(44) | huge 按钮文字大小 |
+| --arco-button-huge-text-size | getRem(16) | large 按钮内部padding |
+| --arco-button-large-height | getRem(36) | large 按钮文字大小 |
+| --arco-button-large-text-size | getRem(15) | medium 按钮内部padding |
+| --arco-button-medium-height | getRem(32) | medium 按钮文字大小 |
+| --arco-button-medium-text-size | getRem(14) | small 按钮内部padding |
+| --arco-button-small-height | getRem(28) | small 按钮文字大小 |
+| --arco-button-small-text-size | getRem(14) | mini 按钮内部padding |
+| --arco-button-mini-height | getRem(24) | mini 按钮文字大小 |
+| --arco-button-mini-text-size | getRem(12) | 文字缩略组件默认字体大小 |
+| --arco-button-picker-button-font-size | getRem(15) | 选择器按钮内边距 |
+| --arco-button-picker-button-padding | getRem(16) | 选择器左侧按钮字体颜色 |
+| --arco-button-pagination-field-button-min-height | getRem(32) | 分页器翻页按钮圆角值 |
+| --arco-button-pagination-field-button-border-radius | getRem(2) | 分页器翻页按钮内边距 |
+| --arco-button-stepper-button-size | getRem(28) | 步进器按钮图标尺寸 |
+| --arco-button-stepper-button-icon-size | getRem(10) | 步进器默认背景颜色 |