best-unit 1.0.0 → 1.0.3

package/src/components/common/Upload.tsx

@@ -0,0 +1,207 @@
+import type { FunctionalComponent } from "preact";
+import { useRef, useState } from "preact/hooks";
+import { uploadFile } from "../../api";
+import { t } from "../../local";
+import { Theme } from "../../types";
+
+interface UploadProps {
+  value?: string[];
+  onChange?: (urls: string[]) => void;
+  maxCount?: number;
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+const uploadTheme = {
+  white: {
+    container: {
+      border: "1px dashed #E5E6EB",
+      borderRadius: 8,
+      background: "#FCFCFD",
+      padding: 24,
+      textAlign: "center",
+      cursor: "pointer",
+      minHeight: 120,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#999",
+      fontSize: 15,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      background: "#F7F8FA",
+      borderRadius: 8,
+      padding: "12px 16px",
+      marginBottom: 8,
+      fontSize: 15,
+      color: "#222",
+      justifyContent: "space-between",
+    },
+    removeBtn: {
+      background: "#FF4D4F",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: "4px 14px",
+      fontSize: 15,
+      marginLeft: 16,
+      cursor: "pointer",
+    },
+  },
+  dark: {
+    container: {
+      border: "1.5px dashed #444C5C",
+      borderRadius: 8,
+      background: "#181A20",
+      padding: 24,
+      textAlign: "center",
+      cursor: "pointer",
+      minHeight: 120,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#999",
+      fontSize: 15,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      background: "#23262F",
+      borderRadius: 8,
+      padding: "12px 16px",
+      marginBottom: 8,
+      fontSize: 15,
+      color: "#fff",
+      justifyContent: "space-between",
+    },
+    removeBtn: {
+      background: "#FF4D4F",
+      color: "#fff",
+      border: "none",
+      borderRadius: 6,
+      padding: "4px 14px",
+      fontSize: 15,
+      marginLeft: 16,
+      cursor: "pointer",
+    },
+  },
+};
+
+export const Upload: FunctionalComponent<UploadProps> = ({
+  value = [],
+  onChange,
+  maxCount = 10,
+  accept = ".jpg,.jpeg,.png,.pdf",
+  multiple = true,
+  disabled = false,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+  const themeKey = whiteTheme ? "white" : "dark";
+  const theme = uploadTheme[themeKey];
+
+  const handleFileChange = async (e: any) => {
+    const files: File[] = Array.from(e.target.files as FileList).slice(
+      0,
+      maxCount
+    );
+    if (!files.length) return;
+    setUploading(true);
+    const urls: string[] = [];
+    for (let i = 0; i < files.length; i++) {
+      setProgress(0);
+      const formData = new FormData();
+      formData.append("file", files[i]);
+      try {
+        const url = await uploadFile(formData, (percent) =>
+          setProgress(percent)
+        );
+        if (url) urls.push(url);
+      } catch (err) {
+        // 可扩展错误处理
+      }
+    }
+    setUploading(false);
+    setProgress(0);
+    onChange?.([...value, ...urls]);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleRemove = (idx: number) => {
+    const newArr = value.filter((_, i) => i !== idx);
+    onChange?.(newArr);
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          ...theme.container,
+          cursor: disabled ? "not-allowed" : theme.container.cursor,
+          opacity: disabled ? 0.6 : 1,
+        }}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+      >
+        <div style={{ fontSize: 48, marginBottom: 12 }}>📁</div>
+        <div style={{ color: "#222", fontSize: 15, marginBottom: 4 }}>
+          {t("点击或拖拽文件到此处上传")}
+        </div>
+        <div style={{ color: "#999", fontSize: 13 }}>
+          {t("支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传")}{" "}
+          {maxCount} {t("个文件")}
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple={multiple}
+          accept={accept}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+          disabled={disabled}
+        />
+        {uploading && (
+          <div style={{ marginTop: 12, color: "#1677ff" }}>
+            {t("正在上传...")} {progress}%
+          </div>
+        )}
+      </div>
+      {value && value.length > 0 && (
+        <div style={{ marginTop: 12 }}>
+          {value.map((url, idx) => (
+            <div key={url} style={theme.fileItem}>
+              <div style={{ display: "flex", alignItems: "center", flex: 1 }}>
+                <span style={{ fontWeight: 500, wordBreak: "break-all" }}>
+                  {url.split("/").pop()}
+                </span>
+                <span style={{ color: "#8C8F93", fontSize: 13, marginLeft: 8 }}>
+                  [{t("已上传")}]
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(idx);
+                }}
+                style={theme.removeBtn}
+                disabled={disabled}
+              >
+                {t("移除")}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/demo/App.tsx

@@ -0,0 +1,429 @@
+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";
+import { Env, Locale, Theme } from "../types";
+
+export default function DemoApp() {
+  const [currentLocale, setCurrentLocale] = useState<Locale>(Locale.ZH);
+  const [currentTheme, setCurrentTheme] = useState<Theme>(Theme.WHITE);
+  const [currentEnv, setCurrentEnv] = useState<Env>(Env.DEV);
+
+  const initApp = ({
+    locale,
+    theme,
+    env,
+  }: {
+    locale?: Locale;
+    theme?: Theme;
+    env?: Env;
+  }) => {
+    // 测试代码：每次刷新页面时生成不同的 token
+    const generateTestToken = () => {
+      const timestamp = Date.now();
+      const randomId = Math.floor(Math.random() * 1000);
+      return `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTM0MTM1MjksIm1lcmNoYW50X2lkIjoxMTI4LCJ0aW1lc3RhbXAiOjE3NTMxNTQzMjl9.${timestamp}_${randomId}_TEST_TOKEN`;
+    };
+
+    const testToken = generateTestToken();
+    console.log("=== 测试 Token 生成 ===");
+    console.log("当前时间戳:", Date.now());
+    console.log("生成的测试 Token:", testToken);
+    console.log("========================");
+
+    initFundUnit({
+      token:
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjaGFudF9pZCI6MTAwMiwidGltZXN0YW1wIjoxNzUzNDMwNjkyLCJleHAiOjE3NTM0MzQyOTJ9.OPYKUxLQ3C36rKiAmCnUwxTkvM9eKgtsnoxrB9Ntrag",
+      fund_balance_id: "FB1FNZ5Q55M7QP2C",
+      user_id: "19b8a77c-d3fc-45da-9520-4a07463123df",
+      locale: locale as Locale,
+      theme: theme ?? Theme.WHITE,
+      env: env ?? currentEnv,
+    });
+  };
+
+  // 初始化应用
+  initApp({ locale: currentLocale, theme: currentTheme, env: currentEnv });
+
+  const handleLocaleChange = (locale: Locale) => {
+    setCurrentLocale(locale);
+    // 重新初始化以更新语言设置
+    initApp({ locale, theme: currentTheme, env: currentEnv });
+  };
+
+  const handleThemeChange = (theme: Theme) => {
+    setCurrentTheme(theme);
+    initApp({ locale: currentLocale, theme, env: currentEnv });
+  };
+
+  const handleEnvChange = (env: Env) => {
+    setCurrentEnv(env);
+    initApp({ locale: currentLocale, theme: currentTheme, env });
+    window.location.reload();
+  };
+
+  const isDark = currentTheme === Theme.DARK;
+
+  return (
+    <div
+      style={{
+        background: isDark ? "#181A20" : "#fff",
+        minHeight: "100vh",
+        transition: "background 0.3s",
+        color: isDark ? "#F5F6FA" : "#111827",
+      }}
+    >
+      <h2
+        style={{
+          color: isDark ? "#F5F6FA" : undefined,
+          background: isDark ? "#23262F" : undefined,
+          padding: isDark ? 8 : undefined,
+          borderRadius: isDark ? 8 : undefined,
+        }}
+      >
+        组件库可视化测试 (Token 测试版本)
+      </h2>
+
+      {/* Token 测试信息显示 */}
+      <div
+        style={{
+          marginBottom: 20,
+          padding: 16,
+          border: "2px solid #1890ff",
+          borderRadius: 8,
+          backgroundColor: "#e6f7ff",
+        }}
+      >
+        <h3 style={{ marginTop: 0, marginBottom: 12, color: "#1890ff" }}>
+          🧪 Token 测试信息：
+        </h3>
+        <p style={{ margin: 0, color: "#1890ff" }}>
+          每次刷新页面都会生成新的测试 Token，请查看控制台输出。
+        </p>
+        <p style={{ margin: "8px 0 0 0", color: "#1890ff", fontSize: "12px" }}>
+          当前时间戳: {Date.now()}
+        </p>
+      </div>
+
+      {/* 国际化切换区域 */}
+      <div
+        style={{
+          marginBottom: 20,
+          padding: 16,
+          border: isDark ? "1px solid #23262F" : "1px solid #e5e7eb",
+          borderRadius: 8,
+          backgroundColor: isDark ? "#23262F" : "#f9fafb",
+        }}
+      >
+        <h3
+          style={{
+            marginTop: 0,
+            marginBottom: 12,
+            color: isDark ? "#F5F6FA" : undefined,
+          }}
+        >
+          国际化测试：
+        </h3>
+        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+          <span>当前语言：</span>
+          <button
+            onClick={() => handleLocaleChange("zh" as Locale)}
+            style={{
+              padding: "8px 16px",
+              backgroundColor:
+                currentLocale === "zh"
+                  ? "#1890ff"
+                  : isDark
+                  ? "#23262F"
+                  : "#fff",
+              color:
+                currentLocale === "zh" ? "#fff" : isDark ? "#F5F6FA" : "#333",
+              border: "1px solid #1890ff",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontWeight: currentLocale === "zh" ? "bold" : "normal",
+            }}
+          >
+            中文
+          </button>
+          <button
+            onClick={() => handleLocaleChange("en" as Locale)}
+            style={{
+              padding: "8px 16px",
+              backgroundColor:
+                currentLocale === "en"
+                  ? "#1890ff"
+                  : isDark
+                  ? "#23262F"
+                  : "#fff",
+              color:
+                currentLocale === "en" ? "#fff" : isDark ? "#F5F6FA" : "#333",
+              border: "1px solid #1890ff",
+              borderRadius: 6,
+              cursor: "pointer",
+              fontWeight: currentLocale === "en" ? "bold" : "normal",
+            }}
+          >
+            English
+          </button>
+          <span
+            style={{
+              marginLeft: 12,
+              fontSize: 14,
+              color: isDark ? "#B5B8BE" : "#666",
+            }}
+          >
+            {currentLocale === "zh"
+              ? "当前显示中文"
+              : "Currently showing English"}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
+          BestUnit 主题切换：
+        </h3>
+        <button
+          onClick={() => handleThemeChange(Theme.WHITE)}
+          style={{
+            padding: "8px 16px",
+            backgroundColor:
+              currentTheme === Theme.WHITE
+                ? "#1890ff"
+                : isDark
+                ? "#23262F"
+                : "#fff",
+            color:
+              currentTheme === Theme.WHITE
+                ? "#fff"
+                : isDark
+                ? "#F5F6FA"
+                : "#333",
+            border: "1px solid #1890ff",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontWeight: currentTheme === Theme.WHITE ? "bold" : "normal",
+            marginRight: 8,
+          }}
+        >
+          白色主题
+        </button>
+        <button
+          onClick={() => handleThemeChange(Theme.DARK)}
+          style={{
+            padding: "8px 16px",
+            backgroundColor:
+              currentTheme === Theme.DARK
+                ? "#1890ff"
+                : isDark
+                ? "#23262F"
+                : "#fff",
+            color:
+              currentTheme === Theme.DARK
+                ? "#fff"
+                : isDark
+                ? "#F5F6FA"
+                : "#333",
+            border: "1px solid #1890ff",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontWeight: currentTheme === Theme.DARK ? "bold" : "normal",
+          }}
+        >
+          暗黑主题
+        </button>
+      </div>
+
+      <div>
+        <h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
+          BestUnit 环境切换：
+        </h3>
+        <button
+          onClick={() => handleEnvChange(Env.DEV)}
+          style={{
+            padding: "8px 16px",
+            backgroundColor:
+              currentEnv === "dev" ? "#52c41a" : isDark ? "#23262F" : "#fff",
+            color: currentEnv === "dev" ? "#fff" : isDark ? "#F5F6FA" : "#333",
+            border: "1px solid #52c41a",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontWeight: currentEnv === "dev" ? "bold" : "normal",
+            marginRight: 8,
+          }}
+        >
+          开发环境 (dev)
+        </button>
+        <button
+          onClick={() => handleEnvChange(Env.TEST)}
+          style={{
+            padding: "8px 16px",
+            backgroundColor:
+              currentEnv === "test" ? "#faad14" : isDark ? "#23262F" : "#fff",
+            color: currentEnv === "test" ? "#fff" : isDark ? "#F5F6FA" : "#333",
+            border: "1px solid #faad14",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontWeight: currentEnv === "test" ? "bold" : "normal",
+            marginRight: 8,
+          }}
+        >
+          测试环境 (test)
+        </button>
+        <button
+          onClick={() => handleEnvChange(Env.PROD)}
+          style={{
+            padding: "8px 16px",
+            backgroundColor:
+              currentEnv === "prod" ? "#ff4d4f" : isDark ? "#23262F" : "#fff",
+            color: currentEnv === "prod" ? "#fff" : isDark ? "#F5F6FA" : "#333",
+            border: "1px solid #ff4d4f",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontWeight: currentEnv === "prod" ? "bold" : "normal",
+          }}
+        >
+          生产环境 (prod)
+        </button>
+        <div
+          style={{
+            marginTop: 8,
+            fontSize: 14,
+            color: isDark ? "#B5B8BE" : "#666",
+          }}
+        >
+          当前环境:{" "}
+          {currentEnv === "dev"
+            ? "开发环境"
+            : currentEnv === "test"
+            ? "测试环境"
+            : "生产环境"}
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
+          BestUnit 组件演示：
+        </h3>
+        <BestUnit />
+      </div>
+
+      <div>
+        <h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>方法演示：</h3>
+        <button
+          onClick={npmTest}
+          style={{
+            marginRight: 10,
+            background: isDark ? "#23262F" : undefined,
+            color: isDark ? "#F5F6FA" : undefined,
+            border: isDark ? "1px solid #444C5C" : undefined,
+          }}
+        >
+          调用 npmTest()
+        </button>
+        <button
+          onClick={printCurrentTime}
+          style={{
+            background: isDark ? "#23262F" : undefined,
+            color: isDark ? "#F5F6FA" : undefined,
+            border: isDark ? "1px solid #444C5C" : undefined,
+          }}
+        >
+          调用 printCurrentTime()
+        </button>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <h3 style={{ color: isDark ? "#F5F6FA" : undefined }}>
+          余额卡片组件演示：
+        </h3>
+        <StatisticalBalance />
+      </div>
+
+      {/* 国际化文本测试区域 */}
+      <div
+        style={{
+          marginTop: 20,
+          padding: 16,
+          border: isDark ? "1px solid #23262F" : "1px solid #e5e7eb",
+          borderRadius: 8,
+          backgroundColor: isDark ? "#23262F" : "#f9fafb",
+        }}
+      >
+        <h3
+          style={{
+            marginTop: 0,
+            marginBottom: 12,
+            color: isDark ? "#F5F6FA" : undefined,
+          }}
+        >
+          国际化文本测试：
+        </h3>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+            gap: 12,
+          }}
+        >
+          <div
+            style={{
+              padding: 8,
+              backgroundColor: isDark ? "#181A20" : "#fff",
+              borderRadius: 4,
+              color: isDark ? "#F5F6FA" : undefined,
+            }}
+          >
+            <strong>余额相关：</strong>
+            <br />
+            {t("余额详情")}
+            <br />
+            {t("真实金额")}
+            <br />
+            {t("冻结金额")}
+            <br />
+            {t("总可用")}
+          </div>
+          <div
+            style={{
+              padding: 8,
+              backgroundColor: isDark ? "#181A20" : "#fff",
+              borderRadius: 4,
+              color: isDark ? "#F5F6FA" : undefined,
+            }}
+          >
+            <strong>充值相关：</strong>
+            <br />
+            {t("充值 / 转账")}
+            <br />
+            {t("在线充值")}
+            <br />
+            {t("线下转账")}
+            <br />
+            {t("去支付")}
+          </div>
+          <div
+            style={{
+              padding: 8,
+              backgroundColor: isDark ? "#181A20" : "#fff",
+              borderRadius: 4,
+              color: isDark ? "#F5F6FA" : undefined,
+            }}
+          >
+            <strong>按钮文本：</strong>
+            <br />
+            {t("充值/转账")}
+            <br />
+            {t("取消")}
+            <br />
+            {t("提交中...")}
+            <br />
+            {t("关闭")}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/demo/index.tsx

@@ -0,0 +1,4 @@
+import { render } from 'preact';
+import DemoApp from './App.tsx';
+
+render(<DemoApp />, document.getElementById('app')!);

package/src/local/en.ts

@@ -0,0 +1,61 @@
+// 英文语言包
+export const en: Record<string, string> = {
+  // 余额相关
+  余额详情: "Balance Details",
+  真实金额: "Real Amount",
+  冻结金额: "Frozen Amount",
+  总可用: "Total Available",
+  暂无数据: "No Data",
+  "金额需在1到999999.99之间": "Amount must be between 1 and 999999.99",
+
+  // 充值相关
+  "充值 / 转账": "Recharge / Transfer",
+  在线充值: "Online Recharge",
+  线下转账: "Offline Transfer",
+  充值币种: "Recharge Currency",
+  充值金额: "Recharge Amount",
+  支付平台: "Payment Platform",
+  请选择充值币种: "Please select recharge currency",
+  请输入充值金额: "Please enter recharge amount",
+  请选择支付平台: "Please select payment platform",
+  "需要收取手续费，实际支付金额约为：":
+    "requires a handling fee, the actual payment amount is approximately: ",
+  "提交失败，请重试": "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
+}