@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/components/Button/designTokens.js

@@ -1,131 +1,145 @@
-import { getToken } from "../../utils/tokenHelper";
-/*
-这里是 dxp 的 UI token，缓存在本地的内置变量；
-通过antd 提供的 ConfigProvider 注入了组件级 token 变量来实现 gomo 风格的UI组件；
+import { useDynamicTokens } from "../../utils";
 
-理论上可以通过2种方式来实现 antd 的样式定制：
-1. 直接写 /components/Button/style/button.less 文件通过 less 覆盖antd的样式，可控细节更多（相当于把  dxp 的 UI token 通过 less 的方式覆盖antd的样式）；
-2. 通过 ConfigProvider 注入组件级别的 token 变量，这种不用写 less 文件，但是可控细节更少，只能antd 提供了哪些 token，才能覆盖对应的值；
-目前优先选择第二种，因为第一种需要写 less 文件，要知道对应组件的dom结构，才能覆盖；而第二种只需要对齐 变量值，就能覆盖；
-*/
-var designTokens = {
-  // 算法配置
-  // algorithm: true,
+/**
+ * Button组件的设计Token系统
+ *
+ * 这里是dxp的UI token，缓存在本地的内置变量；
+ * 通过antd提供的ConfigProvider注入组件级token变量来实现gomo风格的UI组件。
+ *
+ * 样式定制实现方式（理论上可以通过2种方式来实现）：
+ * 1. 通过ConfigProvider注入组件级别的token变量（当前采用）
+ *    - 优点：不需要编写less文件，只需对齐变量值
+ *    - 缺点：可控细节较少，受限于antd提供的token
+ *
+ * 2. 直接编写less文件覆盖antd样式
+ *    - 优点：可控细节更多（相当于把  dxp 的 UI token 通过 less 的方式覆盖antd的样式）
+ *    - 缺点：需要了解组件DOM结构，维护成本高，优先选择第1种
+ */
 
-  // 主要按钮背景色
-  colorPrimary: getToken('colorButtonBackgroundPrimary'),
-  // 主要按钮 Hover
-  colorPrimaryHover: getToken('colorButtonBackgroundPrimary'),
-  colorPrimaryActive: getToken('colorButtonBackgroundPrimary'),
-  // colorPrimaryBg: getToken('colorButtonBackgroundPrimary'),
-  // 主要按钮文本颜色
-  primaryColor: getToken('colorButtonTextPrimary'),
-  // 次要按钮背景色 默认是白色
-  // 次要按钮文本颜色
-  defaultColor: getToken('colorButtonTextSecondary'),
-  // 次要按钮边框颜色
-  defaultBorderColor: getToken('colorButtonTextSecondary'),
-  // 禁用按钮背景色 Hover
-  colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
-  borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
-  colorTextDisabled: getToken('colorButtonTextDisabled'),
-  // Success 按钮背景色
-  green1: getToken('colorButtonBackgroundSuccess'),
-  green2: getToken('colorButtonBackgroundSuccess'),
-  green3: getToken('colorButtonBackgroundSuccess'),
-  green4: getToken('colorButtonBackgroundSuccess'),
-  green5: getToken('colorButtonBackgroundSuccess'),
-  green6: getToken('colorButtonBackgroundSuccess'),
-  green7: getToken('colorButtonBackgroundSuccess'),
-  // Inverse 反色配置 token配置不出来，用 inverse 判断处理。
-  // ghostBg: getToken('colorButtonBackgroundPrimaryInverse'),
-  // defaultGhostBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
-  // groupBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
-  // // 文本按钮的
-  // defaultGhostColor: getToken('colorButtonTextPrimaryInverse'),
-  // Inverse 反色配置 end
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  return {
+    // 算法配置
+    // algorithm: true,
 
-  // 全局公用的：
-  // 按钮圆角
-  borderRadius: getToken('borderRadiusButton'),
-  borderRadiusSM: getToken('borderRadiusButton'),
-  borderRadiusLG: getToken('borderRadiusButton'),
-  defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
-  primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
-  //  gFontFamilySecondaryBold: String = "Roboto"
-  //  fontWeight700: Font.Weight = .bold 改用 text 组件实现
-  // fontWeight: getToken(''),
-  // fontfamily: getToken(''),
+    // 主要按钮背景色
+    colorPrimary: getToken('colorButtonBackgroundPrimary'),
+    // 主要按钮 Hover
+    colorPrimaryHover: getToken('colorButtonBackgroundPrimary'),
+    colorPrimaryActive: getToken('colorButtonBackgroundPrimary'),
+    // colorPrimaryBg: getToken('colorButtonBackgroundPrimary'),
+    // 主要按钮文本颜色
+    primaryColor: getToken('colorButtonTextPrimary'),
+    // 次要按钮背景色 默认是白色
+    // 次要按钮文本颜色
+    defaultColor: getToken('colorButtonTextSecondary'),
+    // 次要按钮边框颜色
+    defaultBorderColor: getToken('colorButtonTextSecondary'),
+    // 禁用按钮背景色 Hover
+    colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+    borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+    colorTextDisabled: getToken('colorButtonTextDisabled'),
+    // Success 按钮背景色
+    green1: getToken('colorButtonBackgroundSuccess'),
+    green2: getToken('colorButtonBackgroundSuccess'),
+    green3: getToken('colorButtonBackgroundSuccess'),
+    green4: getToken('colorButtonBackgroundSuccess'),
+    green5: getToken('colorButtonBackgroundSuccess'),
+    green6: getToken('colorButtonBackgroundSuccess'),
+    green7: getToken('colorButtonBackgroundSuccess'),
+    // Inverse 反色配置 token配置不出来，用 inverse 判断处理。
+    // ghostBg: getToken('colorButtonBackgroundPrimaryInverse'),
+    // defaultGhostBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
+    // groupBorderColor: getToken('colorButtonBackgroundPrimaryInverse'),
+    // // 文本按钮的
+    // defaultGhostColor: getToken('colorButtonTextPrimaryInverse'),
+    // Inverse 反色配置 end
 
-  // 边框宽度
-  lineWidth: getToken('borderWidthButtonSecondary'),
-  // 默认文本按钮的文本色
-  textTextColor: getToken('colorButtonTextSecondary'),
-  // 按钮内间距
-  paddingInline: getToken('spacingButtonPaddingHorizontal'),
-  paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
-  paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
-  paddingBlock: getToken('spacingButtonPaddingVertical'),
-  paddingBlockSM: getToken('spacingButtonPaddingVertical'),
-  paddingBlockLG: getToken('spacingButtonPaddingVertical')
+    // 全局公用的：
+    // 按钮圆角
+    borderRadius: getToken('borderRadiusButton'),
+    borderRadiusSM: getToken('borderRadiusButton'),
+    borderRadiusLG: getToken('borderRadiusButton'),
+    defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
+    primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
+    //  gFontFamilySecondaryBold: String = "Roboto"
+    //  fontWeight700: Font.Weight = .bold 改用 text 组件实现
+    // fontWeight: getToken(''),
+    // fontfamily: getToken(''),
+
+    // 边框宽度
+    lineWidth: getToken('borderWidthButtonSecondary'),
+    // 默认文本按钮的文本色
+    textTextColor: getToken('colorButtonTextSecondary'),
+    // 按钮内间距
+    paddingInline: getToken('spacingButtonPaddingHorizontal'),
+    paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
+    paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
+    paddingBlock: getToken('spacingButtonPaddingVertical'),
+    paddingBlockSM: getToken('spacingButtonPaddingVertical'),
+    paddingBlockLG: getToken('spacingButtonPaddingVertical')
+  };
 };
