nex_docus/frontend/src/pages/Document/DocumentPage.jsx

import { useState, useEffect, useRef, useMemo } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
import { Layout, Menu, Spin, FloatButton, Button, Tooltip, message, Anchor, Modal, Input, Switch, Space, Dropdown, Empty } from 'antd'
import { EditOutlined, VerticalAlignTopOutlined, ShareAltOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, FilePdfOutlined, CopyOutlined, LockOutlined, CloudDownloadOutlined, CloudUploadOutlined, DownOutlined, SearchOutlined, CloseOutlined } 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 Highlighter from 'react-highlight-words'
import GithubSlugger from 'github-slugger'
import { getProjectTree, getFileContent, getDocumentUrl } from '@/api/file'
import { gitPull, gitPush, getGitRepos } from '@/api/project'
import { getProjectShareInfo, updateShareSettings } from '@/api/share'
import { searchDocuments } from '@/api/search'
import VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
import Toast from '@/components/Toast/Toast'
import './DocumentPage.css'

const { Sider, Content } = Layout

// 高亮渲染组件
const HighlightText = ({ text, keyword }) => {
  if (!keyword || !text) return text;
  return (
    <Highlighter
      highlightClassName="search-highlight"
      searchWords={[keyword]}
      autoEscape={true}
      textToHighlight={text}
    />
  )
}

