diff --git a/packages/core/src/modules/plugin/node/index.js b/packages/core/src/modules/plugin/node/index.js
index 011c5734b..d26adc101 100644
--- a/packages/core/src/modules/plugin/node/index.js
+++ b/packages/core/src/modules/plugin/node/index.js
@@ -45,7 +45,7 @@ const NodePlugin = function (context) {
 
       const cmds = []
       for (const item of list) {
-        if (item.value != null && item.value.length > 0 && item.value !== 'null') {
+        if (item.value != null && item.value.length > 0 && item.value !== 'default') {
           cmds.push(`${command} config set ${item.key}  ${item.value}`)
         } else {
           cmds.push(`${command} config delete ${item.key}`)
@@ -68,7 +68,7 @@ const NodePlugin = function (context) {
       const cmds = []
       log.debug('yarn set:', JSON.stringify(list))
       for (const item of list) {
-        if (item.value != null && item.value.length > 0 && item.value !== 'null') {
+        if (item.value != null && item.value.length > 0 && item.value !== 'default') {
           cmds.push(`yarn config set ${item.key}  ${item.value}`)
         } else {
           cmds.push(`yarn config delete ${item.key}`)
diff --git a/packages/gui/src/bridge/update/front.js b/packages/gui/src/bridge/update/front.js
index 3cfa1b847..070589443 100644
--- a/packages/gui/src/bridge/update/front.js
+++ b/packages/gui/src/bridge/update/front.js
@@ -155,7 +155,7 @@ function install (app, api) {
             return (
               <div>
                 <div>发布公告：<a onClick={openGithubUrl}>https://github.com/docmirror/dev-sidecar/releases</a></div>
-                <hr/>
+                <hr>
                 <pre style="max-height:350px;font-family:auto">
                   {releaseNotes}
                 </pre>
@@ -201,7 +201,7 @@ function install (app, api) {
             return (
               <div>
                 <div>发布公告：<a onClick={openGithubUrl}>https://github.com/docmirror/dev-sidecar/releases</a></div>
-                <hr/>
+                <hr>
                 <pre style="max-height:350px;font-family:auto">
                   {releaseNotes}
                 </pre>
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index 2905e3711..a2f847ec5 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -1,49 +1,7 @@
-<template>
-  <a-config-provider :locale="locale">
-  <div class="ds_layout" :class="themeClass">
-    <a-layout>
-      <a-layout-sider :theme="theme">
-        <div class="logo"></div>
-        <div class="aside">
-          <a-menu
-            mode="inline"
-            :defaultSelectedKeys="[$route.fullPath]"
-            :defaultOpenKeys="['/plugin']"
-          >
-            <template v-for="(item) of menus">
-              <a-sub-menu v-if="item.children && item.children.length>0" :key="item.path" @titleClick="titleClick(item)">
-                <span slot="title"><a-icon :type="item.icon?item.icon:'file'"/><span>{{item.title}}</span></span>
-                  <a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)">
-                    <a-icon  :type="sub.icon?sub.icon:'file'"/> {{ sub.title }}
-                  </a-menu-item>
-              </a-sub-menu>
-              <a-menu-item v-else :key="item.path" @click="menuClick(item)">
-                <a-icon  :type="item.icon?item.icon:'file'"/>
-                <span class="nav-text">{{ item.title }}</span>
-              </a-menu-item>
-            </template>
-          </a-menu>
-        </div>
-      </a-layout-sider>
-      <a-layout>
-<!--        <a-layout-header>Header</a-layout-header>-->
-        <a-layout-content>
-          <router-view></router-view>
-        </a-layout-content>
-        <a-layout-footer>
-          <div class="footer">
-            ©2020-2024 docmirror.cn by Greper, WangLiang  <span>{{info.version}}</span>
-          </div>
-        </a-layout-footer>
-      </a-layout>
-    </a-layout>
-  </div>
-  </a-config-provider>
-</template>
-
 <script>
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+
 export default {
   name: 'App',
   components: {
@@ -53,12 +11,12 @@ export default {
       locale: zhCN,
       info: {},
       menus: undefined,
-      config: undefined
+      config: undefined,
     }
   },
   computed: {
     themeClass () {
-      return 'theme-' + this.config.app.theme
+      return `theme-${this.config.app.theme}`
     },
     theme () {
       return this.config.app.theme
@@ -67,7 +25,7 @@ export default {
   created () {
     this.menus = createMenus(this)
     this.config = this.$global.config
-    this.$api.info.get().then(ret => {
+    this.$api.info.get().then((ret) => {
       this.info = ret
     })
   },
@@ -81,11 +39,54 @@ export default {
     menuClick (item) {
       console.log('menu click', item)
       this.$router.replace(item.path)
-    }
-  }
+    },
+  },
 }
 </script>
 
+<template>
+  <a-config-provider :locale="locale">
+    <div class="ds_layout" :class="themeClass">
+      <a-layout>
+        <a-layout-sider :theme="theme">
+          <div class="logo" />
+          <div class="aside">
+            <a-menu
+              mode="inline"
+              :default-selected-keys="[$route.fullPath]"
+              :default-open-keys="['/plugin']"
+            >
+              <template v-for="(item) of menus">
+                <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path" @titleClick="titleClick(item)">
+                  <span slot="title"><a-icon :type="item.icon ? item.icon : 'file'" /><span>{{ item.title }}</span></span>
+                  <a-menu-item v-for="(sub) of item.children" :key="sub.path" @click="menuClick(sub)">
+                    <a-icon :type="sub.icon ? sub.icon : 'file'" /> {{ sub.title }}
+                  </a-menu-item>
+                </a-sub-menu>
+                <a-menu-item v-else :key="item.path" @click="menuClick(item)">
+                  <a-icon :type="item.icon ? item.icon : 'file'" />
+                  <span class="nav-text">{{ item.title }}</span>
+                </a-menu-item>
+              </template>
+            </a-menu>
+          </div>
+        </a-layout-sider>
+        <a-layout>
+          <!-- <a-layout-header>Header</a-layout-header> -->
+          <a-layout-content>
+            <router-view />
+          </a-layout-content>
+          <a-layout-footer>
+            <div class="footer">
+              ©2020-2024 docmirror.cn by Greper, WangLiang  <span>{{ info.version }}</span>
+            </div>
+          </a-layout-footer>
+        </a-layout>
+      </a-layout>
+    </div>
+  </a-config-provider>
+</template>
+
 <style lang="scss">
 body{
   height: 100%;
diff --git a/packages/gui/src/view/api.js b/packages/gui/src/view/api.js
index a4a72f63a..07df21e84 100644
--- a/packages/gui/src/view/api.js
+++ b/packages/gui/src/view/api.js
@@ -53,7 +53,7 @@ export function apiInit (app) {
     })
   }
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     resolve(apiObj)
   })
 }
diff --git a/packages/gui/src/view/components/container.vue b/packages/gui/src/view/components/container.vue
index f1a7437ea..35610a052 100644
--- a/packages/gui/src/view/components/container.vue
+++ b/packages/gui/src/view/components/container.vue
@@ -1,19 +1,19 @@
+<script>
+export default {
+  name: 'DsContainer',
+}
+</script>
+
 <template>
   <div class="ds-container">
     <div class="body-wrapper">
-      <div v-if="$slots.header" class="container-header"><slot name="header"></slot></div>
-      <div class="container-body"> <slot></slot></div>
-      <div class="container-footer"> <slot name="footer"></slot></div>
+      <div v-if="$slots.header" class="container-header"><slot name="header" /></div>
+      <div class="container-body"><slot /></div>
+      <div class="container-footer"><slot name="footer" /></div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ds-container'
-}
-</script>
-
 <style lang="scss">
 .ds-container{
   height:100%;
@@ -49,5 +49,4 @@ export default {
     padding:15px;
   }
 }
-
 </style>
diff --git a/packages/gui/src/view/components/setup-ca.vue b/packages/gui/src/view/components/setup-ca.vue
index 6c71e2aa9..8ad8fa950 100644
--- a/packages/gui/src/view/components/setup-ca.vue
+++ b/packages/gui/src/view/components/setup-ca.vue
@@ -1,66 +1,23 @@
-<template>
-  <a-drawer
-    placement="right"
-    :closable="false"
-    :visible="visible"
-    :after-visible-change="afterVisibleChange"
-    @close="onClose"
-    width="660px"
-    height="100%"
-    :slots="{ title: 'title' }"
-    wrapClassName="json-wrapper"
-  >
-    <template slot="title">
-      {{title}}
-      <a-button type="primary" style="float:right" @click="doSetup()">点此去安装</a-button>
-      <a-button style="float:right;margin-right:10px;" @click="openExternal('https://github.com/docmirror/dev-sidecar/blob/master/doc/caroot.md')">为什么要安装证书？</a-button>
-    </template>
-    <div>
-      <b>本应用在非“安全模式”下必须安装和信任CA根证书</b>，该证书是应用启动时本地随机生成的<br/>
-
-      <template v-if="this.systemPlatform === 'mac'">
-        1、点击右上角“点此去安装按钮”，打开钥匙串，<b style="color:red">选择”系统“</b><br/>
-        2、然后按如下图步骤将随机生成的根证书设置为始终信任<br/>
-        3、可能需要重新启动应用和浏览器才能生效<br/>
-        4、注意：如果出现无法导入提示时，先点一下钥匙串的左边切换到<b style="color:red">“系统”栏</b>，然后再重新安装证书即可<br/>
-      </template>
-      <template v-else-if="this.systemPlatform === 'linux'">
-        1、点击右上角“点此去安装按钮”,将自动安装到系统证书库中<br/>
-        2、<b color="red">火狐、chrome等浏览器不走系统证书</b>，需要手动安装(下图以chrome为例安装根证书)<br/>
-      </template>
-      <template v-else>
-        1、点击右上角“点此去安装按钮”，打开证书<br/>
-        2、然后按如下图步骤将根证书添加到<b style="color:red">信任的根证书颁发机构</b>
-      </template>
-    </div>
-    <img width="100%" :src="setupImage"/>
-  </a-drawer>
-</template>
-
 <script>
 export default {
-  name: 'setup-ca',
+  name: 'SetupCa',
   components: {
 
   },
   props: {
     title: {
       type: String,
-      default: '安装根证书'
+      default: '安装根证书',
     },
     visible: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   data () {
     return {
-      systemPlatform: ''
+      systemPlatform: '',
     }
   },
-  async created () {
-    const platform = await this.$api.info.getSystemPlatform()
-    this.systemPlatform = platform
-  },
   computed: {
     setupImage () {
       if (this.systemPlatform === 'mac') {
@@ -70,7 +27,11 @@ export default {
       } else {
         return '/setup.png'
       }
-    }
+    },
+  },
+  async created () {
+    const platform = await this.$api.info.getSystemPlatform()
+    this.systemPlatform = platform
   },
   methods: {
     async openExternal (url) {
@@ -89,10 +50,50 @@ export default {
       if (this.systemPlatform === 'linux') {
         this.$message.success('根证书已成功安装到系统证书库（注意：浏览器仍然需要手动安装）')
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
-<style>
-</style>
+<template>
+  <a-drawer
+    placement="right"
+    :closable="false"
+    :visible="visible"
+    :after-visible-change="afterVisibleChange"
+    width="660px"
+    height="100%"
+    :slots="{ title: 'title' }"
+    wrap-class-name="json-wrapper"
+    @close="onClose"
+  >
+    <template slot="title">
+      {{ title }}
+      <a-button type="primary" style="float:right" @click="doSetup()">
+        点此去安装
+      </a-button>
+      <a-button style="float:right;margin-right:10px;" @click="openExternal('https://github.com/docmirror/dev-sidecar/blob/master/doc/caroot.md')">
+        为什么要安装证书？
+      </a-button>
+    </template>
+    <div>
+      <b>本应用在非“安全模式”下必须安装和信任CA根证书</b>，该证书是应用启动时本地随机生成的<br>
+
+      <template v-if="systemPlatform === 'mac'">
+        1、点击右上角“点此去安装按钮”，打开钥匙串，<b style="color:red">选择”系统“</b><br>
+        2、然后按如下图步骤将随机生成的根证书设置为始终信任<br>
+        3、可能需要重新启动应用和浏览器才能生效<br>
+        4、注意：如果出现无法导入提示时，先点一下钥匙串的左边切换到<b style="color:red">“系统”栏</b>，然后再重新安装证书即可<br>
+      </template>
+      <template v-else-if="systemPlatform === 'linux'">
+        1、点击右上角“点此去安装按钮”,将自动安装到系统证书库中<br>
+        2、<b color="red">火狐、chrome等浏览器不走系统证书</b>，需要手动安装(下图以chrome为例安装根证书)<br>
+      </template>
+      <template v-else>
+        1、点击右上角“点此去安装按钮”，打开证书<br>
+        2、然后按如下图步骤将根证书添加到<b style="color:red">信任的根证书颁发机构</b>
+      </template>
+    </div>
+    <img width="100%" :src="setupImage">
+  </a-drawer>
+</template>
diff --git a/packages/gui/src/view/pages/index.vue b/packages/gui/src/view/pages/index.vue
index 91b307743..d8f2f028e 100644
--- a/packages/gui/src/view/pages/index.vue
+++ b/packages/gui/src/view/pages/index.vue
@@ -1,132 +1,13 @@
-<template>
-  <ds-container 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>
-
-          <a-button style="margin-right:10px" @click="doCheckUpdate(true)" :loading="update.downloading || update.checking"
-                    :title="'当前版本:'+info.version">
-            <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>
-    </template>
-
-    <div class="box">
-      <a-alert v-if="config && config.app.showShutdownTip" message="本应用开启后会修改系统代理，直接重启电脑可能会无法上网，您可以再次启动本应用即可恢复。如您需要卸载，在卸载前请务必完全退出本应用再进行卸载" banner closable @close="onShutdownTipClose"/>
-      <div class="mode-bar" style="margin:20px;" v-if="config && config.app">
-        <a-radio-group v-model="config.app.mode" button-style="solid" @change="modeChange">
-          <a-tooltip placement="topLeft" title="启用测速，关闭拦截，关闭增强（不稳定，不需要安装证书，最安全）">
-            <a-radio-button value="safe">
-              安全模式
-            </a-radio-button>
-          </a-tooltip>
-          <a-tooltip placement="topLeft" title="启用测速，启用拦截，关闭增强（需要安装证书）">
-            <a-radio-button value="default">
-              默认模式
-            </a-radio-button>
-          </a-tooltip>
-          <a-tooltip v-if="setting.overwall" placement="topLeft" title="一个简单的梯子（敏感原因，默认隐藏，更多信息请点击左侧增强功能菜单）">
-            <a-radio-button value="ow">
-              增强模式
-            </a-radio-button>
-          </a-tooltip>
-          <a-tooltip v-else placement="topLeft" title="这个页面有个彩蛋">
-            <a-radio-button :disabled="true" value="ow">
-              彩蛋
-            </a-radio-button>
-          </a-tooltip>
-        </a-radio-group>
-      </div>
-
-      <div v-if="status"
-           style="margin-top:20px;display: flex; align-items:center;justify-content:space-around;flex-direction: row">
-
-        <div style="text-align: center">
-          <div class="big_button">
-            <a-button shape="circle" :type="startup.type()" :loading="startup.loading" @click="startup.doClick">
-              <img v-if="!startup.loading && !status.server.enabled" width="50" src="/logo/logo-simple.svg">
-              <img v-if="!startup.loading && status.server.enabled" width="50" src="/logo/logo-fff.svg">
-            </a-button>
-            <div class="mt10">{{ status.server.enabled ? '已开启' : '已关闭' }}</div>
-
-          </div>
-        </div>
-        <div :span="12">
-          <a-form style="margin-top:20px" :label-col="{ span: 15 }" :wrapper-col="{ span: 9 }">
-            <a-form-item v-for=" (item, key) in switchBtns" :key="key" :label="item.label">
-              <a-tooltip placement="topLeft">
-                <a-switch style="margin-left:10px" :loading="item.loading" :checked="item.status()" default-checked
-                          @change="item.doClick">
-                  <a-icon slot="checkedChildren" type="check"/>
-                  <a-icon slot="unCheckedChildren" type="close"/>
-                </a-switch>
-              </a-tooltip>
-            </a-form-item>
-          </a-form>
-        </div>
-      </div>
-
-    </div>
-
-    <setup-ca title="安装证书" :visible.sync="setupCa.visible" @setup="handleCaSetuped"></setup-ca>
-    <div slot="footer">
-      <div class="star" v-if="!setting.overwall">
-        <div class="donate">
-          <a-tooltip placement="topLeft" title="彩蛋，点我">
-            <span style="display: block;width:100px;height:50px;" @click="wantOW()"></span>
-          </a-tooltip>
-        </div>
-        <div class="right"></div>
-      </div>
-      <div class="star" v-if="setting.development == null || !setting.development">
-        <div class="donate" @click="donateModal=true">
-          <a-icon type="like" theme="outlined"/>
-          捐赠
-        </div>
-        <div class="right">
-          <div>如果它解决了你的问题，请不要吝啬你的star哟！点这里
-            <a-icon style="margin-right:10px;" type="arrow-right" theme="outlined"/>
-          </div>
-          <a @click="openExternal('https://github.com/docmirror/dev-sidecar')"><img alt="GitHub stars"
-                                                                                    src="https://img.shields.io/github/stars/docmirror/dev-sidecar?logo=github"></a>
-        </div>
-      </div>
-
-      <a-modal title="捐赠" v-if="setting.development == null || !setting.development" v-model="donateModal" width="550px" cancelText="不了" okText="果断支持" @ok="goDonate">
-        <div>* 本应用完全免费，如果觉得好用，可以给予捐赠。</div>
-        <div>* 开源项目持续发展离不开您的支持，感谢</div>
-        <div class="payQrcode">
-          <img height="200px" src="/pay.jpg"/>
-        </div>
-      </a-modal>
-    </div>
-  </ds-container>
-
-</template>
-
 <script>
 import lodash from 'lodash'
-import setupCa from '../components/setup-ca'
 import DsContainer from '../components/container'
+import SetupCa from '../components/setup-ca'
 
 export default {
   name: 'Index',
   components: {
     DsContainer,
-    setupCa
-  },
-  computed: {
-    _rootCaSetuped () {
-      if (this.setting.rootCa) {
-        return this.setting.rootCa.setuped === true
-      }
-      return false
-    }
+    SetupCa,
   },
   data () {
     return {
@@ -143,7 +24,7 @@ export default {
           } else {
             this.apiCall(this.startup, this.$api.startup)
           }
-        }
+        },
       },
       info: {},
       newVersionDownloading: false,
@@ -153,16 +34,24 @@ export default {
         loading: false,
         doClick: (checked) => {
           this.onServerClick(checked)
-        }
+        },
       },
       switchBtns: undefined,
       config: undefined,
       setupCa: {
-        visible: false
+        visible: false,
       },
-      update: { checking: false, downloading: false, progress: 0, newVersion: false }
+      update: { checking: false, downloading: false, progress: 0, newVersion: false },
     }
   },
+  computed: {
+    _rootCaSetuped () {
+      if (this.setting.rootCa) {
+        return this.setting.rootCa.setuped === true
+      }
+      return false
+    },
+  },
   async created () {
     await this.doCheckRootCa()
     await this.reloadConfig()
@@ -173,7 +62,7 @@ export default {
       this.update.autoChecked = true // 应用启动时，执行一次
       this.doCheckUpdate(false)
     }
-    this.$api.info.get().then(ret => {
+    this.$api.info.get().then((ret) => {
       this.info = ret
     })
   },
@@ -212,9 +101,9 @@ export default {
         title: '彩蛋（增强模式）',
         content: (
           <div>
-          我把它藏在了源码里，感兴趣的话可以找一找它（线索提示 // TODO）
+            我把它藏在了源码里，感兴趣的话可以找一找它（线索提示 // TODO）
           </div>
-        )
+        ),
       })
     },
     async doCheckRootCa () {
@@ -237,7 +126,7 @@ export default {
           // const rootCa = this.setting.rootCa
           // rootCa.noTip = true
           // this.$api.setting.save(this.setting)
-        }
+        },
       })
     },
     openSetupCa () {
@@ -273,7 +162,7 @@ export default {
       this.$api.setting.save(this.setting)
     },
     reloadConfig () {
-      return this.$api.config.reload().then(ret => {
+      return this.$api.config.reload().then((ret) => {
         this.config = ret
         return ret
       })
@@ -303,7 +192,7 @@ export default {
         },
         doClick: (checked) => {
           this.onSwitchClick(this.switchBtns[key], apiTarget.start, apiTarget.close, checked)
-        }
+        },
       }
     },
     async apiCall (btn, api, param) {
@@ -360,12 +249,131 @@ export default {
         cancelText: '下次还显示',
         onOk: () => {
           this.$api.config.update({ app: { showShutdownTip: false } })
-        }
+        },
       })
-    }
-  }
+    },
+  },
 }
 </script>
+
+<template>
+  <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>
+
+        <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>
+    </template>
+
+    <div class="box">
+      <a-alert v-if="config && config.app.showShutdownTip" message="本应用开启后会修改系统代理，直接重启电脑可能会无法上网，您可以再次启动本应用即可恢复。如您需要卸载，在卸载前请务必完全退出本应用再进行卸载" banner closable @close="onShutdownTipClose" />
+      <div v-if="config && config.app" class="mode-bar" style="margin:20px;">
+        <a-radio-group v-model="config.app.mode" button-style="solid" @change="modeChange">
+          <a-tooltip placement="topLeft" title="启用测速，关闭拦截，关闭增强（不稳定，不需要安装证书，最安全）">
+            <a-radio-button value="safe">
+              安全模式
+            </a-radio-button>
+          </a-tooltip>
+          <a-tooltip placement="topLeft" title="启用测速，启用拦截，关闭增强（需要安装证书）">
+            <a-radio-button value="default">
+              默认模式
+            </a-radio-button>
+          </a-tooltip>
+          <a-tooltip v-if="setting.overwall" placement="topLeft" title="一个简单的梯子（敏感原因，默认隐藏，更多信息请点击左侧增强功能菜单）">
+            <a-radio-button value="ow">
+              增强模式
+            </a-radio-button>
+          </a-tooltip>
+          <a-tooltip v-else placement="topLeft" title="这个页面有个彩蛋">
+            <a-radio-button :disabled="true" value="ow">
+              彩蛋
+            </a-radio-button>
+          </a-tooltip>
+        </a-radio-group>
+      </div>
+
+      <div
+        v-if="status"
+        style="margin-top:20px;display: flex; align-items:center;justify-content:space-around;flex-direction: row"
+      >
+        <div style="text-align: center">
+          <div class="big_button">
+            <a-button shape="circle" :type="startup.type()" :loading="startup.loading" @click="startup.doClick">
+              <img v-if="!startup.loading && !status.server.enabled" width="50" src="/logo/logo-simple.svg">
+              <img v-if="!startup.loading && status.server.enabled" width="50" src="/logo/logo-fff.svg">
+            </a-button>
+            <div class="mt10">
+              {{ status.server.enabled ? '已开启' : '已关闭' }}
+            </div>
+          </div>
+        </div>
+        <div :span="12">
+          <a-form style="margin-top:20px" :label-col="{ span: 15 }" :wrapper-col="{ span: 9 }">
+            <a-form-item v-for=" (item, key) in switchBtns" :key="key" :label="item.label">
+              <a-tooltip placement="topLeft">
+                <a-switch
+                  style="margin-left:10px" :loading="item.loading" :checked="item.status()" default-checked
+                  @change="item.doClick"
+                >
+                  <a-icon slot="checkedChildren" type="check" />
+                  <a-icon slot="unCheckedChildren" type="close" />
+                </a-switch>
+              </a-tooltip>
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+    </div>
+
+    <SetupCa title="安装证书" :visible.sync="setupCa.visible" @setup="handleCaSetuped" />
+    <div slot="footer">
+      <div v-if="!setting.overwall" class="star">
+        <div class="donate">
+          <a-tooltip placement="topLeft" title="彩蛋，点我">
+            <span style="display: block;width:100px;height:50px;" @click="wantOW()" />
+          </a-tooltip>
+        </div>
+        <div class="right" />
+      </div>
+      <div v-if="setting.development == null || !setting.development" class="star">
+        <div class="donate" @click="donateModal = true">
+          <a-icon type="like" theme="outlined" />
+          捐赠
+        </div>
+        <div class="right">
+          <div>
+            如果它解决了你的问题，请不要吝啬你的star哟！点这里
+            <a-icon style="margin-right:10px;" type="arrow-right" theme="outlined" />
+          </div>
+          <a @click="openExternal('https://github.com/docmirror/dev-sidecar')"><img
+            alt="GitHub stars"
+            src="https://img.shields.io/github/stars/docmirror/dev-sidecar?logo=github"
+          ></a>
+        </div>
+      </div>
+
+      <a-modal v-if="setting.development == null || !setting.development" v-model="donateModal" title="捐赠" width="550px" cancel-text="不了" ok-text="果断支持" @ok="goDonate">
+        <div>* 本应用完全免费，如果觉得好用，可以给予捐赠。</div>
+        <div>* 开源项目持续发展离不开您的支持，感谢</div>
+        <div class="payQrcode">
+          <img height="200px" src="/pay.jpg">
+        </div>
+      </a-modal>
+    </div>
+  </DsContainer>
+</template>
+
 <style lang="scss">
 .page_index {
   .mode-bar {
diff --git a/packages/gui/src/view/pages/plugin/git.vue b/packages/gui/src/view/pages/plugin/git.vue
index 1b5db309c..7060a38c7 100644
--- a/packages/gui/src/view/pages/plugin/git.vue
+++ b/packages/gui/src/view/pages/plugin/git.vue
@@ -1,63 +1,3 @@
-<template>
-  <ds-container>
-    <template slot="header">
-      Git代理设置
-      <span style="color:#999;">
-        仅针对git命令行的代理设置，github网站的访问无需设置
-      </span>
-    </template>
-
-    <div v-if="config">
-      <a-form layout="horizontal">
-        <a-form-item label="启用Git代理" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-checkbox v-model="config.plugin.git.enabled">
-            随应用启动
-          </a-checkbox>
-          <a-tag v-if="status.plugin.git.enabled" color="green">
-            当前已启动
-          </a-tag>
-          <a-tag v-else color="red">
-            当前未启动
-          </a-tag>
-        </a-form-item>
-        <a-form-item label="SSL校验" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-checkbox v-model="config.plugin.git.setting.sslVerify">
-            关闭sslVerify
-          </a-checkbox>
-          安装Git时未选择使用系统证书管理服务时必须关闭
-        </a-form-item>
-        <a-form-item label="排除仓库地址" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <div>
-            <a-row :gutter="10">
-              <a-col :span="22">
-                <span><code>Git.exe</code>将不代理以下仓库；可以是根地址、组织/机构地址、完整地址</span>
-              </a-col>
-              <a-col :span="2">
-                <a-button type="primary" icon="plus" @click="addNoProxyUrl()"/>
-              </a-col>
-            </a-row>
-            <a-row :gutter="10" v-for="(item,index) of noProxyUrls" :key='index'>
-              <a-col :span="22">
-                <a-input :disabled="item.value === false" v-model="item.key"></a-input>
-              </a-col>
-              <a-col :span="2">
-                <a-button type="danger" icon="minus" @click="delNoProxyUrl(item,index)"/>
-              </a-col>
-            </a-row>
-          </div>
-        </a-form-item>
-      </a-form>
-    </div>
-    <template slot="footer">
-      <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">恢复默认</a-button>
-        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">应用</a-button>
-      </div>
-    </template>
-  </ds-container>
-
-</template>
-
 <script>
 import Plugin from '../../mixins/plugin'
 
@@ -68,7 +8,7 @@ export default {
     return {
       key: 'plugin.git',
       noProxyUrls: [],
-      needRestart: false
+      needRestart: false,
     }
   },
   created () {
@@ -99,7 +39,8 @@ export default {
       for (const key in this.config.plugin.git.setting.noProxyUrls) {
         const value = this.config.plugin.git.setting.noProxyUrls[key]
         this.noProxyUrls.push({
-          key, value
+          key,
+          value,
         })
       }
     },
@@ -117,7 +58,66 @@ export default {
         }
       }
       this.config.plugin.git.setting.noProxyUrls = noProxyUrls
-    }
-  }
+    },
+  },
 }
 </script>
