“恢复默认”按钮，添加loading效果。

packages/gui/src/view/App.vue

@@ -14,7 +14,7 @@
           >
             <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>
+                <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>
@@ -24,11 +24,8 @@
                 <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>-->

packages/gui/src/view/components/settings.vue

@@ -17,32 +17,31 @@
       :style="{ height: '100%' }"
     >
       <a-tab-pane tab="拦截设置" key="1"  >
-        <vue-json-editor style="height:100%;" ref="editor" v-model="targetConfig.intercepts" mode="code" :show-btns="false" :expandedOnStart="true" @json-change="onJsonChange"></vue-json-editor>
+        <vue-json-editor style="height:100%;" ref="editor" v-model="targetConfig.intercepts" mode="code" :show-btns="false" :expandedOnStart="true"></vue-json-editor>
       </a-tab-pane>
       <a-tab-pane tab="DNS设置" key="2">
         <div>
           <div>某些域名有时候需要通过其他DNS服务器获取到的IP才可以访问</div>
           <a-row style="margin-top:10px">
             <a-col>
-              <a-button  type="primary" icon="plus" @click="addDnsMapping()" />
+              <a-button type="primary" icon="plus" @click="addDnsMapping()"/>
             </a-col>
           </a-row>
           <a-row :gutter="10" style="margin-top: 10px" 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-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">
+              <a-select :disabled="item.value === false" v-model="item.value">
                 <a-select-option value="usa">USA DNS</a-select-option>
                 <a-select-option value="aliyun">Aliyun DNS</a-select-option>
               </a-select>
             </a-col>
             <a-col :span="3">
-              <a-button v-if="item.value!==false" style="margin-left:10px" type="danger" icon="minus" @click="deleteDnsMapping(item,index)" />
-              <a-button v-if="item.value===false" style="margin-left:10px" type="primary" icon="checked" @click="restoreDefDnsMapping(item,index)" ></a-button>
+              <a-button v-if="item.value !== false" style="margin-left:10px" type="danger" icon="minus" @click="deleteDnsMapping(item,index)"/>
+              <a-button v-if="item.value === false" style="margin-left:10px" type="primary" icon="checked" @click="restoreDefDnsMapping(item,index)" ></a-button>
             </a-col>
           </a-row>
-
         </div>
       </a-tab-pane>
       <a-tab-pane tab="环境变量" key="3">
@@ -51,8 +50,8 @@
           <div>
             <a-form-item label="镜像环境变量" >
               <a-switch  v-model="targetConfig.setting.startup.variables.npm"  default-checked   v-on:click="(checked)=>{targetConfig.setting.startup.variables.npm = checked}">
-                <a-icon slot="checkedChildren" type="check" />
-                <a-icon slot="unCheckedChildren" type="close" />
+                <a-icon slot="checkedChildren" type="check"/>
+                <a-icon slot="unCheckedChildren" type="close"/>
               </a-switch>
               启动后自动检查设置
 
@@ -61,14 +60,14 @@
           </div>
           <a-row :gutter="10" style="margin-top: 10px" v-for="(item,index) of npmVariables" :key = 'index'>
             <a-col :span="10">
-              <a-input :disabled="item.key ===false" v-model="item.key"></a-input>
+              <a-input :disabled="item.key === false" v-model="item.key"></a-input>
             </a-col>
             <a-col :span="10">
-              <a-input :disabled="item.value ===false" v-model="item.value"></a-input>
+              <a-input :disabled="item.value === false" v-model="item.value"></a-input>
             </a-col>
             <a-col :span="4">
-              <a-icon v-if="item.exists" style="color:green" type="check" />
-              <a-icon v-if="!item.exists" title="还未设置" style="color:red" type="exclamation-circle" />
+              <a-icon v-if="item.exists" style="color:green" type="check"/>
+              <a-icon v-if="!item.exists" title="还未设置" style="color:red" type="exclamation-circle"/>
             </a-col>
           </a-row>
         </div>
