feat: 集成全屏功能

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'

src/layout/components/header/HeaderAction.vue

@@ -1,21 +1,30 @@
 <template>
-  <n-dropdown :options="options" @select="handleSelect">
+  <div class="actions-wrapper">
-    <div class="avatar">
+    <n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
-      <img :src="userStore.avatar" />
+      <IconFullscreenExit v-if="isFullscreen" />
-      <span>{{ userStore.name }}</span>
+      <IconFullscreen v-else />
-    </div>
+    </n-icon>
-  </n-dropdown>
+    <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;