From f50972a0e33a9acf28aaeed3aac7c4b3590d7f4c Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 19 Dec 2023 22:02:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=B9=E5=99=A8=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A2=9E=E5=8A=A0=E6=9D=A5=E6=BA=90=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=20(#3390)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  2 ++
 frontend/src/lang/modules/tw.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../container/container/operate/index.vue     | 29 +++++++++++++++++--
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 8fc96540a..1a35f171e 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -577,6 +577,8 @@ const message = {
 
         containerFromAppHelper:
             'Detected that this container originates from the app store. App operations may cause current edits to be invalidated.',
+        containerFromAppHelper1:
+            'Click the `Settings` button in the installed applications list to enter the editing page and modify the container name.',
         command: 'Command',
         console: 'Console Interaction',
         tty: 'TTY (-t)',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index eab77dc3e..8004bc179 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -561,6 +561,7 @@ const message = {
         cpuShareHelper: '容器默認份額為 1024 個 CPU，增大可使當前容器獲得更多的 CPU 時間',
 
         containerFromAppHelper: '檢測到該容器來源於應用商店，應用操作可能會導致當前編輯失效',
+        containerFromAppHelper1: '在已安裝應用程式列表點擊 `參數` 按鈕，進入編輯頁面即可修改容器名稱。',
         command: '命令',
         console: '控製臺交互',
         tty: '偽終端 ( -t )',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 6d8cd24fa..83b710808 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -562,6 +562,7 @@ const message = {
         cpuShareHelper: '容器默认份额为 1024 个 CPU，增大可使当前容器获得更多的 CPU 时间',
 
         containerFromAppHelper: '检测到该容器来源于应用商店，应用操作可能会导致当前编辑失效',
+        containerFromAppHelper1: '在已安装应用列表点击 `参数` 按钮，进入编辑页面即可修改容器名称。',
         command: '命令',
         console: '控制台交互',
         tty: '伪终端 ( -t )',
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index 32fbe88d4..f27875b2c 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -27,12 +27,30 @@
                     <el-alert
                         v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
                         :title="$t('container.containerFromAppHelper')"
-                        class="common-prompt"
                         :closable="false"
                         type="error"
                     />
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input clearable v-model.trim="dialogData.rowData!.name" />
+                    <el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
+                        <el-input
+                            :disabled="isFromApp(dialogData.rowData!)"
+                            clearable
+                            v-model.trim="dialogData.rowData!.name"
+                        />
+                        <div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)">
+                            <span class="input-help">
+                                {{ $t('container.containerFromAppHelper1') }}
+                                <el-button
+                                    style="margin-left: -5px"
+                                    size="small"
+                                    text
+                                    type="primary"
+                                    @click="goRouter()"
+                                >
+                                    <el-icon><Position /></el-icon>
+                                    {{ $t('firewall.quickJump') }}
+                                </el-button>
+                            </span>
+                        </div>
                     </el-form-item>
                     <el-form-item :label="$t('container.image')" prop="image">
                         <el-checkbox v-model="dialogData.rowData!.imageInput" :label="$t('container.input')" />
@@ -278,6 +296,7 @@ import {
 import { Container } from '@/api/interface/container';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { checkIpV4V6, checkPort } from '@/utils/util';
+import router from '@/routers';
 
 const loading = ref(false);
 interface DialogProps {
@@ -374,6 +393,10 @@ const handlePortsDelete = (index: number) => {
     dialogData.value.rowData!.exposedPorts.splice(index, 1);
 };
 
+const goRouter = async () => {
+    router.push({ name: 'AppInstalled' });
+};
+
 const handleVolumesAdd = () => {
     let item = {
         sourceDir: '',