@fjyueke/arco-mcp 1.0.1 → 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/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/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/style.md

@@ -0,0 +1,151 @@
+@import '../../../style/mixin.less';
+
+@size-map: huge, large, medium, small, mini;
+
+.button-has-border(@color) {
+    .use-var(border, @color, 1PX solid);
+    &.half-border {
+        border-width: 0;
+        .hairline-var(@color);
+    }
+}
+
+.button-has-border-value(@value) {
+    border: 1PX solid @value;
+    &.half-border {
+        border-width: 0;
+        .hairline(@value);
+    }
+}
+
+.button-no-border() {
+    border-width: 0;
+    box-shadow: none;
+}
+
+.button-text-size(@font-size) {
+    .@{prefix}-button-icon,
+    i,
+    .@{prefix}-button-text,
+    svg {
+        .use-var(font-size, @font-size);
+    }
+}
+
+.button-size-height(@height) {
+    .use-var(height, @height);
+    &-is-round {
+        .use-var(border-radius, @height);
+    }
+    &-is-square {
+        .rem(border-radius, 0);
+    }
+}
+
+.@{prefix}-button {
+    cursor: pointer;
+    text-align: center;
+    line-height: 1.2;
+    font-size: 0;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    .use-var(line-height, button-line-height);
+    .use-var(border-radius, button-radius);
+    .noselect();
+
+    &&-inline {
+        width: auto;
+        display: inline-block;
+    }
+
+    &&-type-primary {
+        .use-var(background, button-primary-background);
+        .use-var(color, button-primary-text-color);
+        &-disabled {
+            .use-var(background, button-primary-disabled-background);
+            .use-var(color, button-primary-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-primary-clicked-background);
+        }
+    }
+    &-type-primary {
+        .set-loading-color-var(button-primary-text-color);
+    }
+
+    &&-type-default {
+        .use-var(background, button-default-background);
+        .use-var(color, button-default-text-color);
+        &-disabled {
+            .use-var(background, button-default-disabled-background);
+            .use-var(color, button-default-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-default-clicked-background);
+        }
+    }
+    &-type-default {
+        .set-loading-color-var(button-default-text-color);
+    }
+
+    &&-type-ghost {
+        .use-var(background, button-ghost-background);
+        .use-var(color, button-ghost-text-color);
+        &-disabled {
+            .use-var(background, button-ghost-disabled-background);
+            .use-var(color, button-ghost-disabled-text-color)
+        }
+        &-active {
+            .use-var(background, button-ghost-clicked-background);
+        }
+    }
+    &-type-ghost {
+        .set-loading-color-var(button-ghost-text-color);
+    }
+
+    &&-type-ghost {
+        .button-has-border-value(currentColor);
+    }
+
+    .set-button-size(length(@size-map));
+
+    &-text-android {
+        .rem(padding-top, 2);
+    }
+
+    &-icon {
+        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    &-text {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-text-has-icon {
+        .use-var-with-rtl(margin-left, button-icon-text-gutter);
+    }
+
+    &-loading-icon {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &.has-custom-border {
+        border: 1PX solid;
+    }
+}
+
+.set-button-size(@index) when (@index > 0) {
+    @size: extract(@size-map, @index);
+
+    &&-size-@{size} {
+        .use-var(padding, "button-@{size}-padding");
+        .button-size-height("button-@{size}-height");
+        .button-text-size("button-@{size}-text-size");
+    }
+
+    .set-button-size(@index - 1);
+}