解决导航栏显示上次打开所有导航栏记录bug

2024-08-05 11:20:35 +08:00
parent 12ecbbeb34
commit 5a6951a866
53 changed files with 3740 additions and 63 deletions
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -8,6 +8,22 @@ export function saveLogParam() {
    })
 }

+//获取去所有区域列表
+export function getAllDeptList() {
+    return createAxios({
+        url: '/user-boot/dept/orgTreeSelector',
+        method: 'GET'
+    })
+}
+
+// 获取省市区下拉框
+export function areaSelect() {
+    return createAxios({
+        url: '/system-boot/area/areaSelect',
+        method: 'POST'
+    })
+}
+
 // 区域列表
 export function getAreaList() {
    return createAxios({
--- a/src/api/user-boot/user.ts
+++ b/src/api/user-boot/user.ts
@@ -140,3 +140,13 @@ export function checkUser(data: any) {
        data: data
    })
 }
+
+/**
+ * 查询所有用户包括管理员
+ */
+export const getAllUserSimpleList = () => {
+    return request({
+        url:  '/user-boot/user/getAllUserSimpleList',
+        method: 'GET'
+    })
+}
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -0,0 +1,78 @@
+<script lang="tsx">
+import { computed, defineComponent, unref } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { Backtop } from '@/components/Backtop'
+import { Setting } from '@/layouts/components/Setting'
+import { useRenderLayout } from './components/useRenderLayout'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+const layout = computed(() => appStore.getLayout)
+
+const handleClickOutside = () => {
+  appStore.setCollapse(true)
+}
+
+const renderLayout = () => {
+  switch (unref(layout)) {
+    case 'classic':
+      const { renderClassic } = useRenderLayout()
+      return renderClassic()
+    case 'topLeft':
+      const { renderTopLeft } = useRenderLayout()
+      return renderTopLeft()
+    case 'top':
+      const { renderTop } = useRenderLayout()
+      return renderTop()
+    case 'cutMenu':
+      const { renderCutMenu } = useRenderLayout()
+      return renderCutMenu()
+    default:
+      break
+  }
+}
+
+export default defineComponent({
+  name: 'Layout',
+  setup() {
+    return () => (
+      <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
+        {mobile.value && !collapse.value ? (
+          <div
+            class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30"
+            onClick={handleClickOutside}
+          ></div>
+        ) : undefined}
+
+        {renderLayout()}
+
+        <Backtop></Backtop>
+
+        <Setting></Setting>
+      </section>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: v-layout;
+
+.#{$prefix-cls} {
+  background-color: var(--app-content-bg-color);
+  :deep(.el-scrollbar__view) {
+    height: 100% !important;
+  }
+}
+</style>
--- a/src/layouts/admin/components/menus/menuTree.vue
+++ b/src/layouts/admin/components/menus/menuTree.vue
@@ -73,9 +73,10 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
    flex-shrink: 0;
 }
 .is-active > .icon {
-    color: var(--el-menu-active-color) !important;
+    color: v-bind('config.getColorVal("menuActiveColor")') !important;
 }
 .el-menu-item.is-active {
    background-color: v-bind('config.getColorVal("menuActiveBackground")');
+    color: v-bind('config.getColorVal("menuActiveColor")');
 }
 </style>
--- a/src/layouts/admin/components/navBar/classic.vue
+++ b/src/layouts/admin/components/navBar/classic.vue
@@ -1,21 +1,28 @@
 <template>
-    <div class='nav-bar'>
-        <div v-if='config.layout.shrink && config.layout.menuCollapse' class='unfold'>
-            <Icon @click='onMenuCollapse' name='fa fa-indent' :color="config.getColorVal('menuActiveColor')"
-                  size='18' />
+    <div class="nav-bar">
+        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
+            <Icon
+                @click="onMenuCollapse"
+                name="fa fa-indent"
+                :color="config.getColorVal('menuActiveColor')"
+                size="18"
+            />
        </div>
+        <!-- <span class="nav-bar-title">{{ getTheme.name }}</span> -->
        <span class='nav-bar-title'>电能质量数据监测云平台</span>
        <NavMenus />
    </div>
 </template>

-<script setup lang='ts'>
+<script setup lang="ts">
+import { onMounted } from 'vue'
 import { useConfig } from '@/stores/config'
 import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
 import NavMenus from '../navMenus.vue'
 import { showShade } from '@/utils/pageShade'

 const config = useConfig()
+const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)

 const onMenuCollapse = () => {
    showShade('ba-aside-menu-shade', () => {
@@ -23,9 +30,12 @@ const onMenuCollapse = () => {
    })
    config.setLayout('menuCollapse', false)
 }
+// onMounted(() => {
+//     document.title = getTheme.name
+// })
 </script>

-<style scoped lang='scss'>
+<style scoped lang="scss">
 .nav-bar {
    display: flex;
    align-items: center;
@@ -37,7 +47,7 @@ const onMenuCollapse = () => {
        color: v-bind('config.getColorVal("headerBarTabColor")');
        font-size: 24px;
        margin-left: 10px;
-        font-weight: 700
+        font-weight: 700;
    }

    :deep(.nav-tabs) {
@@ -68,7 +78,7 @@ const onMenuCollapse = () => {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');

                .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                }
            }

@@ -77,7 +87,7 @@ const onMenuCollapse = () => {
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');

                .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                }
            }
        }
--- a/src/layouts/admin/components/navBar/tabs.vue
+++ b/src/layouts/admin/components/navBar/tabs.vue
@@ -1,31 +1,31 @@
 <template>
-    <div class='nav-tabs' ref='tabScrollbarRef'>
+    <div class="nav-tabs" ref="tabScrollbarRef">
        <div
-            v-for='(item, idx) in navTabs.state.tabsView'
-            @click='onTab(item)'
-            @contextmenu.prevent='onContextmenu(item, $event)'
-            class='ba-nav-tab'
+            v-for="(item, idx) in navTabs.state.tabsView"
+            @click="onTab(item)"
+            @contextmenu.prevent="onContextmenu(item, $event)"
+            class="ba-nav-tab"
            :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref='tabsRefs.set'
-            :key='idx'
+            :ref="tabsRefs.set"
+            :key="idx"
        >
            {{ item.meta.title }}
-            <transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
+            <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
                <Icon
-                    v-show='navTabs.state.tabsView.length > 1'
-                    class='close-icon'
-                    @click.stop='closeTab(item)'
-                    size='15'
-                    name='el-icon-Close'
+                    v-show="navTabs.state.tabsView.length > 1"
+                    class="close-icon"
+                    @click.stop="closeTab(item)"
+                    size="15"
+                    name="el-icon-Close"
                />
            </transition>
        </div>
        <!--        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
    </div>
-    <Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
+    <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
 </template>

-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
 import { useConfig } from '@/stores/config'
@@ -181,7 +181,10 @@ const updateTab = function(newRoute: RouteLocationNormalized) {
 }

 onBeforeRouteUpdate(async to => {
+   
+
        updateTab(to)
+   
 })

 onMounted(() => {
@@ -190,7 +193,7 @@ onMounted(() => {
 })
 </script>

-<style scoped lang='scss'>
+<style scoped lang="scss">
 .dark {
    .close-icon {
        color: v-bind('config.getColorVal("headerBarTabColor")') !important;
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -24,7 +24,7 @@
                size="18"
            />
        </div>
-        <el-dropdown style='height: 100%;' @command='handleCommand'>
+        <el-dropdown style="height: 100%" @command="handleCommand">
            <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                <el-avatar :size="25" fit="fill">
                    <img src="@/assets/avatar.png" alt="" />
@@ -39,18 +39,19 @@
                </el-dropdown-menu>
            </template>
        </el-dropdown>
-        <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
+        <!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
            <Icon
                :color="configStore.getColorVal('headerBarTabColor')"
                class="nav-menu-icon"
                name="fa fa-cogs"
                size="18"
            />
-        </div>
+        </div> -->
        <Config />
-        <PopupPwd ref='popupPwd' />
-        <AdminInfo ref='popupAdminInfo' />
+        <PopupPwd ref="popupPwd" />
+        <AdminInfo ref="popupAdminInfo" />
        <!-- <TerminalVue /> -->
+        
    </div>
 </template>

@@ -67,8 +68,9 @@ import { fullUrl } from '@/utils/common'
 import html2canvas from 'html2canvas'
 import PopupPwd from './popup/password.vue'
 import AdminInfo from './popup/adminInfo.vue'
-
+import { useNavTabs } from '@/stores/navTabs'
 const adminInfo = useAdminInfo()
+const navTabs = useNavTabs()
 const configStore = useConfig()
 const popupPwd = ref()
 const popupAdminInfo = ref()
@@ -79,7 +81,6 @@ const state = reactive({
    showAdminInfoPopover: false
 })

-
 const savePng = () => {
    html2canvas(document.body, {
        scale: 1,
@@ -112,13 +113,13 @@ const handleCommand = (key: string) => {
            popupPwd.value.open()
            break
        case 'layout':
+            navTabs.closeTabs()
            router.push({ name: 'login' })
            break
        default:
            break
    }
 }
-
 </script>

 <style scoped lang="scss">
--- a/src/layouts/admin/components/popup/adminInfo.vue
+++ b/src/layouts/admin/components/popup/adminInfo.vue
@@ -1,35 +1,34 @@
 <template>
-    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
        <el-scrollbar>
-            <el-form :inline='false' :model='form' label-width='120px'>
-                <el-form-item label='用户名称:'>
-                    <el-input v-model='form.name' :disabled='true'></el-input>
+            <el-form :inline="false" :model="form" label-width="120px">
+                <el-form-item label="用户名称:">
+                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
-                <el-form-item label='登录名称:' class='top'>
-                    <el-input v-model='form.loginName' :disabled='true'></el-input>
+                <el-form-item label="登录名称:" class="top">
+                    <el-input v-model="form.loginName" :disabled="true"></el-input>
                </el-form-item>
-                <el-form-item label='归属部门名称:' class='top'>
-                    <el-input v-model='form.deptName' :disabled='true'></el-input>
+                <el-form-item label="归属部门名称:" class="top">
+                    <el-input v-model="form.deptName" :disabled="true"></el-input>
                </el-form-item>
-                <el-form-item label='拥有的角色:' class='top'>
-                    <el-input v-model='form.role' :disabled='true'></el-input>
+                <el-form-item label="拥有的角色:" class="top">
+                    <el-input v-model="form.role" :disabled="true"></el-input>
                </el-form-item>
-                <el-form-item label='电话号码:' class='top'>
-                    <el-input v-model='form.phone' :disabled='true'></el-input>
+                <el-form-item label="电话号码:" class="top">
+                    <el-input v-model="form.phone" :disabled="true"></el-input>
                </el-form-item>
-                <el-form-item label='电子邮箱:' class='top'>
-                    <el-input v-model='form.email' :disabled='true'></el-input>
+                <el-form-item label="电子邮箱:" class="top">
+                    <el-input v-model="form.email" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>
    </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import { useAdminInfo } from '@/stores/adminInfo'

-
 const dialogVisible = ref(false)
 const title = ref('用户信息')
 const adminInfo = useAdminInfo()
@@ -43,7 +42,6 @@ const form = reactive({
    loginName: ''
 })

-
 const open = () => {
    dialogVisible.value = true
    for (const key in form) {
--- a/src/layouts/admin/components/popup/password.vue
+++ b/src/layouts/admin/components/popup/password.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                <el-form-item label="校验密码:" prop="password">
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -21,9 +21,9 @@ import { isEmpty } from 'lodash-es'
 import { setNavTabsWidth } from '@/utils/layout'
 import { adminBaseRoutePath } from '@/router/static'
 import { getRouteMenu, dictDataCache } from '@/api/auth'
-import { getAreaList } from '@/api/common'
+import { getAreaList, areaSelect } from '@/api/common'
 import { BasicDictData } from '@/stores/interface'
-import { getUserById } from '@/api/user-boot/user'
+import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'

 defineOptions({
    components: { Default, Classic, Streamline, Double }
@@ -51,10 +51,12 @@ onBeforeMount(() => {
 })

 const init = async () => {
-    await Promise.all([getAreaList(), dictDataCache(),getUserById()]).then(res => {
+    await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(),getAllUserSimpleList()]).then(res => {
        dictData.state.area = res[0].data
        dictData.state.basic = res[1].data
+        // dictData.state.userList=res[4].data
        adminInfo.dataFill(res[2].data)
+        // dictData.state.areaTree = res[3].data
    })
    /**
     * 后台初始化请求，获取站点配置，动态路由等信息
@@ -62,11 +64,16 @@ const init = async () => {
    getRouteMenu().then((res: any) => {
        const handlerMenu = (data: any) => {
            data.forEach((item: any) => {
-                item.routePath = item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
+                item.routePath =
+                    item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
                item.path = item.routePath
                item.name = item.routePath
                item.keepalive = item.routePath
-                item.component = item.routeName || '/src/views/Event-boot/Region/overview.vue'
+                item.component = item.routeName
+                    ? item.routeName.indexOf('/src/views/') > -1
+                        ? item.routeName
+                        : `/src/views/${item.routeName}/index.vue`
+                    : ''
                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
                if (item.children) {
--- a/src/layouts/admin/router-view/main.vue
+++ b/src/layouts/admin/router-view/main.vue
@@ -99,6 +99,6 @@ watch(
 .layout-main-scrollbar {
    width: 100%;
    position: relative;
-    overflow: hidden;
+    //overflow: hidden;
 }
 </style>
--- a/src/layouts/components/AppView.vue
+++ b/src/layouts/components/AppView.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { computed, ref, provide, nextTick } from 'vue'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useAppStore } from '@/stores/modules/app'
+import { Footer } from '@/layouts/components/Footer'
+
+defineOptions({ name: 'AppView' })
+
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+const footer = computed(() => appStore.getFooter)
+
+const tagsViewStore = useTagsViewStore()
+
+const getCaches = computed((): string[] => {
+    return tagsViewStore.getCachedViews
+})
+
+const tagsView = computed(() => appStore.getTagsView)
+
+//region 无感刷新
+const routerAlive = ref(true)
+// 无感刷新，防止出现页面闪烁白屏
+const reload = () => {
+    routerAlive.value = false
+    nextTick(() => (routerAlive.value = true))
+}
+// 为组件后代提供刷新方法
+provide('reload', reload)
+//endregion
+</script>
+
+<template>
+    <section
+        :class="[
+            'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+            {
+                '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
+                    (fixedHeader && (layout === 'classic' || layout === 'topLeft' || layout === 'top') && footer) ||
+                    (!tagsView && layout === 'top' && footer),
+                '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
+                    tagsView && layout === 'top' && footer,
+
+                '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
+                    !fixedHeader && layout === 'classic' && footer,
+
+                '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
+                    !fixedHeader && layout === 'topLeft' && footer,
+
+                '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
+                    fixedHeader && layout === 'cutMenu' && footer,
+
+                '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
+                    !fixedHeader && layout === 'cutMenu' && footer
+            }
+        ]"
+    >
+        <router-view v-if="routerAlive">
+            <template #default="{ Component, route }">
+                <keep-alive :include="getCaches">
+                    <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+            </template>
+        </router-view>
+    </section>
+    <Footer v-if="footer" />
+</template>
--- a/src/layouts/components/Breadcrumb/index.ts
+++ b/src/layouts/components/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from './src/Breadcrumb.vue'
+
+export { Breadcrumb }
--- a/src/layouts/components/Breadcrumb/src/Breadcrumb.vue
+++ b/src/layouts/components/Breadcrumb/src/Breadcrumb.vue
@@ -0,0 +1,130 @@
+<script lang="tsx">
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
+import { useRouter } from 'vue-router'
+import { usePermissionStore } from '@/stores/modules/permission'
+import { filterBreadcrumb } from './helper'
+import { filter, treeToList } from '@/utils/tree'
+import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
+
+import { Icon } from '@/components/Icon'
+import { useAppStore } from '@/stores/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('breadcrumb')
+
+const appStore = useAppStore()
+
+// 面包屑图标
+const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)
+
+export default defineComponent({
+  name: 'Breadcrumb',
+  setup() {
+    const { currentRoute } = useRouter()
+
+    const { t } = useI18n()
+
+    const levelList = ref<AppRouteRecordRaw[]>([])
+
+    const permissionStore = usePermissionStore()
+
+    const menuRouters = computed(() => {
+      const routers = permissionStore.getRouters
+      return filterBreadcrumb(routers)
+    })
+
+    const getBreadcrumb = () => {
+      const currentPath = currentRoute.value.matched.slice(-1)[0].path
+
+      levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
+        return node.path === currentPath
+      })
+    }
+
+    const renderBreadcrumb = () => {
+      const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
+      return breadcrumbList.map((v) => {
+        const disabled = !v.redirect || v.redirect === 'noredirect'
+        const meta = v.meta as RouteMeta
+        return (
+          <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
+            {meta?.icon && breadcrumbIcon.value ? (
+              <div class="flex items-center">
+                <Icon icon={meta.icon} class="mr-[2px]" svgClass="inline-block"></Icon>
+                {t(v?.meta?.title)}
+              </div>
+            ) : (
+              t(v?.meta?.title)
+            )}
+          </ElBreadcrumbItem>
+        )
+      })
+    }
+
+    watch(
+      () => currentRoute.value,
+      (route: RouteLocationNormalizedLoaded) => {
+        if (route.path.startsWith('/redirect/')) {
+          return
+        }
+        getBreadcrumb()
+      },
+      {
+        immediate: true
+      }
+    )
+
+    return () => (
+      <ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
+        <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
+          {renderBreadcrumb()}
+        </TransitionGroup>
+      </ElBreadcrumb>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: el-breadcrumb;
+
+.#{$prefix-cls} {
+  :deep(&__item) {
+    display: flex;
+    .#{$prefix-cls}__inner {
+      display: flex;
+      align-items: center;
+      color: var(--top-header-text-color);
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  :deep(&__item):not(:last-child) {
+    .#{$prefix-cls}__inner {
+      color: var(--top-header-text-color);
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  :deep(&__item):last-child {
+    .#{$prefix-cls}__inner {
+      display: flex;
+      align-items: center;
+      color: var(--el-text-color-placeholder);
+
+      &:hover {
+        color: var(--el-text-color-placeholder);
+      }
+    }
+  }
+}
+</style>
--- a/src/layouts/components/Breadcrumb/src/helper.ts
+++ b/src/layouts/components/Breadcrumb/src/helper.ts
@@ -0,0 +1,31 @@
+import { pathResolve } from '@/utils/routerHelper'
+import type { RouteMeta } from 'vue-router'
+
+export const filterBreadcrumb = (
+  routes: AppRouteRecordRaw[],
+  parentPath = ''
+): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+
+  for (const route of routes) {
+    const meta = route?.meta as RouteMeta
+    if (meta.hidden && !meta.canTo) {
+      continue
+    }
+
+    const data: AppRouteRecordRaw =
+      !meta.alwaysShow && route.children?.length === 1
+        ? { ...route.children[0], path: pathResolve(route.path, route.children[0].path) }
+        : { ...route }
+
+    data.path = pathResolve(parentPath, data.path)
+
+    if (data.children) {
+      data.children = filterBreadcrumb(data.children, data.path)
+    }
+    if (data) {
+      res.push(data)
+    }
+  }
+  return res
+}
--- a/src/layouts/components/Collapse/index.ts
+++ b/src/layouts/components/Collapse/index.ts
@@ -0,0 +1,3 @@
+import Collapse from './src/Collapse.vue'
+
+export { Collapse }
--- a/src/layouts/components/Collapse/src/Collapse.vue
+++ b/src/layouts/components/Collapse/src/Collapse.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/stores/modules/app'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { Expand,Fold,ZoomIn,Delete} from '@element-plus/icons-vue'
+
+defineOptions({ name: 'Collapse' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('collapse')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const appStore = useAppStore()
+
+const collapse = computed(() => appStore.getCollapse)
+
+const toggleCollapse = () => {
+  const collapsed = unref(collapse)
+  appStore.setCollapse(!collapsed)
+}
+</script>
+
+<template>
+  <div :class="prefixCls" @click="toggleCollapse">
+    <Icon
+      :color="color"
+      :icon="collapse ? Expand: Fold"
+      :size="18"
+      class="cursor-pointer"
+    />
+  </div>
+</template>
--- a/src/layouts/components/ContextMenu/index.ts
+++ b/src/layouts/components/ContextMenu/index.ts
@@ -0,0 +1,10 @@
+import ContextMenu from './src/ContextMenu.vue'
+import { ElDropdown } from 'element-plus'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+export interface ContextMenuExpose {
+  elDropdownMenuRef: ComponentRef<typeof ElDropdown>
+  tagItem: RouteLocationNormalizedLoaded
+}
+
+export { ContextMenu }
--- a/src/layouts/components/ContextMenu/src/ContextMenu.vue
+++ b/src/layouts/components/ContextMenu/src/ContextMenu.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { PropType,ref } from 'vue'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { contextMenuSchema } from '@/types/contextMenu'
+import type { ElDropdown } from 'element-plus'
+
+defineOptions({ name: 'ContextMenu' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('context-menu')
+
+const { t } = useI18n()
+
+const emit = defineEmits(['visibleChange'])
+
+const props = defineProps({
+  schema: {
+    type: Array as PropType<contextMenuSchema[]>,
+    default: () => []
+  },
+  trigger: {
+    type: String as PropType<'click' | 'hover' | 'focus' | 'contextmenu'>,
+    default: 'contextmenu'
+  },
+  tagItem: {
+    type: Object as PropType<RouteLocationNormalizedLoaded>,
+    default: () => ({})
+  }
+})
+
+const command = (item: contextMenuSchema) => {
+  item.command && item.command(item)
+}
+
+const visibleChange = (visible: boolean) => {
+  emit('visibleChange', visible, props.tagItem)
+}
+
+const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()
+
+defineExpose({
+  elDropdownMenuRef,
+  tagItem: props.tagItem
+})
+</script>
+
+<template>
+  <ElDropdown
+    ref="elDropdownMenuRef"
+    :class="prefixCls"
+    :trigger="trigger"
+    placement="bottom-start"
+    popper-class="v-context-menu-popper"
+    @command="command"
+    @visible-change="visibleChange"
+  >
+    <slot></slot>
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem
+          v-for="(item, index) in schema"
+          :key="`dropdown${index}`"
+          :command="item"
+          :disabled="item.disabled"
+          :divided="item.divided"
+        >
+          <Icon :icon="item.icon" />
+          {{ t(item.label) }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
--- a/src/layouts/components/Footer/index.ts
+++ b/src/layouts/components/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from './src/Footer.vue'
+
+export { Footer }
--- a/src/layouts/components/Footer/src/Footer.vue
+++ b/src/layouts/components/Footer/src/Footer.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/stores/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+// eslint-disable-next-line vue/no-reserved-component-names
+defineOptions({ name: 'Footer' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('footer')
+
+const appStore = useAppStore()
+
+const title = computed(() => appStore.getTitle)
+</script>
+
+<template>
+  <div
+    :class="prefixCls"
+    class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
+  >
+    <span class="text-14px">Copyright ©2022-{{ title }}</span>
+  </div>
+</template>
--- a/src/layouts/components/LocaleDropdown/index.ts
+++ b/src/layouts/components/LocaleDropdown/index.ts
@@ -0,0 +1,3 @@
+import LocaleDropdown from './src/LocaleDropdown.vue'
+
+export { LocaleDropdown }
--- a/src/layouts/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/layouts/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { useLocaleStore } from '@/stores/modules/locale'
+import { useLocale } from '@/hooks/web/useLocale'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'LocaleDropdown' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('locale-dropdown')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const localeStore = useLocaleStore()
+
+const langMap = computed(() => localeStore.getLocaleMap)
+
+const currentLang = computed(() => localeStore.getCurrentLocale)
+
+const setLang = (lang: LocaleType) => {
+  if (lang === unref(currentLang).lang) return
+  // 需要重新加载页面让整个语言多初始化
+  window.location.reload()
+  localeStore.setCurrentLocale({
+    lang
+  })
+  const { changeLocale } = useLocale()
+  changeLocale(lang)
+}
+</script>
+
+<template>
+  <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
+    <Icon
+      :class="$attrs.class"
+      :color="color"
+      :size="18"
+      class="cursor-pointer !p-0"
+      icon="ion:language-sharp"
+    />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
+          {{ item.name }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
--- a/src/layouts/components/Logo/index.ts
+++ b/src/layouts/components/Logo/index.ts
@@ -0,0 +1,3 @@
+import Logo from './src/Logo.vue'
+
+export { Logo }
--- a/src/layouts/components/Logo/src/Logo.vue
+++ b/src/layouts/components/Logo/src/Logo.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, unref, watch } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'Logo' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('logo')
+
+const appStore = useAppStore()
+
+const show = ref(true)
+
+const title = computed(() => appStore.getTitle)
+
+const layout = computed(() => appStore.getLayout)
+
+const collapse = computed(() => appStore.getCollapse)
+
+onMounted(() => {
+  if (unref(collapse)) show.value = false
+})
+
+watch(
+  () => collapse.value,
+  (collapse: boolean) => {
+    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
+      show.value = true
+      return
+    }
+    if (!collapse) {
+      setTimeout(() => {
+        show.value = !collapse
+      }, 400)
+    } else {
+      show.value = !collapse
+    }
+  }
+)
+
+watch(
+  () => layout.value,
+  (layout) => {
+    if (layout === 'top' || layout === 'cutMenu') {
+      show.value = true
+    } else {
+      if (unref(collapse)) {
+        show.value = false
+      } else {
+        show.value = true
+      }
+    }
+  }
+)
+</script>
+
+<template>
+  <div>
+    <router-link
+      :class="[
+        prefixCls,
+        layout !== 'classic' ? `${prefixCls}__Top` : '',
+        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
+      ]"
+      to="/"
+    >
+      <img
+        class="h-[calc(var(--logo-height)-10px)] w-[calc(var(--logo-height)-10px)]"
+        src="@/assets/imgs/logo.png"
+      />
+      <div
+        v-if="show"
+        :class="[
+          'ml-10px text-16px font-700',
+          {
+            'text-[var(--logo-title-text-color)]': layout === 'classic',
+            'text-[var(--top-header-text-color)]':
+              layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
+          }
+        ]"
+      >
+        {{ title }}
+      </div>
+    </router-link>
+  </div>
+</template>
--- a/src/layouts/components/Menu/index.ts
+++ b/src/layouts/components/Menu/index.ts
@@ -0,0 +1,3 @@
+import Menu from './src/Menu.vue'
+
+export { Menu }
--- a/src/layouts/components/Menu/src/Menu.vue
+++ b/src/layouts/components/Menu/src/Menu.vue
@@ -0,0 +1,257 @@
+<script lang="tsx">
+import { PropType } from 'vue'
+import { ElMenu, ElScrollbar } from 'element-plus'
+import { useAppStore } from '@/stores/modules/app'
+import { usePermissionStore } from '@/stores/modules/permission'
+import { useRenderMenuItem } from './components/useRenderMenuItem'
+import { isUrl } from '@/utils/is'
+import { useDesign } from '@/hooks/web/useDesign'
+import { LayoutType } from '@/types/layout'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('menu')
+
+export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: 'Menu',
+  props: {
+    menuSelect: {
+      type: Function as PropType<(index: string) => void>,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const appStore = useAppStore()
+
+    const layout = computed(() => appStore.getLayout)
+
+    const { push, currentRoute } = useRouter()
+
+    const permissionStore = usePermissionStore()
+
+    const menuMode = computed((): 'vertical' | 'horizontal' => {
+      // 竖
+      const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
+
+      if (vertical.includes(unref(layout))) {
+        return 'vertical'
+      } else {
+        return 'horizontal'
+      }
+    })
+
+    const routers = computed(() =>
+      unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+    )
+
+    const collapse = computed(() => appStore.getCollapse)
+
+    const uniqueOpened = computed(() => appStore.getUniqueOpened)
+
+    const activeMenu = computed(() => {
+      const { meta, path } = unref(currentRoute)
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu as string
+      }
+      return path
+    })
+
+    const menuSelect = (index: string) => {
+      if (props.menuSelect) {
+        props.menuSelect(index)
+      }
+      // 自定义事件
+      if (isUrl(index)) {
+        window.open(index)
+      } else {
+        push(index)
+      }
+    }
+
+    const renderMenuWrap = () => {
+      if (unref(layout) === 'top') {
+        return renderMenu()
+      } else {
+        return <ElScrollbar>{renderMenu()}</ElScrollbar>
+      }
+    }
+
+    const renderMenu = () => {
+      return (
+        <ElMenu
+          defaultActive={unref(activeMenu)}
+          mode={unref(menuMode)}
+          collapse={
+            unref(layout) === 'top' || unref(layout) === 'cutMenu' ? false : unref(collapse)
+          }
+          uniqueOpened={unref(layout) === 'top' ? false : unref(uniqueOpened)}
+          backgroundColor="var(--left-menu-bg-color)"
+          textColor="var(--left-menu-text-color)"
+          activeTextColor="var(--left-menu-text-active-color)"
+          onSelect={menuSelect}
+        >
+          {{
+            default: () => {
+              const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
+              return renderMenuItem(unref(routers))
+            }
+          }}
+        </ElMenu>
+      )
+    }
+
+    return () => (
+      <div
+        id={prefixCls}
+        class={[
+          `${prefixCls} ${prefixCls}__${unref(menuMode)}`,
+          'h-[100%] overflow-hidden flex-col bg-[var(--left-menu-bg-color)]',
+          {
+            'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
+            'w-[var(--left-menu-max-width)]': !unref(collapse) && unref(layout) !== 'cutMenu'
+          }
+        ]}
+      >
+        {renderMenuWrap()}
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: v-menu;
+
+.#{$prefix-cls} {
+  position: relative;
+  transition: width var(--transition-time-02);
+
+  :deep(.el-menu) {
+    width: 100% !important;
+    border-right: none;
+
+    // 设置选中时子标题的颜色
+    .is-active {
+      & > .el-sub-menu__title {
+        color: var(--left-menu-text-active-color) !important;
+      }
+    }
+
+    // 设置子菜单悬停的高亮和背景色
+    .el-sub-menu__title,
+    .el-menu-item {
+      &:hover {
+        color: var(--left-menu-text-active-color) !important;
+        background-color: var(--left-menu-bg-color) !important;
+      }
+    }
+
+    // 设置选中时的高亮背景和高亮颜色
+    .el-menu-item.is-active {
+      color: var(--left-menu-text-active-color) !important;
+      background-color: var(--left-menu-bg-active-color) !important;
+
+      &:hover {
+        background-color: var(--left-menu-bg-active-color) !important;
+      }
+    }
+
+    .el-menu-item.is-active {
+      position: relative;
+    }
+
+    // 设置子菜单的背景颜色
+    .el-menu {
+      .el-sub-menu__title,
+      .el-menu-item:not(.is-active) {
+        background-color: var(--left-menu-bg-light-color) !important;
+      }
+    }
+  }
+
+  // 折叠时的最小宽度
+  :deep(.el-menu--collapse) {
+    width: var(--left-menu-min-width);
+
+    & > .is-active,
+    & > .is-active > .el-sub-menu__title {
+      position: relative;
+      background-color: var(--left-menu-collapse-bg-active-color) !important;
+    }
+  }
+
+  // 折叠动画的时候，就需要把文字给隐藏掉
+  :deep(.horizontal-collapse-transition) {
+    // transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
+    .#{$prefix-cls}__title {
+      display: none;
+    }
+  }
+
+  // 水平菜单
+  &__horizontal {
+    height: calc(var(--top-tool-height)) !important;
+
+    :deep(.el-menu--horizontal) {
+      height: calc(var(--top-tool-height));
+      border-bottom: none;
+      // 重新设置底部高亮颜色
+      & > .el-sub-menu.is-active {
+        .el-sub-menu__title {
+          border-bottom-color: var(--el-color-primary) !important;
+        }
+      }
+
+      .el-menu-item.is-active {
+        position: relative;
+
+        &::after {
+          display: none !important;
+        }
+      }
+
+      .#{$prefix-cls}__title {
+        /* stylelint-disable-next-line */
+        max-height: calc(var(--top-tool-height) - 2px) !important;
+        /* stylelint-disable-next-line */
+        line-height: calc(var(--top-tool-height) - 2px);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+$prefix-cls: v-menu-popper;
+
+.#{$prefix-cls}--vertical,
+.#{$prefix-cls}--horizontal {
+  // 设置选中时子标题的颜色
+  .is-active {
+    & > .el-sub-menu__title {
+      color: var(--left-menu-text-active-color) !important;
+    }
+  }
+
+  // 设置子菜单悬停的高亮和背景色
+  .el-sub-menu__title,
+  .el-menu-item {
+    &:hover {
+      color: var(--left-menu-text-active-color) !important;
+      background-color: var(--left-menu-bg-color) !important;
+    }
+  }
+
+  // 设置选中时的高亮背景
+  .el-menu-item.is-active {
+    position: relative;
+    background-color: var(--left-menu-bg-active-color) !important;
+
+    &:hover {
+      background-color: var(--left-menu-bg-active-color) !important;
+    }
+  }
+}
+</style>
--- a/src/layouts/components/Menu/src/components/useRenderMenuItem.tsx
+++ b/src/layouts/components/Menu/src/components/useRenderMenuItem.tsx
@@ -0,0 +1,50 @@
+import { ElSubMenu, ElMenuItem } from 'element-plus'
+import { hasOneShowingChild } from '../helper'
+import { isUrl } from '@/utils/is'
+import { useRenderMenuTitle } from './useRenderMenuTitle'
+import { pathResolve } from '@/utils/routerHelper'
+
+const { renderMenuTitle } = useRenderMenuTitle()
+
+export const useRenderMenuItem = () =>
+  // allRouters: AppRouteRecordRaw[] = [],
+  {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+      return routers
+        .filter((v) => !v.meta?.hidden)
+        .map((v) => {
+          const meta = v.meta ?? {}
+          const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
+          const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+
+          if (
+            oneShowingChild &&
+            (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
+            !meta?.alwaysShow
+          ) {
+            return (
+              <ElMenuItem
+                index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
+              >
+                {{
+                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                }}
+              </ElMenuItem>
+            )
+          } else {
+            return (
+              <ElSubMenu index={fullPath}>
+                {{
+                  title: () => renderMenuTitle(meta),
+                  default: () => renderMenuItem(v.children!, fullPath)
+                }}
+              </ElSubMenu>
+            )
+          }
+        })
+    }
+
+    return {
+      renderMenuItem
+    }
+  }
--- a/src/layouts/components/Menu/src/components/useRenderMenuTitle.tsx
+++ b/src/layouts/components/Menu/src/components/useRenderMenuTitle.tsx
@@ -0,0 +1,27 @@
+import type { RouteMeta } from 'vue-router'
+import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+
+export const useRenderMenuTitle = () => {
+  const renderMenuTitle = (meta: RouteMeta) => {
+    const { t } = useI18n()
+    const { title = 'Please set title', icon } = meta
+
+    return icon ? (
+      <>
+        <Icon icon={meta.icon}></Icon>
+        <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {t(title as string)}
+        </span>
+      </>
+    ) : (
+      <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
+        {t(title as string)}
+      </span>
+    )
+  }
+
+  return {
+    renderMenuTitle
+  }
+}
--- a/src/layouts/components/Menu/src/helper.ts
+++ b/src/layouts/components/Menu/src/helper.ts
@@ -0,0 +1,54 @@
+import type { RouteMeta } from 'vue-router'
+import { findPath } from '@/utils/tree'
+
+type OnlyOneChildType = AppRouteRecordRaw & { noShowingChildren?: boolean }
+
+interface HasOneShowingChild {
+  oneShowingChild?: boolean
+  onlyOneChild?: OnlyOneChildType
+}
+
+export const getAllParentPath = <T = Recordable>(treeData: T[], path: string) => {
+  const menuList = findPath(treeData, (n) => n.path === path) as AppRouteRecordRaw[]
+  return (menuList || []).map((item) => item.path)
+}
+
+export const hasOneShowingChild = (
+  children: AppRouteRecordRaw[] = [],
+  parent: AppRouteRecordRaw
+): HasOneShowingChild => {
+  const onlyOneChild = ref<OnlyOneChildType>()
+
+  const showingChildren = children.filter((v) => {
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (meta.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = v
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return {
+      oneShowingChild: true,
+      onlyOneChild: unref(onlyOneChild)
+    }
+  }
+
+  // Show parent if there are no child router to display
+  if (!showingChildren.length) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return {
+      oneShowingChild: true,
+      onlyOneChild: unref(onlyOneChild)
+    }
+  }
+
+  return {
+    oneShowingChild: false,
+    onlyOneChild: unref(onlyOneChild)
+  }
+}
--- a/src/layouts/components/Screenfull/index.ts
+++ b/src/layouts/components/Screenfull/index.ts
@@ -0,0 +1,3 @@
+import Screenfull from './src/Screenfull.vue'
+
+export { Screenfull }
--- a/src/layouts/components/Screenfull/src/Screenfull.vue
+++ b/src/layouts/components/Screenfull/src/Screenfull.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { Icon } from '@/components/Icon'
+import { useFullscreen } from '@vueuse/core'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ScreenFull' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('screenfull')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const { toggle, isFullscreen } = useFullscreen()
+
+const toggleFullscreen = () => {
+  toggle()
+}
+</script>
+
+<template>
+  <div :class="prefixCls" @click="toggleFullscreen">
+    <Icon
+      :color="color"
+      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :size="18"
+    />
+  </div>
+</template>
--- a/src/layouts/components/Setting/index.ts
+++ b/src/layouts/components/Setting/index.ts
@@ -0,0 +1,3 @@
+import Setting from './src/Setting.vue'
+
+export { Setting }
--- a/src/layouts/components/Setting/src/Setting.vue
+++ b/src/layouts/components/Setting/src/Setting.vue
@@ -0,0 +1,269 @@
+<script lang="ts" setup>
+import { ref, watch, unref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useClipboard, useCssVar } from '@vueuse/core'
+
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useI18n } from 'vue-i18n'
+import { setCssVar, trim } from '@/utils'
+import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
+import { useAppStore } from '@/stores/modules/app'
+import { ThemeSwitch } from '@/layouts/components/ThemeSwitch'
+import ColorRadioPicker from './components/ColorRadioPicker.vue'
+import InterfaceDisplay from './components/InterfaceDisplay.vue'
+import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
+
+defineOptions({ name: 'Setting' })
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('setting')
+const layout = computed(() => appStore.getLayout)
+const drawer = ref(false)
+
+// 主题色相关
+const systemTheme = ref(appStore.getTheme.elColorPrimary)
+
+const setSystemTheme = (color: string) => {
+    setCssVar('--el-color-primary', color)
+    appStore.setTheme({ elColorPrimary: color })
+    const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
+    setMenuTheme(trim(unref(leftMenuBgColor)))
+}
+
+// 头部主题相关
+const headerTheme = ref(appStore.getTheme.topHeaderBgColor || '')
+
+const setHeaderTheme = (color: string) => {
+    const isDarkColor = colorIsDark(color)
+    const textColor = isDarkColor ? '#fff' : 'inherit'
+    const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
+    const topToolBorderColor = isDarkColor ? color : '#eee'
+    setCssVar('--top-header-bg-color', color)
+    setCssVar('--top-header-text-color', textColor)
+    setCssVar('--top-header-hover-color', textHoverColor)
+    appStore.setTheme({
+        topHeaderBgColor: color,
+        topHeaderTextColor: textColor,
+        topHeaderHoverColor: textHoverColor,
+        topToolBorderColor
+    })
+    if (unref(layout) === 'top') {
+        setMenuTheme(color)
+    }
+}
+
+// 菜单主题相关
+const menuTheme = ref(appStore.getTheme.leftMenuBgColor || '')
+
+const setMenuTheme = (color: string) => {
+    const primaryColor = useCssVar('--el-color-primary', document.documentElement)
+    const isDarkColor = colorIsDark(color)
+    const theme: Recordable = {
+        // 左侧菜单边框颜色
+        leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
+        // 左侧菜单背景颜色
+        leftMenuBgColor: color,
+        // 左侧菜单浅色背景颜色
+        leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
+        // 左侧菜单选中背景颜色
+        leftMenuBgActiveColor: isDarkColor ? 'var(--el-color-primary)' : hexToRGB(unref(primaryColor), 0.1),
+        // 左侧菜单收起选中背景颜色
+        leftMenuCollapseBgActiveColor: isDarkColor ? 'var(--el-color-primary)' : hexToRGB(unref(primaryColor), 0.1),
+        // 左侧菜单字体颜色
+        leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
+        // 左侧菜单选中字体颜色
+        leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
+        // logo字体颜色
+        logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+        // logo边框颜色
+        logoBorderColor: isDarkColor ? color : '#eee'
+    }
+    appStore.setTheme(theme)
+    appStore.setCssVarTheme()
+}
+if (layout.value === 'top' && !appStore.getIsDark) {
+    headerTheme.value = '#fff'
+    setHeaderTheme('#fff')
+}
+
+// 监听layout变化，重置一些主题色
+watch(
+    () => layout.value,
+    n => {
+        if (n === 'top' && !appStore.getIsDark) {
+            headerTheme.value = '#fff'
+            setHeaderTheme('#fff')
+        } else {
+            setMenuTheme(unref(menuTheme))
+        }
+    }
+)
+
+// 拷贝
+const copyConfig = async () => {
+    const { copy, copied, isSupported } = useClipboard({
+        source: `
+      // 面包屑
+      breadcrumb: ${appStore.getBreadcrumb},
+      // 面包屑图标
+      breadcrumbIcon: ${appStore.getBreadcrumbIcon},
+      // 折叠图标
+      hamburger: ${appStore.getHamburger},
+      // 全屏图标
+      screenfull: ${appStore.getScreenfull},
+      // 尺寸图标
+      size: ${appStore.getSize},
+      // 多语言图标
+      locale: ${appStore.getLocale},
+      // 消息图标
+      message: ${appStore.getMessage},
+      // 标签页
+      tagsView: ${appStore.getTagsView},
+      // 标签页图标
+      getTagsViewIcon: ${appStore.getTagsViewIcon},
+      // logo
+      logo: ${appStore.getLogo},
+      // 菜单手风琴
+      uniqueOpened: ${appStore.getUniqueOpened},
+      // 固定header
+      fixedHeader: ${appStore.getFixedHeader},
+      // 页脚
+      footer: ${appStore.getFooter},
+      // 灰色模式
+      greyMode: ${appStore.getGreyMode},
+      // layout布局
+      layout: '${appStore.getLayout}',
+      // 暗黑模式
+      isDark: ${appStore.getIsDark},
+      // 组件尺寸
+      currentSize: '${appStore.getCurrentSize}',
+      // 主题相关
+      theme: {
+        // 主题色
+        elColorPrimary: '${appStore.getTheme.elColorPrimary}',
+        // 左侧菜单边框颜色
+        leftMenuBorderColor: '${appStore.getTheme.leftMenuBorderColor}',
+        // 左侧菜单背景颜色
+        leftMenuBgColor: '${appStore.getTheme.leftMenuBgColor}',
+        // 左侧菜单浅色背景颜色
+        leftMenuBgLightColor: '${appStore.getTheme.leftMenuBgLightColor}',
+        // 左侧菜单选中背景颜色
+        leftMenuBgActiveColor: '${appStore.getTheme.leftMenuBgActiveColor}',
+        // 左侧菜单收起选中背景颜色
+        leftMenuCollapseBgActiveColor: '${appStore.getTheme.leftMenuCollapseBgActiveColor}',
+        // 左侧菜单字体颜色
+        leftMenuTextColor: '${appStore.getTheme.leftMenuTextColor}',
+        // 左侧菜单选中字体颜色
+        leftMenuTextActiveColor: '${appStore.getTheme.leftMenuTextActiveColor}',
+        // logo字体颜色
+        logoTitleTextColor: '${appStore.getTheme.logoTitleTextColor}',
+        // logo边框颜色
+        logoBorderColor: '${appStore.getTheme.logoBorderColor}',
+        // 头部背景颜色
+        topHeaderBgColor: '${appStore.getTheme.topHeaderBgColor}',
+        // 头部字体颜色
+        topHeaderTextColor: '${appStore.getTheme.topHeaderTextColor}',
+        // 头部悬停颜色
+        topHeaderHoverColor: '${appStore.getTheme.topHeaderHoverColor}',
+        // 头部边框颜色
+        topToolBorderColor: '${appStore.getTheme.topToolBorderColor}'
+      }
+    `
+    })
+    if (!isSupported) {
+        ElMessage.error(t('setting.copyFailed'))
+    } else {
+        await copy()
+        if (unref(copied)) {
+            ElMessage.success(t('setting.copySuccess'))
+        }
+    }
+}
+
+// 清空缓存
+const clear = () => {
+    const { wsCache } = useCache()
+    wsCache.delete(CACHE_KEY.LAYOUT)
+    wsCache.delete(CACHE_KEY.THEME)
+    wsCache.delete(CACHE_KEY.IS_DARK)
+    window.location.reload()
+}
+</script>
+
+<template>
+    <div
+        :class="prefixCls"
+        class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px"
+        @click="drawer = true"
+    >
+        <Icon color="#fff" icon="ep:setting" />
+    </div>
+
+    <ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
+        <template #header>
+            <span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
+        </template>
+
+        <div class="text-center">
+            <!-- 主题 -->
+            <ElDivider>{{ t('setting.theme') }}</ElDivider>
+            <ThemeSwitch />
+
+            <!-- 布局 -->
+            <ElDivider>{{ t('setting.layout') }}</ElDivider>
+            <LayoutRadioPicker />
+
+            <!-- 系统主题 -->
+            <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
+            <ColorRadioPicker
+                v-model="systemTheme"
+                :schema="['#409eff', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800']"
+                @change="setSystemTheme"
+            />
+
+            <!-- 头部主题 -->
+            <ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
+            <ColorRadioPicker
+                v-model="headerTheme"
+                :schema="['#fff', '#151515', '#5172dc', '#e74c3c', '#24292e', '#394664', '#009688', '#383f45']"
+                @change="setHeaderTheme"
+            />
+
+            <!-- 菜单主题 -->
+            <template v-if="layout !== 'top'">
+                <ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
+                <ColorRadioPicker
+                    v-model="menuTheme"
+                    :schema="['#fff', '#001529', '#212121', '#273352', '#191b24', '#383f45', '#001628', '#344058']"
+                    @change="setMenuTheme"
+                />
+            </template>
+        </div>
+
+        <!-- 界面显示 -->
+        <ElDivider>{{ t('setting.interfaceDisplay') }}</ElDivider>
+        <InterfaceDisplay />
+
+        <ElDivider />
+        <div>
+            <ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
+        </div>
+        <div class="mt-5px">
+            <ElButton class="w-full" type="danger" @click="clear">
+                {{ t('setting.clearAndReset') }}
+            </ElButton>
+        </div>
+    </ElDrawer>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: v-setting;
+
+.#{$prefix-cls} {
+    border-radius: 6px 0 0 6px;
+}
+</style>
--- a/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { PropType, ref, watch } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ColorRadioPicker' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('color-radio-picker')
+
+const props = defineProps({
+    schema: {
+        type: Array as PropType<string[]>,
+        default: () => []
+    },
+    modelValue: propTypes.string.def('')
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const colorVal = ref(props.modelValue)
+
+watch(
+    () => props.modelValue,
+    (val: string) => {
+        if (val === unref(colorVal)) return
+        colorVal.value = val
+    }
+)
+
+// 监听
+watch(
+    () => colorVal.value,
+    (val: string) => {
+        emit('update:modelValue', val)
+        emit('change', val)
+    }
+)
+</script>
+
+<template>
+    <div :class="prefixCls" class="flex flex-wrap space-x-14px">
+        <span
+            v-for="(item, i) in schema"
+            :key="`radio-${i}`"
+            :class="{ 'is-active': colorVal === item }"
+            :style="{
+                background: item
+            }"
+            class="mb-5px h-20px w-20px cursor-pointer border-2px border-gray-300 rounded-2px border-solid text-center leading-20px"
+            @click="colorVal = item"
+        >
+            <Icon v-if="colorVal === item" :size="16" color="#fff" icon="ep:check" />
+        </span>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: v-color-radio-picker;
+
+.#{$prefix-cls} {
+    .is-active {
+        border-color: var(--el-color-primary);
+    }
+}
+</style>
--- a/src/layouts/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layouts/components/Setting/src/components/InterfaceDisplay.vue
@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import { setCssVar } from '@/utils'
+import { ref, computed, watch } from 'vue'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { useAppStore } from '@/stores/modules/app'
+import { useI18n } from 'vue-i18n'
+defineOptions({ name: 'InterfaceDisplay' })
+
+const { t } = useI18n()
+const { getPrefixCls } = useDesign()
+const { setWatermark } = useWatermark()
+const prefixCls = getPrefixCls('interface-display')
+const appStore = useAppStore()
+
+const water = ref()
+
+// 面包屑
+const breadcrumb = ref(appStore.getBreadcrumb)
+
+const breadcrumbChange = (show: boolean) => {
+    appStore.setBreadcrumb(show)
+}
+
+// 面包屑图标
+const breadcrumbIcon = ref(appStore.getBreadcrumbIcon)
+
+const breadcrumbIconChange = (show: boolean) => {
+    appStore.setBreadcrumbIcon(show)
+}
+
+// 折叠图标
+const hamburger = ref(appStore.getHamburger)
+
+const hamburgerChange = (show: boolean) => {
+    appStore.setHamburger(show)
+}
+
+// 全屏图标
+const screenfull = ref(appStore.getScreenfull)
+
+const screenfullChange = (show: boolean) => {
+    appStore.setScreenfull(show)
+}
+
+// 尺寸图标
+const size = ref(appStore.getSize)
+
+const sizeChange = (show: boolean) => {
+    appStore.setSize(show)
+}
+
+// 多语言图标
+const locale = ref(appStore.getLocale)
+
+const localeChange = (show: boolean) => {
+    appStore.setLocale(show)
+}
+
+// 消息图标
+const message = ref(appStore.getMessage)
+
+const messageChange = (show: boolean) => {
+    appStore.setMessage(show)
+}
+
+// 标签页
+const tagsView = ref(appStore.getTagsView)
+
+const tagsViewChange = (show: boolean) => {
+    // 切换标签栏显示时，同步切换标签栏的高度
+    setCssVar('--tags-view-height', show ? '35px' : '0px')
+    appStore.setTagsView(show)
+}
+
+// 标签页图标
+const tagsViewIcon = ref(appStore.getTagsViewIcon)
+
+const tagsViewIconChange = (show: boolean) => {
+    appStore.setTagsViewIcon(show)
+}
+
+// logo
+const logo = ref(appStore.getLogo)
+
+const logoChange = (show: boolean) => {
+    appStore.setLogo(show)
+}
+
+// 菜单手风琴
+const uniqueOpened = ref(appStore.getUniqueOpened)
+
+const uniqueOpenedChange = (uniqueOpened: boolean) => {
+    appStore.setUniqueOpened(uniqueOpened)
+}
+
+// 固定头部
+const fixedHeader = ref(appStore.getFixedHeader)
+
+const fixedHeaderChange = (show: boolean) => {
+    appStore.setFixedHeader(show)
+}
+
+// 页脚
+const footer = ref(appStore.getFooter)
+
+const footerChange = (show: boolean) => {
+    appStore.setFooter(show)
+}
+
+// 灰色模式
+const greyMode = ref(appStore.getGreyMode)
+
+const greyModeChange = (show: boolean) => {
+    appStore.setGreyMode(show)
+}
+
+// 固定菜单
+const fixedMenu = ref(appStore.getFixedMenu)
+
+const fixedMenuChange = (show: boolean) => {
+    appStore.setFixedMenu(show)
+}
+
+// 设置水印
+const setWater = () => {
+    setWatermark(water.value)
+}
+
+const layout = computed(() => appStore.getLayout)
+
+watch(
+    () => layout.value,
+    n => {
+        if (n === 'top') {
+            appStore.setCollapse(false)
+        }
+    }
+)
+</script>
+
+<template>
+    <div :class="prefixCls">
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
+            <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
+            <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
+            <ElSwitch v-model="hamburger" @change="hamburgerChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
+            <ElSwitch v-model="screenfull" @change="screenfullChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.sizeIcon') }}</span>
+            <ElSwitch v-model="size" @change="sizeChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.localeIcon') }}</span>
+            <ElSwitch v-model="locale" @change="localeChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.messageIcon') }}</span>
+            <ElSwitch v-model="message" @change="messageChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.tagsView') }}</span>
+            <ElSwitch v-model="tagsView" @change="tagsViewChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
+            <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.logo') }}</span>
+            <ElSwitch v-model="logo" @change="logoChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
+            <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
+            <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.footer') }}</span>
+            <ElSwitch v-model="footer" @change="footerChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.greyMode') }}</span>
+            <ElSwitch v-model="greyMode" @change="greyModeChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
+            <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
+        </div>
+
+        <div class="flex items-center justify-between">
+            <span class="text-14px">{{ t('watermark.watermark') }}</span>
+            <ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
+        </div>
+    </div>
+</template>
--- a/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/stores/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'LayoutRadioPicker' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout-radio-picker')
+
+const appStore = useAppStore()
+
+const layout = computed(() => appStore.getLayout)
+</script>
+
+<template>
+  <div :class="prefixCls" class="flex flex-wrap space-x-14px">
+    <div
+      :class="[
+        `${prefixCls}__classic`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'classic'
+        }
+      ]"
+      @click="appStore.setLayout('classic')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__top-left`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'topLeft'
+        }
+      ]"
+      @click="appStore.setLayout('topLeft')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__top`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'top'
+        }
+      ]"
+      @click="appStore.setLayout('top')"
+    ></div>
+    <div
+      :class="[
+        `${prefixCls}__cut-menu`,
+        'relative w-56px h-48px cursor-pointer bg-gray-300',
+        {
+          'is-acitve': layout === 'cutMenu'
+        }
+      ]"
+      @click="appStore.setLayout('cutMenu')"
+    >
+      <div class="absolute left-[10%] top-0 h-full w-[33%] bg-gray-200"></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: v-layout-radio-picker;
+
+.#{$prefix-cls} {
+  &__classic {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 33%;
+      height: 100%;
+      background-color: #273352;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 25%;
+      background-color: #fff;
+      border-radius: 4px 4px 0;
+      content: '';
+    }
+  }
+
+  &__top-left {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 33%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+  }
+
+  &__top {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+  }
+
+  &__cut-menu {
+    border: 2px solid #e5e7eb;
+    border-radius: 4px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 33%;
+      background-color: #273352;
+      border-radius: 4px 4px 0 0;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 10%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 4px 0 0 4px;
+      content: '';
+    }
+  }
+
+  .is-acitve {
+    border-color: var(--el-color-primary);
+  }
+}
+</style>
--- a/src/layouts/components/SizeDropdown/index.ts
+++ b/src/layouts/components/SizeDropdown/index.ts
@@ -0,0 +1,3 @@
+import SizeDropdown from './src/SizeDropdown.vue'
+
+export { SizeDropdown }
--- a/src/layouts/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/layouts/components/SizeDropdown/src/SizeDropdown.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/stores/modules/app'
+
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { ElementPlusSize } from '@/types/elementPlus'
+
+defineOptions({ name: 'SizeDropdown' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('size-dropdown')
+
+defineProps({
+  color: propTypes.string.def('')
+})
+
+const { t } = useI18n()
+
+const appStore = useAppStore()
+
+const sizeMap = computed(() => appStore.sizeMap)
+
+const setCurrentSize = (size: ElementPlusSize) => {
+  appStore.setCurrentSize(size)
+}
+</script>
+
+<template>
+  <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
+    <Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
+          {{ t(`size.${item}`) }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
--- a/src/layouts/components/TabMenu/index.ts
+++ b/src/layouts/components/TabMenu/index.ts
@@ -0,0 +1,3 @@
+import TabMenu from './src/TabMenu.vue'
+
+export { TabMenu }
--- a/src/layouts/components/TabMenu/src/TabMenu.vue
+++ b/src/layouts/components/TabMenu/src/TabMenu.vue
@@ -0,0 +1,235 @@
+<script lang="tsx">
+import { ref, computed, unref, onMounted, watch } from 'vue'
+import { usePermissionStore } from '@/stores/modules/permission'
+import { useAppStore } from '@/stores/modules/app'
+
+import { ElScrollbar } from 'element-plus'
+import { Menu } from '@/layouts/components/Menu'
+import { pathResolve } from '@/utils/routerHelper'
+import { cloneDeep } from 'lodash-es'
+import { filterMenusPath, initTabMap, tabPathMap } from './helper'
+import { useDesign } from '@/hooks/web/useDesign'
+import { isUrl } from '@/utils/is'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('tab-menu')
+
+export default defineComponent({
+    name: 'TabMenu',
+    setup() {
+        const { push, currentRoute } = useRouter()
+
+        const { t } = useI18n()
+
+        const appStore = useAppStore()
+
+        const collapse = computed(() => appStore.getCollapse)
+
+        const fixedMenu = computed(() => appStore.getFixedMenu)
+
+        const permissionStore = usePermissionStore()
+
+        const routers = computed(() => permissionStore.getRouters)
+
+        const tabRouters = computed(() => unref(routers).filter(v => !v?.meta?.hidden))
+
+        const setCollapse = () => {
+            appStore.setCollapse(!unref(collapse))
+        }
+
+        onMounted(() => {
+            if (unref(fixedMenu)) {
+                const path = `/${unref(currentRoute).path.split('/')[1]}`
+                const children = unref(tabRouters).find(
+                    v => (v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)) && v.path === path
+                )?.children
+
+                tabActive.value = path
+                if (children) {
+                    permissionStore.setMenuTabRouters(
+                        cloneDeep(children).map(v => {
+                            v.path = pathResolve(unref(tabActive), v.path)
+                            return v
+                        })
+                    )
+                }
+            }
+        })
+
+        watch(
+            () => routers.value,
+            (routers: AppRouteRecordRaw[]) => {
+                initTabMap(routers)
+                filterMenusPath(routers, routers)
+            },
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+
+        const showTitle = ref(true)
+
+        watch(
+            () => collapse.value,
+            (collapse: boolean) => {
+                if (!collapse) {
+                    setTimeout(() => {
+                        showTitle.value = !collapse
+                    }, 200)
+                } else {
+                    showTitle.value = !collapse
+                }
+            }
+        )
+
+        // 是否显示菜单
+        const showMenu = ref(unref(fixedMenu) ? true : false)
+
+        // tab高亮
+        const tabActive = ref('')
+
+        // tab点击事件
+        const tabClick = (item: AppRouteRecordRaw) => {
+            if (isUrl(item.path)) {
+                window.open(item.path)
+                return
+            }
+            const newPath = item.children ? item.path : item.path.split('/')[0]
+            const oldPath = unref(tabActive)
+            tabActive.value = item.children ? item.path : item.path.split('/')[0]
+            if (item.children) {
+                if (newPath === oldPath || !unref(showMenu)) {
+                    showMenu.value = unref(fixedMenu) ? true : !unref(showMenu)
+                }
+                if (unref(showMenu)) {
+                    permissionStore.setMenuTabRouters(
+                        cloneDeep(item.children).map(v => {
+                            v.path = pathResolve(unref(tabActive), v.path)
+                            return v
+                        })
+                    )
+                }
+            } else {
+                push(item.path)
+                permissionStore.setMenuTabRouters([])
+                showMenu.value = false
+            }
+        }
+
+        // 设置高亮
+        const isActive = (currentPath: string) => {
+            const { path } = unref(currentRoute)
+            if (tabPathMap[currentPath].includes(path)) {
+                return true
+            }
+            return false
+        }
+
+        const mouseleave = () => {
+            if (!unref(showMenu) || unref(fixedMenu)) return
+            showMenu.value = false
+        }
+
+        return () => (
+            <div
+                id={`${variables.namespace}-menu`}
+                class={[
+                    prefixCls,
+                    'relative bg-[var(--left-menu-bg-color)] top-1px layout-border__right',
+                    {
+                        'w-[var(--tab-menu-max-width)]': !unref(collapse),
+                        'w-[var(--tab-menu-min-width)]': unref(collapse)
+                    }
+                ]}
+                onMouseleave={mouseleave}
+            >
+                <ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height)-1px)]">
+                    <div>
+                        {() => {
+                            return unref(tabRouters).map(v => {
+                                const item = (
+                                    v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)
+                                        ? v
+                                        : {
+                                              ...(v?.children && v?.children[0]),
+                                              path: pathResolve(v.path, (v?.children && v?.children[0])?.path as string)
+                                          }
+                                ) as AppRouteRecordRaw
+                                return (
+                                    <div
+                                        class={[
+                                            `${prefixCls}__item`,
+                                            'text-center text-12px relative py-12px cursor-pointer',
+                                            {
+                                                'is-active': isActive(v.path)
+                                            }
+                                        ]}
+                                        onClick={() => {
+                                            tabClick(item)
+                                        }}
+                                    >
+                                        <div></div>
+                                        {!unref(showTitle) ? undefined : (
+                                            <p class="mt-5px break-words px-2px">{t(item.meta?.title)}</p>
+                                        )}
+                                    </div>
+                                )
+                            })
+                        }}
+                    </div>
+                </ElScrollbar>
+                <div
+                    class={[
+                        `${prefixCls}--collapse`,
+                        'text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer'
+                    ]}
+                    onClick={setCollapse}
+                ></div>
+                <Menu
+                    class={[
+                        '!absolute top-0 z-11',
+                        {
+                            '!left-[var(--tab-menu-min-width)]': unref(collapse),
+                            '!left-[var(--tab-menu-max-width)]': !unref(collapse),
+                            '!w-[calc(var(--left-menu-max-width)+1px)]': unref(showMenu) || unref(fixedMenu),
+                            '!w-0': !unref(showMenu) && !unref(fixedMenu)
+                        }
+                    ]}
+                    style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                ></Menu>
+            </div>
+        )
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: v-tab-menu;
+
+.#{$prefix-cls} {
+    transition: all var(--transition-time-02);
+
+    &__item {
+        color: var(--left-menu-text-color);
+        transition: all var(--transition-time-02);
+
+        &:hover {
+            color: var(--left-menu-text-active-color);
+            // background-color: var(--left-menu-bg-active-color);
+        }
+    }
+
+    &--collapse {
+        color: var(--left-menu-text-color);
+        background-color: var(--left-menu-bg-light-color);
+    }
+
+    .is-active {
+        color: var(--left-menu-text-active-color);
+        background-color: var(--left-menu-bg-active-color);
+    }
+}
+</style>
--- a/src/layouts/components/TabMenu/src/helper.ts
+++ b/src/layouts/components/TabMenu/src/helper.ts
@@ -0,0 +1,51 @@
+import { getAllParentPath } from '@/layouts/components/Menu/src/helper'
+import type { RouteMeta } from 'vue-router'
+import { isUrl } from '@/utils/is'
+import { cloneDeep } from 'lodash-es'
+
+export type TabMapTypes = {
+  [key: string]: string[]
+}
+
+export const tabPathMap = reactive<TabMapTypes>({})
+
+export const initTabMap = (routes: AppRouteRecordRaw[]) => {
+  for (const v of routes) {
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (!meta?.hidden) {
+      tabPathMap[v.path] = []
+    }
+  }
+}
+
+export const filterMenusPath = (
+  routes: AppRouteRecordRaw[],
+  allRoutes: AppRouteRecordRaw[]
+): AppRouteRecordRaw[] => {
+  const res: AppRouteRecordRaw[] = []
+  for (const v of routes) {
+    let data: Nullable<AppRouteRecordRaw> = null
+    const meta = (v.meta ?? {}) as RouteMeta
+    if (!meta.hidden || meta.canTo) {
+      const allParentPath = getAllParentPath<AppRouteRecordRaw>(allRoutes, v.path)
+
+      const fullPath = isUrl(v.path) ? v.path : allParentPath.join('/')
+
+      data = cloneDeep(v)
+      data.path = fullPath
+      if (v.children && data) {
+        data.children = filterMenusPath(v.children, allRoutes)
+      }
+
+      if (data) {
+        res.push(data)
+      }
+
+      if (allParentPath.length && Reflect.has(tabPathMap, allParentPath[0])) {
+        tabPathMap[allParentPath[0]].push(fullPath)
+      }
+    }
+  }
+
+  return res
+}
--- a/src/layouts/components/TagsView/index.ts
+++ b/src/layouts/components/TagsView/index.ts
@@ -0,0 +1,3 @@
+import TagsView from './src/TagsView.vue'
+
+export { TagsView }
--- a/src/layouts/components/TagsView/src/TagsView.vue
+++ b/src/layouts/components/TagsView/src/TagsView.vue
@@ -0,0 +1,585 @@
+<script lang="ts" setup>
+import { onMounted, watch, computed, unref, ref, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
+import { usePermissionStore } from '@/stores/modules/permission'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useAppStore } from '@/stores/modules/app'
+import { useI18n } from '@/hooks/web/useI18n'
+import { filterAffixTags } from './helper'
+import { ContextMenu, ContextMenuExpose } from '@/layouts/components/ContextMenu'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTemplateRefsList } from '@vueuse/core'
+import { ElScrollbar } from 'element-plus'
+import { useScrollTo } from '@/hooks/event/useScrollTo'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('tags-view')
+
+const { t } = useI18n()
+
+const { currentRoute, push, replace } = useRouter()
+
+const permissionStore = usePermissionStore()
+
+const routers = computed(() => permissionStore.getRouters)
+
+const tagsViewStore = useTagsViewStore()
+
+const visitedViews = computed(() => tagsViewStore.getVisitedViews)
+
+const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
+
+const appStore = useAppStore()
+
+const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
+
+const isDark = computed(() => appStore.getIsDark)
+
+// 初始化tag
+const initTags = () => {
+  affixTagArr.value = filterAffixTags(unref(routers))
+  for (const tag of unref(affixTagArr)) {
+    // Must have tag name
+    if (tag.name) {
+      tagsViewStore.addVisitedView(tag)
+    }
+  }
+}
+
+const selectedTag = ref<RouteLocationNormalizedLoaded>()
+
+// 新增tag
+const addTags = () => {
+  const { name } = unref(currentRoute)
+  if (name) {
+    selectedTag.value = unref(currentRoute)
+    tagsViewStore.addView(unref(currentRoute))
+  }
+  return false
+}
+
+// 关闭选中的tag
+const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
+  if (view?.meta?.affix) return
+  tagsViewStore.delView(view)
+  if (isActive(view)) {
+    toLastView()
+  }
+}
+
+// 关闭全部
+const closeAllTags = () => {
+  tagsViewStore.delAllViews()
+  toLastView()
+}
+
+// 关闭其它
+const closeOthersTags = () => {
+  tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+}
+
+// 重新加载
+const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
+  if (!view) return
+  tagsViewStore.delCachedView()
+  const { path, query } = view
+  await nextTick()
+  replace({
+    path: '/redirect' + path,
+    query: query
+  })
+}
+
+// 关闭左侧
+const closeLeftTags = () => {
+  tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+}
+
+// 关闭右侧
+const closeRightTags = () => {
+  tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+}
+
+// 跳转到最后一个
+const toLastView = () => {
+  const visitedViews = tagsViewStore.getVisitedViews
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView) {
+    push(latestView)
+  } else {
+    if (
+      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
+      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
+    ) {
+      addTags()
+      return
+    }
+    // TODO: You can set another route
+    push('/')
+  }
+}
+
+// 滚动到选中的tag
+const moveToCurrentTag = async () => {
+  await nextTick()
+  for (const v of unref(visitedViews)) {
+    if (v.fullPath === unref(currentRoute).path) {
+      moveToTarget(v)
+      if (v.fullPath !== unref(currentRoute).fullPath) {
+        tagsViewStore.updateVisitedView(unref(currentRoute))
+      }
+
+      break
+    }
+  }
+}
+
+const tagLinksRefs = useTemplateRefsList<RouterLinkProps>()
+
+const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
+  const wrap$ = unref(scrollbarRef)?.wrapRef
+  let firstTag: Nullable<RouterLinkProps> = null
+  let lastTag: Nullable<RouterLinkProps> = null
+
+  const tagList = unref(tagLinksRefs)
+  // find first tag and last tag
+  if (tagList.length > 0) {
+    firstTag = tagList[0]
+    lastTag = tagList[tagList.length - 1]
+  }
+  if ((firstTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+    // 直接滚动到0的位置
+    const { start } = useScrollTo({
+      el: wrap$!,
+      position: 'scrollLeft',
+      to: 0,
+      duration: 500
+    })
+    start()
+  } else if ((lastTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
+    // 滚动到最后的位置
+    const { start } = useScrollTo({
+      el: wrap$!,
+      position: 'scrollLeft',
+      to: wrap$!.scrollWidth - wrap$!.offsetWidth,
+      duration: 500
+    })
+    start()
+  } else {
+    // find preTag and nextTag
+    const currentIndex: number = tagList.findIndex(
+      (item) => (item?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath
+    )
+    const tgsRefs = document.getElementsByClassName(`${prefixCls}__item`)
+
+    const prevTag = tgsRefs[currentIndex - 1] as HTMLElement
+    const nextTag = tgsRefs[currentIndex + 1] as HTMLElement
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + 4
+
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - 4
+
+    if (afterNextTagOffsetLeft > unref(scrollLeftNumber) + wrap$!.offsetWidth) {
+      const { start } = useScrollTo({
+        el: wrap$!,
+        position: 'scrollLeft',
+        to: afterNextTagOffsetLeft - wrap$!.offsetWidth,
+        duration: 500
+      })
+      start()
+    } else if (beforePrevTagOffsetLeft < unref(scrollLeftNumber)) {
+      const { start } = useScrollTo({
+        el: wrap$!,
+        position: 'scrollLeft',
+        to: beforePrevTagOffsetLeft,
+        duration: 500
+      })
+      start()
+    }
+  }
+}
+
+// 是否是当前tag
+const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
+  return route.path === unref(currentRoute).path
+}
+
+// 所有右键菜单组件的元素
+const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
+
+// 右键菜单装填改变的时候
+const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
+  if (visible) {
+    for (const v of unref(itemRefs)) {
+      const elDropdownMenuRef = v.elDropdownMenuRef
+      if (tagItem.fullPath !== v.tagItem.fullPath) {
+        elDropdownMenuRef?.handleClose()
+      }
+    }
+  }
+}
+
+// elscroll 实例
+const scrollbarRef = ref<ComponentRef<typeof ElScrollbar>>()
+
+// 保存滚动位置
+const scrollLeftNumber = ref(0)
+
+const scroll = ({ scrollLeft }) => {
+  scrollLeftNumber.value = scrollLeft as number
+}
+
+// 移动到某个位置
+const move = (to: number) => {
+  const wrap$ = unref(scrollbarRef)?.wrapRef
+  const { start } = useScrollTo({
+    el: wrap$!,
+    position: 'scrollLeft',
+    to: unref(scrollLeftNumber) + to,
+    duration: 500
+  })
+  start()
+}
+
+onMounted(() => {
+  initTags()
+  addTags()
+})
+
+watch(
+  () => currentRoute.value,
+  () => {
+    addTags()
+    moveToCurrentTag()
+  }
+)
+</script>
+
+<template>
+  <div
+    :id="prefixCls"
+    :class="prefixCls"
+    class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
+  >
+    <span
+      :class="`${prefixCls}__tool ${prefixCls}__tool--first`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="move(-200)"
+    >
+      <Icon
+        icon="ep:d-arrow-left"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+      />
+    </span>
+    <div class="flex-1 overflow-hidden">
+      <ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
+        <div class="h-full flex">
+          <ContextMenu
+            :ref="itemRefs.set"
+            :schema="[
+              {
+                icon: 'ep:refresh',
+                label: t('common.reload'),
+                disabled: selectedTag?.fullPath !== item.fullPath,
+                command: () => {
+                  refreshSelectedTag(item)
+                }
+              },
+              {
+                icon: 'ep:close',
+                label: t('common.closeTab'),
+                disabled: !!visitedViews?.length && selectedTag?.meta.affix,
+                command: () => {
+                  closeSelectedTag(item)
+                }
+              },
+              {
+                divided: true,
+                icon: 'ep:d-arrow-left',
+                label: t('common.closeTheLeftTab'),
+                disabled:
+                  !!visitedViews?.length &&
+                  (item.fullPath === visitedViews[0].fullPath ||
+                    selectedTag?.fullPath !== item.fullPath),
+                command: () => {
+                  closeLeftTags()
+                }
+              },
+              {
+                icon: 'ep:d-arrow-right',
+                label: t('common.closeTheRightTab'),
+                disabled:
+                  !!visitedViews?.length &&
+                  (item.fullPath === visitedViews[visitedViews.length - 1].fullPath ||
+                    selectedTag?.fullPath !== item.fullPath),
+                command: () => {
+                  closeRightTags()
+                }
+              },
+              {
+                divided: true,
+                icon: 'ep:discount',
+                label: t('common.closeOther'),
+                disabled: selectedTag?.fullPath !== item.fullPath,
+                command: () => {
+                  closeOthersTags()
+                }
+              },
+              {
+                icon: 'ep:minus',
+                label: t('common.closeAll'),
+                command: () => {
+                  closeAllTags()
+                }
+              }
+            ]"
+            v-for="item in visitedViews"
+            :key="item.fullPath"
+            :tag-item="item"
+            :class="[
+              `${prefixCls}__item`,
+              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
+              {
+                'is-active': isActive(item)
+              }
+            ]"
+            @visible-change="visibleChange"
+          >
+            <div>
+              <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
+                <div
+                  @click="navigate"
+                  class="h-full flex items-center justify-center whitespace-nowrap pl-15px"
+                >
+                  <Icon
+                    v-if="
+                      item?.matched &&
+                      item?.matched[1] &&
+                      item?.matched[1]?.meta?.icon &&
+                      tagsViewIcon
+                    "
+                    :icon="item?.matched[1]?.meta?.icon"
+                    :size="12"
+                    class="mr-5px"
+                  />
+                  {{ t(item?.meta?.title as string) }}
+                  <Icon
+                    :class="`${prefixCls}__item--close`"
+                    color="#333"
+                    icon="ep:close"
+                    :size="12"
+                    @click.prevent.stop="closeSelectedTag(item)"
+                  />
+                </div>
+              </router-link>
+            </div>
+          </ContextMenu>
+        </div>
+      </ElScrollbar>
+    </div>
+    <span
+      :class="`${prefixCls}__tool`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="move(200)"
+    >
+      <Icon
+        icon="ep:d-arrow-right"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+      />
+    </span>
+    <span
+      :class="`${prefixCls}__tool`"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      @click="refreshSelectedTag(selectedTag)"
+    >
+      <Icon
+        icon="ep:refresh-right"
+        color="var(--el-text-color-placeholder)"
+        :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+      />
+    </span>
+    <ContextMenu
+      trigger="click"
+      :schema="[
+        {
+          icon: 'ep:refresh',
+          label: t('common.reload'),
+          command: () => {
+            refreshSelectedTag(selectedTag)
+          }
+        },
+        {
+          icon: 'ep:close',
+          label: t('common.closeTab'),
+          disabled: !!visitedViews?.length && selectedTag?.meta.affix,
+          command: () => {
+            closeSelectedTag(selectedTag!)
+          }
+        },
+        {
+          divided: true,
+          icon: 'ep:d-arrow-left',
+          label: t('common.closeTheLeftTab'),
+          disabled: !!visitedViews?.length && selectedTag?.fullPath === visitedViews[0].fullPath,
+          command: () => {
+            closeLeftTags()
+          }
+        },
+        {
+          icon: 'ep:d-arrow-right',
+          label: t('common.closeTheRightTab'),
+          disabled:
+            !!visitedViews?.length &&
+            selectedTag?.fullPath === visitedViews[visitedViews.length - 1].fullPath,
+          command: () => {
+            closeRightTags()
+          }
+        },
+        {
+          divided: true,
+          icon: 'ep:discount',
+          label: t('common.closeOther'),
+          command: () => {
+            closeOthersTags()
+          }
+        },
+        {
+          icon: 'ep:minus',
+          label: t('common.closeAll'),
+          command: () => {
+            closeAllTags()
+          }
+        }
+      ]"
+    >
+      <span
+        :class="`${prefixCls}__tool`"
+        class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
+      >
+        <Icon
+          icon="ep:menu"
+          color="var(--el-text-color-placeholder)"
+          :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
+        />
+      </span>
+    </ContextMenu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: v-tags-view;
+
+.#{$prefix-cls} {
+  :deep(.el-scrollbar__view) {
+    height: 100%;
+  }
+
+  &__tool {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 1px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 1px);
+      border-left: 1px solid var(--el-border-color);
+      content: '';
+    }
+
+    &--first {
+      &::before {
+        position: absolute;
+        top: 1px;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 1px);
+        border-right: 1px solid var(--el-border-color);
+        border-left: none;
+        content: '';
+      }
+    }
+  }
+
+  &__item {
+    position: relative;
+    top: 2px;
+    height: calc(100% - 6px);
+    padding-right: 25px;
+    margin-left: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+
+    &--close {
+      position: absolute;
+      top: 50%;
+      right: 5px;
+      display: none;
+      transform: translate(0, -50%);
+    }
+    &:not(.#{$prefix-cls}__item--affix):hover {
+      .#{$prefix-cls}__item--close {
+        display: block;
+      }
+    }
+  }
+
+  &__item:not(.is-active) {
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &__item.is-active {
+    color: var(--el-color-white);
+    background-color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary);
+    .#{$prefix-cls}__item--close {
+      :deep(span) {
+        color: var(--el-color-white) !important;
+      }
+    }
+  }
+}
+
+.dark {
+  .#{$prefix-cls} {
+    &__tool {
+      &--first {
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &__item {
+      border: 1px solid var(--el-border-color);
+    }
+
+    &__item:not(.is-active) {
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+
+    &__item.is-active {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+      border: 1px solid var(--el-color-primary);
+      .#{$prefix-cls}__item--close {
+        :deep(span) {
+          color: var(--el-color-white) !important;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/layouts/components/TagsView/src/helper.ts
+++ b/src/layouts/components/TagsView/src/helper.ts
@@ -0,0 +1,21 @@
+import type { RouteMeta, RouteLocationNormalizedLoaded } from 'vue-router'
+import { pathResolve } from '@/utils/routerHelper'
+
+export const filterAffixTags = (routes: AppRouteRecordRaw[], parentPath = '') => {
+  let tags: RouteLocationNormalizedLoaded[] = []
+  routes.forEach((route) => {
+    const meta = route.meta as RouteMeta
+    const tagPath = pathResolve(parentPath, route.path)
+    if (meta?.affix) {
+      tags.push({ ...route, path: tagPath, fullPath: tagPath } as RouteLocationNormalizedLoaded)
+    }
+    if (route.children) {
+      const tempTags: RouteLocationNormalizedLoaded[] = filterAffixTags(route.children, tagPath)
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags]
+      }
+    }
+  })
+
+  return tags
+}
--- a/src/layouts/components/ThemeSwitch/index.ts
+++ b/src/layouts/components/ThemeSwitch/index.ts
@@ -0,0 +1,3 @@
+import ThemeSwitch from './src/ThemeSwitch.vue'
+
+export { ThemeSwitch }
--- a/src/layouts/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/layouts/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { useIcon } from '@/hooks/web/useIcon'
+import { useDesign } from '@/hooks/web/useDesign'
+
+defineOptions({ name: 'ThemeSwitch' })
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('theme-switch')
+
+const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
+
+const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })
+
+const appStore = useAppStore()
+
+// 初始化获取是否是暗黑主题
+const isDark = ref(appStore.getIsDark)
+
+// 设置switch的背景颜色
+const blackColor = 'var(--el-color-black)'
+
+const themeChange = (val: boolean) => {
+  appStore.setIsDark(val)
+}
+</script>
+
+<template>
+  <ElSwitch
+    v-model="isDark"
+    :active-color="blackColor"
+    :active-icon="Sun"
+    :border-color="blackColor"
+    :class="prefixCls"
+    :inactive-color="blackColor"
+    :inactive-icon="CrescentMoon"
+    inline-prompt
+    @change="themeChange"
+  />
+</template>
+<style lang="scss" scoped>
+:deep(.el-switch__core .el-switch__inner .is-icon) {
+  overflow: visible;
+}
+</style>
--- a/src/layouts/components/ToolHeader.vue
+++ b/src/layouts/components/ToolHeader.vue
@@ -0,0 +1,95 @@
+<script lang="tsx">
+import { defineComponent, computed } from 'vue'
+import { Collapse } from '@/layouts/components/Collapse'
+import { UserInfo } from '@/layouts/components/UserInfo'
+import { Screenfull } from '@/layouts/components/Screenfull'
+import { Breadcrumb } from '@/layouts/components/Breadcrumb'
+import { SizeDropdown } from '@/layouts/components/SizeDropdown'
+import { LocaleDropdown } from '@/layouts/components/LocaleDropdown'
+import RouterSearch from '@/components/RouterSearch/index.vue'
+import { useAppStore } from '@/stores/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls, variables } = useDesign()
+
+const prefixCls = getPrefixCls('tool-header')
+
+const appStore = useAppStore()
+
+// 面包屑
+const breadcrumb = computed(() => appStore.getBreadcrumb)
+
+// 折叠图标
+const hamburger = computed(() => appStore.getHamburger)
+
+// 全屏图标
+const screenfull = computed(() => appStore.getScreenfull)
+
+// 搜索图片
+const search = computed(() => appStore.search)
+
+// 尺寸图标
+const size = computed(() => appStore.getSize)
+
+// 布局
+const layout = computed(() => appStore.getLayout)
+
+// 多语言图标
+const locale = computed(() => appStore.getLocale)
+
+// 消息图标
+const message = computed(() => appStore.getMessage)
+
+export default defineComponent({
+  name: 'ToolHeader',
+  setup() {
+    return () => (
+      <div
+        id={`${variables.namespace}-tool-header`}
+        class={[
+          prefixCls,
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+          'dark:bg-[var(--el-bg-color)]'
+        ]}
+      >
+        {layout.value !== 'top' ? (
+          <div class="h-full flex items-center">
+            {hamburger.value && layout.value !== 'cutMenu' ? (
+              <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
+            ) : undefined}
+            {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
+          </div>
+        ) : undefined}
+        <div class="h-full flex items-center">
+          {screenfull.value ? (
+            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
+          ) : undefined}
+          {search.value ? <RouterSearch isModal={false} /> : undefined}
+          {size.value ? (
+            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
+          ) : undefined}
+          {locale.value ? (
+            <LocaleDropdown
+              class="custom-hover"
+              color="var(--top-header-text-color)"
+            ></LocaleDropdown>
+          ) : undefined}
+          {message.value ? (
+              "undefined"
+            // <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
+          ) : undefined}
+          <UserInfo></UserInfo>
+        </div>
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: v-tool-header;
+
+.#{$prefix-cls} {
+  transition: left var(--transition-time-02);
+}
+</style>
--- a/src/layouts/components/UserInfo/index.ts
+++ b/src/layouts/components/UserInfo/index.ts
@@ -0,0 +1,3 @@
+import UserInfo from './src/UserInfo.vue'
+
+export { UserInfo }
--- a/src/layouts/components/UserInfo/src/UserInfo.vue
+++ b/src/layouts/components/UserInfo/src/UserInfo.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { Tools, Menu, Lock, SwitchButton } from '@element-plus/icons-vue'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useUserStore } from '@/stores/modules/user'
+import LockDialog from './components/LockDialog.vue'
+import LockPage from './components/LockPage.vue'
+import { useLockStore } from '@/stores/modules/lock'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+defineOptions({ name: 'UserInfo' })
+
+const { t } = useI18n()
+
+const { push, replace } = useRouter()
+
+const userStore = useUserStore()
+
+const tagsViewStore = useTagsViewStore()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('user-info')
+
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+// 锁定屏幕
+const lockStore = useLockStore()
+const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false)
+const dialogVisible = ref<boolean>(false)
+const lockScreen = () => {
+    dialogVisible.value = true
+}
+
+const loginOut = async () => {
+    try {
+        await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+            confirmButtonText: t('common.ok'),
+            cancelButtonText: t('common.cancel'),
+            type: 'warning'
+        })
+        await userStore.loginOut()
+        tagsViewStore.delAllViews()
+        replace('/login?redirect=/index')
+    } catch {}
+}
+const toProfile = async () => {
+    push('/user/profile')
+}
+const toDocument = () => {
+    window.open('https://doc.iocoder.cn/')
+}
+</script>
+
+<template>
+    <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
+        <div class="flex items-center">
+            <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
+            <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden">
+                {{ userName }}
+            </span>
+        </div>
+        <template #dropdown>
+            <ElDropdownMenu>
+                <ElDropdownItem>
+                    <Tools />
+                    <div @click="toProfile">{{ t('common.profile') }}</div>
+                </ElDropdownItem>
+                <ElDropdownItem>
+                    <Menu />
+                    <div @click="toDocument">{{ t('common.document') }}</div>
+                </ElDropdownItem>
+                <ElDropdownItem divided>
+                    <Lock />
+                    <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
+                </ElDropdownItem>
+                <ElDropdownItem divided @click="loginOut">
+                    <SwitchButton />
+                    <div>{{ t('common.loginOut') }}</div>
+                </ElDropdownItem>
+            </ElDropdownMenu>
+        </template>
+    </ElDropdown>
+
+    <LockDialog v-if="dialogVisible" v-model="dialogVisible" />
+
+    <teleport to="body">
+        <transition name="fade-bottom" mode="out-in">
+            <LockPage v-if="getIsLock" />
+        </transition>
+    </teleport>
+</template>
+
+<style scoped lang="scss">
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+    transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+    opacity: 0;
+    transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+    opacity: 0;
+    transform: translateY(10%);
+}
+</style>
--- a/src/layouts/components/UserInfo/src/components/LockDialog.vue
+++ b/src/layouts/components/UserInfo/src/components/LockDialog.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useValidator } from '@/hooks/web/useValidator'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/stores/modules/lock'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/stores/modules/user'
+import { useI18n } from 'vue-i18n'
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+
+const { required } = useValidator()
+
+const { t } = useI18n()
+
+const lockStore = useLockStore()
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean
+    }
+})
+
+const userStore = useUserStore()
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogVisible = computed({
+    get: () => props.modelValue,
+    set: val => {
+        console.log('set: ', val)
+        emit('update:modelValue', val)
+    }
+})
+
+const dialogTitle = ref(t('lock.lockScreen'))
+
+const formData = ref({
+    password: undefined
+})
+const formRules = reactive({
+    password: [required()]
+})
+
+const formRef = ref() // 表单 Ref
+const handleLock = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    dialogVisible.value = false
+    lockStore.setLockInfo({
+        ...formData.value,
+        isLock: true
+    })
+}
+</script>
+
+<template>
+    <Dialog v-model="dialogVisible" width="500px" max-height="170px" :class="prefixCls" :title="dialogTitle">
+        <div class="flex flex-col items-center">
+            <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+            <span class="text-14px my-10px text-[var(--top-header-text-color)]">
+                {{ userName }}
+            </span>
+        </div>
+        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+            <el-form-item :label="t('lock.lockPassword')" prop="password">
+                <el-input
+                    type="password"
+                    v-model="formData.password"
+                    :placeholder="'请输入' + t('lock.lockPassword')"
+                    clearable
+                    show-password
+                />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+        </template>
+    </Dialog>
+</template>
+
+<style lang="scss" scoped>
+:global(.v-lock-dialog) {
+    @media (max-width: 767px) {
+        max-width: calc(100vw - 16px);
+    }
+}
+</style>
--- a/src/layouts/components/UserInfo/src/components/LockPage.vue
+++ b/src/layouts/components/UserInfo/src/components/LockPage.vue
@@ -0,0 +1,258 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { deleteUserCache } from '@/hooks/web/useCache'
+import { useLockStore } from '@/stores/modules/lock'
+import { useNow } from '@/hooks/web/useNow'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useUserStore } from '@/stores/modules/user'
+import avatarImg from '@/assets/imgs/avatar.gif'
+
+const tagsViewStore = useTagsViewStore()
+
+const { replace } = useRouter()
+
+const userStore = useUserStore()
+
+const password = ref('')
+const loading = ref(false)
+const errMsg = ref(false)
+const showDate = ref(true)
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-page')
+
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+const lockStore = useLockStore()
+
+const { hour, month, minute, meridiem, year, day, week } = useNow(true)
+
+const { t } = useI18n()
+
+// 解锁
+async function unLock() {
+    if (!password.value) {
+        return
+    }
+    let pwd = password.value
+    try {
+        loading.value = true
+        const res = await lockStore.unLock(pwd)
+        errMsg.value = !res
+    } finally {
+        loading.value = false
+    }
+}
+
+// 返回登录
+async function goLogin() {
+    await userStore.loginOut().catch(() => {})
+    // 登出后清理
+    deleteUserCache() // 清空用户缓存
+    tagsViewStore.delAllViews()
+    // resetRouter() // 重置静态路由表
+    lockStore.resetLockInfo()
+    replace('/login')
+}
+
+function handleShowForm(show = false) {
+    showDate.value = show
+}
+</script>
+
+<template>
+    <div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center">
+        <div
+            :class="`${prefixCls}__unlock`"
+            class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
+            @click="handleShowForm(false)"
+            v-show="showDate"
+        >
+            <Icon icon="ep:lock" />
+            <span>{{ t('lock.unlock') }}</span>
+        </div>
+
+        <div class="flex w-screen h-screen justify-center items-center">
+            <div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+                <span>{{ hour }}</span>
+                <span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
+                    {{ meridiem }}
+                </span>
+            </div>
+            <div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
+                <span>{{ minute }}</span>
+            </div>
+        </div>
+        <transition name="fade-slide">
+            <div :class="`${prefixCls}-entry`" v-show="!showDate">
+                <div :class="`${prefixCls}-entry-content`">
+                    <div class="flex flex-col items-center">
+                        <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+                        <span class="text-14px my-10px text-[var(--logo-title-text-color)]">
+                            {{ userName }}
+                        </span>
+                    </div>
+                    <ElInput type="password" :placeholder="t('lock.placeholder')" class="enter-x" v-model="password" />
+                    <span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
+                        {{ t('lock.message') }}
+                    </span>
+                    <div :class="`${prefixCls}-entry__footer enter-x`">
+                        <ElButton
+                            type="primary"
+                            size="small"
+                            class="mt-2 mr-2 enter-x"
+                            link
+                            :disabled="loading"
+                            @click="handleShowForm(true)"
+                        >
+                            {{ t('common.back') }}
+                        </ElButton>
+                        <ElButton
+                            type="primary"
+                            size="small"
+                            class="mt-2 mr-2 enter-x"
+                            link
+                            :disabled="loading"
+                            @click="goLogin"
+                        >
+                            {{ t('lock.backToLogin') }}
+                        </ElButton>
+                        <ElButton type="primary" class="mt-2" size="small" link @click="unLock()" :disabled="loading">
+                            {{ t('lock.entrySystem') }}
+                        </ElButton>
+                    </div>
+                </div>
+            </div>
+        </transition>
+
+        <div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
+            <div class="text-5xl mb-4 enter-x" v-show="!showDate">
+                {{ hour }}:{{ minute }}
+                <span class="text-3xl">{{ meridiem }}</span>
+            </div>
+            <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+$prefix-cls: 'v-lock-page';
+
+// Small screen / tablet
+$screen-sm: 576px;
+
+// Medium screen / desktop
+$screen-md: 768px;
+
+// Large screen / wide desktop
+$screen-lg: 992px;
+
+// Extra large screen / full hd
+$screen-xl: 1200px;
+
+// Extra extra large screen / large desktop
+$screen-2xl: 1600px;
+
+$error-color: #ed6f6f;
+
+.#{$prefix-cls} {
+    z-index: 3000;
+
+    &__unlock {
+        transform: translate(-50%, 0);
+    }
+
+    &__hour,
+    &__minute {
+        display: flex;
+        font-weight: 700;
+        color: #bababa;
+        background-color: #141313;
+        border-radius: 30px;
+        justify-content: center;
+        align-items: center;
+
+        @media screen and (max-width: $screen-md) {
+            span:not(.meridiem) {
+                font-size: 160px;
+            }
+        }
+
+        @media screen and (min-width: $screen-md) {
+            span:not(.meridiem) {
+                font-size: 160px;
+            }
+        }
+
+        @media screen and (max-width: $screen-sm) {
+            span:not(.meridiem) {
+                font-size: 90px;
+            }
+        }
+        @media screen and (min-width: $screen-lg) {
+            span:not(.meridiem) {
+                font-size: 220px;
+            }
+        }
+
+        @media screen and (min-width: $screen-xl) {
+            span:not(.meridiem) {
+                font-size: 260px;
+            }
+        }
+        @media screen and (min-width: $screen-2xl) {
+            span:not(.meridiem) {
+                font-size: 320px;
+            }
+        }
+    }
+
+    &-entry {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(8px);
+        justify-content: center;
+        align-items: center;
+
+        &-content {
+            width: 260px;
+        }
+
+        &__header {
+            text-align: center;
+
+            &-img {
+                width: 70px;
+                margin: 0 auto;
+                border-radius: 50%;
+            }
+
+            &-name {
+                margin-top: 5px;
+                font-weight: 500;
+                color: #bababa;
+            }
+        }
+
+        &__err-msg {
+            display: inline-block;
+            margin-top: 10px;
+            color: $error-color;
+        }
+
+        &__footer {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+}
+</style>
--- a/src/layouts/components/useRenderLayout.tsx
+++ b/src/layouts/components/useRenderLayout.tsx
@@ -0,0 +1,306 @@
+import { computed } from 'vue'
+import { useAppStore } from '@/stores/modules/app'
+import { Menu } from '@/layouts/components/Menu'
+import { TabMenu } from '@/layouts/components/TabMenu'
+import { TagsView } from '@/layouts/components/TagsView'
+import { Logo } from '@/layouts/components/Logo'
+import AppView from './AppView.vue'
+import ToolHeader from './ToolHeader.vue'
+import { ElScrollbar } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+const pageLoading = computed(() => appStore.getPageLoading)
+
+// 标签页
+const tagsView = computed(() => appStore.getTagsView)
+
+// 菜单折叠
+const collapse = computed(() => appStore.getCollapse)
+
+// logo
+const logo = computed(() => appStore.logo)
+
+// 固定头部
+const fixedHeader = computed(() => appStore.getFixedHeader)
+
+// 是否是移动端
+const mobile = computed(() => appStore.getMobile)
+
+// 固定菜单
+const fixedMenu = computed(() => appStore.getFixedMenu)
+
+export const useRenderLayout = () => {
+  const renderClassic = () => {
+    return (
+      <>
+        <div
+          class={[
+            'absolute top-0 left-0 h-full layout-border__right',
+            { '!fixed z-3000': mobile.value }
+          ]}
+        >
+          {logo.value ? (
+            <Logo
+              class={[
+                'bg-[var(--left-menu-bg-color)] relative',
+                {
+                  '!pl-0': mobile.value && collapse.value,
+                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
+                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            ></Logo>
+          ) : undefined}
+          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
+        </div>
+        <div
+          class={[
+            `${prefixCls}-content`,
+            'absolute top-0 h-[100%]',
+            {
+              'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                collapse.value && !mobile.value && !mobile.value,
+              'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                !collapse.value && !mobile.value && !mobile.value,
+              'fixed !w-full !left-0': mobile.value
+            }
+          ]}
+          style="transition: all var(--transition-time-02);"
+        >
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
+                  fixedHeader.value
+              }
+            ]}
+          >
+            <div
+              class={[
+                {
+                  'fixed top-0 left-0 z-10': fixedHeader.value,
+                  'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
+                    collapse.value && fixedHeader.value && !mobile.value,
+                  'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
+                    !collapse.value && fixedHeader.value && !mobile.value,
+                  '!w-full !left-0': mobile.value
+                }
+              ]}
+              style="transition: all var(--transition-time-02);"
+            >
+              <ToolHeader
+                class={[
+                  'bg-[var(--top-header-bg-color)]',
+                  {
+                    'layout-border__bottom': !tagsView.value
+                  }
+                ]}
+              ></ToolHeader>
+
+              {tagsView.value ? (
+                <TagsView class="layout-border__top layout-border__bottom"></TagsView>
+              ) : undefined}
+            </div>
+
+            <AppView></AppView>
+          </ElScrollbar>
+        </div>
+      </>
+    )
+  }
+
+  const renderTopLeft = () => {
+    return (
+      <>
+        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom dark:bg-[var(--el-bg-color)]">
+          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+
+          <ToolHeader class="flex-1"></ToolHeader>
+        </div>
+        <div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex">
+          <Menu class="relative layout-border__right !h-full"></Menu>
+          <div
+            class={[
+              `${prefixCls}-content`,
+              'h-[100%]',
+              {
+                'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
+                  collapse.value,
+                'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
+                  !collapse.value
+              }
+            ]}
+            style="transition: all var(--transition-time-02);"
+          >
+            <ElScrollbar
+              v-loading={pageLoading.value}
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value
+                }
+              ]}
+            >
+              {tagsView.value ? (
+                <TagsView
+                  class={[
+                    'layout-border__bottom absolute',
+                    {
+                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[calc(var(--logo-height)+1px)]':
+                        collapse.value && fixedHeader.value,
+                      'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[calc(var(--logo-height)+1px)]':
+                        !collapse.value && fixedHeader.value
+                    }
+                  ]}
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                ></TagsView>
+              ) : undefined}
+
+              <AppView></AppView>
+            </ElScrollbar>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  const renderTop = () => {
+    return (
+      <>
+        <div
+          class={[
+            'flex items-center justify-between bg-[var(--top-header-bg-color)] relative',
+            {
+              'layout-border__bottom': !tagsView.value
+            }
+          ]}
+        >
+          {logo.value ? <Logo class="custom-hover"></Logo> : undefined}
+          <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
+          <ToolHeader></ToolHeader>
+        </div>
+        <div
+          class={[
+            `${prefixCls}-content`,
+            'w-full',
+            {
+              'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value,
+              'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
+            }
+          ]}
+        >
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]':
+                  fixedHeader.value,
+                'pb-[var(--app-footer-height)]': !fixedHeader.value
+              }
+            ]}
+          >
+            {tagsView.value ? (
+              <TagsView
+                class={[
+                  'layout-border__bottom layout-border__top relative',
+                  {
+                    '!fixed w-full top-[calc(var(--top-tool-height)+1px)] left-0': fixedHeader.value
+                  }
+                ]}
+                style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+              ></TagsView>
+            ) : undefined}
+
+            <AppView></AppView>
+          </ElScrollbar>
+        </div>
+      </>
+    )
+  }
+
+  const renderCutMenu = () => {
+    return (
+      <>
+        <div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
+          {logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
+
+          <ToolHeader class="flex-1"></ToolHeader>
+        </div>
+        <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex">
+          <TabMenu></TabMenu>
+          <div
+            class={[
+              `${prefixCls}-content`,
+              'h-[100%]',
+              {
+                'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
+                  collapse.value && !fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
+                  !collapse.value && !fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                  collapse.value && fixedMenu.value,
+                'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
+                  !collapse.value && fixedMenu.value
+              }
+            ]}
+            style="transition: all var(--transition-time-02);"
+          >
+            <ElScrollbar
+              v-loading={pageLoading.value}
+              class={[
+                `${prefixCls}-content-scrollbar`,
+                {
+                  '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
+                    fixedHeader.value && tagsView.value
+                }
+              ]}
+            >
+              {tagsView.value ? (
+                <TagsView
+                  class={[
+                    'relative layout-border__bottom layout-border__top',
+                    {
+                      '!fixed top-0 left-0 z-10': fixedHeader.value,
+                      'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
+                        collapse.value && fixedHeader.value,
+                      'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
+                        !collapse.value && fixedHeader.value,
+                      '!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
+                        fixedHeader.value && fixedMenu.value,
+                      'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
+                        collapse.value && fixedHeader.value && fixedMenu.value,
+                      'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
+                        !collapse.value && fixedHeader.value && fixedMenu.value
+                    }
+                  ]}
+                  style="transition: width var(--transition-time-02), left var(--transition-time-02);"
+                ></TagsView>
+              ) : undefined}
+
+              <AppView></AppView>
+            </ElScrollbar>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  return {
+    renderClassic,
+    renderTopLeft,
+    renderTop,
+    renderCutMenu
+  }
+}