best-unit 1.2.17 → 1.2.19

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

@@ -1,229 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,89 +0,0 @@
-import { Size, Theme } from "@/types";
-import { getInitParams } from "@/utils/business";
-const size = getInitParams<Size>("size");
-
-
-export const uploadThemes = {
-  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;
-  return whiteTheme ? uploadThemes.white : uploadThemes.dark;
-}