fix: 优化镜像清理弹框内容显示 (#2931)

Refs #2928

frontend/src/api/interface/container.ts

@@ -119,6 +119,7 @@ export namespace Container {
         name: string;
         tags: Array<string>;
         size: string;
+        isUsed: boolean;
     }
     export interface ImageBuild {
         from: string;

frontend/src/lang/modules/en.ts

@@ -286,7 +286,7 @@ const message = {
     home: {
         restart_1panel: 'Restart Panel',
         restart_system: 'Restart Server',
-        operationSuccess: 'Operation successful! Restarting, please wait...',
+        operationSuccess: 'Operation succeeded, rebooting, please refresh the browser manually later!',
         overview: 'Overview',
         entranceHelper:
             'Enabling a secure entrance can help improve system security. If necessary, go to the Control Panel settings, select Security, and enable the secure entrance.',
@@ -519,8 +519,10 @@ const message = {
         containerPruneHelper3: 'This operation cannot be rolled back. Do you want to continue?',
         imagePrune: 'Image prune',
         imagePruneSome: 'Clean unlabeled',
+        imagePruneSomeEmpty: 'No image with the "none" tag is to be cleared',
         imagePruneSomeHelper: 'Clean the images with the tag "none" that are not used by any containers.',
         imagePruneAll: 'Clean unused',
+        imagePruneAllEmpty: 'No unused images to be cleared',
         imagePruneAllHelper: 'Clean the images that are not used by any containers.',
         networkPrune: 'Network prune',
         networkPruneHelper: 'Remove all unused networks. Do you want to continue?',

frontend/src/lang/modules/tw.ts

@@ -284,7 +284,7 @@ const message = {
     home: {
         restart_1panel: '重啟面板',
         restart_system: '重啟服務器',
-        operationSuccess: '操作成功！正在重啟，請稍候...',
+        operationSuccess: '操作成功，正在重啟，請稍後手動刷新瀏覽器！',
         overview: '概覽',
         entranceHelper: '設置安全入口有利於提高系統的安全性，如有需要，前往 面板設置-安全 中，啟用安全入口',
         appInstalled: '已安裝應用',
@@ -507,9 +507,11 @@ const message = {
         containerPruneHelper3: '該操作無法回滾，是否繼續？',
         imagePrune: '清理鏡像',
         imagePruneSome: '未標簽鏡像',
-        imagePruneSomeHelper: '清理下列標簽為 none 且未被任何容器使用的鏡像。',
+        imagePruneSomeEmpty: '暫無待清理的未使用 none 標簽鏡像',
+        imagePruneSomeHelper: '清理下列標簽為 none 且未被任何容器使用的鏡像',
         imagePruneAll: '未使用鏡像',
-        imagePruneAllHelper: '清理下列未被任何容器使用的鏡像。',
+        imagePruneAllEmpty: '暫無待清理的未使用鏡像',
+        imagePruneAllHelper: '清理下列未被任何容器使用的鏡像',
         networkPrune: '清理網絡',
         networkPruneHelper: '清理網絡 將刪除所有未被使用的網絡，該操作無法回滾，是否繼續？',
         volumePrune: '清理存儲卷',

frontend/src/lang/modules/zh.ts

@@ -284,7 +284,7 @@ const message = {
     home: {
         restart_1panel: '重启面板',
         restart_system: '重启服务器',
-        operationSuccess: '操作成功！正在重启，请稍候...',
+        operationSuccess: '操作成功，正在重启，请稍后手动刷新浏览器！',
         overview: '概览',
         entranceHelper: '设置安全入口有利于提高系统的安全性，如有需要，前往 面板设置-安全 中，启用安全入口',
         appInstalled: '已安装应用',
@@ -508,9 +508,11 @@ const message = {
         containerPruneHelper3: '该操作无法回滚，是否继续？',
         imagePrune: '清理镜像',
         imagePruneSome: '未标签镜像',
-        imagePruneSomeHelper: '清理下列标签为 none 且未被任何容器使用的镜像。',
+        imagePruneSomeEmpty: '暂无待清理的未使用 none 标签镜像',
+        imagePruneSomeHelper: '清理下列标签为 none 且未被任何容器使用的镜像',
         imagePruneAll: '未使用镜像',
-        imagePruneAllHelper: '清理下列未被任何容器使用的镜像。',
+        imagePruneAllEmpty: '暂无待清理的未使用镜像',
+        imagePruneAllHelper: '清理下列未被任何容器使用的镜像',
         networkPrune: '清理网络',
         networkPruneHelper: '清理网络 将删除所有未被使用的网络，该操作无法回滚，是否继续？',
         volumePrune: '清理存储卷',

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

@@ -12,19 +12,25 @@
                     <el-radio :label="true">{{ $t('container.imagePruneAll') }}</el-radio>
                 </el-radio-group>
             </el-form-item>
-            <span>
-                {{ withTagAll ? $t('container.imagePruneAllHelper') : $t('container.imagePruneSomeHelper') }}
+            <span v-if="withTagAll">
+                {{ unUsedList.length !== 0 ? $t('container.imagePruneAllHelper') : $t('container.imagePruneAllEmpty') }}
+            </span>
+            <span v-else>
+                {{
+                    unTagList.length !== 0 ? $t('container.imagePruneSomeHelper') : $t('container.imagePruneSomeEmpty')
+                }}
             </span>
             <div v-if="!withTagAll">
-                <ul v-for="(item, index) in imageList" :key="index">
-                    <li v-if="item.tags && item.tags.length === 1 && item.tags[0].indexOf('<none>') !== -1">
+                <ul v-for="(item, index) in unTagList" :key="index">
+                    <li>
                         {{ item.tags[0] }}
                     </li>
                 </ul>
             </div>
             <div v-else>
-                <ul v-for="(item, index) in imageList" :key="index">
-                    <li v-if="item.tags && !item.isUsed">{{ item.tags.join(', ') }}</li>
+                <ul v-for="(item, index) in unUsedList" :key="index">
+                    <li v-if="item.tags">{{ item.tags.join(', ') }}</li>
+                    <li v-else>{{ item.id.replaceAll('sha256:', '').substring(0, 12) }}</li>
                 </ul>
             </div>
         </el-form>
@@ -33,7 +39,7 @@
                 <el-button @click="dialogVisible = false">
                     {{ $t('commons.button.cancel') }}
                 </el-button>
-                <el-button type="primary" @click="onClean" :disabled="loading">
+                <el-button type="primary" :disabled="buttonDisable() || loading" @click="onClean">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -52,19 +58,34 @@ import { ref } from 'vue';
 const dialogVisible = ref(false);
 const withTagAll = ref(false);
 const loading = ref();
-const imageList = ref();
+const unTagList = ref();
+const unUsedList = ref();
 
 interface DialogProps {
     list: Array<Container.ImageInfo>;
 }
 const acceptParams = (params: DialogProps): void => {
-    imageList.value = params.list;
+    let list = params.list || [];
+    unTagList.value = [];
+    unUsedList.value = [];
+    for (const item of list) {
+        if (item.tags && item.tags.length === 1 && item.tags[0].indexOf('<none>') !== -1 && !item.isUsed) {
+            unTagList.value.push(item);
+        }
+        if (!item.isUsed) {
+            unUsedList.value.push(item);
+        }
+    }
     dialogVisible.value = true;
     withTagAll.value = false;
 };
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
+const buttonDisable = () => {
+    return withTagAll.value ? unUsedList.value.length === 0 : unTagList.value.length === 0;
+};
+
 const onClean = async () => {
     loading.value = true;
     let params = {