@leankylin-sheet/react 5.2.26 → 5.2.27

package/dist/index.js

@@ -1576,9 +1576,12 @@ var SearchReplace = function SearchReplace() {
   }, []);
   var getInitialPosition = React.useCallback(function (container) {
     var rect = container.getBoundingClientRect();
+    var estimatedHeight = 520;
+    var dialogWidth = 500;
+    var top = Math.max(40, Math.min((rect.height - estimatedHeight) / 2, rect.height - estimatedHeight - 20));
     return {
-      left: (rect.width - 500) / 2,
-      top: (rect.height - 200) / 3
+      left: Math.max(20, (rect.width - dialogWidth) / 2),
+      top: Number.isFinite(top) && top > 0 ? top : 40
     };
   }, []);
   var body = document.body;
@@ -1606,15 +1609,8 @@ var SearchReplace = function SearchReplace() {
       return e.stopPropagation();
     }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "icon-close leankylin-modal-dialog-icon-close",
-    onClick: closeDialog
-  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-    name: "close",
-    style: {
-      padding: 7,
-      cursor: "pointer"
-    }
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sr-header"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "tabBox"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     id: "searchTab",
@@ -1629,12 +1625,38 @@ var SearchReplace = function SearchReplace() {
       return setShowReplace(true);
     }
   }, findAndReplace.replace)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "icon-close",
