fix: 容器列表端口显示优化 (#2188)

Refs #2181

backend/app/service/container.go

@@ -147,14 +147,7 @@ func (u *ContainerService) Page(req dto.PageContainer) (int64, interface{}, erro
 			IsFromApp = true
 		}
 
-		var ports []string
+		ports := simplifyPort(item.Ports)
-		for _, port := range item.Ports {
-			itemPortStr := fmt.Sprintf("%v/%s", port.PrivatePort, port.Type)
-			if port.PublicPort != 0 {
-				itemPortStr = fmt.Sprintf("%v->%v/%s", port.PublicPort, port.PrivatePort, port.Type)
-			}
-			ports = append(ports, itemPortStr)
-		}
 		backDatas[i] = dto.ContainerInfo{
 			ContainerID:   item.ID,
 			CreateTime:    time.Unix(item.Created, 0).Format("2006-01-02 15:04:05"),
@@ -937,3 +930,57 @@ func loadVolumeBinds(binds []string) []dto.VolumeHelper {
 	}
 	return datas
 }
+
+func simplifyPort(ports []types.Port) []string {
+	var datas []string
+	if len(ports) == 0 {
+		return datas
+	}
+	if len(ports) == 1 {
+		itemPortStr := fmt.Sprintf("%v/%s", ports[0].PrivatePort, ports[0].Type)
+		if ports[0].PublicPort != 0 {
+			itemPortStr = fmt.Sprintf("%v->%v/%s", ports[0].PublicPort, ports[0].PrivatePort, ports[0].Type)
+		}
+		datas = append(datas, itemPortStr)
+		return datas
+	}
+
+	sort.Slice(ports, func(i, j int) bool {
+		return ports[i].PrivatePort < ports[j].PrivatePort
+	})
+	start := ports[0]
+
+	for i := 1; i < len(ports); i++ {
+		if ports[i].PrivatePort != ports[i-1].PrivatePort+1 || ports[i].IP != ports[i-1].IP || ports[i].PublicPort != ports[i-1].PublicPort+1 || ports[i].Type != ports[i-1].Type {
+			if ports[i-1].PrivatePort == start.PrivatePort {
+				itemPortStr := fmt.Sprintf("%s:%v/%s", start.IP, start.PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v->%v/%s", start.IP, start.PublicPort, start.PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			} else {
+				itemPortStr := fmt.Sprintf("%s:%v-%v/%s", start.IP, start.PrivatePort, ports[i-1].PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v-%v->%v-%v/%s", start.IP, start.PublicPort, ports[i-1].PublicPort, start.PrivatePort, ports[i-1].PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			}
+			start = ports[i]
+		} else if i == len(ports)-1 {
+			if ports[i].PrivatePort == start.PrivatePort {
+				itemPortStr := fmt.Sprintf("%s:%v/%s", start.IP, start.PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v->%v/%s", start.IP, start.PublicPort, start.PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			} else {
+				itemPortStr := fmt.Sprintf("%s:%v-%v/%s", start.IP, start.PrivatePort, ports[i].PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v-%v->%v-%v/%s", start.IP, start.PublicPort, ports[i].PublicPort, start.PrivatePort, ports[i].PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			}
+		}
+	}
+	return datas
+}

frontend/src/lang/modules/en.ts

@@ -78,7 +78,6 @@ const message = {
             interval: 'Interval',
             user: 'User',
             title: 'Title',
-            network: 'Network',
             port: 'Port',
             protocol: 'Protocol',
             tableSetting: 'Table setting',
@@ -515,6 +514,7 @@ const message = {
             'Clearing logs requires restarting the container, and this operation cannot be rolled back. Do you want to continue?',
         newName: 'New name',
         source: 'Resource rate',
+        ip: 'IP address',
         cpuShare: 'CPU Share',
         cpuShareHelper:
             'The default CPU share for a container is 1024, which can be increased to give the container more CPU time.',
@@ -532,7 +532,7 @@ const message = {
         targetImage: 'Target image',
         targetImageHelper: 'Please enter the target image version',
         appHelper:
-            'This container is sourced from the application store. Upgrading it may cause the service to be unavailable. Do you want to continue?',
+            'This container is sourced from the application store. Upgrading it may cause the service to be unavailable.',
 
         forcePull: 'forced image pull ',
         forcePullHelper: 'Ignore existing images on the server and pull again.',

frontend/src/lang/modules/tw.ts

@@ -78,7 +78,6 @@ const message = {
             interval: '耗時',
             user: '用戶',
             title: '標題',
-            network: '網絡',
             port: '端口',
             protocol: '協議',
             tableSetting: '列表設置',
@@ -501,6 +500,7 @@ const message = {
         cleanLogHelper: '清空日誌需要重啟容器，該操作無法回滾，是否繼續？',
         newName: '新名稱',
         source: '資源使用率',
+        ip: 'IP 地址',
         cpuShare: 'CPU 權重',
         cpuShareHelper: '容器默認份額為 1024 個 CPU，增大可使當前容器獲得更多的 CPU 時間',
 
@@ -515,7 +515,7 @@ const message = {
         oldImage: '當前鏡像',
         targetImage: '目標鏡像',
         targetImageHelper: '請輸入目標鏡像版本',
-        appHelper: '該容器來源於應用商店，升級可能導致該服務不可用，是否繼續？',
+        appHelper: '該容器來源於應用商店，升級可能導致該服務不可用',
 
         forcePull: '強製拉取鏡像',
         forcePullHelper: '忽略服務器已存在的鏡像，重新拉取一次',

frontend/src/lang/modules/zh.ts

@@ -78,7 +78,6 @@ const message = {
             interval: '耗时',
             user: '用户',
             title: '标题',
-            network: '网络',
             port: '端口',
             protocol: '协议',
             tableSetting: '列表设置',
@@ -501,6 +500,7 @@ const message = {
         cleanLogHelper: '清空日志需要重启容器，该操作无法回滚，是否继续？',
         newName: '新名称',
         source: '资源使用率',
+        ip: 'IP 地址',
         cpuShare: 'CPU 权重',
         cpuShareHelper: '容器默认份额为 1024 个 CPU，增大可使当前容器获得更多的 CPU 时间',
 
@@ -515,7 +515,7 @@ const message = {
         oldImage: '当前镜像',
         targetImage: '目标镜像',
         targetImageHelper: '请输入目标镜像版本',
-        appHelper: '该容器来源于应用商店，升级可能导致该服务不可用，是否继续？',
+        appHelper: '该容器来源于应用商店，升级可能导致该服务不可用',
 
         forcePull: '强制拉取镜像',
         forcePullHelper: '忽略服务器已存在的镜像，重新拉取一次',

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

@@ -83,12 +83,12 @@
                         min-width="80"
                         prop="imageName"
                     />
-                    <el-table-column :label="$t('commons.table.status')" min-width="80" prop="state" sortable fix>
+                    <el-table-column :label="$t('commons.table.status')" min-width="70" prop="state" sortable fix>
                         <template #default="{ row }">
                             <Status :key="row.state" :status="row.state"></Status>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="100" fix>
+                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="80" fix>
                         <template #default="{ row }">
                             <div v-if="row.hasLoad">
                                 <div class="source-font">CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
@@ -101,12 +101,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column
+                    <el-table-column :label="$t('container.ip')" :width="mobile ? 80 : 'auto'" min-width="70" fix>
-                        :label="$t('commons.table.network')"
-                        :width="mobile ? 80 : 'auto'"
-                        min-width="70"
-                        fix
-                    >
                         <template #default="{ row }">
                             <div v-if="row.network">
                                 <div v-for="(item, index) in row.network" :key="index">{{ item }}</div>
@@ -116,7 +111,7 @@
                     <el-table-column
                         :label="$t('commons.table.port')"
                         :width="mobile ? 260 : 'auto'"
-                        min-width="120"
+                        min-width="130"
                         prop="ports"
                         fix
                     >
@@ -124,20 +119,22 @@
                             <div v-if="row.ports">
                                 <div v-for="(item, index) in row.ports" :key="index">
                                     <div v-if="row.expand || (!row.expand && index < 3)">
-                                        <el-button
+                                        <el-tooltip :hide-after="20" :content="item" placement="top">
-                                            v-if="item.indexOf('->') !== -1"
+                                            <el-button
-                                            @click="goDashboard(item)"
+                                                v-if="item.indexOf('->') !== -1"
-                                            class="tagMargin"
+                                                @click="goDashboard(item)"
-                                            icon="Position"
+                                                class="tagMargin"
-                                            type="primary"
+                                                icon="Position"
-                                            plain
+                                                type="primary"
-                                            size="small"
+                                                plain
-                                        >
+                                                size="small"
-                                            {{ item }}
+                                            >
-                                        </el-button>
+                                                {{ item.length > 25 ? item.substring(0, 25) + '...' : item }}
-                                        <el-button v-else class="tagMargin" type="primary" plain size="small">
+                                            </el-button>
-                                            {{ item }}
+                                            <el-button v-else class="tagMargin" type="primary" plain size="small">
-                                        </el-button>
+                                                {{ item }}
+                                            </el-button>
+                                        </el-tooltip>
                                     </div>
                                 </div>
                                 <div v-if="!row.expand && row.ports.length > 3">
@@ -161,8 +158,8 @@
                         fix
                     />
                     <fu-table-operations
-                        width="300px"
+                        width="180px"
-                        :ellipsis="4"
+                        :ellipsis="2"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fix
@@ -453,12 +450,6 @@ const onOperate = async (operation: string, row: Container.ContainerInfo | null)
 };
 
 const buttons = [
-    {
-        label: i18n.global.t('commons.button.edit'),
-        click: (row: Container.ContainerInfo) => {
-            onEdit(row.containerID);
-        },
-    },
     {
         label: i18n.global.t('file.terminal'),
         disabled: (row: Container.ContainerInfo) => {
@@ -474,6 +465,12 @@ const buttons = [
             dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
         },
     },
+    {
+        label: i18n.global.t('commons.button.edit'),
+        click: (row: Container.ContainerInfo) => {
+            onEdit(row.containerID);
+        },
+    },
     {
         label: i18n.global.t('commons.button.upgrade'),
         click: (row: Container.ContainerInfo) => {

frontend/src/views/database/mysql/index.vue

@@ -10,7 +10,7 @@
                 </div>
             </el-card>
         </div>
-        <LayoutContent :title="(currentDB?.type === 'mysql' ? 'MySQL' : 'MariaDB') + $t('menu.database')">
+        <LayoutContent :title="(currentDB?.type === 'mysql' ? 'MySQL ' : 'MariaDB ') + $t('menu.database')">
             <template #app v-if="currentDB?.from === 'local'">
                 <AppStatus
                     :app-key="appKey"

frontend/src/views/database/mysql/remote/index.vue

@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent>
             <template #title>
-                <back-button name="MySQL" :header="'MySQL ' + $t('database.remoteDB')" />
+                <back-button name="MySQL" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
                 <el-row>

frontend/src/views/host/firewall/ip/operate/index.vue

@@ -4,7 +4,7 @@
             <DrawerHeader :header="title" :back="handleClose" />
         </template>
         <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
+            <el-form ref="formRef" label-position="top" @submit.prevent :model="dialogData.rowData" :rules="rules">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
                         <el-form-item :label="$t('firewall.address')" prop="address">