clash-manager/src/views/config.vue

101 lines
2.3 KiB
Vue

<template>
<main class="tab-content configs">
<fieldset class="card">
<legend>系统设置</legend>
<section class="field">
<span class="label">开机启动Clash</span>
<wc-switch disabled></wc-switch>
</section>
<section class="field">
<span class="label">设置为系统代理</span>
<wc-switch disabled></wc-switch>
</section>
<section class="field">
<span class="label">允许局域网的连接</span>
<wc-switch v-model="configs.allowLan"></wc-switch>
</section>
</fieldset>
<fieldset class="card">
<legend>Clash设置</legend>
<section class="field">
<span class="label">代理模式</span>
<wc-radio-group v-model="configs.proxy">
<wc-radio value="global">全局</wc-radio>
<wc-radio value="rule">规则</wc-radio>
<wc-radio value="direct">直连</wc-radio>
</wc-radio-group>
</section>
<section class="field">
<span class="label">Socks5 代理端口</span>
<wc-input size="small" v-model="configs.socks5"></wc-input>
</section>
<section class="field">
<span class="label">HTTP 代理端口</span>
<wc-input size="small" v-model="configs.http"></wc-input>
</section>
<section class="field">
<span class="label">混合代理端口</span>
<wc-input size="small" v-model="configs.mixed"></wc-input>
</section>
</fieldset>
</main>
</template>
<script>
import fetch from '@/lib/fetch'
export default {
data() {
return {
contrl: {
host: '//127.0.0.1:',
port: 6767,
key: ''
},
configs: {
proxy: 'rule',
http: 0,
socks5: 0,
mixed: 7890,
allowLan: false
}
}
},
mounted() {
this.getConfig()
},
methods: {
getVersion() {
fetch('/version').then(r => {
console.log(r)
this.$store.version = r.version
})
},
getConfig() {
fetch('/configs').then(r => {
console.log(r)
Object.assign(this.configs, {
proxy: r.mode,
http: r.port,
socks5: r['socks-port'],
mixed: r['mixed-port'],
allowLan: r['allow-lan']
})
// this.version = r.version
})
}
}
}
</script>
Vue 62.5%
JavaScript 22.2%
SCSS 10.9%
HTML 4.4%