feat: 1. 实现一键替换。

2. 优化追加附件和模板上传的样式。

app/routes/monaco-demo.tsx

@@ -8,14 +8,25 @@
  * - 后续可扩展文件上传功能
  */
 
-import { type MetaFunction } from "@remix-run/node";
+import { type MetaFunction, type ClientLoaderFunctionArgs } from "@remix-run/node";
 import { useState, useRef, useEffect } from "react";
-import { DiffEditor } from "@monaco-editor/react";
-import type { editor } from "monaco-editor";
 import { pdfjs } from 'react-pdf';
 import mammoth from 'mammoth';
 import { toastService } from '~/components/ui/Toast';
 
+// 动态导入 Monaco Editor（仅客户端）
+let DiffEditor: any = null;
+let editor: any = null;
+
+if (typeof window !== 'undefined') {
+  import('@monaco-editor/react').then((mod) => {
+    DiffEditor = mod.DiffEditor;
+  });
+  import('monaco-editor').then((mod) => {
+    editor = mod.editor;
+  });
+}
+
 // 设置 PDF.js worker（与 pdf-demo.tsx 相同）
 pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
 
@@ -129,9 +140,10 @@ const CONTRACT_B = `中国烟草合同（修订版本）
 export default function MonacoDemoPage() {
   const [originalText, setOriginalText] = useState(CONTRACT_A);
   const [modifiedText, setModifiedText] = useState(CONTRACT_B);
-  const diffEditorRef = useRef<editor.IStandaloneDiffEditor | null>(null);
+  const diffEditorRef = useRef<any>(null);
   const [diffCount, setDiffCount] = useState<number>(0);
   const [currentDiff, setCurrentDiff] = useState<number>(0);
+  const [editorLoaded, setEditorLoaded] = useState(false);
 
   // 文档相关状态
   // 默认使用的测试文档路径（相对路径）
@@ -297,9 +309,23 @@ export default function MonacoDemoPage() {
     }
   };
 
+  // 检查 Monaco Editor 是否已加载
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      Promise.all([
+        import('@monaco-editor/react'),
+        import('monaco-editor')
+      ]).then(([reactMod, editorMod]) => {
+        DiffEditor = reactMod.DiffEditor;
+        editor = editorMod.editor;
+        setEditorLoaded(true);
+      });
+    }
+  }, []);
+
   // Monaco Editor 挂载后的回调
-  const handleEditorDidMount = (editor: editor.IStandaloneDiffEditor) => {
-    diffEditorRef.current = editor;
+  const handleEditorDidMount = (editorInstance: any) => {
+    diffEditorRef.current = editorInstance;
 
     // 获取差异数量
     const lineChanges = editor.getLineChanges();
@@ -670,7 +696,8 @@ export default function MonacoDemoPage() {
 
       {/* Diff Editor 主体 */}
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-        <DiffEditor
+        {editorLoaded && DiffEditor ? (
+          <DiffEditor
           height="100%"
           language="plaintext"
           original={originalText}
@@ -699,6 +726,30 @@ export default function MonacoDemoPage() {
             diffAlgorithm: 'advanced',         // 使用高级差异算法
           }}
         />
+        ) : (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            backgroundColor: '#f5f5f5'
+          }}>
+            <div style={{ textAlign: 'center' }}>
+              <div style={{
+                width: '48px',
+                height: '48px',
+                border: '4px solid #f3f3f3',
+                borderTop: '4px solid #00684a',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite',
+                margin: '0 auto 16px'
+              }}></div>
+              <div style={{ fontSize: '16px', color: '#333' }}>
+                正在加载 Monaco Editor...
+              </div>
+            </div>
+          </div>
+        )}
 
         {/* 文档加载中的遮罩层 */}
         {(isLoadingDoc1 || isLoadingDoc2) && (