best-unit 1.2.19 → 1.2.21

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

@@ -0,0 +1,99 @@
+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;

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

@@ -0,0 +1,58 @@
+import { Theme } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+export const refreshButtonThemes = {
+  white: {
+    background: "#1890ff",
+    color: "#fff",
+    border: "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    fontWeight: 600,
+    transition: "all 0.2s ease",
+  },
+  dark: {
+    background: "#00E8C6",
+    color: "#fff",
+    border: "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    fontWeight: 600,
+    transition: "all 0.2s ease",
+  },
+};
+
+export function getRefreshButtonTheme(color?: string) {
+  const theme = getInitParams<Theme>("theme");
+  const whiteTheme = theme === Theme.WHITE;
+
+  return whiteTheme
+    ? {
+        ...refreshButtonThemes.white,
+        background: color || refreshButtonThemes.white.background,
+      }
+    : {
+        ...refreshButtonThemes.dark,
+        background: color || refreshButtonThemes.dark.background,
+      };
+}
+
+export function getRefreshButtonSizeStyles(size: "small" | "medium" | "large") {
+  switch (size) {
+    case "small":
+      return {
+        fontSize: "12px",
+        gap: "2px",
+      };
+    case "large":
+      return {
+        fontSize: "18px",
+        gap: "6px",
+      };
+    default:
+      return {
+        fontSize: "14px",
+        gap: "4px",
+      };
+  }
+}

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

@@ -0,0 +1,190 @@
+import { useState, useEffect } from "preact/hooks";
+import HoverPopover, {
+  type PopoverPosition,
+} from "@/components/common/hover-popover";
+import { getBalance } from "@/api";
+import { t } from "@/local";
+import register from "preact-custom-element";
+import { getStatisticalBalanceTheme } from "./theme";
+
+function formatNumber(num: number) {
+  return num.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+interface DetailItem {
+  label: string;
+  value: number;
+  color: string;
+  dot: string;
+}
+
+function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
+  const [balanceData, setBalanceData] = useState<{
+    available: number;
+    currency: string;
+    symbol: string;
+    details: DetailItem[];
+  }>({
+    available: 0,
+    currency: "USD",
+    symbol: "$",
+    details: [],
+  });
+
+  const fetchBalance = async () => {
+    try {
+      const balance = await getBalance();
+
+      // 根据 API 返回的数据构建 balanceData，只保存数值数据
+      const details: DetailItem[] = [
+        {
+          label: "", // 翻译在渲染时处理
+          value: balance.totalAmount,
+          color: "#15b36b",
+          dot: "#15b36b",
+        },
+        {
+          label: "",
+          value: balance.frozenAmount,
+          color: "#f59e0b",
+          dot: "#f59e0b",
+        },
+        ...(balance.isCredit
+          ? [
+              {
+                label: "",
+                value: balance.creditLimit,
+                color: "#1890ff",
+                dot: "#1890ff",
+              },
+              {
+                label: "",
+                value: balance.creditUsed,
+                color: "#ff0000",
+                dot: "#ff0000",
+              },
+            ]
+          : []),
+        {
+          label: "",
+          value: balance.availableAmount,
+          color: "#1890ff",
+          dot: "#15b36b",
+        },
+      ];
+
+      const newBalanceData = {
+        available: balance.availableAmount,
+        currency: "USD",
+        symbol: "$",
+        details,
+      };
+
+      setBalanceData(newBalanceData);
+    } catch (err) {
+      console.error("获取余额失败:", err);
+      // 获取失败时保持默认的 $0 USD 显示
+    }
+  };
+
+  useEffect(() => {
+    fetchBalance();
+  }, []);
+
+  useEffect(() => {
+    // 监听refresh-balance事件
+    const handleRefreshBalance = () => {
+      fetchBalance();
+    };
+
+    // 添加事件监听器
+    document.addEventListener(
+      "refresh-balance",
+      handleRefreshBalance as EventListener
+    );
+
+    // 清理函数
+    return () => {
+      document.removeEventListener(
+        "refresh-balance",
+        handleRefreshBalance as EventListener
+      );
+    };
+  }, []);
+
+  const theme = getStatisticalBalanceTheme();
+
+  // 在渲染时动态生成翻译后的详情数据
+  const translatedDetails = [
+    {
+      label: t("真实金额"),
+      value: balanceData.details[0]?.value || 0,
+      color: "#15b36b",
+      dot: "#15b36b",
+    },
+    {
+      label: t("冻结金额"),
+      value: balanceData.details[1]?.value || 0,
+      color: "#f59e0b",
+      dot: "#f59e0b",
+    },
+    ...(balanceData.details.length > 4
+      ? [
+          {
+            label: t("信用额度"),
+            value: balanceData.details[2]?.value || 0,
+            color: "#1890ff",
+            dot: "#1890ff",
+          },
+          {
+            label: t("已用额度"),
+            value: balanceData.details[3]?.value || 0,
+            color: "#ff0000",
+            dot: "#ff0000",
+          },
+        ]
+      : []),
+    {
+      label: t("可用余额"),
+      value: balanceData.details[balanceData.details.length - 1]?.value || 0,
+      color: "#1890ff",
+      dot: "#15b36b",
+    },
+  ];
+
+  return (
+    <HoverPopover
+      popover={
+        <>
+          <div style={theme.popoverTitle}>{t("余额详情")}</div>
+          {translatedDetails.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/business/statistical-balance/theme.tsx

@@ -0,0 +1,117 @@
+import { Size, Theme } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createStatisticalBalanceThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      popoverTitle: {
+        fontSize: size === Size.SMALL ? 12 : 16,
+        fontWeight: 600,
+        color: "#222",
+        marginBottom: size === Size.SMALL ? 12 : 16,
+        textAlign: "center",
+      },
+      detailRow: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: size === Size.SMALL ? "6px 0" : "8px 0",
+        borderBottom: "1px solid #e5e7eb",
+        fontSize: size === Size.SMALL ? 12 : 15,
+      },
+      detailLabel: {
+        display: "flex",
+        alignItems: "center",
+        color: "#6b7280",
+        fontWeight: 500,
+      },
+      detailDot: (color: string) => ({
+        display: "inline-block",
+        width: size === Size.SMALL ? 6 : 8,
+        height: size === Size.SMALL ? 6 : 8,
+        borderRadius: "50%",
+        background: color,
+        marginRight: size === Size.SMALL ? 6 : 8,
+      }),
+      detailValue: (color: string) => ({
+        color,
+        fontWeight: 600,
+        fontSize: size === Size.SMALL ? 12 : 15,
+      }),
+      main: {
+        fontSize: size === Size.SMALL ? 18 : 24,
+        fontWeight: 800,
+        color: "#111827",
+        display: "inline-block",
+      },
+      currency: {
+        fontSize: size === Size.SMALL ? 16 : 18,
+        color: "#6b7280",
+        marginLeft: size === Size.SMALL ? 6 : 8,
+        fontWeight: 600,
+      },
+    },
+    dark: {
+      popoverTitle: {
+        fontSize: size === Size.SMALL ? 14 : 16,
+        fontWeight: 600,
+        color: "#fff",
+        marginBottom: size === Size.SMALL ? 14 : 16,
+        textAlign: "center",
+      },
+      detailRow: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: size === Size.SMALL ? "6px 0" : "8px 0",
+        borderBottom: "1px solid #374151",
+        fontSize: size === Size.SMALL ? 12 : 15,
+      },
+      detailLabel: {
+        display: "flex",
+        alignItems: "center",
+        color: "#B5B8BE",
+        fontWeight: 500,
+      },
+      detailDot: (color: string) => ({
+        display: "inline-block",
+        width: size === Size.SMALL ? 6 : 8,
+        height: size === Size.SMALL ? 6 : 8,
+        borderRadius: "50%",
+        background: color,
+        marginRight: size === Size.SMALL ? 6 : 8,
+      }),
+      detailValue: (color: string) => ({
+        color,
+        fontWeight: 600,
+        fontSize: size === Size.SMALL ? 12 : 15,
+      }),
+      main: {
+        fontSize: size === Size.SMALL ? 18 : 24,
+        fontWeight: 800,
+        color: "#fff",
+        display: "inline-block",
+      },
+      currency: {
+        fontSize: size === Size.SMALL ? 16 : 18,
+        color: "#B5B8BE",
+        marginLeft: size === Size.SMALL ? 6 : 8,
+        fontWeight: 600,
+      },
+    },
+  };
+}
+
+export function getStatisticalBalanceTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const statisticalBalanceThemes = createStatisticalBalanceThemes();
+  return whiteTheme
+    ? statisticalBalanceThemes.white
+    : statisticalBalanceThemes.dark;
+}

