lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/yuanzbz/vue-admin-perfect into vue-i18n 

 Conflicts:
	src/views/home/index.vue
This commit is contained in:
zouzhibing 2022-11-20 01:28:25 +08:00
parent 9e575785df a981538a69
commit d0fa7eb853
13 changed files with 330 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -25,6 +25,7 @@
"file-saver": "^2.0.5",
"fuse.js": "^6.6.2",
"jszip": "^3.9.1",
"lottie-web": "^5.9.6",
"mavon-editor": "^2.10.4",
"md-editor-v3": "^1.11.3",
"nprogress": "^0.2.0",
@ -4181,6 +4182,11 @@
"resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
},
"node_modules/lottie-web": {
"version": "5.9.6",
"resolved": "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
"integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@ -10601,6 +10607,11 @@
"resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
},
"lottie-web": {
"version": "5.9.6",
"resolved": "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz",
"integrity": "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
},
"lower-case": {
"version": "2.0.2",
"resolved": "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz",

BIN
src/assets/image/login/side-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

1
src/assets/lottie/login-side.json Normal file
View File

File diff suppressed because one or more lines are too long

26
src/components/SwitchDark/index.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<el-switch
@change="switchDark"
inline-prompt
v-model="themeConfig.isDark"
:active-icon="Sunny"
:inactive-icon="Moon"
/>
</template>
<script setup lang="ts" name="switchDark">
import { Sunny, Moon } from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
// 设置信息
const themeConfig = computed(()=>SettingStore.themeConfig)
// 切换暗黑模式
const switchDark = () => {
const body = document.documentElement as HTMLElement;
if (themeConfig.value.isDark) body.setAttribute("class", "dark");
else body.setAttribute("class", "");
};
</script>

26
src/components/Theme/components/switchDark.vue
View File

@ -1,26 +0,0 @@
<template>
<el-switch
@change="switchDark"
inline-prompt
v-model="themeConfig.isDark"
:active-icon="Sunny"
:inactive-icon="Moon"
/>
</template>
<script setup lang="ts" name="switchDark">
import { Sunny, Moon } from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import {useSettingStore} from "@/store/modules/setting"
const SettingStore = useSettingStore()
// 设置信息
const themeConfig = computed(()=>SettingStore.themeConfig)
// 切换暗黑模式
const switchDark = () => {
const body = document.documentElement as HTMLElement;
if (themeConfig.value.isDark) body.setAttribute("class", "dark");
else body.setAttribute("class", "");
};
</script>

2
src/components/Theme/index.vue
View File

@ -64,7 +64,7 @@
<script lang="ts" setup>
import {computed, ref} from 'vue'
import SwitchDark from './components/switchDark.vue'
import SwitchDark from '@/components/SwitchDark/index.vue'
import {ElMessage} from "element-plus";
import {PRIMARY_COLOR} from "@/config/index";
import {useSettingStore} from "@/store/modules/setting"

16
src/styles/element-dark.scss
View File

@ -132,8 +132,6 @@ html.dark {
box-sizing: border-box;
border:var(--zb-border-light);
}
// el-drawer__header
.el-drawer__header {
span {
color: var(--el-text-color-primary) !important;
@ -180,4 +178,18 @@ html.dark {
background: black!important;
}
.login-container {
background-color: var(--el-fill-color-extra-light) !important;
.login-box {
background-color: var(--el-mask-color) !important;
.login-form {
background-color: var(--el-bg-color) !important;
box-shadow: var(--geeker-login-shadow-light) !important;
.title {
color: var(--el-text-color-primary) !important;
}
}
}
}
}

2
src/utils/validate.ts
View File

@ -164,6 +164,8 @@ export function verifyEmail(val:string) {
return regx.test(val)
}
/**
* 验证校验器函数封装
* @param verifyPhone 验证函数

77
src/views/home/index.scss Normal file
View File

@ -0,0 +1,77 @@
.personal {
.name {
margin-top: 15px;
font-size: 24px;
font-weight: 500;
color: rgb(38, 38, 38);
}
.description {
margin-top: 8px;
}
.list {
margin-top: 18px;
line-height: 30px;
text-align: left;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
.grid-content {
display: flex;
.left {
width: 40%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: #2d8cf0;
}
.right {
display: flex;
flex-direction: column;
padding-left: 20px;
justify-content: center;
.h2{
font-size: 24px;
margin-bottom: 10px;
}
}
}
.custom {
::v-deep(.el-card__body) {
padding: 0;
}
}
.item {
margin-bottom: 18px;
}
.box-card {
//height: 100%;
position: relative;
margin-bottom: 10px;
width: 100%;
.wechat{
position: absolute;
width: 150px;
right: 0;
top: 0;
}
}
.card-item {
background: linear-gradient(50deg, #1890ff, #77e19d);
}
.home-container{
width: 100%;
height: 100%;
display: flex;
padding: 16px;
box-sizing: border-box;
}

109
src/views/login/components/LoginForm.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="0"
>
<el-form-item label="" prop="username">
<el-input
placeholder="请输入用户名"
autoComplete="on"
style="position: relative"
v-model="ruleForm.username"
@keyup.enter.native="submitForm(ruleFormRef)"
>
<template #prefix>
<el-icon class="el-input__icon"><UserFilled /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
placeholder="请输入密码"
autoComplete="on"
@keyup.enter.native="submitForm(ruleFormRef)"
v-model="ruleForm.password"
:type="passwordType"
>
<template #prefix>
<el-icon class="el-input__icon"><GoodsFilled /></el-icon>
</template>
<template #suffix>
<div class="show-pwd" @click="showPwd"
><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/></div>
</template>
</el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
:loading="loading"
class="login-btn"
type="primary"
@click="submitForm(ruleFormRef)"
>登录</el-button
>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElNotification } from "element-plus";
import { useRouter } from 'vue-router'
import {useUserStore} from "@/store/modules/user"
import {getTimeState} from '@/utils/index'
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const UserStore = useUserStore()
const passwordType = ref('password')
const loading = ref(false)
const rules = reactive({
password: [{ required: true, message: "请输入用户名", trigger: "blur" }],
username: [{ required: true, message: "请输入密码", trigger: "blur" }],
})
// 表单数据
const ruleForm = reactive({
username: 'admin',
password: '123456',
})
const showPwd = () => {
if (passwordType.value === 'password') {
passwordType.value = ''
} else {
passwordType.value = 'password'
}
}
const submitForm = (formEl: FormInstance | undefined) => {
loading.value = true
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
// 登录
setTimeout(async ()=>{
await UserStore.login( ruleForm)
await router.push({
path: '/',
})
ElNotification({
title: getTimeState(),
message: "欢迎登录 Vue Admin Perfect",
type: "success",
duration: 3000
});
loading.value = true
},1000)
} else {
console.log('error submit!')
return false
}
})
}
</script>
<style lang="scss" scoped>
@import "../index.scss";
</style>

98
src/views/login/index.scss
View File

@ -1,19 +1,49 @@
$dark_gray: #889aa4;
:deep(input) {
background: transparent;
border: 0;
color: white;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
height: 47px;
}
::v-deep(.el-input__wrapper){
background: none;
}
.login-box {
width: 80%;
max-width: 500px;
position: relative;
width: 100%;
height: 100%;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
.login-left{
width: 50%;
img{
width: 100%;
max-width: 900px;
}
}
.login-form{
max-width: 480px;
width: 50%;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
box-sizing: border-box;
}
.login-title{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
.title{
margin: 0;
font-size: 30px;
white-space: nowrap;
}
.icon{
width: 60px;
}
}
::v-deep(.el-input__inner){
height: 40px;
}
}
.login-btn{
margin-top: 20px;
width: 100%; height: 47px
}
.show-pwd {
position: absolute;
@ -23,25 +53,41 @@ $dark_gray: #889aa4;
color: $dark_gray;
cursor: pointer;
user-select: none;
::v-deep(.svg-icon){
vertical-align: 0;
}
}
.login-container {
background-color: #2d3a4b;
min-height: 100%;
background-color: #f0f2f5;
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
.login-box-content-right {
position: relative;
display: inline-block;
margin-left: 10px;
width: 100%;
height: 370px;
overflow: hidden;
.login-form {
margin-top: 20px;
padding: 25px 25px;
box-sizing: border-box;
}
.login-dark{
position: absolute;
right: 20px;
top: 20px;
}
@media (max-width: 850px){
.login-container{
padding: 10px;
}
.login-box{
.login-form{
width: 88%;
.title{
font-size: 20px;
}
}
}
.login-left{
display: none;
}
}

133
src/views/login/index.vue
View File

@ -1,133 +1,24 @@
<template>
<div class="login-container">
<div class="login-box">
<!--登录功能-->
<div style="color: white; text-align: center; margin-bottom: 15px"
>登录系统-密码账号随便填 admin admin</div
>
<div class="login-box-content-right">
<!--login-Form-->
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="0"
>
<el-form-item label="" prop="username">
<el-input
placeholder="请输入用户名"
autoComplete="on"
style="position: relative"
v-model="ruleForm.username"
type="text"
@keyup.enter.native="submitForm(ruleFormRef)"
>
<template #prefix>
<el-icon class="el-input__icon"><UserFilled /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
placeholder="请输入密码"
autoComplete="on"
@keyup.enter.native="submitForm(ruleFormRef)"
v-model="ruleForm.password"
:type="passwordType"
>
<template #prefix>
<el-icon class="el-input__icon"><GoodsFilled /></el-icon>
</template>
<template #suffix>
<div class="show-pwd" @click="showPwd"
><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/></div>
</template>
</el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
type="primary"
@click="submitForm(ruleFormRef)"
style="width: 100%; height: 47px"
>登录</el-button
>
</el-form-item>
</el-form>
<SwitchDark class="login-dark"/>
<div class="login-left">
<img src="@/assets/image/login/side-logo.png" >
</div>
<div class="login-form">
<div class="login-title">
<img class="icon" src="@/assets/logo.png" alt="logo" />
<h2 class="title">Vue-Admin-Perfect</h2>
</div>
<LoginForm/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElNotification } from "element-plus";
import { useRouter } from 'vue-router'
import {useUserStore} from "@/store/modules/user"
import { ElMessage } from 'element-plus'
import {getTimeState} from '@/utils/index'
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const UserStore = useUserStore()
// 自定义校验规则
const validateUsername = (rule: any, value: any, callback: any) => {
if (!value) {
return callback(new Error('请输入用户名'))
}
callback()
}
const validatePass = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
callback()
}
}
const rules = reactive({
password: [{ validator: validatePass, trigger: 'blur' }],
username: [{ validator: validateUsername, trigger: 'blur' }],
})
// 表单数据
const ruleForm = reactive({
username: 'admin',
password: '123456',
})
const passwordType = ref('password')
const showPwd = () => {
if (passwordType.value === 'password') {
passwordType.value = ''
} else {
passwordType.value = 'password'
}
}
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
if (valid) {
// 登录
await UserStore.login( ruleForm)
router.push({
path: '/',
})
ElNotification({
title: getTimeState(),
message: "欢迎登录 Vue Admin Perfect",
type: "success",
duration: 3000
});
} else {
console.log('error submit!')
return false
}
})
}
import LoginForm from './components/LoginForm.vue'
import SwitchDark from '@/components/SwitchDark/index.vue'
</script>
<style lang="scss" scoped>
@import "./index";

5
yarn.lock
View File

@ -2600,6 +2600,11 @@
"resolved" "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
"version" "4.17.21"
"lottie-web@^5.9.6":
"integrity" "sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA=="
"resolved" "https://r.cnpmjs.org/lottie-web/-/lottie-web-5.9.6.tgz"
"version" "5.9.6"
"lower-case@^2.0.2":
"integrity" "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg=="
"resolved" "https://r2.cnpmjs.org/lower-case/-/lower-case-2.0.2.tgz"