feat(layout): the realization of full screen display function

package.json

@@ -26,6 +26,7 @@
     "vite-project": "link:",
     "vue": "^3.4.31",
     "vue-draggable-plus": "^0.5.2",
+    "vue-fullscreen": "^3.1.2",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.0"
   },

src/App.vue

@@ -1,16 +1,18 @@
 <template>
-  <n-config-provider
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-    :theme="isDark ? darkTheme : null"
-    :theme-overrides="isDark ? darkThemeOverrides : lightThemeOverrides"
-  >
-    <n-message-provider>
-      <loading>
-        <router-view />
-      </loading>
-    </n-message-provider>
-  </n-config-provider>
+  <fullscreen v-model:fullscreen="isFull" teleport="true">
+    <n-config-provider
+      :locale="zhCN"
+      :date-locale="dateZhCN"
+      :theme="isDark ? darkTheme : null"
+      :theme-overrides="isDark ? darkThemeOverrides : lightThemeOverrides"
+    >
+      <n-message-provider>
+        <loading>
+          <router-view />
+        </loading>
+      </n-message-provider>
+    </n-config-provider>
+  </fullscreen>
 </template>
 
 <script setup lang="ts">
@@ -21,6 +23,7 @@ import { onBeforeMount } from 'vue';
 import { useTheme } from '@/hooks/useTheme.ts';
 import { useTranslations } from '@/hooks/useTranslate.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
+import { component as fullscreen } from 'vue-fullscreen';
 import { lightThemeOverrides, darkThemeOverrides } from '@/ThemeOverrides.ts';
 
 import { setFavicon } from '@/utils';
@@ -33,7 +36,9 @@ const { updateTranslations } = useTranslations();
 
 const globalStore = useGlobalStore();
 
