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

Refs #6819
2025-01-19 08:19:15 +08:00 · 2024-10-23 17:32:19 +08:00 · 2024-10-23 17:32:19 +08:00 · 208414704d
commit 208414704d
parent 7f453aa145
5 changed files with 135 additions and 94 deletions
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
--- a/frontend/src/lang/modules/tw.ts
+++ b/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: '模式',
--- a/frontend/src/lang/modules/zh.ts
+++ b/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: '模式',
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/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 () => {
--- a/frontend/src/views/container/network/index.vue
+++ b/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 },
    });