best-unit 1.2.2 → 1.2.4

package/dist/types/global.d.ts

@@ -11,6 +11,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  themeConfig?: ThemeConfig;
 }): {
   token: string;
   merchantId?: string;
@@ -19,6 +20,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale: Locale;
   env: Env;
+  themeConfig?: ThemeConfig;
 };
 
 export declare function getBalanceData(): any;

package/dist/types/index.ts

@@ -15,3 +15,13 @@ export enum Env {
   PROD = "prod",
   PRODUCTION = "production",
 }
+
+
+export interface ThemeConfig {
+  white?: {
+    color?: string;
+  };
+  dark?: {
+    color?: string;
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "best-unit",
   "private": false,
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "main": "dist/best-unit.cjs",
   "module": "dist/best-unit.js",

package/src/components/business/recharge-sdk/components/offline-transfer-form/theme.tsx

@@ -1,4 +1,4 @@
-import { Theme } from "@/types";
+import { Theme, type ThemeConfig } from "@/types";
 import { getInitParams } from "@/utils/business";
 
 export const offlineTransferFormThemes = {
@@ -116,7 +116,7 @@ export const offlineTransferFormThemes = {
       padding: "10px 12px",
       borderRadius: 6,
       boxSizing: "border-box",
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
       background: "#23262F",
       color: "#fff",
       fontSize: 15,
@@ -130,7 +130,7 @@ export const offlineTransferFormThemes = {
       width: "100%",
       padding: "10px 12px",
       borderRadius: 6,
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
       background: "#23262F",
       color: "#fff",
       fontSize: 15,
@@ -140,7 +140,7 @@ export const offlineTransferFormThemes = {
       border: "1px solid #ff4d4f",
     },
     upload: {
-      border: "1px dashed #23262F",
+      border: "1px dashed #374151",
       borderRadius: 8,
       background: "#181A20",
       padding: 24,
@@ -208,8 +208,25 @@ export const offlineTransferFormThemes = {
 
 export function getOfflineTransferFormTheme() {
   const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
   const whiteTheme = theme === Theme.WHITE;
-  return whiteTheme
+  const baseTheme = whiteTheme
     ? offlineTransferFormThemes.white
     : offlineTransferFormThemes.dark;
+  console.log(themeConfig, "themeConfig");
+  // 如果初始化时传入了按钮配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        buttonSubmit: {
+          ...baseTheme.buttonSubmit,
+          background: config.color,
+        },
+      };
+    }
+  }
+
+  return baseTheme;
 }

package/src/components/business/recharge-sdk/components/online-recharge-form/theme.tsx

@@ -1,4 +1,4 @@
-import { Theme } from "@/types";
+import { Theme, type ThemeConfig } from "@/types";
 import { getInitParams } from "@/utils/business";
 
 export const onlineRechargeFormThemes = {
@@ -76,7 +76,7 @@ export const onlineRechargeFormThemes = {
       padding: "10px 12px",
       borderRadius: 6,
       boxSizing: "border-box",
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
       background: "#23262F",
       color: "#fff",
       fontSize: 15,
@@ -128,8 +128,24 @@ export const onlineRechargeFormThemes = {
 
 export function getOnlineRechargeFormTheme() {
   const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
   const whiteTheme = theme === Theme.WHITE;
-  return whiteTheme
+  const baseTheme = whiteTheme
     ? onlineRechargeFormThemes.white
     : onlineRechargeFormThemes.dark;
+  // 如果初始化时传入了按钮配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        buttonSubmit: {
+          ...baseTheme.buttonSubmit,
+          background: config.color,
+        },
+      };
+    }
+  }
+
+  return baseTheme;
 }

package/src/components/business/recharge-sdk/components/recharge/theme.tsx

@@ -1,4 +1,4 @@
-import { Theme } from "@/types";
+import { Theme, type ThemeConfig } from "@/types";
 import { getInitParams } from "@/utils/business";
 
 export const rechargeThemes = {
@@ -40,8 +40,26 @@ export const rechargeThemes = {
   },
 };
 
+
 export function getRechargeTheme() {
   const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
   const whiteTheme = theme === Theme.WHITE;
-  return whiteTheme ? rechargeThemes.white : rechargeThemes.dark;
+  const baseTheme = whiteTheme ? rechargeThemes.white : rechargeThemes.dark;
+
+  // 如果初始化时传入了主题配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        tabBtn: (active: boolean, left: boolean) => ({
+          ...baseTheme.tabBtn(active, left),
+          color: active ? config.color : baseTheme.tabBtn(active, left).color,
+        }),
+      };
+    }
+  }
+
+  return baseTheme;
 }