-var inverseDesignTokens = {
-  // 算法配置
-  // algorithm: true,
+var useInverseDesignTokens = function useInverseDesignTokens() {
+  var getToken = useDynamicTokens();
+  return {
+    // 算法配置
+    // algorithm: true,
 
-  // 主要按钮背景色
-  colorPrimary: getToken('colorButtonBackgroundPrimaryInverse'),
-  // 主要按钮 Hover
-  colorPrimaryHover: getToken('colorButtonBackgroundPrimaryInverse'),
-  colorPrimaryActive: getToken('colorButtonBackgroundPrimaryInverse'),
-  // 主要按钮 Active
-  // colorPrimaryBg: getToken('colorButtonBackgroundPrimaryInverse'),
-  // 主要按钮文本颜色
-  primaryColor: getToken('colorButtonTextPrimaryInverse'),
-  // 次要按钮背景色 默认是白色
-  defaultBg: "rgba(255,255,255,0)",
-  defaultHoverBg: "rgba(255,255,255,0)",
-  defaultActiveBg: "rgba(255,255,255,0)",
-  // 次要按钮文本颜色
-  defaultColor: getToken('colorButtonTextSecondaryInverse'),
-  // 次要按钮边框颜色
-  defaultBorderColor: getToken('colorButtonSecondaryBorderInverse'),
-  // 禁用按钮背景色 Hover
-  colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
-  borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
-  colorTextDisabled: getToken('colorButtonTextDisabled'),
-  // Success 按钮背景色
-  green1: getToken('colorButtonBackgroundSuccess'),
-  green2: getToken('colorButtonBackgroundSuccess'),
-  green3: getToken('colorButtonBackgroundSuccess'),
-  green4: getToken('colorButtonBackgroundSuccess'),
-  green5: getToken('colorButtonBackgroundSuccess'),
-  green6: getToken('colorButtonBackgroundSuccess'),
-  green7: getToken('colorButtonBackgroundSuccess'),
-  // 全局公用的：
-  // 按钮圆角
-  borderRadius: getToken('borderRadiusButton'),
-  borderRadiusSM: getToken('borderRadiusButton'),
-  borderRadiusLG: getToken('borderRadiusButton'),
-  defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
-  primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
-  //  gFontFamilySecondaryBold: String = "Roboto"
-  //  fontWeight700: Font.Weight = .bold 改用 text 组件实现
-  // fontWeight: getToken(''),
-  // fontfamily: getToken(''),
+    // 主要按钮背景色
+    colorPrimary: getToken('colorButtonBackgroundPrimaryInverse'),
+    // 主要按钮 Hover
+    colorPrimaryHover: getToken('colorButtonBackgroundPrimaryInverse'),
+    colorPrimaryActive: getToken('colorButtonBackgroundPrimaryInverse'),
+    // 主要按钮 Active
+    // colorPrimaryBg: getToken('colorButtonBackgroundPrimaryInverse'),
+    // 主要按钮文本颜色
+    primaryColor: getToken('colorButtonTextPrimaryInverse'),
+    // 次要按钮背景色 默认是白色
+    defaultBg: "rgba(255,255,255,0)",
+    defaultHoverBg: "rgba(255,255,255,0)",
+    defaultActiveBg: "rgba(255,255,255,0)",
+    // 次要按钮文本颜色
+    defaultColor: getToken('colorButtonTextSecondaryInverse'),
+    // 次要按钮边框颜色
+    defaultBorderColor: getToken('colorButtonSecondaryBorderInverse'),
+    // 禁用按钮背景色 Hover
+    colorBgContainerDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+    borderColorDisabled: getToken('colorButtonBackgroundPrimaryDisable'),
+    colorTextDisabled: getToken('colorButtonTextDisabled'),
+    // Success 按钮背景色
+    green1: getToken('colorButtonBackgroundSuccess'),
+    green2: getToken('colorButtonBackgroundSuccess'),
+    green3: getToken('colorButtonBackgroundSuccess'),
+    green4: getToken('colorButtonBackgroundSuccess'),
+    green5: getToken('colorButtonBackgroundSuccess'),
+    green6: getToken('colorButtonBackgroundSuccess'),
+    green7: getToken('colorButtonBackgroundSuccess'),
+    // 全局公用的：
+    // 按钮圆角
+    borderRadius: getToken('borderRadiusButton'),
+    borderRadiusSM: getToken('borderRadiusButton'),
+    borderRadiusLG: getToken('borderRadiusButton'),
+    defaultShadow: '0 0px 0 rgba(0,0,0,0.02)',
+    primaryShadow: '0 0 0 rgba(5,145,255,0.1)',
+    //  gFontFamilySecondaryBold: String = "Roboto"
+    //  fontWeight700: Font.Weight = .bold 改用 text 组件实现
+    // fontWeight: getToken(''),
+    // fontfamily: getToken(''),
 
-  // 边框宽度
-  lineWidth: getToken('borderWidthButtonSecondary'),
-  // 默认文本按钮的文本色
-  textTextColor: getToken('colorButtonTextSecondary'),
-  // 按钮内间距
-  paddingInline: getToken('spacingButtonPaddingHorizontal'),
-  paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
-  paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
-  paddingBlock: getToken('spacingButtonPaddingVertical'),
-  paddingBlockSM: getToken('spacingButtonPaddingVertical'),
-  paddingBlockLG: getToken('spacingButtonPaddingVertical')
+    // 边框宽度
+    lineWidth: getToken('borderWidthButtonSecondary'),
+    // 默认文本按钮的文本色
+    textTextColor: getToken('colorButtonTextSecondary'),
+    // 按钮内间距
+    paddingInline: getToken('spacingButtonPaddingHorizontal'),
+    paddingInlineSM: getToken('spacingButtonPaddingHorizontal'),
+    paddingInlineLG: getToken('spacingButtonPaddingHorizontal'),
+    paddingBlock: getToken('spacingButtonPaddingVertical'),
+    paddingBlockSM: getToken('spacingButtonPaddingVertical'),
+    paddingBlockLG: getToken('spacingButtonPaddingVertical')
+  };
 };
 
-// export default designTokens;
-export { designTokens, inverseDesignTokens };
+// 导出钩子函数
+export { useDesignTokens, useInverseDesignTokens };

package/es/components/Button/index.d.ts

@@ -11,13 +11,22 @@ export interface ButtonThemeConfig {
         Button?: Record<string, any>;
         [key: string]: any;
     };
-    cssVar?: boolean;
+    cssVar?: {
+        /**
+         * @descCN css 变量的前缀
+         * @descEN Prefix for css variable.
+         * @default ant
+         */
+        prefix?: string;
+        /**
+         * @descCN 主题的唯一 key，版本低于 react@18 时需要手动设置。
+         * @descEN Unique key for theme, should be set manually < react@18.
+         */
+        key?: string;
+    } | boolean;
     hashed?: boolean;
     [key: string]: any;
 }
