appcat
/
clash-manager
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新样式

master
yutent 2022-11-21 19:26:02 +08:00
parent 633ae92a71
commit 1d9f7fb63c
12 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<title>{{title}}</title>
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<link rel="stylesheet" href="//unpkg.yutent.top/@bytedo/wcui/dist/css/reset-basic.css">
<link rel="stylesheet" href="//unpkg.debianx.in/@bytedo/wcui/dist/css/reset-basic.css">
<script async src="//esm.tool/es-module-shims.wasm.js"></script>
<script type="importmap">{{importmap}}</script>
</head>

2
package.json
View File

@ -13,7 +13,7 @@
"email": "yutent.io@gmail.com"
},
"devDependencies": {
"@bytedo/vue-live": "0.0.5"
"@bytedo/vue-live": "0.0.12"
},
"dependencies": {}
}

2
src/app.vue
View File

@ -44,7 +44,7 @@ body {
display: flex;
width: 100%;
height: 100%;
background: #f7f8fb;
background: var(--color-plain-1);
}
.holder {
flex: 1;

1
src/assets/app.css Normal file
View File

@ -0,0 +1 @@
body{font-size:14px;color:var(--color-dark-1)}a{color:inherit}.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,.tab-content.proxies wc-button{width:64px;min-width:64px;margin-left:16px}.tab-content.remote .scroll,.tab-content.rules .scroll,.tab-content.proxies .scroll{overflow:hidden;flex:1;margin-top:24px}.tab-content.remote .card,.tab-content.rules .card,.tab-content.proxies .card{margin:0 auto}.tab-content.remote .list,.tab-content.rules .list,.tab-content.proxies .list{word-break:break-all}.tab-content.remote .list .item,.tab-content.rules .list .item,.tab-content.proxies .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,.tab-content.proxies .list .item:hover{background-color:var(--color-plain-1)}.tab-content.remote .list span.type,.tab-content.rules .list span.type,.tab-content.proxies .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}

11
src/assets/app.scss
View File

@ -1,3 +1,11 @@
body {
font-size: 14px;
color: var(--color-dark-1);
}
a {
color: inherit;
}
.tab-content {
flex: 1;
flex-shrink: 0;
@ -30,7 +38,8 @@
}
&.remote,
&.rules {
&.rules,
&.proxies {
wc-button {
width: 64px;
min-width: 64px;

16
src/components/sidebar.vue
View File

@ -24,11 +24,11 @@ export default {
data() {
return {
navs: [
{ title: '代理', path: '/proxies' },
{ title: '规则', path: '/rules' },
{ title: '连接', path: '/connects' },
{ title: '订阅', path: '/remote' },
{ title: '设置', path: '/config' }
{ title: '代 理', path: '/proxies' },
{ title: '规 则', path: '/rules' },
{ title: '连 接', path: '/connects' },
{ title: '订 阅', path: '/remote' },
{ title: '设 置', path: '/config' }
],
tab: localStorage.getItem('tab') || '/proxies'
}
@ -70,13 +70,13 @@ export default {
height: 32px;
margin-top: 16px;
line-height: 32px;
border-radius: 16px;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: color 0.2s linear, background 0.2s linear;
transition: color 0.2s linear, background 0.2s linear, box-shadow 0.2s ease-in-out;
&:hover {
color: var(--color-blue-1);
box-shadow: 0 0 0 1px var(--color-blue-a);
}
&.active {

38
src/index.html
View File

@ -1,38 +0,0 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Clash Web Panel</title>
<link rel="favicon" href="favicon.ico">
<link rel="icon" type="image/x-icon" href="icons/192x192.png">
<link href="//unpkg.yutent.top/@bytedo/wcui/dist/css/reset-basic.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="js/app.js" type="module"></script>
</head>
<body>
<div class="app noselect" anot="app">
<aside class="aside">
<a class="logo"></a>
<nav class="nav-list">
<a
class="item"
:for="i it in navs"
:class="{active: i === tab}"
@click="changeTab(i)"
:text="it">
</a>
</nav>
<span class="holder"></span>
<span class="version">{{version}}</span>
</aside>
</div>
</body>
</html>

8
src/main.js
View File

@ -8,10 +8,10 @@ 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 '//unpkg.debianx.in/@bytedo/wcui/dist/layer/index.js'
import '//unpkg.debianx.in/@bytedo/wcui/dist/form/switch.js'
import '//unpkg.debianx.in/@bytedo/wcui/dist/form/radio.js'
import '//unpkg.debianx.in/@bytedo/wcui/dist/form/button.js'
import App from './app.vue'

4
src/views/config.vue
View File

@ -84,7 +84,6 @@ export default {
getConfig() {
fetch('/configs').then(r => {
console.log(r)
Object.assign(this.configs, {
proxy: r.mode,
http: r.port,
@ -92,7 +91,8 @@ export default {
mixed: r['mixed-port'],
allowLan: r['allow-lan']
})
// this.version = r.version
console.log(this.configs)
})
}
}

49
src/views/proxies.vue
View File

@ -1,11 +1,56 @@
<template>
<main class="tab-content"></main>
<main class="tab-content proxies">
<fieldset class="card">
<legend>策略组</legend>
<wc-scroll class="scroll">
<ul class="list">
<li class="item" v-for="it in providers">
<span class="name">{{ it.name }}</span>
<span>{{ it.payload }}</span>
<span class="type">{{ it.proxy }}</span>
</li>
</ul>
</wc-scroll>
</fieldset>
</main>
</template>
<script>
import fetch from '@/lib/fetch'
//
export default {
data() {
return {}
return {
providers: [],
proxies: []
}
},
mounted() {
console.log('mounted...')
fetch('/providers/proxies').then(r => {
console.log(r)
this.providers = r.providers
})
}
}
</script>
<style lang="scss" scoped>
.list {
.name {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 108px;
height: 28px;
padding: 0 8px;
border: 1px solid var(--color-dark-a);
border-radius: 14px;
font-size: 12px;
background: var(--color-dark-a);
}
}
</style>

2
src/views/remote.vue
View File

@ -82,7 +82,7 @@ export default {
break
}
names.push(info.name)
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'}: ${

15
vue.live.js
View File

@ -3,23 +3,18 @@ import { resolve } from 'path'
// let pages =
export default {
port: 6677,
pages: {
index: {
entry: resolve('./src/main.js'),
title: 'blabla'
title: 'Clash Manager'
}
},
devServer: {
port: 6677
},
imports: {
vue: '//esm.tool/vue.js',
'vue-router': '//esm.tool/vue-router.js',
'element-plus': '//esm.tool/elem-plus.js',
'element-ui': '//esm.tool/elem-plus.js',
fetch: '//esm.tool/fetch.js',
'vue-echarts': '//esm.tool/vue-echarts.js',
'echarts/core': 'https://unpkg.com/echarts@5.3.3/dist/echarts.esm.min.js',
'echarts/lib/chart/line': 'https://unpkg.com/echarts@5.3.3/dist/echarts.esm.min.js',
'vue-demi': 'https://unpkg.com/vue-demi@0.13.11/lib/index.mjs',
'resize-detector': 'https://unpkg.com/resize-detector@0.3.0/esm/index.js'
fetch: '//esm.tool/fetch.js'
}
}