best-unit 0.0.13 → 0.0.14

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

@@ -0,0 +1,156 @@
+import { useState, useEffect } from "preact/hooks";
+import HoverPopover from "../../common/HoverPopover";
+import { getBalance } from "../../../api";
+import register from "preact-custom-element";
+
+// 默认数据，用于加载时显示
+const defaultBalanceData = {
+  available: 0,
+  currency: "USD",
+  symbol: "$",
+  details: [
+    { label: "真实金额", value: 0, color: "#15b36b", dot: "#15b36b" },
+    { label: "冻结金额", value: 0, color: "#f59e0b", dot: "#f59e0b" },
+    { label: "总可用", value: 0, color: "#155EEF", dot: "#15b36b" },
+  ],
+};
+
+function formatNumber(num: number) {
+  return num.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+function StatisticalBalance() {
+  const [balanceData, setBalanceData] = useState(defaultBalanceData);
+
+  useEffect(() => {
+    const fetchBalance = async () => {
+      try {
+        const balance = await getBalance();
+
+        // 根据 API 返回的数据构建 balanceData
+        const newBalanceData = {
+          available: balance.availableAmount,
+          currency: "USD", // 可以根据实际 API 返回调整
+          symbol: "$",
+          details: [
+            {
+              label: "真实金额",
+              value: balance.totalAmount,
+              color: "#15b36b",
+              dot: "#15b36b",
+            },
+            {
+              label: "冻结金额",
+              value: balance.frozenAmount,
+              color: "#f59e0b",
+              dot: "#f59e0b",
+            },
+            {
+              label: "总可用",
+              value: balance.availableAmount,
+              color: "#155EEF",
+              dot: "#15b36b",
+            },
+          ],
+        };
+
+        setBalanceData(newBalanceData);
+      } catch (err) {
+        console.error("获取余额失败:", err);
+        // 获取失败时保持默认的 $0 USD 显示
+      }
+    };
+
+    fetchBalance();
+  }, []);
+
+  return (
+    <HoverPopover
+      popover={
+        <>
+          <div
+            style={{
+              fontSize: 16,
+              fontWeight: 600,
+              color: "#222",
+              marginBottom: 16,
+              textAlign: "center",
+            }}
+          >
+            余额详情
+          </div>
+          {balanceData.details.map((item) => (
+            <div
+              key={item.label}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "8px 0",
+                borderBottom: "1px solid #e5e7eb",
+                fontSize: 15,
+              }}
+            >
+              <span
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  color: "#6b7280",
+                  fontWeight: 500,
+                }}
+              >
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: item.dot,
+                    marginRight: 8,
+                  }}
+                />
+                {item.label}
+              </span>
+              <span
+                style={{ color: item.color, fontWeight: 600, fontSize: 15 }}
+              >
+                {balanceData.symbol}
+                {formatNumber(item.value)}
+              </span>
+            </div>
+          ))}
+        </>
+      }
+      popoverPosition="rightTop"
+    >
+      <div
+        style={{
+          fontSize: 24,
+          fontWeight: 800,
+          color: "#111827",
+          display: "inline-block",
+        }}
+      >
+        {balanceData.symbol}
+        {formatNumber(balanceData.available)}
+        <span
+          style={{
+            fontSize: 18,
+            color: "#6b7280",
+            marginLeft: 8,
+            fontWeight: 600,
+          }}
+        >
+          {balanceData.currency}
+        </span>
+      </div>
+    </HoverPopover>
+  );
+}
+
+register(StatisticalBalance, "best-statistical-balance");
+
+export default StatisticalBalance;

package/src/components/common/HoverPopover.tsx

