best-unit 1.2.19 → 1.2.21

package/src/components/common/hover-popover/index.tsx

@@ -0,0 +1,182 @@
+import { useState, useRef } from "preact/hooks";
+import type { FunctionalComponent, JSX } from "preact";
+import { getHoverPopoverTheme } from "./theme";
+import { getInitParams } from "@/utils/business";
+import { Size } from "@/types";
+
+const size = getInitParams<Size>("size");
+export type PopoverPosition = "top" | "bottom" | "leftTop" | "rightTop";
+interface HoverPopoverProps {
+  popover: JSX.Element;
+  children: JSX.Element;
+  popoverWidth?: number;
+  popoverMinWidth?: number;
+  offsetY?: number; // 弹层与目标元素的垂直间距
+  offsetX?: number; // 弹层与目标元素的水平间距
+  popoverPosition?: "top" | "bottom" | "leftTop" | "rightTop";
+}
+
+/**
+ * 通用 HoverPopover 组件，支持上下、左上、右上浮层、箭头、位置自适应
+ */
+const HoverPopover: FunctionalComponent<HoverPopoverProps> = ({
+  popover,
+  children,
+  popoverWidth = size === Size.SMALL ? 200 : 300,
+  popoverMinWidth = size === Size.SMALL ? 150 : 200,
+  offsetY = size === Size.SMALL ? 8 : 16,
+  offsetX = size === Size.SMALL ? 8 : 16,
+  popoverPosition = "top",
+}) => {
+  const [show, setShow] = useState(false);
+  const [position, setPosition] = useState<
+    "top" | "bottom" | "leftTop" | "rightTop"
+  >(popoverPosition);
+  const ref = useRef<HTMLDivElement>(null);
+  const timerRef = useRef<number | null>(null);
+  const theme = getHoverPopoverTheme();
+
+  const handleMouseEnter = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    if (popoverPosition === "top" || popoverPosition === "bottom") {
+      if (ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        if (popoverPosition === "top" && rect.top < 100) {
+          setPosition("bottom");
+        } else if (
+          popoverPosition === "bottom" &&
+          window.innerHeight - rect.bottom < 100
+        ) {
+          setPosition("top");
+        } else {
+          setPosition(popoverPosition);
+        }
+      } else {
+        setPosition(popoverPosition);
+      }
+    } else {
+      setPosition(popoverPosition);
+    }
+    setShow(true);
+  };
+
+  const handleMouseLeave = () => {
+    // 延迟关闭，防止鼠标快速移动到弹窗内容时闪烁
+    timerRef.current = window.setTimeout(() => {
+      setShow(false);
+    }, 120);
+  };
+
+  // 弹层定位样式
+  let popoverStyle: any = {
+    position: "absolute",
+    zIndex: 999,
+    borderRadius: 6,
+    fontSize: size === Size.SMALL ? 12 : 15,
+    minWidth: popoverMinWidth,
+    width: popoverWidth,
+    padding: size === Size.SMALL ? "6px 12px" : "8px 14px",
+    pointerEvents: "auto",
+    textAlign: "center",
+    animation: "fadeInUp 0.3s",
+    ...theme.popover,
+  };
+  let arrowStyle: any = {
+    position: "absolute",
+    zIndex: 11,
+    width: 0,
+    height: 0,
+  };
+  if (position === "top") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "50%",
+      top: -48,
+      transform: "translateX(-50%)",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: "50%",
+      bottom: -8,
+      transform: "translateX(-50%)",
+      borderLeft: "8px solid transparent",
+      borderRight: "8px solid transparent",
+      borderTop: `8px solid ${theme.arrow.top}`,
+    };
+  } else if (position === "bottom") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "50%",
+      top: "100%",
+      marginTop: offsetY,
+      transform: "translateX(-50%)",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: "50%",
+      top: -8,
+      transform: "translateX(-50%)",
+      borderLeft: "8px solid transparent",
+      borderRight: "8px solid transparent",
+      borderBottom: `8px solid ${theme.arrow.bottom}`,
+    };
+  } else if (position === "leftTop") {
+    popoverStyle = {
+      ...popoverStyle,
+      right: "100%",
+      top: 0,
+      marginRight: offsetX,
+      transform: "none",
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      right: -8,
+      top: size === Size.SMALL ? 8 : 12,
+      borderTop: "8px solid transparent",
+      borderBottom: "8px solid transparent",
+      borderLeft: `8px solid ${theme.arrow.left}`,
+    };
+  } else if (position === "rightTop") {
+    popoverStyle = {
+      ...popoverStyle,
+      left: "100%",
+      top: 0,
+      marginLeft: offsetX,
+      transform: "translateY(0)", // 右上角对齐
+    };
+    arrowStyle = {
+      ...arrowStyle,
+      left: -8,
+      top: 12,
+      borderTop: "8px solid transparent",
+      borderBottom: "8px solid transparent",
+      borderRight: `8px solid ${theme.arrow.right}`,
+    };
+  }
+
+  return (
+    <div
+      ref={ref}
+      style={{ position: "relative", display: "inline-block" }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {show && (
+        <div
+          style={popoverStyle}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {popover}
+          <div style={arrowStyle} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HoverPopover;

package/src/components/common/hover-popover/theme.tsx

@@ -0,0 +1,39 @@
+import { Theme } from "@/types";
+import { getInitParams } from "@/utils/business";
+
+export const hoverPopoverThemes = {
+  white: {
+    popover: {
+      background: "#fff",
+      color: "#222",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+      border: "none",
+    },
+    arrow: {
+      top: "#fff",
+      bottom: "#fff",
+      left: "#fff",
+      right: "#fff",
+    },
+  },
+  dark: {
+    popover: {
+      background: "#23262F",
+      color: "#fff",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.32)",
+      border: "1px solid #444C5C",
+    },
+    arrow: {
+      top: "#23262F",
+      bottom: "#23262F",
+      left: "#23262F",
+      right: "#23262F",
+    },
+  },
+};
+
+export function getHoverPopoverTheme() {
+  const theme = getInitParams<Theme>("theme");
+  const whiteTheme = theme === Theme.WHITE;
+  return whiteTheme ? hoverPopoverThemes.white : hoverPopoverThemes.dark;
+}

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

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

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

@@ -0,0 +1,99 @@
+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>
+  );
+}