style: Optimize the container details page style (#10791)

frontend/src/views/container/container/inspect/index.vue

@@ -1,10 +1,8 @@
 <template>
     <DrawerPro v-model="visible" :header="$t('commons.button.view')" size="large" @close="handleClose">
         <el-tabs v-model="activeTab" type="border-card">
-            <!-- 概览 Overview -->
             <el-tab-pane :label="$t('menu.container')" name="overview">
-                <el-card shadow="never" class="mb-2.5">
+                <el-descriptions :column="1" border :title="$t('home.baseInfo')">
-                    <el-descriptions :column="1" border>
                     <el-descriptions-item :label="$t('commons.table.name')">
                         <el-text>{{ inspectData?.Name?.substring(1) || '-' }}</el-text>
                         <CopyButton :content="inspectData?.Name || ''" />
@@ -29,38 +27,30 @@
                         {{ formatDate(inspectData?.State?.FinishedAt) }}
                     </el-descriptions-item>
                     <el-descriptions-item :label="$t('container.restartPolicy')">
-                            <el-tag>{{ inspectData?.HostConfig?.RestartPolicy?.Name }}</el-tag>
+                        {{ getRestartPolicy() }}
                     </el-descriptions-item>
                     <el-descriptions-item :label="$t('commons.table.status')">
                         <el-tag :type="getStatusType(inspectData?.State?.Status)">
                             {{ inspectData?.State?.Status }}
                             {{
-                                    inspectData?.State?.Health?.Status
+                                inspectData?.State?.Health?.Status ? '(' + inspectData?.State?.Health?.Status + ')' : ''
-                                        ? '(' + inspectData?.State?.Health?.Status + ')'
-                                        : ''
                             }}
                         </el-tag>
                     </el-descriptions-item>
                 </el-descriptions>
-                </el-card>
+
-                <el-card shadow="never" class="mb-2.5">
+                <el-descriptions class="mt-4" :column="1" border :title="$t('container.command')">
-                    <template #header>
-                        <span class="font-semibold">{{ $t('container.command') }}</span>
-                    </template>
-                    <el-descriptions :column="1" border>
                     <el-descriptions-item :label="$t('container.command')">
                         <div v-if="inspectData?.Config?.Cmd?.length">
-                                {{ inspectData?.Config?.Cmd.join(' ') }}
+                            <el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Cmd" :key="index">
+                                {{ entry }}
+                            </el-tag>
                         </div>
                         <span v-else>-</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="ENTRYPONT">
                         <div v-if="inspectData?.Config?.Entrypoint?.length">
-                                <el-tag
+                            <el-tag type="info" v-for="(entry, index) in inspectData?.Config?.Entrypoint" :key="index">
-                                    v-for="(entry, index) in inspectData?.Config?.Entrypoint"
-                                    :key="index"
-                                    class="mr-1 mb-1"
-                                >
                                 {{ entry }}
                             </el-tag>
                         </div>
@@ -70,13 +60,9 @@
                         {{ inspectData?.Config?.WorkingDir || '-' }}
                     </el-descriptions-item>
                 </el-descriptions>
-                </el-card>
 
-                <el-card shadow="never" class="mb-2.5">
+                <span class="envTitle">{{ $t('container.env') }}</span>
-                    <template #header>
+                <el-collapse accordion :title="$t('container.env')">
-                        <span class="font-semibold">{{ $t('container.env') }}</span>
-                    </template>
-                    <el-collapse accordion>
                     <el-collapse-item v-for="(env, index) in inspectData?.Config?.Env" :key="index" :name="index">
                         <template #title>
                             <el-text class="text-sm">{{ getEnvKey(env) }}</el-text>
@@ -86,18 +72,12 @@
                     </el-collapse-item>
                 </el-collapse>
                 <el-empty v-if="!inspectData?.Config?.Env?.length" :description="$t('commons.msg.noData')" />
-                </el-card>
             </el-tab-pane>
 
-            <!-- 网络 Network -->
             <el-tab-pane :label="$t('container.network')" name="network">
-                <el-card shadow="never" class="mb-2.5">
+                <el-descriptions :column="1" border :title="$t('home.baseInfo')">
-                    <template #header>
-                        <span class="font-semibold">{{ $t('container.network') }}</span>
-                    </template>
-                    <el-descriptions :column="1" border>
                     <el-descriptions-item :label="$t('container.networkName')">
-                            <el-tag>{{ inspectData?.HostConfig?.NetworkMode }}</el-tag>
+                        {{ inspectData?.HostConfig?.NetworkMode }}
                     </el-descriptions-item>
                     <el-descriptions-item :label="$t('home.hostname')">
                         {{ inspectData?.Config?.Hostname }}
@@ -105,24 +85,17 @@
                     <el-descriptions-item label="Domain">
                         {{ inspectData?.Config?.Domainname || '-' }}
                     </el-descriptions-item>
-                    </el-descriptions>
+                    <el-descriptions-item :label="$t('commons.table.port')">
-                    <el-table :data="getPortBindings()" border class="mt-2">
+                        <div v-for="item of getPortBindings()" :key="item">
-                        <el-table-column :label="$t('commons.table.port')">
+                            <span>{{ item.hostIp }}:{{ item.hostPort }}</span>
-                            <template #default="{ row }">
-                                <div class="flex items-center justify-between">
-                                    <span>{{ row.hostIp }}:{{ row.hostPort }}</span>
                             <span class="mx-2">→</span>
-                                    <span>{{ row.containerPort }}</span>
+                            <span>{{ item.containerPort }}</span>
                         </div>
-                            </template>
+                    </el-descriptions-item>
-                        </el-table-column>
+                </el-descriptions>
-                    </el-table>
-                </el-card>
 
-                <el-card shadow="never" class="mb-2.5">
+                <div v-for="(network, name) in inspectData?.NetworkSettings?.Networks" :key="name" class="mb-4 mt-4">
-                    <div v-for="(network, name) in inspectData?.NetworkSettings?.Networks" :key="name" class="mb-4">
+                    <el-descriptions :column="2" border :title="name">
-                        <div class="text-base font-semibold mb-2">{{ name }}</div>
-                        <el-descriptions :column="2" border>
                         <el-descriptions-item label="Network ID">
                             <el-text class="text-xs">{{ network?.NetworkID?.substring(0, 12) }}</el-text>
                         </el-descriptions-item>
@@ -143,19 +116,15 @@
                         </el-descriptions-item>
                     </el-descriptions>
                 </div>
-                </el-card>
             </el-tab-pane>
 
-            <!-- 存储 Storage -->
             <el-tab-pane :label="$t('container.volume')" name="storage">
-                <el-card shadow="never" class="mb-2.5">
-                    <template #header>
-                        <span class="font-semibold">{{ $t('container.mountpoint') }}</span>
-                    </template>
                 <el-table :data="inspectData?.Mounts" border>
                     <el-table-column :label="$t('commons.table.type')" width="100">
                         <template #default="{ row }">
-                                <el-tag size="small">{{ row.Type }}</el-tag>
+                            <el-tag size="small">
+                                {{ row.Type === 'bind' ? $t('container.volumeOption') : $t('container.hostOption') }}
+                            </el-tag>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('container.hostOption')" show-overflow-tooltip>
@@ -171,33 +140,17 @@
                             <span v-else>-</span>
                         </template>
                     </el-table-column>
-                        <el-table-column
+                    <el-table-column :label="$t('container.volumeOption')" prop="Destination" show-overflow-tooltip />
-                            :label="$t('container.volumeOption')"
-                            prop="Destination"
-                            show-overflow-tooltip
-                        />
                     <el-table-column :label="$t('container.tag')" width="80" align="center">
                         <template #default="{ row }">
-                                <el-tag :type="row.RW ? 'success' : 'warning'" size="small">
                             {{ row.RW ? $t('container.modeRW') : $t('container.modeR') }}
-                                </el-tag>
                         </template>
                     </el-table-column>
                 </el-table>
-                </el-card>
             </el-tab-pane>
 
             <el-tab-pane :label="$t('commons.button.view')" name="view">
-                <el-card shadow="never" class="mb-2.5">
+                <CodemirrorPro v-model="rawJson" :height-diff="240" :disabled="true" mode="json" />
-                    <template #header>
-                        <div class="flex items-center justify-between">
-                            <span class="font-semibold">{{ $t('commons.button.view') }}</span>
-                        </div>
-                    </template>
-                    <div>
-                        <CodemirrorPro v-model="rawJson" :height-diff="200" :disabled="true" mode="json" />
-                    </div>
-                </el-card>
             </el-tab-pane>
         </el-tabs>
 
@@ -213,6 +166,7 @@
 import { ref } from 'vue';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import { routerToFileWithPath } from '@/utils/router';
+import i18n from '@/lang';
 
 const visible = ref(false);
 const activeTab = ref('overview');
@@ -304,6 +258,21 @@ const getEnvValue = (env: string): string => {
     return index > 0 ? env.substring(index + 1) : '';
 };
 
+const getRestartPolicy = () => {
+    switch (inspectData.value?.HostConfig?.RestartPolicy?.Name) {
+        case 'no':
+            return i18n.global.t('container.no');
+        case 'always':
+            return i18n.global.t('container.always');
+        case 'on-failure':
+            return i18n.global.t('container.onFailure');
+        case 'unless-stopped':
+            return i18n.global.t('container.unlessStopped');
+        default:
+            return '-';
+    }
+};
+
 const handleJumpToFile = (path: string) => {
     if (path) {
         routerToFileWithPath(path);
@@ -320,16 +289,16 @@ defineExpose({
     word-break: break-all;
 }
 
-:deep(.el-card__header) {
-    padding: 12px 20px;
-}
-
 :deep(.el-descriptions__label) {
     width: 180px;
-    font-weight: 500;
+    background-color: transparent !important;
 }
 
-:deep(.el-table) {
+.envTitle {
-    font-size: 13px;
+    font-size: 16px;
+    color: var(--el-text-color-primary);
+    margin-top: 20px;
+    margin-bottom: 16px;
+    display: block;
 }
 </style>