fix: 优化容器清理提示信息 (#1927)

frontend/src/lang/modules/en.ts

@@ -479,7 +479,10 @@ const message = {
         rename: 'Rename',
         remove: 'Remove',
         containerPrune: 'Container prune',
-        containerPruneHelper: 'Remove all stopped containers. Do you want to continue?',
+        containerPruneHelper1: 'Cleaning containers will delete all containers that are in a stopped state.',
+        containerPruneHelper2:
+            'If the containers are from the app store, after performing the cleanup, you need to go to the [Installed] list in the [App Store] and click the [Rebuild] button to reinstall them.',
+        containerPruneHelper3: 'This operation cannot be rolled back. Do you want to continue?',
         imagePrune: 'Image prune',
         imagePruneSome: 'Clean unlabeled',
         imagePruneSomeHelper: 'Remove all unused and unlabeled container images。',

frontend/src/lang/modules/tw.ts

@@ -469,7 +469,10 @@ const message = {
         rename: '重命名',
         remove: '刪除',
         containerPrune: '清理容器',
-        containerPruneHelper: '清理容器 將刪除所有處於停止狀態的容器，該操作無法回滾，是否繼續？',
+        containerPruneHelper1: '清理容器 將刪除所有處於停止狀態的容器。',
+        containerPruneHelper2:
+            '若容器來自於應用商店，在執行清理操作後，您需要前往 [應用商店] 的 [已安裝] 列表，點擊 [重建] 按鈕進行重新安裝。',
+        containerPruneHelper3: '該操作無法回滾，是否繼續？',
         imagePrune: '清理鏡像',
         imagePruneSome: '未標簽鏡像',
         imagePruneSomeHelper: '清理標簽為 none 且未被任何容器使用的鏡像。',

frontend/src/lang/modules/zh.ts

@@ -469,7 +469,10 @@ const message = {
         rename: '重命名',
         remove: '删除',
         containerPrune: '清理容器',
-        containerPruneHelper: '清理容器 将删除所有处于停止状态的容器，该操作无法回滚，是否继续？',
+        containerPruneHelper1: '清理容器 将删除所有处于停止状态的容器。',
+        containerPruneHelper2:
+            '若容器来自于应用商店，在执行清理操作后，您需要前往 [应用商店] 的 [已安装] 列表，点击 [重建] 按钮进行重新安装。',
+        containerPruneHelper3: '该操作无法回滚，是否继续？',
         imagePrune: '清理镜像',
         imagePruneSome: '未标签镜像',
         imagePruneSomeHelper: '清理标签为 none 且未被任何容器使用的镜像。',

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

@@ -157,6 +157,7 @@
         </LayoutContent>
 
         <CodemirrorDialog ref="mydetail" />
+        <PruneDialog @search="search" ref="dialogPruneRef" />
 
         <ReNameDialog @search="search" ref="dialogReNameRef" />
         <ContainerLogDialog ref="dialogContainerLogRef" />
@@ -172,6 +173,7 @@
 <script lang="ts" setup>
 import Tooltip from '@/components/tooltip/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
+import PruneDialog from '@/views/container/container/prune/index.vue';
 import ReNameDialog from '@/views/container/container/rename/index.vue';
 import OperateDialog from '@/views/container/container/operate/index.vue';
 import UpgraeDialog from '@/views/container/container/upgrade/index.vue';
@@ -185,7 +187,6 @@ import { reactive, onMounted, ref, computed } from 'vue';
 import {
     containerListStats,
     containerOperator,
-    containerPrune,
     inspect,
     loadContainerInfo,
     loadDockerStatus,
@@ -196,7 +197,6 @@ import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import router from '@/routers';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
-import { computeSize } from '@/utils/util';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
@@ -264,6 +264,7 @@ const mydetail = ref();
 
 const dialogContainerLogRef = ref();
 const dialogReNameRef = ref();
+const dialogPruneRef = ref();
 
 const search = async (column?: any) => {
     let filterItem = props.filters ? props.filters : '';
@@ -360,31 +361,7 @@ const onInspect = async (id: string) => {
 };
 
 const onClean = () => {
-    ElMessageBox.confirm(i18n.global.t('container.containerPruneHelper'), i18n.global.t('container.containerPrune'), {
+    dialogPruneRef.value!.acceptParams();
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        loading.value = true;
-        let params = {
-            pruneType: 'container',
-            withTagAll: false,
-        };
-        await containerPrune(params)
-            .then((res) => {
-                loading.value = false;
-                MsgSuccess(
-                    i18n.global.t('container.cleanSuccessWithSpace', [
-                        res.data.deletedNumber,
-                        computeSize(res.data.spaceReclaimed),
-                    ]),
-                );
-                search();
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
 };
 
 const checkStatus = (operation: string, row: Container.ContainerInfo | null) => {

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

@@ -0,0 +1,71 @@
+<template>
+    <el-dialog v-model="dialogVisiable" :title="$t('container.containerPrune')" :destroy-on-close="true" width="30%">
+        <div>
+            <ul class="help-ul">
+                <li lineClass style="color: red">{{ $t('container.containerPruneHelper1') }}</li>
+                <li class="lineClass">{{ $t('container.containerPruneHelper2') }}</li>
+                <li class="lineClass">{{ $t('container.containerPruneHelper3') }}</li>
+            </ul>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button :disabled="loading" @click="dialogVisiable = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onClean()">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { containerPrune } from '@/api/modules/container';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { ref } from 'vue';
+import { computeSize } from '@/utils/util';
+
+const loading = ref(false);
+const dialogVisiable = ref<boolean>(false);
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+const onClean = async () => {
+    loading.value = true;
+    let params = {
+        pruneType: 'container',
+        withTagAll: false,
+    };
+    await containerPrune(params)
+        .then((res) => {
+            loading.value = false;
+            MsgSuccess(
+                i18n.global.t('container.cleanSuccessWithSpace', [
+                    res.data.deletedNumber,
+                    computeSize(res.data.spaceReclaimed),
+                ]),
+            );
+            dialogVisiable.value = false;
+            emit('search');
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
+const acceptParams = (): void => {
+    dialogVisiable.value = true;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+
+<style lang="scss" scoped>
+.lineClass {
+    line-height: 30px;
+}
+</style>