更新容器获取

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>
@@ -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 { 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;
@@ -155,11 +165,15 @@ export default defineComponent({
 		width: 420,
 		onOk: async () => {
 		  try {
+              loading.value = true; 
 			  const res = await bizDockerRestart(item);
-			  createMessage.success(res.message);
-			  onSearch();
-		  } catch (error) {
+			  createMessage.success(res.message || '重启成功');
+			  await getDockerList(); 
+			  filterContainerList(); 
+		  } catch (error: any) {
 			console.error('重启容器失败:', error);
+		  } finally {
+            loading.value = false;
           }
 		},
 		onCancel: () => {
@@ -178,11 +192,15 @@ export default defineComponent({
 			width: 420,
 			onOk: async () => {
 			  try {
+                  loading.value = true;
 				  const res = await bizDockerStop(item);
-				  createMessage.success(res.message);
-				  onSearch();
-			  } catch (error) {
+				  createMessage.success(res.message || '停止成功');
+				  await getDockerList();
+				  filterContainerList();
+			  } catch (error: any) {
 				console.error('停止容器失败:', error);
+			  } finally {
+				loading.value = false; 
 			  }
 			},
 			onCancel: () => {
@@ -201,11 +219,15 @@ export default defineComponent({
 			width: 420,
 			onOk: async () => {
 			  try {
+                  loading.value = true;
 				  const res = await bizDockerStart(item);
-				  createMessage.success(res.message);
-				  onSearch();
-			  } catch (error) {
+				  createMessage.success(res.message || '启动成功');
+				  await getDockerList(); 
+				  filterContainerList();
+			  } catch (error: any) {
 				console.error('启动容器失败:', error);
+			  } finally {
+				loading.value = false;
 			  }
 			},
 			onCancel: () => {
@@ -242,7 +264,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-/* 样式部分保持不变 */
+/* 样式部分保持不变，重点修改info-item相关样式 */
 .container-outer-wrapper {
   display: flex;
   flex-direction: column;
@@ -342,30 +364,35 @@ 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;
@@ -410,5 +437,11 @@ export default defineComponent({
     align-items: flex-start;
     gap: 8px;
   }
+  .info-item {
+    width: 100%; /* 移动端占满宽度 */
+  }
+  .info-item .label {
+    text-align: left; /* 移动端标签左对齐 */
+  }
 }
 </style>