best-unit 1.2.13 → 1.2.14

package/src/components/common/modal/index.tsx

@@ -1,7 +1,9 @@
 import type { ComponentChildren } from "preact";
 import { useState } from "preact/hooks";
 import { getModalTheme } from "./theme";
-
+import { getInitParams } from "@/utils/business";
+import { Size } from "@/types";
+const size = getInitParams<Size>("size");
 interface ModalProps {
   visible: boolean;
   onClose: () => void;
@@ -18,8 +20,8 @@ export function Modal({
   onClose,
   title,
   children,
-  width = 400,
-  maxWidth = 400,
+  width = size === Size.SMALL ? 300 : 400,
+  maxWidth = size === Size.SMALL ? 300 : 400,
   showClose = true,
   maskClosable = true,
 }: ModalProps) {
@@ -64,8 +66,8 @@ export function Modal({
       <div
         style={{
           background: theme.modalBg,
-          padding: 32,
-          borderRadius: 12,
+          padding: size === Size.SMALL ? 24 : 32,
+          borderRadius: size === Size.SMALL ? 8 : 12,
           minWidth: width,
           maxWidth: maxWidth,
           color: theme.modalColor,

package/src/components/common/modal/theme.tsx

@@ -1,6 +1,6 @@
-import { Theme } from "@/types";
+import { Size, Theme } from "@/types";
 import { getInitParams } from "@/utils/business";
-
+const size = getInitParams<Size>("size");
 export const modalThemes = {
   white: {
     mask: "rgba(0, 0, 0, 0.45)",
@@ -13,31 +13,31 @@ export const modalThemes = {
       right: "16px",
       background: "none",
       border: "none",
-      fontSize: "24px",
+      fontSize: size === Size.SMALL ? 16 : 24,
       cursor: "pointer",
       color: "#999",
       padding: "0",
-      width: "24px",
-      height: "24px",
+      width: size === Size.SMALL ? 16 : 24,
+      height: size === Size.SMALL ? 16 : 24,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
     },
     title: {
-      fontSize: "18px",
+      fontSize: size === Size.SMALL ? 16 : 18,
       fontWeight: "600",
-      marginBottom: "24px",
+      marginBottom: size === Size.SMALL ? 16 : 24,
       color: "#222",
     },
     tabBtn: (active: boolean, isFirst: boolean) => ({
       flex: 1,
-      padding: "12px 16px",
+      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
       background: active ? "#1890ff" : "transparent",
       color: active ? "#fff" : "#666",
       border: "1px solid #d9d9d9",
       borderRight: isFirst ? "none" : "1px solid #d9d9d9",
       cursor: "pointer",
-      fontSize: "14px",
+      fontSize: size === Size.SMALL ? 12 : 14,
       fontWeight: active ? "600" : "400",
       borderRadius: isFirst ? "6px 0 0 6px" : "0 6px 6px 0",
     }),
@@ -49,35 +49,35 @@ export const modalThemes = {
     modalBoxShadow: "0 6px 16px rgba(0,0,0,0.32)",
     closeBtn: {
       position: "absolute",
-      top: "16px",
-      right: "16px",
+      top: size === Size.SMALL ? "12px" : "16px",
+      right: size === Size.SMALL ? "12px" : "16px",
       background: "none",
       border: "none",
-      fontSize: "24px",
+      fontSize: size === Size.SMALL ? 16 : 24,
       cursor: "pointer",
       color: "#B5B8BE",
       padding: "0",
-      width: "24px",
-      height: "24px",
+      width: size === Size.SMALL ? 16 : 24,
+      height: size === Size.SMALL ? 16 : 24,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
     },
     title: {
-      fontSize: "18px",
+      fontSize: size === Size.SMALL ? 16 : 18,
       fontWeight: "600",
-      marginBottom: "24px",
+      marginBottom: size === Size.SMALL ? 16 : 24,
       color: "#F5F6FA",
     },
     tabBtn: (active: boolean, isFirst: boolean) => ({
       flex: 1,
-      padding: "12px 16px",
+      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
       background: active ? "#00E8C6" : "transparent",
       color: active ? "#fff" : "#B5B8BE",
       border: "1px solid #444C5C",
       borderRight: isFirst ? "none" : "1px solid #444C5C",
       cursor: "pointer",
-      fontSize: "14px",
+      fontSize: size === Size.SMALL ? 12 : 14,
       fontWeight: active ? "600" : "400",
       borderRadius: isFirst ? "6px 0 0 6px" : "0 6px 6px 0",
     }),

package/src/components/common/select/index.tsx

@@ -2,7 +2,9 @@ import type { FunctionalComponent, JSX } from "preact";
 import { useState, useRef, useEffect } from "preact/hooks";
 import { t } from "@/local";
 import { getSelectTheme } from "./theme";
-
+import { getInitParams } from "@/utils/business";
+import { Size } from "@/types";
+const size = getInitParams<Size>("size");
 interface Option {
   value: string;
   label: string;
@@ -73,7 +75,7 @@ export const Select: FunctionalComponent<SelectProps> = ({
           scrollbar-color: ${theme.scrollbarThumb} ${theme.scrollbarTrack};
         }
         .custom-select-dropdown::-webkit-scrollbar {
-          width: 8px;
+          width: ${size === Size.SMALL ? 6 : 8}px;
         }
         .custom-select-dropdown::-webkit-scrollbar-thumb {
           border-radius: 4px;
@@ -86,12 +88,12 @@ export const Select: FunctionalComponent<SelectProps> = ({
       <div
         onClick={() => !disabled && setOpen((o) => !o)}
         style={{
-          minHeight: 40,
+          minHeight: size === Size.SMALL ? 32 : 40,
           borderRadius: 6,
           display: "flex",
           alignItems: "center",
-          padding: "0 12px",
-          fontSize: 15,
+          padding: size === Size.SMALL ? "0 10px" : "0 12px",
+          fontSize: size === Size.SMALL ? 12 : 15,
           cursor: disabled ? "not-allowed" : "pointer",
           boxSizing: "border-box",
           transition: "border 0.2s",
@@ -111,8 +113,8 @@ export const Select: FunctionalComponent<SelectProps> = ({
         </span>
         <span style={{ marginLeft: 8, display: "flex", alignItems: "center" }}>
           <svg
-            width="20"
-            height="20"
+            width={size === Size.SMALL ? 16 : 20}
+            height={size === Size.SMALL ? 16 : 20}
             viewBox="0 0 20 20"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -136,11 +138,11 @@ export const Select: FunctionalComponent<SelectProps> = ({
             position: "absolute",
             left: 0,
             right: 0,
-            top: 44,
+            top: size === Size.SMALL ? 32 : 44,
             zIndex: 10,
             borderRadius: 6,
             boxShadow: theme.boxShadow,
-            maxHeight: 220,
+            maxHeight: size === Size.SMALL ? 160 : 220,
             overflowY: "auto",
             ...theme.dropdown,
             ...dropdownStyle,
@@ -153,14 +155,14 @@ export const Select: FunctionalComponent<SelectProps> = ({
                 flexDirection: "column",
                 alignItems: "center",
                 justifyContent: "center",
-                minHeight: 120,
+                minHeight: size === Size.SMALL ? 80 : 120,
                 width: "100%",
                 userSelect: "none",
               }}
             >
               <svg
-                width="64"
-                height="41"
+                width={size === Size.SMALL ? 48 : 64}
+                height={size === Size.SMALL ? 32 : 41}
                 viewBox="0 0 64 41"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -182,7 +184,13 @@ export const Select: FunctionalComponent<SelectProps> = ({
                   </g>
                 </g>
               </svg>
-              <div style={{ marginTop: 8, color: "#bfbfbf", fontSize: 15 }}>
+              <div
+                style={{
+                  marginTop: 8,
+                  color: "#bfbfbf",
+                  fontSize: size === Size.SMALL ? 12 : 15,
+                }}
+              >
                 {t("暂无数据")}
               </div>
             </div>
@@ -198,7 +206,8 @@ export const Select: FunctionalComponent<SelectProps> = ({
               onMouseEnter={() => setHoveredIndex(idx)}
               onMouseLeave={() => setHoveredIndex(null)}
               style={{
-                padding: "10px 16px",
+                padding: size === Size.SMALL ? "6px 10px" : "10px 16px",
+                fontSize: size === Size.SMALL ? 12 : 15,
                 cursor: opt.disabled ? "not-allowed" : "pointer",
                 fontWeight: value === opt.value ? 600 : 400,
                 opacity: opt.disabled ? 0.6 : 1,

package/src/components/common/upload/index.tsx

@@ -3,7 +3,9 @@ import { useState, useRef } from "preact/hooks";
 import { uploadFile } from "@/api";
 import { t } from "@/local";
 import { getUploadTheme } from "./theme";
-
+import { getInitParams } from "@/utils/business";
+import { Size } from "@/types";
+const size = getInitParams<Size>("size");
 interface UploadProps {
   value?: string[];
   onChange?: (urls: string[]) => void;
@@ -68,11 +70,24 @@ export const Upload: FunctionalComponent<UploadProps> = ({
         }}
         onClick={() => !disabled && fileInputRef.current?.click()}
       >
-        <div style={{ fontSize: 48, marginBottom: 12 }}>📁</div>
-        <div style={{ color: "#222", fontSize: 15, marginBottom: 4 }}>
+        <div
+          style={{
+            fontSize: size === Size.SMALL ? 32 : 48,
+            marginBottom: size === Size.SMALL ? 8 : 12,
+          }}
+        >
+          📁
+        </div>
+        <div
+          style={{
+            color: "#222",
+            fontSize: size === Size.SMALL ? 12 : 15,
+            marginBottom: size === Size.SMALL ? 4 : 8,
+          }}
+        >
           {t("点击或拖拽文件到此处上传")}
         </div>
-        <div style={{ color: "#999", fontSize: 13 }}>
+        <div style={{ color: "#999", fontSize: size === Size.SMALL ? 12 : 13 }}>
           {t("支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传")}{" "}
           {maxCount} {t("个文件")}
         </div>
@@ -86,22 +101,24 @@ export const Upload: FunctionalComponent<UploadProps> = ({
           disabled={disabled}
         />
         {uploading && (
-          <div style={{ marginTop: 12, color: "#1677ff" }}>
+          <div
+            style={{
+              marginTop: size === Size.SMALL ? 8 : 12,
+              color: "#1677ff",
+            }}
+          >
             {t("正在上传...")} {progress}%
           </div>
         )}
       </div>
       {value && value.length > 0 && (
-        <div style={{ marginTop: 12 }}>
+        <div style={{ marginTop: size === Size.SMALL ? 8 : 12 }}>
           {value.map((url, idx) => (
             <div key={url} style={theme.fileItem}>
               <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 }}>
-                  [{t("已上传")}]
-                </span>
               </div>
               <button
                 type="button"

package/src/components/common/upload/theme.tsx

@@ -1,5 +1,7 @@
-import { Theme } from "@/types";
+import { Size, Theme } from "@/types";
 import { getInitParams } from "@/utils/business";
+const size = getInitParams<Size>("size");
+
 
 export const uploadThemes = {
   white: {
@@ -7,25 +9,25 @@ export const uploadThemes = {
       border: "1px dashed #E5E6EB",
       borderRadius: 8,
       background: "#FCFCFD",
-      padding: 24,
+      padding: size === Size.SMALL ? 16 : 24,
       textAlign: "center",
       cursor: "pointer",
-      minHeight: 120,
+      minHeight: size === Size.SMALL ? 80 : 120,
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
       color: "#999",
-      fontSize: 15,
+      fontSize: size === Size.SMALL ? 12 : 15,
     },
     fileItem: {
       display: "flex",
       alignItems: "center",
       background: "#F7F8FA",
       borderRadius: 8,
-      padding: "12px 16px",
+      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
       marginBottom: 8,
-      fontSize: 15,
+      fontSize: size === Size.SMALL ? 12 : 15,
       color: "#222",
       justifyContent: "space-between",
     },
@@ -34,9 +36,9 @@ export const uploadThemes = {
       color: "#fff",
       border: "none",
       borderRadius: 6,
-      padding: "4px 14px",
-      fontSize: 15,
-      marginLeft: 16,
+      padding: size === Size.SMALL ? "6px 10px" : "4px 14px",
+      fontSize: size === Size.SMALL ? 12 : 15,
+      marginLeft: size === Size.SMALL ? 8 : 16,
       cursor: "pointer",
     },
   },
@@ -45,25 +47,25 @@ export const uploadThemes = {
       border: "1.5px dashed #444C5C",
       borderRadius: 8,
       background: "#181A20",
-      padding: 24,
+      padding: size === Size.SMALL ? 16 : 24,
       textAlign: "center",
       cursor: "pointer",
-      minHeight: 120,
+      minHeight: size === Size.SMALL ? 80 : 120,
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
       color: "#999",
-      fontSize: 15,
+      fontSize: size === Size.SMALL ? 12 : 15,
     },
     fileItem: {
       display: "flex",
       alignItems: "center",
       background: "#23262F",
       borderRadius: 8,
-      padding: "12px 16px",
+      padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
       marginBottom: 8,
-      fontSize: 15,
+      fontSize: size === Size.SMALL ? 12 : 15,
       color: "#fff",
       justifyContent: "space-between",
     },
@@ -72,9 +74,9 @@ export const uploadThemes = {
       color: "#fff",
       border: "none",
       borderRadius: 6,
-      padding: "4px 14px",
-      fontSize: 15,
-      marginLeft: 16,
+      padding: size === Size.SMALL ? "6px 10px" : "4px 14px",
+      fontSize: size === Size.SMALL ? 12 : 15,
+      marginLeft: size === Size.SMALL ? 8 : 16,
       cursor: "pointer",
     },
   },

package/src/demo/App.tsx

@@ -5,7 +5,7 @@ import { initFundUnit, refreshBalance } from "@/main";
 import StatisticalBalance from "@/components/business/statistical-balance";
 import RefreshButton from "@/components/business/refresh-button";
 import { t } from "@/local";
-import { Env, Locale, Theme } from "@/types";
+import { Env, Locale, Size, Theme } from "@/types";
 import TestBalanceData from "./testBalanceData";
 
 export default function DemoApp() {
@@ -43,14 +43,15 @@ export default function DemoApp() {
       locale: locale as Locale,
       theme: theme ?? Theme.WHITE,
       env: env ?? currentEnv,
-      themeConfig: {
-        white: {
-          color: "red",
-        },
-        dark: {
-          color: "pink",
-        },
-      },
+      size: Size.SMALL,
+      // themeConfig: {
+      //   white: {
+      //     color: "red",
+      //   },
+      //   dark: {
+      //     color: "pink",
+      //   },
+      // },
     });
   };
 

package/src/types/global.d.ts

@@ -17,6 +17,11 @@ export enum Env {
   PRODUCTION = "production",
 }
 
+export enum Size {
+  SMALL = "small",
+  MEDIUM = "medium",
+}
+
 // 类型定义
 export interface BalanceData {
   fundBalanceId: string;
@@ -43,15 +48,22 @@ export interface InitParams {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  size?: Size;
   themeConfig?: ThemeConfig;
 }
 
 export interface ThemeConfig {
   white?: {
     color?: string;
+    fontSize?: number;
   };
   dark?: {
     color?: string;
+    fontSize?: number;
+  };
+  global?: {
+    size?: Size;
+    fontSize?: number;
   };
 }
 
@@ -68,6 +80,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  size?: Size;
   themeConfig?: ThemeConfig;
 }): {
   token: string;
@@ -77,6 +90,7 @@ export declare function initFundUnit(params: {
   theme?: Theme;
   locale: Locale;
   env: Env;
+  size?: Size;
   themeConfig?: ThemeConfig;
 };
 

package/src/types/index.ts

@@ -16,6 +16,10 @@ export enum Env {
   PRODUCTION = "production",
 }
 
+export enum Size {
+  SMALL = "small",
+  MEDIUM = "medium",
+}
 
 export interface ThemeConfig {
   white?: {

package/src/utils/business/index.ts

@@ -1,6 +1,6 @@
 import { getAllDicts, getBalance } from "@/api";
 import { resetHttpInstance } from "@/api/axiosInstance";
-import { Locale, Theme, type Env } from "@/types";
+import { Locale, Size, Theme, type Env } from "@/types";
 
 // 余额数据结构接口
 export interface BalanceData {
@@ -37,6 +37,7 @@ export interface InitParams {
   theme?: Theme;
   locale?: Locale;
   env: Env;
+  size?: Size;
   themeConfig?: ThemeConfig;
 }
 
@@ -59,6 +60,7 @@ export function initFundUnit(params: InitParams) {
     theme = Theme.WHITE,
     locale = Locale.ZH,
     env,
+    size,
     themeConfig,
   } = params;
   const token = "Bearer " + params.token;
@@ -73,6 +75,7 @@ export function initFundUnit(params: InitParams) {
       theme,
       locale,
       env,
+      size,
       themeConfig,
     })
   );
@@ -89,6 +92,7 @@ export function initFundUnit(params: InitParams) {
     theme,
     locale,
     env,
+    size,
   };
 }