From 2255982c2c48256196ae3841e3a8f9077f2aea3c Mon Sep 17 00:00:00 2001
From: "mula.liu" <mula.liu@163.com>
Date: Thu, 22 Jan 2026 18:53:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fix_docker_deployment.sh                   | 29 ++++++++++
 frontend/src/pages/Preview/PreviewPage.jsx | 63 +++++++++++++---------
 2 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 fix_docker_deployment.sh

diff --git a/fix_docker_deployment.sh b/fix_docker_deployment.sh
new file mode 100644
index 0000000..b2744ca
--- /dev/null
+++ b/fix_docker_deployment.sh
@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Fix for "KeyError: 'ContainerConfig'" in legacy docker-compose
+
+echo "Cleaning up Docker resources to fix deployment error..."
+
+# 1. Stop containers and remove orphans
+echo "Step 1: Stopping containers..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose down --remove-orphans
+elif docker compose version &> /dev/null; then
+    docker compose down --remove-orphans
+fi
+
+# 2. Remove the frontend image explicitly to force metadata refresh
+echo "Step 2: Removing frontend image..."
+docker rmi nex-docus-frontend 2>/dev/null || true
+# Also remove the tagged image if it exists differently (based on docker-compose.yml naming)
+docker images | grep nexdocus-frontend | awk '{print $3}' | xargs -r docker rmi
+
+# 3. Prune dangling images which might cause confusion
+echo "Step 3: Pruning dangling images..."
+docker image prune -f
+
+echo "Cleanup complete."
+echo "You can now try deploying again with:"
+echo "  docker-compose up -d --build"
+echo "  OR"
+echo "  ./deploy.sh upgrade"
diff --git a/frontend/src/pages/Preview/PreviewPage.jsx b/frontend/src/pages/Preview/PreviewPage.jsx
index 0592b3a..4b51759 100644
--- a/frontend/src/pages/Preview/PreviewPage.jsx
+++ b/frontend/src/pages/Preview/PreviewPage.jsx
@@ -1,12 +1,15 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 import { Layout, Menu, Spin, FloatButton, Button, Modal, Input, message, Drawer, Anchor } from 'antd'
 import { VerticalAlignTopOutlined, MenuOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, FilePdfOutlined, LockOutlined } from '@ant-design/icons'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import rehypeRaw from 'rehype-raw'
+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 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 VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
@@ -36,6 +39,18 @@ function PreviewPage() {
   const [viewMode, setViewMode] = useState('markdown') // 'markdown' or 'pdf'
   const contentRef = useRef(null)
 
+  // ByteMD 插件配置
+  const plugins = useMemo(() => [
+    gfm(),
+    highlight(),
+    breaks(),
+    frontmatter(),
+    gemoji(),
+    {
+      rehype: (p) => p.use(rehypeSlug)
+    }
+  ], [])
+
   // 检测是否为移动设备
   useEffect(() => {
     const checkMobile = () => {
@@ -263,6 +278,17 @@ function PreviewPage() {
     handleMenuClick({ key: targetPath })
   }
 
+  // 处理内容区域点击（委托处理链接点击）
+  const handleContentClick = (e) => {
+    const target = e.target.closest('a')
+    if (target) {
+      const href = target.getAttribute('href')
+      if (href) {
+        handleMarkdownLink(e, href)
+      }
+    }
+  }
+
   // 处理菜单点击
   const handleMenuClick = ({ key }) => {
     setSelectedFile(key)
@@ -333,7 +359,7 @@ function PreviewPage() {
               className="mobile-menu-btn"
               onClick={() => setMobileDrawerVisible(true)}
             >
-              文档索引
+              目录索引
             </Button>
             <Drawer
               title={projectInfo?.name || '项目预览'}
@@ -381,24 +407,11 @@ function PreviewPage() {
                   filename={pdfFilename}
                 />
               ) : (
-                <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 className="markdown-body" onClick={handleContentClick}>
+                  <Viewer
+                    value={markdownContent}
+                    plugins={plugins}
+                  />
                 </div>
               )}
             </div>
@@ -498,4 +511,4 @@ function PreviewPage() {
   )
 }
 
-export default PreviewPage
+export default PreviewPage
\ No newline at end of file