@@ -79,15 +78,15 @@
         <a-form style="margin-top: 20px"  :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
           <a-form-item label="代理服务" >
             <a-switch  v-model="targetConfig.setting.startup.server"  default-checked   v-on:click="(checked)=>{targetConfig.setting.startup.server = checked}">
-              <a-icon slot="checkedChildren" type="check" />
-              <a-icon slot="unCheckedChildren" type="close" />
+              <a-icon slot="checkedChildren" type="check"/>
+              <a-icon slot="unCheckedChildren" type="close"/>
             </a-switch>
           </a-form-item>
 
           <a-form-item  v-for="(item,key) in targetConfig.setting.startup.proxy" :key="key" :label="key">
             <a-switch  v-model="targetConfig.setting.startup.proxy[key]"  default-checked   v-on:click="(checked)=>{targetConfig.setting.startup.proxy[key] = checked}">
-              <a-icon slot="checkedChildren" type="check" />
-              <a-icon slot="unCheckedChildren" type="close" />
+              <a-icon slot="checkedChildren" type="check"/>
+              <a-icon slot="unCheckedChildren" type="close"/>
             </a-switch>
           </a-form-item>
         </a-form>
@@ -144,8 +143,6 @@ export default {
         this.npmVariables = ret
       })
     },
-    onJsonChange (config) {
-    },
     afterVisibleChange (val) {
       console.log('visible', val)
       if (val === true) {
@@ -200,7 +197,7 @@ export default {
 
     },
     addDnsMapping () {
-      this.dnsMappings.unshift({ key: '', value: 'usa' })
+      this.dnsMappings.unshift({ key: '', value: 'quad9' })
     },
     doSetNpmVariablesNow () {
       this.syncTargetConfig()
@@ -211,7 +208,7 @@ export default {
           this.npmVariables = ret
         })
       }).then(() => {
-        this.$message.info('设置成功')
+        this.$message.success('设置成功')
       })
     },
     addNpmVariable () {

packages/gui/src/view/components/setup-ca.vue

@@ -33,7 +33,7 @@
         2、然后按如下图步骤将根证书添加到<b style="color:red">信任的根证书颁发机构</b><br/>
       </template>
     </div>
-    <img width="100%" :src="setupImage" />
+    <img width="100%" :src="setupImage"/>
   </a-drawer>
 </template>
 

packages/gui/src/view/mixins/plugin.js

@@ -12,6 +12,7 @@ export default {
       status: {},
       labelCol: { span: 4 },
       wrapperCol: { span: 20 },
+      resetDefaultLoading: false,
       applyLoading: false,
       systemPlatform: ''
     }
@@ -43,7 +44,7 @@ export default {
     },
     async apply () {
       if (this.applyLoading === true) {
-        return
+        return // 防重复提交
       }
       this.applyLoading = true
       await this.applyBefore()
@@ -65,20 +66,22 @@ export default {
         cancelText: '取消',
         okText: '确定',
         onOk: async () => {
+          this.resetDefaultLoading = true
           this.config = await this.$api.config.resetDefault(key)
           if (this.ready) {
             await this.ready(this.config)
           }
           await this.apply()
+          this.resetDefaultLoading = false
         },
         onCancel () {}
       })
     },
     saveConfig () {
       return this.$api.config.save(this.config).then((ret) => {
-        this.$message.info('设置已保存')
+        this.$message.success('设置已保存')
         this.setConfig(ret.allConfig)
-        this.printConfig('after saveConfig(), ')
+        this.printConfig('After saveConfig(), ')
         return ret
       })
     },

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

@@ -3,9 +3,8 @@
     <template slot="header">
       给开发者的辅助工具
       <span>
-
           <a-button style="margin-right:10px" @click="openSetupCa">