+
+<template>
+  <ds-container>
+    <template slot="header">
+      Git代理设置
+      <span style="color:#999;">
+        仅针对git命令行的代理设置，github网站的访问无需设置
+      </span>
+    </template>
+
+    <div v-if="config">
+      <a-form layout="horizontal">
+        <a-form-item label="启用Git代理" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-checkbox v-model="config.plugin.git.enabled">
+            随应用启动
+          </a-checkbox>
+          <a-tag v-if="status.plugin.git.enabled" color="green">
+            当前已启动
+          </a-tag>
+          <a-tag v-else color="red">
+            当前未启动
+          </a-tag>
+        </a-form-item>
+        <a-form-item label="SSL校验" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-checkbox v-model="config.plugin.git.setting.sslVerify">
+            关闭sslVerify
+          </a-checkbox>
+          安装Git时未选择使用系统证书管理服务时必须关闭
+        </a-form-item>
+        <a-form-item label="排除仓库地址" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <div>
+            <a-row :gutter="10">
+              <a-col :span="22">
+                <span><code>Git.exe</code>将不代理以下仓库；可以是根地址、组织/机构地址、完整地址</span>
+              </a-col>
+              <a-col :span="2">
+                <a-button type="primary" icon="plus" @click="addNoProxyUrl()" />
+              </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" :disabled="item.value === false" />
+              </a-col>
+              <a-col :span="2">
+                <a-button type="danger" icon="minus" @click="delNoProxyUrl(item, index)" />
+              </a-col>
+            </a-row>
+          </div>
+        </a-form-item>
+      </a-form>
+    </div>
+    <template slot="footer">
+      <div class="footer-bar">
+        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">恢复默认</a-button>
+        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">应用</a-button>
+      </div>
+    </template>
+  </ds-container>
+</template>
diff --git a/packages/gui/src/view/pages/plugin/node.vue b/packages/gui/src/view/pages/plugin/node.vue
index e9b741fac..e7b7aaa19 100644
--- a/packages/gui/src/view/pages/plugin/node.vue
+++ b/packages/gui/src/view/pages/plugin/node.vue
@@ -1,3 +1,52 @@
+<script>
+import Plugin from '../../mixins/plugin'
+
+export default {
+  name: 'Node',
+  mixins: [Plugin],
+  data () {
+    return {
+      key: 'plugin.node',
+      npmVariables: undefined,
+      registry: false,
+    }
+  },
+  created () {
+    console.log('status:', this.status)
+  },
+  mounted () {
+  },
+  methods: {
+    ready () {
+      return this.$api.plugin.node.getVariables().then((ret) => {
+        console.log('variables', ret)
+        this.npmVariables = ret
+      })
+    },
+    async onSwitchRegistry (event) {
+      await this.setRegistry({ registry: event.target.value, type: 'npm' })
+      this.$message.success('切换成功')
+    },
+    async onSwitchYarnRegistry (event) {
+      const registry = event.target.value
+      console.log('registry', registry)
+      await this.setRegistry({ registry, type: 'yarn' })
+      this.$message.success('切换成功')
+    },
+    async setRegistry ({ registry, type }) {
+      this.apply()
+      console.log('type', type)
+      await this.$api.plugin.node.setRegistry({ registry, type })
+    },
+    setNpmVariableAll () {
+      this.saveConfig().then(() => {
+        this.$api.plugin.node.setVariables()
+      })
+    },
+  },
+}
+</script>
+
 <template>
   <ds-container>
     <template slot="header">
