npm - best-unit - Versions diffs - 0.0.7 → 0.0.8 - Mend

best-unit 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/best-unit.cjs +1 -1
package/dist/best-unit.js +577 -447
package/index.html +2 -2
package/package.json +1 -1
package/src/components/ModalForm/components/ModalForm.tsx +156 -47
package/src/components/ModalForm/index.tsx +1 -1
package/src/demo/App.tsx +19 -0
package/src/demo/index.tsx +4 -0
package/src/main.ts +4 -1
package/src/app.tsx +0 -9

package/index.html CHANGED Viewed

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Preact + TS</title>
+    <title>组件库 Demo</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/demo/index.tsx"></script>
   </body>
 </html>

package/package.json CHANGED Viewed

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

package/src/components/ModalForm/components/ModalForm.tsx CHANGED Viewed

@@ -1,79 +1,188 @@
-import { useState } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 interface ModalFormProps {
   visible: boolean;
   onClose: () => void;
-  onSubmit: (form: { name: string; email: string }) => Promise<void>;
+  onSubmit: (form: { amount: string; rechargeChannel: string; currency: 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('');
+  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();
-    setLoading(true);
-    setError('');
+    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({ name, email });
+      await onSubmit({ amount: formState.amount, rechargeChannel: formState.rechargeChannel, currency: formState.currency });
       onClose();
     } catch {
-      setError('提交失败，请重试');
+      setFormState(state => ({ ...state, error: '提交失败，请重试' }));
     } finally {
-      setLoading(false);
+      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
-    }}>
+    <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: '#fff', padding: 24, borderRadius: 8, minWidth: 320 }}
+        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()}
       >
-        <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 }}
+          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>
   );

package/src/components/ModalForm/index.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ export function BestUnit(props: any) {
   const [visible, setVisible] = useState(false);
   const color = props.theme?.primaryColor;
-  const handleSubmit = async (form: { name: string; email: string }) => {
+  const handleSubmit = async (form: { amount: string; rechargeChannel: string; currency: string }) => {
     console.log('submit', form);
   };

package/src/demo/App.tsx ADDED Viewed

@@ -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 ADDED Viewed

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

package/src/main.ts CHANGED Viewed

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

package/src/app.tsx DELETED Viewed

@@ -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;