{/* 工具栏 */}
@@ -187,6 +197,13 @@ function VirtualPDFViewer({ url, filename }) {
>
回到顶部
+
}
+ onClick={handleDownload}
+ size="small"
+ >
+ 下载PDF
+
diff --git a/frontend/src/pages/Preview/PreviewPage.css b/frontend/src/pages/Preview/PreviewPage.css
index f86bb0f..5827e10 100644
--- a/frontend/src/pages/Preview/PreviewPage.css
+++ b/frontend/src/pages/Preview/PreviewPage.css
@@ -366,4 +366,6 @@
.markdown-body code {
font-size: 13px;
}
-}
\ No newline at end of file
+}
+
+/* 打印样式优化已移除，转向后端生成方案 */
\ No newline at end of file
diff --git a/frontend/src/pages/Preview/PreviewPage.jsx b/frontend/src/pages/Preview/PreviewPage.jsx
index 771a452..3366814 100644
--- a/frontend/src/pages/Preview/PreviewPage.jsx
+++ b/frontend/src/pages/Preview/PreviewPage.jsx
@@ -1,20 +1,17 @@
import { useState, useEffect, useRef, useMemo } from 'react'
import { useParams, useSearchParams, useNavigate } from 'react-router-dom'
-import { Layout, Menu, Spin, FloatButton, Button, Modal, Input, message, Drawer, Anchor, Empty, Tooltip } from 'antd'
-import { VerticalAlignTopOutlined, MenuOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, FilePdfOutlined, LockOutlined, SearchOutlined, CloseOutlined } from '@ant-design/icons'
-import { Viewer } from '@bytemd/react'
-import gfm from '@bytemd/plugin-gfm'
-import highlight from '@bytemd/plugin-highlight'
-import breaks from '@bytemd/plugin-breaks'
-import frontmatter from '@bytemd/plugin-frontmatter'
-import gemoji from '@bytemd/plugin-gemoji'
-import 'bytemd/dist/index.css'
+import { Layout, Menu, Spin, FloatButton, Button, Modal, Input, Drawer, Anchor, Empty, Tooltip } from 'antd'
+import Toast from '@/components/Toast/Toast'
+import { VerticalAlignTopOutlined, MenuOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, FilePdfOutlined, LockOutlined, SearchOutlined, CloseOutlined, CloudDownloadOutlined } from '@ant-design/icons'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
import rehypeSlug from 'rehype-slug'
import 'highlight.js/styles/github.css'
import Mark from 'mark.js'
import Highlighter from 'react-highlight-words'
import GithubSlugger from 'github-slugger'
-import { getPreviewInfo, getPreviewTree, getPreviewFile, verifyAccessPassword, getPreviewDocumentUrl } from '@/api/share'
+import { getPreviewInfo, getPreviewTree, getPreviewFile, verifyAccessPassword, getPreviewDocumentUrl, exportPDF } from '@/api/share'
import { searchDocuments } from '@/api/search'
import VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
import './PreviewPage.css'
@@ -74,18 +71,6 @@ function PreviewPage() {
const contentRef = useRef(null)
const viewerRef = useRef(null)
- // ByteMD 插件配置
- const plugins = useMemo(() => [
- gfm(),
- highlight(),
- breaks(),
- frontmatter(),
- gemoji(),
- {
- rehype: (p) => p.use(rehypeSlug)
- }
- ], [])
-
// mark.js 高亮
useEffect(() => {
if (viewerRef.current && viewMode === 'markdown') {
@@ -183,14 +168,14 @@ function PreviewPage() {
}
} catch (error) {
console.error('Load project info error:', error)
- message.error('项目不存在或已被删除')
+ Toast.error('加载失败', '项目不存在或已被删除')
}
}
// 验证密码
const handleVerifyPassword = async () => {
if (!password.trim()) {
- message.warning('请输入访问密码')
+ Toast.warning('提示', '请输入访问密码')
return
}
@@ -199,9 +184,9 @@ function PreviewPage() {
setAccessPassword(password)
setPasswordModalVisible(false)
loadFileTree(password)
- message.success('验证成功')
+ Toast.success('验证成功')
} catch (error) {
- message.error('访问密码错误')
+ Toast.error('访问密码错误')
}
}
@@ -214,7 +199,7 @@ function PreviewPage() {
} catch (error) {
console.error('Load file tree error:', error)
if (error.response?.status === 403) {
- message.error('访问密码错误或已过期')
+ Toast.error('访问密码错误或已过期')
setPasswordModalVisible(true)
}
}
@@ -247,6 +232,7 @@ function PreviewPage() {
setOpenKeys(Array.from(keysToExpand))
} catch (error) {
console.error('Search error:', error)
+ Toast.error('搜索失败', '请稍后重试')
} finally {
setIsSearching(false)
}
@@ -332,10 +318,11 @@ function PreviewPage() {
} catch (error) {
console.error('Load markdown error:', error)
if (error.response?.status === 403) {
- message.error('访问密码错误或已过期')
+ Toast.error('访问密码错误或已过期')
setPasswordModalVisible(true)
} else {
- setMarkdownContent('# 文档加载失败\n\n无法加载该文档，请稍后重试。')
+ Toast.error('加载失败', '文档加载失败，请稍后重试')
+ setMarkdownContent('')
}
} finally {
setLoading(false)
@@ -466,6 +453,38 @@ function PreviewPage() {
}
}
+ // 导出 PDF 处理
+ const handleExportPDF = () => {
+ if (viewMode === 'pdf') {
+ // 如果已经是 PDF 文件，直接下载
+ const link = document.createElement('a')
+ link.href = pdfUrl
+ link.download = pdfFilename
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ } else {
+ // Markdown 文件：使用后端生成 PDF
+ let url = exportPDF(projectId, selectedFile)
+ const params = []
+
+ if (accessPassword) {
+ params.push(`access_pass=${encodeURIComponent(accessPassword)}`)
+ }
+
+ const token = localStorage.getItem('access_token')
+ if (token) {
+ params.push(`token=${encodeURIComponent(token)}`)
+ }
+
+ if (params.length > 0) {
+ url += (url.includes('?') ? '&' : '?') + params.join('&')
+ }
+
+ window.open(url, '_blank')
+ }
+ }
+
const menuItems = convertTreeToMenuItems(filteredTreeData)
return (
@@ -600,25 +619,40 @@ function PreviewPage() {
/>
) : (
-
+
+ {markdownContent}
+
)}