From 633ae92a71307797356dedd41f1634f459e941d2 Mon Sep 17 00:00:00 2001 From: yutent Date: Sun, 16 Oct 2022 22:59:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90vue=E7=9A=84=E5=88=87?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- src/app.vue | 15 +++- src/{css => assets}/app.scss | 0 src/components/sidebar.vue | 26 ++++-- src/css/app.css | 1 - src/index.html | 92 +------------------ src/js/app.js | 168 ----------------------------------- src/lib/fetch.js | 9 ++ src/main.js | 7 ++ src/router.js | 50 +++++++---- src/views/config.vue | 100 +++++++++++++++++++++ src/views/connects.vue | 11 +++ src/views/proxies.vue | 11 +++ src/views/remote.vue | 114 ++++++++++++++++++++++++ src/views/rules.vue | 42 +++++++++ 15 files changed, 361 insertions(+), 289 deletions(-) rename src/{css => assets}/app.scss (100%) delete mode 100644 src/css/app.css delete mode 100644 src/js/app.js create mode 100644 src/lib/fetch.js create mode 100644 src/views/config.vue create mode 100644 src/views/connects.vue create mode 100644 src/views/proxies.vue create mode 100644 src/views/remote.vue create mode 100644 src/views/rules.vue diff --git a/package.json b/package.json index a3c16b2..86a779a 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,8 @@ "name": "yutent", "email": "yutent.io@gmail.com" }, - "devDependencies": {}, + "devDependencies": { + "@bytedo/vue-live": "0.0.5" + }, "dependencies": {} } diff --git a/src/app.vue b/src/app.vue index 307189a..adc6f3c 100644 --- a/src/app.vue +++ b/src/app.vue @@ -1,9 +1,11 @@ diff --git a/src/css/app.scss b/src/assets/app.scss similarity index 100% rename from src/css/app.scss rename to src/assets/app.scss diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue index a74816a..8ac7358 100644 --- a/src/components/sidebar.vue +++ b/src/components/sidebar.vue @@ -5,10 +5,11 @@ @@ -22,14 +23,21 @@ export default { data() { return { - navs: ['代理', '规则', '连接', '订阅', '设置'], - tab: +localStorage.getItem('tab') || 0 + navs: [ + { title: '代理', path: '/proxies' }, + { title: '规则', path: '/rules' }, + { title: '连接', path: '/connects' }, + { title: '订阅', path: '/remote' }, + { title: '设置', path: '/config' } + ], + tab: localStorage.getItem('tab') || '/proxies' } }, methods: { - changeTab(idx) { - this.tab = idx - localStorage.setItem('tab', idx) + changeTab(it) { + this.tab = it.path + localStorage.setItem('tab', it.path) + this.$router.push(it.path) } } } diff --git a/src/css/app.css b/src/css/app.css deleted file mode 100644 index 50aac0f..0000000 --- a/src/css/app.css +++ /dev/null @@ -1 +0,0 @@ -.tab-content{flex:1;flex-shrink:0;display:flex;flex-direction:column;height:540px;padding:16px}.tab-content .field{display:flex;align-items:center;width:100%;height:36px;margin-top:12px}.tab-content .field .label{width:128px;font-weight:bold;color:var(--color-grey-3)}.tab-content .field .full{flex:1}.tab-content.configs{width:49%;margin-left:1%}.tab-content.remote wc-button,.tab-content.rules wc-button{width:64px;min-width:64px;margin-left:16px}.tab-content.remote .scroll,.tab-content.rules .scroll{overflow:hidden;flex:1;margin-top:24px}.tab-content.remote .card,.tab-content.rules .card{margin:0 auto}.tab-content.remote .list,.tab-content.rules .list{word-break:break-all}.tab-content.remote .list .item,.tab-content.rules .list .item{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 16px;border-bottom:1px solid var(--color-plain-1);font-family:Menlo,"Courier New",Courier,monospace;transition:background .2s linear}.tab-content.remote .list .item:hover,.tab-content.rules .list .item:hover{background-color:var(--color-plain-1)}.tab-content.remote .list span.type,.tab-content.rules .list span.type{padding:2px 3px;border-radius:2px;background-color:var(--color-blue-1);color:#fff}.card{flex:1;flex-shrink:0;display:flex;flex-direction:column;flex-wrap:wrap;width:100%;max-height:100%;padding:12px;margin:0 auto 24px;border:0;border-radius:4px;background-color:#fff;box-shadow:0 0 8px rgba(0,0,0,.075)}.card legend{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color-blue-1);font-weight:bold} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 9e56542..6445fdb 100644 --- a/src/index.html +++ b/src/index.html @@ -29,97 +29,9 @@ {{version}} -
+ -
-
- 规则列表 - - -
    -
  • - {{it.type}} - {{it.payload}} - {{it.proxy}} -
    • -
- -
-
- -
- -
-
- 订阅配置 - -
- 订阅地址 - - 更新 -
- - -
    -
  • - {{i + 1}}. - {{it[0]}} - {{it[1]}} -
    • -
- -
-
- -
-
- 系统设置 - -
- 开机启动Clash - -
- -
- 设置为系统代理 - -
- -
- 允许局域网的连接 - -
-
- -
- Clash设置 - -
- 代理模式 - - 全局 - 规则 - 直连 - -
- -
- Socks5 代理端口 - -
- -
- HTTP 代理端口 - -
- -
- 混合代理端口 - -
- -
-
+ diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100644 index ce0359b..0000000 --- a/src/js/app.js +++ /dev/null @@ -1,168 +0,0 @@ -/** - * - * @author yutent - * @date 2022/05/16 00:38:48 - */ - -import Anot from '//unpkg.yutent.top/anot/dist/anot.js' -import fetch from '//unpkg.yutent.top/@bytedo/fetch/dist/index.js' -import '//unpkg.yutent.top/@bytedo/wcui/dist/layer/index.js' -import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js' -import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js' -import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js' - -fetch.inject.response(r => r.json()) - -Anot({ - $id: 'app', - - state: { - version: '1.10.0', - navs: ['代理', '规则', '连接', '订阅', '设置'], - tab: +Anot.ls('tab') || 0, - contrl: { - host: '//127.0.0.1:', - port: 6767, - key: '' - }, - rules: [], - remote: { - link: Anot.ls('remote_link') || '', - list: [] - }, - configs: { - proxy: 'rule', - http: 0, - socks5: 0, - mixed: 7890, - allowLan: false - } - }, - - mounted() { - if (this.contrl.port) { - fetch.BASE_URL = this.contrl.host + this.contrl.port - } else { - return layer - .prompt('请输入Clash本地管理端口', (v, done) => { - let n = +v.trim() - if (n === n) { - done() - } - }) - .then(v => { - Anot.ls('web_port', v) - location.reload() - }) - .catch(e => { - location.reload() - }) - } - this.getVersion() - this.getConfig() - this.getRule() - }, - - methods: { - getVersion() { - fetch('/version').then(r => { - this.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 - }) - }, - - getRule() { - fetch('/rules').then(r => { - console.log(r) - this.rules = r.rules - }) - }, - - updateRemote() { - if (this.remote.link) { - if (!/^(https?:)?\/\//.test(this.remote.link)) { - return layer.toast('订阅地址格式不正确', 'error') - } - Anot.ls('remote_link', this.remote.link) - } else { - return - } - let txt = '' - let names = ['DIRECT'] - let r = (Anot.ss('temp') || '').trim() - - this.remote.list = r.split('\n').map(it => { - let tmp = decodeURIComponent(it).split('#') - let tmp2 = new URL(tmp[0]) - let protocol = tmp2.protocol.slice(0, -1) - let path = tmp2.pathname.slice(2) - let info = { name: tmp.pop(), type: protocol, udp: true } - - path = path.split(':') - - info.port = path.pop() - - path = path[0].split('@') - info.server = path.pop() - - switch (protocol) { - case 'ss': - path = atob(path[0]).split(':') - console.log(path) - Object.assign(info, { - cipher: path[0], - password: path[1] - }) - break - - case 'trojan': - Object.assign(info, { - password: path[0], - sni: tmp2.searchParams.get('sni'), - 'skip-cert-verify': true - }) - break - } - - names.push(info.name) - txt += ` - { name: ${info.name}, type: ${info.type}, server: ${info.server}, port: ${ - info.port - }, password: ${info.password}, udp: true, ${info.type === 'ss' ? 'cipher' : 'sni'}: ${ - info.type === 'ss' ? info.cipher : info.sni - }}\n` - return [info.name, info.type] - }) - - // window.foo = txt - // window.bar = names.join(', ') - // // console.log(txt) - - return - window - .fetch(this.remote.link, { cors: true }) - .then(r => r.text()) - .then(r => { - r = atob(r).trim() - Anot.ss('temp', r) - layer.toast('订阅更新成功', 'success') - this.remote.list = r.split('\n').map(it => { - let tmp = decodeURIComponent(it).split('#') - return [tmp.pop(), tmp[0]?.split('://').shift()] - }) - }) - } - } -}) diff --git a/src/lib/fetch.js b/src/lib/fetch.js new file mode 100644 index 0000000..f9285e3 --- /dev/null +++ b/src/lib/fetch.js @@ -0,0 +1,9 @@ +import fetch from 'fetch' + +fetch.BASE_URL = '//127.0.0.1:6767' + +fetch.inject.response(function (r) { + return r.json() +}) + +export default fetch diff --git a/src/main.js b/src/main.js index ea93c01..7d80ee8 100644 --- a/src/main.js +++ b/src/main.js @@ -6,6 +6,13 @@ import { createApp } from 'vue' +import '@/assets/app.scss' + +import '//unpkg.yutent.top/@bytedo/wcui/dist/layer/index.js' +import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js' +import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js' +import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js' + import App from './app.vue' import store from './store' diff --git a/src/router.js b/src/router.js index 2f021a3..c96dd9e 100644 --- a/src/router.js +++ b/src/router.js @@ -4,26 +4,42 @@ * @date 2022/10/09 18:09:20 */ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHashHistory } from 'vue-router' + +import Proxies from './views/proxies.vue' +import Rules from './views/rules.vue' +import Config from './views/config.vue' +import Connects from './views/connects.vue' +import Remote from './views/remote.vue' const router = createRouter({ - history: createWebHistory(), + history: createWebHashHistory(), routes: [ - // { - // path: '/login', - // name: 'login', - // component: Login - // }, - // { - // path: '/', - // name: 'main', - // component: Main - // }, - // { - // path: '/room', - // name: 'room', - // component: Room - // } + { + path: '/proxies', + name: 'proxies', + component: Proxies + }, + { + path: '/rules', + name: 'rules', + component: Rules + }, + { + path: '/connects', + name: 'connects', + component: Connects + }, + { + path: '/remote', + name: 'remote', + component: Remote + }, + { + path: '/config', + name: 'config', + component: Config + } ] }) diff --git a/src/views/config.vue b/src/views/config.vue new file mode 100644 index 0000000..7fdb6c5 --- /dev/null +++ b/src/views/config.vue @@ -0,0 +1,100 @@ + + + diff --git a/src/views/connects.vue b/src/views/connects.vue new file mode 100644 index 0000000..2a71df9 --- /dev/null +++ b/src/views/connects.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/views/proxies.vue b/src/views/proxies.vue new file mode 100644 index 0000000..2a71df9 --- /dev/null +++ b/src/views/proxies.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/views/remote.vue b/src/views/remote.vue new file mode 100644 index 0000000..8952926 --- /dev/null +++ b/src/views/remote.vue @@ -0,0 +1,114 @@ + + + diff --git a/src/views/rules.vue b/src/views/rules.vue new file mode 100644 index 0000000..64b8a9a --- /dev/null +++ b/src/views/rules.vue @@ -0,0 +1,42 @@ + + +