best-unit 0.0.32 → 0.0.34

package/dist/types/global.d.ts

@@ -8,12 +8,14 @@ export declare function initFundUnit(params: {
   biz_type: string;
   user_id: string;
   theme?: string;
+  locale?: "zh" | "en";
 }): {
   token: string;
   merchantId: string;
   bizType: string;
   theme?: string;
   userId: string;
+  locale: "zh" | "en";
 };
 
 // Vite 代理配置类型
@@ -26,12 +28,6 @@ export declare const viteProxy: {
   };
 };
 
-// Next.js 代理配置类型
-export declare const nextProxy: {
-  source: string;
-  destination: string;
-};
-
 declare global {
   interface Window {
     bestUnit: {
@@ -39,6 +35,7 @@ declare global {
         token: string;
         merchant_id: string;
         biz_type: string;
+        locale?: "zh" | "en";
       }) => void;
     };
   }

package/package.json

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

package/src/api/proxy.ts

@@ -7,10 +7,5 @@ const viteProxy = {
     secure: false,
   },
 };
-// next.js 配置用的代理对象
-const nextProxy = {
-  source: "/api/:path*",
-  destination: "https://fund.bestfulfill.tech/api/sdk/:path*",
-};
 
-export { viteProxy, nextProxy };
+export { viteProxy };

package/src/components/business/recharge-sdk/components/OfflineTransferForm.tsx

@@ -2,6 +2,7 @@ import type { FunctionalComponent } from "preact";
 import { Upload } from "../../../common/Upload";
 import { createOfflineRecharge } from "../../../../api";
 import { message } from "../../../common/Message";
+import { t } from "../../../../local";
 
 interface OfflineTransferFormProps {
   formState: {
@@ -243,21 +244,21 @@ export const OfflineTransferForm: FunctionalComponent<
     if (!formState.platform) {
       setFormState((state: any) => ({
         ...state,
-        platformError: "请选择支付平台",
+        platformError: t("请选择支付平台"),
       }));
       valid = false;
     }
     if (!formState.transactionId.trim()) {
       setFormState((state: any) => ({
         ...state,
-        transactionIdError: "请输入转账交易ID",
+        transactionIdError: t("请输入转账交易ID"),
       }));
       valid = false;
     }
     if (!formState.files || formState.files.length === 0) {
       setFormState((state: any) => ({
         ...state,
-        filesError: "请上传转账凭证",
+        filesError: t("请上传转账凭证"),
       }));
       valid = false;
     }
@@ -268,14 +269,14 @@ export const OfflineTransferForm: FunctionalComponent<
       voucherUrls: formState.files,
     });
     onClose();
