@leankylin-sheet/react 5.2.26 → 5.2.28

package/dist/index.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;