输出界面支持搜索

README.md

@@ -26,6 +26,7 @@
  - 支持文件匹配，新增相应特殊变量
  - 内置`文本处理`，`find GUI`，`下载uTools离线插件`，`特殊符号`等多个实用快捷命令，均使用新版本新增功能实现
  - 适配暗黑模式，UI改版
+ - 支持对文本和 HTML 的输出进行搜索
  - 魔改codemirror，代码编辑器增强
     - 支持js、py代码格式化
     - 新增cmd、applescript代码高亮（原先用的shell的）

src/assets/options.js

@@ -1086,6 +1086,26 @@
         $("#options").show()
     }
 
+    // 输出搜索
+    let showSearchBox = () => {
+        if ($('#options').is(':hidden') && $('#out').is(":parent")) {
+            $('#out').append(`<div id="outputSearch"><input autofocus="autofocus"><kbd id="find-next">↓</kbd><kbd id="find-prev">↑</kbd><kbd id="find-close">✕</kbd></div>`)
+            $('#outputSearch').animate({ opacity: 1, top: '10px', })
+            document.getElementById('find-next').onclick = () => {
+                utools.findInPage($('#outputSearch > input').val())
+            }
+            document.getElementById('find-prev').onclick = () => {
+                utools.findInPage($('#outputSearch > input').val(), { forward: false })
+            }
+            document.getElementById('find-close').onclick = () => {
+                utools.stopFindInPage()
+                $('#outputSearch').animate({ opacity: 0, top: '-30px', }, () => {
+                    $('#outputSearch').remove()
+                })
+            }
+        }
+    }
+    
     // 切换TAGS
     $("#options").on('click', '.sidebar li', function () {
         showOptions($(this).text());
@@ -1156,4 +1176,9 @@
         runCurrentCommand()
         return false
     });
+
+    Mousetrap.bind('ctrl+f', () => {
+        showSearchBox()
+        return false
+    });
 }()

src/assets/style/darkmode.css

@@ -144,3 +144,14 @@ body .swal2-container.swal2-backdrop-show, body .swal2-container.swal2-noanimati
 body.swal2-no-backdrop .swal2-container > .swal2-modal {
     box-shadow: 0 0 10px rgb(48,49,51,0.75)
 }
+
+/*搜索框*/
+#out > #outputSearch {
+    background: #2d2d2d;
+}
+
+#out > #outputSearch input {
+    background: #242729;
+    color: #e4e4e4;
+    border: 1px solid #403f3f;
+}

src/assets/style/options.css

@@ -631,7 +631,7 @@ li.CodeMirror-hint {
     padding: 3px 4px;
 }
 
-/*---------------animate.css---------------*/
+/*animate.css*/
 @keyframes fadeInDown {
     0% {
         opacity: 0;
@@ -694,9 +694,9 @@ li.CodeMirror-hint {
     animation: fadeOutDown 0.3s;
 }
 
-/*---------------animate.css---------------*/
+/*animate.css*/
 
-/*---------------select2---------------*/
+/*select2*/
 #options #customize .select2-selection--single,
 #options #customize .select2-selection--multiple {
     border-bottom: 1px solid #dbdbdb;
@@ -792,9 +792,9 @@ li.CodeMirror-hint {
     outline: none
 }
 
-/*---------------select2---------------*/
+/*select2*/
 
-/*---------------quicktextarea---------------*/
+/*quicktextarea*/
 
 #quicktextarea {
     z-index: 10;
@@ -835,10 +835,34 @@ li.CodeMirror-hint {
     background: #6ab4f0;
 }
 
-/*---------------quicktextarea---------------*/
+/*quicktextarea*/
 
-
+/*搜索框*/
-.darktheme {
+#out > #outputSearch {
-    background: #282c34;
+    position: fixed;
-    color: wheat;
+    opacity: 0;
+    top: -30px;
+    right: 10px;
+    padding: 5px 10px 5px 10px;
+    background: #ffffff;
+    box-shadow: 2px 1px 3px 0px black;
+}
+
+#out > #outputSearch input {
+    height: 20px;
+    width: 220px;
+    margin-right: 5px;
+    border: 1px solid #e4e3e3;
+    background: #f5f5f5;
+    outline: none;
+}
+
+#out > #outputSearch input:focus {
+    border: 1px solid #03A9F4;
+}
+
+#out > #outputSearch > kbd {
+    cursor: pointer;
+    margin: 5px;
+    user-select: none;
 }