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

- 新增回收站相关 API 接口 - 添加回收站页面组件和路由 - 实现笔记和分类的软删除功能 - 支持回收站内容的获取、恢复和永久删除操作 - 优化用户界面，增加回收站入口和相关提示
2025-07-31 19:21:58 +08:00
parent 384ac43370
commit 8cbd5b02b3
7 changed files with 485 additions and 7 deletions
--- a/biji-qianduan/package-lock.json
+++ b/biji-qianduan/package-lock.json
@@ -12,6 +12,8 @@
        "codemirror": "^6.0.1",
        "element-plus": "^2.10.4",
        "highlight.js": "^11.11.1",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^3.0.1",
        "pinia": "^3.0.3",
        "pinia-plugin-persistedstate": "^4.4.1",
        "vditor": "^3.11.1",
@@ -1132,6 +1134,20 @@
        "undici-types": "~7.8.0"
      }
    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/unist": {
      "version": "2.0.11",
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
@@ -1604,6 +1620,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/birpc": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
@@ -1665,6 +1690,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/cache-base": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -1691,6 +1728,26 @@
      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
      "license": "MIT"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -1855,6 +1912,18 @@
        "toggle-selection": "^1.0.6"
      }
    },
+    "node_modules/core-js": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.44.0.tgz",
+      "integrity": "sha512-aFCtd4l6GvAXwVEh3XbbVqJGHDJt0OZRa+5ePGx3LLwi12WfexqQxcsohb2wgsa/92xtl19Hd66G/L+TaAxDMw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/cose-base": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
@@ -1870,6 +1939,15 @@
      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
      "license": "MIT"
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/cssfilter": {
      "version": "0.0.10",
      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
@@ -2795,6 +2873,12 @@
        }
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -3075,6 +3159,19 @@
      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
      "license": "MIT"
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -3304,6 +3401,34 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jspdf": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf/node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/katex": {
      "version": "0.13.24",
      "resolved": "https://registry.npmjs.org/katex/-/katex-0.13.24.tgz",
@@ -4300,6 +4425,13 @@
      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
      "license": "MIT"
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4422,6 +4554,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regex-not": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -4481,6 +4630,16 @@
      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
      "license": "MIT"
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/robust-predicates": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
@@ -4844,6 +5003,16 @@
      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/static-extend": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -4927,6 +5096,25 @@
        "node": ">=4"
      }
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.14",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -5149,6 +5337,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "node_modules/uuid": {
      "version": "9.0.1",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
--- a/biji-qianduan/package.json
+++ b/biji-qianduan/package.json
@@ -13,6 +13,8 @@
    "codemirror": "^6.0.1",
    "element-plus": "^2.10.4",
    "highlight.js": "^11.11.1",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.1",
    "pinia": "^3.0.3",
    "pinia-plugin-persistedstate": "^4.4.1",
    "vditor": "^3.11.1",
--- a/biji-qianduan/src/api/CommonApi.js
+++ b/biji-qianduan/src/api/CommonApi.js
@@ -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');
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/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;
--- a/biji-qianduan/src/components/TrashPage.vue
+++ b/biji-qianduan/src/components/TrashPage.vue
@@ -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>
--- a/biji-qianduan/src/router/index.js
+++ b/biji-qianduan/src/router/index.js
@@ -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
  }
 ];

--- a/回收站功能设计.md
+++ b/回收站功能设计.md
@@ -0,0 +1,22 @@
+# 回收站功能设计方案
+
+## 功能需求
+- 实现笔记和分类的软删除功能
+- 提供30天数据保留期
+- 支持恢复和永久删除操作
+
+## 前端修改
+1. 侧边栏添加回收站入口
+2. 删除操作改为"移至回收站"
+3. 新建TrashPage.vue组件
+
+## 后端修改
+```sql
+ALTER TABLE markdown ADD COLUMN is_deleted BOOLEAN DEFAULT false;
+ALTER TABLE markdown ADD COLUMN deleted_at TIMESTAMP;
+```
+
+## API接口
+- GET /api/trash - 获取回收站内容
+- POST /api/trash/restore - 恢复项目
+- DELETE /api/trash/clean - 清空回收站