@enableai-base/ui 1.0.0

package/dist/ui.esm-bundler.mjs

@@ -0,0 +1,1361 @@
+/**
+* @enableai-base/ui v1.0.0
+* (c) 2024-present Enableai
+* @license Proprietary
+**/
+import React, { useState, useEffect, forwardRef, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { Skeleton, Flex, Avatar, Badge, Button, Tag, Tooltip, Checkbox, Radio, Row, ColorPicker, Popover, Input, Space, Spin, Typography, Modal, Upload } from 'antd';
+import { getColorByStr, COLOR_BG_CELL } from '@enableai-base/core';
+import { waitPromise } from '@enableai-sdk-common/core';
+import { CloseOutlined, CaretDownOutlined, LinkOutlined, HolderOutlined, PlusOutlined, EllipsisOutlined, UploadOutlined } from '@ant-design/icons';
+import { getTextColorForBackground } from '@enableai-sdk-common/color';
+import { initEnableAIBaseFontIcon, EnableAIBaseFontIcon } from '@enableai-fonts/font-icon-enableai-base';
+import { getUUID } from '@enableai-sdk-common/id';
+import { useMount } from '@enableai-sdk-common/react-hooks';
+import { cloneDeep } from 'lodash';
+import VirtualList from 'react-tiny-virtual-list';
+import CryptoJS from 'crypto-js';
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+
+const USER_POPOVER_WIDTH = 160;
+const NAME_FONT_SIZE = 16;
+const UserPopoverWrapper = ({ children }) => /* @__PURE__ */ React.createElement(Flex, { style: { width: USER_POPOVER_WIDTH, justifyContent: "center" } }, children);
+const SkeletonLine = ({ height, width }) => /* @__PURE__ */ React.createElement(
+  Skeleton.Button,
+  {
+    active: true,
+    style: {
+      width,
+      height,
+      padding: 0,
+      minWidth: 0,
+      borderRadius: 2
+    }
+  }
+);
+const UserLoadingSkeleton = ({ fontSize }) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 12,
+        alignItems: "center",
+        marginBottom: 8
+      }
+    },
+    /* @__PURE__ */ React.createElement(Skeleton.Avatar, { size: 48, active: true, shape: "circle" }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: 4,
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ React.createElement(SkeletonLine, { height: NAME_FONT_SIZE, width: 80 }),
+      /* @__PURE__ */ React.createElement(SkeletonLine, { height: fontSize, width: 80 }),
+      /* @__PURE__ */ React.createElement(SkeletonLine, { height: fontSize, width: 80 })
+    )
+  ), /* @__PURE__ */ React.createElement(SkeletonLine, { height: fontSize, width: 140 }));
+};
+const AvatarPopoverContent = (props) => {
+  const { id, column, fontSize = 14 } = props;
+  const [value, setValue] = useState(null);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    const fetchDetail = async () => {
+      if (column && id != null && typeof column.request === "function") {
+        try {
+          setLoading(true);
+          const v = await column.request(id);
+          setValue(v);
+        } catch (e) {
+          console.error("AvatarPopover fetchDetail error:", e);
+          setValue(null);
+        } finally {
+          setLoading(false);
+        }
+      } else {
+        setValue(null);
+        setLoading(false);
+      }
+    };
+    fetchDetail();
+  }, [id, column]);
+  const userContent = loading ? /* @__PURE__ */ React.createElement(UserPopoverWrapper, null, /* @__PURE__ */ React.createElement(UserLoadingSkeleton, { fontSize })) : /* @__PURE__ */ React.createElement(Flex, { style: { minWidth: USER_POPOVER_WIDTH, justifyContent: "center" } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 12,
+        alignItems: "center",
+        marginBottom: 8
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Avatar,
+      {
+        size: 48,
+        src: value?.avatar,
+        style: { backgroundColor: value?.name === "\u65E0" ? "#D9D9D9" : getColorByStr(value?.name?.slice(-2)) }
+      },
+      value?.name ? value.name.split(-2) : "\u672A\u77E5"
+    ),
+    /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: NAME_FONT_SIZE,
+          fontWeight: 500,
+          marginBottom: 4
+        }
+      },
+      value?.name || "\u672A\u77E5"
+    ), /* @__PURE__ */ React.createElement("div", { style: { fontSize, color: "#666", marginBottom: 4 } }, value?.role || "\u6682\u65E0\u89D2\u8272\u4FE1\u606F"), value?.mobile && /* @__PURE__ */ React.createElement("div", { style: { fontSize, color: "#666" } }, value.mobile))
+  ), value?.status && /* @__PURE__ */ React.createElement("div", { style: { fontSize, color: "#333", marginLeft: 4 } }, /* @__PURE__ */ React.createElement(
+    Badge,
+    {
+      color: value.status === "\u5728\u7EBF" ? "green" : "gray",
+      style: { margin: "0 4px", transform: "scale(1.5)" }
+    }
+  ), value.status)));
+  return userContent;
+};
+
+const BlinkButton = forwardRef(function BlinkButton2({ children, style, blinkInterval = 300, blinkTimes = 2, dimOpacity = 0.4, ...props }, ref) {
+  const [shine, setShine] = useState(true);
+  const aliveRef = useRef(true);
+  const runningRef = useRef(false);
+  useEffect(() => {
+    return () => {
+      aliveRef.current = false;
+    };
+  }, []);
+  const blink = useCallback(async () => {
+    if (runningRef.current) return;
+    runningRef.current = true;
+    try {
+      for (let i = 0; i < blinkTimes; i++) {
+        if (!aliveRef.current) return;
+        setShine(false);
+        await waitPromise(blinkInterval);
+        if (!aliveRef.current) return;
+        setShine(true);
+        await waitPromise(blinkInterval);
+      }
+    } finally {
+      runningRef.current = false;
+    }
+  }, [blinkInterval, blinkTimes]);
+  useImperativeHandle(ref, () => ({ blink }), [blink]);
+  const mergedStyle = useMemo(
+    () => ({
+      ...style,
+      opacity: shine ? 1 : dimOpacity
+    }),
+    [style, shine, dimOpacity]
+  );
+  return /* @__PURE__ */ React.createElement(Button, { ...props, style: mergedStyle }, children);
+});
+
+const CustomTag = ({
+  label,
+  maxWidth = "100%",
+  color,
+  fontSize = 13,
+  closable = false,
+  onClose,
+  style = {},
+  className = "",
+  ...tagProps
+}) => {
+  const textRef = useRef(null);
+  const [isOverflowed, setIsOverflowed] = useState(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const fontColor = useMemo(() => getTextColorForBackground(color || "#000000"), [color]);
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        const isOverflowing = element.scrollWidth > element.clientWidth;
+        setIsOverflowed(isOverflowing);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [label, maxWidth]);
+  const tagStyle = useMemo(
+    () => ({
+      maxWidth,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      borderRadius: "20px",
+      verticalAlign: "middle",
+      border: "unset",
+      color: fontColor,
+      backgroundColor: color,
+      ...style
+    }),
+    [maxWidth, fontColor, color, style]
+  );
+  const handleTooltipVisibleChange = (visible) => {
+    if (isOverflowed) {
+      setIsTooltipVisible(visible);
+    }
+  };
+  const tagContent = /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      closable,
+      onClose,
+      closeIcon: /* @__PURE__ */ React.createElement(CloseOutlined, { style: { fontSize: 10, color: fontColor } }),
+      style: tagStyle,
+      className: `custom-tag ${className}`,
+      ...tagProps
+    },
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref: textRef,
+        style: {
+          display: "inline-block",
+          maxWidth: `${closable ? "calc(100% - 17px)" : "100%"}`,
+          //17是图标宽度+图标间距
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          fontSize: `${fontSize}px`,
+          whiteSpace: "nowrap",
+          verticalAlign: "bottom"
+        }
+      },
+      label
+    )
+  );
+  if (isOverflowed) {
+    return /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        title: label,
+        open: isTooltipVisible,
+        onOpenChange: handleTooltipVisibleChange,
+        mouseEnterDelay: 0.5,
+        styles: { root: { maxWidth: "400px", wordBreak: "break-all" } }
+      },
+      tagContent
+    );
+  }
+  return tagContent;
+};
+
+const ColorCheckboxGroup = ({ value = [], options = [], onChange, disabled }) => {
+  const innerValue = value.map((v) => v.value);
+  const handleChange = (checkedValues) => {
+    const next = options.filter((opt) => checkedValues.includes(opt.value));
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ React.createElement(Checkbox.Group, { value: innerValue, onChange: handleChange, disabled, className: "color-checkbox-group" }, options.map((option) => {
+    const checked = innerValue.includes(option.value);
+    return /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        key: option.value,
+        value: option.value,
+        className: `color-checkbox-item ${checked ? "checked" : ""}`
+      },
+      /* @__PURE__ */ React.createElement(CustomTag, { color: option.color, className: "color-checkbox-tag", label: option.label })
+    );
+  }));
+};
+
+const ColorRadioGroup = ({ value = [], options = [], onChange, disabled }) => {
+  const innerValue = value[0]?.value;
+  const handleChange = (e) => {
+    const selected = options.find((opt) => opt.value === e.target.value);
+    onChange?.(selected ? [selected] : []);
+  };
+  return /* @__PURE__ */ React.createElement(Radio.Group, { value: innerValue, onChange: handleChange, disabled, className: "color-radio-group" }, options.map((option) => {
+    const checked = option.value === innerValue;
+    return /* @__PURE__ */ React.createElement(Radio, { key: option.value, value: option.value, className: `color-radio-item ${checked ? "checked" : ""}` }, /* @__PURE__ */ React.createElement(CustomTag, { color: option.color, className: "color-radio-tag", label: option.label }));
+  }));
+};
+
+const ColorPickerButton = ({ color, ...args }) => {
+  const iconColor = useMemo(() => color ? getTextColorForBackground(color) : "var(--ant-color-text-base)", [color]);
+  return /* @__PURE__ */ React.createElement("div", { ...args }, /* @__PURE__ */ React.createElement("div", { className: `color-picker-button` }, /* @__PURE__ */ React.createElement("span", { className: "universe-icon", style: { backgroundColor: color, color: iconColor } }, /* @__PURE__ */ React.createElement(CaretDownOutlined, null)), /* @__PURE__ */ React.createElement("div", { className: "color-picker-button-mask" }, " ")));
+};
+
+const FixedColorPanel = (_, { components: { Presets } }) => {
+  return /* @__PURE__ */ React.createElement(Row, { justify: "space-between", wrap: false, className: "color-picker-panel" }, /* @__PURE__ */ React.createElement(Presets, null));
+};
+
+const presetColors = [
+  {
+    label: "group1",
+    key: "group1",
+    colors: [
+      "#ff7570",
+      "#ff811a",
+      "#ffc60a",
+      "#91ad00",
+      "#35bd4b",
+      "#2dbeab",
+      "#25b0e7",
+      "#7aa2ff",
+      "#eb78b8",
+      "#b791fa",
+      "#8f959e"
+    ]
+  },
+  {
+    label: "group2",
+    key: "group2",
+    colors: [
+      "#fee3e2",
+      "#fee7cd",
+      "#faedc2",
+      "#e3f0a3",
+      "#d0f5ce",
+      "#c4f2ec",
+      "#caeffc",
+      "#e0e9ff",
+      "#fee2f2",
+      "#efe6fe",
+      "#eff0f1"
+    ]
+  },
+  {
+    label: "group3",
+    key: "group3",
+    colors: [
+      "#fdc6c4",
+      "#fec48b",
+      "#fcdf7e",
+      "#c8dd5f",
+      "#95e599",
+      "#6fe8d8",
+      "#97dcfc",
+      "#c2d4ff",
+      "#f8c4e1",
+      "#dcc9fd",
+      "#dee0e3"
+    ]
+  },
+  {
+    label: "group4",
+    key: "group4",
+    colors: [
+      "#f54a45",
+      "#ed6d0c",
+      "#d99904",
+      "#7b9207",
+      "#32a645",
+      "#10a893",
+      "#1295ca",
+      "#5083fb",
+      "#df58a5",
+      "#9f6ff1",
+      "#646a73"
+    ]
+  },
+  {
+    label: "group5",
+    key: "group5",
+    colors: [
+      "#c02a26",
+      "#a44904",
+      "#865b03",
+      "#5c6d08",
+      "#1a7526",
+      "#067062",
+      "#076a94",
+      "#1456f0",
+      "#b82879",
+      "#7a35f0",
+      "#373c43"
+    ]
+  }
+];
+
+const FixedColorPicker = ({ ...args }) => {
+  const [clonedPresetColor] = useState(() => cloneDeep(presetColors));
+  return /* @__PURE__ */ React.createElement(
+    ColorPicker,
+    {
+      ...{
+        placement: "left",
+        panelRender: FixedColorPanel,
+        presets: clonedPresetColor,
+        ...args
+      }
+    },
+    /* @__PURE__ */ React.createElement(ColorPickerButton, { color: args.value })
+  );
+};
+
+const getRandomColor = () => {
+  const colors = presetColors.flatMap((group) => group.colors);
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+const IconFont = ({ name, size = 16, color, className, style }) => {
+  const [iconClass, setIconClass] = useState("");
+  useEffect(() => {
+    initEnableAIBaseFontIcon().then(() => {
+      setIconClass(EnableAIBaseFontIcon.get(name));
+    });
+  }, [name]);
+  return /* @__PURE__ */ React.createElement(
+    "i",
+    {
+      className: [iconClass, className].filter(Boolean).join(" "),
+      style: { fontSize: size, color, ...style },
+      "aria-hidden": "true"
+    }
+  );
+};
+
+function isFocused(el) {
+  return !!el && document.activeElement === el;
+}
+function focusToEnd(el) {
+  el.focus();
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+const LinkEdit = ({ value, onChange, disabled, styles, popoverStyles, placeholder }) => {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  const updateDraft = (key, v) => {
+    setDraft((prev) => ({
+      ...prev ?? {},
+      [key]: v
+    }));
+  };
+  const confirm = () => {
+    dispatchData(draft);
+    setOpen(false);
+    updateInputTitle(draft?.title ?? "");
+  };
+  const cancel = () => {
+    setDraft(value);
+    updateInputTitle(value?.title ?? "");
+    setOpen(false);
+  };
+  const dispatchData = useCallback(
+    (data) => {
+      const isTitleChange = !Object.is(value?.title, data?.title);
+      const isLinkChange = !Object.is(value?.url, data?.url);
+      if (isTitleChange || isLinkChange) onChange?.(data);
+    },
+    [onChange, value?.title, value?.url]
+  );
+  const inputTitleRef = useRef(value?.title ?? "");
+  const [hasTitle, setHasTitle] = useState(!!value?.title);
+  const updateInputTitle = useCallback((title, focus = false) => {
+    inputTitleRef.current = title;
+    setHasTitle(!!title.length);
+    if (focus) {
+      requestAnimationFrame(() => {
+        if (ref1.current && !isFocused(ref1.current)) focusToEnd(ref1.current);
+        if (ref2.current && !isFocused(ref2.current)) ref2.current.focus();
+      });
+    }
+  }, []);
+  const inputLink = useMemo(() => draft?.url, [draft?.url]);
+  const [inputRefreshKey, setInputRefreshKey] = useState(getUUID());
+  const editingRef = useRef(false);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  useEffect(() => {
+    if (!editingRef.current) return;
+    if (ref1.current && !isFocused(ref1.current)) focusToEnd(ref1.current);
+    if (ref2.current) ref2.current.focus();
+  }, [hasTitle]);
+  const isComposingRef = useRef(false);
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open,
+      onOpenChange: (v) => {
+        if (!v) setOpen(v);
+      },
+      placement: "bottom",
+      trigger: ["click"],
+      arrow: false,
+      content: /* @__PURE__ */ React.createElement(Flex, { style: { ...popoverStyles }, vertical: true, gap: 24 }, /* @__PURE__ */ React.createElement("div", { className: "link-editor-form-item" }, /* @__PURE__ */ React.createElement("div", { className: "item-label" }, "\u6587\u672C"), /* @__PURE__ */ React.createElement(Input, { value: draft?.title, onChange: (e) => updateDraft("title", e.target.value) })), /* @__PURE__ */ React.createElement("div", { className: "link-editor-form-item" }, /* @__PURE__ */ React.createElement("div", { className: "item-label" }, "\u8D85\u94FE\u63A5"), /* @__PURE__ */ React.createElement(Input, { value: draft?.url, onChange: (e) => updateDraft("url", e.target.value) })), /* @__PURE__ */ React.createElement(Flex, { justify: "flex-end" }, /* @__PURE__ */ React.createElement(Space, null, /* @__PURE__ */ React.createElement(Button, { size: "small", onClick: cancel }, "\u53D6\u6D88"), /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary", onClick: confirm }, "\u786E\u5B9A"))))
+    },
+    /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        align: "center",
+        style: {
+          backgroundColor: COLOR_BG_CELL,
+          borderRadius: 0,
+          ...styles
+        }
+      },
+      hasTitle ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "link-editor-input content-editable-clear",
+          key: inputRefreshKey,
+          style: {
+            color: `${hasTitle ? "var(--ant-color-link)" : "var(--ant-color-text)"}`
+          },
+          onClick: (e) => {
+            if (e.nativeEvent.target?.nodeName === "DIV") {
+              if (ref1.current) {
+                editingRef.current = true;
+                focusToEnd(ref1.current);
+              }
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            ref: ref1,
+            contentEditable: !disabled,
+            suppressContentEditableWarning: true,
+            className: "link-editor-input-a content-editable-clear",
+            style: {
+              color: `${disabled ? "var(--ant-color-text-disabled)" : "var(--ant-color-link)"}`
+            },
+            onClick: () => window.open(inputLink),
+            onCompositionStart: () => {
+              isComposingRef.current = true;
+            },
+            onCompositionEnd: (e) => {
+              isComposingRef.current = false;
+              const text = e.currentTarget.innerText;
+              updateInputTitle(text, true);
+            },
+            onBlur: (e) => {
+              editingRef.current = false;
+              const title = e.currentTarget.innerText;
+              updateInputTitle(title);
+              dispatchData({ ...draft, title });
+              setInputRefreshKey(getUUID());
+            },
+            onInput: (e) => {
+              if (isComposingRef.current) return;
+              const result = e.currentTarget.innerText;
+              updateInputTitle(result, true);
+            },
+            href: inputLink
+          },
+          inputTitleRef.current
+        )
+      ) : /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          disabled,
+          placeholder,
+          ref: ref2,
+          style: { flex: 1 },
+          className: "content-editable-clear link-editor-placeholder",
+          onCompositionStart: () => {
+            isComposingRef.current = true;
+          },
+          onCompositionEnd: (e) => {
+            isComposingRef.current = false;
+            const text = e.target.value;
+            updateInputTitle(text, true);
+          },
+          onInput: (e) => {
+            const input = e.target.value;
+            if (isComposingRef.current) return;
+            updateInputTitle(input, true);
+          },
+          onBlur: (e) => {
+            const title = e.currentTarget.innerText;
+            updateInputTitle(title);
+            dispatchData({ ...draft, title });
+          }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(Button, { disabled, type: "text", icon: /* @__PURE__ */ React.createElement(LinkOutlined, null), onClick: () => setOpen((v) => !v) })
+    )
+  );
+};
+
+const OptionItem = ({
+  ref,
+  onRemove,
+  dispatch,
+  value,
+  onChange,
+  onEnterKeyUp,
+  style = {},
+  disabled
+}) => {
+  const inputRef = useRef(null);
+  const { color, label } = value;
+  const { isDragging, attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: value.value });
+  const listStyle = {
+    ...style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    ...isDragging ? { position: "relative", zIndex: 9999 } : {}
+  };
+  useImperativeHandle(ref, () => {
+    return {
+      focusInput() {
+        inputRef.current?.focus();
+      }
+    };
+  });
+  return /* @__PURE__ */ React.createElement(Flex, { className: `option-item`, align: "center", style: listStyle, ref: setNodeRef, gap: "small" }, /* @__PURE__ */ React.createElement(HolderOutlined, { className: "drag-point", ...attributes, ...listeners }), /* @__PURE__ */ React.createElement(
+    FixedColorPicker,
+    {
+      value: color,
+      disabled,
+      onChange: (colorValue) => {
+        const prev = value;
+        const next = { ...value, color: colorValue.toHexString() };
+        onChange(next);
+        if (dispatch) dispatch({ type: "edit-value", next, prev });
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ref: inputRef,
+      className: "option-item-input",
+      value: label,
+      disabled,
+      onChange: (event) => {
+        const prev = value;
+        const next = { ...value, label: event.target.value };
+        onChange(next);
+        if (dispatch) dispatch({ type: "edit-value", next, prev });
+      },
+      onPressEnter: (e) => {
+        e.preventDefault();
+      },
+      onKeyUp: (e) => {
+        if (e.code === "Enter") onEnterKeyUp(e);
+      }
+    }
+  ), !disabled && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: "delete-button",
+      type: "text",
+      icon: /* @__PURE__ */ React.createElement(CloseOutlined, { className: "delete-icon" }),
+      onClick: () => {
+        onRemove(value);
+        if (dispatch) dispatch({ type: "delete", prev: value, next: null });
+      }
+    }
+  ));
+};
+
+const OptionEditor = ({
+  initialValues,
+  onValuesChange,
+  virtualConfig = { height: 600 },
+  dispatch,
+  style = { width: "100%" },
+  disabled
+}) => {
+  const lastInputNeedFocus = useRef(false);
+  const inputRefs = useRef([]);
+  const [virtualValues, setVirtualValues] = useState(
+    () => initialValues.map((item, index) => ({ ...item, ordinal: index }))
+  );
+  const updateVirtualValues = useCallback(
+    (values) => {
+      setVirtualValues(values);
+      if (onValuesChange) onValuesChange(values);
+    },
+    [onValuesChange]
+  );
+  const onItemChange = useCallback(
+    (value) => {
+      const newValues = virtualValues.map((item) => item.value === value.value ? value : item);
+      updateVirtualValues(newValues);
+    },
+    [virtualValues, updateVirtualValues]
+  );
+  const onItemRemove = useCallback(
+    ({ value }) => {
+      const newValues = virtualValues.filter((item) => item.value !== value);
+      updateVirtualValues(newValues);
+    },
+    [virtualValues, updateVirtualValues]
+  );
+  const onAddItem = useCallback(() => {
+    const id = getUUID();
+    const newValues = [
+      ...virtualValues,
+      { value: id, color: getRandomColor(), label: ``, ordinal: virtualValues.length }
+    ];
+    updateVirtualValues(newValues);
+    if (dispatch) {
+      dispatch({ type: "add", prev: null, next: newValues[newValues.length - 1] });
+    }
+  }, [virtualValues, updateVirtualValues, dispatch]);
+  const onDragEnd = ({ active, over }) => {
+    if (active && over && active.id !== over.id) {
+      const activeIndex = virtualValues.findIndex((i) => i.value === active.id);
+      const overIndex = virtualValues.findIndex((i) => i.value === over.id);
+      const newValues = arrayMove(virtualValues, activeIndex, overIndex);
+      updateVirtualValues(newValues);
+    }
+  };
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      // Disable smooth scrolling in Cypress automated tests
+      scrollBehavior: "Cypress" in window ? "auto" : void 0,
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const onEnterKeyUp = useCallback(
+    (value) => {
+      const { value: valueId } = value;
+      const last = virtualValues[virtualValues.length - 1];
+      if (last && last.value === valueId) onAddItem();
+      lastInputNeedFocus.current = true;
+    },
+    [onAddItem, virtualValues]
+  );
+  useEffect(() => {
+    if (lastInputNeedFocus.current) {
+      const lastValue = virtualValues[virtualValues.length - 1];
+      const lastInput = inputRefs.current[lastValue.ordinal];
+      if (lastInput) lastInput.focusInput();
+      lastInputNeedFocus.current = false;
+    }
+  }, [virtualValues]);
+  return /* @__PURE__ */ React.createElement(Space, { direction: "vertical", className: "option-editor", style: { ...style } }, /* @__PURE__ */ React.createElement(Flex, { className: `option-editor-title` }, /* @__PURE__ */ React.createElement(Button, { type: "text", onClick: onAddItem, disabled }, /* @__PURE__ */ React.createElement(PlusOutlined, null), "\u6DFB\u52A0\u9009\u9879")), /* @__PURE__ */ React.createElement(
+    DndContext,
+    {
+      onDragEnd,
+      sensors: disabled ? [] : sensors,
+      modifiers: [restrictToVerticalAxis],
+      id: "list-drag-sorting-handler"
+    },
+    /* @__PURE__ */ React.createElement(SortableContext, { items: virtualValues.map((item) => item.value), strategy: verticalListSortingStrategy }, /* @__PURE__ */ React.createElement(
+      VirtualList,
+      {
+        className: "option-editor-list",
+        width: "100%",
+        height: virtualConfig.height ?? 600,
+        overscanCount: 10,
+        itemCount: virtualValues.length,
+        itemSize: 40,
+        scrollDirection: "vertical",
+        renderItem: (item) => {
+          const value = virtualValues[item.index];
+          return /* @__PURE__ */ React.createElement(
+            OptionItem,
+            {
+              ref: (e) => {
+                inputRefs.current[item.index] = e;
+              },
+              value,
+              dispatch,
+              onChange: onItemChange,
+              onRemove: onItemRemove,
+              style: item.style,
+              onEnterKeyUp: () => onEnterKeyUp(value),
+              key: value.value,
+              disabled
+            }
+          );
+        }
+      }
+    ))
+  ));
+};
+
+const OptionInput = ({
+  option,
+  optionPosition,
+  inputValue,
+  setInputValue,
+  updateOptionLabel
+}) => {
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const inputRef = useRef(null);
+  useMount(() => {
+    inputRef.current?.focus();
+  });
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      type: "text",
+      ref: inputRef,
+      onClick: (e) => e.stopPropagation(),
+      style: { width: optionPosition.width, height: optionPosition.height },
+      suffix: /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          FixedColorPicker,
+          {
+            value: option.color,
+            open: isColorPickerOpen,
+            rootClassName: "selector-color-picker",
+            onOpenChange: (value) => {
+              setIsColorPickerOpen(value);
+            },
+            onChange: (newColor) => {
+              setIsColorPickerOpen(false);
+              updateOptionLabel(inputValue, newColor.toHexString());
+            }
+          }
+        )
+      ),
+      value: inputValue,
+      onPressEnter: () => updateOptionLabel(inputValue),
+      onChange: (e) => setInputValue(e.target.value)
+    }
+  );
+};
+
+const COLOR_BG_OPTION_HOVER = "#1f232914";
+const SelectOptionItem = ({
+  editValue,
+  option,
+  multiple = true,
+  onCreate,
+  onChange,
+  filterOptions,
+  onOptionChange,
+  onSelect,
+  fontSize = 13,
+  style
+}) => {
+  const [isEdit, setIsEdit] = useState(false);
+  const [inputValue, setInputValue] = useState(option.label);
+  const [isHovered, setIsHovered] = useState(false);
+  const containerRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const loadingRef = useRef(false);
+  const isExist = useMemo(
+    () => filterOptions.some((item) => inputValue.trim().toLowerCase() === item.label.toLowerCase()),
+    [filterOptions, inputValue]
+  );
+  const [optionPosition, setOptionPosition] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const isSelected = useMemo(() => editValue.map((item) => item.value).includes(option.value), [editValue, option]);
+  const handleClose = useCallback(() => {
+    setIsEdit(false);
+  }, []);
+  const updateOptionLabel = (newLabel, newColor) => {
+    setIsEdit(false);
+    onOptionChange?.({ ...option, label: newLabel, color: newColor || option.color });
+  };
+  const createOptionLabel = () => {
+    if (!onCreate) {
+      handleItemSelect(option);
+      return;
+    }
+    if (loadingRef.current) return;
+    setLoading(true);
+    loadingRef.current = true;
+    onCreate(option).then((newOption) => {
+      handleItemSelect(newOption);
+    }).finally(() => {
+      setLoading(false);
+      loadingRef.current = false;
+    });
+  };
+  const handleItemSelect = useCallback(
+    (option2) => {
+      if (multiple) {
+        const newSelected = isSelected ? editValue : [...editValue, option2];
+        onChange?.(newSelected);
+      } else {
+        onChange?.([option2]);
+      }
+      onSelect?.(option2);
+    },
+    [multiple, onSelect, isSelected, editValue, onChange]
+  );
+  return /* @__PURE__ */ React.createElement(Flex, { style: { padding: "0px 16px 0px 4px", ...style } }, /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      ref: containerRef,
+      className: "option-item",
+      onMouseEnter: (e) => {
+        setIsHovered(true);
+        e.currentTarget.style.backgroundColor = COLOR_BG_OPTION_HOVER;
+      },
+      onMouseLeave: (e) => {
+        setIsHovered(false);
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      onClick: () => {
+        if (!isExist) return createOptionLabel();
+        handleItemSelect(option);
+      }
+    },
+    !isExist ? /* @__PURE__ */ React.createElement(Flex, { gap: 8, style: { width: "100%" } }, /* @__PURE__ */ React.createElement(Spin, { spinning: loading }, /* @__PURE__ */ React.createElement(Typography.Text, null, "\u521B\u5EFA\u9009\u9879"), /* @__PURE__ */ React.createElement(Typography.Text, { strong: true }, option.label))) : /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", align: "center", style: { width: "100%" } }, /* @__PURE__ */ React.createElement(CustomTag, { color: option.color, label: option.label, fontSize }), isHovered && /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        className: "edit-button",
+        type: "text",
+        icon: /* @__PURE__ */ React.createElement(EllipsisOutlined, { className: "edit-icon" }),
+        style: { width: 22, height: 22, marginRight: 8 },
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsEdit(true);
+          setOptionPosition({
+            x: containerRef.current.getBoundingClientRect().left,
+            y: containerRef.current.getBoundingClientRect().top,
+            width: containerRef.current.getBoundingClientRect().width,
+            height: containerRef.current.getBoundingClientRect().height
+          });
+        }
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      title: "",
+      afterClose: handleClose,
+      rootClassName: "option-item-modal",
+      open: isEdit,
+      footer: null,
+      width: optionPosition.width,
+      maskTransitionName: "",
+      transitionName: "",
+      closable: false,
+      maskClosable: true,
+      onCancel: () => updateOptionLabel(inputValue),
+      style: { top: optionPosition.y, left: optionPosition.x, transformOrigin: "top left", margin: "unset" }
+    },
+    /* @__PURE__ */ React.createElement(
+      OptionInput,
+      {
+        option,
+        optionPosition,
+        inputValue,
+        setInputValue,
+        updateOptionLabel
+      }
+    )
+  ));
+};
+
+const BORDER_SECONDARY_COLOR = "#f0f0f0";
+const PopoverContent = ({
+  editValue,
+  popoverRef,
+  inputRef,
+  open,
+  width,
+  searchText,
+  filteredOptions,
+  listHeight,
+  itemHeight,
+  multiple,
+  handleSearch,
+  onChange,
+  onSelect,
+  onCreate,
+  onOptionChange,
+  fontSize
+}) => {
+  const canCreate = useMemo(() => {
+    if (!searchText.trim()) return false;
+    const lowerSearch = searchText.trim().toLowerCase();
+    const res = filteredOptions.some((item) => item.label.toLowerCase() === lowerSearch);
+    return !res;
+  }, [filteredOptions, searchText]);
+  const newOption = useMemo(() => {
+    if (canCreate) {
+      return { value: getUUID(), label: searchText, color: getRandomColor() };
+    }
+    return null;
+  }, [searchText, canCreate]);
+  useEffect(() => {
+    if (open) {
+      inputRef.current?.focus();
+    }
+  }, [open, inputRef]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: popoverRef,
+      className: "select-editor-popover-content",
+      style: {
+        width
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { border: "none" } }, /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        ref: inputRef,
+        placeholder: "\u67E5\u627E\u6216\u521B\u5EFA\u9009\u9879",
+        autoFocus: true,
+        value: searchText,
+        onChange: handleSearch,
+        contentEditable: true
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "virtual-list-container",
+        style: {
+          height: listHeight,
+          overflow: "hidden",
+          borderTop: `1px solid ${BORDER_SECONDARY_COLOR}`
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        VirtualList,
+        {
+          width: "100%",
+          height: listHeight,
+          itemCount: !canCreate ? filteredOptions.length : filteredOptions.length + 1,
+          itemSize: itemHeight,
+          renderItem: ({ index, style }) => /* @__PURE__ */ React.createElement(
+            SelectOptionItem,
+            {
+              filterOptions: filteredOptions,
+              editValue,
+              option: filteredOptions[index] ?? newOption,
+              style,
+              key: filteredOptions[index]?.value ?? newOption?.value,
+              multiple,
+              fontSize,
+              onCreate,
+              onChange,
+              onSelect,
+              onOptionChange
+            }
+          ),
+          overscanCount: 5,
+          style: { outline: "none" }
+        }
+      )
+    )
+  );
+};
+
+const Select = ({
+  listHeight = 300,
+  itemHeight = 32,
+  emptyText = "\u6682\u65E0\u6570\u636E",
+  multiple = true,
+  options = [],
+  value: editValue = [],
+  placeholder,
+  width,
+  onChange,
+  onSelect,
+  onOptionChange,
+  onOptionCreate,
+  fontSize = 13,
+  onDeselect,
+  tagAreaHeight,
+  tagAreaStyle,
+  showDownIcon = false
+}) => {
+  const [searchText, setSearchText] = useState("");
+  const popoverRef = useRef(null);
+  const cellRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const filteredOptions = useMemo(() => {
+    if (!searchText.trim()) return options;
+    const lowerSearch = searchText.toLowerCase();
+    const findOptions = options.filter((item) => item.label.toLowerCase().includes(lowerSearch));
+    return findOptions;
+  }, [options, searchText]);
+  const selectedValue = useMemo(() => {
+    if (!editValue.length) return [];
+    const findItem = (item) => options.find((opt) => opt.value === item.value);
+    return editValue.map((item) => findItem(item)).filter(Boolean);
+  }, [editValue, options]);
+  const handleCreate = async (option) => {
+    const newOption = await onOptionCreate?.(option) ?? option;
+    setSearchText("");
+    return newOption;
+  };
+  const handleSearch = (e) => {
+    setSearchText(e.target.value);
+  };
+  const handleSelect = (option) => {
+    onSelect?.(option);
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+    if (cellRef.current && !multiple) {
+      cellRef.current.click();
+    }
+  };
+  const handleDeselect = (option) => {
+    setOpen(false);
+    onDeselect?.(option);
+    const filteredValue = editValue.filter((item) => item.value !== option.value);
+    onChange?.(filteredValue);
+  };
+  useEffect(() => {
+    if (cellRef.current) {
+      cellRef.current.scrollTop = cellRef.current.scrollHeight;
+    }
+  }, [selectedValue]);
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: "click",
+      open,
+      onOpenChange: setOpen,
+      destroyOnHidden: true,
+      content: /* @__PURE__ */ React.createElement(
+        PopoverContent,
+        {
+          editValue: selectedValue,
+          onChange,
+          popoverRef,
+          inputRef,
+          width: width || 163,
+          open,
+          filteredOptions,
+          searchText,
+          handleSearch,
+          listHeight,
+          itemHeight,
+          emptyText,
+          multiple,
+          onSelect: handleSelect,
+          onCreate: handleCreate,
+          onOptionChange,
+          fontSize
+        }
+      ),
+      rootClassName: "multi-select-editor-popover-root",
+      className: "multi-select-editor-popover",
+      arrow: false,
+      align: {
+        points: ["tl", "bl"],
+        // tl(top-left): 将【pop弹窗】左上角 与 Input bl(bottom-left) 左下角对齐
+        offset: [0, 10]
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          maxHeight: 80,
+          padding: "4px 0px 4px 8px",
+          overflowY: "hidden",
+          ...tagAreaStyle
+        },
+        className: "tag-area",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: cellRef,
+          className: "tag-area-content",
+          style: {
+            minHeight: tagAreaHeight ? tagAreaHeight + 4 - 8 - 4 : "unset",
+            maxHeight: 80 - 8 - 4,
+            overflowY: "auto"
+          }
+        },
+        placeholder && !selectedValue.length ? /* @__PURE__ */ React.createElement("div", { className: "placeholder" }, placeholder) : /* @__PURE__ */ React.createElement(Flex, { gap: 8, align: "flex-start", style: { width: "100%" } }, /* @__PURE__ */ React.createElement(Flex, { gap: 8, wrap: true, style: { width: showDownIcon ? "calc(100% - 32px)" : "100%" } }, selectedValue?.map((selectedItem) => /* @__PURE__ */ React.createElement(
+          CustomTag,
+          {
+            label: selectedItem.label,
+            color: selectedItem.color,
+            key: selectedItem.value,
+            closable: true,
+            onClose: () => handleDeselect(selectedItem),
+            fontSize
+          }
+        ))), showDownIcon && /* @__PURE__ */ React.createElement("div", { className: "icon-occupy" }))
+      ),
+      showDownIcon && /* @__PURE__ */ React.createElement(
+        CaretDownOutlined,
+        {
+          className: "caret-down-icon",
+          style: { position: "absolute", right: 4, top: tagAreaHeight ? tagAreaHeight / 2 - 8 : 0 }
+        }
+      )
+    )
+  );
+};
+
+const computeSHA256 = async (file) => {
+  const buffer = await file.arrayBuffer();
+  const wordArray = CryptoJS.lib.WordArray.create(buffer);
+  const hash = CryptoJS.SHA256(wordArray);
+  return hash.toString(CryptoJS.enc.Hex);
+};
+
+const UploadListInner = (props) => {
+  const {
+    maxCount = 1,
+    fileList: initialFileList = [],
+    uploadProps,
+    onChange,
+    onPreview,
+    accept,
+    onRemove,
+    beforeUpload,
+    uploadFunction,
+    disabled
+  } = props;
+  const [fileList, setFileList] = useState(initialFileList);
+  return /* @__PURE__ */ React.createElement(
+    Upload,
+    {
+      name: "file",
+      customRequest: async (options) => {
+        const { file: fileInner, onSuccess, onError, onProgress } = options;
+        const file = fileInner;
+        try {
+          const hash = await computeSHA256(file);
+          const path = `upload/${hash}/${file.name}`;
+          await uploadFunction({ file, type: file.type || "application/octet-stream" }, path, ({ percent }) => {
+            onProgress?.({ percent });
+          });
+          onSuccess?.(path);
+        } catch (err) {
+          onError?.(err);
+        }
+      },
+      fileList,
+      onChange: (info) => {
+        const newFileList = info.fileList.map((i) => {
+          if (i.status === "done" && i.response) {
+            return {
+              ...i,
+              url: i.response
+            };
+          }
+          return i;
+        });
+        setFileList(newFileList);
+        onChange?.(info);
+      },
+      onRemove: (file) => {
+        const newFileList = fileList.filter((i) => i.uid !== file.uid);
+        setFileList(newFileList);
+        onRemove?.(file);
+      },
+      onPreview: (file) => {
+        onPreview?.({
+          name: file.name,
+          path: file.url || ""
+        });
+      },
+      maxCount,
+      ...uploadProps,
+      accept,
+      beforeUpload
+    },
+    /* @__PURE__ */ React.createElement(Button, { icon: /* @__PURE__ */ React.createElement(UploadOutlined, null), disabled: disabled ? true : maxCount <= (fileList?.length || 0) }, "\u4E0A\u4F20")
+  );
+};
+
+const UploadList = ({
+  onlyOne,
+  value,
+  accept = "",
+  maxCount = 5,
+  onChange,
+  onPreview,
+  uploadFunction,
+  uploadProps,
+  disabled
+}) => {
+  const fileList = useMemo(() => {
+    if (onlyOne) {
+      if (!value || !value.length) return [];
+      const fileName = value[0].name;
+      return [
+        {
+          uid: "0",
+          name: fileName,
+          status: "done",
+          url: value[0].path
+        }
+      ];
+    } else {
+      if (!value || !value.length) return [];
+      return value.map((i, index) => {
+        const fileName = i.name;
+        return {
+          uid: index.toString(),
+          name: fileName,
+          status: "done",
+          url: i.path
+        };
+      });
+    }
+  }, [value, onlyOne]);
+  const handleChange = (info) => {
+    const { fileList: newFileList } = info;
+    const files = [];
+    newFileList.forEach((i) => {
+      if (i.status === "done" && i.response) {
+        files.push({
+          name: i.name,
+          path: i.response
+        });
+      } else if (i.status === "done" && i.url) {
+        files.push({
+          name: i.name,
+          path: i.url || ""
+        });
+      }
+      return i;
+    });
+    onChange?.(files);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    UploadListInner,
+    {
+      uploadProps,
+      maxCount,
+      fileList,
+      onChange: handleChange,
+      onPreview,
+      uploadFunction,
+      accept,
+      disabled
+    }
+  ));
+};
+
+export { AvatarPopoverContent, BORDER_SECONDARY_COLOR, BlinkButton, COLOR_BG_OPTION_HOVER, ColorCheckboxGroup, ColorRadioGroup, CustomTag, FixedColorPicker, IconFont, LinkEdit, OptionEditor, OptionInput, OptionItem, PopoverContent, Select, SelectOptionItem, UploadList, UploadListInner, UserLoadingSkeleton, computeSHA256, focusToEnd, getRandomColor, isFocused };