best-unit 1.5.2 → 2.0.1

package/src/components/business/payment-sdk/offline-payment/theme.tsx

@@ -0,0 +1,289 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createOfflinePaymentThemes() {
+  const size = getInitParams<Size>("size");
+  const base = {
+    container: {
+      background: "#fff",
+      borderRadius: 8,
+      padding: size === Size.SMALL ? 16 : 20,
+      width: "100%",
+      maxWidth: "100%",
+      boxSizing: "border-box",
+      // 响应式设计
+      "@media (max-width: 1020px)": {
+        padding: size === Size.SMALL ? 12 : 16,
+      },
+    },
+    header: {
+      marginBottom: size === Size.SMALL ? 20 : 24,
+    },
+    backButton: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      background: "none",
+      border: "none",
+      color: "#1890ff",
+      cursor: "pointer",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      fontWeight: 500,
+    },
+    backIcon: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+    },
+    uploadSection: {
+      marginBottom: size === Size.SMALL ? 24 : 32,
+    },
+    uploadArea: {
+      border: "2px dashed #D9D9D9",
+      borderRadius: 8,
+      padding: size === Size.SMALL ? "40px 20px" : "60px 30px",
+      textAlign: "center",
+      cursor: "pointer",
+      background: "#FAFAFA",
+      transition: "all 0.3s ease",
+      width: "100%",
+      boxSizing: "border-box",
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        padding: size === Size.SMALL ? "30px 15px" : "40px 20px",
+      },
+    },
+    uploadIcon: {
+      fontSize: size === Size.SMALL ? 48 : 64,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+    },
+    uploadTitle: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+      fontWeight: 600,
+      color: "#222",
+      marginBottom: size === Size.SMALL ? 8 : 12,
+    },
+    uploadHint: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#999",
+    },
+    hiddenInput: {
+      display: "none",
+    },
+    fileList: {
+      marginTop: size === Size.SMALL ? 12 : 16,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: size === Size.SMALL ? "8px 12px" : "10px 16px",
+      background: "#F5F5F5",
+      borderRadius: 6,
+      marginBottom: 8,
+    },
+    fileName: {
+      fontSize: size === Size.SMALL ? 13 : 14,
+      color: "#222",
+    },
+    removeButton: {
+      background: "#ff4d4f",
+      color: "#fff",
+      border: "none",
+      borderRadius: "50%",
+      width: 20,
+      height: 20,
+      cursor: "pointer",
+      fontSize: 12,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    fieldSection: {
+      marginBottom: size === Size.SMALL ? 20 : 24,
+    },
+    fieldLabel: {
+      display: "block",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      fontWeight: 500,
+      color: "#222",
+      marginBottom: size === Size.SMALL ? 8 : 12,
+    },
+    required: {
+      color: "#ff4d4f",
+      marginRight: 4,
+    },
+    inputWrapper: {
+      position: "relative",
+    },
+    input: {
+      width: "100%",
+      padding: size === Size.SMALL ? "10px 12px" : "12px 16px",
+      borderRadius: 6,
+      border: "1px solid #D9D9D9",
+      outline: "none",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      boxSizing: "border-box",
+    },
+    inputError: {
+      border: "1px solid #ff4d4f",
+    },
+    disabled: {
+      backgroundColor: "#f5f5f5",
+      color: "#999",
+      cursor: "not-allowed",
+    },
+    disabledDark: {
+      backgroundColor: "#1A1D23",
+      color: "#6B7280",
+      cursor: "not-allowed",
+      border: "1px solid #374151",
+    },
+    calendarIcon: {
+      position: "absolute",
+      right: size === Size.SMALL ? 12 : 16,
+      top: "50%",
+      transform: "translateY(-50%)",
+      fontSize: size === Size.SMALL ? 16 : 18,
+      pointerEvents: "none",
+    },
+    currencySuffix: {
+      position: "absolute",
+      right: size === Size.SMALL ? 12 : 16,
+      top: "50%",
+      transform: "translateY(-50%)",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      color: "#999",
+      pointerEvents: "none",
+    },
+    buttonSection: {
+      display: "flex",
+      gap: size === Size.SMALL ? 12 : 16,
+      marginTop: size === Size.SMALL ? 32 : 40,
+      width: "100%",
+      boxSizing: "border-box",
+      // 响应式设计
+      "@media (max-width: 600px)": {
+        flexDirection: "column",
+        gap: size === Size.SMALL ? 8 : 12,
+      },
+    },
+    cancelButton: {
+      flex: 1,
+      padding: size === Size.SMALL ? "10px 16px" : "12px 20px",
+      borderRadius: 6,
+      border: "1px solid #D9D9D9",
+      background: "#fff",
+      color: "#222",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      fontWeight: 500,
+      cursor: "pointer",
+      minWidth: 0,
+      boxSizing: "border-box",
+    },
+    submitButton: {
+      flex: 1,
+      padding: size === Size.SMALL ? "10px 16px" : "12px 20px",
+      borderRadius: 6,
+      border: "none",
+      background: "#1890ff",
+      color: "#fff",
+      fontSize: size === Size.SMALL ? 14 : 16,
+      fontWeight: 600,
+      cursor: "pointer",
+      minWidth: 0,
+      boxSizing: "border-box",
+    },
+    error: {
+      color: "#ff4d4f",
+      fontSize: size === Size.SMALL ? 12 : 13,
+      marginTop: 6,
+    },
+  } as const;
+
+  return {
+    white: {
+      ...base,
+    },
+    dark: {
+      ...base,
+      container: {
+        ...base.container,
+        background: "#181A20",
+        border: "1px solid #2B2E38",
+      },
+      backButton: {
+        ...base.backButton,
+        color: "#00E8C6",
+      },
+      uploadArea: {
+        ...base.uploadArea,
+        border: "2px dashed #374151",
+        background: "#23262F",
+      },
+      uploadTitle: {
+        ...base.uploadTitle,
+        color: "#fff",
+      },
+      uploadHint: {
+        ...base.uploadHint,
+        color: "#B5B8BE",
+      },
+      fileItem: {
+        ...base.fileItem,
+        background: "#2B2E38",
+      },
+      fileName: {
+        ...base.fileName,
+        color: "#fff",
+      },
+      fieldLabel: {
+        ...base.fieldLabel,
+        color: "#fff",
+      },
+      input: {
+        ...base.input,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+      },
+      calendarIcon: {
+        ...base.calendarIcon,
+        color: "#B5B8BE",
+      },
+      currencySuffix: {
+        ...base.currencySuffix,
+        color: "#B5B8BE",
+      },
+      cancelButton: {
+        ...base.cancelButton,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+      },
+      submitButton: {
+        ...base.submitButton,
+        background: "#00E8C6",
+        color: "#111",
+      },
+    },
+  } as const;
+}
+
+export function getOfflinePaymentTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const white = theme === Theme.WHITE;
+  const themes = createOfflinePaymentThemes();
+  const base = white ? themes.white : themes.dark;
+
+  if (themeConfig) {
+    const cfg = white ? themeConfig.white : themeConfig.dark;
+    if (cfg?.color) {
+      return {
+        ...base,
+        backButton: { ...base.backButton, color: cfg.color },
+        submitButton: { ...base.submitButton, background: cfg.color },
+      } as any;
+    }
+  }
+  return base as any;
+}

