@fileverse-dev/fortune-react 1.0.2-mod-36 → 1.0.2-mod-37

package/dist/index.js

@@ -3523,6 +3523,118 @@ var DropDownList = function DropDownList() {
   }));
 };
 
+var IframeBoxs = function IframeBoxs() {
+  var _context$insertedIfra;
+  var _useContext = React.useContext(WorkbookContext),
+    context = _useContext.context,
+    setContext = _useContext.setContext,
+    refs = _useContext.refs;
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (!containerRef.current) return;
+      var iframeBoxes = containerRef.current.querySelectorAll(".luckysheet-modal-dialog-iframe");
+      var clickedInsideSomeIframe = Array.from(iframeBoxes).some(function (el) {
+        return el.contains(e.target);
+      });
+      if (!clickedInsideSomeIframe && context.activeIframe !== undefined) {
+        setContext(function (ctx) {
+          ctx.activeIframe = undefined;
+        });
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [context.activeIframe, setContext]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "fortune-iframe-boxes",
+    ref: containerRef
+  }, (_context$insertedIfra = context.insertedIframes) === null || _context$insertedIfra === void 0 ? void 0 : _context$insertedIfra.map(function (frame) {
+    var isActive = frame.id === context.activeIframe;
+    var style = {
+      width: frame.width * context.zoomRatio,
+      height: frame.height * context.zoomRatio,
+      left: frame.left * context.zoomRatio,
+      top: frame.top * context.zoomRatio,
+      position: "absolute",
+      padding: 0,
+      zIndex: isActive ? 300 : 200
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: frame.id,
+      id: isActive ? "fortune-modal-dialog-activeIframe" : frame.id,
+      className: "luckysheet-modal-dialog luckysheet-modal-dialog-iframe",
+      style: style,
+      onClick: function onClick(e) {
+        if (!isActive) {
+          setContext(function (ctx) {
+            ctx.activeIframe = frame.id;
+          });
+        }
+        e.stopPropagation();
+      },
+      onMouseDown: function onMouseDown(e) {
+        if (isActive) {
+          fortuneCore.onIframeMoveStart(context, refs.globalCache, e.nativeEvent);
+        }
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-content",
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("iframe", {
+      title: "iframe-".concat(frame.id),
+      src: frame.src,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "none",
+        pointerEvents: "none"
+      }
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-border"
+    }), isActive && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-resize"
+    }, ["lt", "mt", "lm", "rm", "rt", "lb", "mb", "rb"].map(function (dir) {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        key: dir,
+        className: "luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-".concat(dir),
+        "data-type": dir,
+        style: {
+          zIndex: 300,
+          position: "absolute"
+        },
+        onMouseDown: function onMouseDown(e) {
+          fortuneCore.onIframeResizeStart(context, refs.globalCache, e.nativeEvent, dir);
+          e.stopPropagation();
+        }
+      });
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "luckysheet-modal-dialog-controll"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "luckysheet-modal-controll-btn luckysheet-modal-controll-del",
+      role: "button",
+      tabIndex: 0,
+      title: "Delete",
+      onClick: function onClick() {
+        setContext(function (ctx) {
+          var _ctx$insertedIframes;
+          ctx.insertedIframes = ctx === null || ctx === void 0 ? void 0 : (_ctx$insertedIframes = ctx.insertedIframes) === null || _ctx$insertedIframes === void 0 ? void 0 : _ctx$insertedIframes.filter(function (f) {
+            return f.id !== frame.id;
+          });
+          ctx.activeIframe = undefined;
+        });
+      }
+    }, "DELETE")))));
+  }));
+};
+
 var SheetOverlay = function SheetOverlay() {
   var _refs$cellArea$curren, _refs$cellArea$curren2, _context$luckysheet_s, _context$luckysheet_s2, _context$luckysheet_s3, _context$luckysheet_s4, _context$luckysheet_s5, _context$luckysheet_s6, _context$presences$le, _context$presences, _context$linkCard, _context$rangeDialog;
   var _useContext = React.useContext(WorkbookContext),
@@ -3965,7 +4077,7 @@ var SheetOverlay = function SheetOverlay() {
     id: "luckysheet-multipleRange-show"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dynamicArray-hightShow"
-  }), /*#__PURE__*/React__default['default'].createElement(ImgBoxs, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement(ImgBoxs, null), /*#__PURE__*/React__default['default'].createElement(IframeBoxs, null), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-dataVerification-dropdown-btn",
     onClick: function onClick() {
       setContext(function (ctx) {
@@ -5259,6 +5371,97 @@ var FormatSearch = function FormatSearch(_ref) {
   }, button.cancel)));
 };
 
