npm - best-unit - Versions diffs - 1.2.19 → 1.2.21 - Mend

best-unit 1.2.19 → 1.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/BEST_UNIT_USAGE.md +402 -0
package/dist/best-unit.cjs +13 -13
package/dist/best-unit.js +1352 -1328
package/index.html +13 -0
package/package.json +1 -4
package/src/api/axiosInstance.ts +111 -0
package/src/api/index.ts +136 -0
package/src/api/proxy.ts +11 -0
package/src/components/business/recharge-sdk/components/offline-transfer-form/index.tsx +158 -0
package/src/components/business/recharge-sdk/components/offline-transfer-form/theme.tsx +238 -0
package/src/components/business/recharge-sdk/components/online-recharge-form/index.tsx +199 -0
package/src/components/business/recharge-sdk/components/online-recharge-form/theme.tsx +159 -0
package/src/components/business/recharge-sdk/components/recharge/index.tsx +152 -0
package/src/components/business/recharge-sdk/components/recharge/theme.tsx +68 -0
package/src/components/business/recharge-sdk/index.tsx +37 -0
package/src/components/business/refresh-button/index.tsx +99 -0
package/src/components/business/refresh-button/theme.tsx +58 -0
package/src/components/business/statistical-balance/index.tsx +190 -0
package/src/components/business/statistical-balance/theme.tsx +117 -0
package/src/components/common/button/index.tsx +17 -0
package/src/components/common/button/theme.tsx +56 -0
package/src/components/common/hover-popover/index.tsx +182 -0
package/src/components/common/hover-popover/theme.tsx +39 -0
package/src/components/common/message/index.tsx +321 -0
package/src/components/common/message/theme.tsx +25 -0
package/src/components/common/modal/index.tsx +99 -0
package/src/components/common/modal/theme.tsx +99 -0
package/src/components/common/select/index.tsx +229 -0
package/src/components/common/select/theme.tsx +104 -0
package/src/components/common/upload/index.tsx +140 -0
package/src/components/common/upload/theme.tsx +95 -0
package/src/demo/App.tsx +685 -0
package/src/demo/index.tsx +4 -0
package/src/demo/testBalanceData.tsx +79 -0
package/src/demo/theme-config-example.tsx +1 -0
package/src/local/en.ts +64 -0
package/src/local/index.ts +36 -0
package/src/local/zh.ts +63 -0
package/src/main.ts +26 -0
package/src/types/global.d.ts +146 -0
package/src/types/index.ts +31 -0
package/src/types/preact-custom-element.d.ts +1 -0
package/src/utils/business/index.ts +132 -0
package/src/utils/common/index.ts +8 -0
package/src/vite-env.d.ts +8 -0
package/tsconfig.app.json +33 -0
package/tsconfig.json +15 -0
package/tsconfig.node.json +24 -0
package/vite.config.ts +24 -0

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Best Unit</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/demo/index.tsx"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,14 +1,11 @@
 {
   "name": "best-unit",
   "private": false,
-  "version": "1.2.19",
+  "version": "1.2.21",
   "type": "module",
   "main": "dist/best-unit.cjs",
   "module": "dist/best-unit.js",
   "types": "dist/types/global.d.ts",
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc --noEmit && vite build && cp -r src/types dist/types",

package/src/api/axiosInstance.ts ADDED Viewed

@@ -0,0 +1,111 @@
+import axios from "axios";
+import type {
+  AxiosInstance,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
+import { message } from "@/components/common/message";
+import { Env, Locale } from "@/types";
+export interface CreateAxiosOptions {
+  baseURL?: string;
+  timeout?: number;
+  onError?: (msg: string, error: any) => void;
+}
+export function createAxiosInstance(options: CreateAxiosOptions = {}) {
+  // 根据 fund_unit_params 中的 env 参数选择 API URL
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  console.log("fundUnitParams", fundUnitParams);
+  const { env } = fundUnitParams;
+  let apiUrl: string;
+  switch (env) {
+    case Env.DEV:
+    case Env.DEVELOPMENT:
+      apiUrl = "/api";
+      break;
+    case Env.TEST:
+      apiUrl = "https://fund.bestfulfill.tech/api/sdk";
+      break;
+    case Env.PROD:
+    case Env.PRODUCTION:
+    default:
+      apiUrl = "https://fund.bestfulfill.com/api/sdk";
+      break;
+  }
+  const { baseURL = apiUrl, timeout = 10000, onError } = options;
+  const instance: AxiosInstance = axios.create({ baseURL, timeout });
+  // 请求拦截：加 token、国际化
+  instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+    const { token, locale } = fundUnitParams;
+    config.headers = {
+      ...config.headers,
+      Authorization: token,
+      "x-locale": locale === Locale.ZH ? "zh-CN" : "en-US",
+    } as any;
+    return config;
+  });
+  // 响应拦截：code=0判定成功，其他走 onError
+  instance.interceptors.response.use(
+    (response: AxiosResponse) => {
+      if (response.data && response.data.code === 0) {
+        return response.data;
+      }
+      const errorMsg =
+        response.data?.msg || response.data?.message || "未知错误";
+      // 显示错误消息
+      message.error(errorMsg);
+      if (onError) {
+        onError(errorMsg, response);
+      }
+      return Promise.reject(response.data || { message: "未知错误" });
+    },
+    (error) => {
+      const errorMsg =
+        error.response?.data?.msg ||
+        error.response?.data?.message ||
+        error.message ||
+        "网络请求失败";
+      // 显示错误消息
+      message.error(errorMsg);
+      if (onError) {
+        onError(errorMsg, error);
+      }
+      return Promise.reject(error);
+    }
+  );
+  return instance;
+}
+// 缓存 axios 实例
+let httpInstance: AxiosInstance | null = null;
+// 获取 axios 实例的函数
+export function http(): AxiosInstance {
+  if (!httpInstance) {
+    httpInstance = createAxiosInstance();
+  }
+  return httpInstance;
+}
+// 重置 axios 实例（当 fund_unit_params 更新时调用）
+export function resetHttpInstance(): void {
+  httpInstance = null;
+}
+// 默认导出获取实例的函数
+export default http;