-export interface xDXpProps {
-    'x-dxp-prop'?: string;
-}
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'color'> {
     type?: ButtonType;
     color?: ButtonColorType;
@@ -35,5 +44,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     contentClassName?: string;
     [key: string]: any;
 }
-declare const ButtonWithContext: React.FC<ButtonProps>;
+declare const ButtonWithContext: React.FC<ButtonProps & {
+    getToken?: (tokenName: string) => string | number | boolean | undefined;
+}>;
 export default ButtonWithContext;

package/es/components/Button/index.js

@@ -2,20 +2,15 @@ import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["fontSize", "theme", "inverse", "parentTheme"];
-import React, { PureComponent } from 'react';
+var _excluded = ["children", "inverse", "fontSize", "theme", "parentTheme"];
+import React from 'react';
 import Text from "../Text";
 import { cssClasses } from "../../constants";
-import { noop } from "../../utils/noop";
-import { designTokens, inverseDesignTokens } from "./designTokens";
+import { noop } from "../../utils";
+import { useDesignTokens, useInverseDesignTokens } from "./designTokens";
 
 // 这种是另一方 定制 antd 的 style 的方式； 现在使用了上面的 designTokens.ts 的方式。
 import "./style/index.less";
@@ -26,88 +21,8 @@ import "./style/index.less";
 
 // 复用antd的Theme配置接口
 import { jsx as _jsx } from "react/jsx-runtime";