@@ -21,8 +70,10 @@
           </a-tag>
         </a-form-item>
         <a-form-item label="npm命令名" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-input v-model="config.plugin.node.setting.command"></a-input>
-          <div class="form-help">如果你的npm命令改成了其他名字，或者想设置绿色版npm程序路径，可在此处修改</div>
+          <a-input v-model="config.plugin.node.setting.command" />
+          <div class="form-help">
+            如果你的npm命令改成了其他名字，或者想设置绿色版npm程序路径，可在此处修改
+          </div>
         </a-form-item>
         <a-form-item label="SSL校验" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-checkbox v-model="config.plugin.node.setting['strict-ssl']">
@@ -31,8 +82,10 @@
           npm代理启用后必须关闭
         </a-form-item>
         <a-form-item label="npm仓库镜像" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-radio-group v-model="config.plugin.node.setting.registry" @change="onSwitchRegistry"
-                         default-value="https://registry.npmjs.org" button-style="solid">
+          <a-radio-group
+            v-model="config.plugin.node.setting.registry" default-value="https://registry.npmjs.org"
+            button-style="solid" @change="onSwitchRegistry"
+          >
             <a-radio-button value="https://registry.npmjs.org" title="https://registry.npmjs.org">
               npmjs原生
             </a-radio-button>
@@ -40,36 +93,42 @@
               taobao镜像
             </a-radio-button>
           </a-radio-group>
-          <div class="form-help">设置后立即生效，即使关闭 ds 也会继续保持</div>
+          <div class="form-help">
+            设置后立即生效，即使关闭 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'" @change="onSwitchYarnRegistry" button-style="solid">
-            <a-radio-button :value="'null'" title="https://registry.yarnpkg.com">
+          <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">
               yarn原生
             </a-radio-button>
             <a-radio-button value="https://registry.npmmirror.com" title="https://registry.npmmirror.com">
               taobao镜像
             </a-radio-button>
           </a-radio-group>
-          <div class="form-help">设置后立即生效，即使关闭 ds 也会继续保持</div>
+          <div class="form-help">
+            设置后立即生效，即使关闭 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加速开关时将会设置如下环境变量
           </a-checkbox>
-          <div class="form-help">某些库需要自己设置镜像变量，才能下载，比如：<code>electron</code></div>
-          <a-row :gutter="10" style="margin-top: 2px" v-for="(item,index) of npmVariables" :key='index'>
+          <div class="form-help">
+            某些库需要自己设置镜像变量，才能下载，比如：<code>electron</code>
+          </div>
+          <a-row v-for="(item, index) of npmVariables" :key="index" :gutter="10" style="margin-top: 2px">
             <a-col :span="10">
-              <a-input v-model="item.key" :title="item.key" readOnly></a-input>
+              <a-input v-model="item.key" :title="item.key" read-only />
             </a-col>
             <a-col :span="10">
-              <a-input v-model="item.value" :title="item.value" readOnly></a-input>
+              <a-input v-model="item.value" :title="item.value" read-only />
             </a-col>
             <a-col :span="4">
-              <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-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>
           </a-row>
         </a-form-item>
@@ -82,56 +141,4 @@
       </div>
     </template>
   </ds-container>
-
 </template>
-
-<script>
-import Plugin from '../../mixins/plugin'
-
-export default {
-  name: 'Node',
-  mixins: [Plugin],
-  data () {
-    return {
-      key: 'plugin.node',
-      npmVariables: undefined,
-      registry: false
-    }
-  },
-  created () {
-    console.log('status:', this.status)
-  },
-  mounted () {
-  },
-  methods: {
-    ready () {
-      return this.$api.plugin.node.getVariables().then(ret => {
-        console.log('variables', ret)
-        this.npmVariables = ret
-      })
-    },
-    async onSwitchRegistry (event) {
-      await this.setRegistry({ registry: event.target.value, type: 'npm' })
-      this.$message.success('切换成功')
-    },
-    async onSwitchYarnRegistry (event) {
-      const registry = event.target.value
-      console.log('registry', registry)
-      await this.setRegistry({ registry, type: 'yarn' })
-      this.$message.success('切换成功')
-    },
-    async setRegistry ({ registry, type }) {
-      this.apply()
-      console.log('type', type)
-      await this.$api.plugin.node.setRegistry({ registry, type })
-    },
-    setNpmVariableAll () {
-      this.saveConfig().then(() => {
-        this.$api.plugin.node.setVariables()
-      })
-    }
-  }
-}
-</script>
-<style lang="sass">
-</style>
diff --git a/packages/gui/src/view/pages/plugin/overwall.vue b/packages/gui/src/view/pages/plugin/overwall.vue
index 582379796..c6f062f2e 100644
--- a/packages/gui/src/view/pages/plugin/overwall.vue
+++ b/packages/gui/src/view/pages/plugin/overwall.vue
@@ -1,3 +1,108 @@
+<script>
+import Plugin from '../../mixins/plugin'
+
+export default {
+  name: 'Overwall',
+  mixins: [Plugin],
+  data () {
+    return {
+      key: 'plugin.overwall',
+      targets: undefined,
+      servers: undefined,
+      overwallOptions: [
+        {
+          value: true,
+          label: '启用',
+        },
+        {
+          value: false,
+          label: '禁用',
+        },
+      ],
+    }
+  },
+  created () {
+    console.log('status:', this.status)
+  },
+  mounted () {
+  },
+  methods: {
+    async openExternal (url) {
+      await this.$api.ipc.openExternal(url)
+    },
+    async applyAfter () {
+      if (this.status.server.enabled) {
+        return this.$api.server.restart()
+      }
+    },
+    ready () {
+      this.initTarget()
+      this.initServer()
+    },
+    async applyBefore () {
+      this.saveTarget()
+      this.saveServer()
+    },
+    initTarget () {
+      this.targets = []
+      const targetsMap = this.config.plugin.overwall.targets
+      for (const key in targetsMap) {
+        const value = targetsMap[key]
+        this.targets.push({
+          key,
+          value,
+        })
+      }
+    },
+    deleteTarget (item, index) {
+      this.targets.splice(index, 1)
+    },
+    addTarget () {
+      this.targets.unshift({ key: '', value: true })
+    },
+    saveTarget () {
+      const map = {}
+      for (const item of this.targets) {
+        if (item.key) {
+          map[item.key] = item.value
+        }
+      }
+      this.config.plugin.overwall.targets = map
+    },
+
+    initServer () {
+      this.servers = []
+      const targetsMap = this.config.plugin.overwall.server
+      for (const key in targetsMap) {
+        const value = targetsMap[key]
+        this.servers.push({
+          key,
+          value,
+        })
+      }
+      if (this.servers.length === 0) {
+        this.addServer()
+      }
+    },
+    deleteServer (item, index) {
+      this.servers.splice(index, 1)
+    },
+    addServer () {
+      this.servers.unshift({ key: '', value: { type: 'path' } })
+    },
+    saveServer () {
+      const map = {}
+      for (const item of this.servers) {
+        if (item.key) {
+          map[item.key] = item.value
+        }
+      }
+      this.config.plugin.overwall.server = map
+    },
+  },
+}
+</script>
+
 <template>
   <ds-container>
     <template slot="header">
@@ -14,34 +119,36 @@
             启用
           </a-checkbox>
           <div class="form-help">
