best-unit 0.0.7 → 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: { name: string; email: 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/src/demo/App.tsx

@@ -0,0 +1,19 @@
+import { npmTest, printCurrentTime } from '../main';
+import { BestUnit } from '../components/ModalForm';
+
+export default function DemoApp() {
+  return (
+    <div>
+      <h2>组件库可视化测试</h2>
+      <div>
+        <h3>BestUnit 组件演示：</h3>
+        <BestUnit theme={{ primaryColor: '#6366f1' }} />
+      </div>
+      <div>
+        <h3>方法演示：</h3>
+        <button onClick={npmTest} style={{ marginRight: 10 }}>调用 npmTest()</button>
+        <button onClick={printCurrentTime}>调用 printCurrentTime()</button>
+      </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/main.ts

@@ -1,6 +1,5 @@
 
 import { npmTest, printCurrentTime } from './index.ts'
-import './app.tsx'
 import './components/ModalForm'
 
 // 可选：导出组件列表或版本信息
@@ -9,3 +8,7 @@ export {
     npmTest,
     printCurrentTime,
 }
+
+
+
+

package/tsconfig.json

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

package/src/app.tsx

@@ -1,9 +0,0 @@
-import register from 'preact-custom-element';
-
-const Greeting = ({ name = 'World' }) => (
-  <p>Hello, {name}!</p>
-);
-
-register(Greeting, 'x-greeting', ['name'], { shadow: false });
-
-export default Greeting;

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

@@ -1,80 +0,0 @@
-import { useState } from 'preact/hooks';
-
-interface ModalFormProps {
-  visible: boolean;
-  onClose: () => void;
-  onSubmit: (form: { name: string; email: string }) => Promise<void>;
-  color?: string;
-}
-
-export function ModalForm({ visible, onClose, onSubmit, color }: ModalFormProps) {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  if (!visible) return null;
-
-  const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    try {
-      await onSubmit({ name, email });
-      onClose();
-    } catch {
-      setError('提交失败，请重试');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  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
-    }}>
-      <form
-        onSubmit={handleSubmit}
-        style={{ background: '#fff', padding: 24, borderRadius: 8, minWidth: 320 }}
-      >
-        <h2 style={{ color: color || '#1890ff' }}>表单</h2>
-        <div style={{ marginBottom: 12 }}>
-          <input
-            type="text"
-            placeholder="姓名"
-            value={name}
-            onInput={e => setName((e.target as HTMLInputElement).value)}
-            required
-            style={{ width: '100%', padding: 8, marginBottom: 8 }}
-          />
-          <input
-            type="email"
-            placeholder="邮箱"
-            value={email}
-            onInput={e => setEmail((e.target as HTMLInputElement).value)}
-            required
-            style={{ width: '100%', padding: 8 }}
-          />
-        </div>
-        {error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}
-        <button
-          type="submit"
-          disabled={loading}
-          style={{
-            background: color || '#1890ff', color: '#fff', border: 'none', borderRadius: 4, padding: '8px 16px', cursor: 'pointer', fontSize: 16
-          }}
-        >
-          {loading ? '提交中...' : '提交'}
-        </button>
-        <button
-          type="button"
-          onClick={onClose}
-          style={{ marginLeft: 12, background: '#eee', color: '#333', border: 'none', borderRadius: 4, padding: '8px 16px', cursor: 'pointer', fontSize: 16 }}
-        >
-          取消
-        </button>
-      </form>
-    </div>
-  );
-}