best-unit 1.2.19 → 1.2.21

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

@@ -0,0 +1,99 @@
+import { Size, Theme } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createModalThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      mask: "rgba(0, 0, 0, 0.45)",
+      modalBg: "#fff",
+      modalColor: "#222",
+      modalBoxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)",
+      closeBtn: {
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        background: "none",
+        border: "none",
+        fontSize: size === Size.SMALL ? 16 : 24,
+        cursor: "pointer",
+        color: "#999",
+        padding: "0",
+        width: size === Size.SMALL ? 16 : 24,
+        height: size === Size.SMALL ? 16 : 24,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      title: {
+        fontSize: size === Size.SMALL ? 16 : 18,
+        fontWeight: "600",
+        marginBottom: size === Size.SMALL ? 16 : 24,
+        color: "#222",
+      },
+      tabBtn: (active: boolean, isFirst: boolean) => ({
+        flex: 1,
+        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: size === Size.SMALL ? 12 : 14,
+        fontWeight: active ? "600" : "400",
+        borderRadius: isFirst ? "6px 0 0 6px" : "0 6px 6px 0",
+      }),
+    },
+    dark: {
+      mask: "rgba(0, 0, 0, 0.65)",
+      modalBg: "#23262F",
+      modalColor: "#F5F6FA",
+      modalBoxShadow: "0 6px 16px rgba(0,0,0,0.32)",
+      closeBtn: {
+        position: "absolute",
+        top: size === Size.SMALL ? "12px" : "16px",
+        right: size === Size.SMALL ? "12px" : "16px",
+        background: "none",
+        border: "none",
+        fontSize: size === Size.SMALL ? 16 : 24,
+        cursor: "pointer",
+        color: "#B5B8BE",
+        padding: "0",
+        width: size === Size.SMALL ? 16 : 24,
+        height: size === Size.SMALL ? 16 : 24,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+      title: {
+        fontSize: size === Size.SMALL ? 16 : 18,
+        fontWeight: "600",
+        marginBottom: size === Size.SMALL ? 16 : 24,
+        color: "#F5F6FA",
+      },
+      tabBtn: (active: boolean, isFirst: boolean) => ({
+        flex: 1,
+        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: size === Size.SMALL ? 12 : 14,
+        fontWeight: active ? "600" : "400",
+        borderRadius: isFirst ? "6px 0 0 6px" : "0 6px 6px 0",
+      }),
+    },
+  };
+}
+
+export function getModalTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const modalThemes = createModalThemes();
+  return whiteTheme ? modalThemes.white : modalThemes.dark;
+}

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

