go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

first commit

Browse Source
This commit is contained in:
zhangchuanlong
2022-01-08 17:20:46 +08:00
commit 8d0158be7c
80 changed files with 5240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/dashboard/index.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>首页</h1>
</template>

3
src/views/error-page/401.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>401</h1>
</template>

3
src/views/error-page/404.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>404</h1>
</template>

207
src/views/login/index.vue Normal file
View File

@@ -0,0 +1,207 @@
<script setup>
import { ref, unref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/auth'
import { createLocalStorage } from '@/utils/cache'
import { setToken } from '@/utils/token'
const title = import.meta.env.VITE_APP_TITLE
const router = useRouter()
const query = unref(router.currentRoute).query
const loginInfo = ref({
name: 'admin',
password: 123456,
})
const ls = createLocalStorage({ prefixKey: 'login_' })
const lsLoginInfo = ls.get('loginInfo')
if (lsLoginInfo) {
loginInfo.value.name = lsLoginInfo.name || ''
loginInfo.value.password = lsLoginInfo.password || ''
}
async function handleLogin() {
const { name, password } = loginInfo.value
if (!name || !password) {
$message.warning('请输入用户名和密码')
return
}
try {
$message.loading('正在验证...')
const res = await login({ name, password: password.toString() })
if (res.code === 0) {
$message.success('登录成功')
ls.set('loginInfo', { name, password })
setToken(res.data.token)
if (query.redirect) {
router.push({ path: '/redirect', query })
} else {
router.push('/')
}
} else {
$message.warning(res.message)
}
} catch (error) {
$message.error(error.message)
}
}
</script>
<template>
<div class="login-page">
<div class="form-wrapper">
<h2 class="title">{{ title }}</h2>
<div class="form-item" mt-20>
<input
v-model="loginInfo.name"
autofocus
type="text"
class="input"
placeholder="username"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<input
v-model="loginInfo.password"
type="password"
class="input"
placeholder="password"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<button class="submit-btn" @click="handleLogin">登录</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@property --perA {
syntax: '<percentage>';
inherits: false;
initial-value: 75%;
}
@property --perB {
syntax: '<percentage>';
inherits: false;
initial-value: 99%;
}
@property --perC {
syntax: '<percentage>';
inherits: false;
initial-value: 15%;
}
@property --perD {
syntax: '<percentage>';
inherits: false;
initial-value: 16%;
}
@property --perE {
syntax: '<percentage>';
inherits: false;
initial-value: 86%;
}
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.login-page {
height: 100%;
background-color: #e1e8ee;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(
circle at var(--perE) 7%,
rgba(40, 40, 40, 0.04) 0%,
rgba(40, 40, 40, 0.04) 50%,
rgba(200, 200, 200, 0.04) 50%,
rgba(200, 200, 200, 0.04) 100%
),
radial-gradient(
circle at var(--perC) var(--perD),
rgba(99, 99, 99, 0.04) 0%,
rgba(99, 99, 99, 0.04) 50%,
rgba(45, 45, 45, 0.04) 50%,
rgba(45, 45, 45, 0.04) 100%
),
radial-gradient(
circle at var(--perA) var(--perB),
rgba(243, 243, 243, 0.04) 0%,
rgba(243, 243, 243, 0.04) 50%,
rgba(37, 37, 37, 0.04) 50%,
rgba(37, 37, 37, 0.04) 100%
),
linear-gradient(var(--angle), #22deed, #8759d7);
animation: move 30s infinite alternate linear;
@keyframes move {
100% {
--perA: 85%;
--perB: 49%;
--perC: 45%;
--perD: 39%;
--perE: 70%;
--angle: 360deg;
}
}
}
.form-wrapper {
text-align: center;
padding: 40px 50px;
border-radius: 15px;
background-color: rgba(#fff, 0.2);
.title {
font-size: 22px;
color: #f3f3f3;
}
.form-item {
width: 240px;
input {
width: 100%;
height: 40px;
padding: 0 15px;
border-radius: 5px;
font-size: 14px;
color: #333;
transition: 0.3s;
&:focus {
box-shadow: 0 0 5px #8759d7;
}
}
button {
width: 100%;
height: 40px;
color: #fff;
font-size: 14px;
font-weight: bold;
border: none;
border-radius: 5px;
background-color: #6683d2;
cursor: pointer;
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
}
}
}
</style>

21
src/views/redirect/index.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
import { useRouter } from 'vue-router'
const { currentRoute, replace } = useRouter()
const { query } = currentRoute.value
let { redirect } = query
Reflect.deleteProperty(query, 'redirect')
if (Array.isArray(redirect)) {
redirect = redirect.join('/')
}
if (redirect.startsWith('/redirect')) {
redirect = '/'
}
replace({
path: redirect.startsWith('/') ? redirect : '/' + redirect,
query,
})
</script>

18
src/views/test-page/TestDialog.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup>
import { NButton } from 'naive-ui'
const handleDelete = function () {
$dialog.confirm({
content: '确认删除？',
confirm() {
$dialog.success('删除成功', { positiveText: '我知道了' })
},
cancel() {
$dialog.warning('已取消', { closable: true })
},
})
}
</script>
<template>
<n-button @click="handleDelete">删除</n-button>
</template>

18
src/views/test-page/TestMessage.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup>
import { NButton } from 'naive-ui'
function handleLogin() {
$message.loading('登陆中...')
setTimeout(() => {
$message.error('登陆失败')
$message.loading('正在尝试重新登陆...')
setTimeout(() => {
$message.success('登陆成功')
}, 2000)
}, 2000)
}
</script>
<template>
<n-button @click="handleLogin">点击登陆</n-button>
</template>

56
src/views/test-page/TestUnocss.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div>
<div class="content-box">
<p text-12>测试12px</p>
<p text-13>测试13px</p>
<p text-14>测试14px</p>
<p text-15>测试15px</p>
<p text-16>测试16px</p>
<p text-17>测试17px</p>
<p text-18>测试18px</p>
<p text-19>测试19px</p>
<p text-20>测试20px</p>
</div>
<div mt-30 class="content-box">
<p text-12>测试12px</p>
<p text-13>测试13px</p>
<p text-14>测试14px</p>
<p text-15>测试15px</p>
<p text-16>测试16px</p>
<p text-17>测试17px</p>
<p text-18>测试18px</p>
<p text-19>测试19px</p>
<p text-20>测试20px</p>
</div>
<div mt-30 class="content-box">
<p text-12>测试12px</p>
<p text-13>测试13px</p>
<p text-14>测试14px</p>
<p text-15>测试15px</p>
<p text-16>测试16px</p>
<p text-17>测试17px</p>
<p text-18>测试18px</p>
<p text-19>测试19px</p>
<p text-20>测试20px</p>
</div>
<div mt-30 class="content-box">
<p text-12>测试12px</p>
<p text-13>测试13px</p>
<p text-14>测试14px</p>
<p text-15>测试15px</p>
<p text-16>测试16px</p>
<p text-17>测试17px</p>
<p text-18>测试18px</p>
<p text-19>测试19px</p>
<p text-20>测试20px</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.content-box {
background-color: #fff;
border-radius: 15px;
padding: 20px;
}
</style>

3
src/views/user/UserPermission.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<h1>权限管理</h1>
</template>

5
src/views/user/index.vue Normal file
View File

@@ -0,0 +1,5 @@
<script setup></script>
<template>
<h1>用户管理</h1>
</template>