You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.1 KiB
222 lines
8.1 KiB
2 years ago
|
<template>
|
||
|
|
<div class="head">
|
||
|
|
<div class="title">{{ title || state.lang.title }}</div>
|
||
|
|
<div class="menu">
|
||
|
|
<el-dropdown class="icon" :size="state.size.size">
|
||
|
|
<el-button :size="state.size.size" icon="Avatar" circle></el-button>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item @click="updatePass">{{ state.lang.changePwd }}</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="emit('logout')">{{ state.lang.logout }}</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.fullScreen" placement="bottom">
|
||
|
|
<el-icon @click="fullscreen" class="icon">
|
||
|
|
<FullScreen />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.changeStyle" placement="left">
|
||
|
|
<el-dropdown class="icon" :size="state.size.size" trigger="click">
|
||
|
|
<el-button :size="state.size.size" icon="Opportunity" circle></el-button>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item @click="changeStyle('noobStyle')">
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.default" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<Sunset />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeStyle('light')">
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.light" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<Sunny />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeStyle('dark')">
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.dark" placement="left">
|
||
|
|
<el-icon class="dropdown-icon">
|
||
|
|
<MoonNight />
|
||
|
|
</el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-tooltip>
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.language" placement="left">
|
||
|
|
<el-dropdown class="icon" :size="state.size.size" trigger="click">
|
||
|
|
<el-button icon="Flag" :size="state.size.size" circle></el-button>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item @click="changeLang('chinese')">简体中文</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeLang('english')">English</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-tooltip>
|
||
|
|
<el-tooltip class="box-item" effect="dark" :content="state.lang.size" placement="left">
|
||
|
|
<el-dropdown class="icon" :size="state.size.size" trigger="click">
|
||
|
|
<el-button icon="Switch" :size="state.size.size" circle></el-button>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item @click="changeSize('normal')">{{ state.lang.normal }}</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeSize('small')">{{ state.lang.small }}</el-dropdown-item>
|
||
|
|
<el-dropdown-item @click="changeSize('large')">{{ state.lang.large }}</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</el-tooltip>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-dialog :title="state.lang.changePwd" v-model="flag.update" :size="state.size.size" :close-on-click-modal="false"
|
||
|
|
top="10vh" width="40%">
|
||
|
|
<ModifyForm :width="150" :param="password" @cancel="flag.update = false" @confirm="emit('updatePwd', password)"
|
||
|
|
:rules="rules">
|
||
|
|
<el-form-item :label="state.lang.oldPwd" prop="old">
|
||
|
|
<el-input v-model="password.old"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="state.lang.newPwd" prop="new">
|
||
|
|
<el-input v-model="password.new"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item :label="state.lang.rePwd" prop="reNew">
|
||
|
|
<el-input v-model="password.reNew"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</ModifyForm>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { reactive, onMounted, ref } from "vue";
|
||
|
|
import { ModifyForm } from "noob";
|
||
|
|
|
||
|
|
import { setLang } from "plugs";
|
||
|
|
import { SimpleRequired, SimplePassword } from 'plugs/element'
|
||
|
|
import { lang, styles, size } from 'plugs/config'
|
||
|
|
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
const emit = defineEmits(["updatePwd", "logout"]);
|
||
|
|
const flag = reactive({
|
||
|
|
update: false
|
||
|
|
})
|
||
|
|
const password = ref({
|
||
|
|
new: '',
|
||
|
|
reNew: '',
|
||
|
|
old: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const rules = {
|
||
|
|
old: [{
|
||
|
|
required: true,
|
||
|
|
trigger: 'blur',
|
||
|
|
validator: (rule: any, value: any, callback: any) => {
|
||
|
|
if (value == null || value === '') {
|
||
|
|
callback(new Error(state.lang.pleaseEnter + state.lang.oldPwd.toLowerCase()));
|
||
|
|
}
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
new: [new SimplePassword()],
|
||
|
|
reNew: [{
|
||
|
|
required: true,
|
||
|
|
trigger: 'blur',
|
||
|
|
validator: (rule: any, value: any, callback: any) => {
|
||
|
|
if (value == null || value === '') {
|
||
|
|
callback(new Error(state.lang.plsRePwd));
|
||
|
|
} else if (value != password.value.new) {
|
||
|
|
callback(new Error(state.lang.rePwdError));
|
||
|
|
}
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
|
||
|
|
const updatePass = () => {
|
||
|
|
password.value = {
|
||
|
|
new: '',
|
||
|
|
reNew: '',
|
||
|
|
old: ''
|
||
|
|
};
|
||
|
|
flag.update = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
const fullscreen = () => {
|
||
|
|
if (!document.fullscreenElement) {
|
||
|
|
document.documentElement.requestFullscreen();
|
||
|
|
} else {
|
||
|
|
if (document.exitFullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const changeStyle = type => {
|
||
|
|
commit('updateState', { prop: 'style', value: styles[type] })
|
||
|
|
}
|
||
|
|
|
||
|
|
const changeLang = type => {
|
||
|
|
const newLang = lang[type];
|
||
|
|
setLang(newLang);
|
||
|
|
commit('updateState', { prop: 'lang', value: newLang })
|
||
|
|
}
|
||
|
|
|
||
|
|
const changeSize = type => {
|
||
|
|
commit('updateState', { prop: 'size', value: size[type] })
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.head {
|
||
|
|
background-color: v-bind('state.style.headBg');
|
||
|
|
height: v-bind('state.size.headHeight');
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
height: v-bind('state.size.headHeight');
|
||
|
|
width: v-bind('state.size.asideWidth');
|
||
|
|
text-align: center;
|
||
|
|
float: left;
|
||
|
|
font-size: v-bind('state.size.titleSize');
|
||
|
|
line-height: v-bind('state.size.headHeight');
|
||
|
|
font-weight: bold;
|
||
|
|
color: v-bind('state.style.titleColor');
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
float: right;
|
||
|
|
line-height: v-bind('state.size.headHeight');
|
||
|
|
width: v-bind('state.size.headMenuWidth');
|
||
|
|
padding-right: 10px;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
float: right;
|
||
|
|
cursor: pointer;
|
||
|
|
height: v-bind('state.size.headHeight');
|
||
|
|
margin-right: 20px;
|
||
|
|
font-size: v-bind('state.size.headIconSize');
|
||
|
|
align-items: center;
|
||
|
|
color: v-bind('state.style.color');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-icon {
|
||
|
|
font-size: 20px;
|
||
|
|
margin: 5px 3px;
|
||
|
|
}
|
||
|
|
</style>
|