@@ -0,0 +1,229 @@
+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;
+  disabled?: boolean;
+}
+
+interface SelectProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  options: Option[];
+  placeholder?: string;
+  style?: any;
+  error?: boolean;
+  disabled?: boolean;
+  dropdownStyle?: any;
+  className?: string;
+  dropdownClassName?: string;
+  children?: JSX.Element;
+}
+
+export const Select: FunctionalComponent<SelectProps> = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  style,
+  error,
+  disabled,
+  dropdownStyle,
+  className,
+  dropdownClassName,
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const theme = getSelectTheme();
+
+  useEffect(() => {
+    if (!open) return;
+    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);
+  }, [open]);
+
+  const selected = options.find((opt) => opt.value === value);
+
+  // 获取触发器样式
+  const getTriggerStyle = () => {
+    if (error) return theme.triggerError;
+    if (disabled) return theme.triggerDisabled;
+    return theme.trigger;
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{ position: "relative", ...style }}
+    >
+      <style>{`
+        .custom-select-dropdown {
+          scrollbar-width: thin;
+          scrollbar-color: ${theme.scrollbarThumb} ${theme.scrollbarTrack};
+        }
+        .custom-select-dropdown::-webkit-scrollbar {
+          width: ${size === Size.SMALL ? 6 : 8}px;
+        }
+        .custom-select-dropdown::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background: ${theme.scrollbarThumb};
+        }
+        .custom-select-dropdown::-webkit-scrollbar-track {
+          background: ${theme.scrollbarTrack};
+        }
+      `}</style>
+      <div
+        onClick={() => !disabled && setOpen((o) => !o)}
+        style={{
+          minHeight: size === Size.SMALL ? 32 : 40,
+          borderRadius: 6,
+          display: "flex",
+          alignItems: "center",
+          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",
+          opacity: disabled ? 0.6 : 1,
+          width: "100%",
+          ...getTriggerStyle(),
+          ...style,
+        }}
+        tabIndex={0}
+      >
+        <span style={{ flex: 1 }}>
+          {selected ? (
+            selected.label
+          ) : (
+            <span style={theme.placeholder}>{placeholder || "请选择"}</span>
+          )}
+        </span>
+        <span style={{ marginLeft: 8, display: "flex", alignItems: "center" }}>
+          <svg
+            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"
+          >
+            <path
+              d="M6 8L10 12L14 8"
+              stroke="#bfbfbf"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+      </div>
+      {open && !disabled && (
+        <div
+          className={`custom-select-dropdown${
+            dropdownClassName ? " " + dropdownClassName : ""
+          }`}
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: size === Size.SMALL ? 32 : 44,
+            zIndex: 10,
+            borderRadius: 6,
+            boxShadow: theme.boxShadow,
+            maxHeight: size === Size.SMALL ? 160 : 220,
+            overflowY: "auto",
+            ...theme.dropdown,
+            ...dropdownStyle,
+          }}
+        >
+          {options.length === 0 && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: size === Size.SMALL ? 80 : 120,
+                width: "100%",
+                userSelect: "none",
+              }}
+            >
+              <svg
+                width={size === Size.SMALL ? 48 : 64}
+                height={size === Size.SMALL ? 32 : 41}
+                viewBox="0 0 64 41"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>{t("暂无数据")}</title>
+                <g transform="translate(0 1)" fill="none" fillRule="evenodd">
+                  <ellipse
+                    fill="#f5f5f5"
+                    cx="32"
+                    cy="33"
+                    rx="32"
+                    ry="7"
+                  ></ellipse>
+                  <g fillRule="nonzero" stroke="#d9d9d9">
+                    <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    ></path>
+                  </g>
+                </g>
+              </svg>
+              <div
+                style={{
+                  marginTop: 8,
+                  color: "#bfbfbf",
+                  fontSize: size === Size.SMALL ? 12 : 15,
+                }}
+              >
+                {t("暂无数据")}
+              </div>
+            </div>
+          )}
+          {options.map((opt, idx) => (
+            <div
+              key={opt.value}
+              onClick={() => {
+                if (opt.disabled) return;
+                setOpen(false);
+                onChange?.(opt.value);
+              }}
+              onMouseEnter={() => setHoveredIndex(idx)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              style={{
+                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,
+                ...theme.option(
+                  value === opt.value,
+                  !!opt.disabled,
+                  hoveredIndex === idx
+                ),
+              }}
+            >
+              {opt.label}
+            </div>
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,104 @@
+import { Theme, type ThemeConfig } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+export const selectThemes = {
+  white: {
+    trigger: {
+      background: "#fff",
+      color: "#222",
+      border: "1px solid #d9d9d9",
+    },
+    triggerDisabled: {
+      background: "#f5f5f5",
+      color: "#bfbfbf",
+      border: "1px solid #f0f0f0",
+    },
+    triggerError: {
+      background: "#fff",
+      color: "#222",
+      border: "1px solid #ff4d4f",
+    },
+    dropdown: {
+      background: "#fff",
+      border: "1px solid #d9d9d9",
+      color: "#222",
+    },
+    option: (active: boolean, optDisabled: boolean, hovered: boolean) => ({
+      color: optDisabled ? "#bfbfbf" : active ? "#1890ff" : "#222",
+      background: active
+        ? "#e6f7ff"
+        : hovered && !optDisabled
+        ? "#f5f5f5"
+        : optDisabled
+        ? "#f5f5f5"
+        : "#fff",
+    }),
+    placeholder: { color: "#bfbfbf" },
+    scrollbarThumb: "#e5e5e5",
+    scrollbarTrack: "#f5f5f5",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+  },
+  dark: {
+    trigger: {
+      background: "#23262F",
+      color: "#fff",
+      border: "1px solid #374151",
+    },
+    triggerDisabled: {
+      background: "#23262F",
+      color: "#666",
+      border: "1px solid #374151",
+    },
+    triggerError: {
+      background: "#23262F",
+      color: "#fff",
+      border: "1px solid #ff4d4f",
+    },
+    dropdown: {
+      background: "#23262F",
+      border: "1px solid #374151",
+      color: "#fff",
+    },
+    option: (active: boolean, optDisabled: boolean, hovered: boolean) => ({
+      color: optDisabled ? "#666" : active ? "#00E8C6" : "#fff",
+      background: active
+        ? "#23262F"
+        : hovered && !optDisabled
+        ? "#333843"
+        : optDisabled
+        ? "#23262F"
+        : "#23262F",
+    }),
+    placeholder: { color: "#666" },
+    scrollbarThumb: "#444C5C",
+    scrollbarTrack: "#23262F",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.32)",
+  },
+};
+
+export function getSelectTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const themeConfig = getInitParams<ThemeConfig>("themeConfig");
+  const whiteTheme = theme === Theme.WHITE;
+  const baseTheme = whiteTheme ? selectThemes.white : selectThemes.dark;
+
+  // 如果初始化时传入了主题配置，则覆盖默认配置
+  if (themeConfig) {
+    const config = whiteTheme ? themeConfig.white : themeConfig.dark;
+    if (config?.color) {
+      return {
+        ...baseTheme,
+        option: (active: boolean, optDisabled: boolean, hovered: boolean) => ({
+          ...baseTheme.option(active, optDisabled, hovered),
+          color: optDisabled
+            ? baseTheme.option(active, optDisabled, hovered).color
+            : active
+            ? config.color
+            : baseTheme.option(active, optDisabled, hovered).color,
+        }),
+      };
+    }
+  }
+
+  return baseTheme;
+}

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

@@ -0,0 +1,140 @@
+import type { FunctionalComponent } from "preact";
+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;
+  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 theme = getUploadTheme();
+
+  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={{
+          ...theme.container,
+          cursor: disabled ? "not-allowed" : theme.container.cursor,
+          opacity: disabled ? 0.6 : 1,
+        }}
+        onClick={() => !disabled && fileInputRef.current?.click()}
+      >
+        <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: size === Size.SMALL ? 12 : 13 }}>
+          {t("支持 JPG、PNG、PDF 格式，单个文件不超过 20MB，最多上传")}{" "}
+          {maxCount} {t("个文件")}
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple={multiple}
+          accept={accept}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+          disabled={disabled}
+        />
+        {uploading && (
+          <div
+            style={{
+              marginTop: size === Size.SMALL ? 8 : 12,
+              color: "#1677ff",
+            }}
+          >
+            {t("正在上传...")} {progress}%
+          </div>
+        )}
+      </div>
+      {value && value.length > 0 && (
+        <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>
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(idx);
+                }}
+                style={theme.removeBtn}
+                disabled={disabled}
+              >
+                {t("移除")}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,95 @@
+import { Size, Theme } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+// 动态生成主题配置的函数
+function createUploadThemes() {
+  const size = getInitParams<Size>("size"); // 每次调用时重新获取最新值
+
+  return {
+    white: {
+      container: {
+        border: "1px dashed #E5E6EB",
+        borderRadius: 8,
+        background: "#FCFCFD",
+        padding: size === Size.SMALL ? 16 : 24,
+        textAlign: "center",
+        cursor: "pointer",
+        minHeight: size === Size.SMALL ? 80 : 120,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#999",
+        fontSize: size === Size.SMALL ? 12 : 15,
+      },
+      fileItem: {
+        display: "flex",
+        alignItems: "center",
+        background: "#F7F8FA",
+        borderRadius: 8,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        marginBottom: 8,
+        fontSize: size === Size.SMALL ? 12 : 15,
+        color: "#222",
+        justifyContent: "space-between",
+      },
+      removeBtn: {
+        background: "#FF4D4F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 10px" : "4px 14px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        marginLeft: size === Size.SMALL ? 8 : 16,
+        cursor: "pointer",
+      },
+    },
+    dark: {
+      container: {
+        border: "1.5px dashed #444C5C",
+        borderRadius: 8,
+        background: "#181A20",
+        padding: size === Size.SMALL ? 16 : 24,
+        textAlign: "center",
+        cursor: "pointer",
+        minHeight: size === Size.SMALL ? 80 : 120,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#999",
+        fontSize: size === Size.SMALL ? 12 : 15,
+      },
+      fileItem: {
+        display: "flex",
+        alignItems: "center",
+        background: "#23262F",
+        borderRadius: 8,
+        padding: size === Size.SMALL ? "8px 10px" : "12px 16px",
+        marginBottom: 8,
+        fontSize: size === Size.SMALL ? 12 : 15,
+        color: "#fff",
+        justifyContent: "space-between",
+      },
+      removeBtn: {
+        background: "#FF4D4F",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        padding: size === Size.SMALL ? "6px 10px" : "4px 14px",
+        fontSize: size === Size.SMALL ? 12 : 15,
+        marginLeft: size === Size.SMALL ? 8 : 16,
+        cursor: "pointer",
+      },
+    },
+  };
+}
+
+export function getUploadTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const whiteTheme = theme === Theme.WHITE;
+
+  // 每次调用时重新生成主题配置
+  const uploadThemes = createUploadThemes();
+  return whiteTheme ? uploadThemes.white : uploadThemes.dark;
+}