-// 实际的 Button 组件实现
-var ButtonComponent = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ButtonComponent, _PureComponent);
-  var _super = _createSuper(ButtonComponent);
-  function ButtonComponent() {
-    _classCallCheck(this, ButtonComponent);
-    return _super.apply(this, arguments);
-  }
-  _createClass(ButtonComponent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        inverse = _this$props.inverse,
-        fontSize = _this$props.fontSize,
-        theme = _this$props.theme,
-        parentTheme = _this$props.parentTheme;
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      var _this$props2 = this.props,
-        _ = _this$props2.fontSize,
-        __ = _this$props2.theme,
-        ___ = _this$props2.inverse,
-        ____ = _this$props2.parentTheme,
-        filteredProps = _objectWithoutProperties(_this$props2, _excluded);
-
-      // 获取基础token
-      var baseTokens = inverse ? inverseDesignTokens : designTokens;
-
-      // 处理theme属性 - 如果是对象格式，则按antd的Theme配置处理
-      var themeConfig = {
-        components: {
-          Button: baseTokens
-        },
-        token: {},
-        cssVar: true,
-        hashed: false
-      };
-
-      // 如果有父级配置，则与基础token合并
-      if (parentTheme) {
-        var _parentTheme$componen;
-        var parentButtonTokens = ((_parentTheme$componen = parentTheme.components) === null || _parentTheme$componen === void 0 ? void 0 : _parentTheme$componen.Button) || {};
-        var parentGlobalTokens = parentTheme.token || {};
-        themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), parentTheme), {}, {
-          token: _objectSpread(_objectSpread({}, themeConfig.token || {}), parentGlobalTokens),
-          components: _objectSpread(_objectSpread({}, parentTheme.components), {}, {
-            Button: _objectSpread(_objectSpread({}, baseTokens), parentButtonTokens)
-          })
-        });
-      }
-
-      // 如果用户传入了自定义theme配置(对象)，则合并处理
-      if (theme && _typeof(theme) === 'object') {
-        var _theme$components, _parentTheme$componen2;
-        // 获取用户自定义的Button token
-        var userButtonTokens = ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : _theme$components.Button) || {};
-        var userGlobalTokens = theme.token || {};
-        themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), theme), {}, {
-          token: _objectSpread(_objectSpread({}, themeConfig.token || {}), userGlobalTokens),
-          components: _objectSpread(_objectSpread(_objectSpread({}, themeConfig.components), theme.components), {}, {
-            Button: _objectSpread(_objectSpread(_objectSpread({}, baseTokens), (parentTheme === null || parentTheme === void 0 || (_parentTheme$componen2 = parentTheme.components) === null || _parentTheme$componen2 === void 0 ? void 0 : _parentTheme$componen2.Button) || {}), userButtonTokens)
-          })
-        });
-      }
-      return /*#__PURE__*/_jsx(_ConfigProvider, {
-        wave: {
-          disabled: true
-        },
-        prefixCls: cssClasses.PREFIX,
-        theme: themeConfig,
-        children: /*#__PURE__*/_jsx(_Button, _objectSpread(_objectSpread({}, filteredProps), {}, {
-          children: /*#__PURE__*/_jsx(Text, {
-            size: fontSize,
-            children: children
-          })
-        }))
-      });
-    }
-  }]);
-  return ButtonComponent;
-}(PureComponent); // 包装器函数组件，用于获取 ConfigProvider 上下文
-_defineProperty(ButtonComponent, "defaultProps", {
+// 默认属性
+var defaultProps = {
   disabled: false,
   size: 'large',
   type: 'default',
@@ -118,9 +33,89 @@ _defineProperty(ButtonComponent, "defaultProps", {
   onMouseEnter: noop,
   onMouseLeave: noop,
   prefixCls: cssClasses.PREFIX + '-button'
-});
+};
+
+// 提取主题合并逻辑为独立函数
+var mergeThemeConfig = function mergeThemeConfig(baseTokens, parentTheme, theme) {
+  var inverse = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  // 处理 dxp 定制 theme - 如果是对象格式，则按antd的Theme配置处理
+  var themeConfig = {
+    components: {
+      Button: baseTokens
+    },
+    token: {},
+    cssVar: {
+      prefix: cssClasses.PREFIX,
+      // 保持与 ConfigProvider 的 prefixCls 一致或你期望的 CSS 变量前缀
+      key: inverse ? 'inverse' : 'default' // 为 inverse 状态提供一个不同的 key
+    }
+  };
+
+  // 如果有父级配置，则与 dxp 定制 theme 合并
+  if (parentTheme) {
+    var _parentTheme$componen;
+    var parentButtonTokens = ((_parentTheme$componen = parentTheme.components) === null || _parentTheme$componen === void 0 ? void 0 : _parentTheme$componen.Button) || {};
+    var parentGlobalTokens = parentTheme.token || {};
+    themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), parentTheme), {}, {
+      token: _objectSpread(_objectSpread({}, themeConfig.token || {}), parentGlobalTokens),
+      components: _objectSpread(_objectSpread({}, parentTheme.components), {}, {
+        Button: _objectSpread(_objectSpread({}, baseTokens), parentButtonTokens)
+      })
+    });
+  }
+
+  // 如果还用户传入了自定义theme配置(对象)，也合并处理
+  if (theme && _typeof(theme) === 'object') {
+    var _theme$components, _parentTheme$componen2;
+    // 获取用户自定义的Button token
+    var userButtonTokens = ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : _theme$components.Button) || {};
+    var userGlobalTokens = theme.token || {};
+    themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), theme), {}, {
+      token: _objectSpread(_objectSpread({}, themeConfig.token || {}), userGlobalTokens),
+      components: _objectSpread(_objectSpread(_objectSpread({}, themeConfig.components), theme.components), {}, {
+        Button: _objectSpread(_objectSpread(_objectSpread({}, baseTokens), (parentTheme === null || parentTheme === void 0 || (_parentTheme$componen2 = parentTheme.components) === null || _parentTheme$componen2 === void 0 ? void 0 : _parentTheme$componen2.Button) || {}), userButtonTokens)
+      })
+    });
+  }
+  return themeConfig;
+};
+
+// 实际的 Button 组件实现 - 转为函数组件以使用hooks
+var ButtonComponent = function ButtonComponent(props) {
+  var children = props.children,
+    inverse = props.inverse,
+    fontSize = props.fontSize,
+    theme = props.theme,
+    parentTheme = props.parentTheme,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // 1、使用hooks获取动态tokens
+  var designTokens = useDesignTokens();
+  var inverseDesignTokens = useInverseDesignTokens();
+  // 2、获取基础token
+  var baseTokens = inverse ? inverseDesignTokens : designTokens;
+  // 3、合并 外部传入的主题配置
+  var themeConfig = mergeThemeConfig(baseTokens, parentTheme, theme, inverse);
+  // 应用默认属性
+  var mergedProps = _objectSpread(_objectSpread({}, defaultProps), restProps);
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    wave: {
+      disabled: true
+    },
+    prefixCls: cssClasses.PREFIX,
+    theme: themeConfig,
+    children: /*#__PURE__*/_jsx(_Button, _objectSpread(_objectSpread({}, mergedProps), {}, {
+      children: /*#__PURE__*/_jsx(Text, {
+        size: fontSize,
+        children: children
+      })
+    }))
+  });
+};
+
+// 包装器函数组件，用于获取 ConfigProvider
 var ButtonWithContext = function ButtonWithContext(props) {
-  // 使用 React 的 useContext 获取 ConfigProvider 上下文
+  //  获取 useContext 上下文
   var _React$useContext = React.useContext(_ConfigProvider.ConfigContext),
     parentTheme = _React$useContext.theme;
   return /*#__PURE__*/_jsx(ButtonComponent, _objectSpread(_objectSpread({}, props), {}, {

package/es/components/Button/style/index.less

@@ -5,7 +5,7 @@
 
 // 使用字符串拼接
 .@{prefix}-@{components} {
-  min-width: 128px;
+  min-width: 110px;
   padding-top: 8px;
   padding-bottom: 8px;
 

package/es/components/Card/designTokens.d.ts

@@ -0,0 +1,9 @@
+declare const useDesignTokens: () => {
+    borderColor: any;
+    spacingCardPaddingVertical: any;
+    spacingCardPaddingHorizontal: any;
+    borderRadius: string;
+    colorBackgroundSubtle2: any;
+    colorTextAmount: any;
+};
+export { useDesignTokens };

package/es/components/Card/designTokens.js

@@ -0,0 +1,14 @@
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderColor: getToken('colorDividerHorizontal'),
+    spacingCardPaddingVertical: getToken('spacingCardPaddingVertical'),
+    spacingCardPaddingHorizontal: getToken('spacingCardPaddingHorizontal'),
+    borderRadius: "".concat(getToken('borderRadiusCardMd'), "px"),
+    colorBackgroundSubtle2: getToken('colorBackgroundSubtle2'),
+    colorTextAmount: getToken('colorTextAmount')
+  };
+  return designTokens;
+};
+export { useDesignTokens };

package/es/components/Card/index.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import './style/index.less';
+export interface CardProps {
+    type?: 'default' | 'whiteDivider' | 'grayDivider';
+    className?: string;
+    children?: ReactNode;
+    list?: {
+        key: number;
+        content: ReactNode;
+    }[];
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Card: (props: CardProps) => React.JSX.Element;
+export default Card;

package/es/components/Card/index.js

@@ -0,0 +1,66 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "prefixCls", "type", "children", "extraTop", "extraBottom", "amountLabel", "amountValue"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { useDesignTokens } from "./designTokens";
+import { cssClasses } from "../../constants";
+import { Text, Amount } from "../";
+import "./style/index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Card = function Card(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? cssClasses.PREFIX + '-card' : _props$prefixCls,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'default' : _props$type,
+    children = props.children,
+    extraTop = props.extraTop,
+    extraBottom = props.extraBottom,
+    amountLabel = props.amountLabel,
+    amountValue = props.amountValue,
+    attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var borderColor = designTokens.borderColor,
+    spacingCardPaddingVertical = designTokens.spacingCardPaddingVertical,
+    spacingCardPaddingHorizontal = designTokens.spacingCardPaddingHorizontal,
+    borderRadius = designTokens.borderRadius,
+    colorBackgroundSubtle2 = designTokens.colorBackgroundSubtle2,
+    colorTextAmount = designTokens.colorTextAmount;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: [prefixCls]
+    }, function () {
+      return "\n      .".concat(prefixCls, " {\n        padding: ").concat(spacingCardPaddingVertical, "px ").concat(spacingCardPaddingHorizontal, "px;\n        border: 1px solid ").concat(borderColor, ";\n        border-radius: ").concat(borderRadius, ";\n        .").concat(prefixCls, "-amount {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: ").concat(spacingCardPaddingVertical, "px ").concat(spacingCardPaddingHorizontal, "px;\n          border-top-left-radius: 0;\n          border-top-right-radius: 0;\n          border-bottom-left-radius: ").concat(borderRadius, ";\n          border-bottom-right-radius: ").concat(borderRadius, ";\n          background: ").concat(colorBackgroundSubtle2, ";\n        }\n      }\n      .").concat(prefixCls, "-whiteDivider,\n      .").concat(prefixCls, "-grayDivider {\n        .").concat(prefixCls, "-list {\n          border-radius: ").concat(borderRadius, ";\n          > div {\n            padding: ").concat(spacingCardPaddingVertical / 2, "px ").concat(spacingCardPaddingHorizontal, "px;\n            &.").concat(prefixCls, "-hideTopPadding:first-child {\n              padding-top: 0;\n            }\n            &.").concat(prefixCls, "-hideBottomPadding:last-child {\n              padding-bottom: 0;\n            }\n          }\n        }}\n      .").concat(prefixCls, "-whiteDivider .").concat(prefixCls, "-list {\n        >div + div {\n          &::before,\n          &::after {\n            background: #fff;\n          }\n        }\n      }\n      .").concat(prefixCls, "-grayDivider .").concat(prefixCls, "-list {\n        >div + div {\n          &::before,\n          &::after {\n            background: ").concat(borderColor, ";\n          }\n        }\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  var getAmount = function getAmount() {
+    return amountValue ? /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-amount"),
+      children: [/*#__PURE__*/_jsx(Text, {
+        size: "ContentC15Bold",
+        children: amountLabel
+      }), /*#__PURE__*/_jsx(Amount, {
+        showIcon: false,
+        title: "",
+        priceColor: colorTextAmount,
+        children: amountValue
+      })]
+    }) : extraBottom;
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(type, " ").concat(className)
+  }, attr), {}, {
+    children: [extraTop, /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-list"),
+      children: children
+    }), getAmount()]
+  }));
+};
+export default Card;