+    onClick: closeDialog
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M12 4L4 12M4 4l8 8",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  })))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "ctBox"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "inputBox"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "searchTypeSelect"
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.searchTypeLabel, "\uFF1A"), /*#__PURE__*/React__default['default'].createElement("select", {
+    value: searchType,
+    onChange: function onChange(e) {
+      return setSearchType(e.target.value);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "v"
+  }, findAndReplace.searchTypeValue), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "f"
+  }, findAndReplace.searchTypeFormula), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "m"
+  }, findAndReplace.searchTypeDisplay))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "textboxs",
     id: "searchInput"
   }, findAndReplace.findTextbox, "\uFF1A", /*#__PURE__*/React__default['default'].createElement("input", {
@@ -1665,42 +1687,32 @@ var SearchReplace = function SearchReplace() {
     className: "checkboxs"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     id: "regCheck"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sr-checkbox"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "checkbox",
     onChange: function onChange(e) {
       return setCheckMode("regCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.regexTextbox))), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "wordCheck"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sr-checkbox"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "checkbox",
     onChange: function onChange(e) {
       return setCheckMode("wordCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.wholeTextbox)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.wholeTextbox))), /*#__PURE__*/React__default['default'].createElement("div", {
     id: "caseCheck"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "sr-checkbox"
   }, /*#__PURE__*/React__default['default'].createElement("input", {
     type: "checkbox",
     onChange: function onChange(e) {
       return setCheckMode("caseCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "searchTypeSelect"
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.searchTypeLabel), /*#__PURE__*/React__default['default'].createElement("select", {
-    value: searchType,
-    onChange: function onChange(e) {
-      return setSearchType(e.target.value);
-    },
-    style: {
-      marginLeft: 4
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("option", {
-    value: "v"
-  }, findAndReplace.searchTypeValue), /*#__PURE__*/React__default['default'].createElement("option", {
-    value: "f"
-  }, findAndReplace.searchTypeFormula), /*#__PURE__*/React__default['default'].createElement("option", {
-    value: "m"
-  }, findAndReplace.searchTypeDisplay))))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.distinguishTextbox))))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "btnBox"
   }, showReplace && ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     id: "replaceAllBtn",
@@ -1767,6 +1779,9 @@ var SearchReplace = function SearchReplace() {
       key: v.cellPosition,
       onClick: function onClick() {
         setContext(function (draftCtx) {
+          if (v.sheetId !== draftCtx.currentSheetId) {
+            core.changeSheet(draftCtx, v.sheetId);
+          }
           draftCtx.luckysheet_select_save = core.normalizeSelection(draftCtx, [{
             row: [v.r, v.r],
             column: [v.c, v.c]

package/dist/index.umd.css

@@ -1266,109 +1266,348 @@ html::-webkit-scrollbar-button {
 .leankylin-modal-dialog-icon-close:hover {
   opacity: 0.7;
 }
-/*查找替换弹出框样式*/
+/* 查找替换弹出框样式 */
 #leankylin-search-replace {
   position: absolute;
-  padding: 30px 42px;
+  padding: 24px 28px;
   z-index: 1002;
+  min-width: 520px;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
 }
 
+/* 关闭按钮 */
 #leankylin-search-replace .icon-close {
-  position: absolute;
-  right: 3px;
-  top: 3px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: #999;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+#leankylin-search-replace .icon-close:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #555;
+}
+
+#leankylin-search-replace .icon-close:active {
+  background-color: rgba(0, 0, 0, 0.08);
 }
 
+/* 统一头部：tab + 关闭 */
+#leankylin-search-replace .sr-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+/* Tab 切换 */
 #leankylin-search-replace .tabBox {
-  margin-top: 10px;
-  font-size: 0;
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  background: #f3f3f6;
+  border-radius: 6px;
+  padding: 3px;
+  margin-bottom: 0;
 }
 
 #leankylin-search-replace .tabBox span {
-  display: inline-block;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-  width: 100px;
-  border: 1px solid rgb(235, 235, 235);
-  font-size: 14px;
-  line-height: 2;
+  padding: 7px 0;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: transparent;
+}
+
+#leankylin-search-replace .tabBox span:hover {
+  color: #444;
 }
 
 #leankylin-search-replace .tabBox span.on {
-  background-color: #8C89FE;
-  border-color: #726EFE;
-  color: #fff;
+  background-color: #fff;
+  color: #333;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+/* 内容区 */
 #leankylin-search-replace .ctBox {
-  padding: 5px 10px;
-  border: 1px solid rgb(235, 235, 235);
-  font-size: 14px;
-  min-width: 500px;
+  padding: 0;
+  border: none;
+  font-size: 13px;
+  min-width: 460px;
 }
 
 #leankylin-search-replace .ctBox .row {
   display: flex;
   flex-direction: row;
+  gap: 20px;
   justify-content: space-between;
 }
 
+/* 输入框区 */
 #leankylin-search-replace .inputBox {
-  height: 90px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   position: relative;
 }
 
 #leankylin-search-replace .inputBox .textboxs {
-  height: 30px;
-  line-height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #555;
+  white-space: nowrap;
 }
 
+#leankylin-search-replace .inputBox .textboxs input.formulaInputFocus {
+  flex: 1;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #333;
+  background: #fff;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+#leankylin-search-replace
+  .inputBox
+  .textboxs
+  input.formulaInputFocus:focus {
+  border-color: #8C89FE;
+  box-shadow: 0 0 0 3px rgba(140, 137, 254, 0.12);
+}
+
+#leankylin-search-replace
+  .inputBox
+  .textboxs
+  input.formulaInputFocus:hover {
+  border-color: #b0aefe;
+}
+
+/* 选项区 (checkbox + 下拉) */
 #leankylin-search-replace .checkboxs {
-  height: 90px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 160px;
 }
 
-#leankylin-search-replace .checkboxs div {
-  height: 30px;
-  line-height: 30px;
+#leankylin-search-replace .checkboxs > div {
+  display: flex;
+  align-items: center;
+  gap: 0;
 }
 
-#leankylin-search-replace .checkboxs input[type="checkbox"] {
-  float: left;
-  margin-top: 9px;
+/* 自定义 Checkbox */
+#leankylin-search-replace .checkboxs .sr-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #555;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  line-height: 1;
+  padding: 4px 0;
 }
 
