@fjyueke/bify-mcp 1.0.9 → 1.0.10

package/dist/index.js

@@ -160,6 +160,26 @@ ${content}
     return `Failed to load examples for ${component.name}`;
   }
 };
+var fetchComponentCssVariables = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return `CSS variables for component "${componentName}" not found`;
+  }
+  try {
+    const cssVariablesPath = join2(
+      config.paths.componentsDir,
+      component.dirName,
+      "css-variables.md"
+    );
+    if (existsSync(cssVariablesPath)) {
+      return await readFile(cssVariablesPath, "utf-8");
+    }
+    return `CSS variables for ${component.name} not found`;
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load CSS variables for ${component.name}`;
+  }
+};
 
 // src/services/arco-mapping.ts
 var componentMappings = [
@@ -179,32 +199,26 @@ var componentMappings = [
       { arcoProp: "onClick", bifyProp: "onClick" },
       { arcoProp: "size", bifyProp: "size" },
       { arcoProp: "align", bifyProp: "align" },
-      { arcoProp: "arrowDirection", bifyProp: "arrowDirection" },
       { arcoProp: "required", bifyProp: "required" },
       { arcoProp: "isLink", bifyProp: "isLink" },
       { arcoProp: "titleStyle", bifyProp: "titleStyle" },
       { arcoProp: "titleClass", bifyProp: "titleClass" },
       { arcoProp: "valueClass", bifyProp: "valueClass" },
-      { arcoProp: "briefClass", bifyProp: "briefClass" }
+      { arcoProp: "briefClass", bifyProp: "briefClass" },
+      { arcoProp: "style", bifyProp: "style" },
+      { arcoProp: "className", bifyProp: "className" }
     ],
     valueMappings: {
       size: {
-        medium: "medium",
         large: "large"
       },
       align: {
         start: "start",
         center: "center",
         end: "end"
-      },
-      arrowDirection: {
-        right: "right",
-        left: "left",
-        up: "up",
-        down: "down"
       }
     },
-    notes: "Bify Cell \u652F\u6301 size(medium/large)\u3001align(start/center/end)\u3001arrowDirection \u7B49\u5E03\u5C40\u5C5E\u6027"
+    notes: "Bify Cell \u7684 size \u5C5E\u6027\u4EC5\u652F\u6301 large\uFF1BArco \u7684 prepend/append/arrowDirection \u5C5E\u6027 Bify \u4E0D\u652F\u6301"
   },
   {
     arcoName: "CellGroup",
@@ -999,6 +1013,22 @@ function registerTifyTools(server) {
       };
     }
   );
+  server.tool(
+    "get-component-css-variables",
+    "Gets the CSS variables and styling options for a specific component",
+    { componentName: z.string() },
+    async (args) => {
+      const cssVariables = await fetchComponentCssVariables(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: cssVariables
+          }
+        ]
+      };
+    }
+  );
   server.tool(
     "convert-arco-to-bify",
     "Converts Arco Mobile React code to Bify code with detailed report including warnings and suggestions",

package/metaData/components/action-sheet/css-variables.md

@@ -0,0 +1,16 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 操作面板描述底部内边距 | --action-sheet-description-padding-bottom | var(--padding-md) | --padding-md → 32px（中号内边距） |
+| 操作面板子名称顶部外边距 | --action-sheet-subname-margin-top | var(--padding-xs) | --padding-xs → 16px（最小内边距） |
+| 操作面板子名称颜色 | --action-sheet-subname-color | var(--gray-6) | --gray-6 → #86909C（灰6） |
+| 操作面板子名称字体大小 | --action-sheet-subname-font-size | var(--font-size-sm) | --font-size-sm → 24px（小号字号） |
+| 操作面板子名称行高 | --action-sheet-subname-line-height | var(--line-height-sm) | --line-height-sm → 36px（小号行高） |
+

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

@@ -234,10 +234,10 @@ function ActionSheetWithStatuses() {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                                      | 默认值                  | 描述 |
-| ----------------------------------------- | ----------------------- | ---- |
-| --action-sheet-description-padding-bottom | _var(--padding-md)_     | -    |
-| --action-sheet-subname-margin-top         | _var(--padding-xs)_     | -    |
-| --action-sheet-subname-color              | _var(--gray-6)_         | -    |
-| --action-sheet-subname-font-size          | _var(--font-size-sm)_   | -    |
-| --action-sheet-subname-line-height        | _var(--line-height-sm)_ | -    |
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 操作面板描述底部内边距 | `--action-sheet-description-padding-bottom` | `var(--padding-md, $padding-md)` | --padding-md → 32px（中号内边距） |
+| 操作面板子名称顶部外边距 | `--action-sheet-subname-margin-top` | `var(--padding-xs, $padding-xs)` | --padding-xs → 16px（最小内边距） |
+| 操作面板子名称颜色 | `--action-sheet-subname-color` | `var(--gray-6, $gray-6)` | --gray-6 → #86909C（灰6） |
+| 操作面板子名称字体大小 | `--action-sheet-subname-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px（小号字号） |
+| 操作面板子名称行高 | `--action-sheet-subname-line-height` | `var(--line-height-sm, $line-height-sm)` | --line-height-sm → 36px（小号行高） |

package/metaData/components/avatar/css-variables.md

@@ -0,0 +1,53 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 头像文字颜色 | --avatar-color | var(--white) | --white → #FFFFFF（白色） |
+| 头像背景色 | --avatar-background-color | var(--gray-5) | --gray-5 → #A9AEB8（灰5） |
+| 头像边框颜色 | --avatar-border-color | var(--white) | --white → #FFFFFF（白色） |
+| 头像边框宽度 | --avatar-border-width | 2PX |  |
+| 头像字体粗细 | --avatar-font-weight | var(--font-weight-bold) | --font-weight-bold → 500（加粗字体） |
+| 头像字体 | --avatar-font-family | #{Roboto, Helvetica, Arial, sans-serif} |  |
+
+#### 字体大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像字体大小 | --avatar-font-size-mini | var(--avatar-font-size) | --font-size-xs → 20px（最小字号） |
+| 小号头像字体大小 | --avatar-font-size-small | var(--avatar-font-size) | --font-size-sm → 24px（小号字号） |
+| 中号头像字体大小 | --avatar-font-size-medium | var(--avatar-font-size) | --font-size-md → 28px（中号字号） |
+| 大号头像字体大小 | --avatar-font-size-large | var(--avatar-font-size) | --font-size-lg → 32px（大号字号） |
+
+#### 圆角大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像圆角 | --avatar-border-radius-mini | var(--avatar-border-radius) | var(--avatar-border-radius) |
+| 小号头像圆角 | --avatar-border-radius-small | var(--avatar-border-radius) | var(--avatar-border-radius) |
+| 中号头像圆角 | --avatar-border-radius-medium | var(--avatar-border-radius) | var(--avatar-border-radius) |
+| 大号头像圆角 | --avatar-border-radius-large | var(--avatar-border-radius) | var(--avatar-border-radius) |
+
+#### 尺寸大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像尺寸 | --avatar-size-mini | var(--avatar-size) | var(--avatar-size) |
+| 小号头像尺寸 | --avatar-size-small | var(--avatar-size) | var(--avatar-size) |
+| 中号头像尺寸 | --avatar-size-medium | var(--avatar-size) | var(--avatar-size) |
+| 大号头像尺寸 | --avatar-size-large | var(--avatar-size) | var(--avatar-size) |
+
+#### 间距大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像间距 | --avatar-spacing-mini | var(--avatar-spacing) | var(--avatar-spacing) |
+| 小号头像间距 | --avatar-spacing-small | var(--avatar-spacing) | var(--avatar-spacing) |
+| 中号头像间距 | --avatar-spacing-medium | var(--avatar-spacing) | var(--avatar-spacing) |
+| 大号头像间距 | --avatar-spacing-large | var(--avatar-spacing) | var(--avatar-spacing) |
+

package/metaData/components/avatar/doc.md

@@ -144,27 +144,49 @@ import { Avatar } from "@fjyueke/bify-core"
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                            | 默认值                                            | 描述  |
-|-------------------------------|------------------------------------------------|-----|
-| --avatar-color                | _var(--white)_                                 | -   |
-| --avatar-background-color     | _var(--gray-5)_                                | -   |
-| --avatar-border-color         | _var(--white)_                                 | -   |
-| --avatar-border-width         | _2PX_                                          | -   |
-| --avatar-font-weight          | _var(--font-weight-bold)_                      | -   |
-| --avatar-font-family          | _Roboto, Helvetica, Arial, sans-serif_         | -   |
-| --avatar-font-size-mini       | _var(--avatar-font-size, var(--font-size-xs))_ | -   |
-| --avatar-font-size-small      | _var(--avatar-font-size, var(--font-size-sm))_ | -   |
-| --avatar-font-size-medium     | _var(--avatar-font-size, var(--font-size-md))_ | -   |
-| --avatar-font-size-large      | _var(--avatar-font-size, var(--font-size-lg))_ | -   |
-| --avatar-border-radius-mini   | _var(--avatar-border-radius, 2px * $hd)_       | -   |
-| --avatar-border-radius-small  | _var(--avatar-border-radius, 4px * $hd)_       | -   |
-| --avatar-border-radius-medium | _var(--avatar-border-radius, 5px * $hd)_       | -   |
-| --avatar-border-radius-large  | _var(--avatar-border-radius, 6px * $hd)_       | -   |
-| --avatar-size-mini            | _var(--avatar-size, 16px * $hd)_               | -   |
-| --avatar-size-small           | _var(--avatar-size, 26px * $hd)_               | -   |
-| --avatar-size-medium          | _var(--avatar-size, 38px * $hd)_               | -   |
-| --avatar-size-large           | _var(--avatar-size, 56px * $hd)_               | -   |
-| --avatar-spacing-mini         | _var(--avatar-spacing, var(--padding-xs))_     | -   |
-| --avatar-spacing-small        | _var(--avatar-spacing, var(--padding-sm))_     | -   |
-| --avatar-spacing-medium       | _var(--avatar-spacing, var(--padding-md))_     | -   |
-| --avatar-spacing-large        | _var(--avatar-spacing, var(--padding-lg))_     | -   |
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 头像文字颜色 | `--avatar-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 头像背景色 | `--avatar-background-color` | `var(--gray-5, $gray-5)` | --gray-5 → #A9AEB8（灰5） |
+| 头像边框颜色 | `--avatar-border-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 头像边框宽度 | `--avatar-border-width` | `2PX` |  |
+| 头像字体粗细 | `--avatar-font-weight` | `var(--font-weight-bold, $font-weight-bold)` | --font-weight-bold → 500（加粗字体） |
+| 头像字体 | `--avatar-font-family` | `#{Roboto, Helvetica, Arial, sans-serif}` |  |
+
+#### 字体大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像字体大小 | `--avatar-font-size-mini` | `var(--avatar-font-size, var(--font-size-xs, $font-size-xs))` | --font-size-xs → 20px（最小字号） |
+| 小号头像字体大小 | `--avatar-font-size-small` | `var(--avatar-font-size, var(--font-size-sm, $font-size-sm))` | --font-size-sm → 24px（小号字号） |
+| 中号头像字体大小 | `--avatar-font-size-medium` | `var(--avatar-font-size, var(--font-size-md, $font-size-md))` | --font-size-md → 28px（中号字号） |
+| 大号头像字体大小 | `--avatar-font-size-large` | `var(--avatar-font-size, var(--font-size-lg, $font-size-lg))` | --font-size-lg → 32px（大号字号） |
+
+#### 圆角大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像圆角 | `--avatar-border-radius-mini` | `var(--avatar-border-radius, 2px * $hd)` |  |
+| 小号头像圆角 | `--avatar-border-radius-small` | `var(--avatar-border-radius, 4px * $hd)` |  |
+| 中号头像圆角 | `--avatar-border-radius-medium` | `var(--avatar-border-radius, 5px * $hd)` |  |
+| 大号头像圆角 | `--avatar-border-radius-large` | `var(--avatar-border-radius, 6px * $hd)` |  |
+
+#### 尺寸大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像尺寸 | `--avatar-size-mini` | `var(--avatar-size, 16px * $hd)` |  |
+| 小号头像尺寸 | `--avatar-size-small` | `var(--avatar-size, 26px * $hd)` |  |
+| 中号头像尺寸 | `--avatar-size-medium` | `var(--avatar-size, 38px * $hd)` |  |
+| 大号头像尺寸 | `--avatar-size-large` | `var(--avatar-size, 56px * $hd)` |  |
+
+#### 间距大小
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你头像间距 | `--avatar-spacing-mini` | `var(--avatar-spacing, $padding-xs)` |  |
+| 小号头像间距 | `--avatar-spacing-small` | `var(--avatar-spacing, $padding-sm)` |  |
+| 中号头像间距 | `--avatar-spacing-medium` | `var(--avatar-spacing, $padding-md)` |  |
+| 大号头像间距 | `--avatar-spacing-large` | `var(--avatar-spacing, $padding-lg)` |  |

package/metaData/components/back-top/css-variables.md

@@ -0,0 +1,18 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 回到顶部按钮尺寸 | --back-top-size | 40px | 40px |
+| 回到顶部图标尺寸 | --back-top-icon-size | 20px | 20px |
+| 回到顶部右侧距离 | --back-top-right | 30px | 30px |
+| 回到顶部底部距离 | --back-top-bottom | 40px | 40px |
+| 回到顶部层级 | --back-top-z-index | 100 |  |
+| 回到顶部文字颜色 | --back-top-text-color | #fff |  |
+| 回到顶部背景色 | --back-top-background | $primary-color |  |
+

package/metaData/components/back-top/doc.md

@@ -131,12 +131,12 @@ function SetImmediate() {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                  | 默认值               | 描述 |
-| --------------------- | -------------------- | ---- |
-| --back-top-size       | _80px_               | -    |
-| --back-top-icon-size  | _40px_               | -    |
-| --back-top-right      | _60px_               | -    |
-| --back-top-bottom     | _80px_               | -    |
-| --back-top-z-index    | _100_                | -    |
-| --back-top-text-color | _#fff_               | -    |
-| --back-top-background | _var(--blue, $blue)_ | -    |
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 回到顶部按钮尺寸 | `--back-top-size` | `40px * $hd` |  |
+| 回到顶部图标尺寸 | `--back-top-icon-size` | `20px * $hd` |  |
+| 回到顶部右侧距离 | `--back-top-right` | `30px * $hd` |  |
+| 回到顶部底部距离 | `--back-top-bottom` | `40px * $hd` |  |
+| 回到顶部层级 | `--back-top-z-index` | `100` |  |
+| 回到顶部文字颜色 | `--back-top-text-color` | `#fff` |  |
+| 回到顶部背景色 | `--back-top-background` | `$primary-color` |  |

package/metaData/components/backdrop/css-variables.md

@@ -0,0 +1,13 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 遮罩层层级 | --backdrop-z-index | 1000 |  |
+| 遮罩层背景色 | --backdrop-background-color | rgba(0, 0, 0, 0.7) |  |
+

package/metaData/components/backdrop/doc.md

@@ -92,7 +92,7 @@ function BackdropExample() {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                        | 默认值               | 描述 |
-| --------------------------- | -------------------- | ---- |
-| --backdrop-z-index          | _1000_               | -    |
-| --backdrop-background-color | _rgba(0, 0, 0, 0.7)_ | -    |
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 遮罩层层级 | `--backdrop-z-index` | `1000` |  |
+| 遮罩层背景色 | `--backdrop-background-color` | `rgba(0, 0, 0, 0.7` |  |

package/metaData/components/badge/css-variables.md

@@ -0,0 +1,23 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 徽标尺寸 | --badge-size | 16px | 16px |
+| 徽标文字颜色 | --badge-color | var(--white) | --white → #FFFFFF（白色） |
+| 徽标内边距 | --badge-padding | 0 3px | 0 3px |
+| 徽标字体 | --badge-font-family | #{-apple-system-font, helvetica neue, arial, sans-serif} |  |
+| 徽标字体大小 | --badge-font-size | var(--font-size-sm) | --font-size-sm → 24px（小号字号） |
+| 徽标字体粗细 | --badge-font-weight | var(--font-weight-bold) | --font-weight-bold → 500（加粗字体） |
+| 徽标边框宽度 | --badge-border-width | var(--border-width-base) | --border-width-base → 2px（基础边框宽度） |
+| 徽标边框颜色 | --badge-border-color | var(--white) | --white → #FFFFFF（白色） |
+| 徽标圆角 | --badge-border-radius | var(--border-radius-max) | --border-radius-max → 999px（最大圆角） |
+| 徽标背景色 | --badge-background-color | $primary-color |  |
+| 徽标点颜色 | --badge-dot-color | $badge-background-color |  |
+| 徽标点尺寸 | --badge-dot-size | 8PX |  |
+

package/metaData/components/badge/doc.md

@@ -153,17 +153,17 @@ import { Badge } from "@fjyueke/bify-core"
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                     | 默认值                                                  | 描述 |
-| ------------------------ | ------------------------------------------------------- | ---- |
-| --badge-size             | _16px \* $hd_                                           | -    |
-| --badge-color            | _var(--white)_                                          | -    |
-| --badge-padding          | _0 3px \* $hd_                                          | -    |
-| --badge-font-family      | _-apple-system-font, helvetica neue, arial, sans-serif_ | -    |
-| --badge-font-size        | _var(--font-size-sm)_                                   | -    |
-| --badge-font-weight      | _var(--font-weight-bold)_                               | -    |
-| --badge-border-width     | _var(--border-width-base)_                              | -    |
-| --badge-border-color     | _var(--white)_                                          | -    |
-| --badge-border-radius    | _var(--border-radius-max)_                              | -    |
-| --badge-background-color | _var(--red)_                                            | -    |
-| --badge-dot-color        | _var(--badge-background-color)_                         | -    |
-| --badge-dot-size         | _8PX_                                                   | -    |
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 徽标尺寸 | `--badge-size` | `16px * $hd` |  |
+| 徽标文字颜色 | `--badge-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 徽标内边距 | `--badge-padding` | `0 3px * $hd` |  |
+| 徽标字体 | `--badge-font-family` | `#{-apple-system-font, helvetica neue, arial, sans-serif}` |  |
+| 徽标字体大小 | `--badge-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px（小号字号） |
+| 徽标字体粗细 | `--badge-font-weight` | `var(--font-weight-bold, $font-weight-bold)` | --font-weight-bold → 500（加粗字体） |
+| 徽标边框宽度 | `--badge-border-width` | `var(--border-width-base, $border-width-base)` | --border-width-base → 2px（基础边框宽度） |
+| 徽标边框颜色 | `--badge-border-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 徽标圆角 | `--badge-border-radius` | `var(--border-radius-max, $border-radius-max)` | --border-radius-max → 999px（最大圆角） |
+| 徽标背景色 | `--badge-background-color` | `$primary-color` |  |
+| 徽标点颜色 | `--badge-dot-color` | `$badge-background-color` |  |
+| 徽标点尺寸 | `--badge-dot-size` | `8PX` |  |

package/metaData/components/button/css-variables.md

@@ -0,0 +1,97 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 按钮行高 | --button-line-height | 1.2 |  |
+| 按钮边框宽度 | --button-border-width | var(--border-width-base) | --border-width-base → 2px（基础边框宽度） |
+| 按钮圆角 | --button-border-radius | 2px | 2px |
+| 按钮最大圆角 | --button-border-radius-max | var(--border-radius-max) | --border-radius-max → 999px（最大圆角） |
+| 按钮过渡时长 | --button-transition-duration | var(--animation-duration-fast) | --animation-duration-fast → 0.2s（快速动画时长） |
+| 按钮禁用透明度 | --button-disabled-opacity | var(--disabled-opacity) | --disabled-opacity → 0.5（禁用透明度） |
+| 按钮加载图标尺寸 | --button-loading-icon-size | 20px | 20px |
+| 信息按钮文字颜色 | --button-color-info | var(--white) | --white → #FFFFFF（白色） |
+
+#### 迷你按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你按钮高度 | --button-height-mini | 24px | 24px |
+| 迷你按钮内边距 | --button-padding-mini | var(--padding-base) | --padding-base → 8px（基础内边距） |
+| 迷你按钮字体大小 | --button-font-size-mini | var(--font-size-xs) | --font-size-xs → 20px（最小字号） |
+
+#### 小号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 小号按钮高度 | --button-height-small | 28px | 28px |
+| 小号按钮内边距 | --button-padding-small | var(--padding-xs) | --padding-xs → 16px（最小内边距） |
+| 小号按钮字体大小 | --button-font-size-small | 14px | 14px |
+
+#### 中号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 中号按钮高度 | --button-height-medium | 32px | 32px |
+| 中号按钮内边距 | --button-padding-medium | var(--padding-md) | --padding-md → 32px（中号内边距） |
+| 中号按钮字体大小 | --button-font-size-medium | 14px | 14px |
+
+#### 大号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 大号按钮高度 | --button-height-large | 36px | 36px |
+| 大号按钮字体大小 | --button-font-size-large | 15px | 15px |
+
+#### 默认按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 默认按钮文字颜色 | --button-default-color | var(--text-color) | --text-color → #4E5969（主文字色） |
+| 默认按钮背景色 | --button-default-background-color | var(--white) | --white → #FFFFFF（白色） |
+| 默认按钮边框颜色 | --button-default-border-color | var(--border-color) | --border-color → #E5E6EB（边框色） |
+
+#### 主要按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 主要按钮文字颜色 | --button-primary-color | var(--white) | --white → #FFFFFF（白色） |
+| 主要按钮背景色 | --button-primary-background-color | var(--primary-color) | --primary-color → #165DFF（主题色） |
+| 主要按钮边框颜色 | --button-primary-border-color | $button-primary-background-color |  |
+
+#### 信息按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 信息按钮背景色 | --button-info-background-color | var(--info-color) | --info-color → #165DFF（信息色） |
+| 信息按钮边框颜色 | --button-info-border-color | $button-info-background-color |  |
+
+#### 成功按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 成功按钮文字颜色 | --button-success-color | var(--white) | --white → #FFFFFF（白色） |
+| 成功按钮背景色 | --button-success-background-color | var(--success-color) | --success-color → #00B42A（成功色） |
+| 成功按钮边框颜色 | --button-success-border-color | $button-success-background-color |  |
+
+#### 警告按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 警告按钮文字颜色 | --button-warning-color | var(--white) | --white → #FFFFFF（白色） |
+| 警告按钮背景色 | --button-warning-background-color | var(--warning-color) | --warning-color → #FF7D00（警告色） |
+| 警告按钮边框颜色 | --button-warning-border-color | $button-warning-background-color |  |
+
+#### 危险按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 危险按钮文字颜色 | --button-danger-color | var(--white) | --white → #FFFFFF（白色） |
+| 危险按钮背景色 | --button-danger-background-color | var(--danger-color) | --danger-color → #F53F3F（危险色） |
+| 危险按钮边框颜色 | --button-danger-border-color | $button-danger-background-color |  |
+

package/metaData/components/button/doc.md

@@ -195,41 +195,93 @@ import { Button } from "@fjyueke/bify-core"
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
 
-| 名称                                | 默认值                                      | 描述  |
-|-----------------------------------|------------------------------------------|-----|
-| --button-line-height              | _1.2_                                    | -   |
-| --button-border-width             | _var(--border-width-base)_               | -   |
-| --button-border-radius            | _var(--border-radius-sm)_                | -   |
-| --button-border-radius-max        | _var(--border-radius-max)_               | -   |
-| --button-transition-duration      | _var(--animation-duration-fast)_         | -   |
-| --button-disabled-opacity         | _var(--disabled-opacity)_                | -   |
-| --button-loading-icon-size        | _20px * $hd_                             | -   |
-| --button-height-mini              | _24px * $hd_                             | -   |
-| --button-padding-mini             | _0 var(--padding-base)_                  | -   |
-| --button-font-size-mini           | _var(--font-size-xs)_                    | -   |
-| --button-height-small             | _32px * $hd_                             | -   |
-| --button-padding-small            | _0 var(--padding-xs)_                    | -   |
-| --button-font-size-small          | _var(--font-size-sm)_                    | -   |
-| --button-height-medium            | _44px * $hd_                             | -   |
-| --button-padding-medium           | _0 var(--padding-md)_                    | -   |
-| --button-font-size-medium         | _var(--font-size-md)_                    | -   |
-| --button-height-large             | _50px * $hd_                             | -   |
-| --button-font-size-large          | _var(--font-size-lg)_                    | -   |
-| --button-default-color            | _var(--text-color)_                      | -   |
-| --button-default-background-color | _var(--white)_                           | -   |
-| --button-default-border-color     | _var(--border-color)_                    | -   |
-| --button-primary-color            | _var(--white)_                           | -   |
-| --button-primary-background-color | _var(--primary-color)_                   | -   |
-| --button-primary-border-color     | _var(--button-primary-background-color)_ | -   |
-| --button-info-color               | _var(--white)_                           | -   |
-| --button-info-background-color    | _var(--info-color)_                      | -   |
-| --button-info-border-color        | _var(--button-info-background-color)_    | -   |
-| --button-success-color            | _var(--white)_                           | -   |
-| --button-success-background-color | _var(--success-color)_                   | -   |
-| --button-success-border-color     | _var(--button-success-background-color)_ | -   |
-| --button-warning-color            | _var(--white)_                           | -   |
-| --button-warning-background-color | _var(--warning-color)_                   | -   |
-| --button-warning-border-color     | _var(--button-warning-background-color)_ | -   |
-| --button-danger-color             | _var(--white)_                           | -   |
-| --button-danger-background-color  | _var(--danger-color)_                    | -   |
-| --button-danger-border-color      | _var(--button-danger-background-color)_  | -   |
+#### 基础样式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 按钮行高 | `--button-line-height` | `1.2` |  |
+| 按钮边框宽度 | `--button-border-width` | `var(--border-width-base, $border-width-base)` | --border-width-base → 2px（基础边框宽度） |
+| 按钮圆角 | `--button-border-radius` | `2px * $hd` |  |
+| 按钮最大圆角 | `--button-border-radius-max` | `var(--border-radius-max, $border-radius-max)` | --border-radius-max → 999px（最大圆角） |
+| 按钮过渡时长 | `--button-transition-duration` | `var(--animation-duration-fast, $animation-duration-fast)` | --animation-duration-fast → 0.2s（快速动画时长） |
+| 按钮禁用透明度 | `--button-disabled-opacity` | `var(--disabled-opacity, $disabled-opacity)` | --disabled-opacity → 0.5（禁用透明度） |
+| 按钮加载图标尺寸 | `--button-loading-icon-size` | `20px * $hd` |  |
+| 信息按钮文字颜色 | `--button-color-info` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+
+#### 迷你按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 迷你按钮高度 | `--button-height-mini` | `24px * $hd` |  |
+| 迷你按钮内边距 | `--button-padding-mini` | `0 var(--padding-base, $padding-base)` | --padding-base → 8px（基础内边距） |
+| 迷你按钮字体大小 | `--button-font-size-mini` | `var(--font-size-xs, $font-size-xs)` | --font-size-xs → 20px（最小字号） |
+
+#### 小号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 小号按钮高度 | `--button-height-small` | `28px * $hd` |  |
+| 小号按钮内边距 | `--button-padding-small` | `0 var(--padding-xs, $padding-xs)` | --padding-xs → 16px（最小内边距） |
+| 小号按钮字体大小 | `--button-font-size-small` | `14px * $hd` |  |
+
+#### 中号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 中号按钮高度 | `--button-height-medium` | `32px * $hd` |  |
+| 中号按钮内边距 | `--button-padding-medium` | `0 var(--padding-md, $padding-md)` | --padding-md → 32px（中号内边距） |
+| 中号按钮字体大小 | `--button-font-size-medium` | `14px * $hd` |  |
+
+#### 大号按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 大号按钮高度 | `--button-height-large` | `36px * $hd` |  |
+| 大号按钮字体大小 | `--button-font-size-large` | `15px * $hd` |  |
+
+#### 默认按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 默认按钮文字颜色 | `--button-default-color` | `var(--text-color, $text-color)` | --text-color → #4E5969（主文字色） |
+| 默认按钮背景色 | `--button-default-background-color` | `var(--white, $background-color-2)` | --white → #FFFFFF（白色） |
+| 默认按钮边框颜色 | `--button-default-border-color` | `var(--border-color, $gray-4)` | --border-color → #E5E6EB（边框色） |
+
+#### 主要按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 主要按钮文字颜色 | `--button-primary-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 主要按钮背景色 | `--button-primary-background-color` | `var(--primary-color, $primary-color)` | --primary-color → #165DFF（主题色） |
+| 主要按钮边框颜色 | `--button-primary-border-color` | `$button-primary-background-color` |  |
+
+#### 信息按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 信息按钮背景色 | `--button-info-background-color` | `var(--info-color, $info-color)` | --info-color → #165DFF（信息色） |
+| 信息按钮边框颜色 | `--button-info-border-color` | `$button-info-background-color` |  |
+
+#### 成功按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 成功按钮文字颜色 | `--button-success-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 成功按钮背景色 | `--button-success-background-color` | `var(--success-color, $success-color)` | --success-color → #00B42A（成功色） |
+| 成功按钮边框颜色 | `--button-success-border-color` | `$button-success-background-color` |  |
+
+#### 警告按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 警告按钮文字颜色 | `--button-warning-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 警告按钮背景色 | `--button-warning-background-color` | `var(--warning-color, $warning-color)` | --warning-color → #FF7D00（警告色） |
+| 警告按钮边框颜色 | `--button-warning-border-color` | `$button-warning-background-color` |  |
+
+#### 危险按钮
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 危险按钮文字颜色 | `--button-danger-color` | `var(--white, $white)` | --white → #FFFFFF（白色） |
+| 危险按钮背景色 | `--button-danger-background-color` | `var(--danger-color, $danger-color)` | --danger-color → #F53F3F（危险色） |
+| 危险按钮边框颜色 | `--button-danger-border-color` | `$button-danger-background-color` |  |