-            这是什么功能？你懂的！偷偷的用，别声张。<code><i>注：请不要看视频，流量挺小的！</i></code><br/>
-            建议参照右上角的<code>原理说明</code>，自建二层代理服务端，并在此页下方配置<code>代理服务端</code>。<br/>
+            这是什么功能？你懂的！偷偷的用，别声张。<code><i>注：请不要看视频，流量挺小的！</i></code><br>
+            建议参照右上角的<code>原理说明</code>，自建二层代理服务端，并在此页下方配置<code>代理服务端</code>。<br>
             声明：此功能仅供技术学习与探讨！
           </div>
         </a-form-item>
-        <hr/>
+        <hr>
         <a-form-item label="PAC" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-checkbox v-model="config.plugin.overwall.pac.enabled">
             启用PAC
           </a-checkbox>
-          <div class="form-help">PAC内收录了常见的被封杀的域名<br/>当里面某些域名你不想被拦截时，你可以配置这些域名为<code>禁用</code>，也可以关闭PAC</div>
+          <div class="form-help">
+            PAC内收录了常见的被封杀的域名<br>当里面某些域名你不想被拦截时，你可以配置这些域名为<code>禁用</code>，也可以关闭PAC
+          </div>
         </a-form-item>
         <a-form-item label="自动更新PAC" :label-col="labelCol" :wrapper-col="wrapperCol">
           <a-checkbox v-model="config.plugin.overwall.pac.autoUpdate">
             是否自动更新PAC
           </a-checkbox>
           <div class="form-help">
-            开启自动更新后，启动代理服务时，将会异步从下面的远程地址下载PAC文件到本地。<br/>
+            开启自动更新后，启动代理服务时，将会异步从下面的远程地址下载PAC文件到本地。<br>
             注：只要下载成功后，即使关闭自动更新功能，也会优先读取最近下载的文件！
           </div>
         </a-form-item>
         <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"/>
+          <a-input v-model="config.plugin.overwall.pac.pacFileUpdateUrl" :title="config.plugin.overwall.pac.pacFileUpdateUrl" />
           <div class="form-help">
             远程PAC文件内容可以是<code>base64</code>编码格式，也可以是未经过编码的
           </div>
         </a-form-item>
-        <hr/>
+        <hr>
         <a-form-item label="自定义域名" :label-col="labelCol" :wrapper-col="wrapperCol">
           <div>
             <a-row :gutter="10" style="">
@@ -49,12 +156,12 @@
                 <span>PAC没有拦截到的域名，可以在此处定义；配置为<code>禁用</code>时，将不使用梯子</span>
               </a-col>
               <a-col :span="2">
-                <a-button type="primary" icon="plus" @click="addTarget()"/>
+                <a-button type="primary" icon="plus" @click="addTarget()" />
               </a-col>
             </a-row>
-            <a-row :gutter="10" v-for="(item,index) of targets" :key="index">
+            <a-row v-for="(item, index) of targets" :key="index" :gutter="10">
               <a-col :span="18">
-                <a-input v-model="item.key"></a-input>
+                <a-input v-model="item.key" />
               </a-col>
               <a-col :span="4">
                 <a-select v-model="item.value" style="width:100%">
@@ -64,7 +171,7 @@
                 </a-select>
               </a-col>
               <a-col :span="2">
-                <a-button type="danger" icon="minus" @click="deleteTarget(item,index)"/>
+                <a-button type="danger" icon="minus" @click="deleteTarget(item, index)" />
               </a-col>
             </a-row>
           </div>
@@ -76,28 +183,28 @@
                 <span>Nginx二层代理服务端配置</span>
               </a-col>
               <a-col :span="2">
-                <a-button type="primary" icon="plus" @click="addServer()"/>
+                <a-button type="primary" icon="plus" @click="addServer()" />
               </a-col>
             </a-row>
-            <a-row :gutter="10" v-for="(item,index) of servers" :key="index">
+            <a-row v-for="(item, index) of servers" :key="index" :gutter="10">
               <a-col :span="6">
-                <a-input addon-before="域名" placeholder="yourdomain.com" v-model="item.key"/>
+                <a-input v-model="item.key" addon-before="域名" placeholder="yourdomain.com" />
               </a-col>
               <a-col :span="5">
-                <a-input addon-before="端口" placeholder="443" v-model="item.value.port"/>
+                <a-input v-model="item.value.port" addon-before="端口" placeholder="443" />
               </a-col>
               <a-col :span="6">
-                <a-input addon-before="路径" placeholder="xxxxxx" v-model="item.value.path"/>
+                <a-input v-model="item.value.path" addon-before="路径" placeholder="xxxxxx" />
               </a-col>
               <a-col :span="5">
-                <a-input addon-before="密码" type="password" placeholder="password" v-model="item.value.password"/>
+                <a-input v-model="item.value.password" addon-before="密码" type="password" placeholder="password" />
               </a-col>
               <a-col :span="2">
-                <a-button type="danger" icon="minus" @click="deleteServer(item,index)"/>
+                <a-button type="danger" icon="minus" @click="deleteServer(item, index)" />
               </a-col>
             </a-row>
             <div class="form-help">
-              您可以在此处配置自己的代理服务器地址。<br/>
+              您可以在此处配置自己的代理服务器地址。<br>
               警告：请勿使用来源不明的服务器地址，有安全风险！
             </div>
           </div>
@@ -112,108 +219,3 @@
     </template>
   </ds-container>
 </template>
-
-<script>
-import Plugin from '../../mixins/plugin'
-
-export default {
-  name: 'Overwall',
-  mixins: [Plugin],
-  data () {
-    return {
-      key: 'plugin.overwall',
-      targets: undefined,
-      servers: undefined,
-      overwallOptions: [
-        {
-          value: true,
-          label: '启用'
-        },
-        {
-          value: false,
-          label: '禁用'
-        }
-      ]
-    }
-  },
-  created () {
-    console.log('status:', this.status)
-  },
-  mounted () {
-  },
-  methods: {
-    async openExternal (url) {
-      await this.$api.ipc.openExternal(url)
-    },
-    async applyAfter () {
-      if (this.status.server.enabled) {
-        return this.$api.server.restart()
-      }
-    },
-    ready () {
-      this.initTarget()
-      this.initServer()
-    },
-    async applyBefore () {
-      this.saveTarget()
-      this.saveServer()
-    },
-    initTarget () {
-      this.targets = []
-      const targetsMap = this.config.plugin.overwall.targets
-      for (const key in targetsMap) {
-        const value = targetsMap[key]
-        this.targets.push({
-          key, value
-        })
-      }
-    },
-    deleteTarget (item, index) {
-      this.targets.splice(index, 1)
-    },
-    addTarget () {
-      this.targets.unshift({ key: '', value: true })
-    },
-    saveTarget () {
-      const map = {}
-      for (const item of this.targets) {
-        if (item.key) {
-          map[item.key] = item.value
-        }
-      }
-      this.config.plugin.overwall.targets = map
-    },
-
-    initServer () {
-      this.servers = []
-      const targetsMap = this.config.plugin.overwall.server
-      for (const key in targetsMap) {
-        const value = targetsMap[key]
-        this.servers.push({
-          key, value
-        })
-      }
-      if (this.servers.length === 0) {
-        this.addServer()
-      }
-    },
-    deleteServer (item, index) {
-      this.servers.splice(index, 1)
-    },
-    addServer () {
-      this.servers.unshift({ key: '', value: { type: 'path' } })
-    },
-    saveServer () {
-      const map = {}
-      for (const item of this.servers) {
-        if (item.key) {
-          map[item.key] = item.value
-        }
-      }
-      this.config.plugin.overwall.server = map
-    }
-  }
-}
-</script>
-<style lang="sass">
-</style>
diff --git a/packages/gui/src/view/pages/plugin/pip.vue b/packages/gui/src/view/pages/plugin/pip.vue
index 814a8d6e7..6d55a50d9 100644
--- a/packages/gui/src/view/pages/plugin/pip.vue
+++ b/packages/gui/src/view/pages/plugin/pip.vue
@@ -1,31 +1,76 @@
+<script>
+import Plugin from '../../mixins/plugin'
+
+export default {
+  name: 'pip',
+  mixins: [Plugin],
+  data () {
+    return {
+      key: 'plugin.pip',
+      npmVariables: undefined,
+      registry: false,
+      trustedHostList: [],
+    }
+  },
+  created () {
+    console.log('status:', this.status)
+  },
+  mounted () {
+  },
+  methods: {
+    ready () {
+    },
+    async applyBefore () {
+      this.config.plugin.pip.setting.trustedHost = this.config.plugin.pip.setting.trustedHost.replaceAll(/[,，。+\s]+/g, ' ').trim()
+    },
+    async applyAfter () {
+      await this.$api.plugin.pip.start()
+      await this.$api.proxy.restart()
+    },
+    async onSwitchRegistry (event) {
+      await this.setRegistry({ registry: event.target.value })
+      this.$message.success('切换成功')
+    },
+    async setRegistry ({ registry }) {
+      this.config.plugin.pip.setting.registry = registry
+      const domain = registry.substring(registry.indexOf('//') + 2, registry.indexOf('/', 8))
+      this.config.plugin.pip.setting.trustedHost = domain
+      await this.apply()
+    },
+  },
+}
+</script>
+
 <template>
   <ds-container>
     <template slot="header">
       PIP加速
-      <span style="color:#999;">
-      </span>
     </template>
 
     <div v-if="config">
       <a-form layout="horizontal">
-<!--        <a-form-item label="启用PIP加速" :label-col="labelCol" :wrapper-col="wrapperCol">-->
-<!--          <a-checkbox v-model="config.plugin.pip.enabled">-->
-<!--            随应用启动-->
-<!--          </a-checkbox>-->
-<!--          <a-tag v-if="status.plugin.pip.enabled" color="green">-->
-<!--            当前已启动-->
-<!--          </a-tag>-->
-<!--          <a-tag v-else color="red">-->
-<!--            当前未启动-->
-<!--          </a-tag>-->
-<!--        </a-form-item>-->
+        <!--        <a-form-item label="启用PIP加速" :label-col="labelCol" :wrapper-col="wrapperCol"> -->
+        <!--          <a-checkbox v-model="config.plugin.pip.enabled"> -->
+        <!--            随应用启动 -->
+        <!--          </a-checkbox> -->
+        <!--          <a-tag v-if="status.plugin.pip.enabled" color="green"> -->
+        <!--            当前已启动 -->
+        <!--          </a-tag> -->
+        <!--          <a-tag v-else color="red"> -->
+        <!--            当前未启动 -->
+        <!--          </a-tag> -->
+        <!--        </a-form-item> -->
         <a-form-item label="pip命令名" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-input v-model="config.plugin.pip.setting.command"></a-input>
-          <div class="form-help">如果你的<code>pip</code>命令改成了其他名字（如<code>pip3</code>），或想设置绿色版<code>pip</code>程序路径，可在此处修改</div>
+          <a-input v-model="config.plugin.pip.setting.command" />
+          <div class="form-help">
+            如果你的<code>pip</code>命令改成了其他名字（如<code>pip3</code>），或想设置绿色版<code>pip</code>程序路径，可在此处修改
+          </div>
         </a-form-item>
         <a-form-item label="仓库镜像" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-radio-group v-model="config.plugin.pip.setting.registry" @change="onSwitchRegistry"
-                         default-value="https://pypi.org/simple/" button-style="solid">
+          <a-radio-group
+            v-model="config.plugin.pip.setting.registry" default-value="https://pypi.org/simple/"
+            button-style="solid" @change="onSwitchRegistry"
+          >
             <a-radio-button value="https://pypi.org/simple/" title="https://pypi.org/simple/">
               原生
             </a-radio-button>
@@ -60,12 +105,14 @@
               山东理工大学镜像
             </a-radio-button>
           </a-radio-group>
-          <div class="form-help">设置后立即生效，即使关闭 ds 也会继续保持</div>
+          <div class="form-help">
+            设置后立即生效，即使关闭 ds 也会继续保持
+          </div>
         </a-form-item>
         <a-form-item label="信任仓库域名" :label-col="labelCol" :wrapper-col="wrapperCol">
-          <a-input v-model="config.plugin.pip.setting.trustedHost"></a-input>
+          <a-input v-model="config.plugin.pip.setting.trustedHost" />
           <div class="form-help">
-            使用以上域名安装包时，不会进行SSL证书验证，多个域名用空格隔开<br/>
+            使用以上域名安装包时，不会进行SSL证书验证，多个域名用空格隔开<br>
             注意：切换仓库镜像同时会修改<code>pip.ini</code>中的<code>trusted-host</code>配置，即使关闭 ds 也会继续保持
           </div>
         </a-form-item>
@@ -78,51 +125,4 @@
       </div>
     </template>
   </ds-container>
-
 </template>
