feat: 容器名称修改增加来源判断 (#3390)

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

frontend/src/lang/modules/tw.ts

@@ -561,6 +561,7 @@ const message = {
         cpuShareHelper: '容器默認份額為 1024 個 CPU，增大可使當前容器獲得更多的 CPU 時間',
 
         containerFromAppHelper: '檢測到該容器來源於應用商店，應用操作可能會導致當前編輯失效',
+        containerFromAppHelper1: '在已安裝應用程式列表點擊 `參數` 按鈕，進入編輯頁面即可修改容器名稱。',
         command: '命令',
         console: '控製臺交互',
         tty: '偽終端 ( -t )',

frontend/src/lang/modules/zh.ts

@@ -562,6 +562,7 @@ const message = {
         cpuShareHelper: '容器默认份额为 1024 个 CPU，增大可使当前容器获得更多的 CPU 时间',
 
         containerFromAppHelper: '检测到该容器来源于应用商店，应用操作可能会导致当前编辑失效',
+        containerFromAppHelper1: '在已安装应用列表点击 `参数` 按钮，进入编辑页面即可修改容器名称。',
         command: '命令',
         console: '控制台交互',
         tty: '伪终端 ( -t )',

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-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
-                        <el-input clearable v-model.trim="dialogData.rowData!.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: '',