best-unit 0.0.11 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "best-unit",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/best-unit.cjs",
   "module": "dist/best-unit.js",
@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.10.0",
     "preact": "^10.26.9",
     "preact-custom-element": "^4.3.0"
   },

package/src/api/axiosInstance.ts

@@ -0,0 +1,72 @@
+import axios from "axios";
+import type {
+  AxiosInstance,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
+
+export interface CreateAxiosOptions {
+  baseURL?: string;
+  timeout?: number;
+  getToken?: () => string | null;
+  getLocale?: () => string | null;
+  onError?: (msg: string, error: any) => void;
+}
+
+export function createAxiosInstance(options: CreateAxiosOptions = {}) {
+  const {
+    baseURL = "/api",
+    timeout = 10000,
+    getToken,
+    getLocale,
+    onError,
+  } = options;
+
+  const instance: AxiosInstance = axios.create({ baseURL, timeout });
+
+  // 请求拦截：加 token、国际化
+  instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+    if (getToken) {
+      const token = getToken();
+      if (token)
+        config.headers = { ...config.headers, Authorization: token } as any;
+    }
+    if (getLocale) {
+      const locale = getLocale();
+      if (locale)
+        config.headers = {
+          ...config.headers,
+          "Accept-Language": locale,
+        } as any;
+    }
+    return config;
+  });
+
+  // 响应拦截：code=0判定成功，其他走 onError
+  instance.interceptors.response.use(
+    (response: AxiosResponse) => {
+      if (response.data && response.data.code === 0) {
+        return response.data;
+      }
+      if (onError) {
+        onError(
+          response.data?.msg || response.data?.message || "未知错误",
+          response
+        );
+      }
+      return Promise.reject(response.data || { message: "未知错误" });
+    },
+    (error) => {
+      if (onError) {
+        onError(error.message, error);
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+}
+
+// 默认实例
+const http = createAxiosInstance();
+export default http;

package/src/api/index.ts

@@ -0,0 +1,16 @@
+import axiosInstance from "./axiosInstance";
+
+export function getBalance(params: {
+  merchant_id: string;
+  biz_type: string;
+  token?: string;
+}) {
+  const { token, ...rest } = params;
+  return axiosInstance.get("/balance", {
+    params: rest,
+    headers: token ? { Authorization: token } : undefined,
+  });
+}
+
+// 示例用法：
+// getBalance({ merchant_id: '1128', biz_type: 'ad', token: 'xxx' }).then(res => console.log(res));

package/src/api/proxy.ts

@@ -0,0 +1,9 @@
+// Vite 配置用的代理对象
+export default {
+  "/api": {
+    target: "https://fund.bestfulfill.tech/api/sdk",
+    changeOrigin: true,
+    rewrite: (path: string) => path.replace(/^\/api/, ""),
+    secure: false,
+  },
+};

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

@@ -1,12 +1,29 @@
 import type { ComponentChildren } from "preact";
+import { getBalance } from "../../../api";
 
 interface ButtonProps {
-  onClick: () => void;
+  onClick?: () => void;
   color?: string;
   children: ComponentChildren;
+  merchantId?: string;
+  bizType?: string;
+  token?: string;
 }
 
-export function ThemedButton({ onClick, color, children }: ButtonProps) {
+export function ThemedButton({
+  onClick,
+  color,
+  children,
+  merchantId,
+  bizType,
+  token,
+}: ButtonProps) {
+  // 组件加载时直接调用
+  if (merchantId && bizType) {
+    getBalance({ merchant_id: merchantId, biz_type: bizType, token }).then(
+      (res) => console.log(res)
+    );
+  }
   return (
     <button
       style={{

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

@@ -118,7 +118,12 @@ export const OfflineTransferForm: FunctionalComponent<
           marginLeft: 16,
           cursor: "pointer",
         },
-        error: { color: "#ff4d4f", fontSize: 13, marginTop: 4 },
+        error: {
+          color: "#ff4d4f",
+          fontSize: 13,
+          marginTop: 4,
+          textAlign: "left",
+        },
       }
     : {
         label: {
@@ -214,7 +219,12 @@ export const OfflineTransferForm: FunctionalComponent<
           marginLeft: 16,
           cursor: "pointer",
         },
-        error: { color: "#ff4d4f", fontSize: 13, marginTop: 4 },
+        error: {
+          color: "#ff4d4f",
+          fontSize: 13,
+          marginTop: 4,
+          textAlign: "left",
+        },
       };
 
   const handleFileChange = (e: any) => {

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

@@ -57,7 +57,12 @@ export const OnlineRechargeForm: FunctionalComponent<
         selectError: {
           border: "1px solid #ff4d4f",
         },
-        error: { color: "#ff4d4f", fontSize: 13, marginTop: 4 },
+        error: {
+          color: "#ff4d4f",
+          fontSize: 13,
+          marginTop: 4,
+          textAlign: "left",
+        },
         buttonCancel: {
           background: "#fff",
           color: "#222",
@@ -114,7 +119,12 @@ export const OnlineRechargeForm: FunctionalComponent<
         selectError: {
           border: "1px solid #ff4d4f",
         },
-        error: { color: "#ff4d4f", fontSize: 13, marginTop: 4 },
+        error: {
+          color: "#ff4d4f",
+          fontSize: 13,
+          marginTop: 4,
+          textAlign: "left",
+        },
         buttonCancel: {
           background: "#23262F",
           color: "#fff",

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

@@ -11,6 +11,9 @@ interface ModalFormProps {
     currency: string;
   }) => Promise<void>;
   color?: string;
+  merchantId?: string;
+  bizType?: string;
+  token?: string;
 }
 
 export function ModalForm({

package/src/components/ModalForm/index.tsx

@@ -7,6 +7,9 @@ export function BestUnit(props: any) {
   const [visible, setVisible] = useState(false);
   const [whiteTheme, setWhiteTheme] = useState(true);
   const color = props.theme?.primaryColor;
+  const merchantId = props.merchant_id;
+  const bizType = props.biz_type;
+  const token = props.token;
 
   const handleSubmit = async (form: {
     amount: string;
@@ -18,7 +21,13 @@ export function BestUnit(props: any) {
 
   return (
     <div>
-      <ThemedButton color={color} onClick={() => setVisible(true)}>
+      <ThemedButton
+        color={color}
+        onClick={() => setVisible(true)}
+        merchantId={merchantId}
+        bizType={bizType}
+        token={token}
+      >
         打开表单
       </ThemedButton>
       <button
@@ -39,6 +48,9 @@ export function BestUnit(props: any) {
         onSubmit={handleSubmit}
         color={color}
         whiteTheme={whiteTheme}
+        merchantId={merchantId}
+        bizType={bizType}
+        token={token}
       />
     </div>
   );

package/src/demo/App.tsx

@@ -1,5 +1,5 @@
-import { npmTest, printCurrentTime } from '../main';
-import { BestUnit } from '../components/ModalForm';
+import { npmTest, printCurrentTime } from "../main";
+import { BestUnit } from "../components/ModalForm";
 
 export default function DemoApp() {
   return (
@@ -7,13 +7,20 @@ export default function DemoApp() {
       <h2>组件库可视化测试</h2>
       <div>
         <h3>BestUnit 组件演示：</h3>
-        <BestUnit theme={{ primaryColor: '#6366f1' }} />
+        <BestUnit
+          theme={{ primaryColor: "#6366f1" }}
+          merchant_id="1128"
+          biz_type="ad"
+          token="123"
+        />
       </div>
       <div>
         <h3>方法演示：</h3>
-        <button onClick={npmTest} style={{ marginRight: 10 }}>调用 npmTest()</button>
+        <button onClick={npmTest} style={{ marginRight: 10 }}>
+          调用 npmTest()
+        </button>
         <button onClick={printCurrentTime}>调用 printCurrentTime()</button>
       </div>
     </div>
   );
-}
+}

package/vite.config.ts

@@ -1,14 +1,18 @@
-import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import proxy from "./src/api/proxy";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [preact()],
-  build:{
-      outDir:'dist',//自定义构建输出目录target:'es2020'
-      lib: {
-          entry:'src/main.ts',//入口文件路径
-          formats:['es','cjs'],
-      }
-  }
-})
+  server: {
+    proxy,
+  },
+  build: {
+    outDir: "dist", //自定义构建输出目录target:'es2020'
+    lib: {
+      entry: "src/main.ts", //入口文件路径
+      formats: ["es", "cjs"],
+    },
+  },
+});