best-unit 1.1.1 → 1.2.2

package/package.json

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

package/src/api/index.ts

@@ -21,8 +21,11 @@ export function getBalance() {
         bizType: data.biz_type,
         currency: data.currency,
         totalAmount: data.total_amount,
-        availableAmount: data.available_amount,
         frozenAmount: data.frozen_amount,
+        creditLimit: data.credit_config?.credit_limit,
+        creditUsed: data.credit_used,
+        isCredit: data.credit_config ? true : false,
+        availableAmount: data.available_amount,
         pendingAmount: data.pending_amount,
         status: data.status,
         createdAt: data.created_at,

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

@@ -14,47 +14,73 @@ function formatNumber(num: number) {
   });
 }
 
+interface DetailItem {
+  label: string;
+  value: number;
+  color: string;
+  dot: string;
+}
+
 function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
-  const [balanceData, setBalanceData] = useState({
+  const [balanceData, setBalanceData] = useState<{
+    available: number;
+    currency: string;
+    symbol: string;
+    details: DetailItem[];
+  }>({
     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" },
-    ],
+    details: [],
   });
 
   const fetchBalance = async () => {
     try {
       const balance = await getBalance();
 
-      // 根据 API 返回的数据构建 balanceData
+      // 根据 API 返回的数据构建 balanceData，只保存数值数据
+      const details: DetailItem[] = [
+        {
+          label: "", // 翻译在渲染时处理
+          value: balance.availableAmount,
+          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.totalAmount,
+          color: "#1890ff",
+          dot: "#15b36b",
+        },
+      ];
+
       const newBalanceData = {
         available: balance.availableAmount,
-        currency: "USD", // 可以根据实际 API 返回调整
+        currency: "USD",
         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",
-          },
-        ],
+        details,
       };
 
       setBalanceData(newBalanceData);
@@ -91,12 +117,50 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
 
   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>
-          {balanceData.details.map((item) => (
+          {translatedDetails.map((item) => (
             <div key={item.label} style={theme.detailRow}>
               <span style={theme.detailLabel}>
                 <span style={theme.detailDot(item.dot)} />

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

@@ -63,7 +63,7 @@ export const statisticalBalanceThemes = {
       justifyContent: "space-between",
       alignItems: "center",
       padding: "8px 0",
-      borderBottom: "1px solid #23262F",
+      borderBottom: "1px solid #374151",
       fontSize: 15,
     },
     detailLabel: {

package/src/local/en.ts

@@ -2,9 +2,11 @@
 export const en: Record<string, string> = {
   // 余额相关
   余额详情: "Balance Details",
-  真实金额: "Real Amount",
+  真实金额: "Real Balance",
   冻结金额: "Frozen Amount",
-  总可用: "Total Available",
+  信用额度: "Credit Limit",
+  已用额度: "Credit Used",
+  可用余额: "Available Balance",
   暂无数据: "No Data",
   "金额需在1到999999.99之间": "Amount must be between 1 and 999999.99",
 

package/src/local/zh.ts

@@ -4,7 +4,9 @@ export const zh: Record<string, string> = {
   余额详情: "余额详情",
   真实金额: "真实金额",
   冻结金额: "冻结金额",
-  总可用: "总可用",
+  信用额度: "信用额度",
+  已用额度: "已用额度",
+  可用余额: "可用余额",
   暂无数据: "暂无数据",
   "金额需在1到999999.99之间": "金额需在1到999999.99之间",