package/src/api/index.ts ADDED Viewed

@@ -0,0 +1,136 @@
+import { http } from "./axiosInstance";
+import type { AxiosProgressEvent } from "axios";
+// 获取余额
+export function getBalance() {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  return http()
+    .get("/balance", {
+      params: {
+        merchant_id: fundUnitParams.merchantId,
+        biz_type: fundUnitParams.bizType,
+        fund_balance_id: fundUnitParams.fundBalanceId,
+      },
+    })
+    .then((res) => {
+      const data = res.data;
+      const balanceData = {
+        fundBalanceId: data.fund_balance_id,
+        merchantId: data.merchant_id,
+        bizType: data.biz_type,
+        currency: data.currency,
+        totalAmount: data.total_amount,
+        frozenAmount: data.frozen_amount,
+        creditLimit: data.credit_config?.credit_limit,
+        creditUsed: data.credit_used,
+        isCredit: data.credit_config ? true : false,
+        availableAmount: data.available_amount,
+        pendingAmount: data.pending_amount,
+        status: data.status,
+        createdAt: data.created_at,
+      };
+      sessionStorage.setItem("balanceData", JSON.stringify(balanceData));
+      return balanceData;
+    });
+}
+// 获取所有字典
+export const getAllDicts = async () => {
+  return http()
+    .get("/all-dicts", {})
+    .then((res) => {
+      sessionStorage.setItem("all_dicts", JSON.stringify(res.data));
+      return res.data || {};
+    });
+};
+// 上传文件
+export const uploadFile = async (
+  file: any,
+  onProgress?: (percent: number) => void
+) => {
+  return http()
+    .post("/oss/upload", file, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+        if (progressEvent.total) {
+          const percent = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          onProgress && onProgress(percent);
+        }
+      },
+    })
+    .then((res) => {
+      return res.data?.url || "";
+    });
+};
+// 创建离线充值
+export const createOfflineRecharge = async (data: any) => {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const params = {
+    merchant_id: Number(fundUnitParams.merchantId),
+    biz_type: fundUnitParams.bizType,
+    fund_balance_id: fundUnitParams.fundBalanceId,
+    source_operator: fundUnitParams.userId
+      ? String(fundUnitParams.userId)
+      : undefined,
+    transfer_no: data.transferNo,
+    transfer_channel: data.transferChannel,
+    voucher_urls: data.voucherUrls,
+  };
+  return http().post("/offline/recharge/create", params, {});
+};
+// 创建在线充值
+export const createOnlineRecharge = async (data: any) => {
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const params = {
+    merchant_id: Number(fundUnitParams.merchantId),
+    biz_type: fundUnitParams.bizType,
+    fund_balance_id: fundUnitParams.fundBalanceId,
+    source_operator: fundUnitParams.userId
+      ? String(fundUnitParams.userId)
+      : undefined,
+    amount: data.amount,
+    currency: data.currency,
+    recharge_channel: data.rechargeChannel,
+    return_url: window.location.href,
+  };
+  return http()
+    .post("/online/recharge/create", params, {})
+    .then((res) => {
+      return res.data.redirect_url;
+    });
+};
+interface CalcPaymentAmountParams {
+  channel: string; // 支付平台，如 "stripe"
+  amount: string; // 充值金额，如 "10"
+  currency: string; // 币种，如 "USD"
+}
+// 计算支付金额
+export const calcPaymentAmount = async (data: CalcPaymentAmountParams) => {
+  return http()
+    .get("/calc-payment-amount", {
+      params: data,
+    })
+    .then((res) => {
+      const data = res.data;
+      return data.payment_amount;
+    });
+};
+// 示例用法：
+// getBalance({ merchant_id: '1128', biz_type: 'ad', token: 'xxx' }).then(res => console.log(res));