+var DuneChartsInputModal = function DuneChartsInputModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    icon = _ref.icon,
+    _ref$submitText = _ref.submitText,
+    submitText = _ref$submitText === void 0 ? "Submit" : _ref$submitText,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Enter a value..." : _ref$placeholder;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    url = _useState2[0],
+    setUrl = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showError = _useState4[0],
+    setShowError = _useState4[1];
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isOpen && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 100);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [isOpen]);
+  if (!isOpen) return null;
+  var handleSubmit = function handleSubmit() {
+    var trimmed = url.trim();
+    if (trimmed && fortuneCore.sanitizeDuneUrl(trimmed)) {
+      onSubmit(trimmed);
+      setUrl("");
+      setShowError(false);
+      onClose();
+    } else {
+      setShowError(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "custom-overlay",
+    onClick: onClose
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "input-modal",
+    style: {
+      transformOrigin: "top center"
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-header"
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: icon
+  }), /*#__PURE__*/React__default['default'].createElement("input", {
+    ref: inputRef,
+    className: "modal-input",
+    type: "text",
+    placeholder: placeholder,
+    value: url,
+    onChange: function onChange(e) {
+      setUrl(e.target.value);
+      setShowError(false);
+    },
+    onKeyDown: handleKeyDown
+  })), showError && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-error-message"
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    style: {
+      width: "14px",
+      height: "14px"
+    },
+    name: "circle-alert"
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, "Please make sure the URL is a valid Dune chart link"))), url.length > 0 && !showError && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "modal-footer"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: handleSubmit,
+    className: "modal-button"
+  }, submitText)))));
+};
+
 var getIcon = function getIcon(title) {
   switch (title) {
     case "align-left":
@@ -5304,6 +5507,10 @@ var Toolbar = function Toolbar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     itemLocations = _useState4[0],
     setItemLocations = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showDuneModal = _useState6[0],
+    setShowDuneModal = _useState6[1];
   var _useDialog = useDialog(),
     showDialog = _useDialog.showDialog,
     hideDialog = _useDialog.hideDialog;
@@ -5334,12 +5541,12 @@ var Toolbar = function Toolbar(_ref) {
   var sheetWidth = context.luckysheetTableContentHW[0];
   var currency = settings.currency;
   var defaultFormat = defaultFmt(currency);
-  var _useState5 = React.useState("#000000"),
-    _useState6 = _slicedToArray(_useState5, 1),
-    customColor = _useState6[0];
-  var _useState7 = React.useState("1"),
+  var _useState7 = React.useState("#000000"),
     _useState8 = _slicedToArray(_useState7, 1),
-    customStyle = _useState8[0];
+    customColor = _useState8[0];
+  var _useState9 = React.useState("1"),
+    _useState0 = _slicedToArray(_useState9, 1),
+    customStyle = _useState0[0];
   var showSubMenu = React.useCallback(function (e, className) {
     var target = e.target;
     var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
@@ -6424,7 +6631,7 @@ var Toolbar = function Toolbar(_ref) {
         });
       }
     });
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
+  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: containerRef,
     className: "fortune-toolbar",
@@ -6479,7 +6686,29 @@ var Toolbar = function Toolbar(_ref) {
       icon: n.icon,
       iconName: n.iconName
     }, n.children);
