noob-components/packages/manage/components/head.vue

<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>