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

改用vue写

master
yutent 2022-10-10 20:01:25 +08:00
parent 225fee72d5
commit 4cb6e54aed
8 changed files with 123 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -12,7 +12,7 @@
<script type="importmap">{{importmap}}</script>
</head>
<body>
<div class="app"></div>
<div class="app noselect"></div>
<script src="main.js"></script>
</body>
</html>

32
src/app.vue
View File

@ -1,11 +1,43 @@
<template>
<Sidebar></Sidebar>
<h1>hello vue-live!</h1>
</template>
<script>
import Sidebar from './components/sidebar.vue'
export default {
components: { Sidebar },
data() {
return {}
},
mounted() {
console.log(this.$store)
}
}
</script>
<style lang="scss">
html {
width: 840px;
height: 540px;
}
body {
width: 100%;
height: 100%;
font-size: 14px;
color: var(--color-dark-1);
}
.app {
display: flex;
width: 100%;
height: 100%;
background: #f7f8fb;
}
.holder {
flex: 1;
}
</style>

86
src/components/sidebar.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<aside class="aside">
<a class="logo"></a>
<nav class="nav-list">
<a
class="item"
v-for="(it, i) in navs"
:class="{ active: i === tab }"
@click="changeTab(i)"
:text="it"
>
</a>
</nav>
<span class="holder"></span>
<span class="version">{{ $store.version }}</span>
</aside>
</template>
<script>
export default {
data() {
return {
navs: ['代理', '规则', '连接', '订阅', '设置'],
tab: +localStorage.getItem('tab') || 0
}
},
methods: {
changeTab(idx) {
this.tab = idx
localStorage.setItem('tab', idx)
}
}
}
</script>
<style lang="scss">
.aside {
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 128px;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03);
.logo {
width: 64px;
height: 64px;
margin: 16px auto;
background: url(/icons/128x128.png) no-repeat;
background-size: 100%;
}
.nav-list {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 16px;
.item {
width: 100%;
height: 32px;
margin-top: 16px;
line-height: 32px;
border-radius: 16px;
text-align: center;
cursor: pointer;
transition: color 0.2s linear, background 0.2s linear;
&:hover {
color: var(--color-blue-1);
}
&.active {
color: #fff;
background: var(--color-blue-1);
}
}
}
.version {
line-height: 36px;
text-align: center;
}
}
</style>

2
src/css/app.css
View File

@ -1 +1 @@
html{width:840px;height:540px}body{width:100%;height:100%;font-size:14px;color:var(--color-dark-1)}.app{display:flex;width:100%;height:100%;background:#f7f8fb}.holder{flex:1}.aside{flex-shrink:0;display:flex;flex-direction:column;width:128px;box-shadow:4px 0 12px rgba(0,0,0,.03)}.aside .logo{width:64px;height:64px;margin:16px auto;background:url(../icons/128x128.png) no-repeat;background-size:100%}.aside .nav-list{display:flex;flex-direction:column;width:100%;padding:0 16px}.aside .nav-list .item{width:100%;height:32px;margin-top:16px;line-height:32px;border-radius:16px;text-align:center;cursor:pointer;transition:color .2s linear,background .2s linear}.aside .nav-list .item:hover{color:var(--color-blue-1)}.aside .nav-list .item.active{color:#fff;background:var(--color-blue-1)}.aside .version{line-height:36px;text-align:center}.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;-ms-user-select:none;user-select:none;color:var(--color-blue-1);font-weight:bold}
.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}

71
src/css/app.scss
View File

@ -1,74 +1,3 @@
html {
width: 840px;
height: 540px;
}
body {
width: 100%;
height: 100%;
font-size: 14px;
color: var(--color-dark-1);
}
.app {
display: flex;
width: 100%;
height: 100%;
background: #f7f8fb;
}
.holder {
flex: 1;
}
.aside {
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 128px;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.03);
.logo {
width: 64px;
height: 64px;
margin: 16px auto;
background: url(../icons/128x128.png) no-repeat;
background-size: 100%;
}
.nav-list {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 16px;
.item {
width: 100%;
height: 32px;
margin-top: 16px;
line-height: 32px;
border-radius: 16px;
text-align: center;
cursor: pointer;
transition: color 0.2s linear, background 0.2s linear;
&:hover {
color: var(--color-blue-1);
}
&.active {
color: #fff;
background: var(--color-blue-1);
}
}
}
.version {
line-height: 36px;
text-align: center;
}
}
.tab-content {
flex: 1;
flex-shrink: 0;

4
src/js/app.js
View File

@ -64,10 +64,6 @@ Anot({
},
methods: {
changeTab(idx) {
this.tab = idx
Anot.ls('tab', idx)
},
getVersion() {
fetch('/version').then(r => {
this.version = r.version

3
src/store.js
View File

@ -7,7 +7,8 @@
import { reactive } from 'vue'
const store = reactive({
foo: 'bar'
foo: 'bar',
version: '1.1.4'
})
export default function (app) {

2
vue.live.js
View File

@ -7,7 +7,7 @@ export default {
pages: {
index: {
entry: resolve('./src/main.js'),
title: ''
title: 'blabla'
}
},
imports: {