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

packages/gui/src/view/App.vue

@@ -49,6 +49,7 @@ export default {
         message = { key: 'show-hide' }
       }
 
+      try {
         if (message.key === 'show-hide') { // 显示/隐藏
           this.hideSearchBar = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
 
@@ -66,6 +67,9 @@ export default {
         } else if (message.key === 'previous') { // 上一项
           this.$refs.searchBar.previous()
         }
+      } catch (e) {
+        console.error('操作SearchBar出现异常：', e)
+      }
     })
   },
   methods: {
@@ -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>

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 />

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

@@ -25,10 +25,10 @@ export default {
   <ds-container>
     <template slot="header">
       帮助中心
-      <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>
-      </span>
     </template>
 
     <div v-if="config" class="help-list">

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

@@ -259,7 +259,8 @@ export default {
   <DsContainer class="page_index">
     <template slot="header">
       给开发者的辅助工具
-      <span>
+    </template>
+    <template slot="header-right">
       <a-button style="margin-right:10px" @click="openSetupCa">
         <a-badge :count="_rootCaSetuped ? 0 : 1" dot>安装根证书</a-badge>
       </a-button>
@@ -272,7 +273,6 @@ export default {
           <span v-if="update.downloading">{{ update.progress }}%</span>{{ update.downloading ? '新版本下载中' : (`检查更新${update.checking ? '中' : ''}`) }}
         </a-badge>
       </a-button>
-      </span>
     </template>
 
     <div class="box">

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;">
+    </template>
+    <template slot="header-right">
       仅针对git命令行的代理设置，github网站的访问无需设置
-      </span>
     </template>
 
     <div v-if="config">

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;">
+    </template>
+    <template slot="header-right">
       由于nodejs不走系统证书，所以npm加速不是很好用，可以用淘宝registry
-      </span>
     </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>

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>
+    </template>
+    <template slot="header-right">
       <a-button type="primary" @click="openExternal('https://github.com/docmirror/dev-sidecar-doc/blob/main/ow.md')">原理说明</a-button>
-      </span>
     </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>编码格式，也可以是未经过编码的

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: [],

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

@@ -342,9 +342,9 @@ export default {
   <ds-container>
     <template slot="header">
       设置
-      <span>
+    </template>
+    <template slot="header-right">
       <a-button class="md-mr-10" icon="profile" @click="openLog()">查看日志</a-button>
-      </span>
     </template>
 
     <div v-if="config">