From 5f9b6846045de0a7fdedfd2837066e7ccd97cfd8 Mon Sep 17 00:00:00 2001
From: moecinnamo <abcd2890000456@gmail.com>
Date: Tue, 16 Dec 2025 22:36:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=BC=B9=E7=AA=97=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/index/Main.vue   |  2 +-
 src/components/layout/Modal.vue | 70 ++++++++++++++++++++++++++-------
 src/views/Loading.vue           | 12 ++++--
 3 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/src/components/index/Main.vue b/src/components/index/Main.vue
index 9ddb120..18ff139 100644
--- a/src/components/index/Main.vue
+++ b/src/components/index/Main.vue
@@ -1,7 +1,7 @@
 <script setup>
     import { defineAsyncComponent, computed } from 'vue'
     import { useRoute } from 'vue-router'
-    
+
     const route = useRoute()
     const DynamicContent = computed(() => {
         switch (route.path) {
diff --git a/src/components/layout/Modal.vue b/src/components/layout/Modal.vue
index b3243a6..80bbf7e 100644
--- a/src/components/layout/Modal.vue
+++ b/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;
diff --git a/src/views/Loading.vue b/src/views/Loading.vue
index c2f8db0..0097a01 100644
--- a/src/views/Loading.vue
+++ b/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>