best-unit 1.0.0 → 1.0.3

package/src/components/common/Message.tsx

@@ -0,0 +1,324 @@
+import type { FunctionalComponent } from "preact";
+import { useState, useEffect } from "preact/hooks";
+
+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);
+
+  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;
+    }
+  };
+
+  const getBackgroundColor = () => {
+    return "#fff"; // 统一使用白色背景
+  };
+
+  const getBorderColor = () => {
+    return "#d9d9d9"; // 统一使用灰色边框
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: "20px",
+        left: "50%",
+        zIndex: 9999,
+        background: getBackgroundColor(),
+        border: `1px solid ${getBorderColor()}`,
+        borderRadius: "12px", // 更圆润的圆角
+        padding: "8px 16px", // 减小上下padding
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)", // 增强阴影效果
+        minWidth: content.length < 20 ? "auto" : "300px", // 短消息自适应宽度
+        maxWidth: "500px",
+        opacity: visible ? 1 : 0,
+        transform: visible
+          ? "translateX(-50%) translateY(0)"
+          : "translateX(-50%) translateY(-20px)",
+        transition: "all 0.3s ease",
+      }}
+    >
+      <div style={{ flexShrink: 0 }}>{getIcon()}</div>
+      <div
+        style={{
+          color: "#222",
+          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: "#999",
+            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 messageDiv = document.createElement("div");
+    messageDiv.style.cssText = `
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      background: #fff;
+      border: 1px solid #fff;
+      border-radius: 12px;
+      padding: 8px 16px;
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+      min-width: ${content.length < 20 ? "auto" : "300px"};
+      max-width: 500px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #222;
+    `;
+
+    // 添加图标
+    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";
+    messageDiv.appendChild(textDiv);
+
+    // 添加关闭按钮（如果启用）
+    if (closable) {
+      const closeBtn = document.createElement("button");
+      closeBtn.textContent = "✕";
+      closeBtn.style.cssText = `
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        color: #999;
+        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/Select.tsx

@@ -0,0 +1,278 @@
+import type { FunctionalComponent, JSX } from "preact";
+import { useState, useRef, useEffect } from "preact/hooks";
+import { Theme } from "../../types";
+import { t } from "../../local";
+
+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 fundUnitParams = JSON.parse(
+    sessionStorage.getItem("fund_unit_params") || "{}"
+  );
+  const whiteTheme = fundUnitParams.theme === Theme.WHITE;
+  // hover灰色 #f5f5f5，选中蓝色 #e6f7ff
+  const selectTheme = whiteTheme
+    ? {
+        trigger: {
+          background: disabled ? "#f5f5f5" : "#fff",
+          color: disabled ? "#bfbfbf" : value ? "#222" : "#bfbfbf",
+          border: error
+            ? "1px solid #ff4d4f"
+            : disabled
+            ? "1px solid #f0f0f0"
+            : "1px solid #d9d9d9",
+        },
+        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" },
+      }
+    : {
+        trigger: {
+          background: disabled ? "#23262F" : "#23262F",
+          color: disabled ? "#666" : value ? "#fff" : "#666",
+          border: error
+            ? "1px solid #ff4d4f"
+            : disabled
+            ? "1px solid #23262F"
+            : "1px solid #23262F",
+        },
+        dropdown: {
+          background: "#23262F",
+          border: "1px solid #23262F",
+          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" },
+      };
+
+  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);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{ position: "relative", ...style }}
+    >
+      <style>{`
+        .custom-select-dropdown {
+          scrollbar-width: thin;
+          scrollbar-color: #bfbfbf #f5f5f5;
+        }
+        .custom-select-dropdown::-webkit-scrollbar {
+          width: 8px;
+        }
+        .custom-select-dropdown::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background: ${whiteTheme ? "#e5e5e5" : "#444C5C"};
+        }
+        .custom-select-dropdown::-webkit-scrollbar-track {
+          background: ${whiteTheme ? "#f5f5f5" : "#23262F"};
+        }
+      `}</style>
+      <div
+        onClick={() => !disabled && setOpen((o) => !o)}
+        style={{
+          minHeight: 40,
+          borderRadius: 6,
+          display: "flex",
+          alignItems: "center",
+          padding: "0 12px",
+          fontSize: 15,
+          cursor: disabled ? "not-allowed" : "pointer",
+          boxSizing: "border-box",
+          transition: "border 0.2s",
+          opacity: disabled ? 0.6 : 1,
+          width: "100%",
+          ...selectTheme.trigger,
+          ...style,
+        }}
+        tabIndex={0}
+      >
+        <span style={{ flex: 1 }}>
+          {selected ? (
+            selected.label
+          ) : (
+            <span style={selectTheme.placeholder}>
+              {placeholder || "请选择"}
+            </span>
+          )}
+        </span>
+        <span style={{ marginLeft: 8, display: "flex", alignItems: "center" }}>
+          <svg
+            width="20"
+            height="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: 44,
+            zIndex: 10,
+            borderRadius: 6,
+            boxShadow: whiteTheme
+              ? "0 2px 8px rgba(0,0,0,0.08)"
+              : "0 2px 8px rgba(0,0,0,0.32)",
+            maxHeight: 220,
+            overflowY: "auto",
+            ...selectTheme.dropdown,
+            ...dropdownStyle,
+          }}
+        >
+          {options.length === 0 && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: 120,
+                width: "100%",
+                userSelect: "none",
+              }}
+            >
+              <svg
+                width="64"
+                height="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: 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: "10px 16px",
+                cursor: opt.disabled ? "not-allowed" : "pointer",
+                fontWeight: value === opt.value ? 600 : 400,
+                opacity: opt.disabled ? 0.6 : 1,
+                ...selectTheme.option(
+                  value === opt.value,
+                  !!opt.disabled,
+                  hoveredIndex === idx
+                ),
+              }}
+            >
+              {opt.label}
+            </div>
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};