From 48455f4ec1ab417f2d0253612d965ac02912cee3 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Mon, 16 Feb 2026 16:21:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=AE=B9=E5=99=A8=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/components/info/DockerInfo.vue   | 201 ++++++++++--------
 1 file changed, 117 insertions(+), 84 deletions(-)

diff --git a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/DockerInfo.vue b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/DockerInfo.vue
index ae44c24d..5b8a4bac 100644
--- a/web-vue/packages/core/layouts/views/desktop/analysis/components/info/DockerInfo.vue
+++ b/web-vue/packages/core/layouts/views/desktop/analysis/components/info/DockerInfo.vue
@@ -23,7 +23,11 @@
         <div v-if="loading" class="loading-placeholder">
           <a-skeleton :paragraph="{ rows: 3 }" style="width: 100%" active />
         </div>
-        <div class="container-card-list">
+        <!-- 无数据提示 -->
+        <div v-else-if="filteredContainerList.length === 0" class="no-result">
+          暂无容器数据
+        </div>
+        <div v-else class="container-card-list">
           <a-card
             v-for="item in filteredContainerList"
             :key="item.id"
@@ -46,6 +50,7 @@
                   <span class="mem-text">内存: {{ item.memUsage }}%</span>
                 </div>
               </div>
+              <!-- 修改：统一info-item的布局结构 -->
               <div class="detail-info-group">
                 <div class="info-item">
                   <span class="label">容器ID：</span>
@@ -71,15 +76,15 @@
                     <span class="value">{{ item.status || '无' }}</span>
                   </Tooltip>
                 </div>
-              </div>
-			  <div class="action-divider"></div>
-			  <div class="action-button-section">
-				<a-space size="middle">
-				  <a-button size="small" @click="handleRestart(item)">重启</a-button>
-				  <a-button type="error" size="small" @click="handleStop(item)" :disabled="item.state == '0'" > 停止</a-button>
-				  <a-button type="success" size="small" @click="handleStart(item)" :disabled="item.state == '1'" >启动</a-button>
-				</a-space>
-			  </div>
+              </div>
+              <div class="action-divider"></div>
+              <div class="action-button-section">
+                <a-space size="middle">
+                  <a-button size="small" @click="handleRestart(item)">重启</a-button>
+                  <a-button type="error" size="small" @click="handleStop(item)" :disabled="item.state == '0'" > 停止</a-button>
+                  <a-button type="success" size="small" @click="handleStart(item)" :disabled="item.state == '1'" >启动</a-button>
+                </a-space>
+              </div>
             </div>
           </a-card>
         </div>
@@ -90,11 +95,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue';
-import { Tag, Tabs, TabPane, Tooltip, InputSearch } from 'ant-design-vue'; // 显式导入InputSearch
+import { Tag, Tabs, TabPane, Tooltip, InputSearch } from 'ant-design-vue';
 import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
 import { useMessage } from '@jeesite/core/hooks/web/useMessage';