package/src/components/common/button/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentChildren } from "preact";
+import { getButtonTheme } from "./theme";
+
+interface ButtonProps {
+  onClick?: () => void;
+  color?: string;
+  children: ComponentChildren;
+}
+
+export function Button({ onClick, color, children }: ButtonProps) {
+  const style = getButtonTheme(color);
+  return (
+    <button style={style} onClick={onClick} type="button">
+      {children}
+    </button>
+  );
+}

package/src/components/common/button/theme.tsx

@@ -0,0 +1,56 @@
+import { Size, Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createButtonThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      background: "#1890ff",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: size === Size.SMALL ? "6px 10px" : "8px 16px",
+      cursor: "pointer",
+      fontSize: size === Size.SMALL ? 12 : 16,
+      fontWeight: 600,
+    },
+    dark: {
+      background: "#00E8C6",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: size === Size.SMALL ? "6px 10px" : "8px 16px",
+      cursor: "pointer",
+      fontSize: size === Size.SMALL ? 12 : 16,
+      fontWeight: 600,
+    },
+  };
+}
+
+export function getButtonTheme(color?: string) {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const buttonThemes = createButtonThemes();
+
+  // 优先使用传入的 color 参数，其次使用 themeConfig 中的配置
+  let buttonColor = color;
+  if (!buttonColor && themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    buttonColor = config?.color;
+  }
+
+  return whiteTheme
+    ? {
+        ...buttonThemes.white,
+        background: buttonColor || buttonThemes.white.background,
+      }
+    : {
+        ...buttonThemes.dark,
+        background: buttonColor || buttonThemes.dark.background,
+      };
+}