476 lines
15 KiB
React
476 lines
15 KiB
React
|
import { useState, useEffect, useRef } from 'react'
|
|||
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|||
|
|
import { Layout, Menu, Spin, FloatButton, Button, Tooltip, message, Anchor, Modal, Input, Switch, Space } from 'antd'
|
|||
|
|
import { EditOutlined, VerticalAlignTopOutlined, ShareAltOutlined, SettingOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, CopyOutlined, LockOutlined } from '@ant-design/icons'
|
|||
|
|
import ReactMarkdown from 'react-markdown'
|
|||
|
|
import remarkGfm from 'remark-gfm'
|
|||
|
|
import rehypeRaw from 'rehype-raw'
|
|||
|
|
import rehypeSlug from 'rehype-slug'
|
|||
|
|
import rehypeHighlight from 'rehype-highlight'
|
|||
|
|
import 'highlight.js/styles/github.css'
|
|||
|
|
import { getProjectTree, getFileContent } from '@/api/file'
|
|||
|
|
import { getProjectShareInfo, updateShareSettings } from '@/api/share'
|
|||
|
|
import MainLayout from '@/components/MainLayout/MainLayout'
|
|||
|
|
import './DocumentPage.css'
|
|||
|
|
|
|||
|
|
const { Sider, Content } = Layout
|
|||
|
|
|
|||
|
|
function DocumentPage() {
|
|||
|
|
const { projectId } = useParams()
|
|||
|
|
const navigate = useNavigate()
|
|||
|
|
const [fileTree, setFileTree] = useState([])
|
|||
|
|
const [selectedFile, setSelectedFile] = useState('')
|
|||
|
|
const [markdownContent, setMarkdownContent] = useState('')
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [openKeys, setOpenKeys] = useState([])
|
|||
|
|
const [tocCollapsed, setTocCollapsed] = useState(false)
|
|||
|
|
const [tocItems, setTocItems] = useState([])
|
|||
|
|
const [shareModalVisible, setShareModalVisible] = useState(false)
|
|||
|
|
const [shareInfo, setShareInfo] = useState(null)
|
|||
|
|
const [hasPassword, setHasPassword] = useState(false)
|
|||
|
|
const [password, setPassword] = useState('')
|
|||
|
|
const contentRef = useRef(null)
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadFileTree()
|
|||
|
|
}, [projectId])
|
|||
|
|
|
|||
|
|
// 加载文件树
|
|||
|
|
const loadFileTree = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await getProjectTree(projectId)
|
|||
|
|
const tree = res.data || []
|
|||
|
|
setFileTree(tree)
|
|||
|
|
|
|||
|
|
// 默认打开 README.md
|
|||
|
|
const readmeNode = findReadme(tree)
|
|||
|
|
if (readmeNode) {
|
|||
|
|
setSelectedFile(readmeNode.key)
|
|||
|
|
loadMarkdown(readmeNode.key)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Load file tree error:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查找根目录的 README.md
|
|||
|
|
const findReadme = (nodes) => {
|
|||
|
|
// 只在根目录查找
|
|||
|
|
for (const node of nodes) {
|
|||
|
|
if (node.title === 'README.md' && node.isLeaf) {
|
|||
|
|
return node
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 转换文件树为菜单项
|
|||
|
|
const convertTreeToMenuItems = (nodes) => {
|
|||
|
|
return nodes.map((node) => {
|
|||
|
|
if (!node.isLeaf) {
|
|||
|
|
// 目录
|
|||
|
|
return {
|
|||
|
|
key: node.key,
|
|||
|
|
label: node.title,
|
|||
|
|
icon: <FolderOutlined />,
|
|||
|
|
children: node.children ? convertTreeToMenuItems(node.children) : [],
|
|||
|
|
}
|
|||
|
|
} else if (node.title && node.title.endsWith('.md')) {
|
|||
|
|
// Markdown 文件
|
|||
|
|
return {
|
|||
|
|
key: node.key,
|
|||
|
|
label: node.title.replace('.md', ''),
|
|||
|
|
icon: <FileTextOutlined />,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
}).filter(Boolean)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载 markdown 文件
|
|||
|
|
const loadMarkdown = async (filePath) => {
|
|||
|
|
setLoading(true)
|
|||
|
|
setTocItems([]) // 清空旧的目录数据
|
|||
|
|
try {
|
|||
|
|
const res = await getFileContent(projectId, filePath)
|
|||
|
|
setMarkdownContent(res.data?.content || '')
|
|||
|
|
|
|||
|
|
// 滚动到顶部
|
|||
|
|
if (contentRef.current) {
|
|||
|
|
contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Load markdown error:', error)
|
|||
|
|
setMarkdownContent('# 文档加载失败\n\n无法加载该文档，请稍后重试。')
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提取 markdown 标题生成目录
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (markdownContent) {
|
|||
|
|
const headings = []
|
|||
|
|
const lines = markdownContent.split('\n')
|
|||
|
|
|
|||
|
|
lines.forEach((line) => {
|
|||
|
|
const match = line.match(/^(#{1,6})\s+(.+)$/)
|
|||
|
|
if (match) {
|
|||
|
|
const level = match[1].length
|
|||
|
|
const title = match[2]
|
|||
|
|
const key = title.toLowerCase().replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')
|
|||
|
|
|
|||
|
|
headings.push({
|
|||
|
|
key: `#${key}`,
|
|||
|
|
href: `#${key}`,
|
|||
|
|
title,
|
|||
|
|
level,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
setTocItems(headings)
|
|||
|
|
}
|
|||
|
|
}, [markdownContent])
|
|||
|
|
|
|||
|
|
// 处理菜单点击
|
|||
|
|
const handleMenuClick = ({ key }) => {
|
|||
|
|
setSelectedFile(key)
|
|||
|
|
loadMarkdown(key)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解析相对路径
|
|||
|
|
const resolveRelativePath = (currentPath, relativePath) => {
|
|||
|
|
// 获取当前文件所在目录
|
|||
|
|
const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'))
|
|||
|
|
|
|||
|
|
// 分割相对路径
|
|||
|
|
const parts = relativePath.split('/')
|
|||
|
|
const dirParts = currentDir ? currentDir.split('/') : []
|
|||
|
|
|
|||
|
|
// 处理 ../ 和 ./
|
|||
|
|
for (const part of parts) {
|
|||
|
|
if (part === '..') {
|
|||
|
|
dirParts.pop()
|
|||
|
|
} else if (part !== '.' && part !== '') {
|
|||
|
|
dirParts.push(part)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return dirParts.join('/')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理markdown内部链接点击
|
|||
|
|
const handleMarkdownLink = (e, href) => {
|
|||
|
|
// 检查是否是外部链接
|
|||
|
|
if (!href || href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
|
|||
|
|
return // 外部链接，允许默认行为
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是锚点链接
|
|||
|
|
if (href.startsWith('#')) {
|
|||
|
|
return // 锚点链接，允许默认行为
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他所有链接都视为内部文档链接，阻止默认跳转
|
|||
|
|
e.preventDefault()
|
|||
|
|
|
|||
|
|
// 如果不是 .md 文件，忽略
|
|||
|
|
if (!href.endsWith('.md')) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 先解码 href（因为 Markdown 中的链接可能已经是 URL 编码的）
|
|||
|
|
let decodedHref = href
|
|||
|
|
try {
|
|||
|
|
decodedHref = decodeURIComponent(href)
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('href 解码失败，使用原始值:', href)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解析相对路径
|
|||
|
|
const targetPath = resolveRelativePath(selectedFile, decodedHref)
|
|||
|
|
|
|||
|
|
// 自动展开父目录
|
|||
|
|
const parentPath = targetPath.substring(0, targetPath.lastIndexOf('/'))
|
|||
|
|
if (parentPath && !openKeys.includes(parentPath)) {
|
|||
|
|
// 收集所有父路径
|
|||
|
|
const pathParts = parentPath.split('/')
|
|||
|
|
const allParentPaths = []
|
|||
|
|
let currentPath = ''
|
|||
|
|
for (const part of pathParts) {
|
|||
|
|
currentPath = currentPath ? `${currentPath}/${part}` : part
|
|||
|
|
allParentPaths.push(currentPath)
|
|||
|
|
}
|
|||
|
|
setOpenKeys([...new Set([...openKeys, ...allParentPaths])])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载目标文件
|
|||
|
|
setSelectedFile(targetPath)
|
|||
|
|
loadMarkdown(targetPath)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 进入编辑模式
|
|||
|
|
const handleEdit = () => {
|
|||
|
|
navigate(`/projects/${projectId}/editor`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开分享设置
|
|||
|
|
const handleShare = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await getProjectShareInfo(projectId)
|
|||
|
|
setShareInfo(res.data)
|
|||
|
|
setHasPassword(res.data.has_password)
|
|||
|
|
setPassword(res.data.access_pass || '') // 显示已设置的密码
|
|||
|
|
setShareModalVisible(true)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Get share info error:', error)
|
|||
|
|
message.error('获取分享信息失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 复制分享链接
|
|||
|
|
const handleCopyLink = () => {
|
|||
|
|
if (!shareInfo) return
|
|||
|
|
const fullUrl = `${window.location.origin}${shareInfo.share_url}`
|
|||
|
|
navigator.clipboard.writeText(fullUrl)
|
|||
|
|
message.success('分享链接已复制')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换密码保护
|
|||
|
|
const handlePasswordToggle = async (checked) => {
|
|||
|
|
if (!checked) {
|
|||
|
|
// 取消密码
|
|||
|
|
try {
|
|||
|
|
await updateShareSettings(projectId, { access_pass: null })
|
|||
|
|
setHasPassword(false)
|
|||
|
|
setPassword('')
|
|||
|
|
message.success('已取消访问密码')
|
|||
|
|
// 刷新分享信息
|
|||
|
|
const res = await getProjectShareInfo(projectId)
|
|||
|
|
setShareInfo(res.data)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Update settings error:', error)
|
|||
|
|
message.error('操作失败')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setHasPassword(true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存密码
|
|||
|
|
const handleSavePassword = async () => {
|
|||
|
|
if (!password.trim()) {
|
|||
|
|
message.warning('请输入访问密码')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
await updateShareSettings(projectId, { access_pass: password })
|
|||
|
|
message.success('访问密码已设置')
|
|||
|
|
// 刷新分享信息
|
|||
|
|
const res = await getProjectShareInfo(projectId)
|
|||
|
|
setShareInfo(res.data)
|
|||
|
|
setHasPassword(true)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Save password error:', error)
|
|||
|
|
message.error('设置密码失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const menuItems = convertTreeToMenuItems(fileTree)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<MainLayout>
|
|||
|
|
<div className="project-docs-page">
|
|||
|
|
<Layout className="docs-layout">
|
|||
|
|
{/* 左侧目录 */}
|
|||
|
|
<Sider width={280} className="docs-sider" theme="light">
|
|||
|
|
<div className="docs-sider-header">
|
|||
|
|
<h2>项目文档</h2>
|
|||
|
|
<div className="docs-sider-actions">
|
|||
|
|
<Tooltip title="编辑模式">
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
size="middle"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={handleEdit}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title="分享">
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="middle"
|
|||
|
|
icon={<ShareAltOutlined />}
|
|||
|
|
onClick={handleShare}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
<Tooltip title="设置">
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="middle"
|
|||
|
|
icon={<SettingOutlined />}
|
|||
|
|
onClick={() => message.info('设置功能开发中')}
|
|||
|
|
/>
|
|||
|
|
</Tooltip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Menu
|
|||
|
|
mode="inline"
|
|||
|
|
selectedKeys={[selectedFile]}
|
|||
|
|
openKeys={openKeys}
|
|||
|
|
onOpenChange={setOpenKeys}
|
|||
|
|
items={menuItems}
|
|||
|
|
onClick={handleMenuClick}
|
|||
|
|
className="docs-menu"
|
|||
|
|
/>
|
|||
|
|
</Sider>
|
|||
|
|
|
|||
|
|
{/* 右侧内容区 */}
|
|||
|
|
<Layout className="docs-content-layout">
|
|||
|
|
<Content className="docs-content" ref={contentRef}>
|
|||
|
|
<div className="docs-content-wrapper">
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="docs-loading">
|
|||
|
|
<Spin size="large" tip="加载中..." />
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="markdown-body">
|
|||
|
|
<ReactMarkdown
|
|||
|
|
remarkPlugins={[remarkGfm]}
|
|||
|
|
rehypePlugins={[rehypeRaw, rehypeSlug, rehypeHighlight]}
|
|||
|
|
components={{
|
|||
|
|
a: ({ node, href, children, ...props }) => (
|
|||
|
|
<a
|
|||
|
|
href={href}
|
|||
|
|
onClick={(e) => handleMarkdownLink(e, href)}
|
|||
|
|
{...props}
|
|||
|
|
>
|
|||
|
|
{children}
|
|||
|
|
</a>
|
|||
|
|
),
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{markdownContent}
|
|||
|
|
</ReactMarkdown>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 返回顶部按钮 */}
|
|||
|
|
<FloatButton
|
|||
|
|
icon={<VerticalAlignTopOutlined />}
|
|||
|
|
type="primary"
|
|||
|
|
style={{ right: tocCollapsed ? 24 : 280 }}
|
|||
|
|
onClick={() => {
|
|||
|
|
if (contentRef.current) {
|
|||
|
|
contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Content>
|
|||
|
|
|
|||
|
|
{/* 右侧TOC面板 */}
|
|||
|
|
{!tocCollapsed && (
|
|||
|
|
<Sider width={250} theme="light" className="docs-toc-sider">
|
|||
|
|
<div className="toc-header">
|
|||
|
|
<h3>文档索引</h3>
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<MenuFoldOutlined />}
|
|||
|
|
onClick={() => setTocCollapsed(true)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="toc-content">
|
|||
|
|
{tocItems.length > 0 ? (
|
|||
|
|
<Anchor
|
|||
|
|
affix={false}
|
|||
|
|
offsetTop={0}
|
|||
|
|
getContainer={() => contentRef.current}
|
|||
|
|
items={tocItems.map((item) => ({
|
|||
|
|
key: item.key,
|
|||
|
|
href: item.href,
|
|||
|
|
title: (
|
|||
|
|
<div style={{ paddingLeft: `${(item.level - 1) * 12}px`, display: 'flex', alignItems: 'center', gap: '4px' }}>
|
|||
|
|
<FileTextOutlined style={{ fontSize: '12px', color: '#8c8c8c' }} />
|
|||
|
|
{item.title}
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="toc-empty">当前文档无标题</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Sider>
|
|||
|
|
)}
|
|||
|
|
</Layout>
|
|||
|
|
|
|||
|
|
{/* TOC展开按钮 */}
|
|||
|
|
{tocCollapsed && (
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<MenuUnfoldOutlined />}
|
|||
|
|
className="toc-toggle-btn"
|
|||
|
|
onClick={() => setTocCollapsed(false)}
|
|||
|
|
>
|
|||
|
|
文档索引
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</Layout>
|
|||
|
|
|
|||
|
|
{/* 分享模态框 */}
|
|||
|
|
<Modal
|
|||
|
|
title="分享项目"
|
|||
|
|
open={shareModalVisible}
|
|||
|
|
onCancel={() => setShareModalVisible(false)}
|
|||
|
|
footer={null}
|
|||
|
|
width={500}
|
|||
|
|
>
|
|||
|
|
{shareInfo && (
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }} size="large">
|
|||
|
|
<div>
|
|||
|
|
<label style={{ marginBottom: 8, display: 'block', fontWeight: 500 }}>分享链接</label>
|
|||
|
|
<Input
|
|||
|
|
value={`${window.location.origin}${shareInfo.share_url}`}
|
|||
|
|
readOnly
|
|||
|
|
addonAfter={
|
|||
|
|
<CopyOutlined onClick={handleCopyLink} style={{ cursor: 'pointer' }} />
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<Space>
|
|||
|
|
<span style={{ fontWeight: 500 }}>访问密码保护</span>
|
|||
|
|
<Switch checked={hasPassword} onChange={handlePasswordToggle} />
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{hasPassword && (
|
|||
|
|
<div>
|
|||
|
|
<Input.Password
|
|||
|
|
placeholder="请输入访问密码"
|
|||
|
|
value={password}
|
|||
|
|
onChange={(e) => setPassword(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
onClick={handleSavePassword}
|
|||
|
|
style={{ marginTop: 8 }}
|
|||
|
|
>
|
|||
|
|
保存密码
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
)}
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
</MainLayout>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default DocumentPage
|