diff --git a/biji-qianduan/package-lock.json b/biji-qianduan/package-lock.json index 72afe44..377d74a 100644 --- 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", diff --git a/biji-qianduan/package.json b/biji-qianduan/package.json index b089ac1..98b8b70 100644 --- 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", diff --git a/biji-qianduan/src/api/CommonApi.js b/biji-qianduan/src/api/CommonApi.js index 4f44429..bd3a719 100644 --- 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'); diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue index 569bc18..5e62255 100644 --- a/biji-qianduan/src/components/HomePage.vue +++ b/biji-qianduan/src/components/HomePage.vue @@ -26,6 +26,10 @@ + + + + @@ -46,7 +50,18 @@ 返回 保存 {{ saveStatus }} - 导出为.md + + + 导出 + + +
@@ -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 = ` + + + + + ${title} + + + + +

${title}

+ ${htmlContent} + + + `; + 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; diff --git a/biji-qianduan/src/components/TrashPage.vue b/biji-qianduan/src/components/TrashPage.vue new file mode 100644 index 0000000..268ed4c --- /dev/null +++ b/biji-qianduan/src/components/TrashPage.vue @@ -0,0 +1,104 @@ + + + + + \ No newline at end of file diff --git a/biji-qianduan/src/router/index.js b/biji-qianduan/src/router/index.js index eea42c0..97e135d 100644 --- 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 } ]; diff --git a/回收站功能设计.md b/回收站功能设计.md new file mode 100644 index 0000000..65a66e8 --- /dev/null +++ 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 - 清空回收站 \ No newline at end of file