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

- 新增回收站相关 API 接口
- 添加回收站页面组件和路由
- 实现笔记和分类的软删除功能
- 支持回收站内容的获取、恢复和永久删除操作
- 优化用户界面，增加回收站入口和相关提示

biji-qianduan/src/components/HomePage.vue

@@ -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;