284 lines
8.8 KiB
TypeScript
284 lines
8.8 KiB
TypeScript
import React, { useEffect, useState, useRef } from 'react'
|
|
import { Trash2, FileText, Folder, Loader2 } from 'lucide-react'
|
|
import { useWallpaper } from '@/stores'
|
|
import { fetchRecycleBin, restoreItem, permanentlyDeleteItem, emptyRecycleBin } from './api'
|
|
import type { RecycleBinGroupDTO, RecycleBinItemDTO } from '@shared/types'
|
|
import { ContextMenu } from '@/components/common/ContextMenu'
|
|
import { DeleteConfirmDialog } from '@/components/dialogs/DeleteConfirmDialog'
|
|
|
|
type NotebookEvent = {
|
|
event: string
|
|
path?: string
|
|
}
|
|
|
|
const formatDate = (dateStr: string): string => {
|
|
if (dateStr.length !== 8) return dateStr
|
|
const year = dateStr.substring(0, 4)
|
|
const month = dateStr.substring(4, 6)
|
|
const day = dateStr.substring(6, 8)
|
|
return `${year}年${month}月${day}日`
|
|
}
|
|
|
|
export const RecycleBinPage: React.FC = () => {
|
|
const { opacity } = useWallpaper()
|
|
const [groups, setGroups] = useState<RecycleBinGroupDTO[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [contextMenu, setContextMenu] = useState<{
|
|
isOpen: boolean
|
|
position: { x: number; y: number }
|
|
item: RecycleBinItemDTO | null
|
|
}>({
|
|
isOpen: false,
|
|
position: { x: 0, y: 0 },
|
|
item: null
|
|
})
|
|
const [deleteDialog, setDeleteDialog] = useState<{
|
|
isOpen: boolean
|
|
item: RecycleBinItemDTO | null
|
|
}>({
|
|
isOpen: false,
|
|
item: null
|
|
})
|
|
const [emptyDialog, setEmptyDialog] = useState(false)
|
|
|
|
const loadRecycleBinRef = useRef<(showLoading?: boolean) => Promise<void>>()
|
|
|
|
const loadRecycleBin = async (showLoading = true) => {
|
|
if (showLoading) {
|
|
setLoading(true)
|
|
}
|
|
setError(null)
|
|
try {
|
|
const data = await fetchRecycleBin()
|
|
setGroups(data.groups)
|
|
} catch (err) {
|
|
console.error('Failed to load recycle bin:', err)
|
|
setError('加载回收站失败')
|
|
} finally {
|
|
if (showLoading) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
loadRecycleBinRef.current = loadRecycleBin
|
|
|
|
useEffect(() => {
|
|
loadRecycleBin()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const eventSource = new EventSource('/api/events')
|
|
|
|
eventSource.onmessage = (event) => {
|
|
const data = JSON.parse(event.data) as NotebookEvent
|
|
if (
|
|
data.event === 'change' ||
|
|
data.event === 'add' ||
|
|
data.event === 'unlink' ||
|
|
data.event === 'addDir' ||
|
|
data.event === 'unlinkDir'
|
|
) {
|
|
if (data.path && data.path.startsWith('RB/')) {
|
|
loadRecycleBinRef.current?.(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
eventSource.onerror = () => {
|
|
eventSource.close()
|
|
}
|
|
|
|
return () => {
|
|
eventSource.close()
|
|
}
|
|
}, [])
|
|
|
|
const handleContextMenu = (e: React.MouseEvent, item: RecycleBinItemDTO) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setContextMenu({
|
|
isOpen: true,
|
|
position: { x: e.clientX, y: e.clientY },
|
|
item
|
|
})
|
|
}
|
|
|
|
const handleCloseContextMenu = () => {
|
|
setContextMenu(prev => ({ ...prev, isOpen: false }))
|
|
}
|
|
|
|
const handleRestore = async () => {
|
|
if (!contextMenu.item) return
|
|
try {
|
|
await restoreItem(contextMenu.item.path, contextMenu.item.type)
|
|
handleCloseContextMenu()
|
|
loadRecycleBin(false)
|
|
} catch (err) {
|
|
console.error('Failed to restore:', err)
|
|
alert('恢复失败')
|
|
}
|
|
}
|
|
|
|
const handlePermanentDeleteClick = () => {
|
|
if (!contextMenu.item) return
|
|
handleCloseContextMenu()
|
|
setDeleteDialog({
|
|
isOpen: true,
|
|
item: contextMenu.item
|
|
})
|
|
}
|
|
|
|
const handlePermanentDeleteConfirm = async () => {
|
|
if (!deleteDialog.item) return
|
|
try {
|
|
await permanentlyDeleteItem(deleteDialog.item.path, deleteDialog.item.type)
|
|
setDeleteDialog({ isOpen: false, item: null })
|
|
loadRecycleBin(false)
|
|
} catch (err) {
|
|
console.error('Failed to delete:', err)
|
|
alert('删除失败')
|
|
}
|
|
}
|
|
|
|
const handleDeleteDialogCancel = () => {
|
|
setDeleteDialog({ isOpen: false, item: null })
|
|
}
|
|
|
|
const handleEmptyClick = () => {
|
|
setEmptyDialog(true)
|
|
}
|
|
|
|
const handleEmptyConfirm = async () => {
|
|
try {
|
|
await emptyRecycleBin()
|
|
setEmptyDialog(false)
|
|
loadRecycleBin(false)
|
|
} catch (err) {
|
|
console.error('Failed to empty recycle bin:', err)
|
|
alert('清空回收站失败')
|
|
}
|
|
}
|
|
|
|
const handleEmptyDialogCancel = () => {
|
|
setEmptyDialog(false)
|
|
}
|
|
|
|
const contextMenuItems = [
|
|
{ label: '恢复', onClick: handleRestore },
|
|
{ label: '彻底删除', onClick: handlePermanentDeleteClick }
|
|
]
|
|
|
|
const deleteItem = deleteDialog.item
|
|
const deleteExpectedText = deleteItem?.type === 'dir' ? 'DESTROY FOLDER' : 'DESTROY FILE'
|
|
const deleteTitle = deleteItem?.type === 'dir' ? '彻底删除文件夹' : '彻底删除文件'
|
|
const deleteMessage = deleteItem?.type === 'dir'
|
|
? `确定要彻底删除文件夹 "${deleteItem?.originalName}" 吗？此操作不可撤销，文件夹中的所有内容都将被永久删除。`
|
|
: `确定要彻底删除文件 "${deleteItem?.originalName}" 吗？此操作不可撤销，文件将被永久删除。`
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto w-full px-14 py-12 pb-40">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Trash2 size={28} className="text-gray-600 dark:text-gray-300" />
|
|
<h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200">回收站</h1>
|
|
</div>
|
|
{groups.length > 0 && (
|
|
<button
|
|
onClick={handleEmptyClick}
|
|
className="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-lg transition-colors"
|
|
>
|
|
清空
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 size={32} className="animate-spin text-gray-400" />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-4 rounded-lg">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && groups.length === 0 && (
|
|
<div className="text-center py-12 text-gray-500 dark:text-gray-400">
|
|
<Trash2 size={48} className="mx-auto mb-4 opacity-30" />
|
|
<p>回收站是空的</p>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && groups.length > 0 && (
|
|
<div className="space-y-6">
|
|
{groups.map((group) => (
|
|
<div
|
|
key={group.date}
|
|
className="bg-white/60 dark:bg-gray-900/60 backdrop-blur-md rounded-xl border border-gray-200/50 dark:border-gray-700/60 shadow-sm overflow-hidden"
|
|
>
|
|
<div
|
|
className="px-4 py-3 border-b border-gray-200/50 dark:border-gray-700/60 font-medium text-gray-700 dark:text-gray-200"
|
|
style={{
|
|
backgroundColor: `rgba(var(--app-content-bg-rgb), ${opacity * 0.8})`
|
|
}}
|
|
>
|
|
{formatDate(group.date)}
|
|
</div>
|
|
<div className="divide-y divide-gray-200/50 dark:divide-gray-700/60">
|
|
{group.items.map((item) => (
|
|
<div
|
|
key={item.path}
|
|
className="flex items-center gap-3 px-4 py-3 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer"
|
|
onContextMenu={(e) => handleContextMenu(e, item)}
|
|
>
|
|
{item.type === 'dir' ? (
|
|
<Folder size={20} className="text-gray-500 dark:text-gray-400 shrink-0" />
|
|
) : (
|
|
<FileText size={20} className="text-gray-500 dark:text-gray-400 shrink-0" />
|
|
)}
|
|
<span className="text-gray-700 dark:text-gray-200 truncate">
|
|
{item.originalName}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<ContextMenu
|
|
isOpen={contextMenu.isOpen}
|
|
position={contextMenu.position}
|
|
items={contextMenuItems}
|
|
onClose={handleCloseContextMenu}
|
|
/>
|
|
|
|
<DeleteConfirmDialog
|
|
isOpen={deleteDialog.isOpen}
|
|
title={deleteTitle}
|
|
message={deleteMessage}
|
|
expectedText={deleteExpectedText}
|
|
confirmText="彻底删除"
|
|
onConfirm={handlePermanentDeleteConfirm}
|
|
onCancel={handleDeleteDialogCancel}
|
|
/>
|
|
|
|
<DeleteConfirmDialog
|
|
isOpen={emptyDialog}
|
|
title="清空回收站"
|
|
message="确定要清空回收站吗？此操作将永久删除回收站中的所有文件和文件夹，且不可撤销。"
|
|
expectedText="DESTROY EVERYTHING"
|
|
confirmText="清空"
|
|
buttonVariant="primary"
|
|
onConfirm={handleEmptyConfirm}
|
|
onCancel={handleEmptyDialogCancel}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|