优化主题样式

package.json

@@ -42,6 +42,7 @@
         "vuedraggable": "4.1.0"
     },
     "devDependencies": {
+        "@vicons/antd": "^0.13.0",
         "@vicons/ionicons5": "^0.13.0",
         "@vicons/utils": "^0.1.4",
         "@vitejs/plugin-vue": "5.2.4",

src/layout/components/Navbar.vue

@@ -43,9 +43,10 @@
                             </Icon>
                         </div>
                     </el-tooltip>
-                    <div class="icon-wrapper">
+                    <div class="icon-wrapper" @click="handleScan">
                         <Icon size="18">
-                            <ScanOutline />
+                            <ScanOutline v-if="!isFullscreen" />
+                            <CompressOutlined v-else />
                         </Icon>
                     </div>
                     <div class="icon-wrapper">
@@ -160,7 +161,13 @@ import {
     LockClosedOutline,
     ChevronForward,
     ExitOutline,
+    ContractSharp,
 } from '@vicons/ionicons5'
+
+//  AlignLeftOutlined
+//  CompressOutlined
+
+import { AlignLeftOutlined, CompressOutlined } from '@vicons/antd'
 import { initThemeTransitionCSS } from '@/utils/themeTransition'
 import { Icon } from '@vicons/utils'
 import Breadcrumb from '@/components/Breadcrumb'
@@ -237,7 +244,20 @@ const handleKeyDown = (e) => {
         handleSearch()
     }
 }
+const isFullscreen = ref(false)
 
+// 开启全屏
+const handleScan = () => {
+    if (isFullscreen.value) {
+        // 退出全屏
+        document.exitFullscreen()
+        isFullscreen.value = false
+    } else {
+        // 打开全屏
+        document.documentElement.requestFullscreen()
+        isFullscreen.value = true
+    }
+}
 onMounted(() => {
     window.addEventListener('keydown', handleKeyDown)
     // 初始化主题切换动画 CSS

src/settings.js

@@ -32,7 +32,7 @@ export default {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo

src/utils/themeTransition.js

@@ -109,30 +109,30 @@ export function toggleThemeWithTransition(callback, event = null) {
           }
         ],
         {
-          duration: 600,
+          duration: 1000,
           easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
           pseudoElement: '::view-transition-old(root)'
         }
       )
 
-      // 新视图（日间模式）进入：从图标位置扩展到全屏
+      // // 新视图（日间模式）进入：从图标位置扩展到全屏
-      document.documentElement.animate(
+      // document.documentElement.animate(
-        [
+      //   [
-          {
+      //     {
-            clipPath: `circle(0px at ${iconX}px ${iconY}px)`,
+      //       clipPath: `circle(0px at ${iconX}px ${iconY}px)`,
-            opacity: 0
+      //       opacity: 0
-          },
+      //     },
-          {
+      //     {
-            clipPath: `circle(${iconRadius}px at ${iconX}px ${iconY}px)`,
+      //       clipPath: `circle(${iconRadius}px at ${iconX}px ${iconY}px)`,
-            opacity: 1
+      //       opacity: 1
-          }
+      //     }
-        ],
+      //   ],
-        {
+      //   {
-          duration: 600,
+      //     duration: 600,
-          easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      //     easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          pseudoElement: '::view-transition-new(root)'
+      //     pseudoElement: '::view-transition-new(root)'
-        }
+      //   }
-      )
+      // )
     }
   })
 }