best-unit 1.2.17 → 1.2.19

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

@@ -1,321 +0,0 @@
-import type { FunctionalComponent } from "preact";
-import { useState, useEffect } from "preact/hooks";
-import { getMessageTheme } from "./theme";
-
-export type MessageType = "success" | "error" | "warning" | "info";
-
-interface MessageProps {
-  type: MessageType;
-  content: string;
-  duration?: number;
-  onClose?: () => void;
-  closable?: boolean;
-}
-
-const MessageItem: FunctionalComponent<MessageProps> = ({
-  type,
-  content,
-  duration = 3000,
-  onClose,
-  closable = false,
-}) => {
-  const [visible, setVisible] = useState(true);
-  const theme = getMessageTheme();
-
-  useEffect(() => {
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        setTimeout(() => onClose?.(), 300);
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [duration, onClose]);
-
-  const getIcon = () => {
-    switch (type) {
-      case "error":
-        return (
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="8" fill="#ff4d4f" />
-            <path
-              d="M10.5 5.5l-5 5m0-5l5 5"
-              stroke="white"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
-          </svg>
-        );
-      case "success":
-        return (
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="8" fill="#52c41a" />
-            <path
-              d="M5 8.5l2.2 2.2 3.8-3.4"
-              stroke="white"
-              strokeWidth="1.8"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-            />
-          </svg>
-        );
-      case "warning":
-        return (
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="8" fill="#faad14" />
-            <path
-              d="M8 4.5v5"
-              stroke="white"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
-            <circle cx="8" cy="12.5" r="1" fill="white" />
-          </svg>
-        );
-      case "info":
-        return (
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <circle cx="8" cy="8" r="8" fill="#1677ff" />
-            <rect
-              x="7.25"
-              y="7"
-              width="1.5"
-              height="6"
-              rx="0.75"
-              fill="white"
-            />
-            <rect
-              x="7.25"
-              y="5"
-              width="1.5"
-              height="1.5"
-              rx="0.75"
-              fill="white"
-            />
-          </svg>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: "20px",
-        left: "50%",
-        zIndex: 9999,
-        background: theme.background,
-        border: `1px solid ${theme.border}`,
-        borderRadius: "12px",
-        padding: "8px 16px",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        boxShadow: theme.boxShadow,
-        minWidth: content.length < 20 ? "auto" : "300px",
-        maxWidth: "500px",
-        opacity: visible ? 1 : 0,
-        color: theme.color,
-        transform: visible
-          ? "translateX(-50%) translateY(0)"
-          : "translateX(-50%) translateY(-20px)",
-        transition: "all 0.3s ease",
-      }}
-    >
-      <div style={{ flexShrink: 0 }}>{getIcon()}</div>
-      <div
-        style={{
-          color: theme.color,
-          fontSize: "14px",
-          lineHeight: "1.5",
-          flex: 1,
-        }}
-      >
-        {content}
-      </div>
-      {closable && (
-        <button
-          onClick={() => {
-            setVisible(false);
-            setTimeout(() => onClose?.(), 300);
-          }}
-          style={{
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            padding: "4px",
-            color: theme.closeColor,
-            fontSize: "12px",
-            flexShrink: 0,
-          }}
-        >
-          ✕
-        </button>
-      )}
-    </div>
-  );
-};
-
-// 支持对象参数
-interface MessageOptions {
-  content: string;
-  duration?: number;
-  closable?: boolean;
-}
-
-type MessageArg = string | MessageOptions;
-
-// 简单的消息管理器
-class MessageManager {
-  private parseArg(arg: MessageArg): MessageOptions {
-    if (typeof arg === "string") {
-      return { content: arg };
-    }
-    return arg;
-  }
-
-  show(type: MessageType, arg: MessageArg) {
-    const { content, duration, closable } = this.parseArg(arg);
-    // 创建消息元素
-    const theme = getMessageTheme();
-    const messageDiv = document.createElement("div");
-    messageDiv.style.cssText = `
-      position: fixed;
-      top: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 9999;
-      background: ${theme.background};
-      border: 1px solid ${theme.border};
-      border-radius: 12px;
-      padding: 8px 16px;
-      box-shadow: ${theme.boxShadow};
-      min-width: ${content.length < 20 ? "auto" : "300px"};
-      max-width: 500px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 14px;
-      color: ${theme.color};
-    `;
-
-    // 添加图标
-    if (type === "error") {
-      const iconSvg = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "svg"
-      );
-      iconSvg.setAttribute("width", "16");
-      iconSvg.setAttribute("height", "16");
-      iconSvg.setAttribute("viewBox", "0 0 16 16");
-      iconSvg.innerHTML = `
-        <circle cx="8" cy="8" r="8" fill="#ff4d4f"/>
-        <path d="M10.5 5.5l-5 5m0-5l5 5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-      `;
-      messageDiv.appendChild(iconSvg);
-    }
-    if (type === "success") {
-      const iconSvg = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "svg"
-      );
-      iconSvg.setAttribute("width", "16");
-      iconSvg.setAttribute("height", "16");
-      iconSvg.setAttribute("viewBox", "0 0 16 16");
-      iconSvg.innerHTML = `
-        <circle cx="8" cy="8" r="8" fill="#52c41a"/>
-        <path d="M5 8.5l2.2 2.2 3.8-3.4" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-      `;
-      messageDiv.appendChild(iconSvg);
-    }
-    if (type === "warning") {
-      const iconSvg = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "svg"
-      );
-      iconSvg.setAttribute("width", "16");
-      iconSvg.setAttribute("height", "16");
-      iconSvg.setAttribute("viewBox", "0 0 16 16");
-      iconSvg.innerHTML = `
-        <circle cx="8" cy="8" r="8" fill="#faad14"/>
-        <path d="M8 4.5v5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-        <circle cx="8" cy="12.5" r="1" fill="white"/>
-      `;
-      messageDiv.appendChild(iconSvg);
-    }
-    if (type === "info") {
-      const iconSvg = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "svg"
-      );
-      iconSvg.setAttribute("width", "16");
-      iconSvg.setAttribute("height", "16");
-      iconSvg.setAttribute("viewBox", "0 0 16 16");
-      iconSvg.innerHTML = `
-        <circle cx="8" cy="8" r="8" fill="#1677ff"/>
-        <rect x="7.25" y="7" width="1.5" height="6" rx="0.75" fill="white"/>
-        <rect x="7.25" y="5" width="1.5" height="1.5" rx="0.75" fill="white"/>
-      `;
-      messageDiv.appendChild(iconSvg);
-    }
-
-    // 添加文本
-    const textDiv = document.createElement("div");
-    textDiv.textContent = content;
-    textDiv.style.flex = "1";
-    textDiv.style.color = theme.color;
-    messageDiv.appendChild(textDiv);
-
-    // 添加关闭按钮（如果启用）
-    if (closable) {
-      const closeBtn = document.createElement("button");
-      closeBtn.textContent = "✕";
-      closeBtn.style.cssText = `
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 4px;
-        color: ${theme.closeColor};
-        font-size: 12px;
-      `;
-      closeBtn.onclick = () => {
-        document.body.removeChild(messageDiv);
-      };
-      messageDiv.appendChild(closeBtn);
-    }
-
-    // 添加到页面
-    document.body.appendChild(messageDiv);
-
-    // 自动关闭
-    if (duration !== 0) {
-      setTimeout(() => {
-        if (document.body.contains(messageDiv)) {
-          document.body.removeChild(messageDiv);
-        }
-      }, duration || 3000);
-    }
-  }
-
-  success(arg: MessageArg) {
-    this.show("success", arg);
-  }
-
-  error(arg: MessageArg) {
-    this.show("error", arg);
-  }
-
-  warning(arg: MessageArg) {
-    this.show("warning", arg);
-  }
-
-  info(arg: MessageArg) {
-    this.show("info", arg);
-  }
-}
-
-export const message = new MessageManager();
-export default MessageItem;

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

