为弹窗增加全屏功能

src/components/layout/Modal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue'
 const emit = defineEmits(['close'])
 
 const props = defineProps({
@@ -30,8 +31,18 @@ const props = defineProps({
   },
 })
 
+const isMaximized = ref(false)
+
 const closeModal = () => emit('close')
-const getDimensionValue = (value) => {
+const toggleMaximize = () => {
+  isMaximized.value = !isMaximized.value
+  emit('maximize', isMaximized.value)
+}
+const getDimensionValue = (value, dimension) => {
+  if (isMaximized.value) {
+    return '100%'
+  }
+  
   if (typeof value === 'number') {
     return `${value}px`;
   }
@@ -40,9 +51,12 @@ const getDimensionValue = (value) => {
 </script>
 <template>
   <div class="modal-mask">
-    <div class="modal-container" :class="theme" :style="{width: getDimensionValue(width), height: getDimensionValue(height),}">
+    <div class="modal-container" :class="[theme, { 'maximized': isMaximized }]" :style="{ width: getDimensionValue(width), height: getDimensionValue(height), maxWidth: isMaximized ? '100vw' : 'none', maxHeight: isMaximized ? '100vh' : 'none'}">
       <header class="modal-header">
-        <button class="modal-close-btn" @click="closeModal"></button>
+        <div class="modal-header-buttons">
+          <button class="modal-close-btn" @click="closeModal"></button>
+          <button class="modal-maximize-btn" @click="toggleMaximize"></button>
+        </div>
         <header class="modal-header-title">{{ title }}</header>
       </header>
       <div class="modal-main">
@@ -97,36 +111,64 @@ const getDimensionValue = (value) => {
   background-color: #3a3a3a;
   border-bottom: 1px solid #444;
 }
-.modal-close-btn {
+.modal-header-buttons {
   position: absolute;
-  top: 8px;
   left: 10px;
+  top: 8px;
+  display: flex;
+  gap: 8px;
+  height: 20px;
+}
+.modal-close-btn,
+.modal-maximize-btn {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: none;
-  background-color: #ff5b5b;
-  color: #666;
-  font-weight: bold;
   cursor: default;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+}
+.modal-close-btn {
+  background-color: #ff5b5b;
+}
+.modal-maximize-btn {
+  background-color: #37b600;
+}
+.modal-close-btn::before,
+.modal-maximize-btn::before {
+  position: absolute;
+  font-family: "Font Awesome 7 Free";
+  font-weight: bolder;
+  font-size: 11px;
+  color: #555;
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
 .modal-close-btn::before {
   content: "\f00d";
-  font-family: "Font Awesome 7 Free";
-  font-weight: bolder;
-  display: none;
   font-size: 11px;
-  color: #555;
 }
-.modal-close-btn:hover::before {
-  display: block;
+.modal-maximize-btn::before {
+  content: "\f424";
+  font-size: 8px;
+}
+.modal-container.maximized .modal-maximize-btn::before {
+  content: "\f422";
+}
+.modal-header-buttons:hover .modal-close-btn::before,
+.modal-header-buttons:hover .modal-maximize-btn::before {
+  opacity: 1;
 }
 .modal-close-btn:active {
   background-color: #c64848;
 }
+.modal-maximize-btn:active {
+  background-color: #288500;
+}
 .modal-header-title {
   position: absolute;
   top: 4px;

src/views/Loading.vue

@@ -1,19 +1,23 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
+const route = useRoute()
 const router = useRouter()
 let timer = null
 
 onMounted(() => {
-  timer = setTimeout(() => {
-    router.push('/datascreen')
-  }, 3000)
+  if (route.path === '/') {
+    timer = setTimeout(() => {
+      router.push('/datascreen')
+    }, 3000)
+  }
 })
 
 onUnmounted(() => {
   if (timer) {
     clearTimeout(timer)
+    timer = null
   }
 })
 </script>