合同详情页显示合同文件预览

app/routes/contract-template.detail.$id.tsx

@@ -3,6 +3,9 @@ import { useLoaderData, useNavigate } from '@remix-run/react';
 import { useState } from 'react';
 import styles from '~/styles/pages/contract-template.css?url';
 
+// 导入FilePreview组件
+import { FilePreview } from '~/components/reviews';
+
 export const links = () => [
   { rel: 'stylesheet', href: styles }
 ];
@@ -154,6 +157,29 @@ export default function ContractTemplateDetail() {
     return stars;
   };
 
+  // 创建文件内容对象用于FilePreview组件
+  const fileContent = {
+    title: template.title,
+    contractNumber: template.templateCode,
+    // 设置PDF路径，FilePreview会自动拼接基础URL
+    path: 'contract-template/买卖合同/买卖合同范本.pdf',
+    parties: {
+      partyA: {
+        name: '',
+        address: '',
+        representative: '',
+        phone: ''
+      },
+      partyB: {
+        name: '',
+        address: '',
+        representative: '',
+        phone: ''
+      }
+    },
+    sections: []
+  };
+
   return (
     <div className="contract-search-results">
       {/* 返回按钮 */}
@@ -291,8 +317,16 @@ export default function ContractTemplateDetail() {
           {/* 合同预览 */}
           <div className="content-section mb-8">
             <h3 className="section-title text-xl font-semibold mb-4">合同预览</h3>
-            <div className="content-preview bg-gray-50 rounded-lg p-6 font-mono text-sm line-height-6 border-l-4 border-primary">
-              <pre className="whitespace-pre-wrap">{template.preview}</pre>
+            <div className="border border-gray-200 rounded-lg overflow-hidden">
+              {/* 为FilePreview创建样式隔离容器 */}
+              <div className="file-preview-container">
+                <FilePreview 
+                  fileContent={fileContent}
+                  activeReviewPointResultId={null}
+                  targetPage={undefined}
+                  isStructuredView={false}
+                />
+              </div>
             </div>
           </div>
           

app/styles/pages/contract-template.css

@@ -644,4 +644,62 @@
     padding: 8px 16px;
     font-size: 12px;
   }
+}
+
+/* FilePreview 样式隔离容器 */
+.file-preview-container {
+  /* 重置所有可能继承的样式 */
+  all: initial;
+  
+  /* 恢复必要的基础样式 */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #fff;
+  
+  /* 确保布局正常 */
+  display: block;
+  width: 100%;
+  min-height: 600px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 确保FilePreview内部的所有元素都能正常显示 */
+.file-preview-container * {
+  box-sizing: border-box;
+}
+
+/* 重置可能影响FilePreview的全局样式 */
+.file-preview-container .file-preview {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+/* 确保FilePreview的header样式不被影响 */
+.file-preview-container .file-preview-header {
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  max-width: none !important;
+  text-overflow: initial !important;
+}
+
+/* 确保按钮样式正常 */
+.file-preview-container .ant-btn {
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+}
+
+/* 确保输入框样式正常 */
+.file-preview-container .ant-input {
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+}
+
+/* 确保PDF内容区域样式正常 */
+.file-preview-container .file-preview-content {
+  font-size: inherit;
+  line-height: inherit;
 }