优化大pdf加载
parent
1319310b5a
commit
bb323f89e4
|
|
@ -341,16 +341,20 @@ async def upload_document(
|
|||
async def get_document_file(
|
||||
project_id: int,
|
||||
path: str,
|
||||
request: Request,
|
||||
current_user: User = Depends(get_user_from_token_or_query),
|
||||
db: AsyncSession = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
获取文档文件（PDF等）- 返回文件流
|
||||
获取文档文件（PDF等）- 支持 HTTP Range 请求
|
||||
|
||||
Args:
|
||||
project_id: 项目ID
|
||||
path: 文件相对路径（如 "manual.pdf" 或 "docs/guide.pdf"）
|
||||
"""
|
||||
import re
|
||||
import aiofiles
|
||||
|
||||
project = await check_project_access(project_id, current_user, db)
|
||||
|
||||
# 获取文件路径
|
||||
|
|
@ -364,14 +368,56 @@ async def get_document_file(
|
|||
if not content_type:
|
||||
content_type = "application/octet-stream"
|
||||
|
||||
# 返回文件流
|
||||
# 获取文件大小
|
||||
file_size = file_path.stat().st_size
|
||||
|
||||
# 检查是否有 Range 请求头
|
||||
range_header = request.headers.get("range")
|
||||
|
||||
if range_header:
|
||||
# 解析 Range 头: bytes=start-end
|
||||
range_match = re.match(r"bytes=(\d+)-(\d*)", range_header)
|
||||
if range_match:
|
||||
start = int(range_match.group(1))
|
||||
end = int(range_match.group(2)) if range_match.group(2) else file_size - 1
|
||||
end = min(end, file_size - 1)
|
||||
|
||||
# 读取指定范围的文件内容
|
||||
async def file_iterator():
|
||||
async with aiofiles.open(file_path, 'rb') as f:
|
||||
await f.seek(start)
|
||||
chunk_size = 1024 * 1024 # 1MB chunks
|
||||
remaining = end - start + 1
|
||||
while remaining > 0:
|
||||
chunk = await f.read(min(chunk_size, remaining))
|
||||
if not chunk:
|
||||
break
|
||||
remaining -= len(chunk)
|
||||
yield chunk
|
||||
|
||||
headers = {
|
||||
"Content-Range": f"bytes {start}-{end}/{file_size}",
|
||||
"Accept-Ranges": "bytes",
|
||||
"Content-Length": str(end - start + 1),
|
||||
}
|
||||
|
||||
return StreamingResponse(
|
||||
file_iterator(),
|
||||
status_code=206, # Partial Content
|
||||
headers=headers,
|
||||
media_type=content_type
|
||||
)
|
||||
|
||||
# 正常请求，返回完整文件（添加 Accept-Ranges 头）
|
||||
return FileResponse(
|
||||
path=str(file_path),
|
||||
media_type=content_type,
|
||||
filename=file_path.name
|
||||
filename=file_path.name,
|
||||
headers={"Accept-Ranges": "bytes"}
|
||||
)
|
||||
|
||||
|
||||
|
||||
@router.get("/{project_id}/assets/{subfolder}/{filename}")
|
||||
async def get_asset_file(
|
||||
project_id: int,
|
||||
|
|
|
|||
|
|
@ -309,10 +309,8 @@ class StorageService:
|
|||
detail=f"不支持的文件类型: {file_ext}。允许的类型: {', '.join(allowed_extensions)}"
|
||||
)
|
||||
|
||||
# 生成唯一文件名（保留原始文件名+时间戳）
|
||||
original_name = Path(file.filename).stem
|
||||
timestamp = uuid.uuid4().hex[:8]
|
||||
unique_filename = f"{original_name}_{timestamp}{file_ext}"
|
||||
# 使用原始文件名（不添加时间戳）
|
||||
unique_filename = file.filename
|
||||
|
||||
# 目标路径
|
||||
if target_dir:
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
"react-markdown": "^9.0.1",
|
||||
"react-pdf": "^10.2.0",
|
||||
"react-router-dom": "^6.20.1",
|
||||
"react-virtuoso": "^4.18.1",
|
||||
"react-window": "^2.2.3",
|
||||
"rehype-highlight": "^7.0.2",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -129,4 +129,3 @@ export function getDocumentUrl(projectId, path) {
|
|||
const encodedPath = path.split('/').map(part => encodeURIComponent(part)).join('/')
|
||||
return `/api/v1/files/${projectId}/document/${encodedPath}`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,4 +78,3 @@ export function getPreviewDocumentUrl(projectId, path) {
|
|||
const encodedPath = path.split('/').map(part => encodeURIComponent(part)).join('/')
|
||||
return `/api/v1/preview/${projectId}/document/${encodedPath}`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #b8178d;
|
||||
background: rgba(184, 23, 141, 0.06);
|
||||
color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
/* 右侧区域 */
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
}
|
||||
|
||||
.header-icon:hover {
|
||||
color: #b8178d;
|
||||
background: rgba(184, 23, 141, 0.06);
|
||||
color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
.header-link {
|
||||
|
|
@ -100,8 +100,8 @@
|
|||
}
|
||||
|
||||
.header-link:hover {
|
||||
color: #b8178d;
|
||||
background: rgba(184, 23, 141, 0.06);
|
||||
color: #1677ff;
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
}
|
||||
|
||||
.user-info:hover {
|
||||
background: rgba(184, 23, 141, 0.06);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
.username {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ function AppHeader({ collapsed, onToggle }) {
|
|||
<div className="header-left">
|
||||
{/* Logo 区域 */}
|
||||
<div className="header-logo">
|
||||
<h2 style={{ margin: 0, color: '#1890ff', fontWeight: 'bold' }}>NEX Docus</h2>
|
||||
<h2 style={{ margin: 0, color: '#1677ff', fontWeight: 'bold' }}>NEX Docus</h2>
|
||||
</div>
|
||||
|
||||
{/* 折叠按钮 */}
|
||||
|
|
@ -98,11 +98,16 @@ function AppHeader({ collapsed, onToggle }) {
|
|||
))}
|
||||
|
||||
{/* 消息中心 */}
|
||||
<Badge count={5} size="small" offset={[-3, 3]}>
|
||||
<div className="header-icon" title="消息中心">
|
||||
<div
|
||||
className="header-link"
|
||||
title="消息中心"
|
||||
onClick={() => handleHeaderMenuClick('messages')}
|
||||
>
|
||||
<Badge count={5} size="small" offset={[4, -2]}>
|
||||
<BellOutlined />
|
||||
</div>
|
||||
</Badge>
|
||||
<span className="ml-1">消息</span>
|
||||
</div>
|
||||
|
||||
{/* 用户下拉菜单 */}
|
||||
<Dropdown
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
.virtual-pdf-viewer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.pdf-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.pdf-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pdf-virtual-list {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.pdf-page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.pdf-page-wrapper canvas {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
background: white;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pdf-page-number {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdf-page-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 600px;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pdf-page-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 600px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pdf-page-skeleton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
.pdf-page-error {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
background: white;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.pdf-page-error p {
|
||||
color: #ff4d4f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pdf-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.pdf-error {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
color: #ff4d4f;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 文本层样式优化 */
|
||||
.react-pdf__Page__textContent {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/* 注释层样式优化 */
|
||||
.react-pdf__Page__annotations {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Document容器样式 - 确保不限制高度 */
|
||||
.react-pdf__Document {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
|
||||
import { Document, Page, pdfjs } from 'react-pdf'
|
||||
import { Button, Space, InputNumber, message, Spin } from 'antd'
|
||||
import {
|
||||
ZoomInOutlined,
|
||||
ZoomOutOutlined,
|
||||
VerticalAlignTopOutlined,
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import 'react-pdf/dist/Page/AnnotationLayer.css'
|
||||
import 'react-pdf/dist/Page/TextLayer.css'
|
||||
import './VirtualPDFViewer.css'
|
||||
|
||||
// 配置 PDF.js worker
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = '/pdf-worker/pdf.worker.min.mjs'
|
||||
|
||||
function VirtualPDFViewer({ url, filename }) {
|
||||
const [numPages, setNumPages] = useState(null)
|
||||
const [scale, setScale] = useState(1.0)
|
||||
const [pdfOriginalSize, setPdfOriginalSize] = useState({ width: 595, height: 842 }) // 默认 A4
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [visiblePages, setVisiblePages] = useState(new Set([1]))
|
||||
const containerRef = useRef(null)
|
||||
const pageRefs = useRef({})
|
||||
|
||||
// 使用 useMemo 避免不必要的重新加载
|
||||
const fileConfig = useMemo(() => ({ url }), [url])
|
||||
|
||||
// Memoize PDF.js options to prevent unnecessary reloads
|
||||
const pdfOptions = useMemo(() => ({
|
||||
cMapUrl: 'https://unpkg.com/pdfjs-dist@5.4.296/cmaps/',
|
||||
cMapPacked: true,
|
||||
standardFontDataUrl: 'https://unpkg.com/pdfjs-dist@5.4.296/standard_fonts/',
|
||||
}), [])
|
||||
|
||||
// 根据 PDF 实际宽高和缩放比例计算页面高度
|
||||
const pageHeight = useMemo(() => {
|
||||
// 计算内容高度：缩放后的 PDF 高度 + 上下 padding (40px) + 页码文字区域 (20px)
|
||||
return Math.ceil(pdfOriginalSize.height * scale) + 60
|
||||
}, [scale, pdfOriginalSize.height])
|
||||
|
||||
const onDocumentLoadError = (error) => {
|
||||
console.error('[PDF] Document load error:', error)
|
||||
message.error('PDF文件加载失败')
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handle scroll to update visible pages
|
||||
const handleScroll = useCallback(() => {
|
||||
if (!containerRef.current || !numPages) return
|
||||
|
||||
const container = containerRef.current
|
||||
const scrollTop = container.scrollTop
|
||||
const containerHeight = container.clientHeight
|
||||
|
||||
// Calculate which pages are visible
|
||||
// Add small tolerance (1px) to handle browser scroll precision issues
|
||||
const pageIndex = scrollTop / pageHeight
|
||||
let firstVisiblePage = Math.max(1, Math.ceil(pageIndex + 0.001))
|
||||
|
||||
// Special case: if scrolled to bottom, show last page
|
||||
const isAtBottom = scrollTop + containerHeight >= container.scrollHeight - 1
|
||||
if (isAtBottom) {
|
||||
firstVisiblePage = numPages
|
||||
}
|
||||
|
||||
const lastVisiblePage = Math.min(numPages, Math.ceil((scrollTop + containerHeight) / pageHeight))
|
||||
|
||||
|
||||
|
||||
// Add buffer pages (2 before and 2 after)
|
||||
const newVisiblePages = new Set()
|
||||
for (let i = Math.max(1, firstVisiblePage - 2); i <= Math.min(numPages, lastVisiblePage + 2); i++) {
|
||||
newVisiblePages.add(i)
|
||||
}
|
||||
|
||||
setVisiblePages(newVisiblePages)
|
||||
setCurrentPage(firstVisiblePage)
|
||||
}, [numPages, pageHeight])
|
||||
|
||||
const onDocumentLoadSuccess = useCallback(async (pdf) => {
|
||||
setNumPages(pdf.numPages)
|
||||
|
||||
try {
|
||||
// 获取第一页的原始尺寸，用于计算初始缩放
|
||||
const page = await pdf.getPage(1)
|
||||
const viewport = page.getViewport({ scale: 1.0 })
|
||||
const { width, height } = viewport
|
||||
setPdfOriginalSize({ width, height })
|
||||
|
||||
// 自动适应宽度：仅当 PDF 宽度超过容器时才进行缩放
|
||||
if (containerRef.current) {
|
||||
const containerWidth = containerRef.current.clientWidth - 40 // 减去左右内边距
|
||||
if (width > containerWidth) {
|
||||
const autoScale = Math.floor((containerWidth / width) * 10) / 10 // 保留一位小数
|
||||
setScale(Math.min(Math.max(autoScale, 0.5), 1.0)) // 限制缩放比例，最高不超 1.0
|
||||
} else {
|
||||
setScale(1.0) // 宽度足够则保持 100%
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error calculating initial scale:', err)
|
||||
}
|
||||
|
||||
// Initially show first 3 pages
|
||||
setVisiblePages(new Set([1, 2, 3]))
|
||||
|
||||
// Trigger scroll calculation after a short delay to ensure DOM is ready
|
||||
setTimeout(() => {
|
||||
handleScroll()
|
||||
}, 200)
|
||||
}, [handleScroll])
|
||||
|
||||
// Attach scroll listener
|
||||
useEffect(() => {
|
||||
const container = containerRef.current
|
||||
if (!container) return
|
||||
|
||||
container.addEventListener('scroll', handleScroll)
|
||||
return () => container.removeEventListener('scroll', handleScroll)
|
||||
}, [handleScroll, numPages, pageHeight])
|
||||
|
||||
const zoomIn = () => {
|
||||
setScale((prev) => Math.min(prev + 0.2, 3.0))
|
||||
}
|
||||
|
||||
const zoomOut = () => {
|
||||
setScale((prev) => Math.max(prev - 0.2, 0.5))
|
||||
}
|
||||
|
||||
const handlePageChange = (value) => {
|
||||
if (value >= 1 && value <= numPages && containerRef.current) {
|
||||
const scrollTop = (value - 1) * pageHeight
|
||||
const container = containerRef.current
|
||||
container.scrollTo({ top: scrollTop, behavior: 'auto' })
|
||||
|
||||
// Manually trigger handleScroll after scrolling to ensure page number updates
|
||||
setTimeout(() => {
|
||||
handleScroll()
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
if (containerRef.current) {
|
||||
containerRef.current.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="virtual-pdf-viewer-container">
|
||||
{/* 工具栏 */}
|
||||
<div className="pdf-toolbar">
|
||||
<Space>
|
||||
<Button
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
size="small"
|
||||
/>
|
||||
<Space.Compact>
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={numPages || 1}
|
||||
value={currentPage}
|
||||
onChange={handlePageChange}
|
||||
size="small"
|
||||
style={{ width: 60 }}
|
||||
/>
|
||||
<Button size="small" disabled>
|
||||
/ {numPages || 0}
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
<Button
|
||||
icon={<RightOutlined />}
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage >= (numPages || 0)}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
icon={<VerticalAlignTopOutlined />}
|
||||
onClick={scrollToTop}
|
||||
size="small"
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
回到顶部
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<Space>
|
||||
<Button icon={<ZoomOutOutlined />} onClick={zoomOut} size="small">
|
||||
缩小
|
||||
</Button>
|
||||
<span style={{ minWidth: 50, textAlign: 'center' }}>
|
||||
{Math.round(scale * 100)}%
|
||||
</span>
|
||||
<Button icon={<ZoomInOutlined />} onClick={zoomIn} size="small">
|
||||
放大
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* PDF内容区 - 自定义虚拟滚动 */}
|
||||
<div className="pdf-content" ref={containerRef}>
|
||||
<Document
|
||||
file={fileConfig}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={onDocumentLoadError}
|
||||
loading={
|
||||
<div className="pdf-loading">
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 16 }}>正在加载PDF...</div>
|
||||
</div>
|
||||
}
|
||||
error={<div className="pdf-error">PDF加载失败，请稍后重试</div>}
|
||||
options={pdfOptions}
|
||||
>
|
||||
{numPages && (
|
||||
<div style={{ height: numPages * pageHeight, position: 'relative' }}>
|
||||
{Array.from({ length: numPages }, (_, index) => {
|
||||
const pageNumber = index + 1
|
||||
const isVisible = visiblePages.has(pageNumber)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={pageNumber}
|
||||
ref={el => pageRefs.current[pageNumber] = el}
|
||||
className="pdf-page-wrapper"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: index * pageHeight,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: pageHeight,
|
||||
}}
|
||||
>
|
||||
{isVisible ? (
|
||||
<>
|
||||
<Page
|
||||
pageNumber={pageNumber}
|
||||
scale={scale}
|
||||
renderTextLayer={true}
|
||||
renderAnnotationLayer={true}
|
||||
loading={
|
||||
<div className="pdf-page-loading">
|
||||
<Spin size="small" />
|
||||
<div>加载第 {pageNumber} 页...</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="pdf-page-number">第 {pageNumber} 页</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="pdf-page-placeholder">
|
||||
<div>第 {pageNumber} 页</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Document>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default VirtualPDFViewer
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/* 覆盖MainLayout的content-wrapper padding */
|
||||
.document-editor-page {
|
||||
height: calc(90vh);
|
||||
height: calc(100vh - 64px);
|
||||
/* width: calc(100% + 32px); */
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -14,44 +13,84 @@
|
|||
|
||||
.document-sider {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sider-header {
|
||||
padding: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sider-header h3 {
|
||||
.sider-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sider-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sider-actions .ant-btn {
|
||||
.mode-toggle-btn {
|
||||
border-radius: 6px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 32px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0 12px !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mode-toggle-btn.exit-edit {
|
||||
background: linear-gradient(135deg, #00b96b 0%, #52c41a 100%) !important;
|
||||
color: white !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 185, 107, 0.2);
|
||||
}
|
||||
|
||||
.mode-toggle-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.mode-toggle-btn.exit-edit:hover {
|
||||
box-shadow: 0 4px 10px rgba(0, 185, 107, 0.3);
|
||||
}
|
||||
|
||||
.sider-actions .ant-btn:not(.mode-toggle-btn) {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.sider-actions .ant-btn:hover {
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
.sider-actions .ant-btn:not(.mode-toggle-btn):hover {
|
||||
background: #fff;
|
||||
border-color: #d9d9d9;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 修复Tree组件文档名过长的显示问题 */
|
||||
|
|
@ -74,7 +113,8 @@
|
|||
/* 确保Tree节点标题区域不折行 */
|
||||
.file-tree .ant-tree-node-content-wrapper .ant-tree-title {
|
||||
display: inline-block;
|
||||
max-width: calc(100% - 24px); /* 预留图标空间 */
|
||||
max-width: calc(100% - 24px);
|
||||
/* 预留图标空间 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap !important;
|
||||
|
|
@ -86,7 +126,8 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1; /* Ensure it allows children to fill width */
|
||||
flex: 1;
|
||||
/* Ensure it allows children to fill width */
|
||||
}
|
||||
|
||||
/* Increase hit area for context menu */
|
||||
|
|
@ -102,19 +143,20 @@
|
|||
}
|
||||
|
||||
/* 选中的文件夹样式 */
|
||||
.file-tree .folder-selected > .ant-menu-submenu-title {
|
||||
.file-tree .folder-selected>.ant-menu-submenu-title {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
.file-tree .folder-selected > .ant-menu-submenu-title:hover {
|
||||
.file-tree .folder-selected>.ant-menu-submenu-title:hover {
|
||||
background-color: #bae7ff !important;
|
||||
}
|
||||
|
||||
.file-tree .ant-menu-item,
|
||||
.file-tree .ant-menu-submenu-title {
|
||||
overflow: hidden;
|
||||
display: flex !important; /* Ensure flex layout for item */
|
||||
display: flex !important;
|
||||
/* Ensure flex layout for item */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -160,7 +202,8 @@
|
|||
.bytemd-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column; /* Changed to column to force child stretch width */
|
||||
flex-direction: column;
|
||||
/* Changed to column to force child stretch width */
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -170,7 +213,7 @@
|
|||
}
|
||||
|
||||
/* Fix for bytemd-react wrapper div */
|
||||
.bytemd-wrapper > div {
|
||||
.bytemd-wrapper>div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -196,7 +239,8 @@
|
|||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
max-width: none !important; /* Ensure no max-width constraint */
|
||||
max-width: none !important;
|
||||
/* Ensure no max-width constraint */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +249,8 @@
|
|||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
box-sizing: border-box; /* Added for consistent box model */
|
||||
box-sizing: border-box;
|
||||
/* Added for consistent box model */
|
||||
}
|
||||
|
||||
/* 编辑和预览区域容器 */
|
||||
|
|
@ -215,8 +260,10 @@
|
|||
overflow: hidden;
|
||||
min-height: 0;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box; /* Added for consistent box model */
|
||||
min-width: 0; /* Prevent flex item from overflowing */
|
||||
box-sizing: border-box;
|
||||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
}
|
||||
|
||||
/* 编辑区域 - 固定50%宽度 */
|
||||
|
|
@ -228,8 +275,10 @@
|
|||
overflow: hidden;
|
||||
min-height: 0;
|
||||
max-width: 50% !important;
|
||||
box-sizing: border-box; /* Added for consistent box model */
|
||||
min-width: 0; /* Prevent flex item from overflowing */
|
||||
box-sizing: border-box;
|
||||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
}
|
||||
|
||||
/* 预览区域 - 固定50%宽度 */
|
||||
|
|
@ -242,8 +291,10 @@
|
|||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
max-width: 50% !important;
|
||||
box-sizing: border-box; /* Added for consistent box model */
|
||||
min-width: 0; /* Prevent flex item from overflowing */
|
||||
box-sizing: border-box;
|
||||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
}
|
||||
|
||||
/* CodeMirror 容器 */
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ function DocumentEditor() {
|
|||
const [openKeys, setOpenKeys] = useState([]) // Menu组件的展开项
|
||||
const [uploadProgress, setUploadProgress] = useState(0) // 上传进度
|
||||
const [uploading, setUploading] = useState(false) // 是否正在上传
|
||||
const [fileList, setFileList] = useState([]) // 控制上传文件列表
|
||||
const [selectedMenuKey, setSelectedMenuKey] = useState(null) // 当前选中的菜单项（文件或文件夹）
|
||||
const uploadingRef = useRef(false) // 使用ref防止重复上传
|
||||
const [isPdfSelected, setIsPdfSelected] = useState(false) // 是否选中了PDF文件
|
||||
|
|
@ -370,15 +371,19 @@ function DocumentEditor() {
|
|||
return
|
||||
}
|
||||
|
||||
const { fileList } = info
|
||||
const { fileList: currentFileList } = info
|
||||
|
||||
// 立即更新state以显示当前选择的文件
|
||||
setFileList(currentFileList)
|
||||
|
||||
// 过滤出有效文件
|
||||
const mdFiles = fileList.filter((f) => f.name.endsWith('.md'))
|
||||
const pdfFiles = fileList.filter((f) => f.name.toLowerCase().endsWith('.pdf'))
|
||||
const mdFiles = currentFileList.filter((f) => f.name.endsWith('.md'))
|
||||
const pdfFiles = currentFileList.filter((f) => f.name.toLowerCase().endsWith('.pdf'))
|
||||
const allFiles = [...mdFiles, ...pdfFiles]
|
||||
|
||||
if (allFiles.length === 0) {
|
||||
Toast.warning('提示', '请选择.md或.pdf格式的文档')
|
||||
setFileList([]) // 清空文件列表
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -457,6 +462,7 @@ function DocumentEditor() {
|
|||
Toast.success('成功', `成功上传 ${successCount} 个文档`)
|
||||
fetchTree()
|
||||
// 清除文件选择
|
||||
setFileList([])
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
|
|
@ -783,16 +789,17 @@ function DocumentEditor() {
|
|||
className="document-sider"
|
||||
>
|
||||
<div className="sider-header">
|
||||
<h3>项目文档（编辑模式）</h3>
|
||||
<h2>项目文档</h2>
|
||||
<div className="sider-actions">
|
||||
<Tooltip title="返回浏览">
|
||||
<Button
|
||||
type="text"
|
||||
size="middle"
|
||||
type="primary"
|
||||
size="small"
|
||||
className="mode-toggle-btn exit-edit"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => navigate(`/projects/${projectId}/docs`)}
|
||||
/>
|
||||
</Tooltip>
|
||||
>
|
||||
退出编辑
|
||||
</Button>
|
||||
<Tooltip title="添加文件">
|
||||
<Button
|
||||
type="text"
|
||||
|
|
@ -813,6 +820,7 @@ function DocumentEditor() {
|
|||
multiple
|
||||
accept=".md,.pdf,application/pdf"
|
||||
showUploadList={false}
|
||||
fileList={fileList}
|
||||
beforeUpload={() => false}
|
||||
onChange={handleImportDocuments}
|
||||
>
|
||||
|
|
@ -913,9 +921,9 @@ function DocumentEditor() {
|
|||
<Modal
|
||||
title={
|
||||
operationType === 'create_file'
|
||||
? `创建文件 (dir: /${creationParentPath || '/'})`
|
||||
? `创建文件 (dir: /${creationParentPath || ''})`
|
||||
: operationType === 'create_dir'
|
||||
? `创建文件夹 (dir: /${creationParentPath || '/'})`
|
||||
? `创建文件夹 (dir: /${creationParentPath || ''})`
|
||||
: '重命名'
|
||||
}
|
||||
open={modalVisible}
|
||||
|
|
|
|||
|
|
@ -17,41 +17,61 @@
|
|||
}
|
||||
|
||||
.docs-sider-header {
|
||||
padding: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.docs-sider-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.docs-sider-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.docs-sider-actions .ant-btn {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e8e8e8;
|
||||
.mode-toggle-btn {
|
||||
border-radius: 6px !important;
|
||||
font-weight: 500 !important;
|
||||
box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2);
|
||||
background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%) !important;
|
||||
border: none !important;
|
||||
height: 32px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.docs-sider-actions .ant-btn-text {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
.mode-toggle-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(22, 119, 255, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.docs-sider-actions .ant-btn:hover {
|
||||
border-color: #91d5ff;
|
||||
.docs-sider-actions .ant-btn:not(.mode-toggle-btn) {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.docs-sider-actions .ant-btn-text:hover {
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
background: #e6f4ff;
|
||||
border-color: #91caff;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.docs-menu {
|
||||
|
|
@ -112,7 +132,8 @@
|
|||
|
||||
.toc-content .ant-anchor {
|
||||
padding-left: 0;
|
||||
padding-bottom: 65px; /* 给Anchor组件添加底部内边距，避免最后一项被遮挡 */
|
||||
padding-bottom: 65px;
|
||||
/* 给Anchor组件添加底部内边距，避免最后一项被遮挡 */
|
||||
}
|
||||
|
||||
.toc-content .ant-anchor-link {
|
||||
|
|
@ -126,7 +147,7 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toc-content .ant-anchor-link-active > .ant-anchor-link-title {
|
||||
.toc-content .ant-anchor-link-active>.ant-anchor-link-title {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import rehypeHighlight from 'rehype-highlight'
|
|||
import 'highlight.js/styles/github.css'
|
||||
import { getProjectTree, getFileContent, getDocumentUrl } from '@/api/file'
|
||||
import { getProjectShareInfo, updateShareSettings } from '@/api/share'
|
||||
import PDFViewer from '@/components/PDFViewer/PDFViewer'
|
||||
import VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
|
||||
import './DocumentPage.css'
|
||||
|
||||
const { Sider, Content } = Layout
|
||||
|
|
@ -335,18 +335,19 @@ function DocumentPage() {
|
|||
{/* 左侧目录 */}
|
||||
<Sider width={280} className="docs-sider" theme="light">
|
||||
<div className="docs-sider-header">
|
||||
<h2>项目文档（浏览模式）</h2>
|
||||
<h2>项目文档</h2>
|
||||
<div className="docs-sider-actions">
|
||||
{/* 只有 owner/admin/editor 可以编辑 */}
|
||||
{userRole !== 'viewer' && (
|
||||
<Tooltip title="编辑模式">
|
||||
<Button
|
||||
type="link"
|
||||
size="middle"
|
||||
type="primary"
|
||||
size="small"
|
||||
className="mode-toggle-btn"
|
||||
icon={<EditOutlined />}
|
||||
onClick={handleEdit}
|
||||
/>
|
||||
</Tooltip>
|
||||
>
|
||||
编辑模式
|
||||
</Button>
|
||||
)}
|
||||
<Tooltip title="分享">
|
||||
<Button
|
||||
|
|
@ -389,7 +390,7 @@ function DocumentPage() {
|
|||
</Spin>
|
||||
</div>
|
||||
) : viewMode === 'pdf' ? (
|
||||
<PDFViewer
|
||||
<VirtualPDFViewer
|
||||
url={pdfUrl}
|
||||
filename={pdfFilename}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import rehypeSlug from 'rehype-slug'
|
|||
import rehypeHighlight from 'rehype-highlight'
|
||||
import 'highlight.js/styles/github.css'
|
||||
import { getPreviewInfo, getPreviewTree, getPreviewFile, verifyAccessPassword, getPreviewDocumentUrl } from '@/api/share'
|
||||
import PDFViewer from '@/components/PDFViewer/PDFViewer'
|
||||
import VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
|
||||
import './PreviewPage.css'
|
||||
|
||||
const { Sider, Content } = Layout
|
||||
|
|
@ -316,7 +316,7 @@ function PreviewPage() {
|
|||
</Spin>
|
||||
</div>
|
||||
) : viewMode === 'pdf' ? (
|
||||
<PDFViewer
|
||||
<VirtualPDFViewer
|
||||
url={pdfUrl}
|
||||
filename={pdfFilename}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -560,7 +560,7 @@ function ProjectList({ type = 'my' }) {
|
|||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="分享项目"
|
||||
title="分享设置"
|
||||
open={shareModalVisible}
|
||||
onCancel={() => setShareModalVisible(false)}
|
||||
footer={null}
|
||||
|
|
@ -569,7 +569,7 @@ function ProjectList({ type = 'my' }) {
|
|||
{shareInfo && (
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="large">
|
||||
<div>
|
||||
<label style={{ marginBottom: 8, display: 'block', fontWeight: 500 }}>分享链接</label>
|
||||
<label style={{ marginBottom: 8, display: 'block', fontWeight: 500 }}>链接：</label>
|
||||
<Input
|
||||
value={`${window.location.origin}${shareInfo.share_url}`}
|
||||
readOnly
|
||||
|
|
|
|||
|
|
@ -4504,6 +4504,16 @@ react-router@6.30.2:
|
|||
dependencies:
|
||||
"@remix-run/router" "1.23.1"
|
||||
|
||||
react-virtuoso@^4.18.1:
|
||||
version "4.18.1"
|
||||
resolved "https://registry.npmmirror.com/react-virtuoso/-/react-virtuoso-4.18.1.tgz#3eb7078f2739a31b96c723374019e587deeb6ebc"
|
||||
integrity sha512-KF474cDwaSb9+SJ380xruBB4P+yGWcVkcu26HtMqYNMTYlYbrNy8vqMkE+GpAApPPufJqgOLMoWMFG/3pJMXUA==
|
||||
|
||||
react-window@^2.2.3:
|
||||
version "2.2.3"
|
||||
resolved "https://registry.npmmirror.com/react-window/-/react-window-2.2.3.tgz#f8ffdddbb612ccd3e1314b59fce79af85d3f15e3"
|
||||
integrity sha512-gTRqQYC8ojbiXyd9duYFiSn2TJw0ROXCgYjenOvNKITWzK0m0eCvkUsEUM08xvydkMh7ncp+LE0uS3DeNGZxnQ==
|
||||
|
||||
react@^18.2.0:
|
||||
version "18.3.1"
|
||||
resolved "https://registry.npmmirror.com/react/-/react-18.3.1.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue