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

<template>
    <el-button v-if="closeAble" class="close-btn" :icon="isClose ? 'CaretRight' : 'CaretLeft'" circle
        :size="state.size.size" @click="close"></el-button>
    <div class="head">
        <div class="title">{{ title || t('title') }}</div>
        <div class="menu">
            <el-dropdown class="icon" :size="state.size.size" :teleported="false">
                <el-button :size="state.size.size" icon="Avatar" circle></el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-if="center" @click="router.push(center)">
                            {{ t('head.center') }}
                        </el-dropdown-item>
                        <el-dropdown-item @click="updatePass">{{ t('pwd.changePwd') }}</el-dropdown-item>
                        <el-dropdown-item @click="emit('logout')">{{ t('head.logout') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-tooltip effect="dark" :content="t('head.fullScreen')" placement="bottom">
                <el-icon @click="fullscreen" class="icon">
                    <FullScreen />
                </el-icon>
            </el-tooltip>
            <el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
                <el-dropdown v-show="styleAble" class="icon" :size="state.size.size" trigger="click" :teleported="false">
                    <el-button :size="state.size.size" icon="Opportunity" circle></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="changeStyle('plain')">
                                <el-tooltip effect="dark" :content="t('head.default')" placement="left">
                                    <el-icon class="dropdown-icon">
                                        <Sunset />
                                    </el-icon>
                                </el-tooltip>
                            </el-dropdown-item>
                            <el-dropdown-item @click="changeStyle('light')">
                                <el-tooltip effect="dark" :content="t('head.light')" placement="left">
                                    <el-icon class="dropdown-icon">
                                        <Sunny />
                                    </el-icon>
                                </el-tooltip>
                            </el-dropdown-item>
                            <el-dropdown-item @click="changeStyle('dark')">
                                <el-tooltip effect="dark" :content="t('head.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 effect="dark" :content="t('head.language')" placement="left">
                <el-dropdown v-show="langAble" class="icon" :size="state.size.size" trigger="click" :teleported="false">
                    <el-button icon="Flag" :size="state.size.size" circle></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="changeLang('zh')">{{ t('head.zh') }}</el-dropdown-item>
                            <el-dropdown-item @click="changeLang('en')">{{ t('head.en') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-tooltip>
            <el-tooltip effect="dark" :content="t('head.size')" placement="left">
                <el-dropdown v-show="sizeAble" class="icon" :size="state.size.size" trigger="click" :teleported="false">
                    <el-button icon="Switch" :size="state.size.size" circle></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="changeSize('small')">{{ t('head.small') }}</el-dropdown-item>
                            <el-dropdown-item @click="changeSize('normal')">{{ t('head.normal') }}</el-dropdown-item>
                            <el-dropdown-item @click="changeSize('large')">{{ t('head.large') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-tooltip>
            <span class="username" v-if="username">{{ username }}</span>
        </div>
    </div>

    <el-dialog :title="t('pwd.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); flag.update = false" :rules="rules" :items="items">
        </ModifyForm>
    </el-dialog>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { ModifyForm } from "noob-mengyxu";
import { Element, Styles, Size, NoobInput } from "noob-mengyxu";
import { useRouter } from "vue-router";
import { useI18n } from "vue3-i18n";

const { SimpleRequired, SimplePassword } = Element;
const { state, commit, dispatch } = useStore();
const router = useRouter();
const i18n = useI18n();
const { t } = useI18n();
const emit = defineEmits(["updatePwd", "logout"]);
const flag = reactive({
    update: false
})
const password = ref({
    new: '',
    reNew: '',
    old: ''
})

const props = defineProps({
    title: {
        type: String,
        default: null,
    },
    username: {
        type: String,
        default: null,
    },
    styleAble: {
        type: Boolean,
    },
    sizeAble: {
        type: Boolean,
    },
    langAble: {
        type: Boolean,
    },
    center: {
        type: String,
        default: null,
    },
    closeAble: {
        type: Boolean,
        default: false,
    },
});

const isClose = ref(false)
const close = () => {
    isClose.value = !isClose.value;
    if (isClose.value) {
        state.size.asideWidth = '0px';
        commit("initSize");
    } else {
        state.size.asideWidth = state.size.aside + 'px';
        commit("initSize");
    }
}

const rules = {
    old: [new SimpleRequired('pwd.oldPwd')],
    new: [new SimpleRequired('pwd.newPwd'), new SimplePassword()],
    reNew: [{
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
            if (value == null || value === '') {
                callback(new Error(t('pwd.plsRePwd')));
            } else if (value != password.value.new) {
                callback(new Error(t('pwd.rePwdError')));
            }
            callback();
        }
    }]
}

const items = [
    { i18n: 'pwd.oldPwd', code: 'old', type: "password" },
    { i18n: 'pwd.newPwd', code: 'new', type: "password" },
    { i18n: 'pwd.rePwd', code: 'reNew', type: "password" },
]

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', ['style', Styles[type]]);
}

const changeLang = type => {
    i18n.setLocale(type);
}

const changeSize = type => {
    commit('updateState', ['size', Size[type]])
    commit('initSize', window.innerHeight);
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.close-btn {
    position: absolute;
    z-index: 99;
    top: v-bind('state.size.closeTop');
    left: -5px;
    color: red;
    background: transparent;
}

.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');
    }

    .username {
        float: right;
        height: v-bind('state.size.headHeight');
        margin-right: 20px;
        font-size: v-bind('state.size.titleSize');
        font-weight: bold;
        color: v-bind('state.style.color');
    }

}

.dropdown-icon {
    font-size: 20px;
    margin: 5px 3px;
}
</style>