best-unit 1.0.0 → 1.0.3

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

@@ -0,0 +1,39 @@
+import { useState } from "preact/hooks";
+import { ThemedButton } from "./components/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>
+      <ThemedButton onClick={() => setVisible(true)}>
+        {t("充值/转账")}
+      </ThemedButton>
+      <Recharge
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onSubmit={handleSubmit}
+      />
+    </div>
+  );
+}
+
+register(BestUnit, "best-recharge", ["theme"], { shadow: false });
+
+export default BestUnit;

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

@@ -0,0 +1,206 @@
+import { useState, useEffect } from "preact/hooks";
+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", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+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,
+    currency: "USD",
+    symbol: "$",
+    details: [
+      { label: t("真实金额"), value: 0, color: "#15b36b", dot: "#15b36b" },
+      { label: t("冻结金额"), value: 0, color: "#f59e0b", dot: "#f59e0b" },
+      { label: t("总可用"), value: 0, color: "#1890ff", dot: "#15b36b" },
+    ],
+  });
+
+  useEffect(() => {
+    const fetchBalance = async () => {
+      try {
+        const balance = await getBalance();
+
+        // 根据 API 返回的数据构建 balanceData
+        const newBalanceData = {
+          available: balance.availableAmount,
+          currency: "USD", // 可以根据实际 API 返回调整
+          symbol: "$",
+          details: [
+            {
+              label: t("真实金额"),
+              value: balance.availableAmount,
+              color: "#15b36b",
+              dot: "#15b36b",
+            },
+            {
+              label: t("冻结金额"),
+              value: balance.frozenAmount,
+              color: "#f59e0b",
+              dot: "#f59e0b",
+            },
+            {
+              label: t("总可用"),
+              value: balance.totalAmount,
+              color: "#1890ff",
+              dot: "#15b36b",
+            },
+          ],
+        };
+
+        setBalanceData(newBalanceData);
+      } catch (err) {
+        console.error("获取余额失败:", err);
+        // 获取失败时保持默认的 $0 USD 显示
+      }
+    };
+
+    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={theme.popoverTitle}>{t("余额详情")}</div>
+          {balanceData.details.map((item) => (
+            <div key={item.label} style={theme.detailRow}>
+              <span style={theme.detailLabel}>
+                <span style={theme.detailDot(item.dot)} />
+                {item.label}
+              </span>
+              <span style={theme.detailValue(item.color)}>
+                {balanceData.symbol}
+                {formatNumber(item.value)}
+              </span>
+            </div>
+          ))}
+        </>
+      }
+      popoverPosition={props.popoverPosition || "bottom"}
+    >
+      <div style={theme.main}>
+        {balanceData.symbol}
+        {formatNumber(balanceData.available)}
+        <span style={theme.currency}>{balanceData.currency}</span>
+      </div>
+    </HoverPopover>
+  );
+}
+
+register(StatisticalBalance, "best-statistical-balance");
+
+export default StatisticalBalance;

package/src/components/common/HoverPopover.tsx

@@ -0,0 +1,215 @@
+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 {
+  popover: JSX.Element;
+  children: JSX.Element;
+  popoverWidth?: number;
+  popoverMinWidth?: number;
+  offsetY?: number; // 弹层与目标元素的垂直间距
+  offsetX?: number; // 弹层与目标元素的水平间距
+  popoverPosition?: "top" | "bottom" | "leftTop" | "rightTop";
+}
+
+/**
+ * 通用 HoverPopover 组件，支持上下、左上、右上浮层、箭头、位置自适应
+ */
+const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
+  popover,
+  children,
+  popoverWidth = 300,
+  popoverMinWidth = 200,
+  offsetY = 16,
+  offsetX = 16,
+  popoverPosition = "top",
+}) => {
+  const [show, setShow] = useState(false);
+  const [position, setPosition] = useState<
+    "top" | "bottom" | "leftTop" | "rightTop"
+  >(popoverPosition);
+  const ref = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<number | null>(null);
+
+  const handleMouseEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (popoverPosition === "top" || popoverPosition === "bottom") {
+      if (ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        if (popoverPosition === "top" && rect.top < 100) {
+          setPosition("bottom");
+        } else if (
+          popoverPosition === "bottom" &&
+          window.innerHeight - rect.bottom < 100
+        ) {
+          setPosition("top");
+        } else {
+          setPosition(popoverPosition);
+        }
+      } else {
+        setPosition(popoverPosition);
+      }
+    } else {
+      setPosition(popoverPosition);
+    }
+    setShow(true);
+  };
+
+  const handleMouseLeave = () => {
+    // 延迟关闭，防止鼠标快速移动到弹窗内容时闪烁
+    timerRef.current = window.setTimeout(() => {
+      setShow(false);
+    }, 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,
+    borderRadius: 6,
+    fontSize: 15,
+    minWidth: popoverMinWidth,
+    width: popoverWidth,
+    padding: "8px 14px",
+    pointerEvents: "auto",
+    textAlign: "center",
+    animation: "fadeInUp 0.3s",
+    ...theme.popover,
+  };
+  let arrowStyle: any = {
+    position: "absolute",
+    zIndex: 11,
+    width: 0,
+    height: 0,
+  };
+  if (position === "top") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "50%",
+      top: -48,
+      transform: "translateX(-50%)",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: "50%",
+      bottom: -8,
+      transform: "translateX(-50%)",
+      borderLeft: "8px solid transparent",
+      borderRight: "8px solid transparent",
+      borderTop: `8px solid ${theme.arrow.top}`,
+    };
+  } else if (position === "bottom") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "50%",
+      top: "100%",
+      marginTop: offsetY,
+      transform: "translateX(-50%)",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: "50%",
+      top: -8,
+      transform: "translateX(-50%)",
+      borderLeft: "8px solid transparent",
+      borderRight: "8px solid transparent",
+      borderBottom: `8px solid ${theme.arrow.bottom}`,
+    };
+  } else if (position === "leftTop") {
+    popoverStyle = {
+      ...popoverStyle,
+      right: "100%",
+      top: 0,
+      marginRight: offsetX,
+      transform: "none",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      right: -8,
+      top: 12,
+      borderTop: "8px solid transparent",
+      borderBottom: "8px solid transparent",
+      borderLeft: `8px solid ${theme.arrow.left}`,
+    };
+  } else if (position === "rightTop") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "100%",
+      top: 0,
+      marginLeft: offsetX,
+      transform: "translateY(0)", // 右上角对齐
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: -8,
+      top: 12,
+      borderTop: "8px solid transparent",
+      borderBottom: "8px solid transparent",
+      borderRight: `8px solid ${theme.arrow.right}`,
+    };
+  }
+
+  return (
+    <div
+      ref={ref}
+      style={{ position: "relative", display: "inline-block" }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {show && (
+        <div
+          style={popoverStyle}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {popover}
+          <div style={arrowStyle} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HoverPopover;