改用vue写
parent
225fee72d5
commit
4cb6e54aed
|
|
@ -12,7 +12,7 @@
|
||||||
<script type="importmap">{{importmap}}</script>
|
<script type="importmap">{{importmap}}</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app"></div>
|
<div class="app noselect"></div>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
32
src/app.vue
32
src/app.vue
|
|
@ -1,11 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
|
<Sidebar></Sidebar>
|
||||||
<h1>hello vue-live!</h1>
|
<h1>hello vue-live!</h1>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Sidebar from './components/sidebar.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { Sidebar },
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
console.log(this.$store)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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}
|
||||||
|
|
@ -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 {
|
.tab-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
|
||||||
|
|
@ -64,10 +64,6 @@ Anot({
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
changeTab(idx) {
|
|
||||||
this.tab = idx
|
|
||||||
Anot.ls('tab', idx)
|
|
||||||
},
|
|
||||||
getVersion() {
|
getVersion() {
|
||||||
fetch('/version').then(r => {
|
fetch('/version').then(r => {
|
||||||
this.version = r.version
|
this.version = r.version
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,8 @@
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
const store = reactive({
|
const store = reactive({
|
||||||
foo: 'bar'
|
foo: 'bar',
|
||||||
|
version: '1.1.4'
|
||||||
})
|
})
|
||||||
|
|
||||||
export default function (app) {
|
export default function (app) {
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ export default {
|
||||||
pages: {
|
pages: {
|
||||||
index: {
|
index: {
|
||||||
entry: resolve('./src/main.js'),
|
entry: resolve('./src/main.js'),
|
||||||
title: ''
|
title: 'blabla'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
imports: {
|
imports: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue