best-unit 1.0.11 → 1.0.13

package/dist/types/global.d.ts

@@ -21,6 +21,10 @@ export declare function initFundUnit(params: {
   env: Env;
 };
 
+export declare function getBalanceData(): any;
+
+export declare function refreshBalance(): void;
+
 // Vite 代理配置类型
 export declare const viteProxy: {
   "/api": {
@@ -44,6 +48,8 @@ declare global {
         theme?: Theme;
         env: Env;
       }) => void;
+      getBalanceData: () => any;
+      refreshBalance: () => void;
     };
   }
 
@@ -57,6 +63,7 @@ declare global {
         [key: string]: any;
       };
       "best-statistical-balance": any;
+      "best-refresh-button": any;
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "best-unit",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/best-unit.cjs",
   "module": "dist/best-unit.js",

package/src/api/axiosInstance.ts

@@ -24,17 +24,17 @@ export function createAxiosInstance(options: CreateAxiosOptions = {}) {
 
   let apiUrl: string;
   switch (env) {
-    case Env.PROD:
-    case Env.PRODUCTION:
-      apiUrl = "https://fund.bestfulfill.com/api/sdk";
+    case Env.DEV:
+    case Env.DEVELOPMENT:
+      apiUrl = "/api";
       break;
     case Env.TEST:
       apiUrl = "https://fund.bestfulfill.tech/api/sdk";
       break;
-    case Env.DEV:
-    case Env.DEVELOPMENT:
+    case Env.PROD:
+    case Env.PRODUCTION:
     default:
-      apiUrl = "/api";
+      apiUrl = "https://fund.bestfulfill.com/api/sdk";
       break;
   }
 

package/src/api/index.ts

@@ -15,11 +15,20 @@ export function getBalance() {
     })
     .then((res) => {
       const data = res.data;
-      return {
-        totalAmount: data.total_amount || 0,
-        availableAmount: data.available_amount || 0,
-        frozenAmount: data.frozen_amount || 0,
+      const balanceData = {
+        fundBalanceId: data.fund_balance_id,
+        merchantId: data.merchant_id,
+        bizType: data.biz_type,
+        currency: data.currency,
+        totalAmount: data.total_amount,
+        availableAmount: data.available_amount,
+        frozenAmount: data.frozen_amount,
+        pendingAmount: data.pending_amount,
+        status: data.status,
+        createdAt: data.created_at,
       };
+      sessionStorage.setItem("balanceData", JSON.stringify(balanceData));
+      return balanceData;
     });
 }
 
@@ -83,8 +92,6 @@ export const createOnlineRecharge = async (data: any) => {
     sessionStorage.getItem("fund_unit_params") || "{}"
   );
 
-  console.log(fundUnitParams, "fundUnitParams");
-
   const params = {
     merchant_id: Number(fundUnitParams.merchantId),
     biz_type: fundUnitParams.bizType,

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

@@ -0,0 +1,94 @@
+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;
+    }
+  `;
+
+  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");
+
+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

@@ -26,48 +26,69 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
     ],
   });
 
-  useEffect(() => {
-    const fetchBalance = async () => {
-      try {
-        const balance = await getBalance();
+  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",
-            },
-          ],
-        };
+      // 根据 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 显示
-      }
-    };
+      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();
 
   return (

package/src/demo/App.tsx

@@ -1,10 +1,12 @@
 import { useState } from "preact/hooks";
 import { npmTest, printCurrentTime } from "@/main";
 import { BestUnit } from "@/components/business/recharge-sdk";
-import { initFundUnit } from "@/main";
+import { initFundUnit, refreshBalance } from "@/main";
 import StatisticalBalance from "@/components/business/statistical-balance";
+import RefreshButton from "@/components/business/refresh-button";
 import { t } from "@/local";
 import { Env, Locale, Theme } from "@/types";
+import TestBalanceData from "./testBalanceData";
 
 export default function DemoApp() {
   const [currentLocale, setCurrentLocale] = useState<Locale>(Locale.ZH);
@@ -107,6 +109,9 @@ export default function DemoApp() {
         </p>
       </div>
 
+      {/* getBalanceData 测试区域 */}
+      <TestBalanceData isDark={isDark} />
+
       {/* 国际化切换区域 */}
       <div
         style={{
@@ -342,6 +347,148 @@ export default function DemoApp() {
         <StatisticalBalance />
       </div>
 
+      {/* Refresh Button 测试区域 */}
+      <div
+        style={{
+          marginTop: 20,
+          padding: 16,
+          border: "2px solid #722ed1",
+          borderRadius: 8,
+          backgroundColor: "#f9f0ff",
+        }}
+      >
+        <h3 style={{ marginTop: 0, marginBottom: 12, color: "#722ed1" }}>
+          🧪 Refresh Button 组件测试：
+        </h3>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            基本用法：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <RefreshButton>{t("刷新")}</RefreshButton>
+            <RefreshButton></RefreshButton>
+            <RefreshButton color="#ff6b6b"></RefreshButton>
+            <RefreshButton color="#52c41a"></RefreshButton>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            不同尺寸：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <RefreshButton size="small"></RefreshButton>
+            <RefreshButton size="medium"></RefreshButton>
+            <RefreshButton size="large"></RefreshButton>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            与余额组件配合使用：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 16,
+              alignItems: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <RefreshButton>{t("刷新")}</RefreshButton>
+          </div>
+          <p
+            style={{
+              marginTop: 8,
+              fontSize: "12px",
+              color: "#666",
+              textAlign: "center",
+            }}
+          >
+            点击刷新按钮可以重新获取余额数据
+          </p>
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            自定义样式：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <RefreshButton color="#1890ff" size="medium">
+              {t("刷新")}
+            </RefreshButton>
+            <RefreshButton color="#52c41a" size="small"></RefreshButton>
+            <RefreshButton color="#faad14" size="large">
+              {t("刷新")}
+            </RefreshButton>
+            <RefreshButton color="#ff4d4f" size="medium"></RefreshButton>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            自定义文案：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <RefreshButton>重新加载</RefreshButton>
+            <RefreshButton>更新</RefreshButton>
+            <RefreshButton>同步</RefreshButton>
+            <RefreshButton>刷新余额</RefreshButton>
+          </div>
+        </div>
+
+        <div
+          style={{
+            marginTop: 16,
+            padding: 12,
+            backgroundColor: isDark ? "#23262F" : "#fff",
+            border: "1px solid #d9d9d9",
+            borderRadius: 6,
+            fontSize: "12px",
+          }}
+        >
+          <strong>测试说明：</strong>
+          <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+            <li>点击任意刷新按钮都会触发余额组件重新获取数据</li>
+            <li>鼠标悬停在按钮上会有缩放和透明度变化效果</li>
+            <li>鼠标悬停在刷新图标上会有旋转动画</li>
+            <li>支持不同尺寸和颜色自定义</li>
+            <li>可以通过 slot 传入自定义文案，不传则只显示图标</li>
+            <li>支持任意内容作为 slot，包括文本、图标等</li>
+          </ul>
+        </div>
+      </div>
+
       {/* 国际化文本测试区域 */}
       <div
         style={{
@@ -424,6 +571,106 @@ export default function DemoApp() {
           </div>
         </div>
       </div>
+
+      {/* Business Utils 测试区域 */}
+      <div
+        style={{
+          marginTop: 20,
+          padding: 16,
+          border: "2px solid #13c2c2",
+          borderRadius: 8,
+          backgroundColor: "#e6fffb",
+        }}
+      >
+        <h3 style={{ marginTop: 0, marginBottom: 12, color: "#13c2c2" }}>
+          🧪 Business Utils 方法测试：
+        </h3>
+
+        <div style={{ marginBottom: 16 }}>
+          <h4 style={{ color: isDark ? "#F5F6FA" : "#333", marginBottom: 8 }}>
+            refreshBalanceEvent 方法测试：
+          </h4>
+          <div
+            style={{
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <button
+              onClick={() => refreshBalance()}
+              style={{
+                padding: "8px 16px",
+                backgroundColor: "#13c2c2",
+                color: "#fff",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              调用 refreshBalanceEvent()
+            </button>
+            <button
+              onClick={() => refreshBalance()}
+              style={{
+                padding: "8px 16px",
+                backgroundColor: "#722ed1",
+                color: "#fff",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              静默刷新余额
+            </button>
+            <button
+              onClick={() => refreshBalance()}
+              style={{
+                padding: "8px 16px",
+                backgroundColor: "#52c41a",
+                color: "#fff",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              自定义来源刷新
+            </button>
+          </div>
+        </div>
+
+        <div
+          style={{
+            marginTop: 16,
+            padding: 12,
+            backgroundColor: isDark ? "#23262F" : "#fff",
+            border: "1px solid #d9d9d9",
+            borderRadius: 6,
+            fontSize: "12px",
+          }}
+        >
+          <strong>Business Utils 方法说明：</strong>
+          <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+            <li>
+              <code>refreshBalanceEvent()</code> -
+              基础刷新方法，触发所有余额组件刷新
+            </li>
+            <li>
+              <code>refreshBalanceEvent(&#123; silent: true &#125;)</code> -
+              静默刷新，不显示控制台日志
+            </li>
+            <li>
+              <code>refreshBalanceEvent(&#123; source: "custom" &#125;)</code> -
+              自定义来源标识的刷新
+            </li>
+            <li>现在refresh-button组件内部也使用这个函数，实现了代码复用</li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
 }