修改页面弹窗全屏

web-vue/packages/core/layouts/views/desktop/analysis/components/info/ServerInfo.vue

@@ -5,8 +5,9 @@
     title="主机详情"
     :showOkBtn="false"
     :showCancelBtn="false"
-	defaultFullscreen="true"
+    defaultFullscreen="true"
     width="100%"
+    v-if="isModalVisible"
   >
     <div class="server-detail-container">
       <div class="server-info-top">
@@ -19,7 +20,6 @@
       </div>
       <!-- 分隔线 -->
       <div class="divider"></div>
-      <!-- 下半部分：监控面板 -->
       <div class="server-info-bottom card-container">
         <Monitor :formParams="FormValues" />
       </div>
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
 import { useMessage } from '@jeesite/core/hooks/web/useMessage';
 
@@ -37,39 +37,52 @@ import RightOut from './Echart/RightOut.vue';
 import Monitor from './Echart/Monitor.vue';
 
 export default defineComponent({
-  components: { 
+  components: { BasicModal, LeftOut, RightOut, Monitor },
-    BasicModal,
-    LeftOut,
-    RightOut,
-    Monitor
-  },
   setup() {
     const FormValues = ref<Record<string, any>>({
-      hostId: ''
+      hostId: '-1'
     });
+	
+    const isModalVisible = ref(false);
     
     const [register, { closeModal }] = useModalInner(async (data: any) => {
-      if (!data || !data.hostId) return;
+      FormValues.value = { hostId: '-1' };
+      isModalVisible.value = false;
+
+      if (!data || !data.hostId) {
+        closeModal();
+        return;
+      }
+
       FormValues.value.hostId = data.hostId;
+      isModalVisible.value = true;
     });
 
+    watch(
+      () => isModalVisible.value,
+      (newVal) => {
+        if (!newVal) {
+          FormValues.value = { hostId: '-1' };
+        }
+      }
+    );
+
     return {
       register,
       closeModal,
-      FormValues
+      FormValues,
+      isModalVisible 
     };
   },
 });
 </script>
 
 <style scoped>
-/* 模态框容器 - 强制100vh高度 */
 .server-detail-modal {
   height: 100vh !important;
   max-height: 100vh !important;
 }
 
-/* 整体容器 - 100vh高度，上下布局 */
 .server-detail-container {
   display: flex;
   flex-direction: column;
@@ -82,21 +95,20 @@ export default defineComponent({
   overflow: hidden;
 }
 
-/* 上半部分 - 精确50%高度，左右分栏 */
 .server-info-top {
   display: flex;
   gap: 12px;
-  height: calc(50% - 4px); /* 减去gap的一半，保证总高度精准50% */
+  height: calc(50% - 4px); 
   min-height: 0;
 }
 
-/* 下半部分 - 精确50%高度 */
+
 .server-info-bottom {
-  height: calc(50% - 4px); /* 减去gap的一半，保证总高度精准50% */
+  height: calc(50% - 4px);
   min-height: 0;
 }
 
-/* 左侧容器 - 30%宽度，满高 */
+
 .server-info-left {
   width: 30%;
   flex-shrink: 0;
@@ -104,7 +116,7 @@ export default defineComponent({
   min-height: 0;
 }
 
-/* 右侧容器 - 70%宽度，满高 */
+
 .server-info-right {
   width: 70%;
   flex-grow: 1;
@@ -112,25 +124,24 @@ export default defineComponent({
   min-height: 0;
 }
 
-/* 卡片容器样式 - 美化UI */
+
 .card-container {
   background: #ffffff;
   border-radius: 8px;
   padding: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   transition: box-shadow 0.2s ease;
-  overflow: hidden; /* 关键修改：禁用滚动，超出内容直接隐藏 */
+  overflow: hidden;
 }
 
 .card-container:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-/* 分隔线样式 */
 .divider {
   height: 1px;
   background-color: #e5e6eb;
   width: 100%;
   margin: 0;
 }
-</style>
+</style>