package/src/components/business/payment-sdk/online-payment/index.tsx

@@ -0,0 +1,163 @@
+import { useState, useEffect } from "preact/hooks";
+import { t } from "@/local";
+import { getOnlinePaymentTheme } from "./theme";
+import { calcPaymentAmount } from "@/api";
+
+interface OnlinePaymentProps {
+  onSubmit: (form: {
+    amount: string;
+    currency: string;
+    rechargeChannel: string;
+  }) => Promise<void>;
+  amount: string;
+  currency: string;
+  channel: string;
+  loading?: boolean;
+  error?: string;
+  onAmountError?: (error: string) => void;
+}
+
+export function OnlinePayment({
+  onSubmit,
+  amount,
+  currency,
+  channel,
+  loading = false,
+  error = "",
+  onAmountError,
+}: OnlinePaymentProps) {
+  const theme = getOnlinePaymentTheme();
+  const isDark = theme.right.background === "#181A20";
+
+  const [formState, setFormState] = useState({
+    amount,
+    currency,
+    channel,
+    loading,
+    error,
+    amountError: "",
+  });
+
+  const [calc, setCalc] = useState<{
+    paymentAmount: number;
+    fee: number;
+    currency: string;
+  } | null>(null);
+
+  // 同步外部传入的props到内部状态
+  useEffect(() => {
+    setFormState((s) => ({
+      ...s,
+      amount,
+      currency,
+      channel,
+      loading,
+      error,
+    }));
+
+    // 防抖：300ms 后再请求计算接口
+    const timer = setTimeout(() => {
+      if (amount && channel && currency) {
+        calcPaymentAmount({ channel, amount, currency })
+          .then((res) => setCalc(res))
+          .catch(() => setCalc(null));
+      } else {
+        setCalc(null);
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [amount, currency, channel, loading, error]);
+
+  const handleSubmit = async (e?: Event) => {
+    if (e) e.preventDefault();
+    let valid = true;
+    if (!amount.trim()) {
+      valid = false;
+      onAmountError?.(t("请输入充值金额"));
+    }
+    if (!channel) {
+      valid = false;
+      setFormState((s) => ({ ...s, error: t("请选择支付平台") }));
+    }
+    if (!valid) return;
+    setFormState((s) => ({ ...s, loading: true, error: "" }));
+
+    try {
+      await onSubmit({
+        amount,
+        currency,
+        rechargeChannel: channel,
+      });
+    } finally {
+      setFormState((s) => ({ ...s, loading: false }));
+    }
+  };
+  return (
+    <div style={theme.right}>
+      <div style={theme.blockTitle}>
+        <span style={theme.titleBar} />
+        {t("在线支付")}
+      </div>
+      <form onSubmit={handleSubmit}>
+        <div style={theme.inputWrapper}>
+          <input
+            type="text"
+            placeholder={t("支付金额")}
+            value={formState.amount}
+            readOnly
+            disabled
+            style={{
+              ...theme.input,
+              ...(isDark ? theme.disabledDark : theme.disabled),
+              width: "100%",
+            }}
+          />
+          <div style={theme.inputSuffixAbs}>{formState.currency}</div>
+        </div>
+        <button
+          type="submit"
+          disabled={formState.loading}
+          style={theme.payButton}
+        >
+          {formState.loading ? t("提交中...") : t("立即支付")}
+        </button>
+      </form>
+
+      {calc && (
+        <div style={theme.calcBox}>
+          <div style={theme.calcLine}>
+            {t("预计支付金额约为：")}
+            <span style={theme.calcAmount}>{`$${calc.paymentAmount}`}</span>
+            {calc.currency}
+          </div>
+          <div style={theme.calcLine}>
+            {t("手续费约为：")}
+            <span style={theme.calcAmount}>{`$${calc.fee}`}</span>
+            {calc.currency}
+          </div>
+          <div>{t("注：地区/币种/卡类型可能影响手续费，最终以平台为准。")}</div>
+        </div>
+      )}
+
+      <div style={theme.noticeBox}>
+        {t("请在转账后提交银行回单，否则可能无法及时核验")}
+      </div>
+
+      <div style={theme.reminderTitle}>{t("温馨提示")}</div>
+      <ul style={theme.reminderList}>
+        <li>{t("支付金额须与申请金额一致，请勿多付、少付或分批提交。")}</li>
+        <li>{t("请妥善保存回单并提供准确的支付时间，否则可能无法核验。")}</li>
+        <li>
+          {t("工作时间提交4小时内审核，非工作时间将顺延至下一个工作日。")}
+        </li>
+        <li>{t("如有问题，请联系平台客服。")}</li>
+        <li>{t("预付充值将收取平台服务费，具体以官方为准。")}</li>
+      </ul>
+
+      {formState.error && <div style={theme.error}>{formState.error}</div>}
+    </div>
+  );
+}
+
+export default OnlinePayment;

package/src/components/business/payment-sdk/online-payment/theme.tsx

@@ -0,0 +1,179 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createOnlinePaymentThemes() {
+  const size = getInitParams<Size>("size");
+  const base = {
+    right: { background: "#fff", borderRadius: 8, padding: 16 },
+    blockTitle: {
+      fontSize: size === Size.SMALL ? 16 : 18,
+      fontWeight: 700,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+      textAlign: "left",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+    },
+    titleBar: {
+      width: 3,
+      height: size === Size.SMALL ? 16 : 20,
+      background: "#1890ff",
+      borderRadius: 2,
+    },
+    inputWrapper: { position: "relative" },
+    input: {
+      width: "100%",
+      padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+      borderRadius: 6,
+      outline: "none",
+      border: "1px solid",
+      boxSizing: "border-box",
+      paddingRight: size === Size.SMALL ? 48 : 64,
+    },
+    inputError: { border: "1px solid #ff4d4f" },
+    disabled: {
+      backgroundColor: "#f5f5f5",
+      color: "#999",
+      cursor: "not-allowed",
+    },
+    disabledDark: {
+      backgroundColor: "#1A1D23",
+      color: "#6B7280",
+      cursor: "not-allowed",
+      border: "1px solid #374151",
+    },
+    inputSuffixAbs: {
+      position: "absolute",
+      top: 0,
+      right: size === Size.SMALL ? 10 : 12,
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      color: "#999",
+      pointerEvents: "none",
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    payButton: {
+      width: "100%",
+      marginTop: size === Size.SMALL ? 10 : 14,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+      background: "#1890ff",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: size === Size.SMALL ? "8px 12px" : "12px 16px",
+      fontWeight: 600,
+      cursor: "pointer",
+    },
+    noticeBox: {
+      marginTop: size === Size.SMALL ? 8 : 12,
+      marginBottom: size === Size.SMALL ? 12 : 16,
+      padding: size === Size.SMALL ? "8px 10px" : "10px 12px",
+      borderRadius: 6,
+      background: "#FFF7E6",
+      border: "1px solid #FFE7BA",
+      color: "#AD6800",
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    calcBox: {
+      marginTop: size === Size.SMALL ? 8 : 12,
+      marginBottom: size === Size.SMALL ? 8 : 12,
+      color: "#666",
+      textAlign: "left",
+      lineHeight: 1.6,
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+    calcLine: {
+      marginBottom: 4,
+    },
+    calcAmount: {
+      color: "#ff4d4f",
+      fontWeight: 700,
+      margin: "0 4px",
+    },
+    reminderTitle: { fontWeight: 600, margin: "6px 0", textAlign: "left" },
+    reminderList: {
+      margin: 0,
+      paddingLeft: 18,
+      color: "#6b7280",
+      lineHeight: 1.6,
+      textAlign: "left",
+    },
+    error: {
+      color: "#ff4d4f",
+      marginTop: 6,
+      fontSize: size === Size.SMALL ? 12 : 13,
+    },
+  } as const;
+
+  return {
+    white: {
+      ...base,
+      input: {
+        ...base.input,
+        border: "1px solid #E5E6EB",
+        background: "#fff",
+        color: "#222",
+      },
+    },
+    dark: {
+      ...base,
+      right: {
+        background: "#181A20",
+        borderRadius: 8,
+        padding: 16,
+        border: "1px solid #2B2E38",
+      },
+      titleBar: {
+        ...base.titleBar,
+        background: "#00E8C6",
+      },
+      input: {
+        ...base.input,
+        border: "1px solid #374151",
+        background: "#23262F",
+        color: "#fff",
+      },
+      payButton: {
+        ...base.payButton,
+        background: "#00E8C6",
+        color: "#111",
+        fontWeight: 700,
+      },
+      noticeBox: {
+        ...base.noticeBox,
+        background: "#2A1F0F",
+        border: "1px solid #5C3E12",
+        color: "#F4E3C1",
+      },
+      reminderTitle: {
+        ...base.reminderTitle,
+        color: "#fff",
+      },
+      reminderList: {
+        ...base.reminderList,
+        color: "#B5B8BE",
+      },
+    },
+  } as const;
+}
+
+export function getOnlinePaymentTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const white = theme === Theme.WHITE;
+  const themes = createOnlinePaymentThemes();
+  const base = white ? themes.white : themes.dark;
+
+  if (themeConfig) {
+    const cfg = white ? themeConfig.white : themeConfig.dark;
+    if (cfg?.color) {
+      return {
+        ...base,
+        payButton: { ...base.payButton, background: cfg.color },
+        titleBar: { ...base.titleBar, background: cfg.color },
+      } as any;
+    }
+  }
+  return base as any;
+}