package/src/components/business/recharge-sdk/index.tsx

@@ -22,9 +22,7 @@ export function BestUnit() {
 
   return (
     <div>
-      <Button onClick={() => setVisible(true)}>
-        {t("充值/转账")}
-      </Button>
+      <Button onClick={() => setVisible(true)}>{t("充值/转账")}</Button>
       <Recharge
         visible={visible}
         onClose={() => setVisible(false)}

package/src/components/business/statistical-balance/index.tsx

@@ -42,7 +42,7 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
       const details: DetailItem[] = [
         {
           label: "", // 翻译在渲染时处理
-          value: balance.availableAmount,
+          value: balance.totalAmount,
           color: "#15b36b",
           dot: "#15b36b",
         },
@@ -70,7 +70,7 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
           : []),
         {
           label: "",
-          value: balance.totalAmount,
+          value: balance.availableAmount,
           color: "#1890ff",
           dot: "#15b36b",
         },

package/src/components/common/button/theme.tsx

@@ -1,4 +1,4 @@
-import { Theme } from "@/types";
+import { Theme, type ThemeConfig } from "@/types";
 import { getInitParams } from "@/utils/business";
 
 export const buttonThemes = {
@@ -26,14 +26,23 @@ export const buttonThemes = {
 
 export function getButtonTheme(color?: string) {
   const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
   const whiteTheme = theme === Theme.WHITE;
+
+  // 优先使用传入的 color 参数，其次使用 themeConfig 中的配置
+  let buttonColor = color;
+  if (!buttonColor && themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    buttonColor = config?.color;
+  }
+
   return whiteTheme
     ? {
         ...buttonThemes.white,
-        background: color || buttonThemes.white.background,
+        background: buttonColor || buttonThemes.white.background,
       }
     : {
         ...buttonThemes.dark,
-        background: color || buttonThemes.dark.background,
+        background: buttonColor || buttonThemes.dark.background,
       };
 }

package/src/components/common/select/theme.tsx

@@ -42,12 +42,12 @@ export const selectThemes = {
     trigger: {
       background: "#23262F",
       color: "#fff",
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
     },
     triggerDisabled: {
       background: "#23262F",
       color: "#666",
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
     },
     triggerError: {
       background: "#23262F",
@@ -56,7 +56,7 @@ export const selectThemes = {
     },
     dropdown: {
       background: "#23262F",
-      border: "1px solid #23262F",
+      border: "1px solid #374151",
       color: "#fff",
     },
     option: (active: boolean, optDisabled: boolean, hovered: boolean) => ({

package/src/demo/App.tsx

@@ -43,6 +43,14 @@ export default function DemoApp() {
       locale: locale as Locale,
       theme: theme ?? Theme.WHITE,
       env: env ?? currentEnv,
+      themeConfig: {
+        white: {
+          color: "red",
+        },
+        dark: {
+          color: "pink",
+        },
+      },
     });
   };
 

package/src/demo/theme-config-example.tsx

@@ -0,0 +1 @@
+

package/src/types/global.d.ts

@@ -11,6 +11,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  themeConfig?: ThemeConfig;
 }): {
   token: string;
   merchantId?: string;
@@ -19,6 +20,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale: Locale;
   env: Env;
+  themeConfig?: ThemeConfig;
 };
 
 export declare function getBalanceData(): any;

package/src/types/index.ts

@@ -15,3 +15,13 @@ export enum Env {
   PROD = "prod",
   PRODUCTION = "production",
 }
+
+
+export interface ThemeConfig {
+  white?: {
+    color?: string;
+  };
+  dark?: {
+    color?: string;
+  };
+}

package/src/utils/business/index.ts

@@ -16,6 +16,15 @@ export interface BalanceData {
   createdAt: string; // 创建时间
 }
 
+interface ThemeConfig {
+  white?: {
+    color?: string;
+  };
+  dark?: {
+    color?: string;
+  };
+}
+
 export interface InitParams {
   token: string;
   merchant_id?: string;
@@ -25,6 +34,7 @@ export interface InitParams {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  themeConfig?: ThemeConfig;
 }
 
 // 获取余额数据并暴露给外部系统
@@ -46,6 +56,7 @@ export function initFundUnit(params: InitParams) {
     theme = Theme.WHITE,
     locale = Locale.ZH,
     env,
+    themeConfig,
   } = params;
   const token = "Bearer " + params.token;
   sessionStorage.setItem(
@@ -59,6 +70,7 @@ export function initFundUnit(params: InitParams) {
       theme,
       locale,
       env,
+      themeConfig,
     })
   );
   // 重置 axios 实例，确保使用新的配置