-
-<script>
-import Plugin from '../../mixins/plugin'
-
-export default {
-  name: 'pip',
-  mixins: [Plugin],
-  data () {
-    return {
-      key: 'plugin.pip',
-      npmVariables: undefined,
-      registry: false,
-      trustedHostList: []
-    }
-  },
-  created () {
-    console.log('status:', this.status)
-  },
-  mounted () {
-  },
-  methods: {
-    ready () {
-    },
-    async applyBefore () {
-      this.config.plugin.pip.setting.trustedHost = this.config.plugin.pip.setting.trustedHost.replaceAll(/[,，。+\s]+/g, ' ').trim()
-    },
-    async applyAfter () {
-      await this.$api.plugin.pip.start()
-      await this.$api.proxy.restart()
-    },
-    async onSwitchRegistry (event) {
-      await this.setRegistry({ registry: event.target.value })
-      this.$message.success('切换成功')
-    },
-    async setRegistry ({ registry }) {
-      this.config.plugin.pip.setting.registry = registry
-      const domain = registry.substring(registry.indexOf('//') + 2, registry.indexOf('/', 8))
-      this.config.plugin.pip.setting.trustedHost = domain
-      await this.apply()
-    }
-
-  }
-}
-</script>
-<style lang="sass">
-</style>
diff --git a/packages/gui/src/view/pages/proxy.vue b/packages/gui/src/view/pages/proxy.vue
index 1ee52f756..51c361bdb 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -1,14 +1,85 @@
+<script>
+import Plugin from '../mixins/plugin'
+
+export default {
+  name: 'Proxy',
+  mixins: [Plugin],
+  data () {
+    return {
+      key: 'proxy',
+      loopbackVisible: false,
+      excludeIpList: [],
+    }
+  },
+  async created () {
+  },
+  mounted () {
+  },
+  methods: {
+    async openExternal (url) {
+      await this.$api.ipc.openExternal(url)
+    },
+    ready () {
+      this.initExcludeIpList()
+    },
+    async applyBefore () {
+      this.submitExcludeIpList()
+    },
+    async applyAfter () {
+      await this.$api.proxy.restart()
+    },
+    async openEnableLoopback () {
+      try {
+        await this.$api.proxy.setEnableLoopback()
+      } catch (e) {
+        if (e.message.includes('EACCES')) {
+          this.$message.error('请将DevSidecar关闭后，以管理员身份重新打开，再尝试此操作')
+          return
+        }
+        this.$message.error(`打开失败：${e.message}`)
+      }
+    },
+    getProxyConfig () {
+      return this.config.proxy
+    },
+    initExcludeIpList () {
+      this.excludeIpList = []
+      for (const key in this.config.proxy.excludeIpList) {
+        const value = this.config.proxy.excludeIpList[key]
+        this.excludeIpList.push({
+          key,
+          value,
+        })
+      }
+    },
+    addExcludeIp () {
+      this.excludeIpList.unshift({ key: '', value: true })
+    },
+    delExcludeIp (item, index) {
+      this.excludeIpList.splice(index, 1)
+    },
+    submitExcludeIpList () {
+      const excludeIpList = {}
+      for (const item of this.excludeIpList) {
+        if (item.key) {
+          excludeIpList[item.key] = item.value
+        }
+      }
+      this.config.proxy.excludeIpList = excludeIpList
+    },
+  },
+}
+</script>
+
 <template>
   <ds-container>
     <template slot="header">
       系统代理设置
-      <span>
-      </span>
     </template>
 
     <div v-if="config">
       <a-form-item label="启用系统代理" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.proxy.enabled" >
+        <a-checkbox v-model="config.proxy.enabled">
           随应用启动
         </a-checkbox>
         <a-tag v-if="status.proxy.enabled" color="green">
@@ -22,67 +93,69 @@
         </div>
       </a-form-item>
       <a-form-item label="代理HTTP请求" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.proxy.proxyHttp" >
+        <a-checkbox v-model="config.proxy.proxyHttp">
           是否代理HTTP请求
         </a-checkbox>
         <div class="form-help">
-          勾选时，同时代理<code>HTTP</code>和<code>HTTPS</code>请求；不勾选时，只代理<code>HTTPS</code>请求<br/>
+          勾选时，同时代理<code>HTTP</code>和<code>HTTPS</code>请求；不勾选时，只代理<code>HTTPS</code>请求<br>
           提示：仅为了加速访问<code>Github网站</code>的用户，建议不勾选。
         </div>
       </a-form-item>
 
       <!-- 以下两个功能仅windows支持，mac和linux暂不支持 -->
       <a-form-item v-if="isWindows()" label="设置环境变量" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.proxy.setEnv" >
+        <a-checkbox v-model="config.proxy.setEnv">
           是否同时修改<code>HTTPS_PROXY</code>环境变量（不好用，不建议勾选）
         </a-checkbox>
         <div class="form-help">
-          当发现某些应用并没有走加速通道或加速报错时，可尝试勾选此选项，并重新开启系统代理开关<br/>
+          当发现某些应用并没有走加速通道或加速报错时，可尝试勾选此选项，并重新开启系统代理开关<br>
           注意：当前已打开的命令行并不会实时生效，需要重新打开一个新的命令行窗口
         </div>
       </a-form-item>
       <a-form-item v-if="isWindows()" label="设置loopback" :label-col="labelCol" :wrapper-col="wrapperCol">
-       <a-button @click="loopbackVisible=true">去设置</a-button>
-        <div class="form-help">解决<code>OneNote</code>、<code>MicrosoftStore</code>、<code>Outlook</code>等<code>UWP应用</code>开启代理后无法访问网络的问题</div>
+        <a-button @click="loopbackVisible = true">去设置</a-button>
+        <div class="form-help">
+          解决<code>OneNote</code>、<code>MicrosoftStore</code>、<code>Outlook</code>等<code>UWP应用</code>开启代理后无法访问网络的问题
+        </div>
       </a-form-item>
 
-      <hr/>
+      <hr>
       <a-form-item label="排除国内域名" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.proxy.excludeDomesticDomainAllowList" >
+        <a-checkbox v-model="config.proxy.excludeDomesticDomainAllowList">
           是否排除国内域名白名单
         </a-checkbox>
       </a-form-item>
       <a-form-item label="自动更新国内域名" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.proxy.autoUpdateDomesticDomainAllowList" >
+        <a-checkbox v-model="config.proxy.autoUpdateDomesticDomainAllowList">
           是否自动更新国内域名白名单
         </a-checkbox>
         <div class="form-help">
-          开启自动更新并启动系统代理时，将会异步从下面的远程地址下载国内域名白名单文件到本地。<br/>
+          开启自动更新并启动系统代理时，将会异步从下面的远程地址下载国内域名白名单文件到本地。<br>
           注：只要下载成功后，即使关闭自动更新功能，也会优先读取最近下载的文件！
         </div>
       </a-form-item>
       <a-form-item label="远程国内域名地址" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-input v-model="config.proxy.remoteDomesticDomainAllowListFileUrl" :title="config.proxy.remoteDomesticDomainAllowListFileUrl"></a-input>
+        <a-input v-model="config.proxy.remoteDomesticDomainAllowListFileUrl" :title="config.proxy.remoteDomesticDomainAllowListFileUrl" />
         <div class="form-help">
           远程国内域名白名单文件内容可以是<code>base64</code>编码格式，也可以是未经过编码的
         </div>
       </a-form-item>
-      <hr/>
+      <hr>
       <a-form-item label="自定义排除域名" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-row :gutter="10">
           <a-col :span="22">
             <span>访问的域名或IP符合下列配置时，将跳过系统代理</span>
           </a-col>
           <a-col :span="2">
-            <a-button type="primary" icon="plus" @click="addExcludeIp()"/>
+            <a-button type="primary" icon="plus" @click="addExcludeIp()" />
           </a-col>
         </a-row>
-        <a-row :gutter="10" v-for="(item,index) of excludeIpList" :key='index'>
+        <a-row v-for="(item, index) of excludeIpList" :key="index" :gutter="10">
           <a-col :span="22">
-            <a-input :disabled="item.value === false" v-model="item.key"></a-input>
+            <a-input v-model="item.key" :disabled="item.value === false" />
           </a-col>
           <a-col :span="2">
-            <a-button type="danger" icon="minus" @click="delExcludeIp(item,index)"/>
+            <a-button type="danger" icon="minus" @click="delExcludeIp(item, index)" />
           </a-col>
         </a-row>
       </a-form-item>
@@ -100,94 +173,20 @@
       :visible.sync="loopbackVisible"
       width="660px"
       height="100%"
-      @close="loopbackVisible=false"
       :slots="{ title: 'title' }"
-      wrapClassName="json-wrapper"
+      wrap-class-name="json-wrapper"
+      @close="loopbackVisible = false"
     >
       <template slot="title">
-        设置Loopback  <a-button style="float:right;margin-right:10px;" @click="openEnableLoopback()">打开EnableLoopback</a-button>
+        设置Loopback
+        <a-button style="float:right;margin-right:10px;" @click="openEnableLoopback()">打开EnableLoopback</a-button>
       </template>
       <div>
         <div>1、此设置用于解决OneNote、MicrosoftStore、Outlook等UWP应用无法访问网络的问题。</div>
         <div>2、点击右上方按钮，打开EnableLoopback，然后按下图所示操作即可</div>
         <div>3、注意：此操作需要<b style="color:red">DevSidecar以管理员身份启动</b>，才能打开下面的EnableLoopback设置界面</div>
-        <img style="margin-top:20px;border:1px solid #eee" width="80%" src="loopback.png"/>
+        <img style="margin-top:20px;border:1px solid #eee" width="80%" src="loopback.png">
       </div>
-
     </a-drawer>
   </ds-container>
-
 </template>
