best-unit 1.2.17 → 1.2.19

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

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

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

@@ -1,110 +0,0 @@
-import { Size, Theme } from "@/types";
-import { getInitParams } from "@/utils/business";
-const size = getInitParams<Size>("size");
-
-export const statisticalBalanceThemes = {
-  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;
-  return whiteTheme
-    ? statisticalBalanceThemes.white
-    : statisticalBalanceThemes.dark;
-}

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

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

@@ -1,48 +0,0 @@
-import { Size, Theme, type ThemeConfig } from "@/types";
-import { getInitParams } from "@/utils/business";
-const size = getInitParams<Size>("size");
-export const buttonThemes = {
-  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;
-
-  // 优先使用传入的 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,
-      };
-}

package/src/components/common/hover-popover/index.tsx

@@ -1,179 +0,0 @@
-import { useState, useRef } from "preact/hooks";
-import type { FunctionalComponent, JSX } from "preact";
-import { getHoverPopoverTheme } from "./theme";
-
-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 theme = getHoverPopoverTheme();
-
-  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);
-  };
-
-  // 弹层定位样式
-  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;

package/src/components/common/hover-popover/theme.tsx

@@ -1,39 +0,0 @@
-import { Theme } from "@/types";
-import { getInitParams } from "@/utils/business";
-
-export const hoverPopoverThemes = {
-  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",
-    },
-  },
-};
-
-export function getHoverPopoverTheme() {
-  const theme = getInitParams<Theme>("theme");
-  const whiteTheme = theme === Theme.WHITE;
-  return whiteTheme ? hoverPopoverThemes.white : hoverPopoverThemes.dark;
-}