github
/
dev-sidecar
mirror of https://github.com/docmirror/dev-sidecar
1
0
Fork 0
Code Issues Releases Wiki Activity

所有 `*.vue` 页面，`<template>` 和 `<script>` 替换位置

1.x
王良 2024-11-15 16:14:41 +08:00
parent f3fdb81ef7
commit 47b4e119e4
10 changed files with 883 additions and 897 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/gui/src/view/components/container.vue
View File

@ -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%;

79
packages/gui/src/view/components/setup-ca.vue
View File

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

223
packages/gui/src/view/pages/index.vue
View File

@ -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 {

119
packages/gui/src/view/pages/plugin/git.vue
View File

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

101
packages/gui/src/view/pages/plugin/node.vue
View File

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

208
packages/gui/src/view/pages/plugin/overwall.vue
View File

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

113
packages/gui/src/view/pages/plugin/pip.vue
View File

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

146
packages/gui/src/view/pages/proxy.vue
View File

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

471
packages/gui/src/view/pages/server.vue
View File

@ -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 {

308
packages/gui/src/view/pages/setting.vue
View File

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