best-unit 0.0.8 → 0.0.9

package/src/components/ModalForm/components/recharge.tsx

@@ -0,0 +1,244 @@
+import { useState, useEffect } from "preact/hooks";
+import { OnlineRechargeForm } from "./OnlineRechargeForm";
+import { OfflineTransferForm } from "./OfflineTransferForm";
+
+interface ModalFormProps {
+  visible: boolean;
+  onClose: () => void;
+  onSubmit: (form: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+  }) => Promise<void>;
+  color?: string;
+}
+
+export function ModalForm({
+  visible,
+  onClose,
+  onSubmit,
+  color,
+}: ModalFormProps) {
+  console.log(1111);
+  const [formState, setFormState] = useState({
+    amount: "",
+    rechargeChannel: "paypal",
+    currency: "USD",
+    loading: false,
+    error: "",
+    amountError: "",
+    rechargeChannelError: "",
+    currencyError: "",
+  });
+  const [activeTab, setActiveTab] = useState<"online" | "offline">("online");
+  const [offlineFormState, setOfflineFormState] = useState({
+    platform: "paypal",
+    transactionId: "",
+    files: [],
+    platformError: "",
+    transactionIdError: "",
+    filesError: "",
+    loading: false,
+  });
+
+  // 每次关闭弹窗时重置内容
+  useEffect(() => {
+    if (!visible) {
+      setActiveTab("online");
+      setFormState({
+        amount: "",
+        rechargeChannel: "paypal",
+        currency: "USD",
+        loading: false,
+        error: "",
+        amountError: "",
+        rechargeChannelError: "",
+        currencyError: "",
+      });
+      setOfflineFormState({
+        platform: "paypal",
+        transactionId: "",
+        files: [],
+        platformError: "",
+        transactionIdError: "",
+        filesError: "",
+        loading: false,
+      });
+    }
+  }, [visible]);
+
+  if (!visible) return null;
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    let valid = true;
+    setFormState((state) => ({
+      ...state,
+      amountError: "",
+      rechargeChannelError: "",
+    }));
+    if (!formState.amount.trim()) {
+      setFormState((state) => ({ ...state, amountError: "请输入充值金额" }));
+      valid = false;
+    }
+    if (!formState.rechargeChannel) {
+      setFormState((state) => ({
+        ...state,
+        rechargeChannelError: "请选择支付平台",
+      }));
+      valid = false;
+    }
+    if (!valid) return;
+    setFormState((state) => ({ ...state, loading: true, error: "" }));
+    try {
+      await onSubmit({
+        amount: formState.amount,
+        rechargeChannel: formState.rechargeChannel,
+        currency: formState.currency,
+      });
+      onClose();
+    } catch {
+      setFormState((state) => ({ ...state, error: "提交失败，请重试" }));
+    } finally {
+      setFormState((state) => ({ ...state, loading: false }));
+    }
+  };
+
+  // 点击弹窗外部关闭
+  const handleMaskClick = (e: any) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: "rgba(0,0,0,0.3)", // 更浅的遮罩
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+      }}
+      onClick={handleMaskClick}
+    >
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          background: "#fff", // 白色弹窗
+          padding: 32,
+          borderRadius: 12,
+          minWidth: 400,
+          color: color || "#222", // 深色字体
+          boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+          position: "relative",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 关闭按钮 */}
+        <button
+          type="button"
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            right: 16,
+            top: 16,
+            background: "none",
+            border: "none",
+            color: "#222",
+            fontSize: 22,
+            cursor: "pointer",
+            lineHeight: 1,
+          }}
+          aria-label="关闭"
+        >
+          ×
+        </button>
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: 20,
+            marginBottom: 24,
+            textAlign: "left",
+            color: "#222",
+          }}
+        >
+          充值 / 转账
+        </div>
+        {/* tab 按钮区域 */}
+        <div style={{ display: "flex", marginBottom: 28 }}>
+          <button
+            type="button"
+            onClick={() => setActiveTab("online")}
+            style={{
+              flex: 1,
+              background: activeTab === "online" ? "#fff" : "#F7F8FA",
+              color: activeTab === "online" ? "#155EEF" : "#222",
+              border: "none",
+              borderRadius: "8px 0 0 8px",
+              fontWeight: activeTab === "online" ? 600 : 400,
+              fontSize: 16,
+              height: 48,
+              boxShadow:
+                activeTab === "online"
+                  ? "0 2px 8px 0 rgba(20,20,20,0.04)"
+                  : "none",
+              outline: "none",
+              cursor: "pointer",
+              borderRight: "1px solid #F0F1F3",
+              transition: "all 0.2s",
+            }}
+          >
+            在线充值
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("offline")}
+            style={{
+              flex: 1,
+              background: activeTab === "offline" ? "#fff" : "#F7F8FA",
+              color: activeTab === "offline" ? "#155EEF" : "#222",
+              border: "none",
+              borderRadius: "0 8px 8px 0",
+              fontWeight: activeTab === "offline" ? 600 : 400,
+              fontSize: 16,
+              height: 48,
+              boxShadow:
+                activeTab === "offline"
+                  ? "0 2px 8px 0 rgba(20,20,20,0.04)"
+                  : "none",
+              outline: "none",
+              cursor: "pointer",
+              borderLeft: "1px solid #F0F1F3",
+              transition: "all 0.2s",
+            }}
+          >
+            线下转账
+          </button>
+        </div>
+        {/* tab 内容区域 */}
+        {activeTab === "online" ? (
+          <OnlineRechargeForm
+            formState={formState}
+            setFormState={setFormState}
+            onClose={onClose}
+            loading={formState.loading}
+            whiteTheme={true}
+          />
+        ) : (
+          <OfflineTransferForm
+            formState={offlineFormState}
+            setFormState={setOfflineFormState}
+            onClose={onClose}
+            loading={offlineFormState.loading}
+          />
+        )}
+      </form>
+    </div>
+  );
+}