package/src/api/proxy.ts ADDED Viewed

@@ -0,0 +1,11 @@
+// Vite 配置用的代理对象
+const viteProxy = {
+  "/api": {
+    target: "https://fund.bestfulfill.tech/api/sdk",
+    changeOrigin: true,
+    rewrite: (path: string) => path.replace(/^\/api/, ""),
+    secure: false,
+  },
+};
+export { viteProxy };

package/src/components/business/recharge-sdk/components/offline-transfer-form/index.tsx ADDED Viewed

@@ -0,0 +1,158 @@
+import type { FunctionalComponent } from "preact";
+import { Upload } from "@/components/common/upload";
+import { createOfflineRecharge } from "@/api";
+import { message } from "@/components/common/message";
+import { t } from "@/local";
+import { Select } from "@/components/common/select";
+import { getOfflineTransferFormTheme } from "./theme";
+interface OfflineTransferFormProps {
+  formState: {
+    platform: string;
+    transactionId: string;
+    files: string[]; // 绑定url数组
+    platformError?: string;
+    transactionIdError?: string;
+    filesError?: string;
+    loading?: boolean;
+  };
+  setFormState: (fn: (state: any) => any) => void;
+  onClose: () => void;
+  loading: boolean;
+}
+export const OfflineTransferForm: FunctionalComponent<
+  OfflineTransferFormProps
+> = ({ formState, setFormState, onClose, loading }) => {
+  const allDicts = JSON.parse(sessionStorage.getItem("all_dicts") || "{}");
+  console.log(allDicts, "allDicts");
+  const channelDict = allDicts?.channel || [];
+  const theme = getOfflineTransferFormTheme();
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    let valid = true;
+    setFormState((state: any) => ({
+      ...state,
+      platformError: "",
+      transactionIdError: "",
+      filesError: "",
+    }));
+    if (!formState.platform) {
+      setFormState((state: any) => ({
+        ...state,
+        platformError: t("请选择支付平台"),
+      }));
+      valid = false;
+    }
+    if (!formState.transactionId.trim()) {
+      setFormState((state: any) => ({
+        ...state,
+        transactionIdError: t("请输入转账交易ID"),
+      }));
+      valid = false;
+    }
+    if (!formState.files || formState.files.length === 0) {
+      setFormState((state: any) => ({
+        ...state,
+        filesError: t("请上传转账凭证"),
+      }));
+      valid = false;
+    }
+    if (!valid) return;
+    await createOfflineRecharge({
+      transferChannel: formState.platform,
+      transferNo: formState.transactionId,
+      voucherUrls: formState.files,
+    });
+    onClose();
+    message.success(t("离线充值创建成功"));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <div style={{ marginBottom: 18 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("第三方支付平台")}
+        </div>
+        <Select
+          value={formState.platform}
+          onChange={(value) => {
+            setFormState((state: any) => ({
+              ...state,
+              platform: value,
+              platformError: value ? "" : state.platformError,
+            }));
+          }}
+          options={[
+            ...channelDict?.map((item: any) => ({
+              value: item.value,
+              label: item.label,
+            })),
+          ]}
+          placeholder={t("请选择支付平台")}
+        />
+        {formState.platformError && (
+          <div style={theme.error}>{formState.platformError}</div>
+        )}
+      </div>
+      <div style={{ marginBottom: 18 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("交易ID")}
+        </div>
+        <input
+          type="text"
+          placeholder={t("请输入转账交易ID")}
+          value={formState.transactionId}
+          maxLength={200}
+          onInput={(e) => {
+            let value = (e.target as HTMLInputElement).value;
+            if (value.length > 200) value = value.slice(0, 200);
+            setFormState((state: any) => ({
+              ...state,
+              transactionId: value,
+              transactionIdError: value ? "" : state.transactionIdError,
+            }));
+          }}
+          style={{
+            ...theme.input,
+            ...(formState.transactionIdError ? theme.inputError : {}),
+          }}
+        />
+        {formState.transactionIdError && (
+          <div style={theme.error}>{formState.transactionIdError}</div>
+        )}
+      </div>
+      <div style={{ marginBottom: 24 }}>
+        <div style={theme.label}>
+          <span style={{ color: "#F53F3F" }}>*</span> {t("上传文件")}
+        </div>
+        <Upload
+          value={formState.files}
+          onChange={(urls) =>
+            setFormState((state: any) => ({
+              ...state,
+              files: urls,
+              filesError: "",
+            }))
+          }
+          maxCount={10}
+          accept={".jpg,.jpeg,.png,.pdf"}
+          multiple={true}
+        />
+        {formState.filesError && (
+          <div style={theme.error}>{formState.filesError}</div>
+        )}
+      </div>
+      {/* 按钮区 */}
+      <div style={{ display: "flex", justifyContent: "flex-end", gap: 12 }}>
+        <button type="button" onClick={onClose} style={theme.buttonCancel}>
+          {t("取消")}
+        </button>
+        <button type="submit" disabled={loading} style={theme.buttonSubmit}>
+          {t("确定")}
+        </button>
+      </div>
+    </form>
+  );
+};

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

@@ -0,0 +1,238 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+// 动态生成主题配置的函数
+function createOfflineTransferFormThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+  return {
+    white: {
+      label: {
+        marginBottom: size === Size.SMALL ? 6 : 8,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#222",
+        textAlign: "left",
+        display: "block",
+      },
+      input: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        boxSizing: "border-box",
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+        marginBottom: 0,
+      },
+      inputError: {
+        border: "1px solid #ff4d4f",
+      },
+      select: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+      },
+      selectError: {
+        border: "1px solid #ff4d4f",
+      },
+      upload: {
+        border: "1px dashed #E5E6EB",
+        borderRadius: 8,
+        background: "#FCFCFD",
+        padding: size === Size.SMALL ? 12 : 24,
+        textAlign: "center",
+        cursor: "pointer",
+        minHeight: size === Size.SMALL ? 100 : 120,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#999",
+        fontSize: size === Size.SMALL ? 12 : 15,
+      },
+      uploadError: {
+        border: "1px dashed #ff4d4f",
+      },
+      fileItem: {
+        display: "flex",
+        alignItems: "center",
+        background: "#F7F8FA",
+        borderRadius: 8,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        marginBottom: size === Size.SMALL ? 6 : 8,
+        fontSize: size === Size.SMALL ? 12 : 15,
+        color: "#222",
+        justifyContent: "space-between",
+      },
+      buttonCancel: {
+        background: "#fff",
+        color: "#222",
+        border: "1px solid #E5E6EB",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "8px 24px",
+        cursor: "pointer",
+      },
+      buttonSubmit: {
+        background: "#1890ff",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "8px 24px",
+        cursor: "pointer",
+        fontWeight: 600,
+      },
+      removeBtn: {
+        background: "#FF4D4F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "4px 14px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        marginLeft: size === Size.SMALL ? 8 : 16,
+        cursor: "pointer",
+      },
+      error: {
+        color: "#ff4d4f",
+        fontSize: size === Size.SMALL ? 12 : 13,
+        marginTop: size === Size.SMALL ? 2 : 4,
+        textAlign: "left",
+      },
+    },
+    dark: {
+      label: {
+        marginBottom: size === Size.SMALL ? 4 : 8,
+        fontSize: size === Size.SMALL ? 12 : 14,
+        color: "#fff",
+        textAlign: "left",
+        display: "block",
+      },
+      input: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        boxSizing: "border-box",
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+        marginBottom: 0,
+      },
+      inputError: {
+        border: "1px solid #ff4d4f",
+      },
+      select: {
+        width: "100%",
+        padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+        borderRadius: 6,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        outline: "none",
+      },
+      selectError: {
+        border: "1px solid #ff4d4f",
+      },
+      upload: {
+        border: "1px dashed #374151",
+        borderRadius: 8,
+        background: "#181A20",
+        padding: size === Size.SMALL ? 12 : 24,
+        textAlign: "center",
+        cursor: "pointer",
+        minHeight: size === Size.SMALL ? 100 : 120,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#999",
+        fontSize: size === Size.SMALL ? 12 : 14,
+      },
+      uploadError: {
+        border: "1px dashed #ff4d4f",
+      },
+      fileItem: {
+        display: "flex",
+        alignItems: "center",
+        background: "#23262F",
+        borderRadius: 8,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        marginBottom: size === Size.SMALL ? 6 : 8,
+        fontSize: size === Size.SMALL ? 12 : 15,
+        color: "#fff",
+        justifyContent: "space-between",
+      },
+      buttonCancel: {
+        background: "#23262F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        cursor: "pointer",
+      },
+      buttonSubmit: {
+        background: "#00E8C6",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "8px 24px",
+        fontSize: size === Size.SMALL ? 12 : 14,
+        cursor: "pointer",
+        fontWeight: 600,
+      },
+      removeBtn: {
+        background: "#FF4D4F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 18px" : "4px 14px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        marginLeft: size === Size.SMALL ? 8 : 16,
+        cursor: "pointer",
+      },
+      error: {
+        color: "#ff4d4f",
+        fontSize: size === Size.SMALL ? 12 : 13,
+        marginTop: size === Size.SMALL ? 2 : 4,
+        textAlign: "left",
+      },
+    },
+  };
+}
+export function getOfflineTransferFormTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const whiteTheme = theme === Theme.WHITE;
+  // 每次调用时重新生成主题配置
+  const offlineTransferFormThemes = createOfflineTransferFormThemes();
+  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;
+}