-    message.success("离线充值创建成功");
+    message.success(t("离线充值创建成功"));
   };
 
   return (
     <form onSubmit={handleSubmit}>
       <div style={{ marginBottom: 18 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 第三方支付平台
+          <span style={{ color: "#F53F3F" }}>*</span> {t("第三方支付平台")}
         </div>
         <select
           style={{
@@ -293,7 +294,7 @@ export const OfflineTransferForm: FunctionalComponent<
           }}
         >
           <option value="" disabled hidden>
-            请选择支付平台
+            {t("请选择支付平台")}
           </option>
           {channelDict?.map((item: any) => (
             <option value={item.value}>{item.label}</option>
@@ -305,11 +306,11 @@ export const OfflineTransferForm: FunctionalComponent<
       </div>
       <div style={{ marginBottom: 18 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 交易ID
+          <span style={{ color: "#F53F3F" }}>*</span> {t("交易ID")}
         </div>
         <input
           type="text"
-          placeholder="请输入转账交易ID"
+          placeholder={t("请输入转账交易ID")}
           value={formState.transactionId}
           onInput={(e) => {
             const value = (e.target as HTMLInputElement).value;
@@ -330,7 +331,7 @@ export const OfflineTransferForm: FunctionalComponent<
       </div>
       <div style={{ marginBottom: 24 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 上传文件
+          <span style={{ color: "#F53F3F" }}>*</span> {t("上传文件")}
         </div>
         <Upload
           value={formState.files}
@@ -352,10 +353,10 @@ export const OfflineTransferForm: FunctionalComponent<
       {/* 按钮区 */}
       <div style={{ display: "flex", justifyContent: "flex-end", gap: 12 }}>
         <button type="button" onClick={onClose} style={theme.buttonCancel}>
-          取消
+          {t("取消")}
         </button>
         <button type="submit" disabled={loading} style={theme.buttonSubmit}>
-          去支付
+          {t("去支付")}
         </button>
       </div>
     </form>

package/src/components/business/recharge-sdk/components/OnlineRechargeForm.tsx

@@ -1,4 +1,5 @@
 import type { FunctionalComponent } from "preact";
+import { t } from "../../../../local";
 
 interface OnlineRechargeFormProps {
   formState: {
@@ -226,7 +227,7 @@ export const OnlineRechargeForm: FunctionalComponent<
     <>
       <div style={{ marginBottom: 18 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 充值币种
+          <span style={{ color: "#F53F3F" }}>*</span> {t("充值币种")}
         </div>
         <select
           style={{
@@ -243,7 +244,7 @@ export const OnlineRechargeForm: FunctionalComponent<
           }}
         >
           <option value="" disabled hidden>
-            请选择充值币种
+            {t("请选择充值币种")}
           </option>
           {currencyDict?.map((item: any) => (
             <option value={item.value}>{item.label}</option>
@@ -252,11 +253,11 @@ export const OnlineRechargeForm: FunctionalComponent<
       </div>
       <div style={{ marginBottom: 18 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 充值金额
+          <span style={{ color: "#F53F3F" }}>*</span> {t("充值金额")}
         </div>
         <input
           type="text"
-          placeholder="请输入充值金额"
+          placeholder={t("请输入充值金额")}
           value={formState.amount}
           onInput={(e) => {
             const value = (e.target as HTMLInputElement).value;
@@ -277,7 +278,7 @@ export const OnlineRechargeForm: FunctionalComponent<
       </div>
       <div style={{ marginBottom: 24 }}>
         <div style={theme.label}>
-          <span style={{ color: "#F53F3F" }}>*</span> 支付平台
+          <span style={{ color: "#F53F3F" }}>*</span> {t("支付平台")}
         </div>
         <select
           style={{
@@ -295,7 +296,7 @@ export const OnlineRechargeForm: FunctionalComponent<
           }}
         >
           <option value="" disabled hidden>
-            请选择支付平台
+            {t("请选择支付平台")}
           </option>
           {channelDict?.map((item: any) => (
             <option value={item.value}>{item.label}</option>
@@ -312,10 +313,10 @@ export const OnlineRechargeForm: FunctionalComponent<
       )}
       <div style={{ display: "flex", justifyContent: "flex-end", gap: 12 }}>
         <button type="button" onClick={onClose} style={buttonCancelStyle}>
-          取消
+          {t("取消")}
         </button>
         <button type="submit" disabled={loading} style={buttonSubmitStyle}>
-          {loading ? "提交中..." : "去支付"}
+          {loading ? t("提交中...") : t("去支付")}
         </button>
       </div>
     </>

package/src/components/business/recharge-sdk/components/Recharge.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "preact/hooks";
 import { OnlineRechargeForm } from "./OnlineRechargeForm";
 import { OfflineTransferForm } from "./OfflineTransferForm";
+import { t } from "../../../../local";
 
 interface ModalFormProps {
   visible: boolean;
@@ -81,13 +82,13 @@ export function Recharge({
       rechargeChannelError: "",
     }));
     if (!formState.amount.trim()) {
-      setFormState((state) => ({ ...state, amountError: "请输入充值金额" }));
+      setFormState((state) => ({ ...state, amountError: t("请输入充值金额") }));
       valid = false;
     }
     if (!formState.rechargeChannel) {
       setFormState((state) => ({
         ...state,
-        rechargeChannelError: "请选择支付平台",
+        rechargeChannelError: t("请选择支付平台"),
       }));
       valid = false;
     }
@@ -101,7 +102,7 @@ export function Recharge({
       });
       onClose();
     } catch {
-      setFormState((state) => ({ ...state, error: "提交失败，请重试" }));
+      setFormState((state) => ({ ...state, error: t("提交失败，请重试") }));
     } finally {
       setFormState((state) => ({ ...state, loading: false }));
     }
@@ -231,11 +232,11 @@ export function Recharge({
           type="button"
           onClick={onClose}
           style={theme.closeBtn}
-          aria-label="关闭"
+          aria-label={t("关闭")}
         >
           ×
         </button>
-        <div style={theme.title}>充值 / 转账</div>
+        <div style={theme.title}>{t("充值 / 转账")}</div>
         {/* tab 按钮区域 */}
         <div style={{ display: "flex", marginBottom: 28 }}>
           <button
@@ -243,14 +244,14 @@ export function Recharge({
             onClick={() => setActiveTab("online")}
             style={theme.tabBtn(activeTab === "online", true)}
           >
-            在线充值
+            {t("在线充值")}
           </button>
           <button
             type="button"
             onClick={() => setActiveTab("offline")}
             style={theme.tabBtn(activeTab === "offline", false)}
           >
-            线下转账
+            {t("线下转账")}
           </button>
         </div>
         {/* tab 内容区域 */}

package/src/components/business/recharge-sdk/index.tsx

@@ -2,13 +2,14 @@ import { useState } from "preact/hooks";
 import { ThemedButton } from "./components/Button";
 import { Recharge } from "./components/Recharge";
 import register from "preact-custom-element";
-import { createOnlineRecharge, getAllDicts } from "../../../api";
-getAllDicts();
+import { createOnlineRecharge } from "../../../api";
+import { t } from "../../../local";
 
 export function BestUnit(props: any) {
   const [visible, setVisible] = useState(false);
   const [whiteTheme, setWhiteTheme] = useState(true);
   const color = props.theme?.primaryColor;
+
   const handleSubmit = async (form: {
     amount: string;
     rechargeChannel: string;
@@ -25,7 +26,7 @@ export function BestUnit(props: any) {
   return (
     <div>
       <ThemedButton color={color} onClick={() => setVisible(true)}>
-        打开表单
+        {t("充值/转账")}
       </ThemedButton>
       <button
         style={{
@@ -37,7 +38,7 @@ export function BestUnit(props: any) {
         }}
         onClick={() => setWhiteTheme((v) => !v)}
       >
-        {whiteTheme ? "切换为暗黑主题" : "切换为白色主题"}
+        {whiteTheme ? t("切换为暗黑主题") : t("切换为白色主题")}
       </button>
       <Recharge
         visible={visible}

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

@@ -1,20 +1,9 @@
 import { useState, useEffect } from "preact/hooks";
 import HoverPopover, { type PopoverPosition } from "../../common/HoverPopover";
 import { getBalance } from "../../../api";
+import { t } from "../../../local";
 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,
@@ -23,7 +12,16 @@ function formatNumber(num: number) {
 }
 
 function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
-  const [balanceData, setBalanceData] = useState(defaultBalanceData);
+  const [balanceData, setBalanceData] = useState({
+    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" },
+    ],
+  });
 
   useEffect(() => {
     const fetchBalance = async () => {
@@ -37,19 +35,19 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
           symbol: "$",
           details: [
             {
-              label: "真实金额",
+              label: t("真实金额"),
               value: balance.totalAmount,
               color: "#15b36b",
               dot: "#15b36b",
             },
             {
-              label: "冻结金额",
+              label: t("冻结金额"),
               value: balance.frozenAmount,
               color: "#f59e0b",
               dot: "#f59e0b",
             },
             {
-              label: "总可用",
+              label: t("总可用"),
               value: balance.availableAmount,
               color: "#155EEF",
               dot: "#15b36b",
@@ -80,7 +78,7 @@ function StatisticalBalance(props: { popoverPosition?: PopoverPosition }) {
               textAlign: "center",
             }}
           >
-            余额详情
+            {t("余额详情")}
           </div>
           {balanceData.details.map((item) => (
             <div

package/src/components/common/HoverPopover.tsx

@@ -56,7 +56,7 @@ const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
   // 弹层定位样式
   let popoverStyle: any = {
     position: "absolute",
-    zIndex: 10,
+    zIndex: 999,
     background: "#fff",
     color: "#222",
     borderRadius: 6,

package/src/components/common/Upload.tsx

@@ -1,6 +1,7 @@
 import type { FunctionalComponent } from "preact";
 import { useRef, useState } from "preact/hooks";
 import { uploadFile } from "../../api";
+import { t } from "../../local";
 
 interface UploadProps {
   value?: string[];
@@ -78,11 +79,11 @@ export const Upload: FunctionalComponent<UploadProps> = ({
       >
         <div style={{ fontSize: 48, marginBottom: 12 }}>📁</div>
         <div style={{ color: "#222", fontSize: 15, marginBottom: 4 }}>
-          点击或拖拽文件到此处上传
+          {t("点击或拖拽文件到此处上传")}
         </div>
         <div style={{ color: "#999", fontSize: 13 }}>
-          支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传 {maxCount}{" "}
-          个文件
+          {t("支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传")}{" "}
+          {maxCount} {t("个文件")}
         </div>
         <input
           ref={fileInputRef}
@@ -95,7 +96,7 @@ export const Upload: FunctionalComponent<UploadProps> = ({
         />
         {uploading && (
           <div style={{ marginTop: 12, color: "#1677ff" }}>
-            正在上传... {progress}%
+            {t("正在上传...")} {progress}%
           </div>
         )}
       </div>
@@ -121,7 +122,7 @@ export const Upload: FunctionalComponent<UploadProps> = ({
                   {url.split("/").pop()}
                 </span>
                 <span style={{ color: "#8C8F93", fontSize: 13, marginLeft: 8 }}>
-                  [已上传]
+                  [{t("已上传")}]
                 </span>
               </div>
               <button
@@ -142,7 +143,7 @@ export const Upload: FunctionalComponent<UploadProps> = ({
                 }}
                 disabled={disabled}
               >
-                移除
+                {t("移除")}
               </button>
             </div>
           ))}

package/src/demo/App.tsx

@@ -1,21 +1,86 @@
+import { useState } from "preact/hooks";
 import { npmTest, printCurrentTime } from "../main";
 import { BestUnit } from "../components/business/recharge-sdk";
 import { initFundUnit } from "../main";
 import StatisticalBalance from "../components/business/statistical-balance";
+import { t } from "../local";
 
 export default function DemoApp() {
-  initFundUnit({
-    token:
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTM0MTM1MjksIm1lcmNoYW50X2lkIjoxMTI4LCJ0aW1lc3RhbXAiOjE3NTMxNTQzMjl9.UAvzq0P4HCnbJR1Ga3CgF6q3vk2RHiZRvnAFohBTHpw",
-    merchant_id: "1128",
-    biz_type: "ad",
-    user_id: "123",
-  });
+  const [currentLocale, setCurrentLocale] = useState<"zh" | "en">("zh");
+
+  const initApp = (locale: "zh" | "en") => {
+    initFundUnit({
+      token:
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTM0MTM1MjksIm1lcmNoYW50X2lkIjoxMTI4LCJ0aW1lc3RhbXAiOjE3NTMxNTQzMjl9.UAvzq0P4HCnbJR1Ga3CgF6q3vk2RHiZRvnAFohBTHpw",
+      merchant_id: "1128",
+      biz_type: "ad",
+      user_id: "123",
+      locale: locale,
+    });
+  };
+
+  // 初始化应用
+  initApp(currentLocale);
+
+  const handleLocaleChange = (locale: "zh" | "en") => {
+    setCurrentLocale(locale);
+    // 重新初始化以更新语言设置
+    initApp(locale);
+  };
 
   return (
     <div>
       <h2>组件库可视化测试</h2>
 
+      {/* 国际化切换区域 */}
+      <div
+        style={{
+          marginBottom: 20,
+          padding: 16,
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          backgroundColor: "#f9fafb",
+        }}
+      >
+        <h3 style={{ marginTop: 0, marginBottom: 12 }}>国际化测试：</h3>
+        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+          <span>当前语言：</span>
+          <button
+            onClick={() => handleLocaleChange("zh")}
+            style={{
+              padding: "8px 16px",
+              backgroundColor: currentLocale === "zh" ? "#155EEF" : "#fff",
+              color: currentLocale === "zh" ? "#fff" : "#333",
+              border: "1px solid #155EEF",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontWeight: currentLocale === "zh" ? "bold" : "normal",
+            }}
+          >
+            中文
+          </button>
+          <button
+            onClick={() => handleLocaleChange("en")}
+            style={{
+              padding: "8px 16px",
+              backgroundColor: currentLocale === "en" ? "#155EEF" : "#fff",
+              color: currentLocale === "en" ? "#fff" : "#333",
+              border: "1px solid #155EEF",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontWeight: currentLocale === "en" ? "bold" : "normal",
+            }}
+          >
+            English
+          </button>
+          <span style={{ marginLeft: 12, fontSize: 14, color: "#666" }}>
+            {currentLocale === "zh"
+              ? "当前显示中文"
+              : "Currently showing English"}
+          </span>
+        </div>
+      </div>
+
       <div>
         <h3>BestUnit 组件演示：</h3>
         <BestUnit
@@ -36,6 +101,60 @@ export default function DemoApp() {
         <h3>余额卡片组件演示：</h3>
         <StatisticalBalance />
       </div>
+
+      {/* 国际化文本测试区域 */}
+      <div
+        style={{
+          marginTop: 20,
+          padding: 16,
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          backgroundColor: "#f9fafb",
+        }}
+      >
+        <h3 style={{ marginTop: 0, marginBottom: 12 }}>国际化文本测试：</h3>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+            gap: 12,
+          }}
+        >
+          <div style={{ padding: 8, backgroundColor: "#fff", borderRadius: 4 }}>
+            <strong>余额相关：</strong>
+            <br />
+            {t("余额详情")}
+            <br />
+            {t("真实金额")}
+            <br />
+            {t("冻结金额")}
+            <br />
+            {t("总可用")}
+          </div>
+          <div style={{ padding: 8, backgroundColor: "#fff", borderRadius: 4 }}>
+            <strong>充值相关：</strong>
+            <br />
+            {t("充值 / 转账")}
+            <br />
+            {t("在线充值")}
+            <br />
+            {t("线下转账")}
+            <br />
+            {t("去支付")}
+          </div>
+          <div style={{ padding: 8, backgroundColor: "#fff", borderRadius: 4 }}>
+            <strong>按钮文本：</strong>
+            <br />
+            {t("充值/转账")}
+            <br />
+            {t("取消")}
+            <br />
+            {t("提交中...")}
+            <br />
+            {t("关闭")}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

package/src/local/en.ts

@@ -0,0 +1,57 @@
+// 英文语言包
+export const en: Record<string, string> = {
+  // 余额相关
+  余额详情: "Balance Details",
+  真实金额: "Real Amount",
+  冻结金额: "Frozen Amount",
+  总可用: "Total Available",
+
+  // 充值相关
+  "充值 / 转账": "Recharge / Transfer",
+  在线充值: "Online Recharge",
+  线下转账: "Offline Transfer",
+  充值币种: "Recharge Currency",
+  充值金额: "Recharge Amount",
+  支付平台: "Payment Platform",
+  请选择充值币种: "Please select recharge currency",
+  请输入充值金额: "Please enter recharge amount",
+  请选择支付平台: "Please select payment platform",
+  "提交失败，请重试": "Submit failed, please try again",
+  "提交中...": "Submitting...",
+  去支付: "Go to Pay",
+  取消: "Cancel",
+  关闭: "Close",
+
+  // 离线转账相关
+  第三方支付平台: "Third-party Payment Platform",
+  交易ID: "Transaction ID",
+  请输入转账交易ID: "Please enter transfer transaction ID",
+  上传文件: "Upload Files",
+  请上传转账凭证: "Please upload transfer voucher",
+  离线充值创建成功: "Offline recharge created successfully",
+
+  // 通用
+  "加载中...": "Loading...",
+  错误: "Error",
+  成功: "Success",
+  必填: "Required",
+
+  // 按钮文本
+  "充值/转账": "Recharge/Transfer",
+  切换为暗黑主题: "Switch to Dark Theme",
+  切换为白色主题: "Switch to Light Theme",
+
+  // 上传组件相关
+  点击或拖拽文件到此处上传: "Click or drag files here to upload",
+  "支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传":
+    "Supports JPG, PNG, PDF formats, single file not exceeding 20MB, maximum",
+  个文件: "files can be uploaded",
+  "正在上传...": "Uploading...",
+  已上传: "Uploaded",
+  移除: "Remove",
+};
+
+// 根据中文key获取英文文本的函数
+export function getEnText(zhKey: string): string {
+  return en[zhKey] || zhKey; // 如果找不到英文，返回中文key
+}