best-unit 1.2.17 → 1.2.19

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

@@ -1,199 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import { t } from "@/local";
-import { Select } from "@/components/common/select";
-import { calcPaymentAmount } from "@/api";
-import { getOnlineRechargeFormTheme } from "./theme";
-
-interface OnlineRechargeFormProps {
-  formState: {
-    amount: string;
-    rechargeChannel: string;
-    currency: string;
-    loading: boolean;
-    error: string;
-    amountError: string;
-    rechargeChannelError: string;
-    currencyError: string;
-  };
-  setFormState: (fn: (state: any) => any) => void;
-  onClose: () => void;
-  loading: boolean;
-}
-
-// 辅助函数：只允许输入数字和小数点，且最多两位小数
-function formatAmountInput(value: string) {
-  // 只保留数字和小数点
-  value = value.replace(/[^\d.]/g, "");
-  // 只保留第一个小数点
-  value = value.replace(/\.(?=.*\.)/g, "");
-  // 保证最多两位小数
-  value = value.replace(/^(\d+)(\.\d{0,2})?.*$/, "$1$2");
-  // 去除前导0（保留0.和0.xx）
-  value = value.replace(/^0+(\d)/, "$1");
-  if (value.startsWith(".")) value = "0" + value;
-  return value;
-}
-// 辅助函数：格式化为两位小数
-function formatToTwoDecimal(value: string) {
-  if (!value) return "";
-  const num = parseFloat(value);
-  if (isNaN(num)) return "";
-  return num.toFixed(2);
-}
-
-export const OnlineRechargeForm: FunctionalComponent<
-  OnlineRechargeFormProps
-> = ({ 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 [actualAmount, setActualAmount] = useState<string>("");
-  const [showFeeTip, setShowFeeTip] = useState(false);
-  const theme = getOnlineRechargeFormTheme();
-
-  // 当三个参数都填写完整时，计算实际支付金额
-  useEffect(() => {
-    if (formState.currency && formState.amount && formState.rechargeChannel) {
-      calcPaymentAmount({
-        channel: formState.rechargeChannel,
-        amount: formState.amount,
-        currency: formState.currency,
-      })
-        .then((paymentAmount) => {
-          setActualAmount(paymentAmount);
-          setShowFeeTip(true);
-        })
-        .catch((error) => {
-          console.error("计算支付金额失败:", error);
-          setShowFeeTip(false);
-        });
-    } else {
-      setShowFeeTip(false);
-    }
-  }, [formState.currency, formState.amount, formState.rechargeChannel]);
-
-  return (
-    <>
-      <div style={{ marginBottom: 18 }}>
-        <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> {t("充值币种")}
-        </div>
-        <Select
-          value={formState.currency}
-          onChange={(value) => {
-            setFormState((state: any) => ({
-              ...state,
-              currency: value,
-            }));
-          }}
-          options={currencyDict?.map((item: any) => ({
-            value: item.value,
-            label: item.label,
-          }))}
-          placeholder={t("请选择充值币种")}
-        />
-      </div>
-      <div style={{ marginBottom: 18 }}>
-        <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> {t("充值金额")}
-        </div>
-        <input
-          type="text"
-          placeholder={t("请输入充值金额")}
-          value={formState.amount}
-          onInput={(e) => {
-            let value = (e.target as HTMLInputElement).value;
-            value = formatAmountInput(value);
-            let amountError = "";
-            // 只有输入为合法数字且不以小数点结尾时才做区间修正
-            if (value && !value.endsWith(".")) {
-              let num = parseFloat(value);
-              if (!isNaN(num)) {
-                if (num < 1) num = 1;
-                if (num > 999999.99) num = 999999.99;
-                value = num.toString();
-                // 如果原始输入有小数点且小数点后有内容，保留小数部分
-                if (/\./.test((e.target as HTMLInputElement).value)) {
-                  const decimalPart = (
-                    e.target as HTMLInputElement
-                  ).value.split(".")[1];
-                  if (decimalPart !== undefined && decimalPart.length > 0) {
-                    value = num.toFixed(Math.min(decimalPart.length, 2));
-                  }
-                }
-              }
-            }
-            setFormState((state: any) => ({
-              ...state,
-              amount: value,
-              amountError,
-            }));
-          }}
-          onBlur={(e) => {
-            let value = (e.target as HTMLInputElement).value;
-            value = formatToTwoDecimal(value);
-            setFormState((state: any) => ({
-              ...state,
-              amount: value,
-              amountError: "",
-            }));
-          }}
-          style={{
-            ...theme.input,
-            ...(formState.amountError ? theme.inputError : {}),
-          }}
-        />
-        {formState.amountError && (
-          <div style={theme.error}>{formState.amountError}</div>
-        )}
-      </div>
-      <div style={{ marginBottom: 24 }}>
-        <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> {t("支付平台")}
-        </div>
-        <Select
-          value={formState.rechargeChannel}
-          onChange={(value) => {
-            setFormState((state: any) => ({
-              ...state,
-              rechargeChannel: value,
-              rechargeChannelError: value ? "" : state.rechargeChannelError,
-            }));
-          }}
-          options={channelDict?.map((item: any) => ({
-            value: item.value,
-            label: item.label,
-          }))}
-          placeholder={t("请选择支付平台")}
-        ></Select>
-        {formState.rechargeChannelError && (
-          <div style={theme.error}>{formState.rechargeChannelError}</div>
-        )}
-      </div>
-      {/* 手续费提示 */}
-      {showFeeTip && actualAmount && (
-        <div style={theme.feeTip}>
-          {channelDict.find(
-            (item: any) => item.value === formState.rechargeChannel
-          )?.label || formState.rechargeChannel}
-          {t("需要收取手续费，实际支付金额约为：")}${actualAmount}
-        </div>
-      )}
-      {formState.error && (
-        <div style={{ color: "#ff4d4f", marginBottom: 12 }}>
-          {formState.error}
-        </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}>
-          {loading ? t("提交中...") : t("去支付")}
-        </button>
-      </div>
-    </>
-  );
-};

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

@@ -1,151 +0,0 @@
-import { Size, Theme, type ThemeConfig } from "@/types";
-import { getInitParams } from "@/utils/business";
-const size = getInitParams<Size>("size");
-export const onlineRechargeFormThemes = {
-  white: {
-    label: {
-      marginBottom: size === Size.SMALL ? 4 : 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",
-    },
-    selectError: {
-      border: "1px solid #ff4d4f",
-    },
-    error: {
-      color: "#ff4d4f",
-      fontSize: size === Size.SMALL ? 12 : 13,
-      marginTop: size === Size.SMALL ? 2 : 4,
-      textAlign: "left",
-    },
-    buttonCancel: {
-      background: "#fff",
-      color: "#222",
-      border: "1px solid #E5E6EB",
-      borderRadius: 6,
-      padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
-      fontSize: size === Size.SMALL ? 12 : 15,
-      cursor: "pointer",
-    },
-    buttonSubmit: {
-      background: "#1890ff",
-      color: "#fff",
-      border: "none",
-      borderRadius: 6,
-      padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
-      fontSize: size === Size.SMALL ? 12 : 15,
-      cursor: "pointer",
-      fontWeight: 600,
-    },
-    feeTip: {
-      marginBottom: 24,
-      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
-      background: "#f6ffed",
-      border: "1px solid #b7eb8f",
-      borderRadius: 6,
-      fontSize: size === Size.SMALL ? 12 : 14,
-      color: "#52c41a",
-    },
-  },
-  dark: {
-    label: {
-      marginBottom: size === Size.SMALL ? 6 : 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",
-    },
-    selectError: {
-      border: "1px solid #ff4d4f",
-    },
-    error: {
-      color: "#ff4d4f",
-      fontSize: size === Size.SMALL ? 12 : 13,
-      marginTop: size === Size.SMALL ? 2 : 4,
-      textAlign: "left",
-    },
-    buttonCancel: {
-      background: "#23262F",
-      color: "#fff",
-      border: "none",
-      borderRadius: 6,
-      padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
-      fontSize: size === Size.SMALL ? 12 : 15,
-      cursor: "pointer",
-    },
-    buttonSubmit: {
-      background: "#00E8C6",
-      color: "#fff",
-      border: "none",
-      borderRadius: 6,
-      padding: size === Size.SMALL ? "6px 16px" : "8px 24px",
-      fontSize: size === Size.SMALL ? 12 : 15,
-      cursor: "pointer",
-      fontWeight: 600,
-    },
-    feeTip: {
-      marginBottom: size === Size.SMALL ? 16 : 24,
-      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
-      background: "#1a1a1a",
-      border: "1px solid #333",
-      borderRadius: 6,
-      fontSize: size === Size.SMALL ? 12 : 14,
-      color: "#52c41a",
-    },
-  },
-};
-
-export function getOnlineRechargeFormTheme() {
-  const theme = getInitParams<Theme>("theme");
-  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
-  const whiteTheme = theme === Theme.WHITE;
-  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/index.tsx

@@ -1,152 +0,0 @@
-import { useState, useEffect } from "preact/hooks";
-import { OnlineRechargeForm } from "../online-recharge-form";
-import { OfflineTransferForm } from "../offline-transfer-form";
-import { t } from "@/local";
-import { Modal } from "@/components/common/modal";
-import { getRechargeTheme } from "./theme";
-import { getInitParams } from "@/utils/business";
-import { Size } from "@/types";
-const size = getInitParams<Size>("size");
-interface ModalFormProps {
-  visible: boolean;
-  onClose: () => void;
-  onSubmit: (form: {
-    amount: string;
-    rechargeChannel: string;
-    currency: string;
-  }) => Promise<void>;
-  color?: string;
-  merchantId?: string;
-  bizType?: string;
-  token?: string;
-}
-
-export function Recharge({ visible, onClose, onSubmit }: ModalFormProps) {
-  const [formState, setFormState] = useState({
-    amount: "",
-    rechargeChannel: "",
-    currency: "USD",
-    loading: false,
-    error: "",
-    amountError: "",
-    rechargeChannelError: "",
-    currencyError: "",
-  });
-  const [offlineFormState, setOfflineFormState] = useState({
-    platform: "",
-    transactionId: "",
-    files: [],
-    platformError: "",
-    transactionIdError: "",
-    filesError: "",
-    loading: false,
-  });
-  const [activeTab, setActiveTab] = useState<"online" | "offline">("online");
-  const theme = getRechargeTheme();
-
-  // 每次关闭弹窗时重置内容
-  useEffect(() => {
-    if (!visible) {
-      setActiveTab("online");
-      setFormState({
-        amount: "",
-        rechargeChannel: "",
-        currency: "USD",
-        loading: false,
-        error: "",
-        amountError: "",
-        rechargeChannelError: "",
-        currencyError: "",
-      });
-      setOfflineFormState({
-        platform: "",
-        transactionId: "",
-        files: [],
-        platformError: "",
-        transactionIdError: "",
-        filesError: "",
-        loading: false,
-      });
-    }
-  }, [visible]);
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    let valid = true;
-    setFormState((state) => ({
-      ...state,
-      amountError: "",
-      rechargeChannelError: "",
-    }));
-    if (!formState.amount.trim()) {
-      setFormState((state) => ({ ...state, amountError: t("请输入充值金额") }));
-      valid = false;
-    }
-    if (!formState.rechargeChannel) {
-      setFormState((state) => ({
-        ...state,
-        rechargeChannelError: t("请选择支付平台"),
-      }));
-      valid = false;
-    }
-    if (!valid) return;
-    setFormState((state) => ({ ...state, loading: true, error: "" }));
-    try {
-      await onSubmit({
-        amount: formState.amount,
-        rechargeChannel: formState.rechargeChannel,
-        currency: formState.currency,
-      });
-      onClose();
-    } catch {
-      setFormState((state) => ({ ...state, error: t("提交失败，请重试") }));
-    } finally {
-      setFormState((state) => ({ ...state, loading: false }));
-    }
-  };
-
-  return (
-    <Modal visible={visible} onClose={onClose} title={t("充值 / 转账")}>
-      {/* tab 按钮区域 */}
-      <div
-        style={{
-          display: "flex",
-          marginBottom: size === Size.SMALL ? 16 : 28,
-        }}
-      >
-        <button
-          type="button"
-          onClick={() => setActiveTab("online")}
-          style={theme.tabBtn(activeTab === "online", true)}
-        >
-          {t("在线充值")}
-        </button>
-        <button
-          type="button"
-          onClick={() => setActiveTab("offline")}
-          style={theme.tabBtn(activeTab === "offline", false)}
-        >
-          {t("线下转账")}
-        </button>
-      </div>
-      {/* tab 内容区域 */}
-      {activeTab === "online" ? (
-        <form onSubmit={handleSubmit}>
-          <OnlineRechargeForm
-            formState={formState}
-            setFormState={setFormState}
-            onClose={onClose}
-            loading={formState.loading}
-          />
-        </form>
-      ) : (
-        <OfflineTransferForm
-          formState={offlineFormState}
-          setFormState={setOfflineFormState}
-          onClose={onClose}
-          loading={offlineFormState.loading}
-        />
-      )}
-    </Modal>
-  );
-}

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

@@ -1,64 +0,0 @@
-import { Size, Theme, type ThemeConfig } from "@/types";
-import { getInitParams } from "@/utils/business";
-const size = getInitParams<Size>("size");
-export const rechargeThemes = {
-  white: {
-    tabBtn: (active: boolean, left: boolean) => ({
-      flex: 1,
-      background: active ? "#fff" : "#F7F8FA",
-      color: active ? "#1890ff" : "#222",
-      border: "none",
-      borderRadius: left ? "8px 0 0 8px" : "0 8px 8px 0",
-      fontWeight: active ? 600 : 400,
-      fontSize: size === Size.SMALL ? 12 : 16,
-      height: size === Size.SMALL ? 32 : 48,
-      boxShadow: active ? "0 2px 8px 0 rgba(20,20,20,0.04)" : "none",
-      outline: "none",
-      cursor: "pointer",
-      borderRight: left ? "1px solid #F0F1F3" : undefined,
-      borderLeft: !left ? "1px solid #F0F1F3" : undefined,
-      transition: "all 0.2s",
-    }),
-  },
-  dark: {
-    tabBtn: (active: boolean, left: boolean) => ({
-      flex: 1,
-      background: active ? "#23262F" : "#181A20",
-      color: active ? "#00E8C6" : "#fff",
-      border: "none",
-      borderRadius: left ? "8px 0 0 8px" : "0 8px 8px 0",
-      fontWeight: active ? 600 : 400,
-      fontSize: size === Size.SMALL ? 12 : 16,
-      height: size === Size.SMALL ? 32 : 48,
-      boxShadow: active ? "0 2px 8px 0 rgba(20,20,20,0.10)" : "none",
-      outline: "none",
-      cursor: "pointer",
-      borderRight: left ? "1px solid #23262F" : undefined,
-      borderLeft: !left ? "1px solid #23262F" : undefined,
-      transition: "all 0.2s",
-    }),
-  },
-};
-
-export function getRechargeTheme() {
-  const theme = getInitParams<Theme>("theme");
-  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
-  const whiteTheme = theme === Theme.WHITE;
-  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

@@ -1,37 +0,0 @@
-import { useState } from "preact/hooks";
-import { Button } from "@/components/common/button";
-import { Recharge } from "./components/recharge";
-import register from "preact-custom-element";
-import { createOnlineRecharge } from "@/api";
-import { t } from "@/local";
-
-export function BestUnit() {
-  const [visible, setVisible] = useState(false);
-  const handleSubmit = async (form: {
-    amount: string;
-    rechargeChannel: string;
-    currency: string;
-  }) => {
-    const result = await createOnlineRecharge({
-      amount: form.amount,
-      currency: form.currency,
-      rechargeChannel: form.rechargeChannel,
-    });
-    window.open(result, "_blank");
-  };
-
-  return (
-    <div>
-      <Button onClick={() => setVisible(true)}>{t("充值/转账")}</Button>
-      <Recharge
-        visible={visible}
-        onClose={() => setVisible(false)}
-        onSubmit={handleSubmit}
-      />
-    </div>
-  );
-}
-
-register(BestUnit, "best-recharge", ["theme"], { shadow: false });
-
-export default BestUnit;

package/src/components/business/refresh-button/index.tsx

@@ -1,99 +0,0 @@
-import { useState } from "preact/hooks";
-import register from "preact-custom-element";
-import { getRefreshButtonTheme, getRefreshButtonSizeStyles } from "./theme";
-import { refreshBalance } from "@/utils/business";
-import { Button } from "@/components/common/button";
-
-interface RefreshButtonProps {
-  color?: string;
-  size?: "small" | "medium" | "large";
-  children?: any; // slot 内容
-}
-
-function RefreshButton({
-  color,
-  size = "medium",
-  children,
-}: RefreshButtonProps) {
-  const [isSpinning, setIsSpinning] = useState(false);
-  const theme = getRefreshButtonTheme(color);
-  const sizeStyles = getRefreshButtonSizeStyles(size);
-
-  const buttonStyle = {
-    ...theme,
-    ...sizeStyles,
-    display: "flex",
-    alignItems: "center",
-  };
-
-  // 内联 CSS 动画定义
-  const spinAnimation = `
-    @keyframes spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    
-    .refresh-icon {
-      transform-origin: center;
-      will-change: transform;
-    }
-    
-    /* 隐藏 fallback content */
-    :host {
-      display: inline-block;
-    }
-  `;
-
-  const handleClick = async () => {
-    setIsSpinning(true);
-    try {
-      // 触发刷新事件
-      refreshBalance();
-      // 确保动画至少显示一段时间，给用户视觉反馈
-      await new Promise((resolve) => setTimeout(resolve, 300));
-    } finally {
-      setIsSpinning(false);
-    }
-  };
-
-  return (
-    <>
-      {/* 注入 CSS 动画 */}
-      <style>{spinAnimation}</style>
-
-      <Button onClick={handleClick} color={color}>
-        <div style={buttonStyle}>
-          <svg
-            className="refresh-icon"
-            width={size === "small" ? "14" : size === "large" ? "24" : "18"}
-            height={size === "small" ? "14" : size === "large" ? "24" : "18"}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            style={{
-              animation: isSpinning ? "spin 0.6s linear infinite" : "none",
-              transition: "all 0.2s ease",
-            }}
-          >
-            <path d="M21 2v6h-6"></path>
-            <path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
-            <path d="M3 22v-6h6"></path>
-            <path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
-          </svg>
-          {children && <span>{children}</span>}
-        </div>
-      </Button>
-    </>
-  );
-}
-
-register(RefreshButton, "best-refresh-button", [], { shadow: true });
-
-export default RefreshButton;