Skip to content

Commit

Permalink
“恢复默认”按钮,添加loading效果。
Browse files Browse the repository at this point in the history
  • Loading branch information
wangliang181230 committed Apr 2, 2024
1 parent e40bf54 commit 1d6c9d0
Show file tree
Hide file tree
Showing 12 changed files with 57 additions and 66 deletions.
5 changes: 1 addition & 4 deletions packages/gui/src/view/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>-->
Expand Down
39 changes: 18 additions & 21 deletions packages/gui/src/view/components/settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
启动后自动检查设置

Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -144,8 +143,6 @@ export default {
this.npmVariables = ret
})
},
onJsonChange (config) {
},
afterVisibleChange (val) {
console.log('visible', val)
if (val === true) {
Expand Down Expand Up @@ -200,7 +197,7 @@ export default {
},
addDnsMapping () {
this.dnsMappings.unshift({ key: '', value: 'usa' })
this.dnsMappings.unshift({ key: '', value: 'quad9' })
},
doSetNpmVariablesNow () {
this.syncTargetConfig()
Expand All @@ -211,7 +208,7 @@ export default {
this.npmVariables = ret
})
}).then(() => {
this.$message.info('设置成功')
this.$message.success('设置成功')
})
},
addNpmVariable () {
Expand Down
2 changes: 1 addition & 1 deletion packages/gui/src/view/components/setup-ca.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
9 changes: 6 additions & 3 deletions packages/gui/src/view/mixins/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default {
status: {},
labelCol: { span: 4 },
wrapperCol: { span: 20 },
resetDefaultLoading: false,
applyLoading: false,
systemPlatform: ''
}
Expand Down Expand Up @@ -43,7 +44,7 @@ export default {
},
async apply () {
if (this.applyLoading === true) {
return
return // 防重复提交
}
this.applyLoading = true
await this.applyBefore()
Expand All @@ -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
})
},
Expand Down
11 changes: 5 additions & 6 deletions packages/gui/src/view/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -14,7 +13,6 @@
<span v-if="update.downloading">{{ update.progress }}%</span>{{ update.downloading ? '新版本下载中' : '检查更新' }}
</a-badge>
</a-button>

</span>
</template>

Expand Down Expand Up @@ -108,7 +106,6 @@
</div>
</a-modal>
</div>

</ds-container>

</template>
Expand Down Expand Up @@ -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()
Expand All @@ -231,7 +228,7 @@ export default {
this.$confirm({
title: '第一次使用,请先安装CA根证书',
content: '本应用正常使用,必须安装和信任CA根证书',
cancelText: '下次',
cancelText: '下次安装',
okText: '去安装',
onOk: () => {
this.openSetupCa()
Expand All @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/gui/src/view/pages/plugin/git.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/gui/src/view/pages/plugin/node.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand All @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions packages/gui/src/view/pages/plugin/overwall.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/gui/src/view/pages/plugin/pip.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/gui/src/view/pages/proxy.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 1d6c9d0

Please sign in to comment.