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

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>