best-unit 0.0.37 → 0.0.39

package/dist/types/global.d.ts

@@ -7,15 +7,15 @@ export declare function initFundUnit(params: {
   merchant_id?: string;
   biz_type?: string;
   fund_balance_id?: string;
-  theme?: string;
-  locale?: "zh" | "en";
+  theme?: Theme;
+  locale?: Locale;
 }): {
   token: string;
   merchantId?: string;
   bizType?: string;
   fundBalanceId?: string;
-  theme?: string;
-  locale: "zh" | "en";
+  theme?: Theme;
+  locale: Locale;
 };
 
 // Vite 代理配置类型

package/dist/types/index.ts

@@ -0,0 +1,9 @@
+export enum Locale {
+  ZH = "zh",
+  EN = "en",
+}
+
+export enum Theme {
+  WHITE = "white",
+  DARK = "dark",
+}

package/package.json

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

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

@@ -3,6 +3,7 @@ import { Upload } from "../../../common/Upload";
 import { createOfflineRecharge } from "../../../../api";
 import { message } from "../../../common/Message";
 import { t } from "../../../../local";
+import { Theme } from "../../../../types";
 
 interface OfflineTransferFormProps {
   formState: {
@@ -17,16 +18,18 @@ interface OfflineTransferFormProps {
   setFormState: (fn: (state: any) => any) => void;
   onClose: () => void;
   loading: boolean;
-  whiteTheme?: boolean;
 }
 
 export const OfflineTransferForm: FunctionalComponent<
   OfflineTransferFormProps
-> = ({ formState, setFormState, onClose, loading, whiteTheme = false }) => {
+> = ({ formState, setFormState, onClose, loading }) => {
   const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
   console.log(allDicts, "allDicts");
   const channelDict = allDicts?.channel || [];
-
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
   // 样式对象
   const theme = whiteTheme
     ? {

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

@@ -1,5 +1,6 @@
 import type { FunctionalComponent } from "preact";
 import { t } from "../../../../local";
+import { Theme } from "../../../../types";
 
 interface OnlineRechargeFormProps {
   formState: {
@@ -15,16 +16,19 @@ interface OnlineRechargeFormProps {
   setFormState: (fn: (state: any) => any) => void;
   onClose: () => void;
   loading: boolean;
-  whiteTheme?: boolean;
 }
 
 export const OnlineRechargeForm: FunctionalComponent<
   OnlineRechargeFormProps
-> = ({ formState, setFormState, onClose, loading, whiteTheme = false }) => {
+> = ({ formState, setFormState, onClose, loading }) => {
   const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
   const currencyDict = allDicts?.currency || [];
   const channelDict =
     allDicts?.channel?.filter((item: any) => item.payment_support) || [];
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
 
   const theme = whiteTheme
     ? {

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

@@ -2,6 +2,7 @@ import { useState, useEffect } from "preact/hooks";
 import { OnlineRechargeForm } from "./OnlineRechargeForm";
 import { OfflineTransferForm } from "./OfflineTransferForm";
 import { t } from "../../../../local";
+import { Theme } from "../../../../types";
 
 interface ModalFormProps {
   visible: boolean;
@@ -17,13 +18,7 @@ interface ModalFormProps {
   token?: string;
 }
 
-export function Recharge({
-  visible,
-  onClose,
-  onSubmit,
-  color,
-  whiteTheme = true,
-}: ModalFormProps & { whiteTheme?: boolean }) {
+export function Recharge({ visible, onClose, onSubmit }: ModalFormProps) {
   const [formState, setFormState] = useState({
     amount: "",
     rechargeChannel: "",
@@ -115,6 +110,11 @@ export function Recharge({
     }
   };
 
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+
   const theme = whiteTheme
     ? {
         modalBg: "#fff",
@@ -221,7 +221,7 @@ export function Recharge({
           borderRadius: 12,
           minWidth: 400,
           maxWidth: 400,
-          color: color || theme.modalColor,
+          color: theme.modalColor,
           boxShadow: theme.modalBoxShadow,
           position: "relative",
         }}
@@ -261,7 +261,6 @@ export function Recharge({
             setFormState={setFormState}
             onClose={onClose}
             loading={formState.loading}
-            whiteTheme={whiteTheme}
           />
         ) : (
           <OfflineTransferForm
@@ -269,7 +268,6 @@ export function Recharge({
             setFormState={setOfflineFormState}
             onClose={onClose}
             loading={offlineFormState.loading}
-            whiteTheme={whiteTheme}
           />
         )}
       </form>

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

@@ -5,11 +5,8 @@ import register from "preact-custom-element";
 import { createOnlineRecharge } from "../../../api";
 import { t } from "../../../local";
 
-export function BestUnit(props: any) {
+export function BestUnit() {
   const [visible, setVisible] = useState(false);
-  const [whiteTheme, setWhiteTheme] = useState(true);
-  const color = props.theme?.primaryColor;
-
   const handleSubmit = async (form: {
     amount: string;
     rechargeChannel: string;
@@ -25,27 +22,13 @@ export function BestUnit(props: any) {
 
   return (
     <div>
-      <ThemedButton color={color} onClick={() => setVisible(true)}>
+      <ThemedButton onClick={() => setVisible(true)}>
         {t("充值/转账")}
       </ThemedButton>
-      <button
-        style={{
-          marginLeft: 16,
-          padding: "8px 16px",
-          borderRadius: 6,
-          border: "1px solid #eee",
-          cursor: "pointer",
-        }}
-        onClick={() => setWhiteTheme((v) => !v)}
-      >
-        {whiteTheme ? t("切换为暗黑主题") : t("切换为白色主题")}
-      </button>
       <Recharge
         visible={visible}
         onClose={() => setVisible(false)}
         onSubmit={handleSubmit}
-        color={color}
-        whiteTheme={whiteTheme}
       />
     </div>
   );

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

@@ -3,6 +3,7 @@ import HoverPopover, { type PopoverPosition } from "../../common/HoverPopover";
 import { getBalance } from "../../../api";
 import { t } from "../../../local";
 import register from "preact-custom-element";
+import { Theme } from "../../../types";
 
 function formatNumber(num: number) {
   return num.toLocaleString("en-US", {
@@ -11,6 +12,105 @@ function formatNumber(num: number) {
   });
 }
 
+const balanceTheme = {
+  white: {
+    popoverTitle: {
+      fontSize: 16,
+      fontWeight: 600,
+      color: "#222",
+      marginBottom: 16,
+      textAlign: "center",
+    },
+    detailRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "8px 0",
+      borderBottom: "1px solid #e5e7eb",
+      fontSize: 15,
+    },
+    detailLabel: {
+      display: "flex",
+      alignItems: "center",
+      color: "#6b7280",
+      fontWeight: 500,
+    },
+    detailDot: (color: string) => ({
+      display: "inline-block",
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: color,
+      marginRight: 8,
+    }),
+    detailValue: (color: string) => ({
+      color,
+      fontWeight: 600,
+      fontSize: 15,
+    }),
+    main: {
+      fontSize: 24,
+      fontWeight: 800,
+      color: "#111827",
+      display: "inline-block",
+    },
+    currency: {
+      fontSize: 18,
+      color: "#6b7280",
+      marginLeft: 8,
+      fontWeight: 600,
+    },
+  },
+  dark: {
+    popoverTitle: {
+      fontSize: 16,
+      fontWeight: 600,
+      color: "#fff",
+      marginBottom: 16,
+      textAlign: "center",
+    },
+    detailRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "8px 0",
+      borderBottom: "1px solid #23262F",
+      fontSize: 15,
+    },
+    detailLabel: {
+      display: "flex",
+      alignItems: "center",
+      color: "#B5B8BE",
+      fontWeight: 500,
+    },
+    detailDot: (color: string) => ({
+      display: "inline-block",
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: color,
+      marginRight: 8,
+    }),
+    detailValue: (color: string) => ({
+      color,
+      fontWeight: 600,
+      fontSize: 15,
+    }),
+    main: {
+      fontSize: 24,
+      fontWeight: 800,
+      color: "#fff",
+      display: "inline-block",
+    },
+    currency: {
+      fontSize: 18,
+      color: "#B5B8BE",
+      marginLeft: 8,
+      fontWeight: 600,
+    },
+  },
+};
+
 function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
   const [balanceData, setBalanceData] = useState({
     available: 0,
@@ -65,56 +165,24 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
     fetchBalance();
   }, []);
 
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+  const theme = balanceTheme[whiteTheme ? "white" : "dark"];
+
   return (
     <HoverPopover
       popover={
         <>
-          <div
-            style={{
-              fontSize: 16,
-              fontWeight: 600,
-              color: "#222",
-              marginBottom: 16,
-              textAlign: "center",
-            }}
-          >
-            {t("余额详情")}
-          </div>
+          <div style={theme.popoverTitle}>{t("余额详情")}</div>
           {balanceData.details.map((item) => (
-            <div
-              key={item.label}
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                padding: "8px 0",
-                borderBottom: "1px solid #e5e7eb",
-                fontSize: 15,
-              }}
-            >
-              <span
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  color: "#6b7280",
-                  fontWeight: 500,
-                }}
-              >
-                <span
-                  style={{
-                    display: "inline-block",
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    background: item.dot,
-                    marginRight: 8,
-                  }}
-                />
+            <div key={item.label} style={theme.detailRow}>
+              <span style={theme.detailLabel}>
+                <span style={theme.detailDot(item.dot)} />
                 {item.label}
               </span>
-              <span
-                style={{ color: item.color, fontWeight: 600, fontSize: 15 }}
-              >
+              <span style={theme.detailValue(item.color)}>
                 {balanceData.symbol}
                 {formatNumber(item.value)}
               </span>
@@ -124,26 +192,10 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
       }
       popoverPosition={props.popoverPosition || "bottom"}
     >
-      <div
-        style={{
-          fontSize: 24,
-          fontWeight: 800,
-          color: "#111827",
-          display: "inline-block",
-        }}
-      >
+      <div style={theme.main}>
         {balanceData.symbol}
         {formatNumber(balanceData.available)}
-        <span
-          style={{
-            fontSize: 18,
-            color: "#6b7280",
-            marginLeft: 8,
-            fontWeight: 600,
-          }}
-        >
-          {balanceData.currency}
-        </span>
+        <span style={theme.currency}>{balanceData.currency}</span>
       </div>
     </HoverPopover>
   );

package/src/components/common/HoverPopover.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef } from "preact/hooks";
 import type { FunctionalComponent, JSX } from "preact";
+import { Theme } from "../../types";
 
 export type PopoverPosition = "top" | "bottom" | "leftTop" | "rightTop";
 interface HoverPopoverProps {
@@ -65,22 +66,56 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
     }, 120);
   };
 
+  const popoverTheme = {
+    white: {
+      popover: {
+        background: "#fff",
+        color: "#222",
+        boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+        border: "none",
+      },
+      arrow: {
+        top: "#fff",
+        bottom: "#fff",
+        left: "#fff",
+        right: "#fff",
+      },
+    },
+    dark: {
+      popover: {
+        background: "#23262F",
+        color: "#fff",
+        boxShadow: "0 4px 16px rgba(0,0,0,0.32)",
+        border: "1px solid #444C5C",
+      },
+      arrow: {
+        top: "#23262F",
+        bottom: "#23262F",
+        left: "#23262F",
+        right: "#23262F",
+      },
+    },
+  };
+
   // 弹层定位样式
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+  const theme = popoverTheme[whiteTheme ? "white" : "dark"];
+
   let popoverStyle: any = {
     position: "absolute",
     zIndex: 999,
-    background: "#fff",
-    color: "#222",
     borderRadius: 6,
     fontSize: 15,
     minWidth: popoverMinWidth,
     width: popoverWidth,
     padding: "8px 14px",
-    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
     pointerEvents: "auto",
     textAlign: "center",
-    border: "none",
     animation: "fadeInUp 0.3s",
+    ...theme.popover,
   };
   let arrowStyle: any = {
     position: "absolute",
@@ -102,7 +137,7 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
       transform: "translateX(-50%)",
       borderLeft: "8px solid transparent",
       borderRight: "8px solid transparent",
-      borderTop: "8px solid #fff",
+      borderTop: `8px solid ${theme.arrow.top}`,
     };
   } else if (position === "bottom") {
     popoverStyle = {
@@ -119,7 +154,7 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
       transform: "translateX(-50%)",
       borderLeft: "8px solid transparent",
       borderRight: "8px solid transparent",
-      borderBottom: "8px solid #fff",
+      borderBottom: `8px solid ${theme.arrow.bottom}`,
     };
   } else if (position === "leftTop") {
     popoverStyle = {
@@ -135,7 +170,7 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
       top: 12,
       borderTop: "8px solid transparent",
       borderBottom: "8px solid transparent",
-      borderLeft: "8px solid #fff",
+      borderLeft: `8px solid ${theme.arrow.left}`,
     };
   } else if (position === "rightTop") {
     popoverStyle = {
@@ -151,7 +186,7 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
       top: 12,
       borderTop: "8px solid transparent",
       borderBottom: "8px solid transparent",
-      borderRight: "8px solid #fff",
+      borderRight: `8px solid ${theme.arrow.right}`,
     };
   }
 

package/src/components/common/Upload.tsx

@@ -2,6 +2,7 @@ import type { FunctionalComponent } from "preact";
 import { useRef, useState } from "preact/hooks";
 import { uploadFile } from "../../api";
 import { t } from "../../local";
+import { Theme } from "../../types";
 
 interface UploadProps {
   value?: string[];
@@ -12,6 +13,85 @@ interface UploadProps {
   disabled?: boolean;
 }
 
+const uploadTheme = {
+  white: {
+    container: {
+      border: "1px dashed #E5E6EB",
+      borderRadius: 8,
+      background: "#FCFCFD",
+      padding: 24,
+      textAlign: "center",
+      cursor: "pointer",
+      minHeight: 120,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#999",
+      fontSize: 15,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      background: "#F7F8FA",
+      borderRadius: 8,
+      padding: "12px 16px",
+      marginBottom: 8,
+      fontSize: 15,
+      color: "#222",
+      justifyContent: "space-between",
+    },
+    removeBtn: {
+      background: "#FF4D4F",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: "4px 14px",
+      fontSize: 15,
+      marginLeft: 16,
+      cursor: "pointer",
+    },
+  },
+  dark: {
+    container: {
+      border: "1.5px dashed #444C5C",
+      borderRadius: 8,
+      background: "#181A20",
+      padding: 24,
+      textAlign: "center",
+      cursor: "pointer",
+      minHeight: 120,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#999",
+      fontSize: 15,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      background: "#23262F",
+      borderRadius: 8,
+      padding: "12px 16px",
+      marginBottom: 8,
+      fontSize: 15,
+      color: "#fff",
+      justifyContent: "space-between",
+    },
+    removeBtn: {
+      background: "#FF4D4F",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: "4px 14px",
+      fontSize: 15,
+      marginLeft: 16,
+      cursor: "pointer",
+    },
+  },
+};
+
 export const Upload: FunctionalComponent<UploadProps> = ({
   value = [],
   onChange,
@@ -23,6 +103,12 @@ export const Upload: FunctionalComponent<UploadProps> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
   const [progress, setProgress] = useState(0);
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+  const themeKey = whiteTheme ? "white" : "dark";
+  const theme = uploadTheme[themeKey];
 
   const handleFileChange = async (e: any) => {
     const files: File[] = Array.from(e.target.files as FileList).slice(
@@ -60,19 +146,8 @@ export const Upload: FunctionalComponent<UploadProps> = ({
     <div>
       <div
         style={{
-          border: "1px dashed #E5E6EB",
-          borderRadius: 8,
-          background: "#FCFCFD",
-          padding: 24,
-          textAlign: "center",
-          cursor: disabled ? "not-allowed" : "pointer",
-          minHeight: 120,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "#999",
-          fontSize: 15,
+          ...theme.container,
+          cursor: disabled ? "not-allowed" : theme.container.cursor,
           opacity: disabled ? 0.6 : 1,
         }}
         onClick={() => !disabled && fileInputRef.current?.click()}
@@ -103,20 +178,7 @@ export const Upload: FunctionalComponent<UploadProps> = ({
       {value && value.length > 0 && (
         <div style={{ marginTop: 12 }}>
           {value.map((url, idx) => (
-            <div
-              key={url}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                background: "#F7F8FA",
-                borderRadius: 8,
-                padding: "12px 16px",
-                marginBottom: 8,
-                fontSize: 15,
-                color: "#222",
-                justifyContent: "space-between",
-              }}
-            >
+            <div key={url} style={theme.fileItem}>
               <div style={{ display: "flex", alignItems: "center", flex: 1 }}>
                 <span style={{ fontWeight: 500, wordBreak: "break-all" }}>
                   {url.split("/").pop()}
@@ -131,16 +193,7 @@ export const Upload: FunctionalComponent<UploadProps> = ({
                   e.stopPropagation();
                   handleRemove(idx);
                 }}
-                style={{
-                  background: "#FF4D4F",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: 6,
-                  padding: "4px 14px",
-                  fontSize: 15,
-                  marginLeft: 16,
-                  cursor: "pointer",
-                }}
+                style={theme.removeBtn}
                 disabled={disabled}
               >
                 {t("移除")}