From 53484ddbb5b5a3b6372d97c7cea3c22186a6d672 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Fri, 12 Jul 2024 17:54:19 +0800
Subject: [PATCH] feat(layout): the realization of full screen display function

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 19 +++++++
 src/App.vue                                   | 31 +++++-----
 src/languages/modules/en.ts                   |  1 +
 src/languages/modules/zh.ts                   |  1 +
 src/layouts/components/Header/headerRight.vue |  1 +
 .../components/SettingDrawer/index.vue        | 56 ++++++++++---------
 src/layouts/index.vue                         |  9 +--
 src/main.ts                                   |  3 +
 src/stores/interface/index.ts                 |  3 +-
 src/stores/modules/global.ts                  |  2 +
 11 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 0f1dd230..cd536c2b 100644
--- a/package.json
+++ b/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"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b613381..b515edf1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       vue-draggable-plus:
         specifier: ^0.5.2
         version: 0.5.2(@types/sortablejs@1.15.8)
+      vue-fullscreen:
+        specifier: ^3.1.2
+        version: 3.1.2(vue@3.4.31(typescript@5.5.3))
       vue-i18n:
         specifier: ^9.13.1
         version: 9.13.1(vue@3.4.31(typescript@5.5.3))
@@ -2704,6 +2707,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+
   seemly@0.3.8:
     resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
 
@@ -3255,6 +3262,11 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
+  vue-fullscreen@3.1.2:
+    resolution: {integrity: sha512-RFftYkafpb/lW8crXMfSAjiuhRhOsRRxemE84U3NL/Uoa1DwHGf61fxYE26oajlM7mqF7QrTLoLT2py3xyX0Ew==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-i18n@9.13.1:
     resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
     engines: {node: '>= 16'}
@@ -6066,6 +6078,8 @@ snapshots:
       immutable: 4.3.6
       source-map-js: 1.2.0
 
+  screenfull@5.2.0: {}
+
   seemly@0.3.8: {}
 
   semver@5.7.2: {}
@@ -6688,6 +6702,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-fullscreen@3.1.2(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      screenfull: 5.2.0
+      vue: 3.4.31(typescript@5.5.3)
+
   vue-i18n@9.13.1(vue@3.4.31(typescript@5.5.3)):
     dependencies:
       '@intlify/core-base': 9.13.1
diff --git a/src/App.vue b/src/App.vue
index 675e7ab8..710073d6 100644
--- a/src/App.vue
+++ b/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(() => {
   // 初始化主题样式
diff --git a/src/languages/modules/en.ts b/src/languages/modules/en.ts
index faed6177..e4281753 100644
--- a/src/languages/modules/en.ts
+++ b/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',
diff --git a/src/languages/modules/zh.ts b/src/languages/modules/zh.ts
index a65c7439..fa6a21ac 100644
--- a/src/languages/modules/zh.ts
+++ b/src/languages/modules/zh.ts
@@ -15,6 +15,7 @@ export default {
   Email: '电子邮件',
   Source: '来源',
   Logout: '退出登录',
+  'Full Screen': '全屏展示',
   'Web Terminal': 'Web 终端',
   'Theme Reset': '主题颜色已重置为',
   'Custom Setting': '自定义设置',
diff --git a/src/layouts/components/Header/headerRight.vue b/src/layouts/components/Header/headerRight.vue
index fcdc1ca5..d6e47c43 100644
--- a/src/layouts/components/Header/headerRight.vue
+++ b/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');
     }
   }
diff --git a/src/layouts/components/SettingDrawer/index.vue b/src/layouts/components/SettingDrawer/index.vue
index 81c8a55b..acfb9614 100644
--- a/src/layouts/components/SettingDrawer/index.vue
+++ b/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,11 +106,12 @@ 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);
@@ -105,10 +119,6 @@ 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;
       }
     }
   }
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 73d07dbe..8fe863a0 100644
--- a/src/layouts/index.vue
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index 6c271554..f9bab3a1 100644
--- a/src/main.ts
+++ b/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);
 
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 49f912b0..77b097f6 100644
--- a/src/stores/interface/index.ts
+++ b/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;
diff --git a/src/stores/modules/global.ts b/src/stores/modules/global.ts
index c9fa37ad..3b84893d 100644
--- a/src/stores/modules/global.ts
+++ b/src/stores/modules/global.ts
@@ -9,6 +9,8 @@ export const useGlobalStore = defineStore({
   state: (): GlobalState => ({
     // 深色模式
     isDark: true,
+    // 全屏展示
+    isFullScreen: false,
     token: '',
     JMSOrg: '',
     language: '',