-            <a-badge :count="_rootCaSetuped?0:1" dot>安装根证书 </a-badge>
+            <a-badge :count="_rootCaSetuped?0:1" dot>安装根证书</a-badge>
           </a-button>
 
           <a-button style="margin-right:10px" @click="doCheckUpdate(true)" :loading="update.downloading"
@@ -14,7 +13,6 @@
               <span v-if="update.downloading">{{ update.progress }}%</span>{{ update.downloading ? '新版本下载中' : '检查更新' }}
             </a-badge>
           </a-button>
-
       </span>
     </template>
 
@@ -108,7 +106,6 @@
         </div>
       </a-modal>
     </div>
-
   </ds-container>
 
 </template>
@@ -205,7 +202,7 @@ export default {
         this.config.plugin.overwall.enabled = true
       }
       this.$api.config.save(this.config).then(() => {
-        this.$message.info('设置已保存')
+        this.$message.success('设置已保存')
       })
       if (this.status.server.enabled) {
         return this.$api.server.restart()
@@ -231,7 +228,7 @@ export default {
       this.$confirm({
         title: '第一次使用，请先安装CA根证书',
         content: '本应用正常使用，必须安装和信任CA根证书',
-        cancelText: '下次',
+        cancelText: '下次安装',
         okText: '去安装',
         onOk: () => {
           this.openSetupCa()
@@ -252,6 +249,8 @@ export default {
       await this.$api.shell.setupCa({ certPath: this.config.server.setting.rootCaFile.certPath })
       this.setting.rootCa = this.setting.rootCa || {}
       const rootCa = this.setting.rootCa
+
+      // 根证书已安装
       rootCa.setuped = true
       this.$set(this, 'setting', this.setting)
       this.$api.setting.save(this.setting)

packages/gui/src/view/pages/plugin/git.vue

@@ -30,7 +30,7 @@
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button class="md-mr-10" icon="sync"   @click="resetDefault()">恢复默认</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>

packages/gui/src/view/pages/plugin/node.vue

@@ -58,10 +58,10 @@
           <div class="form-help">某些库需要自己设置镜像变量，才能下载，比如：electron</div>
           <a-row :gutter="10" style="margin-top: 10px" v-for="(item,index) of npmVariables" :key='index'>
             <a-col :span="10">
-              <a-input :disabled="item.key ===false" v-model="item.key"></a-input>
+              <a-input :disabled="item.key === false" v-model="item.key"></a-input>
             </a-col>
             <a-col :span="10">
-              <a-input :disabled="item.value ===false" v-model="item.value"></a-input>
+              <a-input :disabled="item.value === false" v-model="item.value"></a-input>
             </a-col>
             <a-col :span="4">
               <a-icon v-if="item.exists&& item.hadSet" title="已设置" style="color:green" type="check"/>
@@ -73,7 +73,7 @@
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button class="md-mr-10" icon="sync"   @click="resetDefault()">恢复默认</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>

packages/gui/src/view/pages/plugin/overwall.vue

@@ -30,15 +30,15 @@
                 <span>PAC没有拦截到的域名，可以在此处定义</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-col :span="22">
                 <a-input  v-model="item.key"></a-input>
               </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>
@@ -50,7 +50,7 @@
                 <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'>
@@ -67,7 +67,7 @@
                 <a-input addon-before="密码" type="password" placeholder="password" v-model="item.value.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">您可以在此处配置你自己的服务器地址</div>
@@ -78,7 +78,7 @@
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button class="md-mr-10" icon="sync"   @click="resetDefault()">恢复默认</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>

packages/gui/src/view/pages/plugin/pip.vue

@@ -43,7 +43,7 @@
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button class="md-mr-10" icon="sync"   @click="resetDefault()">恢复默认</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>

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

@@ -55,7 +55,7 @@
     </div>
     <template slot="footer">
       <div class="footer-bar">
-        <a-button class="md-mr-10" icon="sync"   @click="resetDefault()">恢复默认</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>