init
This commit is contained in:
liyang
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="page-404">
|
||||
<img :src="`${$assetsPublicPath}static/image/page/404/cover@2x.png`">
|
||||
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page-404 {
|
||||
background-color: #555555;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 196px;
|
||||
@extend %unable-select;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-page-cover
|
||||
title="欢迎使用 D2ADMIN"
|
||||
sub-title="您现在使用的是简化版起始模板">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
|
||||
</d2-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 6,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#444"
|
||||
},
|
||||
"shape": {
|
||||
"type": "polygon",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 6
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 160,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 10,
|
||||
"size_min": 40,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 200,
|
||||
"color": "#ffffff",
|
||||
"opacity": 1,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 8,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "grab"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#DCDFE6"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#DCDFE6",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 160,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4,
|
||||
"size_min": 0.3,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"direction": "none",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 600
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 250,
|
||||
"size": 0,
|
||||
"duration": 2,
|
||||
"opacity": 0,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 400,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 400,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#fff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 10,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 500,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "bottom",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 0.5
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 4,
|
||||
"duration": 0.3,
|
||||
"opacity": 1,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="layer bg" id="login"></div>
|
||||
<div class="layer flex-center">
|
||||
<!-- logo部分 -->
|
||||
<div class="logo-group">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`" alt="logo">
|
||||
</div>
|
||||
<!-- 表单部分 -->
|
||||
<div class="form-group">
|
||||
<el-card>
|
||||
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
|
||||
<el-form-item prop="username">
|
||||
<el-input type="text" v-model="formLogin.username" placeholder="用户名">
|
||||
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" v-model="formLogin.password" placeholder="密码">
|
||||
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input type="text" v-model="formLogin.code" placeholder="- - - -">
|
||||
<template slot="prepend">验证码</template>
|
||||
<template slot="append">
|
||||
<img class="login-code" :src="`${$assetsPublicPath}static/image/login-code.png`">
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button @click="submit" type="primary" class="button-login">登录</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 帮助按钮 -->
|
||||
<el-button type="info" class="button-help">
|
||||
需要帮助
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
require('particles.js')
|
||||
// 配置地址
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
import config from './config/default'
|
||||
import Cookies from 'js-cookie'
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formLogin: {
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
code: 'v9am'
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化例子插件
|
||||
particlesJS('login', config)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUsernameSet'
|
||||
]),
|
||||
// 提交登陆信息
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// this.$axios({
|
||||
// method: 'post',
|
||||
// url: '/login',
|
||||
// data: {
|
||||
// username: this.formLogin.username,
|
||||
// password: this.formLogin.password
|
||||
// }
|
||||
// })
|
||||
// .then(res => {
|
||||
// // cookie 一天的有效期
|
||||
// const setting = {
|
||||
// expires: 1
|
||||
// }
|
||||
// // 设置 cookie
|
||||
// Cookies.set('uuid', res.uuid, setting)
|
||||
// Cookies.set('token', res.token, setting)
|
||||
// // 设置 vuex
|
||||
// this.d2adminUsernameSet(res.name)
|
||||
// // 跳转路由
|
||||
// this.$router.push({
|
||||
// name: 'index'
|
||||
// })
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.log('err', err)
|
||||
// })
|
||||
// 因为去掉了 mock.js 这里模拟登陆
|
||||
setTimeout(() => {
|
||||
// cookie 一天的有效期
|
||||
const setting = {
|
||||
expires: 1
|
||||
}
|
||||
// 设置 cookie
|
||||
Cookies.set('uuid', 'test-user-uuid', setting)
|
||||
Cookies.set('token', 'hello-d2-admin', setting)
|
||||
// 设置 vuex
|
||||
this.d2adminUsernameSet('管理员')
|
||||
// 跳转路由
|
||||
this.$router.push({
|
||||
name: 'index'
|
||||
})
|
||||
}, 1000)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
.login-page {
|
||||
background-color: #EDF4FA;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// 层
|
||||
.layer {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// 背景
|
||||
.bg {
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
// logo
|
||||
.logo-group {
|
||||
margin-top: -75px - 70px;
|
||||
position: relative;
|
||||
top: 75px;
|
||||
img {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
// 登陆表单
|
||||
.form-group {
|
||||
width: 300px;
|
||||
// 重新设置卡片阴影
|
||||
.el-card {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
.el-card__body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
}
|
||||
// 登陆按钮
|
||||
.button-login {
|
||||
width: 100%;
|
||||
}
|
||||
// 输入框左边的图表区域缩窄
|
||||
.el-input-group__prepend {
|
||||
padding: 0px 14px;
|
||||
}
|
||||
.login-code {
|
||||
height: 40px - 2px;
|
||||
display: block;
|
||||
margin: 0px -20px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
// 帮助按钮
|
||||
.button-help {
|
||||
width: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<d2-container type="full">
|
||||
<d2-page-cover
|
||||
title="设置"
|
||||
sub-title="系统设置">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/setting.png`">
|
||||
</d2-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<d2-container type="full" class="page">
|
||||
<template slot="header">D2Admin 版本检查</template>
|
||||
<div class="banner">
|
||||
<img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
|
||||
</div>
|
||||
<div v-if="update" class="releases">
|
||||
<h1>有新版本 {{releases.tag_name}}</h1>
|
||||
<p>更新日期 {{dayjs(releases.created_at).format('YYYY年M月D日')}}</p>
|
||||
<a :href="releases.html_url" class="el-button el-button--primary d2-mb">{{releases.html_url}}</a>
|
||||
</div>
|
||||
<div v-else class="up2date">
|
||||
已经是最新版本
|
||||
<p class="d2-mb-0">
|
||||
<a href="https://github.com/FairyEver/d2-admin" class="el-button el-button--primary" target="blank">
|
||||
<d2-icon name="github" class="d2-mr-5"/>
|
||||
D2Admin on Github
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<el-button
|
||||
:type="updateNotify ? 'primary' : 'default'"
|
||||
size="mini"
|
||||
@click="d2adminUpdateNotifySet(!updateNotify)">
|
||||
{{updateNotify ? '关闭更新提醒 (当前:打开)' : '打开更新提醒 (当前:关闭)'}}
|
||||
</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dayjs
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
version: state => state.d2admin.version,
|
||||
releases: state => state.d2admin.releases,
|
||||
update: state => state.d2admin.update,
|
||||
updateNotify: state => state.d2admin.updateNotify
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'd2adminUpdateNotifySet'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.banner {
|
||||
text-align: center;
|
||||
img {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
.releases {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
.up2date {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user