From a0ceb62372779e3ab6b15eb5f755be4c18b12122 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 4 Jul 2023 19:24:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=B9=E5=99=A8=E9=95=9C=E5=83=8F?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20(#1531?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  1 +
 frontend/src/lang/modules/tw.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../container/container/upgrade/index.vue     | 27 ++++++++++++++-----
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b4c0e77ae..524ff0e33 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -495,6 +495,7 @@ const message = {
             'The upgrade operation requires rebuilding the container, and any non-persistent data will be lost. Do you want to continue?',
         oldImage: 'Current image',
         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?',
 
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 4a849a5c5..2c6acb97c 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -484,6 +484,7 @@ const message = {
         upgradeWarning2: '升級操作需要重建容器，任何未持久化的數據將會丟失，是否繼續？',
         oldImage: '當前鏡像',
         targetImage: '目標鏡像',
+        targetImageHelper: '請輸入目標鏡像版本',
         appHelper: '該容器來源於應用商店，升級可能導致該服務不可用，是否繼續？',
 
         server: '服務器',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 5b231308e..825309e45 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -484,6 +484,7 @@ const message = {
         upgradeWarning2: '升级操作需要重建容器，任何未持久化的数据将会丢失，是否继续？',
         oldImage: '当前镜像',
         targetImage: '目标镜像',
+        targetImageHelper: '请输入目标镜像版本',
         appHelper: '该容器来源于应用商店，升级可能导致该服务不可用，是否继续？',
 
         server: '服务器',
diff --git a/frontend/src/views/container/container/upgrade/index.vue b/frontend/src/views/container/container/upgrade/index.vue
index a612e8fe7..d365a889e 100644
--- a/frontend/src/views/container/container/upgrade/index.vue
+++ b/frontend/src/views/container/container/upgrade/index.vue
@@ -15,12 +15,27 @@
                 />
                 <el-form @submit.prevent ref="formRef" v-loading="loading" :model="form" label-position="top">
                     <el-form-item :label="$t('container.oldImage')" prop="oldImage">
-                        <el-tag>{{ form.imageName }}:{{ form.oldTag }}</el-tag>
+                        <el-tooltip placement="top-start" :content="form.imageName" v-if="form.imageName.length > 50">
+                            <el-tag>{{ form.imageName.substring(0, 50) }}...:{{ form.oldTag }}</el-tag>
+                        </el-tooltip>
+                        <el-tag v-else>{{ form.imageName }}:{{ form.oldTag }}</el-tag>
                     </el-form-item>
-                    <el-form-item :label="$t('container.targetImage')" prop="newTag" :rules="Rules.requiredInput">
-                        <el-input v-model="form.newTag">
-                            <template #prefix>{{ form.imageName }}:</template>
-                        </el-input>
+                    <el-form-item prop="newTag" :rules="Rules.requiredInput">
+                        <template #label>
+                            <el-tooltip
+                                placement="top-start"
+                                :content="form.imageName"
+                                v-if="form.imageName.length > 40"
+                            >
+                                <span>
+                                    {{ $t('container.targetImage') + ' (' + form.imageName.substring(0, 40) + '...)' }}
+                                </span>
+                            </el-tooltip>
+                            <span v-else>
+                                {{ $t('container.targetImage') + ' (' + form.imageName + ')' }}
+                            </span>
+                        </template>
+                        <el-input v-model="form.newTag" :placeholder="$t('container.targetImageHelper')" />
                         <span class="input-help">{{ $t('container.upgradeHelper') }}</span>
                     </el-form-item>
                 </el-form>
@@ -72,7 +87,7 @@ const acceptParams = (props: DialogProps): void => {
     form.name = props.container;
     form.imageName = props.image.indexOf(':') !== -1 ? props.image.split(':')[0] : props.image;
     form.oldTag = props.image.indexOf(':') !== -1 ? props.image.split(':')[1] : 'latest';
-    form.newTag = '';
+    form.newTag = form.oldTag;
     form.fromApp = props.fromApp;
     drawerVisiable.value = true;
 };