fix: 优化 compose 删除提示信息 (#2437)

frontend/src/lang/modules/en.ts

@@ -661,7 +661,7 @@ const message = {
             'The composition created through 1Panel editor or template will be saved in the {0}/docker/compose directory.',
         deleteFile: 'Delete file',
         deleteComposeHelper:
-            'Delete all files in the directory where the compose file is located, including persistent files in that directory. Please be cautious when performing this operation.',
+            'Delete all files in the {0} directory, including persistent files in this directory. Please proceed with caution!',
         deleteCompose: '" Delete this composition.',
         apps: 'Apps',
         local: 'Local',

frontend/src/lang/modules/tw.ts

@@ -641,7 +641,7 @@ const message = {
         composePathHelper: '配置文件保存路徑: {0}',
         composeHelper: '通過 1Panel 編輯或者模版創建的編排，將保存在 {0}/docker/compose 路徑下',
         deleteFile: '刪除文件',
-        deleteComposeHelper: '刪除編排文件所在目錄下所有文件，包括該文件下的持久化文件等，請謹慎操作！',
+        deleteComposeHelper: '刪除 {0} 目录下所有文件，包括該文件下的持久化文件等，請謹慎操作！',
         deleteCompose: '" 刪除此編排',
         apps: '應用商店',
         local: '本地',

frontend/src/lang/modules/zh.ts

@@ -641,7 +641,7 @@ const message = {
         composePathHelper: '配置文件保存路径: {0}',
         composeHelper: '通过 1Panel 编辑或者模版创建的编排，将保存在 {0}/docker/compose 路径下',
         deleteFile: '删除文件',
-        deleteComposeHelper: '删除编排文件所在目录下所有文件，包括该文件下的持久化文件等，请谨慎操作！',
+        deleteComposeHelper: '删除 {0} 目录下所有文件，包括该文件下的持久化文件等，请谨慎操作！',
         deleteCompose: '" 删除此编排',
         apps: '应用商店',
         local: '本地',

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

@@ -9,14 +9,14 @@
             <el-form-item>
                 <el-checkbox v-model="deleteFile" :label="$t('container.deleteFile')" />
                 <span class="input-help">
-                    {{ $t('container.deleteComposeHelper') }}
+                    {{ $t('container.deleteComposeHelper', [loadComposeDir()]) }}
                 </span>
             </el-form-item>
             <el-form-item>
-                <div>
-                    <span style="font-size: 12px">{{ $t('database.delete') }}</span>
-                    <span style="font-size: 12px; color: red; font-weight: 500">{{ composeName }}</span>
-                    <span style="font-size: 12px">{{ $t('container.deleteCompose') }}</span>
+                <div class="font">
+                    <span>{{ $t('database.delete') }}</span>
+                    <span class="warning">{{ composeName }}</span>
+                    <span>{{ $t('container.deleteCompose') }}</span>
                 </div>
                 <el-input v-model="deleteInfo" :placeholder="composeName"></el-input>
             </el-form-item>
@@ -64,6 +64,15 @@ const acceptParams = async (prop: DialogProps) => {
     dialogVisible.value = true;
 };
 
+const loadComposeDir = () => {
+    const parts = composePath.value.split('/');
+    if (parts.length <= 2) {
+        return '/';
+    }
+    const parentDirectory = parts.slice(0, -1).join('/');
+    return parentDirectory;
+};
+
 const submit = async () => {
     loading.value = true;
     let params = {
@@ -88,3 +97,13 @@ defineExpose({
     acceptParams,
 });
 </script>
+
+<style lang="scss" scoped>
+.font {
+    font-size: 12px;
+    .warning {
+        color: red;
+        font-weight: 500;
+    }
+}
+</style>