-const { isDark } = storeToRefs(globalStore);
+const { isDark, isFullScreen } = storeToRefs(globalStore);
+
+const isFull = isFullScreen;
 
 onBeforeMount(() => {
   // 初始化主题样式

src/languages/modules/en.ts

@@ -15,6 +15,7 @@ export default {
   Email: 'Email',
   Source: 'Source',
   Logout: 'Log Out',
+  'Full Screen': 'Full Screen',
   'Web Terminal': 'Web Terminal',
   'Theme Reset': 'The theme color has been reset to',
   'Custom Setting': 'Custom Setting',

src/languages/modules/zh.ts

@@ -15,6 +15,7 @@ export default {
   Email: '电子邮件',
   Source: '来源',
   Logout: '退出登录',
+  'Full Screen': '全屏展示',
   'Web Terminal': 'Web 终端',
   'Theme Reset': '主题颜色已重置为',
   'Custom Setting': '自定义设置',

src/layouts/components/Header/headerRight.vue

@@ -130,6 +130,7 @@ const bottomOptions: HeaderRightOptions[] = [
     name: 'setting',
     component: Setting,
     onClick: () => {
+      console.log(1);
       mittBus.emit('open-setting-drawer');
     }
   }

src/layouts/components/SettingDrawer/index.vue

@@ -10,7 +10,7 @@
     <n-drawer-content :title="t('Custom Setting')" class="drawer-content" closable>
       <n-divider> {{ t('Theme Settings') }} </n-divider>
       <n-flex>
-        <n-flex class="dark-setting" justify="space-between" align="center">
+        <n-flex class="setting-item dark-setting" justify="space-between" align="center">
           {{ t('Dark Mode') }}
           <n-switch v-model:value="darkModeActive" @update:value="handleDarkModeChange">
             <template #checked-icon>
@@ -21,7 +21,7 @@
             </template>
           </n-switch>
         </n-flex>
-        <n-flex class="asset-async" justify="space-between" align="center">
+        <n-flex class="setting-item asset-async" justify="space-between" align="center">
           <n-popover placement="bottom" trigger="hover">
             <template #trigger>
               {{ t('Asset Async') }}
@@ -37,7 +37,18 @@
             </template>
           </n-switch>
         </n-flex>
-        <n-flex class="page-setting" justify="space-between" align="center">
+        <n-flex class="setting-item full-screen" justify="space-between" align="center">
+          {{ t('Full Screen') }}
+          <n-switch v-model:value="fullScreenActive" @update:value="handleFullScreenChange">
+            <template #checked-icon>
+              <n-icon :component="ContractOutline" />
+            </template>
+            <template #unchecked-icon>
+              <n-icon :component="Expand" />
+            </template>
+          </n-switch>
+        </n-flex>
+        <n-flex class="setting-item page-setting" justify="space-between" align="center">
           {{ t('Page Configuration') }}
           <n-select
             clearable
@@ -50,7 +61,7 @@
       </n-flex>
 
       <n-divider> {{ t('Language Settings') }} </n-divider>
-      <n-flex class="language-setting" justify="space-between" align="center">
+      <n-flex class="setting-item language-setting" justify="space-between" align="center">
         {{ t('Language Selection') }}
         <n-select
           clearable
@@ -77,8 +88,10 @@ import { watch, onBeforeUnmount, reactive, ref } from 'vue';
 
 import mittBus from '@/utils/mittBus.ts';
 import {
+  Expand,
   MoonOutline,
   SunnyOutline,
+  ContractOutline,
   ArrowBackCircleOutline,
   ArrowForwardCircleOutline
 } from '@vicons/ionicons5';
@@ -93,22 +106,19 @@ const { updateTranslations } = useTranslations();
 
 const { t } = useI18n();
 const { switchDark } = useTheme();
-const { isDark } = storeToRefs(globalStore);
 const { isAsync } = storeToRefs(treeStore);
+const { isDark, isFullScreen } = storeToRefs(globalStore);
 
 const darkModeActive = isDark;
 const assetAsyncActive = isAsync;
+const fullScreenActive = isFullScreen;
 
 const showSettingDrawer = ref<Boolean>(false);
 const defaultWidth = ref(globalStore.language === 'en' ? 390 : 300);
 
 const pageOptionValue = ref();
 const languageOptionValue = ref(globalStore.language);
 const pageOptions = reactive([
-  {
-    label: t('General'),
-    value: 'General'
-  },
   {
     label: t('GUI'),
     value: 'GUI'
@@ -161,6 +171,9 @@ const handleAssetAsyncChange = (value: Boolean) => {
   treeStore.changeState(value);
   mittBus.emit('tree-load');
 };
+const handleFullScreenChange = (value: Boolean) => {
+  globalStore.setGlobalState('isFullScreen', value);
+};
 
 /* eslint-disable-next-line no-unused-vars */
 const handlePageConfigurationChange = (value: string, option: CustomSelectOption) => {
@@ -177,6 +190,7 @@ watch(
 );
 
 mittBus.on('open-setting-drawer', () => {
+  console.log(2);
   showSettingDrawer.value = true;
 });
 
@@ -196,27 +210,15 @@ onBeforeUnmount(() => {
   }
   .drawer-content {
     :deep(.n-drawer-body-content-wrapper) {
-      .dark-setting,
-      .asset-async,
-      .page-setting,
-      .language-setting {
+      .setting-item {
         width: 100%;
+        margin-top: 10px;
       }
-      .asset-async {
-        margin-top: 15px;
-      }
-      .page-setting {
-        flex-wrap: nowrap;
-        margin-top: 15px;
-        .n-select {
-          width: 150px;
-        }
+      .page-setting .n-select {
+        width: 150px;
       }
-      .language-setting {
-        flex-wrap: nowrap;
-        .n-select {
-          width: 150px;
-        }
+      .language-setting .n-select {
+        width: 150px;
       }
     }
   }

src/layouts/index.vue

@@ -9,7 +9,6 @@
       </n-layout-header>
       <n-layout-sider
         v-draggable="sideWidth"
-        ref="sideRef"
         bordered
         collapse-mode="width"
         show-trigger="arrow-circle"
@@ -18,10 +17,10 @@
         :collapsed-width="0"
         :collapsed="isCollapsed"
         :show-collapsed-content="false"
+        class="transition-sider"
         :style="{
           width: sideWidth + 'px',
-          maxWidth: '600px',
-          transition: 'width 0.5s ease-in-out'
+          maxWidth: '600px'
         }"
       >
         <FileManagement class="file-management" />
@@ -83,8 +82,6 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 @import 'index';
-
-// 增加侧边栏右侧边缘拖动手柄的样式
 .n-layout-sider {
   position: relative;
 }
@@ -94,7 +91,7 @@ onUnmounted(() => {
   right: 0;
   width: 10px; // 右侧边缘宽度
   height: 100%;
-  cursor: ew-resize; // 鼠标悬停样式
+  cursor: ew-resize;
   content: '';
 }
 </style>

src/main.ts

@@ -14,6 +14,8 @@ import 'vfonts/OpenSans.css';
 import '@/styles/reset.scss';
 // 引入图标注册脚本
 import 'virtual:svg-icons-register';
+// 引入 vue-fullscreen
+import VueFullscreen from 'vue-fullscreen';
 // 引入指令
 import { draggable } from '@/directive/sidebarDraggable.ts';
 
@@ -23,6 +25,7 @@ app.use(i18n);
 app.use(naive);
 app.use(pinia);
 app.use(router);
+app.use(VueFullscreen);
 
 app.directive('draggable', draggable);
 

src/stores/interface/index.ts

@@ -1,8 +1,9 @@
 export interface GlobalState {
-  primary: string;
   isDark: Boolean;
+  isFullScreen: Boolean;
   token: string;
   JMSOrg: string;
+  primary: string;
   language: string;
   csrfToken: string;
   JMSLunaOra: string;

src/stores/modules/global.ts

@@ -9,6 +9,8 @@ export const useGlobalStore = defineStore({
   state: (): GlobalState => ({
     // 深色模式
     isDark: true,
+    // 全屏展示
+    isFullScreen: false,
     token: '',
     JMSOrg: '',
     language: '',