fix:修改docx文件预览

src/components/FilePreviewModal/DocxPreview.css

+/* src/components/FilePreviewModal/DocxPreview.css */
+.docx-document {
+  width: 100% !important;
+  padding: 20px 20px !important;
+  margin-bottom: 0px !important;
+  height: 100% !important;
+  box-shadow: none !important;
+}
+
+.docx-document-wrapper {
+  padding: 0 !important;
+}
\ No newline at end of file

src/components/FilePreviewModal/DocxPreview.tsx

 // src/components/FilePreviewModal/DocxPreview.tsx
 // src/components/FilePreviewModal/DocxPreview.tsx
 import React, { useEffect, useRef } from 'react'
 import React, { useEffect, useRef } from 'react'
 import { renderAsync } from 'docx-preview'
 import { renderAsync } from 'docx-preview'
+import './DocxPreview.css' // 导入样式文件
 
 
 interface DocxPreviewProps {
 interface DocxPreviewProps {
   src: string
   src: string
@@ -27,12 +28,16 @@ export const DocxPreview: React.FC<DocxPreviewProps> = ({ src, className = '', o
           }
           }
 
 
           return renderAsync(blob, containerRef.current!, undefined, {
           return renderAsync(blob, containerRef.current!, undefined, {
-            className,
+            className: 'docx-document', // 使用特定类名避免样式冲突
             inWrapper: true,
             inWrapper: true,
             breakPages: true,
             breakPages: true,
             ignoreWidth: false,
             ignoreWidth: false,
             ignoreHeight: false,
             ignoreHeight: false,
             ignoreFonts: false,
             ignoreFonts: false,
+            // 添加更多配置以改善渲染效果
+            renderHeaders: true,
+            renderFooters: true,
+            renderFootnotes: true,
           })
           })
         })
         })
         .then(() => {
         .then(() => {
@@ -56,6 +61,10 @@ export const DocxPreview: React.FC<DocxPreviewProps> = ({ src, className = '', o
         backgroundColor: '#fff',
         backgroundColor: '#fff',
         maxWidth: '100%',
         maxWidth: '100%',
         boxSizing: 'border-box',
         boxSizing: 'border-box',
+        // 添加以下样式以改善显示效果
+        lineHeight: '1.6',
+        wordWrap: 'break-word',
+        wordBreak: 'break-word',
       }}
       }}
     />
     />
   )
   )

src/components/FilePreviewModal/index.tsx

@@ -89,7 +89,7 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl
             <DocxPreview
             <DocxPreview
               key={docUrl} // 添加key确保组件重新挂载
               key={docUrl} // 添加key确保组件重新挂载
               src={docUrl}
               src={docUrl}
-              className="w-full"
+              className="w-full min-h-full"
               onRendered={handleDocumentRendered}
               onRendered={handleDocumentRendered}
               onError={handleDocumentError}
               onError={handleDocumentError}
             />
             />
@@ -184,7 +184,7 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({ isOpen, onCl
       onClose={handleClose} // 使用改进的关闭函数
       onClose={handleClose} // 使用改进的关闭函数
       size="3xl"
       size="3xl"
       classNames={{
       classNames={{
-        base: 'max-h-[90vh] max-w-[50vw]',
+        base: 'max-h-[90vh] max-w-[80vw]',
         body: 'py-4',
         body: 'py-4',
         header: 'border-b border-divider',
         header: 'border-b border-divider',
         footer: 'border-t border-divider',
         footer: 'border-t border-divider',