fix: 容器镜像升级样式调整 (#1531)

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?',
 

frontend/src/lang/modules/tw.ts

@@ -484,6 +484,7 @@ const message = {
         upgradeWarning2: '升級操作需要重建容器，任何未持久化的數據將會丟失，是否繼續？',
         oldImage: '當前鏡像',
         targetImage: '目標鏡像',
+        targetImageHelper: '請輸入目標鏡像版本',
         appHelper: '該容器來源於應用商店，升級可能導致該服務不可用，是否繼續？',
 
         server: '服務器',

frontend/src/lang/modules/zh.ts

@@ -484,6 +484,7 @@ const message = {
         upgradeWarning2: '升级操作需要重建容器，任何未持久化的数据将会丢失，是否继续？',
         oldImage: '当前镜像',
         targetImage: '目标镜像',
+        targetImageHelper: '请输入目标镜像版本',
         appHelper: '该容器来源于应用商店，升级可能导致该服务不可用，是否继续？',
 
         server: '服务器',

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;
 };