-  }));
+  }), /*#__PURE__*/React__default['default'].createElement(Button, {
+    iconId: "dune-logo",
+    tooltip: "Insert Dune Chart",
+    key: "dune-charts",
+    onClick: function onClick() {
+      if (context.allowEdit === false) return;
+      setShowDuneModal(true);
+    }
+  }), showDuneModal && (/*#__PURE__*/React__default['default'].createElement(DuneChartsInputModal, {
+    isOpen: showDuneModal,
+    onSubmit: function onSubmit(url) {
+      setContext(function (draftCtx) {
+        fortuneCore.insertDuneChart(draftCtx, url);
+      });
+      setShowDuneModal(false);
+    },
+    onClose: function onClose() {
+      return setShowDuneModal(false);
+    },
+    icon: "dune-logo",
+    placeholder: "Add Dune chart link to embed",
+    submitText: "Embed Dune chart"
+  })));
 };
 
 var LocationBox = function LocationBox() {
@@ -9611,6 +9840,59 @@ var SVGDefines = function SVGDefines(_ref) {
     d: "M12.75 2.25C13.1642 2.25 13.5 2.58579 13.5 3V15C13.5 15.4142 13.1642 15.75 12.75 15.75C12.3358 15.75 12 15.4142 12 15V3C12 2.58579 12.3358 2.25 12.75 2.25Z",
     fill: "#363B3F"
   })), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "dune-logo",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    "clip-path": "url(#clip0_80_246690)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M7.99485 15.9875C12.4102 15.9875 15.9896 12.4085 15.9896 7.99373C15.9896 3.57891 12.4102 0 7.99485 0C3.57941 0 0 3.57891 0 7.99373C0 12.4085 3.57941 15.9875 7.99485 15.9875Z",
+    fill: "#F4603E"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M1.39258 12.5028C1.39258 12.5028 6.67562 10.7723 15.9868 7.73633C15.9868 7.73633 16.4968 12.7082 11.3424 15.3015C11.3424 15.3015 8.80068 16.5197 6.01215 15.7383C6.01215 15.7383 3.23545 15.2142 1.39258 12.5028Z",
+    fill: "#1E1870"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+    id: "clip0_80_246690"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))))), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "circle-alert",
+    viewBox: "0 0 14 14",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    "clip-path": "url(#clip0_138_127604)"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6.99967 4.0835C7.32184 4.0835 7.58301 4.34466 7.58301 4.66683V7.00016C7.58301 7.32233 7.32184 7.5835 6.99967 7.5835C6.67751 7.5835 6.41634 7.32233 6.41634 7.00016V4.66683C6.41634 4.34466 6.67751 4.0835 6.99967 4.0835Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M6.99967 8.75016C6.67751 8.75016 6.41634 9.01133 6.41634 9.3335C6.41634 9.65566 6.67751 9.91683 6.99967 9.91683H7.00551C7.32767 9.91683 7.58884 9.65566 7.58884 9.3335C7.58884 9.01133 7.32767 8.75016 7.00551 8.75016H6.99967Z",
+    fill: "#FB3449"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.583008 7.00016C0.583008 3.45634 3.45585 0.583496 6.99967 0.583496C10.5435 0.583496 13.4163 3.45634 13.4163 7.00016C13.4163 10.544 10.5435 13.4168 6.99967 13.4168C3.45585 13.4168 0.583008 10.544 0.583008 7.00016ZM6.99967 1.75016C4.10018 1.75016 1.74967 4.10067 1.74967 7.00016C1.74967 9.89966 4.10018 12.2502 6.99967 12.2502C9.89917 12.2502 12.2497 9.89966 12.2497 7.00016C12.2497 4.10067 9.89917 1.75016 6.99967 1.75016Z",
+    fill: "#FB3449"
+  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("clipPath", {
+    id: "clip0_138_127604"
+  }, /*#__PURE__*/React__default['default'].createElement("rect", {
+    width: "14",
+    height: "14",
+    fill: "white"
+  }))))), /*#__PURE__*/React__default['default'].createElement("symbol", {
     id: "caret-down-fill",
     width: "14",
     height: "14",
@@ -10987,6 +11269,48 @@ var SheetList = function SheetList() {
   }));
 };
 