function DocumentPage() {
  const { projectId } = useParams()
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  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 [userRole, setUserRole] = useState('viewer')
  const [pdfViewerVisible, setPdfViewerVisible] = useState(false)
  const [pdfUrl, setPdfUrl] = useState('')
  const [pdfFilename, setPdfFilename] = useState('')
  const [viewMode, setViewMode] = useState('markdown')
  const [gitRepos, setGitRepos] = useState([])
  const [projectName, setProjectName] = useState('')
  
  // 搜索相关状态
  const [searchKeyword, setSearchKeyword] = useState('')
  const [matchedFilePaths, setMatchedFilePaths] = useState(new Set())
  const [isSearching, setIsSearching] = useState(false)
  
  const contentRef = useRef(null)

  useEffect(() => {
    loadFileTree()
  }, [projectId])

  const handleClose = () => {
    if (userRole === 'owner') {
      navigate('/projects/my')
    } else {
      navigate('/projects/share')
    }
  }

  // 监听 URL 参数变化，处理文件导航和搜索
  useEffect(() => {
    // 只有当文件树加载完成后才处理导航，否则无法正确展开目录
    if (fileTree.length === 0) return

    const fileParam = searchParams.get('file')
    const keywordParam = searchParams.get('keyword')
    
    // 处理搜索
    if (keywordParam && keywordParam !== searchKeyword) {
      handleSearch(keywordParam)
    }

    // 处理文件加载
    if (fileParam) {
      if (fileParam !== selectedFile) {
        setSelectedFile(fileParam)
        
        // 展开父目录
        const parts = fileParam.split('/')
        const allParentPaths = []
        let currentPath = ''
        for (let i = 0; i < parts.length - 1; i++) {
          currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i]
          allParentPaths.push(currentPath)
        }
        if (allParentPaths.length > 0) {
          setOpenKeys(prev => [...new Set([...prev, ...allParentPaths])])
        }

        // 处理 PDF 或 Markdown
        if (fileParam.toLowerCase().endsWith('.pdf')) {
          let url = getDocumentUrl(projectId, fileParam)
          const token = localStorage.getItem('access_token')
          if (token) {
            url += `?token=${encodeURIComponent(token)}`
          }
          setPdfUrl(url)
          setPdfFilename(fileParam.split('/').pop())
          setViewMode('pdf')
        } else {
          loadMarkdown(fileParam)
          setViewMode('markdown')
        }
      }
    } else {
      // 如果没有指定文件，且当前没有选中文件，默认打开 README.md
      if (!selectedFile) {
        const readmeNode = findReadme(fileTree)
        if (readmeNode) {
          setSelectedFile(readmeNode.key)
          loadMarkdown(readmeNode.key)
        }
      }
    }
  }, [searchParams, fileTree])

  // 处理搜索
  const handleSearch = async (value) => {
    setSearchKeyword(value)
    if (!value.trim()) {
      setMatchedFilePaths(new Set())
      return
    }

    setIsSearching(true)
    try {
      const res = await searchDocuments(value, projectId)
      const paths = new Set(res.data.map(item => item.file_path))
      setMatchedFilePaths(paths)
      
      // 自动展开匹配的节点
      const keysToExpand = new Set(openKeys)
      res.data.forEach(item => {
        const parts = item.file_path.split('/')
        let currentPath = ''
        for (let i = 0; i < parts.length - 1; i++) {
          currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i]
          keysToExpand.add(currentPath)
        }
      })
      setOpenKeys(Array.from(keysToExpand))
    } catch (error) {
      console.error('Search error:', error)
    } finally {
      setIsSearching(false)
    }
  }

  // 过滤文件树
  const filteredTreeData = useMemo(() => {
    if (!searchKeyword.trim()) return fileTree

    const loop = (data) => {
      const result = []
      for (const node of data) {
        const titleMatch = node.title.toLowerCase().includes(searchKeyword.toLowerCase())
        const contentMatch = matchedFilePaths.has(node.key)
        
        if (node.children) {
          const children = loop(node.children)
          if (children.length > 0 || titleMatch) {
            result.push({ ...node, children })
          }
        } else {
          if (titleMatch || contentMatch) {
            result.push(node)
          }
        }
      }
      return result
    }
    return loop(fileTree)
  }, [fileTree, searchKeyword, matchedFilePaths])

  const loadGitRepos = async () => {
    try {
      const res = await getGitRepos(projectId)
      setGitRepos(res.data || [])
    } catch (error) {
      console.error('Load git repos error:', error)
    }
  }

  // 加载文件树
  const loadFileTree = async () => {
    try {
      const res = await getProjectTree(projectId)
      const data = res.data || {}
      const tree = data.tree || data || []  // 兼容新旧格式
      const role = data.user_role || 'viewer'
      const name = data.project_name

      setFileTree(tree)
      setUserRole(role)
      setProjectName(name)
    } 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) => {
      // 标题高亮处理 - 取消高亮，仅显示原始标题
      const titleNode = node.title.replace('.md', '')

      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: titleNode,
          icon: <FileTextOutlined />,
        }
      } else if (node.title && node.title.endsWith('.pdf')) {
        // PDF 文件
        return {
          key: node.key,
          label: node.title,
          icon: <FilePdfOutlined style={{ color: '#f5222d' }} />,
        }
      }
      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 slugger = new GithubSlugger()
      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]
          // 使用标准的 github-slugger 生成 ID，确保与 rehype-slug 一致
          const key = slugger.slug(title)

          headings.push({
            key: `#${key}`,
            href: `#${key}`,
            title,
            level,
          })
        }
      })

      setTocItems(headings)
    }
  }, [markdownContent])

  // 处理菜单点击
  const handleMenuClick = ({ key }) => {
    setSelectedFile(key)

    // 检查是否是PDF文件
    if (key.toLowerCase().endsWith('.pdf')) {
      // 显示PDF - 添加token到URL
      let url = getDocumentUrl(projectId, key)
      const token = localStorage.getItem('access_token')
      if (token) {
        url += `?token=${encodeURIComponent(token)}`
      }
      setPdfUrl(url)
      setPdfFilename(key.split('/').pop())
      setViewMode('pdf')
    } else {
      // 加载Markdown文件
      setViewMode('markdown')
      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 // 锚点链接，允许默认行为
    }

    // 检查是否是文档文件（.md 或 .pdf）
    const isMd = href.endsWith('.md')
    const isPdf = href.toLowerCase().endsWith('.pdf')

    if (!isMd && !isPdf) {
      return // 不是文档文件，允许默认行为
    }

    // 阻止默认跳转
    e.preventDefault()

    // 先解码 href（因为 Markdown 中的链接可能已经是 URL 编码的）
    let decodedHref = href
    try {
      decodedHref = decodeURIComponent(href)
    } catch (e) {
      // 解码失败，使用原始值
    }

    // 解析路径
    let targetPath
    if (decodedHref.startsWith('.') || decodedHref.startsWith('..')) {
      // 真正的相对路径，相对于当前文件
      targetPath = resolveRelativePath(selectedFile, decodedHref)
    } else {
      // 项目内绝对路径（由编辑器生成），相对于项目根目录
      targetPath = decodedHref.startsWith('/') ? decodedHref.substring(1) : decodedHref
    }

    // 自动展开父目录
    const lastSlashIndex = targetPath.lastIndexOf('/')
    if (lastSlashIndex !== -1) {
      const parentPath = targetPath.substring(0, lastSlashIndex)
      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)

    if (isPdf) {
      // PDF文件：切换到PDF模式
      let url = getDocumentUrl(projectId, targetPath)
      const token = localStorage.getItem('access_token')
      if (token) {
        url += `?token=${encodeURIComponent(token)}`
      }
      setPdfUrl(url)
      setPdfFilename(targetPath.split('/').pop())
      setViewMode('pdf')
    } else {
      // Markdown文件：加载内容
      setViewMode('markdown')
      loadMarkdown(targetPath)
    }
  }

  const handleGitPull = async (repoId = null, force = false) => {
    if (gitRepos.length === 0) {
      message.warning('未配置Git仓库')
      return
    }
    try {
      const res = await gitPull(projectId, repoId, force)
      message.success(res.message || 'Git Pull 成功')
      // Refresh tree
      loadFileTree()
      // Reload current file if open
      if (selectedFile) {
        loadMarkdown(selectedFile)
      }
    } catch (error) {
       console.error('Git Pull error:', error)
       const errorMsg = error.response?.data?.detail || 'Git Pull 失败'
       
       if (!force) {
         Modal.confirm({
           title: 'Git Pull 失败',
           content: (
             <div>
               <p>{errorMsg}</p>
               <p style={{ color: 'red', fontWeight: 'bold', marginTop: 8 }}>
                 是否强制重置到远程版本？
               </p>
               <p style={{ color: '#666', fontSize: 12 }}>
                 警告：这将丢失所有本地未提交的修改！
               </p>
             </div>
           ),
           okText: '强制重置',
           okType: 'danger',
           cancelText: '取消',
           onOk: () => handleGitPull(repoId, true)
         })
         return
       }
       
       message.error(errorMsg)
    }
  }

  const handleGitPush = async (repoId = null, force = false) => {
    if (gitRepos.length === 0) {
      message.warning('未配置Git仓库')
      return
    }
    try {
      const res = await gitPush(projectId, repoId, force)
      message.success(res.message || 'Git Push 成功')
    } catch (error) {
       console.error('Git Push error:', error)
       const errorMsg = error.response?.data?.detail || 'Git Push 失败'
       
       if (!force) {
         Modal.confirm({
           title: 'Git Push 失败',
           content: (
             <div>
               <p>{errorMsg}</p>
               <p style={{ color: 'red', fontWeight: 'bold', marginTop: 8 }}>
                 是否强制推送到远程？
               </p>
               <p style={{ color: '#666', fontSize: 12 }}>
                 警告：这将覆盖远程仓库的修改！
               </p>
             </div>
           ),
           okText: '强制推送',
           okType: 'danger',
           cancelText: '取消',
           onOk: () => handleGitPush(repoId, true)
         })
         return
       }
       
       message.error(errorMsg)
    }
  }

  const renderGitActions = () => {
    if (gitRepos.length <= 1) {
      // 0 或 1 个仓库，显示普通按钮
      return (
        <>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
              onClick={() => handleGitPull()}
            />
          </Tooltip>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
              onClick={() => handleGitPush()}
            />
          </Tooltip>
        </>
      )
    }

    // 多个仓库，显示下拉菜单
    const pullItems = gitRepos.map(repo => ({
      key: repo.id,
      label: repo.name + (repo.is_default ? ' (默认)' : ''),
      onClick: () => handleGitPull(repo.id),
    }))

    const pushItems = gitRepos.map(repo => ({
      key: repo.id,
      label: repo.name + (repo.is_default ? ' (默认)' : ''),
      onClick: () => handleGitPush(repo.id),
    }))

    if (gitRepos.length <= 1) {
      return (
        <>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
              onClick={() => handleGitPull()}
            />
          </Tooltip>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
              onClick={() => handleGitPush()}
            />
          </Tooltip>
        </>
      )
    }

    return (
      <>
        <Dropdown menu={{ items: pullItems }}>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
            />
          </Tooltip>
        </Dropdown>
        <Dropdown menu={{ items: pushItems }}>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
            />
          </Tooltip>
        </Dropdown>
      </>
    )
  }

  // 进入编辑模式
  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 = async () => {
    if (!shareInfo) return
    let fullUrl = `${window.location.origin}${shareInfo.share_url}`
    if (selectedFile) {
      fullUrl += `?file=${encodeURIComponent(selectedFile)}`
    }
    
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(fullUrl)
        Toast.success('复制成功', '分享链接已复制到剪贴板')
      } else {
        // Fallback for non-secure contexts or older browsers
        const textArea = document.createElement("textarea")
        textArea.value = fullUrl
        textArea.style.position = "fixed"
        textArea.style.left = "-9999px"
        textArea.style.top = "0"
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        const successful = document.execCommand('copy')
        document.body.removeChild(textArea)
        if (successful) {
           Toast.success('复制成功', '分享链接已复制到剪贴板')
        } else {
           Toast.error('复制失败', '请手动复制链接')
        }
      }
    } catch (err) {
      console.error('Failed to copy:', err)
      Toast.error('复制失败', '无法访问剪贴板')
    }
  }

  // 切换密码保护
  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(filteredTreeData)

  // Markdown 内容高亮处理
  // 使用 components 替换文本节点，但这只对直接文本子节点有效
  // 对于深层嵌套，我们需要递归或使用 rehype 插件
  // 这里使用简单组件替换
  const markdownComponents = useMemo(() => {
    if (!searchKeyword) {
      return {
        a: ({ node, href, children, ...props }) => {
          const isExternal = href && (href.startsWith('http') || href.startsWith('//'));
          return (
            <a
              href={href}
              onClick={(e) => handleMarkdownLink(e, href)}
              target={isExternal ? '_blank' : undefined}
              rel={isExternal ? 'noopener noreferrer' : undefined}
              {...props}
            >
              {children}
            </a>
          );
        },
      }
    }

    // 搜索模式下，尝试高亮
    // 注意：这可能不完美，但比没有好
    const highlightRenderer = (Tag) => ({ node, children, ...props }) => {
      // 如果 children 是字符串，高亮
      if (typeof children === 'string') {
        return <Tag {...props}><HighlightText text={children} keyword={searchKeyword} /></Tag>
      }
      // 如果是数组，遍历
      if (Array.isArray(children)) {
        const newChildren = children.map((child, idx) => {
          if (typeof child === 'string') {
            return <HighlightText key={idx} text={child} keyword={searchKeyword} />
          }
          return child
        })
        return <Tag {...props}>{newChildren}</Tag>
      }
      return <Tag {...props}>{children}</Tag>
    }

    return {
      a: ({ node, href, children, ...props }) => {
        const isExternal = href && (href.startsWith('http') || href.startsWith('//'));
        return (
          <a
            href={href}
            onClick={(e) => handleMarkdownLink(e, href)}
            target={isExternal ? '_blank' : undefined}
            rel={isExternal ? 'noopener noreferrer' : undefined}
            {...props}
          >
            {typeof children === 'string' ? <HighlightText text={children} keyword={searchKeyword} /> : children}
          </a>
        );
      },
      p: highlightRenderer('p'),
      li: highlightRenderer('li'),
      h1: highlightRenderer('h1'),
      h2: highlightRenderer('h2'),
      h3: highlightRenderer('h3'),
      h4: highlightRenderer('h4'),
      h5: highlightRenderer('h5'),
      h6: highlightRenderer('h6'),
      span: highlightRenderer('span'),
      td: highlightRenderer('td'),
      th: highlightRenderer('th'),
      div: highlightRenderer('div'),
    }
  }, [searchKeyword])

  return (
    <div className="project-docs-page">
      <Layout className="docs-layout">
        {/* 左侧目录 */}
        <Sider width={280} className="docs-sider" theme="light">
          <div className="docs-sider-header">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <h2 style={{ margin: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={projectName}>
                {projectName}
              </h2>
              <Tooltip title="关闭">
                <Button 
                  type="text" 
                  icon={<CloseOutlined />} 
                  onClick={handleClose}
                  style={{ marginLeft: 8 }}
                />
              </Tooltip>
            </div>
            <div className="docs-sider-actions">
              <Space size={8}>
                {/* 只有 owner/admin/editor 可以编辑和Git操作 */}
                {userRole !== 'viewer' && (
                  <Button
                    type="primary"
                    size="middle"
                    className="mode-toggle-btn"
                    icon={<EditOutlined />}
                    onClick={handleEdit}
                  >
                    编辑
                  </Button>
                )}
                <Space.Compact>
                  {userRole !== 'viewer' && renderGitActions()}
                  <Tooltip title="分享">
                    <Button
                      size="middle"
                      icon={<ShareAltOutlined />}
                      onClick={handleShare}
                    />
                  </Tooltip>
                </Space.Compact>
              </Space>
            </div>
          </div>

          {/* 搜索框 */}
          <div style={{ padding: '12px 16px 4px' }}>
            <Input.Search
              placeholder="搜索文档内容..."
              allowClear
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onSearch={handleSearch}
              loading={isSearching}
              enterButton
            />
          </div>

          {filteredTreeData.length > 0 ? (
            <Menu
              mode="inline"
              selectedKeys={[selectedFile]}
              openKeys={openKeys}
              onOpenChange={setOpenKeys}
              items={menuItems}
              onClick={handleMenuClick}
              className="docs-menu"
            />
          ) : (
            <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未找到匹配文档" />
            </div>
          )}
        </Sider>

        {/* 右侧内容区 */}
        <Layout className="docs-content-layout">
          <Content className="docs-content" ref={contentRef}>
            <div className={`docs-content-wrapper ${viewMode === 'pdf' ? 'pdf-mode' : ''}`}>
              {loading ? (
                <div className="docs-loading">
                  <Spin size="large">
                    <div style={{ marginTop: 16 }}>加载中...</div>
                  </Spin>
                </div>
              ) : viewMode === 'pdf' ? (
                <VirtualPDFViewer
                  url={pdfUrl}
                  filename={pdfFilename}
                />
              ) : (
                <div className="markdown-body">
                  <ReactMarkdown
                    remarkPlugins={[remarkGfm]}
                    rehypePlugins={[rehypeRaw, rehypeSlug, rehypeHighlight]}
                    components={markdownComponents}
                  >
                    {markdownContent}
                  </ReactMarkdown>
                </div>
              )}
            </div>

            {/* 返回顶部按钮 - 仅在markdown模式显示 */}
            {viewMode === 'markdown' && (
              <FloatButton
                icon={<VerticalAlignTopOutlined />}
                type="primary"
                style={{ right: tocCollapsed ? 24 : 280 }}
                onClick={() => {
                  if (contentRef.current) {
                    contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
                  }
                }}
              />
            )}
          </Content>

          {/* 右侧TOC面板 - 仅在markdown模式显示 */}
          {viewMode === 'markdown' && !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' }} />
                          <HighlightText text={item.title} keyword={searchKeyword} />
                        </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>

      {/* 分享模态框 */}
      {/* ... keeping the modal ... */}
      <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 }}>
                {selectedFile ? '当前文件分享链接' : '项目分享链接'}
              </label>
              <Input
                value={selectedFile 
                  ? `${window.location.origin}${shareInfo.share_url}?file=${encodeURIComponent(selectedFile)}` 
                  : `${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>
  )
}

export default DocumentPage