optimize: 优化头部样式，避免检索内容后样式变乱了。优化SearchBar样式。

wangliang181230 · wangliang181230 · commit c2d24e571336 · 2025-02-21T15:40:43.000+08:00
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
@@ -49,22 +49,26 @@ export default {
         message = { key: 'show-hide' }
       }
 
-      if (message.key === 'show-hide') { // 显示/隐藏
-        this.hideSearchBar = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
+      try {
+        if (message.key === 'show-hide') { // 显示/隐藏
+          this.hideSearchBar = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
 
-        // 显示后，获取输入框焦点
-        if (!this.hideSearchBar) {
-          setTimeout(() => {
-            try {
-              this.$refs.searchBar.$el.querySelector('input').focus()
-            } catch {
-            }
-          }, 100)
+          // 显示后，获取输入框焦点
+          if (!this.hideSearchBar) {
+            setTimeout(() => {
+              try {
+                this.$refs.searchBar.$el.querySelector('input').focus()
+              } catch {
+              }
+            }, 100)
+          }
+        } else if (message.key === 'next') { // 下一项
+          this.$refs.searchBar.next()
+        } else if (message.key === 'previous') { // 上一项
+          this.$refs.searchBar.previous()
         }
-      } else if (message.key === 'next') { // 下一项
-        this.$refs.searchBar.next()
-      } else if (message.key === 'previous') { // 上一项
-        this.$refs.searchBar.previous()
+      } catch (e) {
+        console.error('操作SearchBar出现异常：', e)
       }
     })
   },
@@ -89,6 +93,7 @@ export default {
                  :highlightClass="'search-bar-highlight'"
                  :selectedClass="'selected-highlight'"
                  :hiden.sync="hideSearchBar"
+                 style="top:auto;right:auto;left:160px;bottom:52px;background-color:#ddd"
       />
       <a-layout>
         <a-layout-sider :theme="theme">
@@ -180,9 +185,10 @@ body {
 }
 .search-bar-highlight {
   background-color: #ef0fff;
+  color: #fdfdfd;
 
   &.selected-highlight {
-    background-color: #38d878;
+    background-color: #17a450;
   }
 }
 </style>
diff --git 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 />
diff --git 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
@@ -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">
diff --git a/packages/gui/src/view/pages/plugin/git.vue b/packages/gui/src/view/pages/plugin/git.vue
@@ -9,6 +9,8 @@ export default {
   data () {
     return {
       key: 'plugin.git',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       noProxyUrls: [],
       needRestart: false,
     }
@@ -72,9 +74,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">
diff --git 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
@@ -9,6 +9,8 @@ export default {
   data () {
     return {
       key: 'plugin.overwall',
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
       targets: undefined,
       servers: undefined,
       overwallOptions: [
@@ -115,9 +117,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">
@@ -150,7 +152,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
@@ -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/setting.vue b/packages/gui/src/view/pages/setting.vue
@@ -342,9 +342,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">
