From c86cf123ef2bcc70d435e6f83932577d35cfb693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Tue, 18 Feb 2025 15:01:06 +0800
Subject: [PATCH 1/5] =?UTF-8?q?github-actions:=20num-run-electron.yml=20?=
 =?UTF-8?q?=E4=B8=8D=E5=9C=A8tag=E5=88=9B=E5=BB=BA=E6=97=B6=E8=A7=A6?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/npm-run-electron.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/npm-run-electron.yml b/.github/workflows/npm-run-electron.yml
index 8d71d6a..ae4c0d1 100644
--- a/.github/workflows/npm-run-electron.yml
+++ b/.github/workflows/npm-run-electron.yml
@@ -8,8 +8,6 @@ on:
       - release*
       - v1*
       - v2*
-    tags:
-      - '*'
 
 jobs:
   npm-run-electron:

From f575e6bda97abba2048b9fe34be160470a77edaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Tue, 18 Feb 2025 15:17:56 +0800
Subject: [PATCH 2/5] =?UTF-8?q?bugfix:=20=E5=BD=93=E4=BB=A3=E7=90=86?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=90=AF=E5=8A=A8=EF=BC=8C=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E5=85=B3=E9=97=AD=E6=97=B6=EF=BC=8C=E5=8A=A0?=
 =?UTF-8?q?=E9=80=9F=E6=9C=8D=E5=8A=A1=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=20`=E5=BD=93=E5=89=8D=E6=9C=AA=E5=90=AF=E5=8A=A8`=20=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gui/src/view/pages/server.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index bcfb04d..25e1a43 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -192,7 +192,7 @@ export default {
               <a-checkbox v-model="config.server.enabled">
                 随应用启动
               </a-checkbox>
-              <a-tag v-if="status.proxy.enabled" color="green">
+              <a-tag v-if="status.server.enabled" color="green">
                 当前已启动
               </a-tag>
               <a-tag v-else color="red">

From a6d2685e38a1da34fac503539941c2402588c6cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Wed, 26 Feb 2025 11:19:26 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feature:=20=E5=9F=9F=E5=90=8D=E7=99=BD?=
 =?UTF-8?q?=E5=90=8D=E5=8D=95=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8F=8D=E5=90=91?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=8C=E7=94=A8=E4=BA=8E=E5=A4=A7=E8=8C=83?=
 =?UTF-8?q?=E5=9B=B4=E8=AE=BE=E7=BD=AE=E4=B8=8D=E4=BB=A3=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=AA=E5=88=AB=E5=9F=9F=E5=90=8D=E8=AE=BE=E7=BD=AE=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E4=BB=A3=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gui/src/view/App.vue                 |   5 -
 packages/gui/src/view/api.js                  |   3 +
 .../gui/src/view/components/container.vue     |  15 +-
 packages/gui/src/view/mixins/plugin.js        |  12 ++
 packages/gui/src/view/pages/help.vue          |   8 +-
 packages/gui/src/view/pages/index.vue         |  28 +--
 packages/gui/src/view/pages/plugin/git.vue    |  17 +-
 packages/gui/src/view/pages/plugin/node.vue   |  14 +-
 .../gui/src/view/pages/plugin/overwall.vue    |  34 ++--
 packages/gui/src/view/pages/plugin/pip.vue    |   2 +
 packages/gui/src/view/pages/proxy.vue         |   5 +-
 packages/gui/src/view/pages/server.vue        | 159 +++++++++++-------
 packages/gui/src/view/pages/setting.vue       |   6 +-
 packages/gui/src/view/style/theme/dark.scss   |  42 ++---
 .../impl/res/AfterOPTIONSHeaders.js           |   3 +-
 packages/mitmproxy/src/options.js             |   2 +-
 16 files changed, 209 insertions(+), 146 deletions(-)

diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index 4ce294d..8b1bb95 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -5,8 +5,6 @@ import { colorTheme } from './composables/theme'
 
 export default {
   name: 'App',
-  components: {
-  },
   data () {
     return {
       locale: zhCN,
@@ -39,9 +37,6 @@ export default {
     })
   },
   methods: {
-    handleClick (e) {
-      console.log('click', e)
-    },
     titleClick (item) {
       console.log('title click:', item)
     },
diff --git a/packages/gui/src/view/api.js b/packages/gui/src/view/api.js
index 868c942..9ff814a 100644
--- a/packages/gui/src/view/api.js
+++ b/packages/gui/src/view/api.js
@@ -27,6 +27,9 @@ export function apiInit (app) {
         ipcRenderer.removeAllListeners(channel)
       },
       invoke,
+      postMessage (channel, ...args) {
+        ipcRenderer.postMessage(channel, ...args)
+      },
       send,
       async openExternal (href) {
         await shell.openExternal(href)
diff --git a/packages/gui/src/view/components/container.vue b/packages/gui/src/view/components/container.vue
index 8df89dd..e4ef141 100644
--- a/packages/gui/src/view/components/container.vue
+++ b/packages/gui/src/view/components/container.vue
@@ -8,7 +8,8 @@ export default {
   <div class="ds-container">
     <div class="body-wrapper">
       <div v-if="$slots.header" class="container-header">
-        <slot name="header" />
+        <span><slot name="header" /></span>
+        <span style="color:#999"><slot name="header-right" /></span>
       </div>
       <div class="container-body">
         <slot />
@@ -23,16 +24,16 @@ export default {
 <style lang="scss">
 .ds-container {
   height: 100%;
-  background: #fff;
+  background-color: #fff;
   display: flex;
   position: relative;
 
   .body-wrapper {
     position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -41,7 +42,7 @@ export default {
   .container-header {
     padding: 15px;
     border-bottom: 1px solid #eee;
-    background: #fff;
+    background-color: #fff;
     height: 60px;
     display: flex;
     align-items: center;
diff --git a/packages/gui/src/view/mixins/plugin.js b/packages/gui/src/view/mixins/plugin.js
index afd685e..7142dd0 100644
--- a/packages/gui/src/view/mixins/plugin.js
+++ b/packages/gui/src/view/mixins/plugin.js
@@ -142,5 +142,17 @@ export default {
       const dir = await this.$api.info.getLogDir()
       this.$api.ipc.openPath(dir)
     },
+    handleHostname (hostname) {
+      if (this.isNotHostname(hostname)) {
+        return ''
+      }
+
+      // 移除所有空白符
+      return hostname.replaceAll(/\s+/g, '')
+    },
+    isNotHostname (hostname) {
+      // 暂时只判断数字
+      return !hostname || /^[\d\s]+$/.test(hostname)
+    },
   },
 }
diff --git a/packages/gui/src/view/pages/help.vue b/packages/gui/src/view/pages/help.vue
index 123f2eb..487fe3d 100644
--- a/packages/gui/src/view/pages/help.vue
+++ b/packages/gui/src/view/pages/help.vue
@@ -25,10 +25,10 @@ export default {
   <ds-container>
     <template slot="header">
       帮助中心
-      <span>
-        <a-button class="md-mr-10" @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
-        <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
-      </span>
+    </template>
+    <template slot="header-right">
+      <a-button class="md-mr-10" @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
+      <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
     </template>
 
     <div v-if="config" class="help-list">
diff --git a/packages/gui/src/view/pages/index.vue b/packages/gui/src/view/pages/index.vue
index 307c395..b1e972e 100644
--- a/packages/gui/src/view/pages/index.vue
+++ b/packages/gui/src/view/pages/index.vue
@@ -259,20 +259,20 @@ export default {
   <DsContainer class="page_index">
     <template slot="header">
       给开发者的辅助工具
-      <span>
-        <a-button style="margin-right:10px" @click="openSetupCa">
-          <a-badge :count="_rootCaSetuped ? 0 : 1" dot>安装根证书</a-badge>
-        </a-button>
+    </template>
+    <template slot="header-right">
+      <a-button style="margin-right:10px" @click="openSetupCa">
+        <a-badge :count="_rootCaSetuped ? 0 : 1" dot>安装根证书</a-badge>
+      </a-button>
 
-        <a-button
-          style="margin-right:10px" :loading="update.downloading || update.checking" :title="`当前版本:${info.version}`"
-          @click="doCheckUpdate(true)"
-        >
-          <a-badge :count="update.newVersion ? 1 : 0" dot>
-            <span v-if="update.downloading">{{ update.progress }}%</span>{{ update.downloading ? '新版本下载中' : (`检查更新${update.checking ? '中' : ''}`) }}
-          </a-badge>
-        </a-button>
-      </span>
+      <a-button
+        style="margin-right:10px" :loading="update.downloading || update.checking" :title="`当前版本:${info.version}`"
+        @click="doCheckUpdate(true)"
+      >
+        <a-badge :count="update.newVersion ? 1 : 0" dot>
+          <span v-if="update.downloading">{{ update.progress }}%</span>{{ update.downloading ? '新版本下载中' : (`检查更新${update.checking ? '中' : ''}`) }}
+        </a-badge>
+      </a-button>
     </template>
 
     <div class="box">
@@ -319,7 +319,7 @@ export default {
         </div>
         <div :span="12">
           <a-form style="margin-top:20px" :label-col="{ span: 15 }" :wrapper-col="{ span: 9 }">
-            <a-form-item v-for=" (item, key) in switchBtns" :key="key" :label="item.label">
+            <a-form-item v-for="(item, key) in switchBtns" :key="key" :label="item.label">
               <a-tooltip placement="topLeft">
                 <a-switch
                   style="margin-left:10px" :loading="item.loading" :checked="item.status()" default-checked
diff --git a/packages/gui/src/view/pages/plugin/git.vue b/packages/gui/src/view/pages/plugin/git.vue
index 74a71c8..d0605a5 100644
--- a/packages/gui/src/view/pages/plugin/git.vue
+++ b/packages/gui/src/view/pages/plugin/git.vue
@@ -7,6 +7,8 @@ export default {
   data () {
     return {
       key: 'plugin.git',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       noProxyUrls: [],
       needRestart: false,
     }
@@ -45,7 +47,7 @@ export default {
       }
     },
     addNoProxyUrl () {
-      this.noProxyUrls.unshift({ key: '', value: true })
+      this.noProxyUrls.unshift({ key: '' })
     },
     delNoProxyUrl (item, index) {
       this.noProxyUrls.splice(index, 1)
@@ -54,7 +56,10 @@ export default {
       const noProxyUrls = {}
       for (const item of this.noProxyUrls) {
         if (item.key) {
-          noProxyUrls[item.key] = item.value
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            noProxyUrls[hostname] = true
+          }
         }
       }
       this.config.plugin.git.setting.noProxyUrls = noProxyUrls
@@ -67,9 +72,9 @@ export default {
   <ds-container>
     <template slot="header">
       Git.exe代理设置
-      <span style="color:#999;">
-        仅针对git命令行的代理设置，github网站的访问无需设置
-      </span>
+    </template>
+    <template slot="header-right">
+      仅针对git命令行的代理设置，github网站的访问无需设置
     </template>
 
     <div v-if="config">
@@ -103,7 +108,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of noProxyUrls" :key="index" :gutter="10">
               <a-col :span="22">
-                <a-input v-model="item.key" :disabled="item.value === false" />
+                <a-input v-model="item.key" />
               </a-col>
               <a-col :span="2">
                 <a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />
diff --git a/packages/gui/src/view/pages/plugin/node.vue b/packages/gui/src/view/pages/plugin/node.vue
index 1956c56..5f05957 100644
--- a/packages/gui/src/view/pages/plugin/node.vue
+++ b/packages/gui/src/view/pages/plugin/node.vue
@@ -7,6 +7,8 @@ export default {
   data () {
     return {
       key: 'plugin.node',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       npmVariables: undefined,
       registry: false,
     }
@@ -51,9 +53,9 @@ export default {
   <ds-container>
     <template slot="header">
       NPM加速
-      <span style="color:#999;">
-        由于nodejs不走系统证书，所以npm加速不是很好用，可以用淘宝registry
-      </span>
+    </template>
+    <template slot="header-right">
+      由于nodejs不走系统证书，所以npm加速不是很好用，可以用淘宝registry
     </template>
 
     <div v-if="config">
@@ -97,7 +99,6 @@ export default {
             设置后立即生效，即使关闭 ds 也会继续保持
           </div>
         </a-form-item>
-
         <a-form-item label="yarn仓库镜像" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-radio-group v-model="config.plugin.node.setting.yarnRegistry" default-value="null" button-style="solid" @change="onSwitchYarnRegistry">
             <a-radio-button value="default" title="https://registry.yarnpkg.com">
@@ -111,7 +112,6 @@ export default {
             设置后立即生效，即使关闭 ds 也会继续保持
           </div>
         </a-form-item>
-
         <a-form-item label="镜像变量设置" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-checkbox v-model="config.plugin.node.startup.variables">
             自动设置，启动npm加速开关时将会设置如下环境变量
@@ -123,10 +123,10 @@ export default {
             <a-col :span="10">
               <a-input v-model="item.key" :title="item.key" read-only />
             </a-col>
-            <a-col :span="10">
+            <a-col :span="13">
               <a-input v-model="item.value" :title="item.value" read-only />
             </a-col>
-            <a-col :span="4">
+            <a-col :span="1">
               <a-icon v-if="item.exists && item.hadSet" title="已设置" style="color:green" type="check" />
               <a-icon v-else title="还未设置" style="color:red" type="exclamation-circle" />
             </a-col>
diff --git a/packages/gui/src/view/pages/plugin/overwall.vue b/packages/gui/src/view/pages/plugin/overwall.vue
index 283d5ae..e966003 100644
--- a/packages/gui/src/view/pages/plugin/overwall.vue
+++ b/packages/gui/src/view/pages/plugin/overwall.vue
@@ -7,6 +7,8 @@ export default {
   data () {
     return {
       key: 'plugin.overwall',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       targets: undefined,
       servers: undefined,
       overwallOptions: [
@@ -40,8 +42,8 @@ export default {
       this.initServer()
     },
     async applyBefore () {
-      this.saveTarget()
-      this.saveServer()
+      this.submitTarget()
+      this.submitServer()
     },
     initTarget () {
       this.targets = []
@@ -54,17 +56,20 @@ export default {
         })
       }
     },
-    deleteTarget (item, index) {
-      this.targets.splice(index, 1)
-    },
     addTarget () {
       this.targets.unshift({ key: '', value: 'true' })
     },
-    saveTarget () {
+    deleteTarget (item, index) {
+      this.targets.splice(index, 1)
+    },
+    submitTarget () {
       const map = {}
       for (const item of this.targets) {
         if (item.key) {
-          map[item.key] = item.value === 'true'
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            map[hostname] = (item.value === 'true')
+          }
         }
       }
       this.config.plugin.overwall.targets = map
@@ -90,11 +95,14 @@ export default {
     addServer () {
       this.servers.unshift({ key: '', value: { type: 'path' } })
     },
-    saveServer () {
+    submitServer () {
       const map = {}
       for (const item of this.servers) {
         if (item.key) {
-          map[item.key] = item.value
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            map[hostname] = item.value
+          }
         }
       }
       this.config.plugin.overwall.server = map
@@ -107,9 +115,9 @@ export default {
   <ds-container>
     <template slot="header">
       梯子
-      <span>
-        <a-button type="primary" @click="openExternal('https://github.com/docmirror/dev-sidecar-doc/blob/main/ow.md')">原理说明</a-button>
-      </span>
+    </template>
+    <template slot="header-right">
+      <a-button type="primary" @click="openExternal('https://github.com/docmirror/dev-sidecar-doc/blob/main/ow.md')">原理说明</a-button>
     </template>
 
     <div v-if="config">
@@ -142,7 +150,7 @@ export default {
             注：只要下载成功后，即使关闭自动更新功能，也会优先读取最近下载的文件！
           </div>
         </a-form-item>
-        <a-form-item label="远程PAC文件地址" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="远程PAC文件" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-input v-model="config.plugin.overwall.pac.pacFileUpdateUrl" :title="config.plugin.overwall.pac.pacFileUpdateUrl" />
           <div class="form-help">
             远程PAC文件内容可以是<code>base64</code>编码格式，也可以是未经过编码的
diff --git a/packages/gui/src/view/pages/plugin/pip.vue b/packages/gui/src/view/pages/plugin/pip.vue
index c9c7be1..1ea0537 100644
--- a/packages/gui/src/view/pages/plugin/pip.vue
+++ b/packages/gui/src/view/pages/plugin/pip.vue
@@ -7,6 +7,8 @@ export default {
   data () {
     return {
       key: 'plugin.pip',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       npmVariables: undefined,
       registry: false,
       trustedHostList: [],
diff --git a/packages/gui/src/view/pages/proxy.vue b/packages/gui/src/view/pages/proxy.vue
index bc38be9..89b5cf0 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -68,7 +68,10 @@ export default {
       const excludeIpList = {}
       for (const item of this.excludeIpList) {
         if (item.key) {
-          excludeIpList[item.key] = item.value === 'true'
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            excludeIpList[hostname] = (item.value === 'true')
+          }
         }
       }
       this.config.proxy.excludeIpList = excludeIpList
diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index 25e1a43..b5c87c8 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -12,9 +12,20 @@ export default {
   data () {
     return {
       key: 'server',
+      activeTabKey: '1',
       dnsMappings: [],
       speedTestList: [],
       whiteList: [],
+      whiteListOptions: [
+        {
+          label: '不代理',
+          value: 'true',
+        },
+        {
+          label: '代理',
+          value: 'false',
+        },
+      ],
     }
   },
   computed: {
@@ -58,8 +69,9 @@ export default {
       }
     },
     async applyBefore () {
-      this.submitDnsMapping()
+      this.submitDnsMappings()
       this.submitWhiteList()
+      this.delEmptySpeedHostname()
     },
     async applyAfter () {
       if (this.status.server.enabled) {
@@ -77,20 +89,20 @@ export default {
         })
       }
     },
-    submitDnsMapping () {
+    submitDnsMappings () {
       const dnsMapping = {}
       for (const item of this.dnsMappings) {
         if (item.key) {
-          dnsMapping[item.key] = item.value
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            dnsMapping[hostname] = item.value
+          }
         }
       }
       this.config.server.dns.mapping = dnsMapping
     },
     deleteDnsMapping (item, index) {
       this.dnsMappings.splice(index, 1)
-    },
-    restoreDefDnsMapping (item, index) {
-
     },
     addDnsMapping () {
       this.dnsMappings.unshift({ key: '', value: 'quad9' })
@@ -102,26 +114,29 @@ export default {
       for (const key in this.config.server.whiteList) {
         const value = this.config.server.whiteList[key]
         this.whiteList.push({
-          key,
-          value,
+          key: key || '',
+          value: value === true ? 'true' : 'false',
         })
       }
     },
+    addWhiteList () {
+      this.whiteList.unshift({ key: '', value: 'true' })
+    },
+    deleteWhiteList (item, index) {
+      this.whiteList.splice(index, 1)
+    },
     submitWhiteList () {
       const whiteList = {}
       for (const item of this.whiteList) {
         if (item.key) {
-          whiteList[item.key] = item.value
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            whiteList[hostname] = (item.value === 'true')
+          }
         }
       }
       this.config.server.whiteList = whiteList
     },
-    deleteWhiteList (item, index) {
-      this.whiteList.splice(index, 1)
-    },
-    addWhiteList () {
-      this.whiteList.unshift({ key: '', value: true })
-    },
     getSpeedTestConfig () {
       return this.config.server.dns.speedTest
     },
@@ -131,6 +146,14 @@ export default {
     delSpeedHostname (item, index) {
       this.getSpeedTestConfig().hostnameList.splice(index, 1)
     },
+    delEmptySpeedHostname () {
+      for (let i = this.getSpeedTestConfig().hostnameList.length - 1; i >= 0; i--) {
+        const hostname = this.handleHostname(this.getSpeedTestConfig().hostnameList[i])
+        if (!hostname) {
+          this.getSpeedTestConfig().hostnameList.splice(i, 1)
+        }
+      }
+    },
     reSpeedTest () {
       this.$api.server.reSpeedTest()
     },
@@ -159,14 +182,14 @@ export default {
       }, 5000)
     },
     async handleTabChange (key) {
+      this.activeTabKey = key
       if (key !== '2' && key !== '3' && key !== '5' && key !== '6' && key !== '7') {
-        return
+        // 没有 JsonEditor，启用SearchBar
+        window.config.disableSearchBar = false
+      } else {
+        // 有 JsonEditor，禁用SearchBar
+        window.config.disableSearchBar = true
       }
-
-      // 规避 vue-json-editor 内容只填充输入框一半的问题
-      setTimeout(() => {
-        window.dispatchEvent(new Event('resize'))
-      }, 10)
     },
   },
 }
@@ -181,13 +204,13 @@ export default {
     <div style="height: 100%" class="json-wrapper">
       <a-tabs
         v-if="config"
-        default-active-key="1"
+        :default-active-key="activeTabKey"
         tab-position="left"
         :style="{ height: '100%' }"
         @change="handleTabChange"
       >
         <a-tab-pane key="1" tab="基本设置">
-          <div style="padding-right:10px">
+          <div v-if="activeTabKey === '1'" style="padding-right:10px">
             <a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
               <a-checkbox v-model="config.server.enabled">
                 随应用启动
@@ -260,13 +283,15 @@ export default {
           </div>
         </a-tab-pane>
         <a-tab-pane key="2" tab="拦截设置">
-          <VueJsonEditor
-            ref="editor" v-model="config.server.intercepts" style="height:100%" mode="code"
-            :show-btns="false" :expanded-on-start="true"
-          />
+          <div v-if="activeTabKey === '2'" style="height:100%">
+            <VueJsonEditor
+              v-model="config.server.intercepts" style="height:100%" mode="code"
+              :show-btns="false" :expanded-on-start="true"
+            />
+          </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="超时时间设置">
-          <div style="height:100%;display:flex;flex-direction:column">
+          <div v-if="activeTabKey === '3'" style="height:100%;display:flex;flex-direction:column">
             <a-form-item label="默认超时时间" :label-col="labelCol" :wrapper-col="wrapperCol">
               请求：<a-input-number v-model="config.server.setting.defaultTimeout" :step="1000" :min="1000" :precision="0" /> ms，对应<code>timeout</code>配置<br>
               连接：<a-input-number v-model="config.server.setting.defaultKeepAliveTimeout" :step="1000" :min="1000" :precision="0" /> ms，对应<code>keepAliveTimeout</code>配置
@@ -274,60 +299,71 @@ export default {
             <hr style="margin-bottom:15px">
             <div>这里指定域名的超时时间：<span class="form-help">（域名配置可使用通配符或正则）</span></div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.setting.timeoutMapping" style="flex-grow:1;min-height:300px;margin-top:10px" mode="code"
+              v-model="config.server.setting.timeoutMapping" style="flex-grow:1;min-height:300px;margin-top:10px" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
         </a-tab-pane>
         <a-tab-pane key="4" tab="域名白名单">
-          <a-row style="margin-top:10px">
-            <a-col span="21">
-              <div>这里配置的域名不会通过代理</div>
-            </a-col>
-            <a-col span="3">
-              <a-button style="margin-left:8px" type="primary" icon="plus" @click="addWhiteList()" />
-            </a-col>
-          </a-row>
-          <a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
-            <a-col :span="21">
-              <a-input v-model="item.key" :disabled="item.value === false" />
-            </a-col>
-            <a-col :span="3">
-              <a-button v-if="item.value !== false" type="danger" icon="minus" @click="deleteWhiteList(item, index)" />
-            </a-col>
-          </a-row>
+          <div v-if="activeTabKey === '4'">
+            <a-row style="margin-top:10px">
+              <a-col span="21">
+                <div>这里配置的域名不会通过代理</div>
+              </a-col>
+              <a-col span="3">
+                <a-button style="margin-left:8px" type="primary" icon="plus" @click="addWhiteList()" />
+              </a-col>
+            </a-row>
+            <a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
+              <a-col :span="16">
+                <a-input v-model="item.key" />
+              </a-col>
+              <a-col :span="5">
+                <a-select v-model="item.value" style="width:100%">
+                  <a-select-option v-for="(item2) of whiteListOptions" :key="item2.value" :value="item2.value">
+                    {{ item2.label }}
+                  </a-select-option>
+                </a-select>
+              </a-col>
+              <a-col :span="3">
+                <a-button type="danger" icon="minus" @click="deleteWhiteList(item, index)" />
+              </a-col>
+            </a-row>
+          </div>
         </a-tab-pane>
         <a-tab-pane key="5" tab="自动兼容程序">
-          <div style="height:100%;display:flex;flex-direction:column">
+          <div v-if="activeTabKey === '5'" style="height:100%;display:flex;flex-direction:column">
             <div>
               说明：<code>自动兼容程序</code>会自动根据错误信息进行兼容性调整，并将兼容设置保存在 <code>~/.dev-sidecar/automaticCompatibleConfig.json</code> 文件中。但并不是所有的兼容设置都是正确的，所以需要通过以下配置来覆盖错误的兼容设置。
             </div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.compatible" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              v-model="config.server.compatible" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
         </a-tab-pane>
         <a-tab-pane key="6" tab="IP预设置">
-          <div style="height:100%;display:flex;flex-direction:column">
+          <div v-if="activeTabKey === '6'" style="height:100%;display:flex;flex-direction:column">
             <div>
               提示：<code>IP预设置</code>功能，优先级高于 <code>DNS设置</code>
               <span class="form-help">（域名配置可使用通配符或正则）</span>
             </div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.preSetIpList" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              v-model="config.server.preSetIpList" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
         </a-tab-pane>
         <a-tab-pane key="7" tab="DNS服务管理">
-          <VueJsonEditor
-            ref="editor" v-model="config.server.dns.providers" style="height:100%" mode="code"
-            :show-btns="false" :expanded-on-start="true"
-          />
+          <div v-if="activeTabKey === '7'" style="height:100%">
+            <VueJsonEditor
+              v-model="config.server.dns.providers" style="height:100%" mode="code"
+              :show-btns="false" :expanded-on-start="true"
+            />
+          </div>
         </a-tab-pane>
         <a-tab-pane key="8" tab="DNS设置">
-          <div>
+          <div v-if="activeTabKey === '8'">
             <a-row style="margin-top:10px">
               <a-col span="21">
                 <div>这里配置哪些域名需要通过国外DNS服务器获取IP进行访问</div>
@@ -338,7 +374,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
               <a-col :span="15">
-                <a-input v-model="item.key" :disabled="item.value === false" />
+                <a-input v-model="item.key" />
               </a-col>
               <a-col :span="6">
                 <a-select v-model="item.value" :disabled="item.value === false" style="width: 100%">
@@ -348,14 +384,13 @@ export default {
                 </a-select>
               </a-col>
               <a-col :span="3">
-                <a-button v-if="item.value !== false" type="danger" icon="minus" @click="deleteDnsMapping(item, index)" />
-                <a-button v-if="item.value === false" type="primary" icon="checked" @click="restoreDefDnsMapping(item, index)" />
+                <a-button type="danger" icon="minus" @click="deleteDnsMapping(item, index)" />
               </a-col>
             </a-row>
           </div>
         </a-tab-pane>
         <a-tab-pane key="9" tab="IP测速">
-          <div class="ip-tester" style="padding-right: 10px">
+          <div v-if="activeTabKey === '9'" class="ip-tester" style="padding-right: 10px">
             <a-alert type="info" message="对从DNS获取到的IP进行测速，使用速度最快的IP进行访问（注意：对使用了增强功能的域名没啥用）" />
             <a-form-item label="开启DNS测速" :label-col="labelCol" :wrapper-col="wrapperCol">
               <a-checkbox v-model="getSpeedTestConfig().enabled">
@@ -385,10 +420,7 @@ export default {
                 <a-button style="margin-left:10px" type="primary" icon="plus" @click="addSpeedHostname()" />
               </a-col>
             </a-row>
-            <a-row
-              v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10"
-              style="margin-top: 5px"
-            >
+            <a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
               <a-col :span="21">
                 <a-input v-model="getSpeedTestConfig().hostnameList[index]" />
               </a-col>
@@ -471,5 +503,8 @@ export default {
     overflow-y: auto;
     overflow-x: hidden;
   }
+  .ant-input-group-addon:first-child {
+    width: 50px;
+  }
 }
 </style>
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 8e05ba6..2f0386d 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -338,9 +338,9 @@ export default {
   <ds-container>
     <template slot="header">
       设置
-      <span>
-        <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
-      </span>
+    </template>
+    <template slot="header-right">
+      <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
     </template>
 
     <div v-if="config">
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
index c914dca..e11740f 100644
--- a/packages/gui/src/view/style/theme/dark.scss
+++ b/packages/gui/src/view/style/theme/dark.scss
@@ -17,7 +17,7 @@ $dark-input: #777; //输入框：背景色
   .ds-container,
   .ds-container .container-header,
   .ant-layout-footer {
-    background: $dark-bg;
+    background-color: $dark-bg;
     color: $dark-text;
   }
   div,
@@ -36,7 +36,7 @@ $dark-input: #777; //输入框：背景色
   /* 高亮块：背景色和字体颜色 */
   /* 警告类型 */
   .ant-alert-warning {
-    background: $dark-bg-highlight;
+    background-color: $dark-bg-highlight;
     border-color: $dark-bg-highlight;
     color: $dark-text;
     /* 关闭图标颜色 */
@@ -46,7 +46,7 @@ $dark-input: #777; //输入框：背景色
   }
   /* 消息类型 */
   .ant-alert-info {
-    background: $dark-bg-highlight;
+    background-color: $dark-bg-highlight;
     border-color: $dark-bg-highlight;
     color: $dark-text;
   }
@@ -66,7 +66,7 @@ $dark-input: #777; //输入框：背景色
     background-color: #666;
   }
   .ant-divider {
-    background: $dark-bd;
+    background-color: $dark-bd;
   }
 
   .help-list .title1 {
@@ -76,7 +76,7 @@ $dark-input: #777; //输入框：背景色
   /* 左侧 */
   /** 背景色 **/
   .ant-layout-sider {
-    background: $dark-bg;
+    background-color: $dark-bg;
   }
   /** Logo **/
   .logo {
@@ -84,14 +84,14 @@ $dark-input: #777; //输入框：背景色
   }
   /** 菜单 **/
   .ant-menu {
-    background: $dark-bg;
+    background-color: $dark-bg;
     color: $dark-text;
   }
   /* 菜单选中时，或鼠标移到菜单上时的样式 */
   .ant-menu-item:hover,
   .ant-menu-submenu .ant-menu-submenu-title:hover,
   .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-    background: $dark-bg-highlight;
+    background-color: $dark-bg-highlight;
     color: #1890ff;
     span {
       color: #1890ff;
@@ -104,7 +104,7 @@ $dark-input: #777; //输入框：背景色
   .ant-input-number,
   .ant-select-selection,
   .ant-input-group-addon {
-    background: $dark-input;
+    background-color: $dark-input;
     border-color: #aaa;
     color: $dark-text;
     &:hover,
@@ -115,7 +115,7 @@ $dark-input: #777; //输入框：背景色
 
   /* 卡片消息：IP测速 */
   .ant-card {
-    background: $dark-input;
+    background-color: $dark-input;
     border-color: $dark-input;
     .ant-card-head {
       border-bottom-color: #929292;
@@ -124,26 +124,26 @@ $dark-input: #777; //输入框：背景色
 
   /* 标签：未启用 */
   .ant-tag-red {
-    background: #4f4749;
+    background-color: #4f4749;
     border-color: #4f4749;
     color: #bf8285;
   }
   /* 标签：已启用 */
   .ant-tag-green {
-    background: #505f5f;
+    background-color: #505f5f;
     border-color: #505f5f;
     color: #90cb9f;
   }
   /* 标签：警告 */
   .ant-tag-orange {
-    background: #5a5750;
+    background-color: #5a5750;
     border-color: #5a5750;
     color: #cfa572;
   }
 
   /* 按钮 */
   .ant-btn:not(.ant-btn-danger, .ant-btn-primary) {
-    background: $dark-btn;
+    background-color: $dark-btn;
     border-color: $dark-btn;
     color: $dark-text;
     &:hover {
@@ -153,7 +153,7 @@ $dark-input: #777; //输入框：背景色
 
   /* 单选框：开关式 */
   .ant-switch:not(.ant-switch-checked) {
-    background: $dark-btn;
+    background-color: $dark-btn;
     border-color: $dark-btn;
     &:hover {
       opacity: 0.8;
@@ -161,7 +161,7 @@ $dark-input: #777; //输入框：背景色
   }
   /* 单选框：按钮式 */
   .ant-radio-button-wrapper {
-    background: $dark-btn;
+    background-color: $dark-btn;
     border-color: $dark-btn;
     color: $dark-text;
     &:hover {
@@ -173,24 +173,24 @@ $dark-input: #777; //输入框：背景色
   .jsoneditor-vue {
     /*整个编辑框：背景色和边框*/
     div.jsoneditor {
-      background: $dark-bg-highlight;
+      background-color: $dark-bg-highlight;
       border: none;
     }
     /* 头部菜单栏：边框  */
     div.jsoneditor-menu {
-      background: $dark-bg-highlight;
+      background-color: $dark-bg-highlight;
       border-color: $dark-bg-highlight;
     }
     /* 内容区域左边：行号 */
     .ace_gutter {
-      background: #444;
+      background-color: #444;
       .ace_gutter-cell {
         color: #aaa;
       }
     }
     /* 内容区域右边：JSON内容 */
     .ace_scroller {
-      background: #555;
+      background-color: #555;
     }
     /* key的颜色 */
     .ace_variable,
@@ -215,12 +215,12 @@ $dark-input: #777; //输入框：背景色
     /* 当前行高亮样式 */
     .ace_gutter-active-line,
     .ace_marker-layer .ace_active-line {
-      background: #838774;
+      background-color: #838774;
     }
     /* 选中行高亮样式 */
     .ace-jsoneditor {
       .ace_marker-layer .ace_selection {
-        background: #8b2929; /* 同时应用于当前选中的搜索结果项的背景色，建议与搜索结果边框颜色保持一致 */
+        background-color: #8b2929; /* 同时应用于当前选中的搜索结果项的背景色，建议与搜索结果边框颜色保持一致 */
       }
 
       /* 光标颜色 */
diff --git a/packages/mitmproxy/src/lib/interceptor/impl/res/AfterOPTIONSHeaders.js b/packages/mitmproxy/src/lib/interceptor/impl/res/AfterOPTIONSHeaders.js
index de72111..2008818 100644
--- a/packages/mitmproxy/src/lib/interceptor/impl/res/AfterOPTIONSHeaders.js
+++ b/packages/mitmproxy/src/lib/interceptor/impl/res/AfterOPTIONSHeaders.js
@@ -17,11 +17,10 @@ module.exports = {
       'Cross-Origin-Resource-Policy': interceptOpt.optionsCrossPolicy || 'cross-origin',
     }
 
-    res.setHeader('DS-AfterOPTIONSHeaders-Interceptor', '1')
-
     // 替换响应头
     if (responseReplaceApi.replaceResponseHeaders({ ...headers }, res, proxyRes)) {
       log.info('AfterOPTIONSHeaders intercept:', JSON.stringify(headers))
+      res.setHeader('DS-AfterOPTIONSHeaders-Interceptor', '1')
     } else {
       res.setHeader('DS-AfterOPTIONSHeaders-Interceptor', '0')
     }
diff --git a/packages/mitmproxy/src/options.js b/packages/mitmproxy/src/options.js
index e3b3b89..6504dee 100644
--- a/packages/mitmproxy/src/options.js
+++ b/packages/mitmproxy/src/options.js
@@ -108,7 +108,7 @@ module.exports = (serverConfig) => {
       const hostname = req.url.split(':')[0]
 
       // 配置了白名单的域名，将跳过代理
-      const inWhiteList = matchUtil.matchHostname(whiteList, hostname, 'in whiteList') != null
+      const inWhiteList = !!matchUtil.matchHostname(whiteList, hostname, 'in whiteList')
       if (inWhiteList) {
         log.info(`为白名单域名，不拦截: ${hostname}, headers:`, jsonApi.stringify2(req.headers))
         return false // 不拦截

From 67c7e39000a2a5c726f698dbe3fc7d59807fdd28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Wed, 26 Feb 2025 11:22:00 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E9=94=AE=EF=BC=9A`Ctrl=20+=20F`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gui/package.json                   |   1 +
 packages/gui/src/background.js              |  36 ++++---
 packages/gui/src/main.js                    |   2 +
 packages/gui/src/view/App.vue               | 103 +++++++++++++++++++-
 packages/gui/src/view/pages/setting.vue     |  10 +-
 packages/gui/src/view/style/theme/dark.scss |   9 ++
 pnpm-lock.yaml                              |  12 +++
 7 files changed, 156 insertions(+), 17 deletions(-)

diff --git a/packages/gui/package.json b/packages/gui/package.json
index e5fe7cd..24af998 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -34,6 +34,7 @@
     "request-progress": "^3.0.0",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
+    "search-bar-vue2": "^1.0.0",
     "vue": "^2.7.16",
     "vue-json-editor-fix-cn": "^1.4.3",
     "vue-router": "^3.6.5"
diff --git a/packages/gui/src/background.js b/packages/gui/src/background.js
index 0b2763c..5be8601 100644
--- a/packages/gui/src/background.js
+++ b/packages/gui/src/background.js
@@ -298,28 +298,38 @@ function createWindow (startHideWindow, autoQuitIfError = true) {
   })
 
   const shortcut = (event, input) => {
-    // 按 F12，打开/关闭 开发者工具
-    if (input.key === 'F12') {
-      // 阻止默认的按键事件行为
+    if (input.key === 'F12' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+      // 按 F12，打开/关闭 开发者工具
       event.preventDefault()
-      // 切换开发者工具显示状态
       switchDevTools()
-      // eslint-disable-next-line style/brace-style
-    }
-    // 按 F5，刷新页面
-    else if (input.key === 'F5') {
-      // 阻止默认的按键事件行为
+    } else if (input.key === 'F5' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+      // 按 F5，刷新页面
       event.preventDefault()
-      // 刷新页面
       win.webContents.reload()
+    } else {
+      // 全文检索框（SearchBar）相关快捷键
+      if ((input.key === 'F' || input.key === 'f') && input.type === 'keyDown' && input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 Ctrl + F，显示或隐藏全文检索框（SearchBar）
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'show-hide' })
+      } else if (input.key === 'Escape' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 ESC，隐藏全文检索框（SearchBar）
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'hide' })
+      } else if (input.key === 'F3' && input.type === 'keyDown' && !input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 F3，全文检索框（SearchBar）定位到下一个
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'next' })
+      } else if (input.key === 'F3' && input.type === 'keyDown' && !input.control && input.shift && !input.alt && !input.meta) {
+        // 按 Shift + F3，全文检索框（SearchBar）定位到上一个
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'previous' })
+      }
     }
   }
 
   // 监听键盘事件
   win.webContents.on('before-input-event', (event, input) => {
-    if (input.type !== 'keyUp' || input.control || input.alt || input.shift || input.meta) {
-      return
-    }
     win.webContents.executeJavaScript('config')
       .then((value) => {
         console.info('window.config:', value, ', key:', input.key)
diff --git a/packages/gui/src/main.js b/packages/gui/src/main.js
index 198abb9..e89daaa 100644
--- a/packages/gui/src/main.js
+++ b/packages/gui/src/main.js
@@ -1,6 +1,7 @@
 import antd from 'ant-design-vue'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import SearchBar from 'search-bar-vue2'
 import { ipcRenderer } from 'electron'
 import view from './view'
 import App from './view/App.vue'
@@ -25,6 +26,7 @@ try {
   Vue.config.productionTip = false
   Vue.use(antd)
   Vue.use(VueRouter)
+  Vue.use(SearchBar)
   Vue.component(DsContainer)
   // 3. 创建 router 实例，然后传 `routes` 配置
   // 你还可以传别的配置参数, 不过先这么简单着吧。
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index 8b1bb95..a47d7b9 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -1,4 +1,5 @@
 <script>
+import { ipcRenderer } from 'electron'
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { colorTheme } from './composables/theme'
@@ -11,6 +12,9 @@ export default {
       info: {},
       menus: undefined,
       config: undefined,
+      hideSearchBar: true,
+      searchBarIsFocused: false,
+      searchBarInputKeyupTimeout: null,
     }
   },
   computed: {
@@ -35,13 +39,95 @@ export default {
     this.$api.info.get().then((ret) => {
       this.info = ret
     })
+
+    ipcRenderer.on('search-bar', (_, message) => {
+      if (window.config.disableSearchBar) {
+        this.hideSearchBar = true
+        return
+      }
+
+      // 如果不是显示/隐藏操作，并且还未显示检索框，先按显示操作处理
+      if (!message.key.includes('hide') && this.hideSearchBar) {
+        message = { key: 'show-hide' }
+      }
+
+      try {
+        if (message.key === 'show-hide') { // 显示/隐藏
+          const hide = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
+
+          // 如果为隐藏操作，但SearchBar未隐藏且未获取焦点，则获取焦点
+          if (hide && !this.hideSearchBar && !this.searchBarIsFocused) {
+            this.doSearchBarInputFocus()
+            return
+          }
+
+          this.hideSearchBar = hide
+
+          // 显示后，获取输入框焦点
+          if (!this.hideSearchBar) {
+            this.doSearchBarInputFocus()
+          } else {
+            this.searchBarIsFocused = false
+          }
+        } else if (message.key === 'hide') { // 隐藏
+          this.hideSearchBar = true
+          this.searchBarIsFocused = false
+        } else if (message.key === 'next') { // 下一项
+          this.$refs.searchBar.next()
+        } else if (message.key === 'previous') { // 上一项
+          this.$refs.searchBar.previous()
+        }
+      } catch (e) {
+        console.error('操作SearchBar出现异常：', e)
+      }
+
+      const input = this.getSearchBarInput()
+      if (input) {
+        input.addEventListener('focus', this.onSearchBarInputFocus)
+        input.addEventListener('blur', this.onSearchBarInputBlur)
+        input.addEventListener('keydown', this.onSearchBarInputKeydown)
+        input.addEventListener('keyup', this.onSearchBarInputKeyup)
+      }
+    })
   },
   methods: {
+    getSearchBarInput () {
+      return this.$refs.searchBar.$el.querySelector('input[type=text]')
+    },
+    onSearchBarInputFocus () {
+      this.searchBarIsFocused = true
+    },
+    onSearchBarInputBlur () {
+      this.searchBarIsFocused = false
+    },
+    onSearchBarInputKeydown () {
+      clearTimeout(this.searchBarInputKeyupTimeout)
+    },
+    onSearchBarInputKeyup (e) {
+      if (!this.$refs.searchBar || e.key === 'Enter' || e.key === 'F3') {
+        return
+      }
+      clearTimeout(this.searchBarInputKeyupTimeout)
+      this.searchBarInputKeyupTimeout = setTimeout(() => {
+        // 连续调用以下两个方法，为了获取检索结果中的第一项
+        this.$refs.searchBar.next()
+        this.$refs.searchBar.previous()
+      }, 150)
+    },
+    doSearchBarInputFocus () {
+      setTimeout(() => {
+        const input = this.getSearchBarInput()
+        if (input) {
+          input.focus()
+        }
+      }, 100)
+    },
     titleClick (item) {
       console.log('title click:', item)
     },
     menuClick (item) {
       console.log('menu click:', item)
+      window.config.disableSearchBar = false
       this.$router.replace(item.path)
     },
   },
@@ -51,6 +137,13 @@ export default {
 <template>
   <a-config-provider :locale="locale">
     <div class="ds_layout" :class="themeClass">
+      <SearchBar ref="searchBar"
+                 :root="'#document'"
+                 :highlightClass="'search-bar-highlight'"
+                 :selectedClass="'selected-highlight'"
+                 :hiden.sync="hideSearchBar"
+                 style="inset:auto auto 53px 210px; background-color:#ddd"
+      />
       <a-layout>
         <a-layout-sider :theme="theme">
           <div class="logo" />
@@ -78,7 +171,7 @@ export default {
         <a-layout>
           <!-- <a-layout-header>Header</a-layout-header> -->
           <a-layout-content>
-            <router-view />
+            <router-view id="document" />
           </a-layout-content>
           <a-layout-footer>
             <div class="footer">
@@ -139,4 +232,12 @@ body {
     border: 0;
   }
 }
+.search-bar-highlight {
+  background-color: #ef0fff;
+  color: #fdfdfd;
+
+  &.selected-highlight {
+    background-color: #17a450;
+  }
+}
 </style>
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 2f0386d..598a070 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -169,8 +169,8 @@ export default {
         shortcut += 'Meta + '
       }
 
-      // 如果以上按钮都没有按下，并且当前键不是F1~F4、F6~F11时，则直接返回（注：F5已经是刷新页面快捷键、F12已经是打开DevTools的快捷键了）
-      if (shortcut === '' && !key.match(/^F([1-46-9]|1[01])$/g)) {
+      // 如果以上按钮都没有按下，并且当前键不是F1、F2、F4、F6~F11时，则直接返回（注：F5已经是刷新页面快捷键、F12已经是打开DevTools的快捷键了）
+      if (shortcut === '' && !key.match(/^F([1246-9]|1[01])$/g)) {
         this.config.app.showHideShortcut = '无'
         return
       }
@@ -178,6 +178,10 @@ export default {
       // 拼接键值
       shortcut += key
 
+      if (shortcut === 'Ctrl + F' || shortcut === 'Shift + F3') {
+        shortcut = '无' // 如果是其他已被占用快捷键，则设置为 '无'
+      }
+
       this.config.app.showHideShortcut = shortcut
     },
     async applyBefore () {
@@ -430,7 +434,7 @@ export default {
       <a-form-item label="打开窗口快捷键" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-input v-model="config.app.showHideShortcut" @change="shortcutChange" @keydown="shortcutKeyDown" @keyup="shortcutKeyUp" />
         <div class="form-help">
-          部分快捷键已被占用：F5=刷新页面，F12=开发者工具（DevTools）
+          部分快捷键已被占用：<code>F5</code>、<code>F12</code>、<code>Ctrl+F</code>、<code>F3</code>、<code>Shift+F3</code>
         </div>
       </a-form-item>
       <a-form-item label="启动时窗口状态" :label-col="labelCol" :wrapper-col="wrapperCol">
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
index e11740f..41a5ad7 100644
--- a/packages/gui/src/view/style/theme/dark.scss
+++ b/packages/gui/src/view/style/theme/dark.scss
@@ -239,4 +239,13 @@ $dark-input: #777; //输入框：背景色
       border-color: #8b2929;
     }
   }
+
+  .search-bar {
+    div {
+      color: #000;
+    }
+    span {
+      color: #000;
+    }
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74d087b..302acef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,6 +108,9 @@ importers:
       sass-loader:
         specifier: ^16.0.3
         version: 16.0.3(sass@1.81.0)(webpack@5.96.1)
+      search-bar-vue2:
+        specifier: ^1.0.0
+        version: 1.0.0(vue@2.7.16)
       vue:
         specifier: ^2.7.16
         version: 2.7.16
@@ -6011,6 +6014,11 @@ packages:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
 
+  search-bar-vue2@1.0.0:
+    resolution: {integrity: sha512-e65f34kiWo/ub6fOsXGC7SU1A2HWyTUhQUn3AhZfO/f002XcCOaRghkWM0sADE8/OaL5MWHZ1sxDjzq2T9vWIQ==}
+    peerDependencies:
+      vue: ^2.6.14
+
   select-hose@2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
 
@@ -13910,6 +13918,10 @@ snapshots:
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
+  search-bar-vue2@1.0.0(vue@2.7.16):
+    dependencies:
+      vue: 2.7.16
+
   select-hose@2.0.0: {}
 
   selfsigned@2.4.1:

From 7519956b28cf130b96101e924bc56a871908a537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Wed, 26 Feb 2025 11:43:19 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=20MockInput?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=9B=AE=E7=9A=84=E6=98=AF?=
 =?UTF-8?q?=E4=B8=BA=E4=BA=86=20`=E5=86=85=E5=AE=B9=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD`=20=E8=83=BD=E5=A4=9F=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=88=B0=E8=BE=93=E5=85=A5=E6=A1=86=E4=B8=AD=E7=9A=84=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gui/src/view/components/mock-input.vue    | 68 +++++++++++++++++++
 packages/gui/src/view/pages/plugin/git.vue    |  6 +-
 .../gui/src/view/pages/plugin/overwall.vue    |  6 +-
 packages/gui/src/view/pages/proxy.vue         | 13 +++-
 packages/gui/src/view/pages/server.vue        |  8 ++-
 packages/gui/src/view/style/theme/dark.scss   |  2 +-
 6 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 packages/gui/src/view/components/mock-input.vue

diff --git a/packages/gui/src/view/components/mock-input.vue b/packages/gui/src/view/components/mock-input.vue
new file mode 100644
index 0000000..87a191a
--- /dev/null
+++ b/packages/gui/src/view/components/mock-input.vue
@@ -0,0 +1,68 @@
+<!--
+  组件：模拟输入框（当前为简易版本，只添加了value属性）
+  作用：全文检索（SearchBar）组件，无法检索 `<a-input/>` 的内容，所以使用 `<span contenteditable="true"></span>` 代替。
+-->
+<script>
+export default {
+  name: 'MockInput',
+  props: {
+    value: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  },
+  methods: {
+    onKeydown (event) {
+      // 不允许输入换行符
+      if (event.key === 'Enter' || event.keyCode === 13) {
+        event.preventDefault()
+      }
+    },
+    onChange () {
+      if (this.$refs.input.textContent !== this.value) {
+        this.$emit('input', this.$refs.input.textContent)
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <span ref="input" class="fake-input" contenteditable="true" :title="value" @focus="onChange" @blur="onChange" @keydown="onKeydown" v-html="value" />
+</template>
+
+<style lang="scss">
+.fake-input {
+  /* 鼠标样式 */
+  cursor: text;
+
+  /* 内容不换行 */
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: middle;
+
+  /* 复制 ant-input 样式 */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px 11px;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 32px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+.fine-tuning .fake-input {
+  margin-top: -2px;
+}
+</style>
diff --git a/packages/gui/src/view/pages/plugin/git.vue b/packages/gui/src/view/pages/plugin/git.vue
index d0605a5..fcaad6a 100644
--- a/packages/gui/src/view/pages/plugin/git.vue
+++ b/packages/gui/src/view/pages/plugin/git.vue
@@ -1,8 +1,10 @@
 <script>
 import Plugin from '../../mixins/plugin'
+import MockInput from '@/view/components/mock-input.vue'
 
 export default {
   name: 'Git',
+  components: { MockInput },
   mixins: [Plugin],
   data () {
     return {
@@ -107,8 +109,8 @@ export default {
               </a-col>
             </a-row>
             <a-row v-for="(item, index) of noProxyUrls" :key="index" :gutter="10">
-              <a-col :span="22">
-                <a-input v-model="item.key" />
+              <a-col :span="22" class="fine-tuning">
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="2">
                 <a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />
diff --git a/packages/gui/src/view/pages/plugin/overwall.vue b/packages/gui/src/view/pages/plugin/overwall.vue
index e966003..bdcc961 100644
--- a/packages/gui/src/view/pages/plugin/overwall.vue
+++ b/packages/gui/src/view/pages/plugin/overwall.vue
@@ -1,8 +1,10 @@
 <script>
 import Plugin from '../../mixins/plugin'
+import MockInput from '@/view/components/mock-input.vue'
 
 export default {
   name: 'Overwall',
+  components: { MockInput },
   mixins: [Plugin],
   data () {
     return {
@@ -168,8 +170,8 @@ export default {
               </a-col>
             </a-row>
             <a-row v-for="(item, index) of targets" :key="index" :gutter="10">
-              <a-col :span="18">
-                <a-input v-model="item.key" />
+              <a-col :span="18" class="fine-tuning">
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="4">
                 <a-select v-model="item.value" style="width:100%">
diff --git a/packages/gui/src/view/pages/proxy.vue b/packages/gui/src/view/pages/proxy.vue
index 89b5cf0..00aa93a 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -1,8 +1,10 @@
 <script>
 import Plugin from '../mixins/plugin'
+import MockInput from '@/view/components/mock-input.vue'
 
 export default {
   name: 'Proxy',
+  components: { MockInput },
   mixins: [Plugin],
   data () {
     return {
@@ -164,9 +166,9 @@ export default {
             <a-button type="primary" icon="plus" @click="addExcludeIp()" />
           </a-col>
         </a-row>
-        <a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10">
+        <a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10" class="fine-tuning">
           <a-col :span="17">
-            <a-input v-model="item.key" />
+            <MockInput v-model="item.key" />
           </a-col>
           <a-col :span="5">
             <a-select v-model="item.value" style="width:100%">
@@ -216,3 +218,10 @@ export default {
     </a-drawer>
   </ds-container>
 </template>
+
+<style lang="scss">
+/*样式微调*/
+.fine-tuning .ant-btn-danger {
+  margin-top: 3px;
+}
+</style>
diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index b5c87c8..44ce560 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -2,11 +2,13 @@
 import _ from 'lodash'
 import VueJsonEditor from 'vue-json-editor-fix-cn'
 import Plugin from '../mixins/plugin'
+import MockInput from '@/view/components/mock-input.vue'
 
 export default {
   name: 'Server',
   components: {
     VueJsonEditor,
+    MockInput,
   },
   mixins: [Plugin],
   data () {
@@ -316,7 +318,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
               <a-col :span="16">
-                <a-input v-model="item.key" />
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="5">
                 <a-select v-model="item.value" style="width:100%">
@@ -374,7 +376,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
               <a-col :span="15">
-                <a-input v-model="item.key" />
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="6">
                 <a-select v-model="item.value" :disabled="item.value === false" style="width: 100%">
@@ -422,7 +424,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
               <a-col :span="21">
-                <a-input v-model="getSpeedTestConfig().hostnameList[index]" />
+                <MockInput v-model="getSpeedTestConfig().hostnameList[index]" />
               </a-col>
               <a-col :span="2">
                 <a-button style="margin-left:10px" type="danger" icon="minus" @click="delSpeedHostname(item, index)" />
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
index 41a5ad7..97be4b1 100644
--- a/packages/gui/src/view/style/theme/dark.scss
+++ b/packages/gui/src/view/style/theme/dark.scss
@@ -99,7 +99,7 @@ $dark-input: #777; //输入框：背景色
   }
 
   /* 输入框、下拉框 */
-  .ant-input,
+  .ant-input, .fake-input,
   .ant-input-number-input,
   .ant-input-number,
   .ant-select-selection,