@fjyueke/bify-mcp 1.0.8 → 1.0.10

package/README.md

@@ -43,6 +43,27 @@ Bify MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 Bif
 
 参考对应 IDE 的 MCP 配置文档，使用上述配置格式。
 
+### 双 MCP 协同配置（推荐）
+
+同时配置 Arco Mobile MCP 和 Bify MCP，可获得更精确的代码转换：
+
+```json
+{
+  "mcpServers": {
+    "@fjyueke/bify-mcp": {
+      "command": "npx",
+      "args": ["-y", "@fjyueke/bify-mcp"],
+      "env": {}
+    },
+    "@fjyueke/arco-mcp": {
+      "command": "npx",
+      "args": ["-y", "@fjyueke/arco-mcp"],
+      "env": {}
+    }
+  }
+}
+```
+
 ## 可用工具
 
 | 工具名 | 功能 |

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 = [
@@ -176,8 +196,29 @@ var componentMappings = [
       { arcoProp: "arrow", bifyProp: "rightIcon" },
       { arcoProp: "bordered", bifyProp: "bordered" },
       { arcoProp: "icon", bifyProp: "icon" },
-      { arcoProp: "onClick", bifyProp: "onClick" }
-    ]
+      { arcoProp: "onClick", bifyProp: "onClick" },
+      { arcoProp: "size", bifyProp: "size" },
+      { arcoProp: "align", bifyProp: "align" },
+      { 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: "style", bifyProp: "style" },
+      { arcoProp: "className", bifyProp: "className" }
+    ],
+    valueMappings: {
+      size: {
+        large: "large"
+      },
+      align: {
+        start: "start",
+        center: "center",
+        end: "end"
+      }
+    },
+    notes: "Bify Cell \u7684 size \u5C5E\u6027\u4EC5\u652F\u6301 large\uFF1BArco \u7684 prepend/append/arrowDirection \u5C5E\u6027 Bify \u4E0D\u652F\u6301"
   },
   {
     arcoName: "CellGroup",
@@ -197,14 +238,17 @@ var componentMappings = [
     propMappings: [
       { arcoProp: "type", bifyProp: "color" },
       { arcoProp: "ghost", bifyProp: "variant", transform: () => "outlined" },
+      { arcoProp: "shape", bifyProp: "shape" },
       { arcoProp: "size", bifyProp: "size" },
       { arcoProp: "disabled", bifyProp: "disabled" },
       { arcoProp: "loading", bifyProp: "loading" },
       { arcoProp: "icon", bifyProp: "icon" },
+      { arcoProp: "iconPosition", bifyProp: "iconPosition" },
       { arcoProp: "onClick", bifyProp: "onClick" },
       { arcoProp: "className", bifyProp: "className" },
       { arcoProp: "style", bifyProp: "style" },
-      { arcoProp: "block", bifyProp: "block" }
+      { arcoProp: "block", bifyProp: "block" },
+      { arcoProp: "hairline", bifyProp: "hairline" }
     ],
     valueMappings: {
       color: {
@@ -218,8 +262,14 @@ var componentMappings = [
         medium: "medium",
         large: "large",
         huge: "large"
+      },
+      variant: {
+        contained: "contained",
+        text: "text",
+        outlined: "outlined"
       }
-    }
+    },
+    notes: "Bify Button \u4F7F\u7528 color \u5C5E\u6027\u63A7\u5236\u989C\u8272\uFF0Cvariant \u5C5E\u6027\u63A7\u5236\u6837\u5F0F\uFF08contained/text/outlined\uFF09"
   },
   {
     arcoName: "Avatar",
@@ -252,8 +302,10 @@ var componentMappings = [
     bifyImport: "@fjyueke/bify-core",
     propMappings: [
       { arcoProp: "type", bifyProp: "color" },
+      { arcoProp: "variant", bifyProp: "variant" },
       { arcoProp: "size", bifyProp: "size" },
       { arcoProp: "closable", bifyProp: "closeable" },
+      { arcoProp: "closeIcon", bifyProp: "closeIcon" },
       { arcoProp: "onClose", bifyProp: "onClose" },
       { arcoProp: "shape", bifyProp: "shape" }
     ],
@@ -261,6 +313,7 @@ var componentMappings = [
       color: {
         default: "default",
         primary: "primary",
+        info: "info",
         success: "success",
         warning: "warning",
         danger: "danger"
@@ -269,8 +322,19 @@ var componentMappings = [
         small: "small",
         medium: "medium",
         large: "large"
+      },
+      shape: {
+        square: "square",
+        rounded: "rounded",
+        roundedRight: "roundedRight",
+        roundedLeft: "roundedLeft"
+      },
+      variant: {
+        contained: "contained",
+        outlined: "outlined"
       }
-    }
+    },
+    notes: "Bify Tag \u652F\u6301 info \u989C\u8272\uFF0Cvariant \u63A7\u5236\u6837\u5F0F\uFF08contained/outlined\uFF09"
   },
   {
     arcoName: "Switch",
@@ -334,14 +398,20 @@ var componentMappings = [
     bifyImport: "@fjyueke/bify-core",
     propMappings: [
       { arcoProp: "visible", bifyProp: "open" },
+      { arcoProp: "defaultVisible", bifyProp: "defaultOpen" },
       { arcoProp: "title", bifyProp: "title" },
       { arcoProp: "content", bifyProp: "message" },
-      { arcoProp: "onClose", bifyProp: "onClose" },
+      { arcoProp: "messageAlign", bifyProp: "messageAlign" },
       { arcoProp: "confirmText", bifyProp: "confirm" },
       { arcoProp: "cancelText", bifyProp: "cancel" },
       { arcoProp: "onConfirm", bifyProp: "onConfirm" },
-      { arcoProp: "onCancel", bifyProp: "onCancel" }
-    ]
+      { arcoProp: "onCancel", bifyProp: "onCancel" },
+      { arcoProp: "onClose", bifyProp: "onClose" },
+      { arcoProp: "onBeforeClose", bifyProp: "onBeforeClose" },
+      { arcoProp: "backdrop", bifyProp: "backdrop" },
+      { arcoProp: "theme", bifyProp: "theme" }
+    ],
+    notes: "Bify Dialog \u7684 confirm/cancel \u5C5E\u6027\u652F\u6301 ReactNode \u6216 ButtonProps \u5BF9\u8C61"
   },
   {
     arcoName: "Toast",
@@ -420,11 +490,11 @@ var componentMappings = [
     arcoImport: "@arco-design/mobile-react",
     bifyImport: "@fjyueke/bify-core",
     propMappings: [
-      { arcoProp: "value", bifyProp: "modelValue" },
-      { arcoProp: "placeholder", bifyProp: "placeholder" },
       { arcoProp: "label", bifyProp: "label" },
-      { arcoProp: "onChange", bifyProp: "onChange" }
-    ]
+      { arcoProp: "feedback", bifyProp: "feedback" },
+      { arcoProp: "children", bifyProp: "children" }
+    ],
+    notes: "Bify Field \u57FA\u4E8E Form.Item\uFF0C\u4F7F\u7528 children \u4F20\u9012\u8868\u5355\u63A7\u4EF6\uFF0C\u4E0D\u652F\u6301\u76F4\u63A5\u7684 value/modelValue \u5C5E\u6027"
   },
   {
     arcoName: "Textarea",
@@ -943,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 |  |
+