feat(system/file): 新增支持文件回收站

src/apis/system/file.ts

@@ -4,6 +4,7 @@ import http from '@/utils/http'
 export type * from './type'
 
 const BASE_URL = '/system/file'
+const RECYCLE_URL = `${BASE_URL}/recycle`
 
 /** @desc 上传文件 */
 export function uploadFile(data: FormData) {
@@ -44,3 +45,23 @@ export function createDir(parentPath: string, name: string) {
 export function calcDirSize(id: string) {
   return http.get<T.FileDirCalcSizeResp>(`${BASE_URL}/dir/${id}/size`)
 }
+
+/** @desc 查询回收站文件列表 */
+export function listRecycleFiles(query: T.FilePageQuery) {
+  return http.get<PageRes<T.FileItem[]>>(`${RECYCLE_URL}`, query)
+}
+
+/** @desc 还原回收站文件 */
+export function restoreRecycleFile(id: string) {
+  return http.put(`${RECYCLE_URL}/restore/${id}`)
+}
+
+/** @desc 删除回收站文件 */
+export function deleteRecycleFile(id: string) {
+  return http.del(`${RECYCLE_URL}/${id}`)
+}
+
+/** @desc 清空回收站 */
+export function cleanRecycleBin() {
+  return http.del(`${RECYCLE_URL}/clean`)
+}

src/apis/system/type.ts

@@ -269,6 +269,8 @@ export interface StorageResp {
   endpoint: string
   bucketName: string
   domain: string
+  recycleBinEnabled: boolean
+  recycleBinPath: string
   description: string
   isDefault: boolean
   sort: number

src/views/system/config/storage/AddModal.vue

@@ -44,6 +44,8 @@ const { storage_type_enum } = useDict('storage_type_enum')
 
 const [form, resetForm] = useResetReactive({
   type: 2,
+  recycleBinEnabled: true,
+  recycleBinPath: '.RECYCLE.BIN/',
   isDefault: false,
   sort: 999,
   status: 2,
@@ -127,6 +129,29 @@ const columns: ColumnItem[] = reactive([
     required: true,
     show: () => form.type === 1,
   },
+  {
+    label: '启用回收站',
+    field: 'recycleBinEnabled',
+    type: 'switch',
+    span: 24,
+    props: {
+      type: 'round',
+      checkedValue: true,
+      uncheckedValue: false,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
+    disabled: () => isUpdate.value,
+  },
+  {
+    label: '回收站路径',
+    field: 'recycleBinPath',
+    type: 'input',
+    span: 24,
+    required: true,
+    show: () => form.recycleBinEnabled,
+    disabled: () => isUpdate.value,
+  },
   {
     label: '排序',
     field: 'sort',

src/views/system/config/storage/StorageLocal.vue

@@ -39,6 +39,8 @@
             <a-descriptions v-else :column="1">
               <a-descriptions-item label="存储路径">{{ item.bucketName }}</a-descriptions-item>
               <a-descriptions-item label="访问路径">{{ item.domain }}</a-descriptions-item>
+              <a-descriptions-item label="启用回收站">{{ item.recycleBinEnabled ? '启用' : '禁用' }}</a-descriptions-item>
+              <a-descriptions-item label="回收站路径">{{ item.recycleBinPath }}</a-descriptions-item>
             </a-descriptions>
           </template>
         </CardBlock>

src/views/system/config/storage/StorageOss.vue

@@ -41,6 +41,8 @@
               <a-descriptions-item label="Endpoint">{{ item.endpoint }}</a-descriptions-item>
               <a-descriptions-item label="Bucket">{{ item.bucketName }}</a-descriptions-item>
               <a-descriptions-item label="自定义域名">{{ item.domain }}</a-descriptions-item>
+              <a-descriptions-item label="启用回收站">{{ item.recycleBinEnabled ? '启用' : '禁用' }}</a-descriptions-item>
+              <a-descriptions-item label="回收站路径">{{ item.recycleBinPath }}</a-descriptions-item>
             </a-descriptions>
           </template>
         </CardBlock>

src/views/system/config/storage/components/CardAdd.vue

@@ -59,7 +59,7 @@ const onAdd = () => {
   }
 
   .content {
-    height: 48px;
+    height: 80px;
   }
 }
 
@@ -78,15 +78,15 @@ const onAdd = () => {
   }
 
   :deep(.arco-card-body) {
-    padding-top: 45px;
+    padding-top: 55px;
-    padding-bottom: 63px;
+    padding-bottom: 53px;
   }
 }
 
 .card-large {
   :deep(.arco-card-body) {
-    padding-top: 65px;
+    padding-top: 75px;
-    padding-bottom: 73px;
+    padding-bottom: 63px;
   }
 }
 </style>

src/views/system/config/storage/components/CardBlock.vue

@@ -250,11 +250,11 @@ const onUpdate = (record: StorageResp) => {
   }
 
   .content {
-    height: 48px;
+    height: 80px;
   }
 
   .content-large {
-    height: 78px;
+    height: 110px;
   }
 
   .extra {

src/views/system/file/main/FileMain/RecycleBinModal.vue

@@ -0,0 +1,195 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="文件回收站"
+    :width="width >= 1100 ? 1100 : '100%'"
+    draggable
+    :footer="false"
+    @close="onClose"
+  >
+    <GiTable
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
+      :pagination="pagination"
+      :disabled-tools="['size', 'setting', 'fullscreen']"
+      :disabled-column-keys="['label']"
+      @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input-search v-model="queryForm.originalName" placeholder="搜索名称" allow-clear style="width: 200px" @search="search" />
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['system:fileRecycle:clean']" type="outline" status="danger" @click="onClean">
+          <template #icon><icon-delete /></template>
+          <template #default>清空回收站</template>
+        </a-button>
+      </template>
+      <template #type="{ record }">{{ getFileType(record.type) }}</template>
+      <template #size="{ record }">
+        <span v-if="record.type === 0" v-permission="['system:file:calcDirSize']">
+          <a-link v-if="record.size === null" @click="calculateDirSize(record)">计算</a-link>
+          <span v-else>
+            {{ formatFileSize(record.size) }}
+          </span>
+        </span>
+        <span v-else>{{ formatFileSize(record.size) }}</span>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:fileRecycle:restore']" title="还原" @click="onRestore(record)">还原</a-link>
+          <a-link
+            v-permission="['system:fileRecycle:delete']"
+            status="danger"
+            title="删除"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message, Modal, type TableInstance } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core/index'
+import {
+  type FileItem,
+  type FileQuery,
+  calcDirSize,
+  cleanRecycleBin,
+  deleteRecycleFile,
+  listRecycleFiles,
+  restoreRecycleFile,
+} from '@/apis/system/file'
+import { useTable } from '@/hooks'
+import { formatFileSize, isMobile } from '@/utils'
+import has from '@/utils/has'
+import { FileTypeList } from '@/constant/file'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const visible = ref(false)
+const { width } = useWindowSize()
+
+const queryForm = reactive<FileQuery>({
+  sort: ['updateTime,desc'],
+})
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listRecycleFiles({ ...queryForm, ...page }), { immediate: false })
+const columns: TableInstance['columns'] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+  },
+  { title: '名称', dataIndex: 'originalName', slotName: 'originalName', minWidth: 100, ellipsis: true, tooltip: true },
+  { title: '类型', dataIndex: 'type', slotName: 'type', width: 100 },
+  { title: '大小', dataIndex: 'size', slotName: 'size' },
+  { title: '删除时间', dataIndex: 'updateTime', width: 180 },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 130,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['system:fileRecycle:restore', 'system:fileRecycle:delete']),
+  },
+]
+
+// 重置
+const reset = () => {
+  queryForm.originalName = undefined
+  queryForm.type = undefined
+  search()
+}
+
+// 获取文件类型
+const getFileType = (type: number) => {
+  if (type === 0) return '文件夹'
+  return FileTypeList.find((item) => item.value === type)?.name
+}
+
+// 计算文件夹大小
+const calculateDirSize = async (record: FileItem) => {
+  if (record.type !== 0) return
+  try {
+    const { data } = await calcDirSize(record.id)
+    record.size = data.size
+  } catch (err) {
+    Message.error('计算失败，请重试')
+  }
+}
+
+// 还原
+const onRestore = (record: FileItem) => {
+  Modal.warning({
+    title: '提示',
+    content: `是否确定还原${record.type === 0 ? '文件夹' : '文件'}「${record.originalName}」？`,
+    hideCancel: false,
+    maskClosable: false,
+    onOk: async () => {
+      await restoreRecycleFile(record.id)
+      Message.success('还原成功')
+      search()
+    },
+  })
+}
+
+// 删除
+const onDelete = (record: FileItem) => {
+  return handleDelete(() => deleteRecycleFile(record.id), {
+    content: `是否确定删除${record.type === 0 ? '文件夹' : '文件'}「${record.originalName}」？`,
+    showModal: true,
+  })
+}
+
+// 清空回收站
+const onClean = () => {
+  Modal.warning({
+    title: '提示',
+    content: '是否确定清空回收站？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: async () => {
+      await cleanRecycleBin()
+      Message.success('清空成功')
+      search()
+    },
+  })
+}
+
+// 关闭
+const onClose = () => {
+  visible.value = false
+  dataList.value = []
+  emit('close')
+}
+
+// 打开
+const onOpen = () => {
+  reset()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/file/main/FileMain/index.vue

@@ -31,6 +31,14 @@
             <a-button type="text" style="width: 100%; text-align: left;" @click="visible = true">
               分片上传
             </a-button>
+            <!-- 新建文件夹 -->
+            <a-divider style="margin: 0;"></a-divider>
+            <a-button v-permission="['system:file:createDir']" type="text" style="width: 100%; text-align: left;" :disabled="!queryForm.parentPath" @click="createDirModalVisible = !createDirModalVisible">
+              <template #icon>
+                <icon-folder />
+              </template>
+              新建文件夹
+            </a-button>
           </template>
         </a-dropdown>
         <a-modal v-model:visible="visible" title="分片上传" :width="width > 1350 ? 1350 : '100%'" :footer="false" @close="search">
@@ -63,18 +71,19 @@
             <icon-delete />
           </template>
         </a-button>
-        <a-button v-permission="['system:file:createDir']" type="primary" :disabled="!queryForm.parentPath" @click="createDirModalVisible = !createDirModalVisible">
+
-          <template #icon>
-            <icon-folder />
-          </template>
-          <template #default>新建文件夹</template>
-        </a-button>
         <a-button v-permission="['system:file:delete']" type="primary" @click="isBatchMode = !isBatchMode">
           <template #icon>
             <icon-select-all />
           </template>
           <template #default>{{ isBatchMode ? '取消批量' : '批量操作' }}</template>
         </a-button>
+        <a-button v-permission="['system:fileRecycle:list']" type="primary" @click="onRecycleBin">
+          <template #icon>
+            <icon-delete />
+          </template>
+          <template #default>回收站</template>
+        </a-button>
         <a-button-group>
           <a-tooltip content="视图">
             <a-button @click="toggleMode">
@@ -114,6 +123,9 @@
     <a-modal v-model:visible="createDirModalVisible" title="新建文件夹" @ok="handleCreateDir" @cancel="handleCancel">
       <a-input v-model="newDirName" placeholder="请输入文件夹名称" size="large" allow-clear />
     </a-modal>
+
+    <!-- 回收站 -->
+    <RecycleBinModal ref="RecycleBinModalRef" @close="search" />
   </div>
 </template>
 
@@ -128,6 +140,7 @@ import {
   previewFileVideoModal,
 } from '../../components/index'
 import FileGrid from './FileGrid.vue'
+import RecycleBinModal from './RecycleBinModal.vue'
 import useFileManage from './useFileManage'
 import { useTable } from '@/hooks'
 import { type FileItem, type FileQuery, createDir, deleteFile, listFile, uploadFile } from '@/apis/system/file'
@@ -344,6 +357,12 @@ const handleBreadcrumbClick = (item) => {
   search()
 }
 
+// 回收站
+const RecycleBinModalRef = ref<InstanceType<typeof RecycleBinModal>>()
+const onRecycleBin = () => {
+  RecycleBinModalRef.value?.onOpen()
+}
+
 onMounted(() => {
   search()
 })