-
-<script>
-import Plugin from '../mixins/plugin'
-export default {
-  name: 'Proxy',
-  mixins: [Plugin],
-  data () {
-    return {
-      key: 'proxy',
-      loopbackVisible: false,
-      excludeIpList: []
-    }
-  },
-  async created () {
-  },
-  mounted () {
-  },
-  methods: {
-    async openExternal (url) {
-      await this.$api.ipc.openExternal(url)
-    },
-    ready () {
-      this.initExcludeIpList()
-    },
-    async applyBefore () {
-      this.submitExcludeIpList()
-    },
-    async applyAfter () {
-      await this.$api.proxy.restart()
-    },
-    async openEnableLoopback () {
-      try {
-        await this.$api.proxy.setEnableLoopback()
-      } catch (e) {
-        if (e.message.indexOf('EACCES') !== -1) {
-          this.$message.error('请将DevSidecar关闭后，以管理员身份重新打开，再尝试此操作')
-          return
-        }
-        this.$message.error('打开失败：' + e.message)
-      }
-    },
-    getProxyConfig () {
-      return this.config.proxy
-    },
-    initExcludeIpList () {
-      this.excludeIpList = []
-      for (const key in this.config.proxy.excludeIpList) {
-        const value = this.config.proxy.excludeIpList[key]
-        this.excludeIpList.push({
-          key, value
-        })
-      }
-    },
-    addExcludeIp () {
-      this.excludeIpList.unshift({ key: '', value: true })
-    },
-    delExcludeIp (item, index) {
-      this.excludeIpList.splice(index, 1)
-    },
-    submitExcludeIpList () {
-      const excludeIpList = {}
-      for (const item of this.excludeIpList) {
-        if (item.key) {
-          excludeIpList[item.key] = item.value
-        }
-      }
-      this.config.proxy.excludeIpList = excludeIpList
-    }
-  }
-}
-</script>
-<style lang="sass">
-</style>
diff --git a/packages/gui/src/view/pages/server.vue b/packages/gui/src/view/pages/server.vue
index b5f25e71b..a094000fc 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -1,247 +1,12 @@
-<template>
-  <ds-container>
-    <template slot="header">
-      加速服务设置
-      <span>
-      </span>
-    </template>
-
-    <div style="height: 100%" class="json-wrapper">
-      <a-tabs
-        default-active-key="1"
-        tab-position="left"
-        :style="{ height: '100%' }"
-        v-if="config"
-        @change="handleTabChange"
-      >
-        <a-tab-pane tab="基本设置" key="1">
-          <div style="padding-right:10px">
-            <a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="config.server.enabled">
-                随应用启动
-              </a-checkbox>
-              <a-tag v-if="status.proxy.enabled" color="green">
-                当前已启动
-              </a-tag>
-              <a-tag v-else color="red">
-                当前未启动
-              </a-tag>
-              <a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
-            </a-form-item>
-            <a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input v-model="config.server.host"/>
-              <div class="form-help">你可以设置为<code>0.0.0.0</code>，让其他电脑可以使用此代理服务</div>
-            </a-form-item>
-            <a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input-number v-model="config.server.port" :min="0" :max="65535"/>
-              <div class="form-help">修改后需要重启应用</div>
-            </a-form-item>
-            <hr/>
-            <a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
-                NODE_TLS_REJECT_UNAUTHORIZED
-              </a-checkbox>
-              <div class="form-help">高风险操作，没有特殊情况请勿关闭</div>
-            </a-form-item>
-            <a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="config.server.setting.verifySsl">
-                校验加速目标网站的ssl证书
-              </a-checkbox>
-              <div class="form-help">如果目标网站证书有问题，但你想强行访问，可以临时关闭此项</div>
-            </a-form-item>
-            <a-form-item label="根证书" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input-search addon-before="Cert" enter-button="选择" @search="onCrtSelect"
-                              v-model="config.server.setting.rootCaFile.certPath"
-                              :title="config.server.setting.rootCaFile.certPath"/>
-              <a-input-search addon-before="Key" enter-button="选择" @search="onKeySelect"
-                              v-model="config.server.setting.rootCaFile.keyPath"
-                              :title="config.server.setting.rootCaFile.keyPath"/>
-            </a-form-item>
-            <hr/>
-            <a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
-                <a-checkbox v-model="config.server.intercept.enabled">
-                  启用拦截
-                </a-checkbox>
-              <div class="form-help">关闭拦截，且关闭功能增强时，就不需要安装根证书，退化为安全模式</div>
-            </a-form-item>
-            <a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
-                <a-checkbox v-model="config.server.setting.script.enabled">
-                  允许插入并运行脚本
-                </a-checkbox>
-              <div class="form-help">关闭后，<code>Github油猴脚本</code>也将关闭</div>
-            </a-form-item>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="拦截设置" key="2">
-          <vue-json-editor style="height:100%" ref="editor" v-model="config.server.intercepts" mode="code"
-                           :show-btns="false" :expandedOnStart="true"></vue-json-editor>
-        </a-tab-pane>
-        <a-tab-pane tab="超时时间设置" key="3">
-          <div style="height:100%;display:flex;flex-direction:column;padding-right:10px">
-            <a-form-item label="默认超时时间" :label-col="labelCol" :wrapper-col="wrapperCol">
-              请求：<a-input-number v-model="config.server.setting.defaultTimeout" :step="1000" :min="1000"/> ms，对应<code>timeout</code>配置<br/>
-              连接：<a-input-number v-model="config.server.setting.defaultKeepAliveTimeout" :step="1000" :min="1000"/> ms，对应<code>keepAliveTimeout</code>配置
-            </a-form-item>
-            <hr style="margin-bottom:15px"/>
-            <div>这里指定域名的超时时间：<span class="form-help">（域名配置可使用通配符或正则）</span></div>
-            <vue-json-editor style="flex-grow:1;min-height:300px;margin-top:10px" ref="editor" v-model="config.server.setting.timeoutMapping" mode="code"
-                             :show-btns="false" :expandedOnStart="true"></vue-json-editor>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="域名白名单" key="4">
-            <a-row style="margin-top:10px">
-              <a-col span="19">
-                <div>这里配置的域名不会通过代理</div>
-              </a-col>
-              <a-col span="3">
-                <a-button style="margin-left:8px" type="primary" icon="plus" @click="addWhiteList()"/>
-              </a-col>
-            </a-row>
-            <a-row :gutter="10" style="margin-top: 5px" v-for="(item,index) of whiteList" :key='index'>
-              <a-col :span="19">
-                <a-input :disabled="item.value === false" v-model="item.key"></a-input>
-              </a-col>
-              <a-col :span="3">
-                <a-button v-if="item.value !== false" type="danger" icon="minus" @click="deleteWhiteList(item,index)"/>
-              </a-col>
-            </a-row>
-        </a-tab-pane>
-        <a-tab-pane tab="自动兼容程序" key="5">
-          <div style="height:100%;display:flex;flex-direction:column">
-            <div>
-              说明：<code>自动兼容程序</code>会自动根据错误信息进行兼容性调整，并将兼容设置保存在 <code>~/.dev-sidecar/automaticCompatibleConfig.json</code> 文件中。但并不是所有的兼容设置都是正确的，所以需要通过以下配置来覆盖错误的兼容设置。
-            </div>
-            <vue-json-editor style="flex-grow:1;min-height:300px;margin-top:10px;" ref="editor" v-model="config.server.compatible" mode="code"
-                             :show-btns="false" :expandedOnStart="true"></vue-json-editor>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="IP预设置" key="6">
-          <div style="height:100%;display:flex;flex-direction:column">
-            <div>
-              提示：<code>IP预设置</code>功能，优先级高于 <code>DNS设置</code>
-              <span class="form-help">（域名配置可使用通配符或正则）</span>
-            </div>
-            <vue-json-editor style="flex-grow:1;min-height:300px;margin-top:10px;" ref="editor" v-model="config.server.preSetIpList" mode="code"
-                             :show-btns="false" :expandedOnStart="true"></vue-json-editor>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="DNS服务管理" key="7">
-          <vue-json-editor style="height:100%" ref="editor" v-model="config.server.dns.providers" mode="code"
-                           :show-btns="false" :expandedOnStart="true"></vue-json-editor>
-        </a-tab-pane>
-        <a-tab-pane tab="DNS设置" key="8">
-          <div>
-            <a-row style="margin-top:10px">
-              <a-col span="19">
-                <div>这里配置哪些域名需要通过国外DNS服务器获取IP进行访问</div>
-              </a-col>
-              <a-col span="3">
-                <a-button style="margin-left:8px" type="primary" icon="plus" @click="addDnsMapping()"/>
-              </a-col>
-            </a-row>
-            <a-row :gutter="10" style="margin-top: 5px" v-for="(item,index) of dnsMappings" :key='index'>
-              <a-col :span="14">
-                <a-input :disabled="item.value === false" v-model="item.key"></a-input>
-              </a-col>
-              <a-col :span="5">
-                <a-select :disabled="item.value === false" v-model="item.value" style="width: 100%">
-                  <a-select-option v-for="(item) of speedDnsOptions" :key="item.value" :value="item.value">
-                    {{ item.value }}
-                  </a-select-option>
-                </a-select>
-              </a-col>
-              <a-col :span="3">
-                <a-button v-if="item.value !== false" type="danger"  icon="minus"   @click="deleteDnsMapping(item,index)"/>
-                <a-button v-if="item.value === false" type="primary" icon="checked" @click="restoreDefDnsMapping(item,index)"/>
-              </a-col>
-            </a-row>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane tab="IP测速" key="9">
-          <div class="ip-tester" style="padding-right: 10px">
-            <a-alert type="info" message="对从DNS获取到的IP进行测速，使用速度最快的IP进行访问（注意：对使用了增强功能的域名没啥用）"></a-alert>
-            <a-form-item label="开启DNS测速" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-checkbox v-model="getSpeedTestConfig().enabled">
-                启用
-              </a-checkbox>
-            </a-form-item>
-            <a-form-item label="自动测试间隔" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input-number v-model="getSpeedTestConfig().interval" :step="1000" :min="1"/> ms
-            </a-form-item>
-            <!--<a-form-item label="慢速IP阈值" :label-col="labelCol" :wrapper-col="wrapperCol">
-              <a-input-number v-model="config.server.setting.lowSpeedDelay" :step="10" :min="100"/> ms
-            </a-form-item>-->
-            <div>使用以下DNS获取IP进行测速</div>
-            <a-row style="margin-top:10px">
-              <a-col span="24">
-                <a-checkbox-group
-                  v-model="getSpeedTestConfig().dnsProviders"
-                  :options="speedDnsOptions"
-                />
-              </a-col>
-            </a-row>
-            <a-row :gutter="10" class="mt20">
-              <a-col :span="21">
-                以下域名在启动后立即进行测速，其他域名在第一次访问时才测速
-              </a-col>
-              <a-col :span="2">
-                <a-button style="margin-left:10px" type="primary" icon="plus" @click="addSpeedHostname()"/>
-              </a-col>
-            </a-row>
-            <a-row :gutter="10" style="margin-top: 5px" v-for="(item,index) of getSpeedTestConfig().hostnameList"
-                   :key='index'>
-              <a-col :span="21">
-                <a-input 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)"/>
-              </a-col>
-            </a-row>
-
-            <a-divider/>
-            <a-row :gutter="10" class="mt10">
-              <a-col span="24">
-                <a-button type="primary" icon="plus" @click="reSpeedTest()">立即重新测速</a-button>
-                <a-button class="md-ml-10" type="primary" icon="reload" @click="reloadAllSpeedTester()">刷新</a-button>
-              </a-col>
-            </a-row>
-
-            <a-row :gutter="20">
-              <a-col span="12" v-for="(item,key) of speedTestList" :key='key'>
-                <a-card size="small" class="md-mt-10" :title="key">
-                  <a slot="extra" href="#">
-                    <a-icon v-if="item.alive.length>0" type="check"/>
-                    <a-icon v-else type="info-circle"/>
-                  </a>
-                  <a-tag style="margin:2px;" v-for="(element,index) of item.backupList" :title="element.dns"
-                         :color="element.time?(element.time>config.server.setting.lowSpeedDelay?'orange':'green'):'red'" :key='index'>
-                    {{ element.host }} {{ element.time }}{{ element.time ? 'ms' : '' }} {{ element.dns }}
-                  </a-tag>
-                </a-card>
-              </a-col>
-            </a-row>
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-    <template slot="footer">
-      <div class="footer-bar">
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">恢复默认</a-button>
-        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">应用</a-button>
-      </div>
-    </template>
-  </ds-container>
-</template>
-
 <script>
+import _ from 'lodash'
 import vueJsonEditor from 'vue-json-editor-fix-cn'
 import Plugin from '../mixins/plugin'
-import _ from 'lodash'
 
 export default {
   name: 'Server',
   components: {
-    vueJsonEditor
+    VueJsonEditor: vueJsonEditor,
   },
   mixins: [Plugin],
   data () {
@@ -249,14 +14,9 @@ export default {
       key: 'server',
       dnsMappings: [],
       speedTestList: [],
-      whiteList: []
+      whiteList: [],
     }
   },
-  created () {
-  },
-  mounted () {
-    this.registerSpeedTestEvent()
-  },
   computed: {
     speedDnsOptions () {
       const options = []
@@ -266,11 +26,16 @@ export default {
       _.forEach(this.config.server.dns.providers, (dnsConfig, key) => {
         options.push({
           value: key,
-          label: key
+          label: key,
         })
       })
       return options
-    }
+    },
+  },
+  created () {
+  },
+  mounted () {
+    this.registerSpeedTestEvent()
   },
   methods: {
     async onCrtSelect () {
@@ -307,7 +72,8 @@ export default {
       for (const key in this.config.server.dns.mapping) {
         const value = this.config.server.dns.mapping[key]
         this.dnsMappings.push({
-          key, value
+          key,
+          value,
         })
       }
     },
@@ -336,7 +102,8 @@ export default {
       for (const key in this.config.server.whiteList) {
         const value = this.config.server.whiteList[key]
         this.whiteList.push({
-          key, value
+          key,
+          value,
         })
       }
     },
@@ -357,7 +124,7 @@ export default {
     },
     async openLog () {
       const dir = await this.$api.info.getConfigDir()
-      this.$api.ipc.openPath(dir + '/logs/')
+      this.$api.ipc.openPath(`${dir}/logs/`)
     },
     getSpeedTestConfig () {
       return this.config.server.dns.speedTest
@@ -404,10 +171,276 @@ export default {
       setTimeout(() => {
         window.dispatchEvent(new Event('resize'))
       }, 10)
-    }
-  }
+    },
+  },
 }
 </script>
