From fd14f53cb94eb15d40e7379fe73f32bce200e6e0 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 25 Nov 2025 18:51:18 +0800
Subject: [PATCH] style: Adjust container network details style (#11072)

---
 .../container/container/inspect/index.vue     | 12 +++++++--
 .../views/container/network/detail/index.vue  | 27 ++++++++++---------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/container/container/inspect/index.vue b/frontend/src/views/container/container/inspect/index.vue
index 4da5765b2..902e4b5b2 100644
--- a/frontend/src/views/container/container/inspect/index.vue
+++ b/frontend/src/views/container/container/inspect/index.vue
@@ -42,7 +42,7 @@
 
                 <el-descriptions class="mt-4" :column="1" border :title="$t('container.command')">
                     <el-descriptions-item :label="$t('container.command')">
-                        <div v-if="inspectData?.Config?.Cmd?.length">
+                        <div v-if="inspectData?.Config?.Cmd?.length" class="tag-list">
                             <el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Cmd" :key="index">
                                 {{ entry }}
                             </el-tag>
@@ -50,7 +50,7 @@
                         <span v-else>-</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="ENTRYPONT">
-                        <div v-if="inspectData?.Config?.Entrypoint?.length">
+                        <div v-if="inspectData?.Config?.Entrypoint?.length" class="tag-list">
                             <el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Entrypoint" :key="index">
                                 {{ entry }}
                             </el-tag>
@@ -285,4 +285,12 @@ defineExpose({
     margin-bottom: 16px;
     display: block;
 }
+
+.tag-list {
+    .el-tag {
+        & ~ .el-tag {
+            margin-left: 5px;
+        }
+    }
+}
 </style>
diff --git a/frontend/src/views/container/network/detail/index.vue b/frontend/src/views/container/network/detail/index.vue
index fc3bb6ce7..7d3df1c1b 100644
--- a/frontend/src/views/container/network/detail/index.vue
+++ b/frontend/src/views/container/network/detail/index.vue
@@ -14,6 +14,12 @@
                     <el-descriptions-item :label="$t('container.driver')">
                         {{ networkData?.Driver || '-' }}
                     </el-descriptions-item>
+                    <el-descriptions-item
+                        v-if="networkData?.Options?.parent"
+                        :label="$t('container.parentNetworkCard')"
+                    >
+                        {{ networkData?.Options?.parent }}
+                    </el-descriptions-item>
                     <el-descriptions-item :label="$t('commons.table.createdAt')">
                         {{ formatDate(networkData?.Created) }}
                     </el-descriptions-item>
@@ -39,18 +45,15 @@
                         :label="$t('container.subnet') + (index > 0 ? ' ' + (index + 1) : '')"
                     >
                         <div v-if="config">
-                            <div v-if="config.Subnet">
-                                <el-text class="mr-2">{{ $t('container.subnet') }}:</el-text>
-                                <el-tag>{{ config.Subnet }}</el-tag>
-                            </div>
-                            <div v-if="config.Gateway" class="mt-1">
-                                <el-text class="mr-2">{{ $t('container.gateway') }}:</el-text>
-                                <el-tag>{{ config.Gateway }}</el-tag>
-                            </div>
-                            <div v-if="config.IPRange" class="mt-1">
-                                <el-text class="mr-2">{{ $t('container.scope') }}:</el-text>
-                                <el-tag>{{ config.IPRange }}</el-tag>
-                            </div>
+                            <el-tag v-if="config.Subnet" type="info" :label="$t('container.subnet')">
+                                {{ $t('container.subnet') }}: {{ config.Subnet }}
+                            </el-tag>
+                            <el-tag class="ml-2" v-if="config.Gateway" type="info" :label="$t('container.gateway')">
+                                {{ $t('container.gateway') }}: {{ config.Gateway }}
+                            </el-tag>
+                            <el-tag class="ml-2" v-if="config.IPRange" type="info" :label="$t('container.scope')">
+                                {{ $t('container.scope') }}: {{ config.IPRange }}
+                            </el-tag>
                         </div>
                         <span v-else>-</span>
                     </el-descriptions-item>