@difizen/libro-search 0.1.34 → 0.1.35

package/es/libro-search-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro-search-view.d.ts","sourceRoot":"","sources":["../src/libro-search-view.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAsB,MAAM,mBAAmB,CAAC;AAIjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,eAAO,MAAM,aAAa,+CAYzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgB/B,CAAC;AAEF,eAAO,MAAM,eAAe,0CAAoB,CAAC;AAEjD,eAAO,MAAM,aAAa,+CAyIzB,CAAC;AAEF,eAAO,MAAM,eAAe,0FAiB1B,CAAC;AAEH,qBAEa,eAAgB,SAAQ,QAAQ;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACd,qBAAqB,EAAE,0BAA0B,CAAC;IACtF,KAAK,CAAC,EAAE,SAAS,CAAC;IACV,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,aAAa,UAAS;IAC9B,IAAI,cAAc,IAAI,OAAO,CAE5B;IACO,cAAc,UAAS;IACvB,OAAO,CAAC,EAAE,MAAM,CAAa;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAa;IAChC,UAAU,SAAM;IAChB,aAAa,UAAS;IACtB,QAAQ,UAAS;IACjB,WAAW,UAAS;IAC5B,QAAQ,UAAS;IAER,IAAI,2FAAmB;IAEhC,IAAI,aAAa,WAShB;IACD,IAAI,iBAAiB,uBAMpB;IACD,IAAI,YAAY,uBAEf;IAEQ,WAAW,aAuBlB;IAEF,mBAAmB,aAIjB;IAEF,cAAc,aAIZ;IAEF,iBAAiB,sBAGf;IAEF,IAAI,aAKF;IACF,IAAI,4BAUF;IAEF,OAAO,aAEL;IAEF,MAAM,MAAO,gBAAgB,CAAC,cAAc,CAAC,UAI3C;IAEF,MAAM,8CAgBJ;IACF,aAAa,aAKX;IAEF,aAAa,aAGX;IAEF,mBAAmB,aAGjB;IAEF,cAAc,aAGZ;IAEF,IAAI,aAEF;IAEF,QAAQ,aAEN;IAEF,sBAAsB,MAAO,mBAAmB,UAI9C;IAEF,OAAO,aAEL;IACF,UAAU,aAER;IACF,YAAY,aAMV;IACF,eAAe,eAUb;IAEF,SAAS,YAAmB,OAAO,mBAMjC;IAEF,aAAa,MAAO,aAAa,UAqB/B;IAEF,gBAAgB,MAAO,MAAM,WAAW,CAAC,gBAAgB,CAAC,UAKxD;IAEF,mBAAmB,MAAO,MAAM,WAAW,CAAC,gBAAgB,CAAC,UAE3D;CACH"}
+{"version":3,"file":"libro-search-view.d.ts","sourceRoot":"","sources":["../src/libro-search-view.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAsB,MAAM,mBAAmB,CAAC;AAIjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,eAAO,MAAM,aAAa,+CAYzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgB/B,CAAC;AAEF,eAAO,MAAM,eAAe,0CAAoB,CAAC;AAEjD,eAAO,MAAM,aAAa,+CAmJzB,CAAC;AAEF,eAAO,MAAM,eAAe,0FAiB1B,CAAC;AAEH,qBAEa,eAAgB,SAAQ,QAAQ;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACd,qBAAqB,EAAE,0BAA0B,CAAC;IACtF,KAAK,CAAC,EAAE,SAAS,CAAC;IACV,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,aAAa,UAAS;IAC9B,IAAI,cAAc,IAAI,OAAO,CAE5B;IACO,cAAc,UAAS;IACvB,OAAO,CAAC,EAAE,MAAM,CAAa;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAa;IAChC,UAAU,SAAM;IAChB,aAAa,UAAS;IACtB,QAAQ,UAAS;IACjB,WAAW,UAAS;IAC5B,QAAQ,UAAS;IAER,IAAI,2FAAmB;IAEhC,IAAI,aAAa,WAShB;IACD,IAAI,iBAAiB,uBAMpB;IACD,IAAI,YAAY,uBAEf;IAEQ,WAAW,aAuBlB;IAEF,mBAAmB,aAIjB;IAEF,cAAc,aAIZ;IAEF,iBAAiB,sBAGf;IAEF,IAAI,aAKF;IACF,IAAI,4BAUF;IAEF,OAAO,aAEL;IAEF,MAAM,MAAO,gBAAgB,CAAC,cAAc,CAAC,UAI3C;IAEF,MAAM,8CAgBJ;IACF,aAAa,aAKX;IAEF,aAAa,aAGX;IAEF,mBAAmB,aAGjB;IAEF,cAAc,aAGZ;IAEF,IAAI,aAEF;IAEF,QAAQ,aAEN;IAEF,sBAAsB,MAAO,mBAAmB,UAI9C;IAEF,OAAO,aAEL;IACF,UAAU,aAER;IACF,YAAY,aAMV;IACF,eAAe,eAUb;IAEF,SAAS,YAAmB,OAAO,mBAMjC;IAEF,aAAa,MAAO,aAAa,UAqB/B;IAEF,gBAAgB,MAAO,MAAM,WAAW,CAAC,gBAAgB,CAAC,UAKxD;IAEF,mBAAmB,MAAO,MAAM,WAAW,CAAC,gBAAgB,CAAC,UAE3D;CACH"}

package/es/libro-search-view.js

@@ -20,11 +20,11 @@ function _applyDecoratedDescriptor(target, property, decorators, descriptor, con
 function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
 import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, createFromIconfontCN, EllipsisOutlined, RightOutlined } from '@ant-design/icons';
 import { LibroContextKey } from '@difizen/libro-core';
-import { prop, useInject, useObserve, watch } from '@difizen/mana-app';
+import { prop, ThemeService, useInject, useObserve, watch } from '@difizen/mana-app';
 import { BaseView, view, ViewInstance } from '@difizen/mana-app';
 import { inject, transient } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Button, Checkbox, Input, Tag } from 'antd';
