feat: 增加回收站开关功能 (#3161)

Refs https://github.com/1Panel-dev/1Panel/issues/2895

frontend/src/api/modules/files.ts

@@ -120,3 +120,7 @@ export const RemoveFavorite = (id: number) => {
 export const BatchChangeRole = (params: File.FileRole) => {
     return http.post<any>('files/batch/role', params);
 };
+
+export const GetRecycleStatus = () => {
+    return http.get<string>('files/recycle/status');
+};

frontend/src/global/mimetype.ts

@@ -88,7 +88,7 @@ export const Rewrites = [
     'typecho',
     'typecho2',
     'thinkphp',
-		'yii2',
+    'yii2',
     'laravel5',
     'discuz',
     'discuzx',

frontend/src/lang/modules/en.ts

@@ -1087,6 +1087,8 @@ const message = {
         deleteRecycleHelper: 'Are you sure you want to permanently delete the following files?',
         typeErrOrEmpty: '[{0}] file type is wrong or empty folder',
         dropHelper: 'Drag the files you want to upload here',
+        fileRecycleBin: 'File Recycle Bin',
+        fileRecycleBinMsg: '{0} recycle bin',
     },
     ssh: {
         autoStart: 'Auto Start',

frontend/src/lang/modules/tw.ts

@@ -1036,6 +1036,8 @@ const message = {
         deleteRecycleHelper: '確定永久刪除以下文件？',
         typeErrOrEmpty: '【{0}】 檔案類型錯誤或為空資料夾',
         dropHelper: '將需要上傳的文件拖曳到此處',
+        fileRecycleBin: '檔案回收站',
+        fileRecycleBinMsg: '已{0}回收站',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1037,6 +1037,8 @@ const message = {
         deleteRecycleHelper: '确定永久删除以下文件？',
         typeErrOrEmpty: '【{0}】 文件类型错误或为空文件夹',
         dropHelper: '将需要上传的文件拖曳到此处',
+        fileRecycleBin: '文件回收站',
+        fileRecycleBinMsg: '已{0}回收站',
     },
     ssh: {
         autoStart: '开机自启',

frontend/src/views/host/file-management/delete/index.vue

@@ -8,7 +8,7 @@
                             <span>{{ $t('file.deleteHelper') }}</span>
                         </div>
                     </el-alert>
-                    <div class="mt-4">
+                    <div class="mt-4" v-if="recycleStatus === 'enable'">
                         <el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox>
                     </div>
                     <div class="file-list">
@@ -49,7 +49,7 @@ import i18n from '@/lang';
 import { ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { getIcon } from '@/utils/util';
-import { DeleteFile } from '@/api/modules/files';
+import { DeleteFile, GetRecycleStatus } from '@/api/modules/files';
 import { MsgSuccess } from '@/utils/message';
 
 const open = ref(false);
@@ -57,13 +57,25 @@ const files = ref();
 const loading = ref(false);
 const em = defineEmits(['close']);
 const forceDelete = ref(false);
+const recycleStatus = ref('enable');
 
 const acceptParams = (props: File.File[]) => {
+    getStatus();
     files.value = props;
     open.value = true;
     forceDelete.value = false;
 };
 
+const getStatus = async () => {
+    try {
+        const res = await GetRecycleStatus();
+        recycleStatus.value = res.data;
+        if (recycleStatus.value === 'disable') {
+            forceDelete.value = true;
+        }
+    } catch (error) {}
+};
+
 const onConfirm = () => {
     const pros = [];
     for (const s of files.value) {
@@ -98,8 +110,9 @@ defineExpose({
 }
 
 .file-list {
-    height: 400px;
+    max-height: 400px;
     overflow-y: auto;
+    margin-top: 15px;
 }
 
 .delete-warn {

frontend/src/views/host/file-management/recycle-bin/index.vue

@@ -3,12 +3,17 @@
         <template #header>
             <DrawerHeader :header="$t('file.recycleBin')" :back="handleClose" />
         </template>
-        <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
-            {{ $t('file.clearRecycleBin') }}
-        </el-button>
-        <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
-            {{ $t('commons.button.delete') }}
-        </el-button>
+        <div class="flex space-x-4">
+            <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
+                {{ $t('file.clearRecycleBin') }}
+            </el-button>
+            <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
+                {{ $t('commons.button.delete') }}
+            </el-button>
+            <el-form-item :label="$t('file.fileRecycleBin')">
+                <el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
+            </el-form-item>
+        </div>
         <ComplexTable
             :pagination-config="paginationConfig"
             v-model:selects="selects"
@@ -46,11 +51,13 @@
 </template>
 
 <script lang="ts" setup>
-import { clearRecycle, getRecycleList, reduceFile } from '@/api/modules/files';
+import { GetRecycleStatus, clearRecycle, getRecycleList, reduceFile } from '@/api/modules/files';
 import { reactive, ref } from 'vue';
 import { dateFormat, computeSize } from '@/utils/util';
 import i18n from '@/lang';
 import Delete from './delete/index.vue';
+import { updateSetting } from '@/api/modules/setting';
+import { MsgSuccess } from '@/utils/message';
 
 const open = ref(false);
 const req = reactive({
@@ -62,6 +69,7 @@ const em = defineEmits(['close']);
 const selects = ref([]);
 const loading = ref(false);
 const files = ref([]);
+const status = ref('enable');
 
 const paginationConfig = reactive({
     cacheSizeKey: 'recycle-page-size',
@@ -83,6 +91,23 @@ const getFileSize = (size: number) => {
 
 const acceptParams = () => {
     search();
+    getStatus();
+};
+
+const getStatus = async () => {
+    try {
+        const res = await GetRecycleStatus();
+        status.value = res.data;
+    } catch (error) {}
+};
+
+const changeStatus = async () => {
+    try {
+        loading.value = true;
+        await updateSetting({ key: 'FileRecycleBin', value: status.value });
+        MsgSuccess(i18n.global.t('file.fileRecycleBinMsg', [i18n.global.t('commons.button.' + status.value)]));
+        loading.value = false;
+    } catch (error) {}
 };
 
 const search = async () => {