best-unit 0.0.13 → 0.0.15

package/src/components/common/Select.tsx

@@ -0,0 +1,104 @@
+import type { FunctionalComponent } from "preact";
+import { useState, useRef, useEffect } from "preact/hooks";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: Option[];
+  placeholder?: string;
+  style?: any;
+  error?: boolean;
+}
+
+export const Select: FunctionalComponent<SelectProps> = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  style,
+  error,
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  const selected = options.find((opt) => opt.value === value);
+
+  return (
+    <div ref={ref} style={{ position: "relative", ...style }}>
+      <div
+        onClick={() => setOpen((o) => !o)}
+        style={{
+          minHeight: 40,
+          border: error ? "1px solid #ff4d4f" : "1px solid #d9d9d9",
+          borderRadius: 6,
+          background: "#fff",
+          display: "flex",
+          alignItems: "center",
+          padding: "0 12px",
+          fontSize: 15,
+          color: value ? "#222" : "#bfbfbf",
+          cursor: "pointer",
+          boxSizing: "border-box",
+          transition: "border 0.2s",
+          ...style,
+        }}
+      >
+        <span style={{ flex: 1 }}>
+          {selected ? selected.label : placeholder || "请选择"}
+        </span>
+        <span style={{ marginLeft: 8, fontSize: 12, color: "#bfbfbf" }}>▼</span>
+      </div>
+      {open && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 44,
+            zIndex: 10,
+            background: "#fff",
+            border: "1px solid #d9d9d9",
+            borderRadius: 6,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+            maxHeight: 220,
+            overflowY: "auto",
+          }}
+        >
+          {options.map((opt) => (
+            <div
+              key={opt.value}
+              onClick={() => {
+                setOpen(false);
+                onChange(opt.value);
+              }}
+              style={{
+                padding: "10px 16px",
+                cursor: "pointer",
+                color: "#222",
+                background: value === opt.value ? "#f5f5f5" : "#fff",
+                fontWeight: value === opt.value ? 600 : 400,
+              }}
+            >
+              {opt.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/common/Upload.tsx

@@ -0,0 +1,153 @@
+import type { FunctionalComponent } from "preact";
+import { useRef, useState } from "preact/hooks";
+import { uploadFile } from "../../api";
+
+interface UploadProps {
+  value?: string[];
+  onChange?: (urls: string[]) => void;
+  maxCount?: number;
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+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 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={{
+          border: "1px dashed #E5E6EB",
+          borderRadius: 8,
+          background: "#FCFCFD",
+          padding: 24,
+          textAlign: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          minHeight: 120,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#999",
+          fontSize: 15,
+          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 }}>
+          点击或拖拽文件到此处上传
+        </div>
+        <div style={{ color: "#999", fontSize: 13 }}>
+          支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传 {maxCount}{" "}
+          个文件
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple={multiple}
+          accept={accept}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+          disabled={disabled}
+        />
+        {uploading && (
+          <div style={{ marginTop: 12, color: "#1677ff" }}>
+            正在上传... {progress}%
+          </div>
+        )}
+      </div>
+      {value && value.length > 0 && (
+        <div style={{ marginTop: 12 }}>
+          {value.map((url, idx) => (
+            <div
+              key={url}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                background: "#F7F8FA",
+                borderRadius: 8,
+                padding: "12px 16px",
+                marginBottom: 8,
+                fontSize: 15,
+                color: "#222",
+                justifyContent: "space-between",
+              }}
+            >
+              <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 }}>
+                  [已上传]
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(idx);
+                }}
+                style={{
+                  background: "#FF4D4F",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: 6,
+                  padding: "4px 14px",
+                  fontSize: 15,
+                  marginLeft: 16,
+                  cursor: "pointer",
+                }}
+                disabled={disabled}
+              >
+                移除
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/demo/App.tsx

@@ -1,10 +1,21 @@
 import { npmTest, printCurrentTime } from "../main";
-import { BestUnit } from "../components/ModalForm";
+import { BestUnit } from "../components/business/recharge-sdk";
+import { initFundUnit } from "../main";
+import StatisticalBalance from "../components/business/statistical-balance";
 
 export default function DemoApp() {
+  initFundUnit({
+    token:
+      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTM0MTM1MjksIm1lcmNoYW50X2lkIjoxMTI4LCJ0aW1lc3RhbXAiOjE3NTMxNTQzMjl9.UAvzq0P4HCnbJR1Ga3CgF6q3vk2RHiZRvnAFohBTHpw",
+    merchant_id: "1128",
+    biz_type: "ad",
+    user_id: "123",
+  });
+
   return (
     <div>
       <h2>组件库可视化测试</h2>
+
       <div>
         <h3>BestUnit 组件演示：</h3>
         <BestUnit
@@ -21,6 +32,10 @@ export default function DemoApp() {
         </button>
         <button onClick={printCurrentTime}>调用 printCurrentTime()</button>
       </div>
+      <div>
+        <h3>余额卡片组件演示：</h3>
+        <StatisticalBalance />
+      </div>
     </div>
   );
 }

package/src/main.ts

@@ -1,14 +1,13 @@
+import { npmTest, printCurrentTime } from "./utils/common/index";
+import { initFundUnit } from "./utils/business/index";
 
-import { npmTest, printCurrentTime } from './index.ts'
-import './components/ModalForm'
+import "./components/business/recharge-sdk";
+import "./components/business/statistical-balance";
 
 // 可选：导出组件列表或版本信息
-export const components = ['x-greeting', 'x-best-modal-form'];
-export {
-    npmTest,
-    printCurrentTime,
-}
-
-
-
-
+export const components = [
+  "x-greeting",
+  "x-best-modal-form",
+  "best-statistical-balance",
+];
+export { npmTest, printCurrentTime, initFundUnit };

package/src/utils/business/index.ts

@@ -0,0 +1,27 @@
+export function initFundUnit(params: {
+  token: string;
+  merchant_id: string;
+  biz_type: string;
+  user_id: string;
+  theme?: string;
+}) {
+  const { merchant_id, biz_type, theme, user_id } = params;
+  const token = "Bearer " + params.token;
+  sessionStorage.setItem(
+    "fund_unit_params",
+    JSON.stringify({
+      merchantId: merchant_id,
+      bizType: biz_type,
+      userId: user_id,
+      token,
+      theme,
+    })
+  );
+  return {
+    token,
+    merchantId: merchant_id,
+    bizType: biz_type,
+    theme,
+    userId: user_id,
+  };
+}