package/src/components/ModalForm/index.tsx

@@ -1,14 +1,18 @@
-import { useState } from 'preact/hooks';
-import { ThemedButton } from './components/Button';
-import { ModalForm } from './components/ModalForm';
-import register from 'preact-custom-element';
+import { useState } from "preact/hooks";
+import { ThemedButton } from "./components/Button";
+import { ModalForm } from "./components/recharge";
+import register from "preact-custom-element";
 
 export function BestUnit(props: any) {
   const [visible, setVisible] = useState(false);
   const color = props.theme?.primaryColor;
 
-  const handleSubmit = async (form: { amount: string; rechargeChannel: string; currency: string }) => {
-    console.log('submit', form);
+  const handleSubmit = async (form: {
+    amount: string;
+    rechargeChannel: string;
+    currency: string;
+  }) => {
+    console.log("submit", form);
   };
 
   return (
@@ -26,7 +30,6 @@ export function BestUnit(props: any) {
   );
 }
 
-
-register(BestUnit, 'x-best-modal-form', ['theme'], { shadow: false });
+register(BestUnit, "x-best-modal-form", ["theme"], { shadow: false });
 
 export default BestUnit;

package/tsconfig.json

@@ -8,5 +8,8 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

package/src/components/ModalForm/components/ModalForm.tsx

@@ -1,189 +0,0 @@
-import { useState, useEffect } from 'preact/hooks';
-
-interface ModalFormProps {
-  visible: boolean;
-  onClose: () => void;
-  onSubmit: (form: { amount: string; rechargeChannel: string; currency: string }) => Promise<void>;
-  color?: string;
-}
-
-export function ModalForm({ visible, onClose, onSubmit, color }: ModalFormProps) {
-  const [formState, setFormState] = useState({
-    amount: '',
-    rechargeChannel: 'paypal',
-    currency: 'USD',
-    loading: false,
-    error: '',
-    amountError: '',
-    rechargeChannelError: '',
-    currencyError: ''
-  });
-
-  // 每次关闭弹窗时重置内容
-  useEffect(() => {
-    if (!visible) {
-      setFormState({
-        amount: '',
-        rechargeChannel: 'paypal',
-        currency: 'USD',
-        loading: false,
-        error: '',
-        amountError: '',
-        rechargeChannelError: '',
-        currencyError: ''
-      });
-    }
-  }, [visible]);
-
-  if (!visible) return null;
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    let valid = true;
-    setFormState(state => ({ ...state, amountError: '', rechargeChannelError: '' }));
-    if (!formState.amount.trim()) {
-      setFormState(state => ({ ...state, amountError: '请输入充值金额' }));
-      valid = false;
-    }
-    if (!formState.rechargeChannel) {
-      setFormState(state => ({ ...state, rechargeChannelError: '请选择支付平台' }));
-      valid = false;
-    }
-    if (!valid) return;
-    setFormState(state => ({ ...state, loading: true, error: '' }));
-    try {
-      await onSubmit({ amount: formState.amount, rechargeChannel: formState.rechargeChannel, currency: formState.currency });
-      onClose();
-    } catch {
-      setFormState(state => ({ ...state, error: '提交失败，请重试' }));
-    } finally {
-      setFormState(state => ({ ...state, loading: false }));
-    }
-  };
-
-  // 点击弹窗外部关闭
-  const handleMaskClick = (e: any) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  return (
-    <div
-      style={{
-        position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
-        background: 'rgba(0,0,0,0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999
-      }}
-      onClick={handleMaskClick}
-    >
-      <form
-        onSubmit={handleSubmit}
-        style={{ background: '#181A20', padding: 32, borderRadius: 12, minWidth: 360,
-             color: color || '#fff', boxShadow: '0 4px 24px rgba(0,0,0,0.5)', 
-             position: 'relative' }}
-        onClick={e => e.stopPropagation()}
-      >
-        {/* 关闭按钮 */}
-        <button
-          type="button"
-          onClick={onClose}
-          style={{
-            position: 'absolute', right: 16, top: 16, background: 'none', border: 'none', color: '#fff', fontSize: 22, cursor: 'pointer', lineHeight: 1
-          }}
-          aria-label="关闭"
-        >
-          ×
-        </button>
-        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 24, textAlign: 'left' }}>在线充值</div>
-        <div style={{ marginBottom: 18 }}>
-          <div style={{ marginBottom: 8, fontSize: 14 }}><span style={{ color: '#00E8C6' }}>*</span> 充值金额</div>
-          <input
-            type="text"
-            placeholder="请输入充值金额"
-            value={formState.amount}
-            onInput={e => {
-              const value = (e.target as HTMLInputElement).value;
-              setFormState(state => ({
-                ...state,
-                amount: value,
-                amountError: value.trim() ? '' : state.amountError
-              }));
-            }}
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              borderRadius: 6,
-              boxSizing: 'border-box',
-              border: formState.amountError ? '1px solid #ff4d4f' : '1px solid #23262F',
-              background: '#23262F',
-              color: '#fff',
-              fontSize: 15,
-              outline: 'none',
-              marginBottom: 0
-            }}
-          />
-          {formState.amountError && <div style={{ color: '#ff4d4f', fontSize: 13, marginTop: 4 }}>{formState.amountError}</div>}
-        </div>
-        <div style={{ marginBottom: 18 }}>
-          <div style={{ marginBottom: 8, fontSize: 14 }}><span style={{ color: '#00E8C6' }}>*</span> 支付平台</div>
-          <select
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              borderRadius: 6,
-              border: formState.rechargeChannelError ? '1px solid #ff4d4f' : '1px solid #23262F',
-              background: '#23262F',
-              color: '#fff',
-              fontSize: 15,
-              outline: 'none'
-            }}
-            value={formState.rechargeChannel}
-            onInput={e => {
-              const value = (e.target as HTMLSelectElement).value;
-              setFormState(state => ({
-                ...state,
-                rechargeChannel: value,
-                rechargeChannelError: value ? '' : state.rechargeChannelError
-              }));
-            }}
-          >
-            <option value="alipay">支付宝</option>
-            <option value="wechat">微信</option>
-            <option value="paypal">PayPal</option>
-          </select>
-          {formState.rechargeChannelError && <div style={{ color: '#ff4d4f', fontSize: 13, marginTop: 4 }}>{formState.rechargeChannelError}</div>}
-        </div>
-        <div style={{ marginBottom: 24 }}>
-          <div style={{ marginBottom: 8, fontSize: 14 }}>币种</div>
-          <select
-            style={{ width: '100%', padding: '10px 12px', borderRadius: 6,
-                 border: '1px solid #23262F', background: '#23262F', 
-                 color: '#fff', fontSize: 15, outline: 'none' }}
-            value={formState.currency}
-          >
-            <option value="USD">USD</option>
-            <option value="CNY">CNY</option>
-            <option value="EUR">EUR</option>
-          </select>
-        </div>
-        {formState.error && <div style={{ color: '#ff4d4f', marginBottom: 12 }}>{formState.error}</div>}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{ background: '#23262F', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 24px', fontSize: 15, cursor: 'pointer' }}
-          >
-            取消
-          </button>
-          <button
-            type="submit"
-            disabled={formState.loading}
-            style={{ background: '#00E8C6', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 24px', fontSize: 15, cursor: 'pointer', fontWeight: 600 }}
-          >
-            {formState.loading ? '提交中...' : '去支付'}
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}