+#leankylin-search-replace .checkboxs .sr-checkbox input[type="checkbox"] {
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1.5px solid #c0c0c0;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+#leankylin-search-replace
+  .checkboxs
+  .sr-checkbox
+  input[type="checkbox"]:hover {
+  border-color: #8C89FE;
+}
+
+#leankylin-search-replace
+  .checkboxs
+  .sr-checkbox
+  input[type="checkbox"]:checked {
+  background: #8C89FE;
+  border-color: #8C89FE;
+}
+
+#leankylin-search-replace
+  .checkboxs
+  .sr-checkbox
+  input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 4.5px;
+  top: 1.5px;
+  width: 5px;
+  height: 9px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+#leankylin-search-replace
+  .checkboxs
+  .sr-checkbox
+  input[type="checkbox"]:focus-visible {
+  box-shadow: 0 0 0 3px rgba(140, 137, 254, 0.15);
+}
+
+#leankylin-search-replace .checkboxs .sr-checkbox span {
+  color: #555;
+}
+
+/* 搜索范围下拉 - 与查找/替换输入行同样的布局，select 展开至 input 相同宽度 */
+#leankylin-search-replace #searchTypeSelect {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #555;
+  white-space: nowrap;
+}
+
+#leankylin-search-replace #searchTypeSelect > span {
+  flex-shrink: 0;
+}
+
+#leankylin-search-replace #searchTypeSelect select {
+  flex: 1;
+  width: auto;
+  height: 32px;
+  padding: 0 28px 0 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  font-size: 13px;
+  color: #333;
+  cursor: pointer;
+  outline: none;
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+#leankylin-search-replace #searchTypeSelect select:hover {
+  border-color: #b0aefe;
+}
+
+#leankylin-search-replace #searchTypeSelect select:focus {
+  border-color: #8C89FE;
+  box-shadow: 0 0 0 3px rgba(140, 137, 254, 0.12);
+}
+
+/* 按钮区 */
 #leankylin-search-replace .btnBox {
-  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
 }
 
 #leankylin-search-replace .btnBox .button-default {
-  margin-right: 8px;
-  margin-left: 0px;
+  margin: 0;
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s;
 }
 
+#leankylin-search-replace .btnBox .button-default:hover {
+  border-color: #8C89FE;
+  color: #8C89FE;
+}
+
+#leankylin-search-replace .btnBox .button-default:active {
+  background-color: #f9f9ff;
+}
+
+/* 关闭按钮 */
 #leankylin-search-replace .close-button {
-  margin-left: 0px;
-  margin-top: 10px;
+  margin: 12px 0 0;
+  padding: 6px 20px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: all 0.15s;
 }
 
+#leankylin-search-replace .close-button:hover {
+  border-color: #aaa;
+}
+
+/* 搜索结果列表 */
 #leankylin-search-replace #searchAllbox {
   height: 210px;
-  border: 1px solid #d4d4d4;
-  margin-top: 10px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  margin-top: 14px;
   overflow-y: auto;
   position: relative;
+  background: #fff;
 }
 
 #leankylin-search-replace #searchAllbox .boxTitle {
   width: 100%;
-  height: 30px;
-  line-height: 29px;
-  padding: 0 5px;
-  background-color: #fff;
-  border-bottom: 1px solid #d4d4d4;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 10px;
+  background-color: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
   box-sizing: border-box;
   position: sticky;
   left: 0;
   top: 0;
+  z-index: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
 }
 
 #leankylin-search-replace #searchAllbox .boxTitle span {
@@ -1389,11 +1628,23 @@ html::-webkit-scrollbar-button {
 }
 
 #leankylin-search-replace #searchAllbox .boxMain .boxItem {
-  height: 30px;
-  line-height: 29px;
-  border-bottom: 1px solid #d4d4d4;
-  padding: 0 5px;
+  height: 32px;
+  line-height: 32px;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 10px;
   box-sizing: border-box;
+  cursor: pointer;
+  font-size: 13px;
+  color: #444;
+  transition: background-color 0.12s;
+}
+
+#leankylin-search-replace #searchAllbox .boxMain .boxItem:hover {
+  background-color: #f5f5ff;
+}
+
+#leankylin-search-replace #searchAllbox .boxMain .boxItem:last-child {
+  border-bottom: none;
 }
 
 #leankylin-search-replace #searchAllbox .boxMain .boxItem.on {
@@ -1419,6 +1670,8 @@ html::-webkit-scrollbar-button {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-family: "SF Mono", "Fira Code", Menlo, monospace;
+  font-size: 12px;
 }
 
 #leankylin-search-replace #searchAllbox .boxMain .boxItem span:nth-of-type(3) {
@@ -1427,6 +1680,25 @@ html::-webkit-scrollbar-button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* 滚动条美化 */
+#leankylin-search-replace #searchAllbox::-webkit-scrollbar {
+  width: 6px;
+}
+
+#leankylin-search-replace #searchAllbox::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#leankylin-search-replace #searchAllbox::-webkit-scrollbar-thumb {
+  background: #d4d4d4;
+  border-radius: 3px;
+}
+
+#leankylin-search-replace #searchAllbox::-webkit-scrollbar-thumb:hover {
+  background: #bbb;
+}
+
 .leankylin-link-modify-modal {
   position: absolute;
   overflow: hidden;