@@ -0,0 +1,163 @@
+import { useState, useRef } from "preact/hooks";
+import type { FunctionalComponent, JSX } from "preact";
+
+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 handleMouseEnter = () => {
+    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);
+  };
+
+  // 弹层定位样式
+  let popoverStyle: any = {
+    position: "absolute",
+    zIndex: 10,
+    background: "#fff",
+    color: "#222",
+    borderRadius: 6,
+    fontSize: 15,
+    minWidth: popoverMinWidth,
+    width: popoverWidth,
+    padding: "8px 14px",
+    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+    pointerEvents: "auto",
+    textAlign: "center",
+    border: "none",
+    animation: "fadeInUp 0.3s",
+  };
+  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 #fff",
+    };
+  } 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 #fff",
+    };
+  } 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 #fff",
+    };
+  } 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 #fff",
+    };
+  }
+
+  return (
+    <div
+      ref={ref}
+      style={{ position: "relative", display: "inline-block" }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={() => setShow(false)}
+    >
+      {children}
+      {show && (
+        <div style={popoverStyle}>
+          {popover}
+          <div style={arrowStyle} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HoverPopover;

package/src/components/common/Message.tsx

@@ -0,0 +1,324 @@
+import type { FunctionalComponent } from "preact";
+import { useState, useEffect } from "preact/hooks";
+
+export type MessageType = "success" | "error" | "warning" | "info";
+
+interface MessageProps {
+  type: MessageType;
+  content: string;
+  duration?: number;
+  onClose?: () => void;
+  closable?: boolean;
+}
+
+const MessageItem: FunctionalComponent<MessageProps> = ({
+  type,
+  content,
+  duration = 3000,
+  onClose,
+  closable = false,
+}) => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        setTimeout(() => onClose?.(), 300);
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+
+  const getIcon = () => {
+    switch (type) {
+      case "error":
+        return (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="8" fill="#ff4d4f" />
+            <path
+              d="M10.5 5.5l-5 5m0-5l5 5"
+              stroke="white"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        );
+      case "success":
+        return (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="8" fill="#52c41a" />
+            <path
+              d="M5 8.5l2.2 2.2 3.8-3.4"
+              stroke="white"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </svg>
+        );
+      case "warning":
+        return (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="8" fill="#faad14" />
+            <path
+              d="M8 4.5v5"
+              stroke="white"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+            <circle cx="8" cy="12.5" r="1" fill="white" />
+          </svg>
+        );
+      case "info":
+        return (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="8" fill="#1677ff" />
+            <rect
+              x="7.25"
+              y="7"
+              width="1.5"
+              height="6"
+              rx="0.75"
+              fill="white"
+            />
+            <rect
+              x="7.25"
+              y="5"
+              width="1.5"
+              height="1.5"
+              rx="0.75"
+              fill="white"
+            />
+          </svg>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getBackgroundColor = () => {
+    return "#fff"; // 统一使用白色背景
+  };
+
+  const getBorderColor = () => {
+    return "#d9d9d9"; // 统一使用灰色边框
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: "20px",
+        left: "50%",
+        zIndex: 9999,
+        background: getBackgroundColor(),
+        border: `1px solid ${getBorderColor()}`,
+        borderRadius: "12px", // 更圆润的圆角
+        padding: "8px 16px", // 减小上下padding
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)", // 增强阴影效果
+        minWidth: content.length < 20 ? "auto" : "300px", // 短消息自适应宽度
+        maxWidth: "500px",
+        opacity: visible ? 1 : 0,
+        transform: visible
+          ? "translateX(-50%) translateY(0)"
+          : "translateX(-50%) translateY(-20px)",
+        transition: "all 0.3s ease",
+      }}
+    >
+      <div style={{ flexShrink: 0 }}>{getIcon()}</div>
+      <div
+        style={{
+          color: "#222",
+          fontSize: "14px",
+          lineHeight: "1.5",
+          flex: 1,
+        }}
+      >
+        {content}
+      </div>
+      {closable && (
+        <button
+          onClick={() => {
+            setVisible(false);
+            setTimeout(() => onClose?.(), 300);
+          }}
+          style={{
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px",
+            color: "#999",
+            fontSize: "12px",
+            flexShrink: 0,
+          }}
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+};
+
+// 支持对象参数
+interface MessageOptions {
+  content: string;
+  duration?: number;
+  closable?: boolean;
+}
+
+type MessageArg = string | MessageOptions;
+
+// 简单的消息管理器
+class MessageManager {
+  private parseArg(arg: MessageArg): MessageOptions {
+    if (typeof arg === "string") {
+      return { content: arg };
+    }
+    return arg;
+  }
+
+  show(type: MessageType, arg: MessageArg) {
+    const { content, duration, closable } = this.parseArg(arg);
+    // 创建消息元素
+    const messageDiv = document.createElement("div");
+    messageDiv.style.cssText = `
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      background: #fff;
+      border: 1px solid #fff;
+      border-radius: 12px;
+      padding: 8px 16px;
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+      min-width: ${content.length < 20 ? "auto" : "300px"};
+      max-width: 500px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #222;
+    `;
+
+    // 添加图标
+    if (type === "error") {
+      const iconSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      iconSvg.setAttribute("width", "16");
+      iconSvg.setAttribute("height", "16");
+      iconSvg.setAttribute("viewBox", "0 0 16 16");
+      iconSvg.innerHTML = `
+        <circle cx="8" cy="8" r="8" fill="#ff4d4f"/>
+        <path d="M10.5 5.5l-5 5m0-5l5 5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+      `;
+      messageDiv.appendChild(iconSvg);
+    }
+    if (type === "success") {
+      const iconSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      iconSvg.setAttribute("width", "16");
+      iconSvg.setAttribute("height", "16");
+      iconSvg.setAttribute("viewBox", "0 0 16 16");
+      iconSvg.innerHTML = `
+        <circle cx="8" cy="8" r="8" fill="#52c41a"/>
+        <path d="M5 8.5l2.2 2.2 3.8-3.4" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+      `;
+      messageDiv.appendChild(iconSvg);
+    }
+    if (type === "warning") {
+      const iconSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      iconSvg.setAttribute("width", "16");
+      iconSvg.setAttribute("height", "16");
+      iconSvg.setAttribute("viewBox", "0 0 16 16");
+      iconSvg.innerHTML = `
+        <circle cx="8" cy="8" r="8" fill="#faad14"/>
+        <path d="M8 4.5v5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        <circle cx="8" cy="12.5" r="1" fill="white"/>
+      `;
+      messageDiv.appendChild(iconSvg);
+    }
+    if (type === "info") {
+      const iconSvg = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      iconSvg.setAttribute("width", "16");
+      iconSvg.setAttribute("height", "16");
+      iconSvg.setAttribute("viewBox", "0 0 16 16");
+      iconSvg.innerHTML = `
+        <circle cx="8" cy="8" r="8" fill="#1677ff"/>
+        <rect x="7.25" y="7" width="1.5" height="6" rx="0.75" fill="white"/>
+        <rect x="7.25" y="5" width="1.5" height="1.5" rx="0.75" fill="white"/>
+      `;
+      messageDiv.appendChild(iconSvg);
+    }
+
+    // 添加文本
+    const textDiv = document.createElement("div");
+    textDiv.textContent = content;
+    textDiv.style.flex = "1";
+    messageDiv.appendChild(textDiv);
+
+    // 添加关闭按钮（如果启用）
+    if (closable) {
+      const closeBtn = document.createElement("button");
+      closeBtn.textContent = "✕";
+      closeBtn.style.cssText = `
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        color: #999;
+        font-size: 12px;
+      `;
+      closeBtn.onclick = () => {
+        document.body.removeChild(messageDiv);
+      };
+      messageDiv.appendChild(closeBtn);
+    }
+
+    // 添加到页面
+    document.body.appendChild(messageDiv);
+
+    // 自动关闭
+    if (duration !== 0) {
+      setTimeout(() => {
+        if (document.body.contains(messageDiv)) {
+          document.body.removeChild(messageDiv);
+        }
+      }, duration || 3000);
+    }
+  }
+
+  success(arg: MessageArg) {
+    this.show("success", arg);
+  }
+
+  error(arg: MessageArg) {
+    this.show("error", arg);
+  }
+
+  warning(arg: MessageArg) {
+    this.show("warning", arg);
+  }
+
+  info(arg: MessageArg) {
+    this.show("info", arg);
+  }
+}
+
+export const message = new MessageManager();
+export default MessageItem;