新增全屏功能

  1. 新建 FullscreenToggle.vue 组件 — 独立的全屏切换按钮，包含图标切换、fullscreen API 调用、事件监听
  2. DashboardLayout — 引用组件替代原内联逻辑，清理多余的 data/methods/样式
  3. LoginLayout — 在顶部标题栏右侧添加全屏按钮

src/components/ui/FullscreenToggle.vue

@@ -0,0 +1,51 @@
+<template>
+  <img class="fullscreen-btn" :src="isFullscreen ? collapseIcon : expandIcon" @click="toggle" />
+</template>
+
+<script>
+import expandIcon from '@/assets/images/icon_full_screen_expand.png';
+import collapseIcon from '@/assets/images/icon_full_screen_collapse.png';
+
+export default {
+  name: 'FullscreenToggle',
+  data() {
+    return {
+      isFullscreen: false,
+      expandIcon,
+      collapseIcon,
+    };
+  },
+  mounted() {
+    document.addEventListener('fullscreenchange', this.onFullscreenChange);
+  },
+  beforeDestroy() {
+    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+  },
+  methods: {
+    toggle() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    },
+    onFullscreenChange() {
+      this.isFullscreen = !!document.fullscreenElement;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fullscreen-btn {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity 0.2s;
+  pointer-events: auto;
+}
+.fullscreen-btn:hover {
+  opacity: 1;
+}
+</style>

src/layouts/DashboardLayout.vue

@@ -5,7 +5,8 @@
                 <img src="@/assets/images/logo.png" />
             </div>
             <div class="title glow-text" :data-text="title">{{ title }}</div>
-            <div class="top-right-user">
+            <div class="top-right-actions">
+                <FullscreenToggle />
                 <UserProfile />
             </div>
         </div>
@@ -84,6 +85,7 @@ import BottomDock from '@/components/ui/BottomDock.vue';
 import SmartDialog from '@/components/ui/SmartDialog.vue';
 import dialogManager from '@/mixins/dialogManager';
 import UserProfile from '@/components/ui/UserProfile.vue';
+import FullscreenToggle from '@/components/ui/FullscreenToggle.vue';
 
 // 注册所有可能在弹窗中使用的内容组件
 import DeviceStatusPanel from '@/components/ui/DeviceStatusPanel.vue';
@@ -113,6 +115,7 @@ export default {
         BottomDock,
         SmartDialog,
         UserProfile,
+        FullscreenToggle,
         DeviceStatusPanel,
         SecurityRoutePanel,
         IntersectionMapVideos,
@@ -310,12 +313,15 @@ export default {
     pointer-events: auto; 
 }
 
-.top-right-user {
+.top-right-actions {
     position: absolute;
-    top: 2px;       /* 距离顶部的高度，可根据背景图微调 */
-    right: 50px;     /* 距离右侧的距离 */
-    pointer-events: auto; /* 【关键】因为 frame-top 是 none，必须在这里恢复鼠标交互，否则无法点击下拉 */
-    z-index: 100;    /* 保证层级最高，下拉菜单不被遮挡 */
+    top: 2px;
+    right: 50px;
+    pointer-events: auto;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 .top-logo {
     position: absolute;

src/layouts/LoginLayout.vue

@@ -2,6 +2,9 @@
     <div class="fluid-dashboard">
         <div class="frame-top">
             <div class="title glow-text" :data-text="title">{{ title }}</div>
+            <div class="top-right-actions">
+                <FullscreenToggle />
+            </div>
         </div>
 
         <div class="frame-bottom"></div>
@@ -21,11 +24,13 @@
 <script>
 
 
+import FullscreenToggle from '@/components/ui/FullscreenToggle.vue';
+
 export default {
     name: 'LoginLayout',
     mixins: [],
     components: {
-        
+        FullscreenToggle,
     },
     props: {
         // 接收外部传入的 class，用于动态切换 CSS 网格布局
@@ -78,6 +83,14 @@ export default {
     background-size: 100% 100%;
 }
 
+.top-right-actions {
+    position: absolute;
+    top: 2px;
+    right: 50px;
+    pointer-events: auto;
+    z-index: 100;
+}
+
 .frame-top .title {
     font-family: var(--title-font-family);
     font-size: 48px;