+var DunePreview = function DunePreview(_ref) {
+  var url = _ref.url,
+    position = _ref.position,
+    onKeepAsLink = _ref.onKeepAsLink,
+    onEmbed = _ref.onEmbed;
+  var embedUrl = fortuneCore.sanitizeDuneUrl(url);
+  if (!embedUrl) return null;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview",
+    style: {
+      left: position.left,
+      top: position.top
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-header"
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "fortune-dune-preview-title"
+  }, "Detected Dune chart link")), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-content"
+  }, /*#__PURE__*/React__default['default'].createElement("iframe", {
+    src: embedUrl,
+    title: "Dune Chart Preview",
+    style: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  })), /*#__PURE__*/React__default['default'].createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "fortune-dune-preview-footer"
+  }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    variant: "ghost",
+    onClick: onKeepAsLink,
+    className: "!w-fit px-0"
+  }, "Keep as Link"), /*#__PURE__*/React__default['default'].createElement(ui.Button, {
+    onClick: onEmbed,
+    className: "!w-fit px-0"
+  }, "Embed")));
+};
+
 var _excluded = ["onChange", "onOp", "data"];
 produce.enablePatches();
 var triggerGroupValuesRefresh = function triggerGroupValuesRefresh(ctx) {
@@ -11519,7 +11843,25 @@ var Workbook = /*#__PURE__*/React__default['default'].forwardRef(function (_ref,
     style: {
       width: "60px"
     }
-  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.min, ": ", calInfo.min)))))));
+  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/React__default['default'].createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/React__default['default'].createElement(DunePreview, {
+    url: context.showDunePreview.url,
+    position: context.showDunePreview.position,
+    onKeepAsLink: function onKeepAsLink() {
+      setContextWithProduce(function (draftCtx) {
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    },
+    onEmbed: function onEmbed() {
+      setContextWithProduce(function (draftCtx) {
+        fortuneCore.insertDuneChart(draftCtx, context.showDunePreview.url);
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    }
+  })))));
 });
 
 exports.Workbook = Workbook;

package/dist/index.umd.css

@@ -2778,6 +2778,99 @@ label {
   overflow-y: scroll;
 }
 
+.custom-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  height: 100vh;
+  width: 100%;
+  display: grid;
+  place-items: center;
+}
+
+.input-modal {
+  position: fixed;
+  top: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.75rem;
+  background-color: #ffffff;
+  padding: 0;
+  border: none;
+  box-shadow: 0px 8px 32px 0px #00000026;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+.modal-header {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.fetch-url-button {
+  cursor: pointer;
+}
+
+.modal-input {
+  border: none;
+  padding: 0;
+  outline: none;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  max-width: 150px;
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .modal-input {
+    max-width: 400px;
+    width: 380px !important;
+  }
+}
+
+.modal-input:disabled {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 16px;
+}
+
+.modal-button {
+  width: 100%;
+  margin: 8px;
+}
+
+.modal-error-message {
+  color: #ef4e2f;
+  background: #fff5f5;
+  margin: 8px 16px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
 .fortune-fx-editor {
   display: flex;
   flex-direction: row;
@@ -3637,3 +3730,67 @@ label {
   display: inline-block;
   margin-left: 15px;
 }
+
+.fortune-dune-preview {
+  position: absolute;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  width: 270px;
+  height: 250px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 8px;
+}
+
+.fortune-dune-preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fortune-dune-preview-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #363b3f;
+}
+
+.fortune-dune-preview-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #f8f9fa;
+}
+
+.fortune-dune-preview-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px;
+}
+
+.fortune-dune-preview-button {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fortune-dune-preview-button:hover {
+  background-color: #f5f5f5;
+}
+
+.fortune-dune-preview-button-primary {
+  background-color: #1e1870;
+  border-color: #1e1870;
+  color: #fff;
+}
+
+.fortune-dune-preview-button-primary:hover {
+  background-color: #2a2379;
+}