best-unit 1.5.2 → 2.0.1

package/src/components/common/date-picker/theme.tsx

@@ -0,0 +1,343 @@
+import { Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+function createDatePickerThemes() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+
+  const base = {
+    container: {
+      position: "relative",
+      display: "inline-block",
+    },
+    input: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 12px",
+      border: "1px solid #d9d9d9",
+      borderRadius: "6px",
+      backgroundColor: "#fff",
+      cursor: "pointer",
+      transition: "all 0.3s",
+      outline: "none",
+      fontSize: "14px",
+      lineHeight: "1.5715",
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    inputText: {
+      flex: 1,
+      textAlign: "left",
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    calendarIcon: {
+      fontSize: "16px",
+      color: "rgba(0, 0, 0, 0.45)",
+      marginLeft: "8px",
+    },
+    disabled: {
+      backgroundColor: "#f5f5f5",
+      color: "rgba(0, 0, 0, 0.25)",
+      cursor: "not-allowed",
+    },
+    panel: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      zIndex: 1050,
+      backgroundColor: "#fff",
+      border: "1px solid #d9d9d9",
+      borderRadius: "6px",
+      boxShadow:
+        "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
+      padding: "8px",
+      minWidth: "280px",
+      marginTop: "4px",
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 0",
+      marginBottom: "8px",
+    },
+    navButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "24px",
+      height: "24px",
+      border: "none",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      borderRadius: "4px",
+      fontSize: "16px",
+      color: "rgba(0, 0, 0, 0.45)",
+      transition: "all 0.3s",
+    },
+    monthYear: {
+      fontSize: "16px",
+      fontWeight: 500,
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    weekHeader: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)",
+      gap: "4px",
+      marginBottom: "8px",
+    },
+    weekDay: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "32px",
+      fontSize: "14px",
+      fontWeight: 500,
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    calendarGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)",
+      gap: "4px",
+    },
+    dayButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "32px",
+      height: "32px",
+      border: "none",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      borderRadius: "4px",
+      fontSize: "14px",
+      transition: "all 0.3s",
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    dayCurrentMonth: {
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    dayOtherMonth: {
+      color: "rgba(0, 0, 0, 0.25)",
+    },
+    dayToday: {
+      fontWeight: 600,
+      color: "#1890ff",
+    },
+    daySelected: {
+      backgroundColor: "#1890ff",
+      color: "#fff",
+    },
+    yearPicker: {
+      maxHeight: "200px",
+      overflowY: "auto",
+      marginBottom: "8px",
+      border: "1px solid #f0f0f0",
+      borderRadius: "4px",
+      padding: "8px",
+    },
+    yearGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      gap: "4px",
+    },
+    yearButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "6px 8px",
+      border: "none",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      borderRadius: "4px",
+      fontSize: "14px",
+      transition: "all 0.3s",
+      color: "rgba(0, 0, 0, 0.85)",
+    },
+    yearSelected: {
+      backgroundColor: "#1890ff",
+      color: "#fff",
+    },
+    small: {
+      padding: "4px 8px",
+      fontSize: "12px",
+    },
+    middle: {
+      padding: "8px 12px",
+      fontSize: "14px",
+    },
+    large: {
+      padding: "12px 16px",
+      fontSize: "16px",
+    },
+  };
+
+  const themes = {
+    white: {
+      ...base,
+      input: {
+        ...base.input,
+        border: "1px solid #d9d9d9",
+        backgroundColor: "#fff",
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      inputText: {
+        ...base.inputText,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      calendarIcon: {
+        ...base.calendarIcon,
+        color: "rgba(0, 0, 0, 0.45)",
+      },
+      disabled: {
+        ...base.disabled,
+        backgroundColor: "#f5f5f5",
+        color: "rgba(0, 0, 0, 0.25)",
+      },
+      panel: {
+        ...base.panel,
+        backgroundColor: "#fff",
+        border: "1px solid #d9d9d9",
+      },
+      navButton: {
+        ...base.navButton,
+        color: "rgba(0, 0, 0, 0.45)",
+      },
+      monthYear: {
+        ...base.monthYear,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      weekDay: {
+        ...base.weekDay,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      dayButton: {
+        ...base.dayButton,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      dayCurrentMonth: {
+        ...base.dayCurrentMonth,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      dayOtherMonth: {
+        ...base.dayOtherMonth,
+        color: "rgba(0, 0, 0, 0.25)",
+      },
+      dayToday: {
+        ...base.dayToday,
+        color: "#1890ff",
+      },
+      daySelected: {
+        ...base.daySelected,
+        backgroundColor: "#1890ff",
+        color: "#fff",
+      },
+      yearPicker: {
+        ...base.yearPicker,
+        border: "1px solid #f0f0f0",
+      },
+      yearButton: {
+        ...base.yearButton,
+        color: "rgba(0, 0, 0, 0.85)",
+      },
+      yearSelected: {
+        ...base.yearSelected,
+        backgroundColor: "#1890ff",
+        color: "#fff",
+      },
+    },
+    dark: {
+      ...base,
+      input: {
+        ...base.input,
+        border: "1px solid #434343",
+        backgroundColor: "#141414",
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      inputText: {
+        ...base.inputText,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      calendarIcon: {
+        ...base.calendarIcon,
+        color: "rgba(255, 255, 255, 0.45)",
+      },
+      disabled: {
+        ...base.disabled,
+        backgroundColor: "#262626",
+        color: "rgba(255, 255, 255, 0.25)",
+      },
+      panel: {
+        ...base.panel,
+        backgroundColor: "#141414",
+        border: "1px solid #434343",
+      },
+      navButton: {
+        ...base.navButton,
+        color: "rgba(255, 255, 255, 0.45)",
+      },
+      monthYear: {
+        ...base.monthYear,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      weekDay: {
+        ...base.weekDay,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      dayButton: {
+        ...base.dayButton,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      dayCurrentMonth: {
+        ...base.dayCurrentMonth,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      dayOtherMonth: {
+        ...base.dayOtherMonth,
+        color: "rgba(255, 255, 255, 0.25)",
+      },
+      dayToday: {
+        ...base.dayToday,
+        color: "#00E8C6",
+      },
+      daySelected: {
+        ...base.daySelected,
+        backgroundColor: "#00E8C6",
+        color: "#111",
+      },
+      yearPicker: {
+        ...base.yearPicker,
+        border: "1px solid #434343",
+      },
+      yearButton: {
+        ...base.yearButton,
+        color: "rgba(255, 255, 255, 0.85)",
+      },
+      yearSelected: {
+        ...base.yearSelected,
+        backgroundColor: "#00E8C6",
+        color: "#111",
+      },
+    },
+  };
+
+  const currentTheme = themes[theme] || themes.white;
+
+  // 应用自定义主题配置
+  const themeColor = themeConfig?.[theme]?.color;
+  if (themeColor) {
+    currentTheme.dayToday.color = themeColor;
+    currentTheme.daySelected.backgroundColor = themeColor;
+    currentTheme.yearSelected.backgroundColor = themeColor;
+    if (theme === "dark") {
+      currentTheme.daySelected.color = "#111";
+      currentTheme.yearSelected.color = "#111";
+    }
+  }
+
+  return currentTheme;
+}
+
+export function getDatePickerTheme() {
+  return createDatePickerThemes();
+}

package/src/components/common/modal/index.tsx

@@ -1,9 +1,45 @@
 import type { ComponentChildren } from "preact";
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 import { getModalTheme } from "./theme";
 import { getInitParams } from "@/utils/business";
 import { Size } from "@/types";
+
 const size = getInitParams<Size>("size");
+
+// 动态生成滚动条样式
+function generateScrollbarStyles(theme: any) {
+  const styleId = `modal-scrollbar-${theme.scrollbarClass}`;
+
+  // 检查是否已经存在样式
+  if (document.getElementById(styleId)) {
+    return styleId;
+  }
+
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = `
+    .${theme.scrollbarClass} {
+      scrollbar-width: thin;
+      scrollbar-color: ${theme.scrollbarThumbColor} transparent;
+    }
+    .${theme.scrollbarClass}::-webkit-scrollbar {
+      width: 6px;
+    }
+    .${theme.scrollbarClass}::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .${theme.scrollbarClass}::-webkit-scrollbar-thumb {
+      background: ${theme.scrollbarThumbColor};
+      border-radius: 3px;
+    }
+    .${theme.scrollbarClass}::-webkit-scrollbar-thumb:hover {
+      background: ${theme.scrollbarThumbHoverColor};
+    }
+  `;
+
+  document.head.appendChild(style);
+  return styleId;
+}
 interface ModalProps {
   visible: boolean;
   onClose: () => void;
@@ -28,6 +64,11 @@ export function Modal({
   const [maskMouseDown, setMaskMouseDown] = useState(false);
   const theme = getModalTheme();
 
+  // 生成滚动条样式
+  useEffect(() => {
+    generateScrollbarStyles(theme);
+  }, [theme]);
+
   // 只有mousedown和mouseup都在mask上才关闭弹窗
   const handleMaskMouseDown = (e: any) => {
     if (e.target === e.currentTarget) {
@@ -66,33 +107,63 @@ export function Modal({
       <div
         style={{
           background: theme.modalBg,
-          padding: size === Size.SMALL ? 24 : 32,
           borderRadius: size === Size.SMALL ? 8 : 12,
           minWidth: width,
           maxWidth: maxWidth,
           color: theme.modalColor,
           boxShadow: theme.modalBoxShadow,
           position: "relative",
+          // 响应式设计
+          width: typeof width === "string" ? width : `${width}px`,
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
         }}
         onClick={(e) => e.stopPropagation()}
       >
-        {/* 关闭按钮 */}
-        {showClose && (
-          <button
-            type="button"
-            onClick={onClose}
-            style={theme.closeBtn}
-            aria-label="关闭"
-          >
-            ×
-          </button>
-        )}
+        {/* 固定头部区域 */}
+        <div
+          style={{
+            position: "sticky",
+            top: 0,
+            background: theme.modalBg,
+            borderRadius: size === Size.SMALL ? "8px 8px 0 0" : "12px 12px 0 0",
+            padding:
+              size === Size.SMALL ? "24px 24px 0 24px" : "32px 32px 0 32px",
+            zIndex: 1,
+            borderBottom: `1px solid ${theme.headerBorder}`,
+          }}
+        >
+          {/* 关闭按钮 */}
+          {showClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              style={theme.closeBtn}
+              aria-label="关闭"
+            >
+              ×
+            </button>
+          )}
 
-        {/* 标题 */}
-        {title && <div style={theme.title}>{title}</div>}
+          {/* 标题 */}
+          {title && <div style={theme.title}>{title}</div>}
+        </div>
 
-        {/* 内容 */}
-        {children}
+        {/* 可滚动内容区域 */}
+        <div
+          className={`modal-content ${theme.scrollbarClass}`}
+          style={{
+            flex: 1,
+            overflowY: "auto",
+            padding:
+              size === Size.SMALL
+                ? "16px 24px 24px 24px"
+                : "20px 32px 32px 32px",
+          }}
+        >
+          {children}
+        </div>
       </div>
     </div>
   );

package/src/components/common/modal/theme.tsx

@@ -33,6 +33,10 @@ function createModalThemes() {
         marginBottom: size === Size.SMALL ? 16 : 24,
         color: "#222",
       },
+      headerBorder: "#f0f0f0",
+      scrollbarClass: "light-scrollbar",
+      scrollbarThumbColor: "#d1d5db",
+      scrollbarThumbHoverColor: "#9ca3af",
       tabBtn: (active: boolean, isFirst: boolean) => ({
         flex: 1,
         padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
@@ -73,6 +77,10 @@ function createModalThemes() {
         marginBottom: size === Size.SMALL ? 16 : 24,
         color: "#F5F6FA",
       },
+      headerBorder: "#374151",
+      scrollbarClass: "dark-scrollbar",
+      scrollbarThumbColor: "#4B5563",
+      scrollbarThumbHoverColor: "#6B7280",
       tabBtn: (active: boolean, isFirst: boolean) => ({
         flex: 1,
         padding: size === Size.SMALL ? "8px 10px" : "12px 16px",

package/src/demo/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from "preact/hooks";
 import { npmTest, printCurrentTime } from "@/main";
 import { BestUnit } from "@/components/business/recharge-sdk";
+import BestUnitPayment from "@/components/business/payment-sdk";
 import { initFundUnit, refreshBalance } from "@/main";
 import StatisticalBalance from "@/components/business/statistical-balance";
 import RefreshButton from "@/components/business/refresh-button";
@@ -44,6 +45,7 @@ export default function DemoApp() {
       theme: theme ?? Theme.WHITE,
       env: env ?? currentEnv,
       size: Size.SMALL,
+      biz_type: "fulfill",
       // themeConfig: {
       //   white: {
       //     color: "red",
@@ -323,6 +325,9 @@ export default function DemoApp() {
           BestUnit 组件演示：
         </h3>
         <BestUnit />
+        <div style={{ marginTop: 12 }}>
+          <BestUnitPayment />
+        </div>
       </div>
 
       <div>

package/src/local/en.ts

@@ -32,6 +32,26 @@ export const en: Record<string, string> = {
   去支付: "Go to Pay",
   取消: "Cancel",
   关闭: "Close",
+  在线支付: "Online Payment",
+  选择支付方式: "Select Payment Method",
+  支付方式: "Payment Method",
+  付款人名称: "Payer Name",
+  支付币种: "Payment Currency",
+  支付金额: "Payment Amount",
+  线上支付: "Online Payment",
+  立即支付: "Pay Now",
+  "请在转账后提交银行回单，否则可能无法及时核验":
+    "Please submit the bank receipt after the transfer, otherwise verification may be delayed",
+  "支付金额须与申请金额一致，请勿多付、少付或分批提交。":
+    "The payment amount must match the requested amount exactly. Do not overpay, underpay, or split.",
+  "请妥善保存回单并提供准确的支付时间，否则可能无法核验。":
+    "Please keep the receipt and provide the exact payment time; otherwise, verification may fail.",
+  "工作时间提交4小时内审核，非工作时间将顺延至下一个工作日。":
+    "Submissions during business hours are reviewed within 4 hours; off-hours will be processed next business day.",
+  "如有问题，请联系平台客服。":
+    "If you have any questions, please contact customer service.",
+  "预付充值将收取平台服务费，具体以官方为准。":
+    "Prepaid top-ups are subject to a platform service fee; please refer to the official policy.",
 
   // 离线转账相关
   第三方支付平台: "Third-party Payment Platform",
@@ -59,6 +79,67 @@ export const en: Record<string, string> = {
   "正在上传...": "Uploading...",
   已上传: "Uploaded",
   移除: "Remove",
+
+  // Bank Transfer Related
+  银行转账: "Transfer to Account",
+  银行名称: "Bank Name",
+  账户持有人: "Account Holder Name",
+  账户号码: "Account Number",
+  "SWIFT/BIC代码": "SWIFT/BIC Code",
+  银行代码: "Bank Code",
+  银行地址: "Bank Address",
+  复制: "Copy",
+  复制成功: "Copied successfully",
+  确认转账详情: "Confirm Transfer Details",
+  转账后提交银行回单提示:
+    "Please make sure to submit the bank transaction slip after the transfer, otherwise the payment may not be verified in time",
+  温馨提示: "Friendly Reminder",
+  支付金额匹配提醒:
+    "The payment amount must match the transaction amount exactly. Overpayment, underpayment, or installment payments will not be approved. The actual amount shown on the bank receipt shall prevail. Do not submit duplicate applications for the same transfer.",
+  保存交易回单提醒:
+    "Please print or take a photo of the transaction receipt and provide the exact payment time; otherwise, the transfer cannot be verified.",
+  查看余额提醒:
+    "It is recommended to check your available balance 4 hours after successful submission. Transfers submitted during business hours will be processed the same day; those submitted outside business hours will be processed on the next working day.",
+  联系客服提醒: "If you have any questions, please contact customer service.",
+  P卡转账延迟提醒:
+    "P-card transfers may experience a delay of up to 10 minutes. Please wait patiently.",
+  平台服务费说明:
+    "Prepaid top-ups are subject to a 1% platform service fee. Please refer to the",
+  费用政策: "Fee Policy",
+  详情: "for details.",
+
+  // Bank Transfer Receipt Upload Related
+  返回账户信息: "Return to Account Information",
+  请上传银行转账回单: "Please upload the bank transfer receipt",
+  点击或拖拽文件到此区域上传: "Click or drag file to this area to upload",
+  转账时间: "Transfer Time",
+  转账金额: "Transfer Amount",
+  请输入实际转账金额: "Please enter the actual transfer amount",
+  提交审核: "Submit for Review",
+  请选择转账时间: "Please select transfer time",
+  请输入转账金额: "Please enter transfer amount",
+
+  // Date picker related
+  请选择日期: "Please select date",
+  一月: "January",
+  二月: "February",
+  三月: "March",
+  四月: "April",
+  五月: "May",
+  六月: "June",
+  七月: "July",
+  八月: "August",
+  九月: "September",
+  十月: "October",
+  十一月: "November",
+  十二月: "December",
+  日: "Sun",
+  一: "Mon",
+  二: "Tue",
+  三: "Wed",
+  四: "Thu",
+  五: "Fri",
+  六: "Sat",
 };
 
 // 根据中文key获取英文文本的函数