Explorar o código

feat(big-screen): 移除按钮, 菜单点击自动浏览器原生全屏 + ESC 退出

- 大屏页面顶栏删除 '浏览器全屏' 和 '退出大屏' 两个按钮(用户要求)
- layout 菜单 @select 命中 /risk/bigScreen 时,在用户手势链内直接调用
  requestFullscreen, 浏览器原生全屏自动触发;失败则降级为 CSS 全屏
- 大屏页面保留 exitFullscreen() 函数,绑定 keydown 监听 ESC 触发退出
- Element Plus icons 精简,移除未使用的 FullScreen/Back/Aim 等
yangjingjing hai 1 día
pai
achega
2dab4d6e7e
Modificáronse 2 ficheiros con 30 adicións e 47 borrados
  1. 27 1
      src/layout/index.vue
  2. 3 46
      src/views/risk/bigScreen/index.vue

+ 27 - 1
src/layout/index.vue

@@ -42,7 +42,8 @@
             class="risk-menu"
             background-color="#fafafa"
             text-color="#333333"
-            active-text-color="#1890ff">
+            active-text-color="#1890ff"
+            @select="handleMenuSelect">
             <el-menu-item
               v-for="route in menuRoutes"
               :key="route.path"
@@ -228,6 +229,31 @@ const handleUserCmd = async (cmd: string) => {
   }
 };
 
+// 菜单点击:命中 /risk/bigScreen 时在用户手势链内调用浏览器原生全屏
+// 该事件由 el-menu @select 触发,处于 click 用户手势栈内,可成功
+function handleMenuSelect(index: string) {
+  if (index === '/risk/bigScreen') {
+    const docEl = document.documentElement as any;
+    const req =
+      docEl.requestFullscreen ||
+      docEl.webkitRequestFullscreen ||
+      docEl.mozRequestFullScreen ||
+      docEl.msRequestFullscreen;
+    if (req) {
+      try {
+        const ret = req.call(docEl);
+        if (ret && typeof (ret as any).then === 'function') {
+          ret.catch(() => {
+            // 用户拒绝授权,仍保持 CSS 全屏(layout 自动隐藏 header/sidebar)
+          });
+        }
+      } catch {
+        // 忽略,保持 CSS 全屏
+      }
+    }
+  }
+}
+
 onMounted(() => {
   // SSE / WebSocket 可选启动
   try {

+ 3 - 46
src/views/risk/bigScreen/index.vue

@@ -17,16 +17,6 @@
         <div class="bs-time">{{ currentTime }}</div>
         <div class="bs-date">{{ currentDate }}</div>
       </div>
-      <div class="bs-header-actions">
-        <el-button type="primary" size="small" @click="enterFullscreen">
-          <el-icon><FullScreen /></el-icon>
-          <span style="margin-left: 4px">浏览器全屏</span>
-        </el-button>
-        <el-button type="warning" size="small" @click="exitToPlatform">
-          <el-icon><Back /></el-icon>
-          <span style="margin-left: 4px">退出大屏</span>
-        </el-button>
-      </div>
     </div>
 
     <!-- 顶部: 6 张业务数据卡片 -->
@@ -159,17 +149,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
-import {
-  Aim,
-  Back,
-  Document,
-  FullScreen,
-  Shop,
-  Tools,
-  User,
-  Warning
-} from '@element-plus/icons-vue';
-import { useRouter } from 'vue-router';
 import {
   getBigScreenCards,
   getBigScreenCharts,
@@ -229,25 +208,9 @@ const dotColor = (c?: string): string => {
   return '#1890ff';
 };
 
-// ===== 浏览器原生全屏 + 退出大屏 =====
-const router = useRouter();
-
-function enterFullscreen() {
-  const docEl = document.documentElement;
-  const req =
-    docEl.requestFullscreen ||
-    (docEl as any).webkitRequestFullscreen ||
-    (docEl as any).mozRequestFullScreen ||
-    (docEl as any).msRequestFullscreen;
-  if (req) {
-    const ret = req.call(docEl);
-    if (ret && typeof (ret as any).then === 'function') {
-      (ret as Promise<void>).catch(() => {
-        // 用户拒绝则保持 CSS 全屏(layout 已是 router-view 直接占满)
-      });
-    }
-  }
-}
+// ===== 浏览器原生全屏 =====
+// 入口由 layout 菜单点击(用户手势链)触发;退出由大屏页面 ESC 键监听触发
+// 页面不暴露任何按钮,避免顶栏冗余
 
 function exitFullscreen() {
   const doc: any = document;
@@ -257,12 +220,6 @@ function exitFullscreen() {
   else if (doc.msExitFullscreen) doc.msExitFullscreen();
 }
 
-function exitToPlatform() {
-  // 优先尝试退出浏览器原生全屏,再退回首页
-  exitFullscreen();
-  router.push('/index');
-}
-
 // ===== 加载 =====
 async function loadCards() {
   try {