+import { Button, Checkbox, ConfigProvider, Input, Tag, theme } from 'antd';
 import classnames from 'classnames';
 import { forwardRef, memo, useEffect, useRef } from 'react';
 import { LibroSearchProviderFactory } from "./libro-search-provider.js";
@@ -67,6 +67,7 @@ export var SearchContent = function SearchContent() {
   var _instance$searchProvi;
   var instance = useInject(ViewInstance);
   var findInputRef = useRef(null);
+  var themeService = useInject(ThemeService);
   useEffect(function () {
     var _instance$container;
     if (findInputRef.current) {
@@ -82,117 +83,122 @@ export var SearchContent = function SearchContent() {
     }
     return;
   }, [instance]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "libro-search-content",
-    style: {
-      height: "".concat(instance.contentHeight, "px")
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      algorithm: themeService.getCurrentTheme().type === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm
     },
-    children: [/*#__PURE__*/_jsx(ReplaceToggle, {}), /*#__PURE__*/_jsxs("table", {
-      className: "libro-search-input-area",
-      children: [/*#__PURE__*/_jsxs("tr", {
-        className: "libro-search-row",
-        children: [/*#__PURE__*/_jsx("td", {
-          className: "libro-search-input",
-          children: /*#__PURE__*/_jsx(Input, {
-            ref: findInputRef,
-            value: instance.findStr,
-            onChange: instance.handleFindChange,
-            size: "small",
-            placeholder: "\u641C\u7D22",
-            onFocus: function onFocus() {
-              instance.hasFocus = true;
-            },
-            onBlur: function onBlur() {
-              instance.hasFocus = false;
-            },
-            suffix: /*#__PURE__*/_jsxs("span", {
-              className: "libro-search-input-suffix",
-              children: [/*#__PURE__*/_jsx(IconFont, {
-                className: classnames({
-                  'libro-search-input-suffix-active': instance.caseSensitive
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "libro-search-content",
+      style: {
+        height: "".concat(instance.contentHeight, "px")
+      },
+      children: [/*#__PURE__*/_jsx(ReplaceToggle, {}), /*#__PURE__*/_jsxs("table", {
+        className: "libro-search-input-area",
+        children: [/*#__PURE__*/_jsxs("tr", {
+          className: "libro-search-row",
+          children: [/*#__PURE__*/_jsx("td", {
+            className: "libro-search-input",
+            children: /*#__PURE__*/_jsx(Input, {
+              ref: findInputRef,
+              value: instance.findStr,
+              onChange: instance.handleFindChange,
+              size: "small",
+              placeholder: "\u641C\u7D22",
+              onFocus: function onFocus() {
+                instance.hasFocus = true;
+              },
+              onBlur: function onBlur() {
+                instance.hasFocus = false;
+              },
+              suffix: /*#__PURE__*/_jsxs("span", {
+                className: "libro-search-input-suffix",
+                children: [/*#__PURE__*/_jsx(IconFont, {
+                  className: classnames({
+                    'libro-search-input-suffix-active': instance.caseSensitive
+                  }),
+                  onClick: instance.toggleCaseSensitive,
+                  type: "icon-Aa",
+                  title: "Match Case"
+                }), /*#__PURE__*/_jsx(IconFont, {
+                  className: classnames({
+                    'libro-search-input-suffix-active': instance.useRegex
+                  }),
+                  onClick: instance.toggleUseRegex,
+                  type: "icon-zhengzeshi",
+                  title: "Use Regular Expression"
+                })]
+              })
+            })
+          }), /*#__PURE__*/_jsxs("td", {
+            className: "libro-search-action",
+            children: [/*#__PURE__*/_jsx(SearchIndexMemo, {}), /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx(Button, {
+                title: "Previous Match",
+                onClick: instance.previous,
+                icon: /*#__PURE__*/_jsx(ArrowUpOutlined, {}),
+                size: "small"
+              }), /*#__PURE__*/_jsx(Button, {
+                title: "Next Match",
+                onClick: instance.next,
+                icon: /*#__PURE__*/_jsx(ArrowDownOutlined, {}),
+                size: "small"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: instance.toggleSetting,
+                icon: /*#__PURE__*/_jsx(EllipsisOutlined, {}),
+                size: "small"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: function onClick() {
+                  return instance.hide();
+                },
+                icon: /*#__PURE__*/_jsx(CloseOutlined, {}),
+                size: "small"
+              })]
+            })]
+          })]
+        }), instance.replaceVisible && /*#__PURE__*/_jsxs("tr", {
+          className: "libro-search-row",
+          children: [/*#__PURE__*/_jsx("td", {
+            className: "libro-search-input",
+            children: /*#__PURE__*/_jsx(Input, {
+              value: instance.replaceStr,
+              onChange: instance.handleReplaceChange,
+              size: "small",
+              placeholder: "\u66FF\u6362"
+            })
+          }), /*#__PURE__*/_jsx("td", {
+            className: "libro-search-action",
+            children: /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: instance.replace,
+                icon: /*#__PURE__*/_jsx(IconFont, {
+                  type: "icon-zifuchuantihuan_2"
                 }),
-                onClick: instance.toggleCaseSensitive,
-                type: "icon-Aa",
-                title: "Match Case"
-              }), /*#__PURE__*/_jsx(IconFont, {
-                className: classnames({
-                  'libro-search-input-suffix-active': instance.useRegex
+                size: "small",
+                title: "Replace"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: instance.replaceAll,
+                icon: /*#__PURE__*/_jsx(IconFont, {
+                  type: "icon-tihuantupian"
                 }),
-                onClick: instance.toggleUseRegex,
-                type: "icon-zhengzeshi",
-                title: "Use Regular Expression"
+                size: "small",
+                title: "Replace All"
               })]
             })
-          })
-        }), /*#__PURE__*/_jsxs("td", {
-          className: "libro-search-action",
-          children: [/*#__PURE__*/_jsx(SearchIndexMemo, {}), /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(Button, {
-              title: "Previous Match",
-              onClick: instance.previous,
-              icon: /*#__PURE__*/_jsx(ArrowUpOutlined, {}),
-              size: "small"
-            }), /*#__PURE__*/_jsx(Button, {
-              title: "Next Match",
-              onClick: instance.next,
-              icon: /*#__PURE__*/_jsx(ArrowDownOutlined, {}),
-              size: "small"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: instance.toggleSetting,
-              icon: /*#__PURE__*/_jsx(EllipsisOutlined, {}),
-              size: "small"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: function onClick() {
-                return instance.hide();
-              },
-              icon: /*#__PURE__*/_jsx(CloseOutlined, {}),
-              size: "small"
-            })]
           })]
-        })]
-      }), instance.replaceVisible && /*#__PURE__*/_jsxs("tr", {
-        className: "libro-search-row",
-        children: [/*#__PURE__*/_jsx("td", {
-          className: "libro-search-input",
-          children: /*#__PURE__*/_jsx(Input, {
-            value: instance.replaceStr,
-            onChange: instance.handleReplaceChange,
-            size: "small",
-            placeholder: "\u66FF\u6362"
-          })
-        }), /*#__PURE__*/_jsx("td", {
-          className: "libro-search-action",
-          children: /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(Button, {
-              onClick: instance.replace,
-              icon: /*#__PURE__*/_jsx(IconFont, {
-                type: "icon-zifuchuantihuan_2"
-              }),
-              size: "small",
-              title: "Replace"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: instance.replaceAll,
-              icon: /*#__PURE__*/_jsx(IconFont, {
-                type: "icon-tihuantupian"
-              }),
-              size: "small",
-              title: "Replace All"
-            })]
-          })
-        })]
-      }), instance.settingVisible && /*#__PURE__*/_jsxs("div", {
-        className: "libro-search-row",
-        children: [/*#__PURE__*/_jsx(Checkbox, {
-          checked: (_instance$searchProvi = instance.searchProvider) === null || _instance$searchProvi === void 0 ? void 0 : _instance$searchProvi.searchCellOutput,
-          onChange: instance.searchCellOutputChange,
-          disabled: instance.replaceVisible,
-          children: l10n.t('在 output 中查找')
-        }), instance.replaceVisible && /*#__PURE__*/_jsx(Tag, {
-          color: "warning",
-          children: l10n.t('替换功能不能在 output 生效')
+        }), instance.settingVisible && /*#__PURE__*/_jsxs("div", {
+          className: "libro-search-row",
+          children: [/*#__PURE__*/_jsx(Checkbox, {
+            checked: (_instance$searchProvi = instance.searchProvider) === null || _instance$searchProvi === void 0 ? void 0 : _instance$searchProvi.searchCellOutput,
+            onChange: instance.searchCellOutputChange,
+            disabled: instance.replaceVisible,
+            children: l10n.t('在 output 中查找')
+          }), instance.replaceVisible && /*#__PURE__*/_jsx(Tag, {
+            color: "warning",
+            children: l10n.t('替换功能不能在 output 生效')
+          })]
         })]
       })]
-    })]
+    })
   });
 };
 // TODO: 更改图标

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-search",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "",
   "keywords": [
     "libro",
@@ -36,9 +36,9 @@
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@ant-design/icons": "^5.1.0",
-    "@difizen/libro-common": "^0.1.34",
-    "@difizen/libro-core": "^0.1.34",
-    "@difizen/libro-code-editor": "^0.1.34",
+    "@difizen/libro-common": "^0.1.35",
+    "@difizen/libro-core": "^0.1.35",
+    "@difizen/libro-code-editor": "^0.1.35",
     "@types/lodash.debounce": "^4.0.7",
     "classnames": "^2.3.2",
     "lodash.debounce": "^4.0.8",

package/src/libro-search-view.tsx

@@ -8,11 +8,11 @@ import {
 } from '@ant-design/icons';
 import type { LibroView } from '@difizen/libro-core';
 import { LibroContextKey } from '@difizen/libro-core';
-import { prop, useInject, useObserve, watch } from '@difizen/mana-app';
+import { prop, ThemeService, useInject, useObserve, watch } from '@difizen/mana-app';
 import { BaseView, view, ViewInstance } from '@difizen/mana-app';
 import { inject, transient } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Button, Checkbox, Input, Tag } from 'antd';
+import { Button, Checkbox, ConfigProvider, Input, Tag, theme } from 'antd';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import type { InputRef } from 'antd/es/input';
 import classnames from 'classnames';
@@ -63,6 +63,7 @@ export const SearchIndexMemo = memo(SearchIndex);
 export const SearchContent = () => {
   const instance = useInject<LibroSearchView>(ViewInstance);
   const findInputRef = useRef<InputRef>(null);
+  const themeService = useInject(ThemeService);
   useEffect(() => {
     if (findInputRef.current) {
       findInputRef.current.focus();
@@ -79,123 +80,132 @@ export const SearchContent = () => {
   }, [instance]);
 
   return (
-    <div
-      className="libro-search-content"
-      style={{ height: `${instance.contentHeight}px` }}
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
     >
-      <ReplaceToggle />
-      <table className="libro-search-input-area">
-        <tr className="libro-search-row">
-          <td className="libro-search-input">
-            <Input
-              ref={findInputRef}
-              value={instance.findStr}
-              onChange={instance.handleFindChange}
-              size="small"
-              placeholder="搜索"
-              onFocus={() => {
-                instance.hasFocus = true;
-              }}
-              onBlur={() => {
-                instance.hasFocus = false;
-              }}
-              suffix={
-                <span className="libro-search-input-suffix">
-                  <IconFont
-                    className={classnames({
-                      'libro-search-input-suffix-active': instance.caseSensitive,
-                    })}
-                    onClick={instance.toggleCaseSensitive}
-                    type="icon-Aa"
-                    title="Match Case"
-                  />
-
-                  <IconFont
-                    className={classnames({
-                      'libro-search-input-suffix-active': instance.useRegex,
-                    })}
-                    onClick={instance.toggleUseRegex}
-                    type="icon-zhengzeshi"
-                    title="Use Regular Expression"
-                  />
-                </span>
-              }
-            />
-          </td>
-          <td className="libro-search-action">
-            <SearchIndexMemo />
-            <div>
-              <Button
-                title="Previous Match"
-                onClick={instance.previous}
-                icon={<ArrowUpOutlined />}
-                size="small"
-              />
-              <Button
-                title="Next Match"
-                onClick={instance.next}
-                icon={<ArrowDownOutlined />}
-                size="small"
-              />
-              <Button
-                onClick={instance.toggleSetting}
-                icon={<EllipsisOutlined />}
-                size="small"
-              />
-              <Button
-                onClick={() => instance.hide()}
-                icon={<CloseOutlined />}
-                size="small"
-              />
-            </div>
-          </td>
-        </tr>
-        {instance.replaceVisible && (
+      <div
+        className="libro-search-content"
+        style={{ height: `${instance.contentHeight}px` }}
+      >
+        <ReplaceToggle />
+        <table className="libro-search-input-area">
           <tr className="libro-search-row">
             <td className="libro-search-input">
               <Input
-                value={instance.replaceStr}
-                onChange={instance.handleReplaceChange}
+                ref={findInputRef}
+                value={instance.findStr}
+                onChange={instance.handleFindChange}
                 size="small"
-                placeholder="替换"
+                placeholder="搜索"
+                onFocus={() => {
+                  instance.hasFocus = true;
+                }}
+                onBlur={() => {
+                  instance.hasFocus = false;
+                }}
+                suffix={
+                  <span className="libro-search-input-suffix">
+                    <IconFont
+                      className={classnames({
+                        'libro-search-input-suffix-active': instance.caseSensitive,
+                      })}
+                      onClick={instance.toggleCaseSensitive}
+                      type="icon-Aa"
+                      title="Match Case"
+                    />
+
+                    <IconFont
+                      className={classnames({
+                        'libro-search-input-suffix-active': instance.useRegex,
+                      })}
+                      onClick={instance.toggleUseRegex}
+                      type="icon-zhengzeshi"
+                      title="Use Regular Expression"
+                    />
+                  </span>
+                }
               />
             </td>
             <td className="libro-search-action">
+              <SearchIndexMemo />
               <div>
                 <Button
-                  onClick={instance.replace}
-                  icon={<IconFont type="icon-zifuchuantihuan_2" />}
+                  title="Previous Match"
+                  onClick={instance.previous}
+                  icon={<ArrowUpOutlined />}
+                  size="small"
+                />
+                <Button
+                  title="Next Match"
+                  onClick={instance.next}
+                  icon={<ArrowDownOutlined />}
+                  size="small"
+                />
+                <Button
+                  onClick={instance.toggleSetting}
+                  icon={<EllipsisOutlined />}
                   size="small"
-                  title="Replace"
                 />
-
                 <Button
-                  onClick={instance.replaceAll}
-                  icon={<IconFont type="icon-tihuantupian" />}
+                  onClick={() => instance.hide()}
+                  icon={<CloseOutlined />}
                   size="small"
-                  title="Replace All"
                 />
               </div>
             </td>
           </tr>
-        )}
-
-        {instance.settingVisible && (
-          <div className="libro-search-row">
-            <Checkbox
-              checked={instance.searchProvider?.searchCellOutput}
-              onChange={instance.searchCellOutputChange}
-              disabled={instance.replaceVisible}
-            >
-              {l10n.t('在 output 中查找')}
-            </Checkbox>
-            {instance.replaceVisible && (
-              <Tag color="warning">{l10n.t('替换功能不能在 output 生效')}</Tag>
-            )}
-          </div>
-        )}
-      </table>
-    </div>
+          {instance.replaceVisible && (
+            <tr className="libro-search-row">
+              <td className="libro-search-input">
+                <Input
+                  value={instance.replaceStr}
+                  onChange={instance.handleReplaceChange}
+                  size="small"
+                  placeholder="替换"
+                />
+              </td>
+              <td className="libro-search-action">
+                <div>
+                  <Button
+                    onClick={instance.replace}
+                    icon={<IconFont type="icon-zifuchuantihuan_2" />}
+                    size="small"
+                    title="Replace"
+                  />
+
+                  <Button
+                    onClick={instance.replaceAll}
+                    icon={<IconFont type="icon-tihuantupian" />}
+                    size="small"
+                    title="Replace All"
+                  />
+                </div>
+              </td>
+            </tr>
+          )}
+
+          {instance.settingVisible && (
+            <div className="libro-search-row">
+              <Checkbox
+                checked={instance.searchProvider?.searchCellOutput}
+                onChange={instance.searchCellOutputChange}
+                disabled={instance.replaceVisible}
+              >
+                {l10n.t('在 output 中查找')}
+              </Checkbox>
+              {instance.replaceVisible && (
+                <Tag color="warning">{l10n.t('替换功能不能在 output 生效')}</Tag>
+              )}
+            </div>
+          )}
+        </table>
+      </div>
+    </ConfigProvider>
   );
 };
 // TODO: 更改图标