ikmkj/biji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(recycle-bin): 实现回收站功能

Browse Source 
- 新增回收站相关 API 接口
- 添加回收站页面组件和路由
- 实现笔记和分类的软删除功能
- 支持回收站内容的获取、恢复和永久删除操作
- 优化用户界面，增加回收站入口和相关提示
This commit is contained in:
ikmkj
2025-07-31 19:21:58 +08:00
parent 384ac43370
commit 8cbd5b02b3
7 changed files with 485 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
biji-qianduan/src/api/CommonApi.js
View File

@@ -115,3 +115,15 @@ export const MD5 = (data, file) => {
// 获取回收站内容
export const getTrash = () => axiosApi.get('/api/trash');
// 恢复项目
export const restoreTrashItem = (id) => axiosApi.post(`/api/trash/restore/${id}`);
// 彻底删除
export const permanentlyDeleteItem = (id) => axiosApi.delete(`/api/trash/permanently/${id}`);
// 清空回收站
export const cleanTrash = () => axiosApi.delete('/api/trash/clean');

149
biji-qianduan/src/components/HomePage.vue
View File

@@ -26,6 +26,10 @@
<template v-for="menu in categoryTree" :key="menu.id">
<component :is="renderMenu(menu)" />
</template>
<ElMenuItem index="trash" @click="goToTrash">
<ElIcon><Delete /></ElIcon>
<template #title>回收站</template>
</ElMenuItem>
</el-menu>
</el-aside>
@@ -46,7 +50,18 @@
<el-button v-if="showEditor" type="primary" @click="showEditor = !showEditor; previewFile(editData)">返回</el-button>
<el-button v-if="showEditor && userStore.isLoggedIn" type="success" @click="handleSave(vditor.getValue())">保存</el-button>
<span v-if="showEditor" class="save-status">{{ saveStatus }}</span>
<el-button v-if="!showEditor" type="success" @click="handleExportMd">导出为.md</el-button>
<el-dropdown v-if="!showEditor" @command="handleExport">
<el-button type="success">
导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="md">导出为 .md</el-dropdown-item>
<el-dropdown-item command="pdf">导出为 .pdf</el-dropdown-item>
<el-dropdown-item command="html">导出为 .html</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
<div v-if="!showEditor" v-html="previewHtml" class="markdown-preview"></div>
@@ -212,7 +227,7 @@ import {
deleteGrouping as apiDeleteGrouping,
getRecentFiles
} from '@/api/CommonApi.js'
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete } from "@element-plus/icons-vue";
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock } from "@element-plus/icons-vue";
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';
@@ -715,18 +730,134 @@ const handleSearch = async () => {
}
};
const handleExportMd = () => {
if (!selectedFile.value) return;
const blob = new Blob([selectedFile.value.content], { type: 'text/markdown;charset=utf-8' });
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
const showExportLoading = ref(false);
// 文件名特殊字符清理
const sanitizeFilename = (name) => name.replace(/[<>:"/\\|?*]/g, '_').trim() || '未命名笔记';
const handleExport = async (format) => {
if (!selectedFile.value || showExportLoading.value) return;
const title = sanitizeFilename(selectedFile.value.title);
const content = selectedFile.value.content;
const previewElement = document.querySelector('.markdown-preview');
if (!previewElement) {
ElMessage.error('无法找到预览区域');
return;
}
showExportLoading.value = true;
ElMessage.info(`正在导出为 ${format.toUpperCase()}...`);
try {
switch (format) {
case 'md':
exportAsMd(title, content);
break;
case 'pdf':
await exportAsPdf(title, previewElement);
break;
case 'html':
exportAsHtml(title, previewElement.innerHTML);
break;
}
ElMessage.success(`${format.toUpperCase()} 导出成功`);
} catch (error) {
console.error('Export failed:', error);
ElMessage.error(`导出失败: ${error.message}`);
} finally {
showExportLoading.value = false;
}
};
const exportAsMd = (title, content) => {
const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
downloadBlob(blob, `${title}.md`);
};
const exportAsPdf = async (title, element) => {
const canvas = await html2canvas(element, {
scale: 2,
useCORS: true,
logging: false,
});
const pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
});
const pageHeight = pdf.internal.pageSize.getHeight() - 20; // 减去页边距
const pageWidth = pdf.internal.pageSize.getWidth() - 20;
const imgWidth = pageWidth;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 10; // 初始Y轴位置
const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
let pageCount = 1;
while (heightLeft > 0) {
pageCount++;
position = -pageHeight * (pageCount - 1) + 10;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
// 添加页眉和页脚
for (let i = 1; i <= pageCount; i++) {
pdf.setPage(i);
pdf.setFontSize(8);
pdf.setTextColor(150);
pdf.text(title, pdf.internal.pageSize.getWidth() / 2, 8, { align: 'center' });
pdf.text(`第 ${i} 页 / 共 ${pageCount} 页`, pdf.internal.pageSize.getWidth() / 2, pdf.internal.pageSize.getHeight() - 8, { align: 'center' });
}
pdf.save(`${title}.pdf`);
};
const exportAsHtml = (title, htmlContent) => {
const fullHtml = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>${title}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css">
<style>
body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; }
@media (max-width: 767px) { body { padding: 15px; } }
</style>
</head>
<body class="markdown-body">
<h1>${title}</h1>
${htmlContent}
</body>
</html>
`;
const blob = new Blob([fullHtml], { type: 'text/html;charset=utf-8' });
downloadBlob(blob, `${title}.html`);
};
const downloadBlob = (blob, filename) => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${selectedFile.value.title}.md`;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
}
const goToLogin = () => {
router.push('/login');
@@ -742,6 +873,10 @@ const handleLogout = () => {
router.push('/login');
};
const goToTrash = () => {
router.push({ name: 'Trash' });
};
const resetToHomeView = async () => {
selectedFile.value = null;
showEditor.value = false;

104
biji-qianduan/src/components/TrashPage.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<el-container>
<el-header>
<h1>回收站</h1>
<el-button type="danger" @click="handleCleanTrash" :disabled="trashItems.length === 0">清空回收站</el-button>
<el-button @click="goBack">返回首页</el-button>
</el-header>
<el-main>
<el-table :data="trashItems" style="width: 100%">
<el-table-column prop="title" label="名称"></el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-tag :type="scope.row.type === 'group' ? 'success' : 'primary'">
{{ scope.row.type === 'group' ? '分类' : '笔记' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="deletedAt" label="删除时间"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" type="primary" @click="handleRestore(scope.row)">恢复</el-button>
<el-button size="small" type="danger" @click="handleDeletePermanently(scope.row)">永久删除</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="trashItems.length === 0" description="回收站是空的"></el-empty>
</el-main>
</el-container>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTrash, restoreTrashItem, permanentlyDeleteItem, cleanTrash } from '@/api/CommonApi.js';
const router = useRouter();
const trashItems = ref([]);
const fetchTrashItems = async () => {
try {
const response = await getTrash();
trashItems.value = response.data || [];
} catch (error) {
ElMessage.error('获取回收站内容失败');
}
};
const handleRestore = async (item) => {
try {
await restoreTrashItem(item.id);
ElMessage.success('恢复成功');
fetchTrashItems();
} catch (error) {
ElMessage.error('恢复失败');
}
};
const handleDeletePermanently = async (item) => {
await ElMessageBox.confirm('确定要永久删除此项目吗？此操作不可恢复。', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await permanentlyDeleteItem(item.id);
ElMessage.success('已永久删除');
fetchTrashItems();
} catch (error) {
ElMessage.error('删除失败');
}
};
const handleCleanTrash = async () => {
await ElMessageBox.confirm('确定要清空回收站吗？此操作不可恢复。', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
try {
await cleanTrash();
ElMessage.success('回收站已清空');
fetchTrashItems();
} catch (error) {
ElMessage.error('清空失败');
}
};
const goBack = () => {
router.push('/home');
};
onMounted(() => {
fetchTrashItems();
});
</script>
<style scoped>
.el-header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

6
biji-qianduan/src/router/index.js
View File

@@ -3,6 +3,7 @@ import HomePage from '../components/HomePage.vue';
import MarkdownEditor from '../components/MarkdownEditor.vue';
import LoginPage from '../components/LoginPage.vue';
import RegisterPage from '../components/RegisterPage.vue';
import TrashPage from '../components/TrashPage.vue';
const routes = [
{
@@ -34,6 +35,11 @@ const routes = [
path: '/register',
name: 'Register',
component: RegisterPage
},
{
path: '/trash',
name: 'Trash',
component: TrashPage
}
];