From 593611f467d6a1f8bf33ee0a10d76a180dfcdff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Thu, 27 Feb 2025 15:07:43 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20MockInput=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gui/src/view/App.vue                 |  9 ---
 .../gui/src/view/components/mock-input.vue    | 37 +-----------
 packages/gui/src/view/pages/help.vue          |  4 +-
 packages/gui/src/view/pages/plugin/git.vue    |  6 +-
 packages/gui/src/view/pages/plugin/node.vue   |  2 +-
 .../gui/src/view/pages/plugin/overwall.vue    |  6 +-
 packages/gui/src/view/pages/plugin/pip.vue    |  2 +-
 packages/gui/src/view/pages/proxy.vue         |  4 +-
 packages/gui/src/view/pages/server.vue        |  6 +-
 packages/gui/src/view/pages/setting.vue       |  8 +--
 packages/gui/src/view/style/index.scss        | 57 ++++++-------------
 packages/gui/src/view/style/theme/dark.scss   |  2 +-
 12 files changed, 37 insertions(+), 106 deletions(-)

diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index d8b58b8..eb04152 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -191,15 +191,6 @@ export default {
 body {
   height: 100%;
 }
-.mt10 {
-  margin-top: 10px;
-}
-.mt5 {
-  margin-top: 5px;
-}
-.mt20 {
-  margin-top: 20px;
-}
 .ds_layout {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/gui/src/view/components/mock-input.vue b/packages/gui/src/view/components/mock-input.vue
index 5558fe3..6535f4f 100644
--- a/packages/gui/src/view/components/mock-input.vue
+++ b/packages/gui/src/view/components/mock-input.vue
@@ -29,40 +29,5 @@ export default {
 </script>
 
 <template>
-  <span ref="input" class="fake-input" contenteditable="true" spellcheck="false" :title="value" @blur="onBlur" @keydown="onKeydown" v-html="value" />
+  <span ref="input" class="ant-input" contenteditable="true" spellcheck="false" :title="value" @blur="onBlur" @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/help.vue b/packages/gui/src/view/pages/help.vue
index 487fe3d..1e332e6 100644
--- a/packages/gui/src/view/pages/help.vue
+++ b/packages/gui/src/view/pages/help.vue
@@ -27,8 +27,8 @@ export default {
       帮助中心
     </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>
+      <a-button class="mr10" @click="openExternal('https://github.com/docmirror/dev-sidecar/issues/new/choose')">反馈问题</a-button>
+      <a-button class="mr10" icon="profile" @click="openLog()">查看日志</a-button>
     </template>
 
     <div v-if="config" class="help-list">
diff --git a/packages/gui/src/view/pages/plugin/git.vue b/packages/gui/src/view/pages/plugin/git.vue
index fcaad6a..9f65ba3 100644
--- a/packages/gui/src/view/pages/plugin/git.vue
+++ b/packages/gui/src/view/pages/plugin/git.vue
@@ -109,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" class="fine-tuning">
-                <MockInput v-model="item.key" />
+              <a-col :span="22">
+                <MockInput v-model="item.key" class="mt-2" />
               </a-col>
               <a-col :span="2">
                 <a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />
@@ -122,7 +122,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/plugin/node.vue b/packages/gui/src/view/pages/plugin/node.vue
index 3d0b41c..0c9b2a5 100644
--- a/packages/gui/src/view/pages/plugin/node.vue
+++ b/packages/gui/src/view/pages/plugin/node.vue
@@ -136,7 +136,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/plugin/overwall.vue b/packages/gui/src/view/pages/plugin/overwall.vue
index 4bf2873..a1db6e0 100644
--- a/packages/gui/src/view/pages/plugin/overwall.vue
+++ b/packages/gui/src/view/pages/plugin/overwall.vue
@@ -170,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" class="fine-tuning">
-                <MockInput v-model="item.key" />
+              <a-col :span="18">
+                <MockInput v-model="item.key" class="mt-2" />
               </a-col>
               <a-col :span="4">
                 <a-select v-model="item.value" style="width:100%">
@@ -223,7 +223,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/plugin/pip.vue b/packages/gui/src/view/pages/plugin/pip.vue
index 6250a95..48574b6 100644
--- a/packages/gui/src/view/pages/plugin/pip.vue
+++ b/packages/gui/src/view/pages/plugin/pip.vue
@@ -122,7 +122,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/proxy.vue b/packages/gui/src/view/pages/proxy.vue
index 1142079..668fcbc 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -168,7 +168,7 @@ export default {
         </a-row>
         <a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10" class="fine-tuning">
           <a-col :span="17">
-            <MockInput v-model="item.key" />
+            <MockInput v-model="item.key" class="mt-1" />
           </a-col>
           <a-col :span="5">
             <a-select v-model="item.value" style="width:100%">
@@ -185,7 +185,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index bbe0005..1216efb 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -437,7 +437,7 @@ export default {
                 <a-button type="primary" icon="plus" @click="reSpeedTest()">
                   立即重新测速
                 </a-button>
-                <a-button class="md-ml-10" type="primary" icon="reload" @click="reloadAllSpeedTester()">
+                <a-button class="ml10" type="primary" icon="reload" @click="reloadAllSpeedTester()">
                   刷新
                 </a-button>
               </a-col>
@@ -445,7 +445,7 @@ export default {
 
             <a-row :gutter="20">
               <a-col v-for="(item, key) of speedTestList" :key="key" span="12">
-                <a-card size="small" class="md-mt-10" :title="key">
+                <a-card size="small" class="mt10" :title="key">
                   <a slot="extra" href="javascript:void(0)" :title="key" style="cursor:default">
                     <a-icon v-if="item.alive.length > 0" type="check" />
                     <a-icon v-else type="info-circle" />
@@ -465,7 +465,7 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 8c1e49b..ec8bf56 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -344,7 +344,7 @@ export default {
       设置
     </template>
     <template slot="header-right">
-      <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
+      <a-button class="mr10" icon="profile" @click="openLog()">查看日志</a-button>
     </template>
 
     <div v-if="config">
@@ -495,7 +495,7 @@ export default {
       </a-form-item>
       <a-form-item label="最大日志文件大小" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-input-number ref="maxLogFileSize" v-model="config.app.maxLogFileSize" :step="maxLogFileSizeStep" :min="0" spellcheck="false" />
-        <a-select v-model="config.app.maxLogFileSizeUnit" class="md-ml-5" @change="onMaxLogFileSizeUnitChange">
+        <a-select v-model="config.app.maxLogFileSizeUnit" class="ml5" @change="onMaxLogFileSizeUnitChange">
           <a-select-option v-for="(item) of maxLogFileSizeUnit" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
@@ -514,10 +514,10 @@ export default {
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button :loading="removeUserConfigLoading" class="md-mr-10" icon="sync" @click="restoreFactorySettings()">
+        <a-button :loading="removeUserConfigLoading" class="mr10" icon="sync" @click="restoreFactorySettings()">
           恢复出厂设置
         </a-button>
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+        <a-button :loading="resetDefaultLoading" class="mr10" icon="sync" @click="resetDefault()">
           恢复默认
         </a-button>
         <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
diff --git a/packages/gui/src/view/style/index.scss b/packages/gui/src/view/style/index.scss
index a02c5d6..7d2f1f5 100644
--- a/packages/gui/src/view/style/index.scss
+++ b/packages/gui/src/view/style/index.scss
@@ -17,60 +17,35 @@
   }
 }
 
-.md-mr-5 {
-  margin-right: 5px;
-}
-.md-mr-10 {
-  margin-right: 10px;
-}
-.md-mr-15 {
-  margin-right: 15px;
-}
-.md-mr-20 {
-  margin-right: 20px;
+span.ant-input {
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: middle;
 }
 
-.md-mt-0 {
-  margin-top: 0;
+.mr10 {
+  margin-right: 10px;
 }
-.md-mt-5 {
-  margin-top: 5px;
+
+.mt-1 {
+  margin-top: -1px;
 }
-.md-mt-10 {
+.mt-2 {
+  margin-top: -2px;
+}
+.mt10 {
   margin-top: 10px;
 }
-.md-mt-15 {
-  margin-top: 15px;
-}
-.md-mt-20 {
+.mt20 {
   margin-top: 20px;
 }
 
-.md-ml-5 {
+.ml5 {
   margin-left: 5px;
 }
-.md-ml-10 {
+.ml10 {
   margin-left: 10px;
 }
-.md-ml-15 {
-  margin-left: 15px;
-}
-.md-ml-20 {
-  margin-left: 20px;
-}
-
-.md-mb-5 {
-  margin-bottom: 5px;
-}
-.md-mb-10 {
-  margin-bottom: 10px;
-}
-.md-mb-15 {
-  margin-bottom: 15px;
-}
-.md-mb-20 {
-  margin-bottom: 20px;
-}
 
 ol {
   margin-block-start: 0em;
diff --git a/packages/gui/src/view/style/theme/dark.scss b/packages/gui/src/view/style/theme/dark.scss
index 97be4b1..41a5ad7 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, .fake-input,
+  .ant-input,
   .ant-input-number-input,
   .ant-input-number,
   .ant-select-selection,