feat: add content full screen

locales/en_US.json

@@ -42,6 +42,7 @@
     "themeSetting": "Theme settings",
     "todos": "Todos",
     "toggleFullScreen": "Toggle full screen",
+    "togglContentFullScreen": "Toggle content full screen",
     "topProgress": "Top progress",
     "transitionFadeBottom": "Bottom fade",
     "transitionFadeScale": "Scale fade",

locales/zh_CN.json

@@ -20,6 +20,7 @@
     "backTop": "返回顶部",
     "toggleSider": "切换侧边栏",
     "toggleFullScreen": "切换全屏",
+    "togglContentFullScreen": "切换内容全屏",
     "notificationsTips": "消息通知",
     "notifications": "通知",
     "messages": "消息",

src/layouts/components/header/FullScreen.vue

@@ -18,8 +18,8 @@ useMagicKeys({
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <CommonWrapper @click="appStore.toggleFullScreen">
-        <icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
+        <icon-park-outline-off-screen v-if="appStore.fullScreen" />
-        <icon-park-outline-full-screen-two v-else />
+        <icon-park-outline-full-screen v-else />
       </CommonWrapper>
     </template>
     <span>{{ $t('app.toggleFullScreen') }}</span>

src/layouts/components/tab/ContentFullScreen.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <CommonWrapper @click="appStore.contentFullScreen = !appStore.contentFullScreen">
+        <icon-park-outline-off-screen-one v-if="appStore.contentFullScreen" />
+        <icon-park-outline-full-screen-one v-else />
+      </CommonWrapper>
+    </template>
+    <span>{{ $t('app.togglContentFullScreen') }}</span>
+  </n-tooltip>
+</template>

src/layouts/components/tab/TabBar.vue

@@ -2,6 +2,7 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import Reload from './Reload.vue'
 import DropTabs from './DropTabs.vue'
+import ContentFullScreen from './ContentFullScreen.vue'
 import { useAppStore, useTabStore } from '@/store'
 import IconRedo from '~icons/icon-park-outline/redo'
 import IconClose from '~icons/icon-park-outline/close'
@@ -135,6 +136,7 @@ function onClickoutside() {
       </n-tab>
       <template #suffix>
         <Reload />
+        <ContentFullScreen />
         <DropTabs />
       </template>
     </n-tabs>

src/layouts/leftMenu.layout.vue

@@ -25,6 +25,7 @@ const appStore = useAppStore()
     embedded
   >
     <n-layout-sider
+      v-if="!appStore.contentFullScreen"
       bordered
       :collapsed="appStore.collapsed"
       collapse-mode="width"
@@ -44,7 +45,7 @@ const appStore = useAppStore()
       :native-scrollbar="false"
     >
       <n-layout-header bordered position="absolute" class="z-1">
-        <div class="h-60px flex-y-center justify-between">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between">
           <div class="flex-y-center h-full">
             <CollapaseButton />
             <Breadcrumb />
@@ -61,9 +62,17 @@ const appStore = useAppStore()
         </div>
         <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <div class="flex-1 p-16px flex flex-col">
+      <!-- 121 = 16 + 45 + 60 45是面包屑高度 60是标签栏高度 -->
-        <div class="h-60px" />
+      <!-- 56 = 16 + 40 40是页脚高度 -->
-        <div v-if="appStore.showTabs" class="h-45px" />
+      <div
+        class="flex-1 p-16px flex flex-col"
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
         <router-view v-slot="{ Component, route }" class="flex-1">
           <transition
             :name="appStore.transitionAnimation"
@@ -78,10 +87,9 @@ const appStore = useAppStore()
             </keep-alive>
           </transition>
         </router-view>
-        <div v-if="appStore.showFooter" class="h-40px" />
       </div>
       <n-layout-footer
-        v-if="appStore.showFooter"
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
         bordered
         position="absolute"
         class="h-40px flex-center"

src/layouts/mixMenu.layout.vue

@@ -73,6 +73,7 @@ function updateTopMenu(key: string) {
     embedded
   >
     <n-layout-sider
+      v-if="!appStore.contentFullScreen"
       bordered
       :collapsed="appStore.collapsed"
       collapse-mode="width"
@@ -99,7 +100,7 @@ function updateTopMenu(key: string) {
       :native-scrollbar="false"
     >
       <n-layout-header bordered position="absolute" class="z-1">
-        <div class="h-60px flex-y-center justify-between">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between">
           <CollapaseButton />
           <n-menu
             ref="menuInstRef"
@@ -121,9 +122,15 @@ function updateTopMenu(key: string) {
         </div>
         <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <div class="flex-1 p-16px flex flex-col">
+      <div
-        <div class="h-60px" />
+        class="flex-1 p-16px flex flex-col"
-        <div v-if="appStore.showTabs" class="h-45px" />
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
         <router-view v-slot="{ Component, route }" class="flex-1">
           <transition
             :name="appStore.transitionAnimation"
@@ -138,10 +145,9 @@ function updateTopMenu(key: string) {
             </keep-alive>
           </transition>
         </router-view>
-        <div v-if="appStore.showFooter" class="h-40px" />
       </div>
       <n-layout-footer
-        v-if="appStore.showFooter"
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
         bordered
         position="absolute"
         class="h-40px flex-center"

src/layouts/topMenu.layout.vue

@@ -23,7 +23,7 @@ const appStore = useAppStore()
       embedded :native-scrollbar="false"
     >
       <n-layout-header bordered position="absolute" class="z-1">
-        <div class="h-60px flex-y-center justify-between shrink-0">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between shrink-0">
           <Logo v-if="appStore.showLogo" />
           <Menu mode="horizontal" responsive />
           <div class="flex-y-center gap-1 h-full p-x-xl">
@@ -38,9 +38,15 @@ const appStore = useAppStore()
         </div>
         <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <div class="flex-1 p-16px flex flex-col">
+      <div
-        <div class="h-60px" />
+        class="flex-1 p-16px flex flex-col"
-        <div v-if="appStore.showTabs" class="h-45px" />
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
         <router-view v-slot="{ Component, route }" class="flex-1">
           <transition :name="appStore.transitionAnimation" mode="out-in">
             <keep-alive :include="routeStore.cacheRoutes">
@@ -48,9 +54,11 @@ const appStore = useAppStore()
             </keep-alive>
           </transition>
         </router-view>
-        <div v-if="appStore.showFooter" class="h-40px" />
       </div>
-      <n-layout-footer v-if="appStore.showFooter" bordered position="absolute" class="h-40px flex-center">
+      <n-layout-footer
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
+        bordered position="absolute" class="h-40px flex-center"
+      >
         {{ appStore.footerText }}
       </n-layout-footer>
       <BackTop />

src/store/app/index.ts

@@ -4,7 +4,7 @@ import { set } from 'radash'
 import themeConfig from './theme.json'
 import { local, setLocale } from '@/utils'
 
-type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
+export type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
 export type LayoutMode = 'leftMenu' | 'topMenu' | 'mixMenu'
 
 const docEle = ref(document.documentElement)
@@ -36,6 +36,7 @@ export const useAppStore = defineStore('app-store', {
       showSetting: false,
       transitionAnimation: 'fade-slide' as TransitionAnimation,
       layoutMode: 'leftMenu' as LayoutMode,
+      contentFullScreen: false,
     }
   },
   getters: {
@@ -66,6 +67,7 @@ export const useAppStore = defineStore('app-store', {
       this.showWatermark = false
       this.transitionAnimation = 'fade-slide'
       this.layoutMode = 'leftMenu'
+      this.contentFullScreen = false
 
       // 重置所有配色
       this.setPrimaryColor(this.primaryColor)