style: 容器样式调整 (#6822)

Refs #6819

frontend/src/lang/modules/en.ts

@@ -575,8 +575,13 @@ const message = {
     container: {
         create: 'Create',
         edit: 'Edit container',
-        updateContainerHelper:
-            'Container editing requires rebuilding the container. Any data that has not been persisted will be lost. Do you want to continue?',
+        updateHelper1: 'Detected that this container comes from the app store. Please note the following two points:',
+        updateHelper2:
+            '1. The current modifications will not be synchronized to the installed applications in the app store.',
+        updateHelper3:
+            '2. If you modify the application on the installed page, the currently edited content will become invalid.',
+        updateHelper4:
+            'Editing the container requires rebuilding, and any non-persistent data will be lost. Do you want to continue?',
         containerList: 'Container list',
         operatorHelper: '{0} will be performed on the following container, Do you want to continue?',
         operatorAppHelper:
@@ -643,7 +648,7 @@ 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.',
+            'Click the [Param] button in the installed applications list to enter the editing page and modify the container name.',
         command: 'Command',
         console: 'Console Interaction',
         tty: 'TTY (-t)',
@@ -731,6 +736,8 @@ const message = {
         urlWarning: 'The URL prefix does not need to include http:// or https://. Please modify.',
 
         network: 'Network',
+        networkHelper:
+            'Deleting the 1panel-network container network will affect the normal use of some applications and runtime environments. Do you want to continue?',
         createNetwork: 'Create',
         networkName: 'Name',
         driver: 'Driver',

frontend/src/lang/modules/tw.ts

@@ -557,7 +557,10 @@ const message = {
     container: {
         create: '創建容器',
         edit: '編輯容器',
-        updateContainerHelper: '容器編輯需要重建容器，任何未持久化的數據將會丟失，是否繼續？',
+        updateHelper1: '檢測到該容器來源於應用商店，請注意以下兩點：',
+        updateHelper2: '1. 當前修改內容不會同步到應用商店的已安裝應用。',
+        updateHelper3: '2. 如果在已安裝頁面修改應用，當前編輯的部分內容將失效。',
+        updateHelper4: '編輯容器需要重建，任何未持久化的數據將丟失，是否繼續操作？',
         containerList: '容器列表',
         operatorHelper: '將對以下容器進行 {0} 操作，是否繼續？',
         operatorAppHelper:
@@ -619,7 +622,7 @@ const message = {
         inputIpv6: '請輸入 IPv6 地址',
 
         containerFromAppHelper: '檢測到該容器來源於應用商店，應用操作可能會導致當前編輯失效',
-        containerFromAppHelper1: '在已安裝應用程式列表點擊 `參數` 按鈕，進入編輯頁面即可修改容器名稱。',
+        containerFromAppHelper1: '在已安裝應用程式列表點擊 [參數] 按鈕，進入編輯頁面即可修改容器名稱。',
         command: '命令',
         console: '控製臺交互',
         tty: '偽終端 ( -t )',
@@ -707,6 +710,7 @@ const message = {
         urlWarning: '路徑前綴不需要添加 http:// 或 https://，請修改',
 
         network: '網絡',
+        networkHelper: '刪除 1panel-network 容器網絡將影響部分應用和運行環境的正常使用，是否繼續？',
         createNetwork: '創建網絡',
         networkName: '網絡名',
         driver: '模式',

frontend/src/lang/modules/zh.ts

@@ -559,7 +559,10 @@ const message = {
     container: {
         create: '创建容器',
         edit: '编辑容器',
-        updateContainerHelper: '容器编辑需要重建容器，任何未持久化的数据将会丢失，是否继续？',
+        updateHelper1: '检测到该容器来源于应用商店，请注意以下两点：',
+        updateHelper2: '1. 当前修改内容不会同步到应用商店的已安装应用。',
+        updateHelper3: '2. 如果在已安装页面修改应用，当前编辑的部分内容将失效。',
+        updateHelper4: '编辑容器需要重建，任何未持久化的数据将丢失，是否继续操作？',
         containerList: '容器列表',
         operatorHelper: '将对以下容器进行 {0} 操作，是否继续？',
         operatorAppHelper:
@@ -622,7 +625,7 @@ const message = {
         inputIpv6: '请输入 ipv6 地址',
 
         containerFromAppHelper: '检测到该容器来源于应用商店，应用操作可能会导致当前编辑失效',
-        containerFromAppHelper1: '在已安装应用列表点击 `参数` 按钮，进入编辑页面即可修改容器名称。',
+        containerFromAppHelper1: '在应用商店的已安装页面，点击 [参数] 按钮，进入编辑页面修改容器名称。',
         command: '命令',
         console: '控制台交互',
         tty: '伪终端 ( -t )',
@@ -709,6 +712,7 @@ const message = {
         urlWarning: '路径前缀不需要添加 http:// 或 https://, 请修改',
 
         network: '网络',
+        networkHelper: '删除 1panel-network 容器网络将影响部分应用和运行环境的正常使用，是否继续？',
         createNetwork: '创建网络',
         networkName: '网络名',
         driver: '模式',

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

@@ -25,12 +25,6 @@
         >
             <el-row type="flex" justify="center">
                 <el-col :span="22">
-                    <el-alert
-                        v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
-                        :title="$t('container.containerFromAppHelper')"
-                        :closable="false"
-                        type="error"
-                    />
                     <el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
                         <el-input
                             :disabled="isFromApp(dialogData.rowData!)"
@@ -296,13 +290,39 @@
             </span>
         </template>
     </el-drawer>
+    <el-dialog v-model="dialogVisible" width="30%" :title="$t('commons.button.edit')">
+        <div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)" class="leading-6">
+            <div>
+                <span>{{ $t('container.updateHelper1') }}</span>
+            </div>
+            <br />
+            <div>
+                <span>{{ $t('container.updateHelper2') }}</span>
+            </div>
+            <div>
+                <span>{{ $t('container.updateHelper3') }}</span>
+            </div>
+            <br />
+        </div>
+        <div>
+            <span>{{ $t('container.updateHelper4') }}</span>
+        </div>
+        <template #footer>
+            <el-button :disabled="loading" @click="dialogVisible = false">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="submit()">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { Rules, checkFloatNumberRange, checkNumberRange } from '@/global/form-rules';
 import i18n from '@/lang';
-import { ElForm, ElMessageBox } from 'element-plus';
+import { ElForm } from 'element-plus';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import {
     listImage,
@@ -327,6 +347,7 @@ interface DialogProps {
 
 const title = ref<string>('');
 const drawerVisible = ref(false);
+const dialogVisible = ref(false);
 
 const dialogData = ref<DialogProps>({
     title: '',
@@ -386,6 +407,7 @@ const limits = ref<Container.ResourceLimit>({
 const handleClose = () => {
     emit('search');
     drawerVisible.value = false;
+    dialogVisible.value = false;
 };
 
 const rules = reactive({
@@ -448,6 +470,7 @@ const loadNetworkOptions = async () => {
     const res = await listNetwork();
     networks.value = res.data;
 };
+
 const onSubmit = async (formEl: FormInstance | undefined) => {
     if (dialogData.value.rowData!.volumes.length !== 0) {
         for (const item of dialogData.value.rowData!.volumes) {
@@ -460,93 +483,87 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        if (dialogData.value.rowData?.envStr) {
-            dialogData.value.rowData.env = dialogData.value.rowData!.envStr.split('\n');
-        }
-        if (dialogData.value.rowData?.labelsStr) {
-            dialogData.value.rowData!.labels = dialogData.value.rowData!.labelsStr.split('\n');
-        }
-        dialogData.value.rowData!.cmd = [];
-        if (dialogData.value.rowData?.cmdStr) {
-            if (dialogData.value.rowData?.cmdStr.indexOf(`'`) !== -1) {
-                let itemCmd = dialogData.value.rowData!.cmdStr.split(`'`);
-                for (const cmd of itemCmd) {
-                    if (cmd && cmd !== ' ') {
-                        dialogData.value.rowData!.cmd.push(cmd);
-                    }
-                }
-            } else {
-                let itemCmd = dialogData.value.rowData!.cmdStr.split(` `);
-                for (const cmd of itemCmd) {
+        dialogVisible.value = true;
+    });
+};
+
+const submit = async () => {
+    dialogVisible.value = false;
+    if (dialogData.value.rowData?.envStr) {
+        dialogData.value.rowData.env = dialogData.value.rowData!.envStr.split('\n');
+    }
+    if (dialogData.value.rowData?.labelsStr) {
+        dialogData.value.rowData!.labels = dialogData.value.rowData!.labelsStr.split('\n');
+    }
+    dialogData.value.rowData!.cmd = [];
+    if (dialogData.value.rowData?.cmdStr) {
+        if (dialogData.value.rowData?.cmdStr.indexOf(`'`) !== -1) {
+            let itemCmd = dialogData.value.rowData!.cmdStr.split(`'`);
+            for (const cmd of itemCmd) {
+                if (cmd && cmd !== ' ') {
                     dialogData.value.rowData!.cmd.push(cmd);
                 }
             }
+        } else {
+            let itemCmd = dialogData.value.rowData!.cmdStr.split(` `);
+            for (const cmd of itemCmd) {
+                dialogData.value.rowData!.cmd.push(cmd);
+            }
         }
-        dialogData.value.rowData!.entrypoint = [];
-        if (dialogData.value.rowData?.entrypointStr) {
-            if (dialogData.value.rowData?.entrypointStr.indexOf(`'`) !== -1) {
-                let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(`'`);
-                for (const entry of itemEntrypoint) {
-                    if (entry && entry !== ' ') {
-                        dialogData.value.rowData!.entrypoint.push(entry);
-                    }
-                }
-            } else {
-                let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(` `);
-                for (const entry of itemEntrypoint) {
+    }
+    dialogData.value.rowData!.entrypoint = [];
+    if (dialogData.value.rowData?.entrypointStr) {
+        if (dialogData.value.rowData?.entrypointStr.indexOf(`'`) !== -1) {
+            let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(`'`);
+            for (const entry of itemEntrypoint) {
+                if (entry && entry !== ' ') {
                     dialogData.value.rowData!.entrypoint.push(entry);
                 }
             }
-        }
-        if (dialogData.value.rowData!.publishAllPorts) {
-            dialogData.value.rowData!.exposedPorts = [];
         } else {
-            if (!checkPortValid()) {
-                return;
+            let itemEntrypoint = dialogData.value.rowData!.entrypointStr.split(` `);
+            for (const entry of itemEntrypoint) {
+                dialogData.value.rowData!.entrypoint.push(entry);
             }
         }
-        dialogData.value.rowData!.memory = Number(dialogData.value.rowData!.memory);
-        dialogData.value.rowData!.nanoCPUs = Number(dialogData.value.rowData!.nanoCPUs);
-
-        loading.value = true;
-        if (dialogData.value.title === 'create') {
-            await createContainer(dialogData.value.rowData!)
-                .then(() => {
-                    loading.value = false;
-                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                    emit('search');
-                    drawerVisible.value = false;
-                })
-                .catch(() => {
-                    loading.value = false;
-                });
-        } else {
-            ElMessageBox.confirm(
-                i18n.global.t('container.updateContainerHelper'),
-                i18n.global.t('commons.button.edit'),
-                {
-                    confirmButtonText: i18n.global.t('commons.button.confirm'),
-                    cancelButtonText: i18n.global.t('commons.button.cancel'),
-                },
-            )
-                .then(async () => {
-                    await updateContainer(dialogData.value.rowData!)
-                        .then(() => {
-                            loading.value = false;
-                            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                            emit('search');
-                            drawerVisible.value = false;
-                        })
-                        .catch(() => {
-                            updateContainerID();
-                            loading.value = false;
-                        });
-                })
-                .catch(() => {
-                    loading.value = false;
-                });
+    }
+    if (dialogData.value.rowData!.publishAllPorts) {
+        dialogData.value.rowData!.exposedPorts = [];
+    } else {
+        if (!checkPortValid()) {
+            return;
         }
-    });
+    }
+    dialogData.value.rowData!.memory = Number(dialogData.value.rowData!.memory);
+    dialogData.value.rowData!.nanoCPUs = Number(dialogData.value.rowData!.nanoCPUs);
+
+    loading.value = true;
+    if (dialogData.value.title === 'create') {
+        await createContainer(dialogData.value.rowData!)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                drawerVisible.value = false;
+                dialogVisible.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+        return;
+    }
+    await updateContainer(dialogData.value.rowData!)
+        .then(() => {
+            loading.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            emit('search');
+            drawerVisible.value = false;
+            dialogVisible.value = false;
+        })
+        .catch(() => {
+            updateContainerID();
+            loading.value = false;
+        });
 };
 
 const updateContainerID = async () => {

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

@@ -198,20 +198,29 @@ const search = async () => {
 
 const batchDelete = async (row: Container.NetworkInfo | null) => {
     let names: Array<string> = [];
+    let hasPanelNetwork;
     if (row === null) {
         selects.value.forEach((item: Container.NetworkInfo) => {
+            if (item.name === '1panel-network') {
+                hasPanelNetwork = true;
+            }
             names.push(item.name);
         });
     } else {
+        if (row.name === '1panel-network') {
+            hasPanelNetwork = true;
+        }
         names.push(row.name);
     }
     opRef.value.acceptParams({
         title: i18n.global.t('commons.button.delete'),
         names: names,
-        msg: i18n.global.t('commons.msg.operatorHelper', [
-            i18n.global.t('container.network'),
-            i18n.global.t('commons.button.delete'),
-        ]),
+        msg: hasPanelNetwork
+            ? i18n.global.t('container.networkHelper')
+            : i18n.global.t('commons.msg.operatorHelper', [
+                  i18n.global.t('container.network'),
+                  i18n.global.t('commons.button.delete'),
+              ]),
         api: deleteNetwork,
         params: { names: names },
     });