From 47b4e119e4555cc8555be08a8971654a7e3158d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com>
Date: Fri, 15 Nov 2024 16:14:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=80=E6=9C=89=20`*.vue`=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C`<template>`=20=E5=92=8C=20`<script>`=20?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gui/src/view/components/container.vue     |  12 +-
 packages/gui/src/view/components/setup-ca.vue |  79 ++-
 packages/gui/src/view/pages/index.vue         | 223 ++++-----
 packages/gui/src/view/pages/plugin/git.vue    | 119 +++--
 packages/gui/src/view/pages/plugin/node.vue   | 101 ++--
 .../gui/src/view/pages/plugin/overwall.vue    | 208 ++++----
 packages/gui/src/view/pages/plugin/pip.vue    | 113 ++---
 packages/gui/src/view/pages/proxy.vue         | 146 +++---
 packages/gui/src/view/pages/server.vue        | 471 +++++++++---------
 packages/gui/src/view/pages/setting.vue       | 308 ++++++------
 10 files changed, 883 insertions(+), 897 deletions(-)

diff --git a/packages/gui/src/view/components/container.vue b/packages/gui/src/view/components/container.vue
index f1a7437e..de1fd773 100644
--- a/packages/gui/src/view/components/container.vue
+++ b/packages/gui/src/view/components/container.vue
@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: 'ds-container'
+}
+</script>
+
 <template>
   <div class="ds-container">
     <div class="body-wrapper">
@@ -8,12 +14,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ds-container'
-}
-</script>
-
 <style lang="scss">
 .ds-container{
   height:100%;
diff --git a/packages/gui/src/view/components/setup-ca.vue b/packages/gui/src/view/components/setup-ca.vue
index 6c71e2aa..fa7749d7 100644
--- a/packages/gui/src/view/components/setup-ca.vue
+++ b/packages/gui/src/view/components/setup-ca.vue
@@ -1,42 +1,3 @@
-<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',
@@ -94,5 +55,41 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<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>
diff --git a/packages/gui/src/view/pages/index.vue b/packages/gui/src/view/pages/index.vue
index 91b30774..8bbfec43 100644
--- a/packages/gui/src/view/pages/index.vue
+++ b/packages/gui/src/view/pages/index.vue
@@ -1,114 +1,3 @@
-<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'
@@ -366,6 +255,118 @@ export default {
   }
 }
 </script>
+
+<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>
+
 <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 1b5db309..da0abc25 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'
 
@@ -121,3 +61,62 @@ export default {
   }
 }
 </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 :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>
diff --git a/packages/gui/src/view/pages/plugin/node.vue b/packages/gui/src/view/pages/plugin/node.vue
index e9b741fa..aa6df08c 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">
@@ -82,56 +131,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 58237979..9977acc0 100644
--- a/packages/gui/src/view/pages/plugin/overwall.vue
+++ b/packages/gui/src/view/pages/plugin/overwall.vue
@@ -1,3 +1,106 @@
+<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">
@@ -112,108 +215,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 814a8d6e..6d570c40 100644
--- a/packages/gui/src/view/pages/plugin/pip.vue
+++ b/packages/gui/src/view/pages/plugin/pip.vue
@@ -1,3 +1,47 @@
+<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">
@@ -8,17 +52,17 @@
 
     <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>
@@ -78,51 +122,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 1ee52f75..d1abc811 100644
--- a/packages/gui/src/view/pages/proxy.vue
+++ b/packages/gui/src/view/pages/proxy.vue
@@ -1,3 +1,74 @@
+<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>
+
 <template>
   <ds-container>
     <template slot="header">
@@ -42,7 +113,7 @@
         </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>
+        <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>
 
@@ -118,76 +189,3 @@
   </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 b5f25e71..3aca603c 100644
--- a/packages/gui/src/view/pages/server.vue
+++ b/packages/gui/src/view/pages/server.vue
@@ -1,238 +1,3 @@
-<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 vueJsonEditor from 'vue-json-editor-fix-cn'
 import Plugin from '../mixins/plugin'
@@ -408,6 +173,242 @@ export default {
   }
 }
 </script>
+
+<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>
+
 <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 48c54c0e..35f09fc1 100644
--- a/packages/gui/src/view/pages/setting.vue
+++ b/packages/gui/src/view/pages/setting.vue
@@ -1,156 +1,3 @@
-<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'
@@ -444,5 +291,156 @@ export default {
   }
 }
 </script>
-<style lang="sass">
-</style>
+
+<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>