From 099d12a1c900e079751c516efcd5f1b07667c552 Mon Sep 17 00:00:00 2001
From: xiamuceer <xiamuceer@gmail.com>
Date: Thu, 2 Apr 2026 11:02:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=A0=B9=E6=8D=AE=E5=BB=BA=E8=AE=AE?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=AF=B9=E6=AF=94=E5=86=85=E5=AE=B9=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChapterContentComparison.tsx   | 86 ++++++++++++-------
 1 file changed, 56 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/ChapterContentComparison.tsx b/frontend/src/components/ChapterContentComparison.tsx
index 333bc9d..9a6e365 100644
--- a/frontend/src/components/ChapterContentComparison.tsx
+++ b/frontend/src/components/ChapterContentComparison.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Modal, Button, Card, Statistic, Row, Col, message, theme } from 'antd';
 import { CheckOutlined, CloseOutlined, SwapOutlined } from '@ant-design/icons';
 import ReactDiffViewer from 'react-diff-viewer-continued';
+import { useThemeMode } from '../theme/useThemeMode';
 
 interface ChapterContentComparisonProps {
   visible: boolean;
@@ -27,6 +28,7 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
   onDiscard
 }) => {
   const { token } = theme.useToken();
+  const { resolvedMode } = useThemeMode();
   const [applying, setApplying] = useState(false);
   const [viewMode, setViewMode] = useState<'split' | 'unified'>('split');
   const [modal, contextHolder] = Modal.useModal();
@@ -34,6 +36,54 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
   const originalWordCount = originalContent.length;
   const wordCountDiff = wordCount - originalWordCount;
   const wordCountDiffPercent = ((wordCountDiff / originalWordCount) * 100).toFixed(1);
+  const isDarkMode = resolvedMode === 'dark';
+  const diffViewerStyles = useMemo(() => ({
+    variables: {
+      light: {
+        diffViewerBackground: token.colorBgContainer,
+        diffViewerColor: token.colorText,
+        diffViewerTitleBackground: token.colorBgElevated,
+        diffViewerTitleColor: token.colorTextHeading,
+        addedBackground: token.colorSuccessBg,
+        addedColor: token.colorText,
+        removedBackground: token.colorErrorBg,
+        removedColor: token.colorText,
+        wordAddedBackground: token.colorSuccessBorder,
+        wordRemovedBackground: token.colorErrorBorder,
+        addedGutterBackground: token.colorSuccessBg,
+        removedGutterBackground: token.colorErrorBg,
+        gutterBackground: token.colorFillQuaternary,
+        gutterBackgroundDark: token.colorFillTertiary,
+        highlightBackground: token.colorWarningBg,
+        highlightGutterBackground: token.colorWarningBorder,
+      },
+      dark: {
+        diffViewerBackground: token.colorBgContainer,
+        diffViewerColor: token.colorText,
+        diffViewerTitleBackground: token.colorBgElevated,
+        diffViewerTitleColor: token.colorTextHeading,
+        addedBackground: 'rgba(82, 196, 26, 0.16)',
+        addedColor: token.colorText,
+        removedBackground: 'rgba(255, 77, 79, 0.16)',
+        removedColor: token.colorText,
+        wordAddedBackground: 'rgba(82, 196, 26, 0.3)',
+        wordRemovedBackground: 'rgba(255, 77, 79, 0.3)',
+        addedGutterBackground: 'rgba(82, 196, 26, 0.12)',
+        removedGutterBackground: 'rgba(255, 77, 79, 0.12)',
+        gutterBackground: token.colorFillQuaternary,
+        gutterBackgroundDark: token.colorFillSecondary,
+        highlightBackground: 'rgba(250, 173, 20, 0.18)',
+        highlightGutterBackground: 'rgba(250, 173, 20, 0.28)',
+      },
+    },
+    line: {
+      padding: '10px 2px',
+      fontSize: '14px',
+      lineHeight: '20px',
+      whiteSpace: 'pre-wrap' as const,
+      wordBreak: 'break-word' as const,
+    },
+  }), [token]);
 
   const handleApply = async () => {
     setApplying(true);
@@ -182,8 +232,9 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
       <div style={{
         maxHeight: 'calc(90vh - 300px)',
         overflow: 'auto',
-        border: '1px solid var(--color-border)',
-        borderRadius: 4
+        border: `1px solid ${token.colorBorder}`,
+        borderRadius: 8,
+        background: token.colorBgContainer
       }}>
         <ReactDiffViewer
           oldValue={originalContent}
@@ -192,33 +243,8 @@ const ChapterContentComparison: React.FC<ChapterContentComparisonProps> = ({
           leftTitle="原内容"
           rightTitle="新内容"
           showDiffOnly={false}
-          useDarkTheme={false}
-          styles={{
-            variables: {
-              light: {
-                diffViewerBackground: token.colorBgContainer,
-                addedBackground: 'var(--color-success-bg)',
-                addedColor: 'var(--color-text-primary)',
-                removedBackground: 'var(--color-error-bg)',
-                removedColor: 'var(--color-text-primary)',
-                wordAddedBackground: 'var(--color-success-border)',
-                wordRemovedBackground: 'var(--color-error-border)',
-                addedGutterBackground: 'var(--color-success-bg)',
-                removedGutterBackground: 'var(--color-error-bg)',
-                gutterBackground: 'var(--color-bg-layout)',
-                gutterBackgroundDark: 'var(--color-bg-container)',
-                highlightBackground: 'var(--color-warning-bg)',
-                highlightGutterBackground: 'var(--color-warning-border)',
-              },
-            },
-            line: {
-              padding: '10px 2px',
-              fontSize: '14px',
-              lineHeight: '20px',
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-word'
-            }
-          }}
+          useDarkTheme={isDarkMode}
+          styles={diffViewerStyles}
         />
       </div>
       </Modal>