-import { DockerInfo , bizDockerInfoList, bizDockerRestart, bizDockerStart, bizDockerStop } from '@jeesite/biz/api/biz/myWork';
-import { message, Modal } from 'ant-design-vue';
+import { DockerInfo , bizDockerInfoList, bizDockerRestart, bizDockerStart, bizDockerStop } from '@jeesite/biz/api/biz/myWork';
+import { Modal } from 'ant-design-vue';
 
 export default defineComponent({
   components: { BasicModal, Tag, Tabs, TabPane, Tooltip, InputSearch },
@@ -112,8 +117,8 @@ export default defineComponent({
       searchKey.value = value;
     };
 
-    const onSearch = async () => {
-	  await getDockerList();
+    // 修改：重构搜索逻辑，分离过滤和数据获取
+    const filterContainerList = () => {
       if (!searchKey.value.trim()) {
         filteredContainerList.value = [...containerList.value];
         return;
@@ -127,6 +132,11 @@ export default defineComponent({
       filteredContainerList.value = filtered;
     };
 
+    const onSearch = async () => {
+      await getDockerList();
+      filterContainerList(); // 数据获取后再过滤
+    };
+
     const getDockerList = async () => {
       try {
         loading.value = true;
@@ -143,9 +153,9 @@ export default defineComponent({
       } finally {
         loading.value = false; 
       }
-    };
-	
-	const handleRestart = async (item: DockerInfo) => {
+    };
+	
+	const handleRestart = async (item: DockerInfo) => {
 	  Modal.confirm({
 		title: '温馨提示',
 		content: '您确定要重启当前容器吗?',
@@ -154,64 +164,76 @@ export default defineComponent({
 		okType: 'danger',
 		width: 420,
 		onOk: async () => {
-		  try {
-			  const res = await bizDockerRestart(item);
-			  createMessage.success(res.message);
-			  onSearch();
-		  } catch (error) {
+		  try {
+              loading.value = true; 
+			  const res = await bizDockerRestart(item);
+			  createMessage.success(res.message || '重启成功');
+			  await getDockerList(); 
+			  filterContainerList(); 
+		  } catch (error: any) {
 			console.error('重启容器失败:', error);
-		  }
+		  } finally {
+            loading.value = false;
+          }
 		},
 		onCancel: () => {
 		  createMessage.info('已取消重启操作');
 		}
-	  });
-	};
-
-	const handleStop = async (item: DockerInfo) => {
-		Modal.confirm({
-			title: '温馨提示',
-			content: '您确定要停止当前容器吗?',
-			okText: '确认',
-			cancelText: '取消',
-			okType: 'danger',
-			width: 420,
-			onOk: async () => {
-			  try {
-				  const res = await bizDockerStop(item);
-				  createMessage.success(res.message);
-				  onSearch();
-			  } catch (error) {
-				console.error('停止容器失败:', error);
-			  }
-			},
-			onCancel: () => {
-			  createMessage.info('已取消停止操作');
-			}
-		});
-	};
-
-	const handleStart = async (item: DockerInfo) => {
-	  Modal.confirm({
-			title: '温馨提示',
-			content: '您确定要启动当前容器吗?',
-			okText: '确认',
-			cancelText: '取消',
-			okType: 'danger',
-			width: 420,
-			onOk: async () => {
-			  try {
-				  const res = await bizDockerStart(item);
-				  createMessage.success(res.message);
-				  onSearch();
-			  } catch (error) {
-				console.error('启动容器失败:', error);
-			  }
-			},
-			onCancel: () => {
-			  createMessage.info('已取消启动操作');
-			}
-		});
+	  });
+	};
+
+	const handleStop = async (item: DockerInfo) => {
+		Modal.confirm({
+			title: '温馨提示',
+			content: '您确定要停止当前容器吗?',
+			okText: '确认',
+			cancelText: '取消',
+			okType: 'danger',
+			width: 420,
+			onOk: async () => {
+			  try {
+                  loading.value = true;
+				  const res = await bizDockerStop(item);
+				  createMessage.success(res.message || '停止成功');
+				  await getDockerList();
+				  filterContainerList();
+			  } catch (error: any) {
+				console.error('停止容器失败:', error);
+			  } finally {
+				loading.value = false; 
+			  }
+			},
+			onCancel: () => {
+			  createMessage.info('已取消停止操作');
+			}
+		});
+	};
+
+	const handleStart = async (item: DockerInfo) => {
+	  Modal.confirm({
+			title: '温馨提示',
+			content: '您确定要启动当前容器吗?',
+			okText: '确认',
+			cancelText: '取消',
+			okType: 'danger',
+			width: 420,
+			onOk: async () => {
+			  try {
+                  loading.value = true;
+				  const res = await bizDockerStart(item);
+				  createMessage.success(res.message || '启动成功');
+				  await getDockerList(); 
+				  filterContainerList();
+			  } catch (error: any) {
+				console.error('启动容器失败:', error);
+			  } finally {
+				loading.value = false;
+			  }
+			},
+			onCancel: () => {
+			  createMessage.info('已取消启动操作');
+			}
+		});
 	};
 
     const [register, { closeModal }] = useModalInner(async (data: any) => {
@@ -232,9 +254,9 @@ export default defineComponent({
       loading, 
       searchKey, 
       containerList,
-      filteredContainerList,
-	  handleRestart,
-	  handleStop,
+      filteredContainerList,
+	  handleRestart,
+	  handleStop,
 	  handleStart,
     };
   },
@@ -242,7 +264,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-/* 样式部分保持不变 */
+/* 样式部分保持不变，重点修改info-item相关样式 */
 .container-outer-wrapper {
   display: flex;
   flex-direction: column;
@@ -342,43 +364,48 @@ export default defineComponent({
 .cpu-text { color: #2f54eb; font-weight: 500; }
 .mem-text { color: #1890ff; font-weight: 500; }
 
+/* 修改：重构detail-info-group和info-item样式，确保每个item宽度一致 */
 .detail-info-group {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 24px; /* 增加间距，提升美观度 */
   font-size: 14px;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  white-space: nowrap;
+  flex-wrap: wrap; /* 改为wrap，适配小屏幕 */
+  padding: 4px 0;
 }
 
 .info-item {
   display: flex;
   align-items: center;
+  width: 220px; /* 统一宽度 */
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .info-item .label {
   color: #667085;
   margin-right: 4px;
+  width: 70px; /* 标签固定宽度 */
+  flex-shrink: 0;
+  text-align: right;
 }
 
 .info-item .value {
   color: #344054;
-  max-width: 200px;
+  width: 140px; /* 值区域固定宽度 */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
-}
-
+}
+
 .action-divider {
   width: 100%;
   height: 1px;
   background-color: #f0f7fb;
   margin: 4px 0;
-}
-
+}
+
 .action-button-section {
   display: flex;
   justify-content: flex-end;
@@ -410,5 +437,11 @@ export default defineComponent({
     align-items: flex-start;
     gap: 8px;
   }
+  .info-item {
+    width: 100%; /* 移动端占满宽度 */
+  }
+  .info-item .label {
+    text-align: left; /* 移动端标签左对齐 */
+  }
 }
 </style>
\ No newline at end of file