@enableai-base/grid-layout 1.0.0

package/dist/grid-layout.esm-bundler.mjs

@@ -0,0 +1,1772 @@
+/**
+* @enableai-base/grid-layout v1.0.0
+* (c) 2024-present Enableai
+* @license Proprietary
+**/
+import React, { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useLayoutEffect } from 'react';
+import { Spin, Button, Flex, Dropdown, Typography, Popover, Avatar, DatePicker, Input, Skeleton, Drawer, Tabs, Tooltip, Select as Select$1, Space, Divider, Tag, Form, Menu } from 'antd';
+import { useMount, createContextWithProvider, useDebounce } from '@enableai-sdk-common/react-hooks';
+import { Base64 } from 'js-base64';
+import { DeleteOutlined, MoreOutlined, HolderOutlined, CaretDownOutlined, UpOutlined, DownOutlined, CloseOutlined, LeftOutlined, RightOutlined, LoadingOutlined, SearchOutlined, QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { UploadList, IconFont, AvatarPopoverContent, LinkEdit, Select } from '@enableai-base/ui';
+import { ProFormText, ProForm, ProFormItem, ProFormDependency, ProFormList } from '@ant-design/pro-components';
+import { TOOL_ICON, getColorByStr, parseDateFormat, inferShowTimeFromFormat, TZ_LABEL, formatValue, formatDuration, formatTime } from '@enableai-base/core';
+import dayjs from 'dayjs';
+import ReactMonacoEditor, { loader } from '@monaco-editor/react';
+import { BaseModal, DragDiv } from '@enableai-sdk-ui/base-modal';
+import { isMatch, debounce, isEqual, omitBy, isUndefined } from 'lodash';
+import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
+
+class ObjectURLManager {
+  constructor() {
+    this.store = [];
+  }
+  /**
+   * 为指定的 Blob 或 MediaSource 创建对象 URL 并存储。
+   *
+   * @param {Blob | MediaSource} obj - 需要创建对象 URL 的数据对象。
+   * @returns {string} 创建的对象 URL。
+   */
+  create(obj) {
+    const src = window.URL.createObjectURL(obj);
+    this.store.push(src);
+    return src;
+  }
+  /**
+   * 撤销所有已创建的对象 URL，释放内存。
+   */
+  destroy() {
+    this.store.forEach((url) => window.URL.revokeObjectURL(url));
+    this.store = [];
+  }
+}
+
+const AttachmentPreview = ({ path, s3PathParser }) => {
+  const mode = "light";
+  const [iframeSrc, setIframeSrc] = useState("");
+  useMount(() => {
+    s3PathParser(path).then((realPath) => {
+      setIframeSrc(
+        window.location.origin + "/api/proxy/kkfileview/onlinePreview?url=" + encodeURIComponent(Base64.encode(realPath))
+      );
+    });
+  });
+  if (!iframeSrc) return /* @__PURE__ */ React.createElement(Spin, null);
+  return /* @__PURE__ */ React.createElement(AttachmentPreviewInner, { iframeSrc, mode });
+};
+const styleId = "iframe-style-id";
+const AttachmentPreviewInner = ({ iframeSrc, mode }) => {
+  const iframeRef = useRef(null);
+  const getStyleElement = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+    if (!iframeDocument) return;
+    let style = iframeDocument.getElementById(styleId);
+    if (!style) {
+      style = iframeDocument.createElement("style");
+      style.id = styleId;
+      iframeDocument.head.appendChild(style);
+    }
+    return style;
+  }, []);
+  const applyStyles = useCallback(() => {
+    const isDark = mode === "dark";
+    const style = getStyleElement();
+    if (!style) return;
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+    if (!iframeDocument) return;
+    const textData = iframeDocument.getElementById("textData");
+    if (textData) {
+      style.innerHTML = `
+          .panel-heading {
+            display: none;
+          }
+          body, .container, .panel-heading, .panel-body, .divContent {
+            background-color: ${isDark ? "#1F1F1F" : "#F5F5F5"} !important;
+            color: ${isDark ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.88)"} !important;
+          }
+        `;
+    }
+  }, [mode, getStyleElement]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    iframe.addEventListener("load", applyStyles);
+    return () => iframe.removeEventListener("load", applyStyles);
+  }, [iframeSrc]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    applyStyles();
+  }, [applyStyles]);
+  if (!iframeSrc) return null;
+  return /* @__PURE__ */ React.createElement("iframe", { ref: iframeRef, src: iframeSrc, style: { width: "100%", height: "100%", border: "none" } });
+};
+
+const AttachmentEditor = ({
+  value,
+  s3PathParser,
+  uploadFunction,
+  onChange,
+  onPreview,
+  disabled
+}) => {
+  const file = useMemo(() => value?.at(0), [value]);
+  if (!file)
+    return /* @__PURE__ */ React.createElement(
+      UploadList,
+      {
+        disabled,
+        uploadFunction,
+        maxCount: 1,
+        onChange,
+        onPreview
+      }
+    );
+  else {
+    if (!s3PathParser) throw new Error("[AttachmentEditor] s3PathParser is required");
+    return /* @__PURE__ */ React.createElement("div", { style: { width: "100%", height: "100%", position: "relative" } }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "default",
+        variant: "filled",
+        shape: "circle",
+        disabled,
+        style: { position: "absolute", right: 10, top: 10, color: "var(--ant-color-text-secondary)" },
+        size: "small",
+        icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
+        onClick: () => onChange?.([])
+      }
+    ), /* @__PURE__ */ React.createElement(AttachmentPreview, { path: file.path, s3PathParser }));
+  }
+};
+
+function findAvailablePosition(layout, newW, newH, cols = 12) {
+  if (layout.length === 0) return { x: 0, y: 0 };
+  const maxY = Math.max(...layout.map((item) => item.y + item.h), 0);
+  for (let y = 0; y <= maxY + 10; y++) {
+    for (let x = 0; x <= cols - newW; x++) {
+      const newItem = { x, y, w: newW, h: newH };
+      const overlap = layout.some((item) => isOverlap(item, newItem));
+      if (!overlap) {
+        return { x, y };
+      }
+    }
+  }
+  return { x: 0, y: maxY + 1 };
+}
+function isOverlap(a, b) {
+  return !(a.x + a.w <= b.x || // a 在 b 左边
+  b.x + b.w <= a.x || // b 在 a 左边
+  a.y + a.h <= b.y || // a 在 b 上方
+  b.y + b.h <= a.y);
+}
+function generateCrossDashedBase64(width, height, x, y, padding = 1) {
+  const lineColor = "rgba(160, 160, 160, 0.25)";
+  const lineWidth = 2;
+  const dashPattern = [10, 5];
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth = lineWidth;
+  ctx.setLineDash(dashPattern);
+  const start = padding;
+  const endX = x - padding;
+  const endY = y - padding;
+  ctx.beginPath();
+  ctx.moveTo(start, start);
+  ctx.lineTo(endX, start);
+  ctx.moveTo(endX, start);
+  ctx.lineTo(endX, endY);
+  ctx.moveTo(endX, endY);
+  ctx.lineTo(start, endY);
+  ctx.moveTo(start, endY);
+  ctx.lineTo(start, start);
+  ctx.stroke();
+  const base64 = canvas.toDataURL("image/png");
+  return base64;
+}
+
+const Dashboard = ({
+  dashboardData,
+  cols = 12,
+  gapX = 10,
+  gapY = 10,
+  rowHeight = 50,
+  children,
+  onLayoutChange,
+  onDrop,
+  droppingItem,
+  mode = "editable"
+}) => {
+  const CustomReactGridLayout = useMemo(() => WidthProvider(ReactGridLayout), []);
+  const innerOnLayoutChange = useCallback(
+    (layout) => {
+      const layoutsBefore = dashboardData ?? [];
+      if (layout.length !== layoutsBefore.length) return;
+      const isStatic = layout.every((item, index) => isMatch(item, layoutsBefore[index]));
+      if (isStatic) return;
+      onLayoutChange?.(layout);
+    },
+    [dashboardData, onLayoutChange]
+  );
+  const gridImgRef = useRef({
+    width: 0,
+    height: 0,
+    gapX,
+    gapY,
+    url: ""
+  });
+  const containerRef = useRef(null);
+  const innerRef = useRef(null);
+  const [showScroll, setShowScroll] = useState(false);
+  const [resizing, setResizing] = useState(false);
+  const onDragStart = () => {
+    const gridImg = gridImgRef.current;
+    const widthProvider = innerRef.current;
+    const elementRef = widthProvider?.elementRef?.current;
+    if (!elementRef) return;
+    setResizing(true);
+    setShowScroll(true);
+    const width = (elementRef.clientWidth - gapX) / cols;
+    const height = rowHeight + gapY;
+    const gX = width - gapX;
+    const gY = rowHeight;
+    let imageUrl = gridImg.url;
+    if (gridImg.width !== width || gridImg.height !== height || gridImg.gapX !== gX || gridImg.gapY !== gY) {
+      const imageBase64 = generateCrossDashedBase64(width, height, gX, gY);
+      if (!imageBase64) return;
+      imageUrl = imageBase64;
+      gridImgRef.current = { width, height, gapX: gX, gapY: gY, url: imageBase64 };
+    }
+    elementRef.style.backgroundImage = `url(${imageUrl})`;
+    elementRef.style.backgroundPosition = `${gapX}px ${gapY}px`;
+    elementRef.style.backgroundSize = `${width}px ${height}px`;
+  };
+  const onDragStop = () => {
+    const widthProvider = innerRef.current;
+    const elementRef = widthProvider?.elementRef?.current;
+    const container = containerRef.current;
+    if (!elementRef || !container) return;
+    setResizing(false);
+    elementRef.style.backgroundImage = "";
+    if (container.clientHeight < elementRef.clientHeight - 40) {
+      setShowScroll(true);
+    } else {
+      setShowScroll(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: `dashboard-container ${showScroll ? "show-scroll" : ""}`, ref: containerRef }, /* @__PURE__ */ React.createElement(
+    CustomReactGridLayout,
+    {
+      isDroppable: true,
+      onDrop: (...props) => {
+        const widthProvider = innerRef.current;
+        const elementRef = widthProvider?.elementRef?.current;
+        elementRef.style.backgroundImage = "";
+        onDrop?.(...props);
+      },
+      droppingItem,
+      isDraggable: mode === "editable",
+      ref: innerRef,
+      className: `dashboard-layout ${resizing ? "dashboard-item-resizing" : ""}`,
+      cols,
+      rowHeight,
+      margin: [gapX, gapY],
+      containerPadding: [gapX, gapY],
+      layout: dashboardData,
+      useCSSTransforms: true,
+      allowOverlap: false,
+      onDragStart,
+      onDragStop,
+      onResizeStart: onDragStart,
+      onResizeStop: onDragStop,
+      resizeHandle: mode === "editable" && /* @__PURE__ */ React.createElement("div", { className: "resize-handle" }),
+      style: { minHeight: "100%" },
+      onLayoutChange: innerOnLayoutChange
+    },
+    children
+  ));
+};
+
+const DashboardItem = ({
+  id,
+  className = "",
+  isActive = false,
+  title,
+  menuItems = [],
+  children,
+  style,
+  onSelect,
+  onMouseDown,
+  onMouseUp,
+  onMenuClick,
+  mode = "editable"
+}, ref) => {
+  const hasMenu = !!menuItems?.length;
+  const titleInfo = useMemo(() => {
+    if (typeof title === "string") {
+      return /* @__PURE__ */ React.createElement("span", { className: "title-text" }, title);
+    } else {
+      return title;
+    }
+  }, [title]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: `dashboard-item ${isActive ? "isActive" : ""} ${className} ${mode}`,
+      style,
+      onMouseDown: (e) => onSelect?.(e, id)
+    },
+    /* @__PURE__ */ React.createElement(Flex, { className: `item-head`, onMouseDown, onMouseUp }, /* @__PURE__ */ React.createElement(Flex, { className: "head-inner", align: "center", justify: "space-between" }, /* @__PURE__ */ React.createElement(Flex, { className: "head-title", align: "center" }, titleInfo), hasMenu && mode === "editable" && /* @__PURE__ */ React.createElement(Flex, { className: "head-menu" }, /* @__PURE__ */ React.createElement(
+      Dropdown,
+      {
+        trigger: ["click"],
+        placement: "bottomRight",
+        popupRender: (menu) => /* @__PURE__ */ React.createElement("div", { onMouseDown: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation() }, menu),
+        menu: {
+          items: menuItems,
+          onClick: (info) => {
+            if (onMenuClick) onMenuClick(info, id);
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          type: "default",
+          size: "small",
+          icon: /* @__PURE__ */ React.createElement(MoreOutlined, null),
+          onMouseDown: (e) => {
+            e.stopPropagation();
+            if (onSelect) onSelect(e, id);
+          }
+        }
+      )
+    ))), mode === "editable" && /* @__PURE__ */ React.createElement("div", { className: `drag-icon` }, /* @__PURE__ */ React.createElement(HolderOutlined, { rotate: 90 }))),
+    /* @__PURE__ */ React.createElement(Flex, { className: "item-body", align: "center", justify: "center" }, children)
+  );
+};
+var DashboardItem$1 = forwardRef(DashboardItem);
+
+const { createUseContext, Provider: DetailsDrawerProvider } = createContextWithProvider(
+  ({ uploadFunction, columnsData, onClick, onPreview }) => {
+    return {
+      uploadFunction,
+      columnsData,
+      onClick,
+      onPreview
+    };
+  }
+);
+const useDetailsDrawerContext = createUseContext();
+
+const RowLabel = ({ columnData }) => {
+  const { onClick: onClickTab } = useDetailsDrawerContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, onClickTab ? /* @__PURE__ */ React.createElement("button", { className: "text-btn-container title-container", onClick: (e) => onClickTab(e, columnData.field) }, /* @__PURE__ */ React.createElement("div", { className: "icon-wrapper" }, /* @__PURE__ */ React.createElement(IconFont, { name: TOOL_ICON[columnData.tool], size: 16, color: "#000" })), /* @__PURE__ */ React.createElement(Typography.Text, { className: "text-content" }, columnData.title || ""), /* @__PURE__ */ React.createElement("div", { className: "arrow-icon" }, /* @__PURE__ */ React.createElement(CaretDownOutlined, null))) : /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 4, className: "title-container" }, /* @__PURE__ */ React.createElement("div", { className: "icon-wrapper" }, /* @__PURE__ */ React.createElement(IconFont, { name: TOOL_ICON[columnData.tool], size: 16, color: "#000" })), /* @__PURE__ */ React.createElement(Typography.Text, { className: "text-content" }, columnData.title || "")));
+};
+
+const NormalAvatar = (props) => {
+  const { id, name, avatar, request } = props;
+  const backgroundColor = useMemo(() => name === "\u65E0" ? "#D9D9D9" : getColorByStr(name?.slice(-2) || ""), [name]);
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8 }, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      content: id !== "-2" ? /* @__PURE__ */ React.createElement(AvatarPopoverContent, { id, column: { request } }) : null,
+      placement: "top",
+      autoAdjustOverflow: false,
+      mouseEnterDelay: 0.3,
+      mouseLeaveDelay: 0.3,
+      arrow: { pointAtCenter: true },
+      getPopupContainer: () => document.body
+    },
+    /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 4 }, avatar ? /* @__PURE__ */ React.createElement(Avatar, { src: avatar }, name?.slice(-2)) : /* @__PURE__ */ React.createElement(Avatar, { style: { backgroundColor } }, name?.slice(-2)), /* @__PURE__ */ React.createElement("span", null, name))
+  ));
+};
+const FormAvatar = (props) => {
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8, justify: "flex-start", wrap: "wrap" }, props.value?.map((item, index) => /* @__PURE__ */ React.createElement(NormalAvatar, { key: index, ...item, request: props.request })) || []);
+};
+
+const FormDateTimePicker = ({
+  value,
+  onChange,
+  format = "YYYY-MM-DD",
+  placeholder,
+  disabled
+}) => {
+  const { baseFormat, showGmt8 } = parseDateFormat(format);
+  const showTimeConfig = inferShowTimeFromFormat(baseFormat);
+  return /* @__PURE__ */ React.createElement(
+    DatePicker,
+    {
+      value: value ? dayjs(value) : void 0,
+      format: (date) => {
+        if (!date) return "";
+        const text = date.format(baseFormat);
+        return showGmt8 ? `${text} (${TZ_LABEL})` : text;
+      },
+      placeholder: placeholder ?? (showGmt8 ? `${baseFormat} (${TZ_LABEL})` : baseFormat),
+      showTime: showTimeConfig,
+      disabled,
+      style: { width: "100%" },
+      onChange: (date) => {
+        onChange?.(date?.format(baseFormat) ?? void 0);
+      }
+    }
+  );
+};
+
+const FormInputNumber = ({
+  value,
+  onChange,
+  format = "one_decimal_decimal",
+  placeholder,
+  disabled
+}) => {
+  const [focused, setFocused] = useState(false);
+  const [innerValue, setInnerValue] = useState("");
+  useEffect(() => {
+    if (!focused) {
+      setInnerValue(formatValue(value ?? "", format));
+    } else {
+      setInnerValue(value?.toString() ?? "");
+    }
+  }, [value, focused, format]);
+  const handleBlur = () => {
+    setFocused(false);
+    const num = Number(innerValue.replace(/,/g, "").replace("%", ""));
+    onChange?.(Number.isNaN(num) ? void 0 : num);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: innerValue,
+      placeholder,
+      disabled,
+      onFocus: () => {
+        setFocused(true);
+        setInnerValue(value?.toString() ?? "");
+      },
+      onBlur: handleBlur,
+      onChange: (e) => {
+        const val = e.target.value;
+        setInnerValue(val);
+      }
+    }
+  );
+};
+
+loader.config({
+  paths: {
+    // vs: '/monaco-assets/vs',
+  }
+  // 'vs/nls': { availableLanguages: { '*': 'zh-cn' } },
+});
+const JsonEditor = ({ value, onChange, dark, disabled }) => {
+  const monacoRef = useRef(null);
+  const monacoEditorRef = useRef(null);
+  const format = useCallback(() => {
+    monacoEditorRef.current?.getAction("editor.action.formatDocument")?.run();
+  }, []);
+  const options = useMemo(() => {
+    return {
+      lineNumbers: "off",
+      minimap: { enabled: false },
+      readOnly: !!disabled
+    };
+  }, [disabled]);
+  return /* @__PURE__ */ React.createElement(
+    ReactMonacoEditor,
+    {
+      height: "100%",
+      width: "100%",
+      defaultLanguage: "json",
+      value,
+      loading: /* @__PURE__ */ React.createElement(Spin, null),
+      theme: dark ? "vs-dark" : "light",
+      onChange,
+      options,
+      beforeMount: (monaco) => {
+        monacoRef.current = monaco;
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          schemas: [
+            {
+              uri: "test-schema",
+              fileMatch: ["*"],
+              schema: {
+                $schema: "http://json-schema.org/draft-07/schema#",
+                type: "object"
+              }
+            }
+          ]
+        });
+        format();
+      },
+      onMount: (monacoEditor) => {
+        monacoEditorRef.current = monacoEditor;
+        format();
+      }
+    }
+  );
+};
+
+const FormJsonEditor = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        minHeight: 100,
+        height: 100,
+        maxHeight: 200
+      }
+    },
+    /* @__PURE__ */ React.createElement(JsonEditor, { ...props })
+  );
+};
+
+const FormLinkEdit = (props) => {
+  return /* @__PURE__ */ React.createElement(LinkEdit, { popoverStyles: { width: 440 }, placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", ...props });
+};
+
+const FormMultiSelect = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      width: 440,
+      ...props,
+      placeholder: props.placeholder || "\u8BF7\u9009\u62E9",
+      multiple: true,
+      tagAreaStyle: { cursor: "pointer" }
+    }
+  );
+};
+
+const FormSingleSelect = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      width: 440,
+      ...props,
+      multiple: false,
+      placeholder: props.placeholder || "\u8BF7\u9009\u62E9",
+      tagAreaStyle: { cursor: "pointer" }
+    }
+  );
+};
+
+const FormTimeLen = (props) => {
+  const { value, onChange, ...fieldProps } = props;
+  const [inner, setInner] = useState("");
+  useEffect(() => {
+    if (value === void 0 || value === null) {
+      setInner("");
+    } else {
+      setInner(formatDuration(Number(value)));
+    }
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      ...fieldProps,
+      value: inner,
+      onFocus: () => {
+        setInner(value != null ? String(value) : "");
+      },
+      onChange: (e) => setInner(e.target.value),
+      onBlur: () => {
+        const seconds = Number(inner);
+        if (!isNaN(seconds)) {
+          onChange?.(seconds);
+          setInner(formatTime(seconds));
+        } else {
+          setInner(value != null ? formatTime(Number(value)) : "");
+        }
+      }
+    }
+  );
+};
+
+const FormUpload = (props) => {
+  const { uploadFunction, onPreview } = useDetailsDrawerContext();
+  const { format } = props;
+  let accept = "";
+  if (format === "image") accept = "image/*";
+  if (format === "document")
+    accept = "application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.presentationml.presentation";
+  if (format === "video") accept = "video/*";
+  return /* @__PURE__ */ React.createElement(
+    UploadList,
+    {
+      uploadFunction,
+      maxCount: 1,
+      accept,
+      onPreview,
+      ...props
+    }
+  );
+};
+
+const FeatureRowFields = ({ currentColumn }) => {
+  const { Component, isPure } = useMemo(() => {
+    let DefaultComponent = ProFormText;
+    let isPure2 = false;
+    if (currentColumn.tool === 29) {
+      DefaultComponent = FormSingleSelect;
+      isPure2 = true;
+    } else if (currentColumn.tool === 30) {
+      DefaultComponent = FormMultiSelect;
+      isPure2 = true;
+    } else if (currentColumn.tool === 36) {
+      DefaultComponent = FormDateTimePicker;
+      isPure2 = true;
+    } else if (currentColumn.tool === 31) {
+      DefaultComponent = FormInputNumber;
+      isPure2 = true;
+    } else if (currentColumn.tool === 34) {
+      DefaultComponent = FormJsonEditor;
+      isPure2 = true;
+    } else if (currentColumn.tool === 28) {
+      DefaultComponent = ProFormText;
+    } else if (currentColumn.tool === 32) {
+      DefaultComponent = FormUpload;
+      isPure2 = true;
+    } else if (currentColumn.tool === 35) {
+      DefaultComponent = ProFormText;
+    } else if (currentColumn.tool === 33) {
+      DefaultComponent = FormLinkEdit;
+      isPure2 = true;
+    } else if (currentColumn.tool === 39) {
+      DefaultComponent = ProFormText;
+    } else if (currentColumn.tool === 37) {
+      DefaultComponent = FormTimeLen;
+      isPure2 = true;
+    } else if (currentColumn.tool === 38) {
+      DefaultComponent = FormAvatar;
+      isPure2 = true;
+    }
+    return {
+      Component: DefaultComponent,
+      isPure: isPure2
+    };
+  }, [currentColumn.tool]);
+  const props = {
+    name: currentColumn.field,
+    disabled: currentColumn.freeze,
+    label: /* @__PURE__ */ React.createElement(RowLabel, { columnData: currentColumn })
+  };
+  const fieldProps = {
+    options: currentColumn.options,
+    format: currentColumn.fmt,
+    disabled: currentColumn.freeze,
+    request: currentColumn.request
+  };
+  if (currentColumn.tool === 39) {
+    return null;
+  }
+  return isPure ? /* @__PURE__ */ React.createElement(ProForm.Item, { key: currentColumn.field, ...props }, /* @__PURE__ */ React.createElement(Component, { ...fieldProps })) : /* @__PURE__ */ React.createElement(Component, { key: currentColumn.field, ...props, fieldProps });
+};
+
+const FeatureRowField = ({ columnId, columnsData }) => {
+  const currentColumn = useMemo(() => {
+    const value = columnsData.find((item) => item.field === columnId);
+    return value;
+  }, [columnsData, columnId]);
+  if (!currentColumn) return null;
+  return /* @__PURE__ */ React.createElement(FeatureRowFields, { currentColumn });
+};
+
+const FeatureRowSkeleton = () => {
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 12, style: { padding: "8px 0" } }, /* @__PURE__ */ React.createElement(Skeleton.Avatar, { active: true, size: "small", shape: "square" }), /* @__PURE__ */ React.createElement(Skeleton.Input, { active: true, size: "small", style: { width: 80 } }), /* @__PURE__ */ React.createElement(Skeleton.Input, { active: true, size: "small", style: { width: 240 } }));
+};
+const DrawerForm = ({ form, initialValues, columnsData, onChange, loading }) => {
+  const debounceChange = useDebounce(onChange, 500);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Flex, { className: "info-card", gap: 12, vertical: true, style: { padding: 16, width: "100%" } }, Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ React.createElement(FeatureRowSkeleton, { key: i })));
+  }
+  return /* @__PURE__ */ React.createElement(
+    ProForm,
+    {
+      form,
+      className: "row-setting-form",
+      formKey: "row-setting-form",
+      layout: "horizontal",
+      style: { width: "100%" },
+      submitter: {
+        render: false
+      },
+      initialValues,
+      onValuesChange: debounceChange
+    },
+    /* @__PURE__ */ React.createElement(Flex, { className: "info-card", gap: 12, vertical: true }, Object.entries(initialValues).map(([key]) => /* @__PURE__ */ React.createElement(FeatureRowField, { key, columnId: key, columnsData })))
+  );
+};
+
+const DetailsDrawer = ({
+  isOpen = false,
+  width = "650px",
+  placement = "right",
+  className,
+  form,
+  initialValues,
+  columnsData,
+  defaultActiveKey,
+  onClick,
+  onChange,
+  onClose,
+  uploadFunction,
+  onPreview,
+  historyNode,
+  closeIcon,
+  loading,
+  ...rest
+}) => {
+  const tabItems = [
+    {
+      key: "detail",
+      label: "\u8BE6\u60C5",
+      children: /* @__PURE__ */ React.createElement(
+        DrawerForm,
+        {
+          form,
+          initialValues,
+          columnsData,
+          onChange,
+          loading
+        }
+      )
+    },
+    { key: "history", label: "\u5386\u53F2", children: historyNode }
+  ];
+  return /* @__PURE__ */ React.createElement(
+    DetailsDrawerProvider,
+    {
+      uploadFunction,
+      onPreview,
+      columnsData,
+      onClick
+    },
+    /* @__PURE__ */ React.createElement(
+      Drawer,
+      {
+        ...rest,
+        open: isOpen,
+        onClose,
+        closeIcon,
+        width,
+        placement,
+        className: `custom-drawer ${className}`,
+        style: {
+          mask: "rgba(0,0,0,0)"
+        },
+        styles: {
+          body: {
+            padding: 0,
+            overflow: "hidden"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Flex, { vertical: true, onClick: (e) => e.stopPropagation(), style: { height: "100%" } }, /* @__PURE__ */ React.createElement("div", { className: "drawer-header-container" }, /* @__PURE__ */ React.createElement(
+        Tabs,
+        {
+          defaultActiveKey,
+          items: tabItems,
+          className: "custom-tabs",
+          style: { height: "100%" }
+        }
+      )))
+    )
+  );
+};
+
+const DrawerTitle = ({ onClose, isLast, isNext, onLastClick, onNextClick }) => {
+  return /* @__PURE__ */ React.createElement(Flex, { className: "drawer-title-container", justify: "space-between", align: "center", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(Flex, { className: "nav-arrows", gap: 4 }, /* @__PURE__ */ React.createElement(Tooltip, { title: "\u4E0A\u4E00\u9898" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      type: "text",
+      icon: /* @__PURE__ */ React.createElement(UpOutlined, { size: 20 }),
+      onClick: onLastClick,
+      disabled: !isLast
+    }
+  )), /* @__PURE__ */ React.createElement(Tooltip, { title: "\u4E0B\u4E00\u9898" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      type: "text",
+      icon: /* @__PURE__ */ React.createElement(DownOutlined, { size: 20 }),
+      onClick: onNextClick,
+      disabled: !isNext
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: "close-btn",
+      size: "small",
+      type: "text",
+      icon: /* @__PURE__ */ React.createElement(CloseOutlined, { size: 20 }),
+      onClick: onClose
+    }
+  ));
+};
+
+const SearchPagination = ({ selectIndex, total, onClickArrow }) => {
+  return /* @__PURE__ */ React.createElement(Flex, { className: "search-suffix", align: "center" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "link",
+      className: "arrow-icon",
+      icon: /* @__PURE__ */ React.createElement(LeftOutlined, { size: 12 }),
+      onClick: () => onClickArrow("left"),
+      onMouseDown: (e) => e.preventDefault()
+    }
+  ), /* @__PURE__ */ React.createElement(Flex, { className: "suffix-number", align: "center", justify: "center" }, `${selectIndex} / ${total}`), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "link",
+      className: "arrow-icon",
+      icon: /* @__PURE__ */ React.createElement(RightOutlined, { size: 12 }),
+      onClick: () => onClickArrow("right"),
+      onMouseDown: (e) => e.preventDefault()
+    }
+  ));
+};
+
+const SearchModal = ({
+  offsetParent,
+  width = 400,
+  isLoading = false,
+  isOpen = false,
+  position,
+  placeholder = "\u5728\u6570\u636E\u8868\u4E2D\u67E5\u627E",
+  searchValue,
+  searchTotal = 0,
+  suffix,
+  onClose,
+  onPositionChange,
+  onSearchChange,
+  onPageChange
+}) => {
+  const inputRef = useRef(null);
+  const [selectIndex, setSelectIndex] = useState(searchTotal > 0 ? 1 : 0);
+  useEffect(() => {
+    if (searchTotal <= 0) {
+      setSelectIndex(0);
+    } else {
+      setSelectIndex((prev) => {
+        if (prev === 0 || prev > searchTotal) {
+          return 1;
+        }
+        return prev;
+      });
+    }
+  }, [searchTotal]);
+  const onClickArrow = (type) => {
+    if (searchTotal <= 0) return;
+    const delta = type === "right" ? 1 : -1;
+    const newIndex = (selectIndex - 1 + delta + searchTotal) % searchTotal + 1;
+    if (newIndex !== selectIndex) {
+      setSelectIndex(newIndex);
+      if (onPageChange) onPageChange(newIndex);
+    }
+  };
+  useEffect(() => {
+    if (!isOpen) return;
+    requestAnimationFrame(() => {
+      inputRef.current?.focus({
+        cursor: "end"
+        // 光标在末尾
+      });
+    });
+  }, [isOpen]);
+  return /* @__PURE__ */ React.createElement(
+    BaseModal,
+    {
+      offsetParent,
+      width,
+      open: isOpen,
+      onClose,
+      value: position,
+      onChange: onPositionChange,
+      className: "search-modal"
+    },
+    /* @__PURE__ */ React.createElement(
+      DragDiv,
+      {
+        className: "search-modal-container",
+        onDrag: (dx, dy) => onPositionChange(({ x, y }) => ({ x: x + dx, y: y + dy }))
+      },
+      /* @__PURE__ */ React.createElement(
+        Flex,
+        {
+          className: "no-move",
+          justify: "center",
+          align: "center",
+          gap: 8,
+          flex: 1,
+          onMouseDown: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React.createElement(
+          Input,
+          {
+            ref: inputRef,
+            className: "search-input",
+            value: searchValue,
+            onChange: onSearchChange,
+            placeholder,
+            prefix: isLoading ? /* @__PURE__ */ React.createElement(LoadingOutlined, { spin: true }) : /* @__PURE__ */ React.createElement(SearchOutlined, null),
+            suffix: suffix ? suffix : /* @__PURE__ */ React.createElement(SearchPagination, { selectIndex, total: searchTotal, onClickArrow })
+          }
+        ),
+        /* @__PURE__ */ React.createElement(Button, { className: "search-close", type: "text", icon: /* @__PURE__ */ React.createElement(CloseOutlined, { size: 16 }), onClick: onClose })
+      )
+    )
+  );
+};
+
+const Operator = {
+  "EQUAL": "equal",
+  "NOT_EQUAL": "not_equal",
+  "GREATER_THAN": "greater_than",
+  "GREATER_THAN_OR_EQUAL": "greater_than_or_equal",
+  "LESS_THAN": "less_than",
+  "LESS_THAN_OR_EQUAL": "less_than_or_equal",
+  "BEFORE": "before",
+  "AFTER": "after",
+  "LIKE": "like",
+  "NOT_LIKE": "not_like",
+  "EMPTY": "empty",
+  "NOT_EMPTY": "not_empty"
+};
+
+const getDateRangeByOption = (type, operator) => {
+  const now = dayjs();
+  const dayStart = (d) => d.startOf("day");
+  const dayEnd = (d) => d.endOf("day");
+  switch (type) {
+    case "today": {
+      const start = dayStart(now);
+      const end = dayEnd(now);
+      if (operator === "equal") return [start, end];
+      if (operator === "before") return [void 0, start];
+      return [end, void 0];
+    }
+    case "yesterday": {
+      const d = now.subtract(1, "day");
+      const start = dayStart(d);
+      const end = dayEnd(d);
+      if (operator === "equal") return [start, end];
+      if (operator === "before") return [void 0, start];
+      return [end, void 0];
+    }
+    case "tomorrow": {
+      const d = now.add(1, "day");
+      const start = dayStart(d);
+      const end = dayEnd(d);
+      if (operator === "equal") return [start, end];
+      if (operator === "before") return [void 0, start];
+      return [end, void 0];
+    }
+    case "this_week":
+      return [now.startOf("week"), now.endOf("week")];
+    case "last_week": {
+      const d = now.subtract(1, "week");
+      return [d.startOf("week"), d.endOf("week")];
+    }
+    case "this_month":
+      return [now.startOf("month"), now.endOf("month")];
+    case "last_month": {
+      const d = now.subtract(1, "month");
+      return [d.startOf("month"), d.endOf("month")];
+    }
+    case "last_7_days":
+      return [dayStart(now.subtract(6, "day")), dayEnd(now)];
+    case "next_7_days":
+      return [dayStart(now), dayEnd(now.add(6, "day"))];
+    case "last_30_days":
+      return [dayStart(now.subtract(29, "day")), dayEnd(now)];
+    case "next_30_days":
+      return [dayStart(now), dayEnd(now.add(29, "day"))];
+    default:
+      return void 0;
+  }
+};
+const getDateBySpecific = (value, operator) => {
+  const startOfDay = value.startOf("day");
+  const endOfDay = value.endOf("day");
+  switch (operator) {
+    case "equal":
+      return [startOfDay, endOfDay];
+    case "before":
+      return [void 0, startOfDay];
+    case "after":
+      return [endOfDay, void 0];
+    default:
+      return [void 0, void 0];
+  }
+};
+
+const getOperatorOptions = (config) => {
+  if (config.numberSelect || config.time) {
+    return [
+      { label: "\u7B49\u4E8E", value: "equal" },
+      { label: "\u4E0D\u7B49\u4E8E", value: "not_equal" },
+      { label: "\u5927\u4E8E", value: "greater_than" },
+      { label: "\u5927\u4E8E\u6216\u7B49\u4E8E", value: "greater_than_or_equal" },
+      { label: "\u5C0F\u4E8E", value: "less_than" },
+      { label: "\u5C0F\u4E8E\u6216\u7B49\u4E8E", value: "less_than_or_equal" },
+      { label: "\u4E3A\u7A7A", value: "empty" },
+      { label: "\u4E0D\u4E3A\u7A7A", value: "not_empty" }
+    ];
+  } else if (config.date) {
+    return [
+      { label: "\u7B49\u4E8E", value: "equal" },
+      { label: "\u65E9\u4E8E", value: "before" },
+      { label: "\u665A\u4E8E", value: "after" },
+      { label: "\u4E3A\u7A7A", value: "empty" },
+      { label: "\u4E0D\u4E3A\u7A7A", value: "not_empty" }
+    ];
+  } else {
+    return [
+      { label: "\u7B49\u4E8E", value: "equal" },
+      { label: "\u4E0D\u7B49\u4E8E", value: "not_equal" },
+      { label: "\u5305\u542B", value: "like" },
+      { label: "\u4E0D\u5305\u542B", value: "not_like" },
+      { label: "\u4E3A\u7A7A", value: "empty" },
+      { label: "\u4E0D\u4E3A\u7A7A", value: "not_empty" }
+    ];
+  }
+};
+const FilterTypeSelect = ({ listIndex, value, form, tableConfig, onChange }) => {
+  const operatorOptions = useMemo(() => {
+    if (!tableConfig) return [];
+    return getOperatorOptions(tableConfig);
+  }, [tableConfig]);
+  const handleChange = (type) => {
+    const oldValue = form.getFieldValue(["filters", listIndex, "value"]);
+    const isTimeBeforeOrAfter = type === "before" || type === "after";
+    if (isTimeBeforeOrAfter && !["specific", "today", "tomorrow", "yesterday"].includes(oldValue)) {
+      const oldData = form.getFieldValue(["filters", listIndex]);
+      form.setFieldValue(["filters", listIndex], {
+        ...oldData,
+        value: "specific",
+        date: void 0
+      });
+      onChange(type);
+    } else if (type === "empty" || type === "not_empty") {
+      const oldData = form.getFieldValue(["filters", listIndex]);
+      form.setFieldValue(["filters", listIndex], {
+        ...oldData,
+        value: void 0,
+        date: void 0
+      });
+      onChange(type);
+    } else {
+      onChange(type);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      value,
+      className: "filter-form-operator",
+      popupMatchSelectWidth: 200,
+      options: operatorOptions,
+      onChange: handleChange
+    }
+  );
+};
+
+const FilterDatePicker = ({ value, columnConfig, onChange }) => {
+  const [date, setDate] = useState(value ? dayjs(value) : void 0);
+  const formatType = useMemo(() => {
+    const type = columnConfig?.dateFormat;
+    if (!type) {
+      return "YYYY/MM/DD";
+    } else {
+      return type.split(" ")[0] || "YYYY/MM/DD";
+    }
+  }, [columnConfig?.dateFormat]);
+  const handleSelectDate = (_date) => {
+    setDate(_date);
+    onChange(_date);
+  };
+  return /* @__PURE__ */ React.createElement(
+    DatePicker,
+    {
+      format: formatType,
+      allowClear: false,
+      value: date,
+      onChange: handleSelectDate,
+      placeholder: formatType,
+      suffixIcon: void 0
+    }
+  );
+};
+
+const options = [
+  { label: "\u5177\u4F53\u65E5\u671F", value: "specific" },
+  { label: "\u4ECA\u5929", value: "today" },
+  { label: "\u660E\u5929", value: "tomorrow" },
+  { label: "\u6628\u5929", value: "yesterday" },
+  { label: "\u672C\u5468", value: "this_week" },
+  { label: "\u4E0A\u5468", value: "last_week" },
+  { label: "\u672C\u6708", value: "this_month" },
+  { label: "\u4E0A\u6708", value: "last_month" },
+  { label: "\u8FC7\u53BB 7 \u5929\u5185", value: "last_7_days" },
+  { label: "\u672A\u6765 7 \u5929\u5185", value: "next_7_days" },
+  { label: "\u8FC7\u53BB 30 \u5929\u5185", value: "last_30_days" },
+  { label: "\u672A\u6765 30 \u5929\u5185", value: "next_30_days" }
+];
+const FilterDateSelect = ({ form, listIndex, value, operator, onChange }) => {
+  const filterOptions = useMemo(() => {
+    return operator === "before" || operator === "after" ? options.filter((item) => ["specific", "today", "tomorrow", "yesterday"].includes(item.value)) : options;
+  }, [operator]);
+  const handleChange = (value2) => {
+    if (value2 !== "specific") {
+      const oldData = form.getFieldValue(["filters", listIndex]);
+      form.setFieldValue(["filters", listIndex], {
+        ...oldData,
+        value: value2,
+        date: void 0
+      });
+    }
+    onChange(value2);
+  };
+  useMount(() => {
+    if (value === void 0) {
+      onChange("specific");
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      className: "form-date-type",
+      placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+      options: filterOptions,
+      popupMatchSelectWidth: 200,
+      value,
+      onChange: handleChange
+    }
+  );
+};
+
+const FilterFileSelect = ({ value, onChange }) => {
+  const handleSelectChange = (value2) => {
+    onChange(value2);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      placeholder: "\u8BF7\u9009\u62E9\u6587\u4EF6\u7C7B\u578B",
+      onChange: handleSelectChange,
+      value,
+      options: [
+        {
+          label: "\u56FE\u7247",
+          value: "image"
+        },
+        {
+          label: "\u6587\u6863",
+          value: "document"
+        },
+        {
+          label: "\u89C6\u9891",
+          value: "video"
+        }
+      ]
+    }
+  );
+};
+
+const FilterInput = ({ onChange, value }) => {
+  return /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165", onChange: (e) => onChange(e.target?.value), value });
+};
+
+const sanitizeInput = (value) => {
+  let sanitized = value.replace(/[^\d.-]/g, "");
+  const parts = sanitized.split(".");
+  if (parts.length > 2) sanitized = parts[0] + "." + parts.slice(1).join("");
+  if (sanitized.includes("-") && sanitized.indexOf("-") > 0) sanitized = sanitized.replace(/-/g, "");
+  return sanitized;
+};
+const getSliceNumber = (rawValue) => {
+  const [intPart, decimalPart] = rawValue.split(".");
+  if (decimalPart && decimalPart.length > 9) {
+    const fixedValue = `${intPart}.${decimalPart.slice(0, 9)}`;
+    return fixedValue;
+  }
+  return rawValue;
+};
+const FilterNumber = ({ onChange, value }) => {
+  const [rawValue, setRawValue] = useState(value || "");
+  const debounceOnChange = useDebounce((value2) => {
+    onChange(value2);
+  }, 500);
+  const onChangeInput = (e) => {
+    const input = sanitizeInput(e.target.value);
+    setRawValue(input);
+    if (rawValue !== input) {
+      debounceOnChange(getSliceNumber(input));
+    }
+  };
+  useEffect(() => {
+    if (value === void 0) {
+      setRawValue("");
+    }
+  }, [value]);
+  const onBlur = () => {
+    if (!rawValue) return;
+    const newValue = getSliceNumber(rawValue);
+    setRawValue(newValue);
+    if (rawValue !== newValue) {
+      debounceOnChange(getSliceNumber(newValue));
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165", value: rawValue, onBlur, onChange: onChangeInput });
+};
+
+const FilterPeopleAvatar = ({ avatar, label }) => {
+  const backgroundColor = useMemo(() => label === "\u65E0" ? "#D9D9D9" : getColorByStr(label?.slice(-2) || ""), [label]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, avatar ? /* @__PURE__ */ React.createElement(Avatar, { src: avatar, size: "small", style: { marginRight: 8 } }, label?.slice(-2)) : /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      style: {
+        backgroundColor,
+        marginRight: 8
+      },
+      size: "small"
+    },
+    label?.slice(-2)
+  ));
+};
+const TagRender = ({ label, closable, onClose }) => {
+  const onPreventMouseDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ React.createElement(Tag, { onMouseDown: onPreventMouseDown, closable, onClose, bordered: false }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        maxWidth: 80,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle"
+      }
+    },
+    label
+  ));
+};
+const FilterPeopleSelect = ({ columnId, columnConfig, value, onChange }) => {
+  const fetchRef = useRef(0);
+  const [fetching, setFetching] = useState(false);
+  const [options, setOptions] = useState([]);
+  const inputRef = useRef(null);
+  const [name, setName] = useState("");
+  const handleSelectChange = (val) => {
+    onChange(val);
+  };
+  const debounceFetcher = useMemo(() => {
+    const loadOptions = (value2) => {
+      if (!columnConfig.requestPeople) {
+        setOptions([]);
+        return;
+      }
+      fetchRef.current += 1;
+      const fetchId = fetchRef.current;
+      setOptions([]);
+      setFetching(true);
+      columnConfig.requestPeople(value2).then((data) => {
+        if (fetchId !== fetchRef.current) {
+          return;
+        }
+        const newOptions = data.map((item) => ({
+          value: item.value,
+          label: /* @__PURE__ */ React.createElement(Flex, { align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(FilterPeopleAvatar, { label: item.label, avatar: item.avatar }), /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                flex: 1
+              }
+            },
+            item.label
+          )),
+          data: item
+        }));
+        setOptions(newOptions);
+        setFetching(false);
+      });
+    };
+    return debounce(loadOptions, 300);
+  }, [columnConfig]);
+  const onNameChange = (event) => {
+    setName(event.target.value);
+    debounceFetcher(event.target.value);
+  };
+  useEffect(() => {
+    debounceFetcher();
+  }, [columnId, debounceFetcher]);
+  const onOpenChange = (open) => {
+    if (!open) {
+      setName("");
+      debounceFetcher();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      mode: "multiple",
+      maxTagCount: 1,
+      showSearch: false,
+      placeholder: "\u8BF7\u9009\u62E9\u9009\u9879",
+      value,
+      options,
+      onChange: handleSelectChange,
+      filterOption: false,
+      notFoundContent: fetching ? /* @__PURE__ */ React.createElement(Spin, { size: "small" }) : "\u6682\u65E0\u6570\u636E",
+      tagRender: (props) => {
+        return /* @__PURE__ */ React.createElement(TagRender, { ...props });
+      },
+      onOpenChange,
+      popupRender: (menu) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Space, { style: { padding: "4px 0px 0px" } }, /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          placeholder: "\u641C\u7D22\u6210\u5458",
+          variant: "borderless",
+          ref: inputRef,
+          value: name,
+          onChange: onNameChange,
+          onKeyDown: (e) => e.stopPropagation()
+        }
+      )), /* @__PURE__ */ React.createElement(Divider, { style: { margin: "8px 0" } }), menu)
+    }
+  );
+};
+
+const FilterSelect = ({ tableConfig, columnConfig, value, onChange }) => {
+  const mode = useMemo(() => {
+    const custom = tableConfig?.customOptions;
+    return typeof custom === "object" && custom.multiSelect ? "multiple" : "single";
+  }, [tableConfig]);
+  const options = useMemo(() => Array.isArray(columnConfig["options"]) ? columnConfig["options"] : [], [columnConfig]);
+  const handleChange = (value2) => {
+    if (mode === "single") {
+      onChange(value2.slice(value2.length - 1));
+    } else {
+      onChange(value2);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      mode: "multiple",
+      value,
+      maxTagCount: 1,
+      placeholder: "\u8BF7\u9009\u62E9\u9009\u9879",
+      onChange: handleChange,
+      options
+    }
+  );
+};
+
+const FilterValue = ({ form, columnId, tableConfig, columnConfig, listIndex }) => {
+  const Component = useMemo(() => {
+    let DefaultComponent;
+    if (tableConfig.customOptions) {
+      DefaultComponent = FilterSelect;
+    } else if (tableConfig.date) {
+      DefaultComponent = FilterDateSelect;
+    } else if (tableConfig.numberSelect || tableConfig.time) {
+      DefaultComponent = FilterNumber;
+    } else if (tableConfig.people) {
+      DefaultComponent = FilterPeopleSelect;
+    } else if (tableConfig.file) {
+      DefaultComponent = FilterFileSelect;
+    } else {
+      DefaultComponent = FilterInput;
+    }
+    return DefaultComponent;
+  }, [tableConfig]);
+  const props = { form, columnId, columnConfig, tableConfig, listIndex };
+  return /* @__PURE__ */ React.createElement(Flex, { className: "filter-value-box", gap: 8 }, /* @__PURE__ */ React.createElement(ProFormItem, { name: "value", className: tableConfig.date ? "" : "item-value" }, /* @__PURE__ */ React.createElement(Component, { ...props })), tableConfig.date && /* @__PURE__ */ React.createElement(ProFormDependency, { name: ["value"] }, ({ value }) => {
+    if (value !== "specific") return null;
+    return /* @__PURE__ */ React.createElement(ProFormItem, { name: "date", className: "item-value" }, /* @__PURE__ */ React.createElement(FilterDatePicker, { ...props }));
+  }));
+};
+
+const FilterGroup = ({ form, columnId, columnData, listIndex, tools }) => {
+  const columnConfig = useMemo(() => {
+    return columnData.find((item) => item.id === columnId);
+  }, [columnData, columnId]);
+  const tableConfig = useMemo(() => {
+    if (!columnConfig || !columnConfig["type"]) return;
+    return tools.find((item) => item.value === Number(columnConfig["type"]))?.table;
+  }, [columnConfig, tools]);
+  if (!tableConfig) return;
+  const props = { form, columnId, columnConfig, tableConfig, listIndex };
+  return /* @__PURE__ */ React.createElement(Flex, { className: "filter-item-config", gap: 8 }, /* @__PURE__ */ React.createElement(ProFormItem, { name: "operator" }, /* @__PURE__ */ React.createElement(FilterTypeSelect, { ...props })), /* @__PURE__ */ React.createElement(ProFormDependency, { name: ["operator"] }, ({ operator }) => {
+    if (operator === "empty" || operator === "not_empty") return null;
+    return /* @__PURE__ */ React.createElement(FilterValue, { ...props, operator });
+  }));
+};
+
+const FilterTitle = ({ filterCount }) => {
+  return /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8, className: "filter-title-wrap" }, /* @__PURE__ */ React.createElement(Typography.Text, null, "\u8BBE\u7F6E\u7B5B\u9009\u6761\u4EF6"), /* @__PURE__ */ React.createElement(Flex, { className: "filter-type-container", align: "center", gap: 8, style: { display: filterCount > 1 ? "" : "none" } }, /* @__PURE__ */ React.createElement(Typography.Text, null, "\u7B26\u5408\u4EE5\u4E0B"), /* @__PURE__ */ React.createElement(ProFormItem, { name: "filterType", className: "filter-type-item" }, /* @__PURE__ */ React.createElement(
+    Select$1,
+    {
+      size: "small",
+      options: [
+        { label: "\u6240\u6709", value: "all" },
+        { label: "\u4EFB\u4E00", value: "any" }
+      ]
+    }
+  )), /* @__PURE__ */ React.createElement(Typography.Text, null, "\u6761\u4EF6")), /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", title: "\u5F53\u524D\u7B5B\u9009\u64CD\u4F5C\u4E0D\u5F71\u54CD\u5176\u4ED6\u534F\u4F5C\u8005" }, /* @__PURE__ */ React.createElement(QuestionCircleOutlined, null)));
+};
+
+const FilterOperator = {
+  "EQUAl": "equal",
+  "NOT_EQUAL": "not_equal",
+  "LIKE": "like",
+  "NOT_LIKE": "not_like",
+  "EMPTY": "empty",
+  "NOT_EMPTY": "not_empty",
+  "BETWEEN": "between",
+  "GREATER_THAN": "greater_than",
+  "GREATER_THAN_OR_EQUAL": "greater_than_or_equal",
+  "LESS_THAN": "less_than",
+  "LESS_THAN_OR_EQUAL": "less_than_or_equal"
+};
+
+const TableFilterForm = ({ initialValues, columnData, tools, onValuesChange }) => {
+  const [form] = Form.useForm();
+  const outputValues = useRef(initialValues);
+  const actionRef = useRef(void 0);
+  const [filterCount, setFilterCount] = useState(initialValues?.filters.length ?? 0);
+  const updateFilterCount = () => {
+    const values = form.getFieldsValue();
+    setFilterCount(values.filters?.length ?? 0);
+  };
+  const filedOptions = useMemo(
+    () => columnData.map((column) => ({
+      value: column.id,
+      label: column.label
+    })),
+    [columnData]
+  );
+  const onDebounceChange = useMemo(
+    () => debounce(() => {
+      const allValues = form.getFieldsValue();
+      const lastDate = {
+        filterType: allValues.filterType,
+        filters: []
+      };
+      allValues.filters.forEach((filter) => {
+        const columnConfig = columnData.find((item) => item.id === filter.columnId);
+        const tableConfig = columnConfig ? tools.find((item) => item.value === Number(columnConfig["type"]))?.table : void 0;
+        const newFilter = {
+          columnId: filter.columnId,
+          operator: filter.operator
+        };
+        const operator = filter.operator;
+        if (filter.value) {
+          newFilter.value = filter.value;
+          if (tableConfig?.date) {
+            if (operator === "equal" || operator === "before" || operator === "after") {
+              newFilter.operator = "between";
+            }
+            if (filter.date) {
+              const date = filter.date;
+              newFilter.value = getDateBySpecific(date, operator);
+              lastDate.filters.push(newFilter);
+            } else {
+              const type = filter.value;
+              newFilter.value = getDateRangeByOption(type, operator);
+              if (newFilter.value) {
+                lastDate.filters.push(newFilter);
+              }
+            }
+          } else {
+            lastDate.filters.push(newFilter);
+          }
+        } else if (operator === "empty" || operator === "not_empty") {
+          lastDate.filters.push(newFilter);
+        }
+      });
+      if (!isEqual(lastDate, outputValues.current)) {
+        outputValues.current = lastDate;
+        onValuesChange?.(lastDate);
+      }
+    }, 500),
+    [columnData, form, onValuesChange, tools]
+  );
+  const onAddList = () => {
+    const defaultColumnId = columnData[0]?.id || "";
+    actionRef.current?.add({
+      columnId: defaultColumnId,
+      operator: "equal"
+    });
+    updateFilterCount();
+  };
+  const onDeleteList = (index) => {
+    actionRef.current?.remove(index);
+    updateFilterCount();
+    onDebounceChange();
+  };
+  const onListChange = (index, values) => {
+    const filters = form.getFieldValue("filters") || [];
+    if (values.columnId) {
+      values["operator"] = "equal";
+      values["value"] = void 0;
+    }
+    const newFilters = filters.map((item, i) => i === index ? omitBy({ ...item, ...values }, isUndefined) : item);
+    form.setFieldValue("filters", newFilters);
+  };
+  return /* @__PURE__ */ React.createElement(
+    ProForm,
+    {
+      className: "filter-form",
+      form,
+      submitter: false,
+      initialValues: {
+        filterType: "all",
+        ...initialValues
+      },
+      onValuesChange: onDebounceChange
+    },
+    /* @__PURE__ */ React.createElement(FilterTitle, { filterCount }),
+    /* @__PURE__ */ React.createElement(
+      ProFormList,
+      {
+        actionRef,
+        className: "filter-form-list",
+        name: "filters",
+        copyIconProps: false,
+        creatorButtonProps: false,
+        deleteIconProps: false,
+        itemContainerRender: (doms) => {
+          return /* @__PURE__ */ React.createElement(ProForm.Group, null, doms);
+        }
+      },
+      (_, listIndex, operator) => {
+        return /* @__PURE__ */ React.createElement(Flex, { gap: 4, align: "center" }, /* @__PURE__ */ React.createElement(Flex, { className: "filter-form-item", gap: 16 }, /* @__PURE__ */ React.createElement(ProFormItem, { name: ["columnId"], className: "filter-item-id" }, /* @__PURE__ */ React.createElement(
+          Select$1,
+          {
+            className: "filter-item-id-select",
+            placeholder: "\u8BF7\u9009\u62E9\u5B57\u6BB5",
+            options: filedOptions,
+            popupMatchSelectWidth: 200,
+            onChange: (columnId) => onListChange(listIndex, { columnId })
+          }
+        )), /* @__PURE__ */ React.createElement(ProFormDependency, { name: ["columnId"] }, ({ columnId }) => {
+          return /* @__PURE__ */ React.createElement(
+            FilterGroup,
+            {
+              form,
+              columnId: columnId ?? columnData[0]?.id,
+              columnData,
+              listIndex,
+              tools,
+              operator
+            }
+          );
+        })), /* @__PURE__ */ React.createElement(Button, { type: "text", size: "small", icon: /* @__PURE__ */ React.createElement(CloseOutlined, null), onClick: () => onDeleteList(listIndex) }));
+      }
+    ),
+    /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8, className: "filter-action-wrap" }, /* @__PURE__ */ React.createElement(Button, { type: "text", icon: /* @__PURE__ */ React.createElement(PlusOutlined, null), size: "small", onClick: onAddList }, "\u6DFB\u52A0\u6761\u4EF6"))
+  );
+};
+
+const FilterModal = ({
+  offsetParent,
+  width = 520,
+  isOpen = false,
+  position,
+  initialValues,
+  columnData,
+  tools,
+  onClose,
+  onPositionChange,
+  onValuesChange
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    BaseModal,
+    {
+      offsetParent,
+      width,
+      open: isOpen,
+      onClose,
+      value: position,
+      onChange: onPositionChange,
+      className: "filter-modal"
+    },
+    /* @__PURE__ */ React.createElement(Flex, { className: "filter-container", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
+      TableFilterForm,
+      {
+        initialValues,
+        columnData,
+        tools,
+        onValuesChange
+      }
+    ))
+  );
+};
+
+const dateValues = [
+  "today",
+  "tomorrow",
+  "yesterday",
+  "this_week",
+  "last_week",
+  "this_month",
+  "last_month",
+  "last_7_days",
+  "next_7_days",
+  "last_30_days",
+  "next_30_days"
+];
+function resolveDateRange(value, now = dayjs()) {
+  switch (value) {
+    case "today": {
+      return [now.startOf("day"), now.endOf("day")];
+    }
+    case "tomorrow": {
+      const d = now.add(1, "day");
+      return [d.startOf("day"), d.endOf("day")];
+    }
+    case "yesterday": {
+      const d = now.subtract(1, "day");
+      return [d.startOf("day"), d.endOf("day")];
+    }
+    case "this_week": {
+      return [now.startOf("week"), now.endOf("week")];
+    }
+    case "last_week": {
+      const d = now.subtract(1, "week");
+      return [d.startOf("week"), d.endOf("week")];
+    }
+    case "this_month": {
+      return [now.startOf("month"), now.endOf("month")];
+    }
+    case "last_month": {
+      const d = now.subtract(1, "month");
+      return [d.startOf("month"), d.endOf("month")];
+    }
+    case "last_7_days": {
+      return [now.subtract(7, "day").startOf("day"), now.endOf("day")];
+    }
+    case "next_7_days": {
+      return [now.startOf("day"), now.add(7, "day").endOf("day")];
+    }
+    case "last_30_days": {
+      return [now.subtract(30, "day").startOf("day"), now.endOf("day")];
+    }
+    case "next_30_days": {
+      return [now.startOf("day"), now.add(30, "day").endOf("day")];
+    }
+    case "specific":
+    default:
+      return void 0;
+  }
+}
+
+const MARGIN = 8;
+const defaultAdjustOptions = {
+  left: true,
+  right: true,
+  top: true,
+  bottom: true
+};
+function adjustPositionToViewport(position, modalRect, options = {}) {
+  const { left, right, top, bottom } = {
+    ...defaultAdjustOptions,
+    ...options
+  };
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  let x = position.x;
+  let y = position.y;
+  if (right && x + modalRect.width > viewportWidth - MARGIN) {
+    x = viewportWidth - modalRect.width - MARGIN;
+  }
+  if (left && x < MARGIN) {
+    x = MARGIN;
+  }
+  if (bottom && y + modalRect.height > viewportHeight - MARGIN) {
+    y = viewportHeight - modalRect.height - MARGIN;
+  }
+  if (top && y < MARGIN) {
+    y = MARGIN;
+  }
+  return { x, y };
+}
+const useModalPosition = (contentRef, position, setPosition, adjustOptions) => {
+  useLayoutEffect(() => {
+    if (!contentRef.current) return;
+    const adjustPosition = () => {
+      const rect = contentRef.current.getBoundingClientRect();
+      const adjusted = adjustPositionToViewport(position, rect, adjustOptions);
+      if (adjusted.x !== position.x || adjusted.y !== position.y) {
+        setPosition(adjusted);
+      }
+    };
+    adjustPosition();
+    const resizeObserver = new ResizeObserver(() => {
+      adjustPosition();
+    });
+    resizeObserver.observe(contentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, position, setPosition, adjustOptions]);
+};
+
+const TableMenuModal = ({
+  offsetParent,
+  width = 180,
+  isOpen = false,
+  position,
+  menuItems,
+  onClose,
+  onClick,
+  onPositionChange
+}) => {
+  const contentRef = useRef(null);
+  useModalPosition(contentRef, position, onPositionChange);
+  return /* @__PURE__ */ React.createElement(
+    BaseModal,
+    {
+      offsetParent,
+      width,
+      open: isOpen,
+      onClose,
+      value: position,
+      onChange: onPositionChange,
+      className: "table-menu-modal"
+    },
+    /* @__PURE__ */ React.createElement(Flex, { className: "menu-container", gap: 6, ref: contentRef }, /* @__PURE__ */ React.createElement(
+      Menu,
+      {
+        selectable: false,
+        onClick,
+        mode: "vertical",
+        items: menuItems,
+        getPopupContainer: (node) => node.parentNode
+      }
+    ))
+  );
+};
+
+export { AttachmentEditor, AttachmentPreview, Dashboard, DashboardItem$1 as DashboardItem, DetailsDrawer, DrawerForm, DrawerTitle, FeatureRowField, FeatureRowFields, FilterDatePicker, FilterDateSelect, FilterFileSelect, FilterGroup, FilterInput, FilterModal, FilterNumber, FilterOperator, FilterPeopleSelect, FilterSelect, FilterTitle, FilterTypeSelect, FilterValue, FormAvatar, FormDateTimePicker, FormInputNumber, FormJsonEditor, FormLinkEdit, FormMultiSelect, FormSingleSelect, FormTimeLen, FormUpload, JsonEditor, ObjectURLManager, Operator, RowLabel, SearchModal, TableFilterForm, TableMenuModal, adjustPositionToViewport, dateValues, findAvailablePosition, generateCrossDashedBase64, getDateBySpecific, getDateRangeByOption, resolveDateRange, useDetailsDrawerContext, useModalPosition };