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] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9E=20MockInput=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=9B=AE=E7=9A=84=E6=98=AF=E4=B8=BA?=
 =?UTF-8?q?=E4=BA=86=20`=E5=86=85=E5=AE=B9=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD`=20=E8=83=BD=E5=A4=9F=E6=90=9C=E7=B4=A2=E5=88=B0?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E4=B8=AD=E7=9A=84=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=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,