From 2338ded16528be27e27ebdef604b01ccf2c51734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Tue, 10 May 2022 17:18:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppIcons/index.js              |  3 +++
 src/layout/components/header/HeaderAction.vue | 25 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/AppIcons/index.js b/src/components/AppIcons/index.js
index ac2d417..91cdb3e 100644
--- a/src/components/AppIcons/index.js
+++ b/src/components/AppIcons/index.js
@@ -17,4 +17,7 @@ export { default as IconMenuTable } from '~icons/mdi/table'
 export { default as IconMenuCollapse } from '~icons/mdi/format-indent-decrease'
 export { default as IconMenuExpand } from '~icons/mdi/format-indent-increase'
 
+export { default as IconFullscreen } from '~icons/ant-design/fullscreen-outlined'
+export { default as IconFullscreenExit } from '~icons/ant-design/fullscreen-exit-outlined'
+
 export { default as IconLogo } from './IconLogo.vue'
diff --git a/src/layout/components/header/HeaderAction.vue b/src/layout/components/header/HeaderAction.vue
index 86f252e..bb9497f 100644
--- a/src/layout/components/header/HeaderAction.vue
+++ b/src/layout/components/header/HeaderAction.vue
@@ -1,21 +1,30 @@
 <template>
-  <n-dropdown :options="options" @select="handleSelect">
-    <div class="avatar">
-      <img :src="userStore.avatar" />
-      <span>{{ userStore.name }}</span>
-    </div>
-  </n-dropdown>
+  <div class="actions-wrapper">
+    <n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
+      <IconFullscreenExit v-if="isFullscreen" />
+      <IconFullscreen v-else />
+    </n-icon>
+    <n-dropdown :options="options" @select="handleSelect">
+      <div class="avatar">
+        <img :src="userStore.avatar" />
+        <span>{{ userStore.name }}</span>
+      </div>
+    </n-dropdown>
+  </div>
 </template>
 
 <script setup>
+import { IconFullscreen, IconFullscreenExit } from '@/components/AppIcons'
 import { useUserStore } from '@/store/modules/user'
 import { useRouter } from 'vue-router'
 import { resetRouter } from '@/router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { NOT_FOUND_ROUTE } from '@/router/routes'
+import { useFullscreen } from '@vueuse/core'
 
 const userStore = useUserStore()
 const router = useRouter()
+const { isFullscreen, toggle } = useFullscreen()
 
 const options = [
   {
@@ -81,6 +90,10 @@ function switchRole() {
 </script>
 
 <style lang="scss" scoped>
+.actions-wrapper {
+  display: flex;
+  align-items: center;
+}
 .avatar {
   display: flex;
   align-items: center;