feature: 新增 MockInput 组件，用于部分列表配置页面，目的是为了SearchBar能够搜索到输入框中的内容。

packages/gui/src/view/App.vue

@@ -1,15 +1,11 @@
 <script>
 import { ipcRenderer } from 'electron'
-import { SearchBar } from 'search-bar-vue2'
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { colorTheme } from './composables/theme'
 
 export default {
   name: 'App',
-  components: {
-    SearchBar,
-  },
   data () {
     return {
       locale: zhCN,

packages/gui/src/view/components/container.vue

@@ -23,16 +23,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;
+    top: 0;
-    right: 0px;
+    right: 0;
-    bottom: 0px;
+    bottom: 0;
-    left: 0px;
+    left: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -41,7 +41,7 @@ export default {
   .container-header {
     padding: 15px;
     border-bottom: 1px solid #eee;
-    background: #fff;
+    background-color: #fff;
     height: 60px;
     display: flex;
     align-items: center;

packages/gui/src/view/components/mock-input.vue

@@ -0,0 +1,65 @@
+<!--
+  组件：模拟输入框（当前为简易版本，只添加了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;
+
+  /* 内容不换行 */
+  overflow-y: auto;
+  /*white-space: nowrap;
+  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;
+}
+</style>

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)
+    },
   },
 }

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 {
@@ -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
@@ -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" />
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="2">
                 <a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />

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 {
@@ -40,8 +42,8 @@ export default {
       this.initServer()
     },
     async applyBefore () {
-      this.saveTarget()
+      this.submitTarget()
-      this.saveServer()
+      this.submitServer()
     },
     initTarget () {
       this.targets = []
@@ -60,11 +62,14 @@ export default {
     deleteTarget (item, index) {
       this.targets.splice(index, 1)
     },
-    saveTarget () {
+    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
@@ -161,7 +169,7 @@ export default {
             </a-row>
             <a-row v-for="(item, index) of targets" :key="index" :gutter="10">
               <a-col :span="18">
-                <a-input v-model="item.key" />
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="4">
                 <a-select v-model="item.value" style="width:100%">

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 {
@@ -68,7 +70,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
@@ -163,7 +168,7 @@ export default {
         </a-row>
         <a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10">
           <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%">

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 () {
@@ -68,8 +70,9 @@ export default {
       }
     },
     async applyBefore () {
-      this.submitDnsMapping()
+      this.submitDnsMappings()
       this.submitWhiteList()
+      this.delEmptySpeedHostname()
     },
     async applyAfter () {
       if (this.status.server.enabled) {
@@ -87,11 +90,14 @@ 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
@@ -127,7 +133,10 @@ export default {
       const whiteList = {}
       for (const item of this.whiteList) {
         if (item.key) {
-          whiteList[item.key] = item.value === 'true'
+          const hostname = this.handleHostname(item.key)
+          if (hostname) {
+            whiteList[hostname] = (item.value === 'true')
+          }
         }
       }
       this.config.server.whiteList = whiteList
@@ -141,6 +150,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()
     },
@@ -305,7 +322,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%">
@@ -360,7 +377,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" />
+                <MockInput v-model="item.key" />
               </a-col>
               <a-col :span="6">
                 <a-select v-model="item.value" :disabled="item.value === false" style="width: 100%">
@@ -407,12 +424,9 @@ export default {
                 <a-button style="margin-left:10px" type="primary" icon="plus" @click="addSpeedHostname()" />
               </a-col>
             </a-row>
-            <a-row
+            <a-row v-for="(item, index) of getSpeedTestConfig().hostnameList" :key="index" :gutter="10" style="margin-top: 5px">
-              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)" />
@@ -493,5 +507,8 @@ export default {
     overflow-y: auto;
     overflow-x: hidden;
   }
+  .ant-input-group-addon:first-child {
+    width: 50px;
+  }
 }
 </style>

packages/gui/src/view/pages/setting.vue

@@ -48,18 +48,24 @@ export default {
         case 'ArrowDown':
         case 'ArrowLeft':
         case 'ArrowRight':
-          return '无'
+          return ''
-
-        // 不支持监听以下几个键，返回空
-        case 'NumpadDivide': // return 'Num/'
-        case 'NumpadMultiply': // return 'Num*'
-        case 'NumpadDecimal': // return 'Num.'
-        case 'NumpadSubtract': // return 'Num-'
-        case 'NumpadAdd': // return 'Num+'
-          return '无'
       }
 
       switch (event.code) {
+        // F1 ~ F12
+        case 'F1': return 'F1'
+        case 'F2': return 'F2'
+        case 'F3': return 'F3'
+        case 'F4': return 'F4'
+        case 'F5': return 'F5'
+        case 'F6': return 'F6'
+        case 'F7': return 'F7'
+        case 'F8': return 'F8'
+        case 'F9': return 'F9'
+        case 'F10': return 'F10'
+        case 'F11': return 'F11'
+        case 'F12': return 'F12'
+
         // 0 ~ 9
         case 'Digit0': return '0'
         case 'Digit1': return '1'
@@ -104,6 +110,14 @@ export default {
         case 'Numpad8': return 'Num8'
         case 'Numpad9': return 'Num9'
         case 'Numpad0': return 'Num0'
+
+        // 不支持监听以下几个键，返回空
+        case 'NumpadDivide': // return 'Num/'
+        case 'NumpadMultiply': // return 'Num*'
+        case 'NumpadDecimal': // return 'Num.'
+        case 'NumpadSubtract': // return 'Num-'
+        case 'NumpadAdd': // return 'Num+'
+          return ''
       }
 
       // 字母
@@ -112,7 +126,7 @@ export default {
       }
 
       console.error(`未能识别的按键：key=${event.key}, code=${event.code}, keyCode=${event.keyCode}`)
-      return '无'
+      return ''
     },
     async disableBeforeInputEvent () {
       clearTimeout(window.enableBeforeInputEventTimeout)

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;
@@ -99,12 +99,12 @@ $dark-input: #777; //输入框：背景色
   }
 
   /* 输入框、下拉框 */
-  .ant-input,
+  .ant-input, .fake-input,
   .ant-input-number-input,
   .ant-input-number,
   .ant-select-selection,
   .ant-input-group-addon {
-    background: $dark-input;
+    background-color: $dark-input;
     border-color: #aaa;
     color: $dark-text;
     &:hover,
@@ -112,10 +112,13 @@ $dark-input: #777; //输入框：背景色
       border-color: #fff;
     }
   }
+  .fake-input {
+    background-color: red;
+  }
 
   /* 卡片消息：IP测速 */
   .ant-card {
-    background: $dark-input;
+    background-color: $dark-input;
     border-color: $dark-input;
     .ant-card-head {
       border-bottom-color: #929292;
@@ -124,26 +127,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 +156,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 +164,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 +176,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 +218,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; /* 同时应用于当前选中的搜索结果项的背景色，建议与搜索结果边框颜色保持一致 */
       }
 
       /* 光标颜色 */