+
+<template>
+  <ds-container>
+    <template slot="header">
+      加速服务设置
+    </template>
+
+    <div style="height: 100%" class="json-wrapper">
+      <a-tabs
+        v-if="config"
+        default-active-key="1"
+        tab-position="left"
+        :style="{ height: '100%' }"
+        @change="handleTabChange"
+      >
+        <a-tab-pane key="1" tab="基本设置">
+          <div style="padding-right:10px">
+            <a-form-item label="代理服务:" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.enabled">
+                随应用启动
+              </a-checkbox>
+              <a-tag v-if="status.proxy.enabled" color="green">
+                当前已启动
+              </a-tag>
+              <a-tag v-else color="red">
+                当前未启动
+              </a-tag>
+              <a-button class="md-mr-10" icon="profile" @click="openLog()">
+                日志
+              </a-button>
+            </a-form-item>
+            <a-form-item label="绑定IP" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input v-model="config.server.host" />
+              <div class="form-help">
+                你可以设置为<code>0.0.0.0</code>，让其他电脑可以使用此代理服务
+              </div>
+            </a-form-item>
+            <a-form-item label="代理端口" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input-number v-model="config.server.port" :min="0" :max="65535" />
+              <div class="form-help">
+                修改后需要重启应用
+              </div>
+            </a-form-item>
+            <hr>
+            <a-form-item label="全局校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.setting.NODE_TLS_REJECT_UNAUTHORIZED">
+                NODE_TLS_REJECT_UNAUTHORIZED
+              </a-checkbox>
+              <div class="form-help">
+                高风险操作，没有特殊情况请勿关闭
+              </div>
+            </a-form-item>
+            <a-form-item label="代理校验SSL" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.setting.verifySsl">
+                校验加速目标网站的ssl证书
+              </a-checkbox>
+              <div class="form-help">
+                如果目标网站证书有问题，但你想强行访问，可以临时关闭此项
+              </div>
+            </a-form-item>
+            <a-form-item label="根证书" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input-search
+                v-model="config.server.setting.rootCaFile.certPath" addon-before="Cert" enter-button="选择"
+                :title="config.server.setting.rootCaFile.certPath"
+                @search="onCrtSelect"
+              />
+              <a-input-search
+                v-model="config.server.setting.rootCaFile.keyPath" addon-before="Key" enter-button="选择"
+                :title="config.server.setting.rootCaFile.keyPath"
+                @search="onKeySelect"
+              />
+            </a-form-item>
+            <hr>
+            <a-form-item label="启用拦截" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.intercept.enabled">
+                启用拦截
+              </a-checkbox>
+              <div class="form-help">
+                关闭拦截，且关闭功能增强时，就不需要安装根证书，退化为安全模式
+              </div>
+            </a-form-item>
+            <a-form-item label="启用脚本" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="config.server.setting.script.enabled">
+                允许插入并运行脚本
+              </a-checkbox>
+              <div class="form-help">
+                关闭后，<code>Github油猴脚本</code>也将关闭
+              </div>
+            </a-form-item>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="拦截设置">
+          <VueJsonEditor
+            ref="editor" v-model="config.server.intercepts" style="height:100%" mode="code"
+            :show-btns="false" :expanded-on-start="true"
+          />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="超时时间设置">
+          <div style="height:100%;display:flex;flex-direction:column;padding-right:10px">
+            <a-form-item label="默认超时时间" :label-col="labelCol" :wrapper-col="wrapperCol">
+              请求：<a-input-number v-model="config.server.setting.defaultTimeout" :step="1000" :min="1000" /> ms，对应<code>timeout</code>配置<br>
+              连接：<a-input-number v-model="config.server.setting.defaultKeepAliveTimeout" :step="1000" :min="1000" /> ms，对应<code>keepAliveTimeout</code>配置
+            </a-form-item>
+            <hr style="margin-bottom:15px">
+            <div>这里指定域名的超时时间：<span class="form-help">（域名配置可使用通配符或正则）</span></div>
+            <VueJsonEditor
+              ref="editor" v-model="config.server.setting.timeoutMapping" style="flex-grow:1;min-height:300px;margin-top:10px" mode="code"
+              :show-btns="false" :expanded-on-start="true"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="域名白名单">
+          <a-row style="margin-top:10px">
+            <a-col span="19">
+              <div>这里配置的域名不会通过代理</div>
+            </a-col>
+            <a-col span="3">
+              <a-button style="margin-left:8px" type="primary" icon="plus" @click="addWhiteList()" />
+            </a-col>
+          </a-row>
+          <a-row v-for="(item, index) of whiteList" :key="index" :gutter="10" style="margin-top: 5px">
+            <a-col :span="19">
+              <a-input v-model="item.key" :disabled="item.value === false" />
+            </a-col>
+            <a-col :span="3">
+              <a-button v-if="item.value !== false" type="danger" icon="minus" @click="deleteWhiteList(item, index)" />
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="自动兼容程序">
+          <div style="height:100%;display:flex;flex-direction:column">
+            <div>
+              说明：<code>自动兼容程序</code>会自动根据错误信息进行兼容性调整，并将兼容设置保存在 <code>~/.dev-sidecar/automaticCompatibleConfig.json</code> 文件中。但并不是所有的兼容设置都是正确的，所以需要通过以下配置来覆盖错误的兼容设置。
+            </div>
+            <VueJsonEditor
+              ref="editor" v-model="config.server.compatible" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              :show-btns="false" :expanded-on-start="true"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="6" tab="IP预设置">
+          <div style="height:100%;display:flex;flex-direction:column">
+            <div>
+              提示：<code>IP预设置</code>功能，优先级高于 <code>DNS设置</code>
+              <span class="form-help">（域名配置可使用通配符或正则）</span>
+            </div>
+            <VueJsonEditor
+              ref="editor" v-model="config.server.preSetIpList" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              :show-btns="false" :expanded-on-start="true"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="7" tab="DNS服务管理">
+          <VueJsonEditor
+            ref="editor" v-model="config.server.dns.providers" style="height:100%" mode="code"
+            :show-btns="false" :expanded-on-start="true"
+          />
+        </a-tab-pane>
+        <a-tab-pane key="8" tab="DNS设置">
+          <div>
+            <a-row style="margin-top:10px">
+              <a-col span="19">
+                <div>这里配置哪些域名需要通过国外DNS服务器获取IP进行访问</div>
+              </a-col>
+              <a-col span="3">
+                <a-button style="margin-left:8px" type="primary" icon="plus" @click="addDnsMapping()" />
+              </a-col>
+            </a-row>
+            <a-row v-for="(item, index) of dnsMappings" :key="index" :gutter="10" style="margin-top: 5px">
+              <a-col :span="14">
+                <a-input v-model="item.key" :disabled="item.value === false" />
+              </a-col>
+              <a-col :span="5">
+                <a-select v-model="item.value" :disabled="item.value === false" style="width: 100%">
+                  <a-select-option v-for="(item) of speedDnsOptions" :key="item.value" :value="item.value">
+                    {{ item.value }}
+                  </a-select-option>
+                </a-select>
+              </a-col>
+              <a-col :span="3">
+                <a-button v-if="item.value !== false" type="danger" icon="minus" @click="deleteDnsMapping(item, index)" />
+                <a-button v-if="item.value === false" type="primary" icon="checked" @click="restoreDefDnsMapping(item, index)" />
+              </a-col>
+            </a-row>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="9" tab="IP测速">
+          <div class="ip-tester" style="padding-right: 10px">
+            <a-alert type="info" message="对从DNS获取到的IP进行测速，使用速度最快的IP进行访问（注意：对使用了增强功能的域名没啥用）" />
+            <a-form-item label="开启DNS测速" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-checkbox v-model="getSpeedTestConfig().enabled">
+                启用
+              </a-checkbox>
+            </a-form-item>
+            <a-form-item label="自动测试间隔" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input-number v-model="getSpeedTestConfig().interval" :step="1000" :min="1" /> ms
+            </a-form-item>
+            <!-- <a-form-item label="慢速IP阈值" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-input-number v-model="config.server.setting.lowSpeedDelay" :step="10" :min="100"/> ms
+            </a-form-item> -->
+            <div>使用以下DNS获取IP进行测速</div>
+            <a-row style="margin-top:10px">
+              <a-col span="24">
+                <a-checkbox-group
+                  v-model="getSpeedTestConfig().dnsProviders"
+                  :options="speedDnsOptions"
+                />
+              </a-col>
+            </a-row>
+            <a-row :gutter="10" class="mt20">
+              <a-col :span="21">
+                以下域名在启动后立即进行测速，其他域名在第一次访问时才测速
+              </a-col>
+              <a-col :span="2">
+                <a-button style="margin-left:10px" type="primary" icon="plus" @click="addSpeedHostname()" />
+              </a-col>
+            </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]" />
+              </a-col>
+              <a-col :span="2">
+                <a-button style="margin-left:10px" type="danger" icon="minus" @click="delSpeedHostname(item, index)" />
+              </a-col>
+            </a-row>
+
+            <a-divider />
+            <a-row :gutter="10" class="mt10">
+              <a-col span="24">
+                <a-button type="primary" icon="plus" @click="reSpeedTest()">立即重新测速</a-button>
+                <a-button class="md-ml-10" type="primary" icon="reload" @click="reloadAllSpeedTester()">刷新</a-button>
+              </a-col>
+            </a-row>
+
+            <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 slot="extra" href="#">
+                    <a-icon v-if="item.alive.length > 0" type="check" />
+                    <a-icon v-else type="info-circle" />
+                  </a>
+                  <a-tag
+                    v-for="(element, index) of item.backupList" :key="index" style="margin:2px;"
+                    :title="element.dns" :color="element.time ? (element.time > config.server.setting.lowSpeedDelay ? 'orange' : 'green') : 'red'"
+                  >
+                    {{ element.host }} {{ element.time }}{{ element.time ? 'ms' : '' }} {{ element.dns }}
+                  </a-tag>
+                </a-card>
+              </a-col>
+            </a-row>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <template slot="footer">
+      <div class="footer-bar">
+        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">恢复默认</a-button>
+        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">应用</a-button>
+      </div>
+    </template>
+  </ds-container>
+</template>
+
 <style lang="scss">
 .json-wrapper {
   .ant-drawer-wrapper-body {
diff --git a/packages/gui/src/view/pages/setting.vue b/packages/gui/src/view/pages/setting.vue
index 48c54c0e3..4d03151c6 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -1,159 +1,6 @@
-<template>
-  <ds-container>
-    <template slot="header">
-      设置
-      <span>
-      </span>
-    </template>
-
-    <div v-if="config">
-      <a-form-item label="开机自启" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.app.autoStart.enabled" @change="onAutoStartChange">
-          本应用开机自启
-        </a-checkbox>
-        <a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
-        <div class="form-help">
-          windows下建议开启开机自启。<a @click="openExternal('https://github.com/docmirror/dev-sidecar/blob/master/doc/recover.md')">更多说明参考</a>
-        </div>
-      </a-form-item>
-      <a-form-item v-if="systemPlatform === 'mac'" label="隐藏Dock图标" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.app.dock.hideWhenWinClose">
-          关闭窗口时隐藏Dock图标(仅限Mac)
-        </a-checkbox>
-        <div class="form-help">
-          修改后需要重启应用
-        </div>
-      </a-form-item>
-      <hr/>
-      <a-form-item label="远程配置" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-checkbox v-model="config.app.remoteConfig.enabled" @change="onRemoteConfigEnabledChange">
-          启用远程配置
-        </a-checkbox>
-        <div class="form-help">
-          应用启动时会向下面的地址请求配置补丁，获得最新的优化后的github访问体验。<br/>
-          如果您觉得远程配置有安全风险，请关闭此功能，或删除共享远程配置，仅使用个人远程配置。<br/>
-          配置优先级：本地修改配置  >  个人远程配置  >  共享远程配置 > 默认配置
-        </div>
-      </a-form-item>
-      <a-form-item label="共享远程配置地址" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-input v-model="config.app.remoteConfig.url" :title="config.app.remoteConfig.url"></a-input>
-      </a-form-item>
-      <a-form-item label="个人远程配置地址" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-input v-model="config.app.remoteConfig.personalUrl" :title="config.app.remoteConfig.personalUrl"></a-input>
-      </a-form-item>
-      <a-form-item label="重载远程配置" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-button :disabled="config.app.remoteConfig.enabled === false" :loading="reloadLoading" icon="sync" @click="reloadRemoteConfig()">重载远程配置</a-button>
-        <div class="form-help">
-          注意，部分远程配置文件所在站点，修改内容后可能需要等待一段时间才能生效。<br/>
-          如果重载远程配置后发现下载的还是修改前的内容，请稍等片刻再重试。
-        </div>
-      </a-form-item>
-      <hr/>
-      <a-form-item label="主题设置" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.theme" default-value="light" button-style="solid">
-          <a-radio-button :value="'light'" title="light">
-            亮色
-          </a-radio-button>
-          <a-radio-button :value="'dark'" title="dark">
-            暗色
-          </a-radio-button>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.showShutdownTip" default-value="true" button-style="solid">
-          <a-radio-button :value="true">
-            显示
-          </a-radio-button>
-          <a-radio-button :value="false">
-            隐藏
-          </a-radio-button>
-        </a-radio-group>
-        <div class="form-help">
-          是否显示首页的警告提示
-        </div>
-      </a-form-item>
-      <a-form-item v-if="!isLinux()" label="关闭策略" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.closeStrategy" default-value="0" button-style="solid">
-          <a-radio-button :value="0">
-            弹出提示
-          </a-radio-button>
-          <a-radio-button :value="1">
-            直接退出
-          </a-radio-button>
-          <a-radio-button :value="2">
-            最小化到系统托盘
-          </a-radio-button>
-        </a-radio-group>
-        <div class="form-help">
-          点击窗口右上角关闭按钮的效果
-        </div>
-      </a-form-item>
-      <hr/>
-      <a-form-item label="打开窗口快捷键" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-input v-model="config.app.showHideShortcut" @change="shortcutChange" @keydown="shortcutKeyDown" @keyup="shortcutKeyUp"></a-input>
-        <div class="form-help">
-          部分快捷键已被占用：F5=刷新页面，F12=开发者工具（DevTools）
-        </div>
-      </a-form-item>
-      <a-form-item label="启动时打开窗口" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.startShowWindow" default-value="true" button-style="solid">
-          <a-radio-button :value="true">
-            打开窗口
-          </a-radio-button>
-          <a-radio-button :value="false">
-            隐藏窗口
-          </a-radio-button>
-        </a-radio-group>
-        <div class="form-help">
-          启动软件时，是否打开窗口。提示：如果设置为隐藏窗口，可点击系统托盘小图标打开窗口。
-        </div>
-      </a-form-item>
-      <a-form-item label="启动时窗口大小" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-input-number v-model="config.app.windowSize.width" :step="50" :min="600" :max="2400"/>&nbsp;×
-        <a-input-number v-model="config.app.windowSize.height" :step="50" :min="500" :max="2000"/>
-      </a-form-item>
-      <hr/>
-      <a-form-item label="自动检查更新" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.autoChecked" default-value="light" button-style="solid">
-          <a-radio-button :value="true">
-            开启
-          </a-radio-button>
-          <a-radio-button :value="false">
-            关闭
-          </a-radio-button>
-        </a-radio-group>
-        <div class="form-help">
-          开启自动检查更新后，每次应用启动时会检查一次更新，如有新版本，则会弹出提示。
-        </div>
-      </a-form-item>
-      <a-form-item label="忽略预发布版本" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-radio-group v-model="config.app.skipPreRelease" default-value="light" button-style="solid">
-          <a-radio-button :value="true">
-            忽略
-          </a-radio-button>
-          <a-radio-button :value="false">
-            不忽略
-          </a-radio-button>
-        </a-radio-group>
-        <div class="form-help">
-          预发布版本号为带有 “<code>-</code>” 的版本。注：该配置只对当前版本为正式版本时有效。
-        </div>
-      </a-form-item>
-    </div>
-    <template slot="footer">
-      <div class="footer-bar">
-        <a-button :loading="removeUserConfigLoading" class="md-mr-10" icon="sync" @click="restoreFactorySettings()">恢复出厂设置</a-button>
-        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">恢复默认</a-button>
-        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">应用</a-button>
-      </div>
-    </template>
-  </ds-container>
-
-</template>
-
 <script>
-import Plugin from '../mixins/plugin'
 import { ipcRenderer } from 'electron'
+import Plugin from '../mixins/plugin'
 
 export default {
   name: 'Setting',
@@ -165,7 +12,7 @@ export default {
       reloadLoading: false,
       themeBackup: null,
       urlBackup: null,
-      personalUrlBackup: null
+      personalUrlBackup: null,
     }
   },
   created () {
@@ -181,7 +28,7 @@ export default {
     },
     async openLog () {
       const dir = await this.$api.info.getConfigDir()
-      this.$api.ipc.openPath(dir + '/logs/')
+      this.$api.ipc.openPath(`${dir}/logs/`)
     },
     getEventKey (event) {
       // 忽略以下键
@@ -283,7 +130,7 @@ export default {
     async disableBeforeInputEvent () {
       clearTimeout(window.enableBeforeInputEventTimeout)
       window.config.disableBeforeInputEvent = true
-      window.enableBeforeInputEventTimeout = setTimeout(function () {
+      window.enableBeforeInputEventTimeout = setTimeout(() => {
         window.config.disableBeforeInputEvent = false
       }, 2000)
     },
@@ -311,12 +158,18 @@ export default {
 
       // 判断 Ctrl、Alt、Shift、Window 按钮是否已按下，如果已按下，则拼接键值
       let shortcut = event.ctrlKey ? 'Ctrl + ' : ''
-      if (event.altKey) shortcut += 'Alt + '
-      if (event.shiftKey) shortcut += 'Shift + '
-      if (event.metaKey) shortcut += 'Meta + '
+      if (event.altKey) {
+        shortcut += 'Alt + '
+      }
+      if (event.shiftKey) {
+        shortcut += 'Shift + '
+      }
+      if (event.metaKey) {
+        shortcut += 'Meta + '
+      }
 
       // 如果以上按钮都没有按下，并且当前键不是F1~F4、F6~F11时，则直接返回（注：F5已经是刷新页面快捷键、F12已经是打开DevTools的快捷键了）
-      if (shortcut === '' && !key.match(/^F([12346789]|1[01])$/g)) {
+      if (shortcut === '' && !key.match(/^F([1-46-9]|1[01])$/g)) {
         this.config.app.showHideShortcut = '无'
         return
       }
@@ -403,24 +256,29 @@ export default {
       this.$confirm({
         title: '确定要恢复出厂设置吗？',
         width: 610,
-        content: h =>
+        content: (h) => (
           <div class="restore-factory-settings">
-            <hr/>
+            <hr>
             <p>
               <h3>操作警告：</h3>
               <div>
-                该功能将备份您的所有页面的个性化配置，并重载<span>默认配置</span>及<span>远程配置</span>，请谨慎操作！！！
+                该功能将备份您的所有页面的个性化配置，并重载
+                <span>默认配置</span>
+                及
+                <span>远程配置</span>
+                ，请谨慎操作！！！
               </div>
             </p>
-            <hr/>
+            <hr>
             <p>
               <h3>找回个性化配置的方法：</h3>
               <div>
-                1. 找到备份文件，路径：<span>~/.dev-sidecar/config.json.时间戳.bak.json</span><br/>
+                1. 找到备份文件，路径：<span>~/.dev-sidecar/config.json.时间戳.bak.json</span><br>
                 2. 将该备份文件重命名为<span>config.json</span>，再重启软件即可恢复个性化配置。
               </div>
             </p>
-          </div>,
+          </div>
+        ),
         cancelText: '取消',
         okText: '确定',
         onOk: async () => {
@@ -438,11 +296,167 @@ export default {
             this.removeUserConfigLoading = false
           }
         },
-        onCancel () {}
+        onCancel () {},
       })
-    }
-  }
+    },
+  },
 }
 </script>
-<style lang="sass">
-</style>
+
+<template>
+  <ds-container>
+    <template slot="header">
+      设置
+    </template>
+
+    <div v-if="config">
+      <a-form-item label="开机自启" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-checkbox v-model="config.app.autoStart.enabled" @change="onAutoStartChange">
+          本应用开机自启
+        </a-checkbox>
+        <a-button class="md-mr-10" icon="profile" @click="openLog()">日志</a-button>
+        <div class="form-help">
+          windows下建议开启开机自启。<a @click="openExternal('https://github.com/docmirror/dev-sidecar/blob/master/doc/recover.md')">更多说明参考</a>
+        </div>
+      </a-form-item>
+      <a-form-item v-if="systemPlatform === 'mac'" label="隐藏Dock图标" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-checkbox v-model="config.app.dock.hideWhenWinClose">
+          关闭窗口时隐藏Dock图标(仅限Mac)
+        </a-checkbox>
+        <div class="form-help">
+          修改后需要重启应用
+        </div>
+      </a-form-item>
+      <hr>
+      <a-form-item label="远程配置" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-checkbox v-model="config.app.remoteConfig.enabled" @change="onRemoteConfigEnabledChange">
+          启用远程配置
+        </a-checkbox>
+        <div class="form-help">
+          应用启动时会向下面的地址请求配置补丁，获得最新的优化后的github访问体验。<br>
+          如果您觉得远程配置有安全风险，请关闭此功能，或删除共享远程配置，仅使用个人远程配置。<br>
+          配置优先级：本地修改配置  >  个人远程配置  >  共享远程配置 > 默认配置
+        </div>
+      </a-form-item>
+      <a-form-item label="共享远程配置地址" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-input v-model="config.app.remoteConfig.url" :title="config.app.remoteConfig.url" />
+      </a-form-item>
+      <a-form-item label="个人远程配置地址" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-input v-model="config.app.remoteConfig.personalUrl" :title="config.app.remoteConfig.personalUrl" />
+      </a-form-item>
+      <a-form-item label="重载远程配置" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-button :disabled="config.app.remoteConfig.enabled === false" :loading="reloadLoading" icon="sync" @click="reloadRemoteConfig()">
+          重载远程配置
+        </a-button>
+        <div class="form-help">
+          注意，部分远程配置文件所在站点，修改内容后可能需要等待一段时间才能生效。<br>
+          如果重载远程配置后发现下载的还是修改前的内容，请稍等片刻再重试。
+        </div>
+      </a-form-item>
+      <hr>
+      <a-form-item label="主题设置" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.theme" default-value="light" button-style="solid">
+          <a-radio-button value="light" title="light">
+            亮色
+          </a-radio-button>
+          <a-radio-button value="dark" title="dark">
+            暗色
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="首页提示" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.showShutdownTip" default-value="true" button-style="solid">
+          <a-radio-button :value="true">
+            显示
+          </a-radio-button>
+          <a-radio-button :value="false">
+            隐藏
+          </a-radio-button>
+        </a-radio-group>
+        <div class="form-help">
+          是否显示首页的警告提示
+        </div>
+      </a-form-item>
+      <a-form-item v-if="!isLinux()" label="关闭策略" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.closeStrategy" default-value="0" button-style="solid">
+          <a-radio-button :value="0">
+            弹出提示
+          </a-radio-button>
+          <a-radio-button :value="1">
+            直接退出
+          </a-radio-button>
+          <a-radio-button :value="2">
+            最小化到系统托盘
+          </a-radio-button>
+        </a-radio-group>
+        <div class="form-help">
+          点击窗口右上角关闭按钮的效果
+        </div>
+      </a-form-item>
+      <hr>
+      <a-form-item label="打开窗口快捷键" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-input v-model="config.app.showHideShortcut" @change="shortcutChange" @keydown="shortcutKeyDown" @keyup="shortcutKeyUp" />
+        <div class="form-help">
+          部分快捷键已被占用：F5=刷新页面，F12=开发者工具（DevTools）
+        </div>
+      </a-form-item>
+      <a-form-item label="启动时打开窗口" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.startShowWindow" default-value="true" button-style="solid">
+          <a-radio-button :value="true">
+            打开窗口
+          </a-radio-button>
+          <a-radio-button :value="false">
+            隐藏窗口
+          </a-radio-button>
+        </a-radio-group>
+        <div class="form-help">
+          启动软件时，是否打开窗口。提示：如果设置为隐藏窗口，可点击系统托盘小图标打开窗口。
+        </div>
+      </a-form-item>
+      <a-form-item label="启动时窗口大小" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-input-number v-model="config.app.windowSize.width" :step="50" :min="600" :max="2400" />&nbsp;×
+        <a-input-number v-model="config.app.windowSize.height" :step="50" :min="500" :max="2000" />
+      </a-form-item>
+      <hr>
+      <a-form-item label="自动检查更新" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.autoChecked" default-value="light" button-style="solid">
+          <a-radio-button :value="true">
+            开启
+          </a-radio-button>
+          <a-radio-button :value="false">
+            关闭
+          </a-radio-button>
+        </a-radio-group>
+        <div class="form-help">
+          开启自动检查更新后，每次应用启动时会检查一次更新，如有新版本，则会弹出提示。
+        </div>
+      </a-form-item>
+      <a-form-item label="忽略预发布版本" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-radio-group v-model="config.app.skipPreRelease" default-value="light" button-style="solid">
+          <a-radio-button :value="true">
+            忽略
+          </a-radio-button>
+          <a-radio-button :value="false">
+            不忽略
+          </a-radio-button>
+        </a-radio-group>
+        <div class="form-help">
+          预发布版本号为带有 “<code>-</code>” 的版本。注：该配置只对当前版本为正式版本时有效。
+        </div>
+      </a-form-item>
+    </div>
+    <template slot="footer">
+      <div class="footer-bar">
+        <a-button :loading="removeUserConfigLoading" class="md-mr-10" icon="sync" @click="restoreFactorySettings()">
+          恢复出厂设置
+        </a-button>
+        <a-button :loading="resetDefaultLoading" class="md-mr-10" icon="sync" @click="resetDefault()">
+          恢复默认
+        </a-button>
+        <a-button :loading="applyLoading" icon="check" type="primary" @click="apply()">
+          应用
+        </a-button>
+      </div>
+    </template>
+  </ds-container>
+</template>
diff --git a/packages/mitmproxy/src/lib/interceptor/impl/req/baiduOcr.js b/packages/mitmproxy/src/lib/interceptor/impl/req/baiduOcr.js
index 8b8e6668f..dcce58773 100644
--- a/packages/mitmproxy/src/lib/interceptor/impl/req/baiduOcr.js
+++ b/packages/mitmproxy/src/lib/interceptor/impl/req/baiduOcr.js
@@ -171,7 +171,9 @@ module.exports = {
       res.writeHead(200, headers)
       res.write(JSON.stringify(result)) // 格式如：{"words_result":[{"words":"6525"}],"words_result_num":1,"log_id":1818877093747960000}
       res.end()
-      if (next) next() // 异步执行完继续next
+      if (next) {
+        next() // 异步执行完继续next
+      }
     }).catch((err) => {
       log.info('baiduOcr error:', err)
       res.writeHead(200, headers)
diff --git a/packages/mitmproxy/src/lib/interceptor/index.js b/packages/mitmproxy/src/lib/interceptor/index.js
index 5a1cbf718..a37b6f560 100644
--- a/packages/mitmproxy/src/lib/interceptor/index.js
+++ b/packages/mitmproxy/src/lib/interceptor/index.js
@@ -30,5 +30,5 @@ module.exports = [
 
   // response interceptor impls
   OPTIONSHeaders, cacheRes, responseReplace,
-  script
+  script,
 ]
diff --git a/packages/mitmproxy/src/lib/proxy/common/util.js b/packages/mitmproxy/src/lib/proxy/common/util.js
index ec7aca050..0ab2a0452 100644
--- a/packages/mitmproxy/src/lib/proxy/common/util.js
+++ b/packages/mitmproxy/src/lib/proxy/common/util.js
@@ -21,7 +21,7 @@ function getTimeoutConfig (hostname, serverSetting) {
 
   return {
     timeout: timeoutConfig.timeout || serverSetting.defaultTimeout || 20000,
-    keepAliveTimeout: timeoutConfig.keepAliveTimeout || serverSetting.defaultKeepAliveTimeout || 30000
+    keepAliveTimeout: timeoutConfig.keepAliveTimeout || serverSetting.defaultKeepAliveTimeout || 30000,
   }
 }