@@ -1,25 +0,0 @@
-import { Theme } from "@/types";
-import { getInitParams } from "@/utils/business";
-
-export const messageThemes = {
-  white: {
-    background: "#fff",
-    border: "#d9d9d9",
-    color: "#222",
-    boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)",
-    closeColor: "#999",
-  },
-  dark: {
-    background: "#23262F",
-    border: "#444C5C",
-    color: "#F5F6FA",
-    boxShadow: "0 6px 16px rgba(0,0,0,0.32)",
-    closeColor: "#B5B8BE",
-  },
-};
-
-export function getMessageTheme() {
-  const theme = getInitParams<Theme>("theme");
-  const whiteTheme = theme === Theme.WHITE;
-  return whiteTheme ? messageThemes.white : messageThemes.dark;
-}

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

@@ -1,99 +0,0 @@
-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;
-  title?: string;
-  children: ComponentChildren;
-  width?: number | string;
-  maxWidth?: number | string;
-  showClose?: boolean;
-  maskClosable?: boolean;
-}
-
-export function Modal({
-  visible,
-  onClose,
-  title,
-  children,
-  width = size === Size.SMALL ? 300 : 400,
-  maxWidth = size === Size.SMALL ? 300 : 400,
-  showClose = true,
-  maskClosable = true,
-}: ModalProps) {
-  const [maskMouseDown, setMaskMouseDown] = useState(false);
-  const theme = getModalTheme();
-
-  // 只有mousedown和mouseup都在mask上才关闭弹窗
-  const handleMaskMouseDown = (e: any) => {
-    if (e.target === e.currentTarget) {
-      setMaskMouseDown(true);
-    } else {
-      setMaskMouseDown(false);
-    }
-  };
-
-  const handleMaskMouseUp = (e: any) => {
-    if (e.target === e.currentTarget && maskMouseDown && maskClosable) {
-      onClose();
-    }
-    setMaskMouseDown(false);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: theme.mask,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 9999,
-      }}
-      onMouseDown={handleMaskMouseDown}
-      onMouseUp={handleMaskMouseUp}
-    >
-      <div
-        style={{
-          background: theme.modalBg,
-          padding: size === Size.SMALL ? 24 : 32,
-          borderRadius: size === Size.SMALL ? 8 : 12,
-          minWidth: width,
-          maxWidth: maxWidth,
-          color: theme.modalColor,
-          boxShadow: theme.modalBoxShadow,
-          position: "relative",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* 关闭按钮 */}
-        {showClose && (
-          <button
-            type="button"
-            onClick={onClose}
-            style={theme.closeBtn}
-            aria-label="关闭"
-          >
-            ×
-          </button>
-        )}
-
-        {/* 标题 */}
-        {title && <div style={theme.title}>{title}</div>}
-
-        {/* 内容 */}
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -1,91 +0,0 @@
-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)",
-    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;
-  return whiteTheme ? modalThemes.white : modalThemes.dark;
-}