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> <title>{{title}}</title>
<meta name="keywords" content="{{keywords}}"> <meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}"> <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 async src="//esm.tool/es-module-shims.wasm.js"></script>
<script type="importmap">{{importmap}}</script> <script type="importmap">{{importmap}}</script>
</head> </head>

2
package.json
View File

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

2
src/app.vue
View File

@ -44,7 +44,7 @@ body {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #f7f8fb; background: var(--color-plain-1);
} }
.holder { .holder {
flex: 1; 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 { .tab-content {
flex: 1; flex: 1;
flex-shrink: 0; flex-shrink: 0;
@ -30,7 +38,8 @@
} }
&.remote, &.remote,
&.rules { &.rules,
&.proxies {
wc-button { wc-button {
width: 64px; width: 64px;
min-width: 64px; min-width: 64px;

6
src/components/sidebar.vue
View File

@ -70,13 +70,13 @@ export default {
height: 32px; height: 32px;
margin-top: 16px; margin-top: 16px;
line-height: 32px; line-height: 32px;
border-radius: 16px; border-radius: 8px;
text-align: center; text-align: center;
cursor: pointer; 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 { &:hover {
color: var(--color-blue-1); box-shadow: 0 0 0 1px var(--color-blue-a);
} }
&.active { &.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 '@/assets/app.scss'
import '//unpkg.yutent.top/@bytedo/wcui/dist/layer/index.js' import '//unpkg.debianx.in/@bytedo/wcui/dist/layer/index.js'
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js' import '//unpkg.debianx.in/@bytedo/wcui/dist/form/switch.js'
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js' import '//unpkg.debianx.in/@bytedo/wcui/dist/form/radio.js'
import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js' import '//unpkg.debianx.in/@bytedo/wcui/dist/form/button.js'
import App from './app.vue' import App from './app.vue'

4
src/views/config.vue
View File

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

49
src/views/proxies.vue
View File

@ -1,11 +1,56 @@
<template> <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> </template>
<script> <script>
import fetch from '@/lib/fetch'
//
export default { export default {
data() { data() {
return {} return {
providers: [],
proxies: []
}
},
mounted() {
console.log('mounted...')
fetch('/providers/proxies').then(r => {
console.log(r)
this.providers = r.providers
})
} }
} }
</script> </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 break
} }
names.push(info.name) names.push(`"${info.name}"`)
txt += ` - { name: ${info.name}, type: ${info.type}, server: ${info.server}, port: ${ txt += ` - { name: ${info.name}, type: ${info.type}, server: ${info.server}, port: ${
info.port info.port
}, password: ${info.password}, udp: true, ${info.type === 'ss' ? 'cipher' : 'sni'}: ${ }, 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 = // let pages =
export default { export default {
port: 6677,
pages: { pages: {
index: { index: {
entry: resolve('./src/main.js'), entry: resolve('./src/main.js'),
title: 'blabla' title: 'Clash Manager'
} }
}, },
devServer: {
port: 6677
},
imports: { imports: {
vue: '//esm.tool/vue.js', vue: '//esm.tool/vue.js',
'vue-router': '//esm.tool/vue-router.js', 'vue-router': '//esm.tool/vue-router.js',
'element-plus': '//esm.tool/elem-plus.js', fetch: '//esm.tool/fetch.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'
} }
} }