Merge branch 'awen' into shiy
This commit is contained in:
@@ -3,8 +3,96 @@ import { useLoaderData, useNavigate } from '@remix-run/react';
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import styles from '~/styles/pages/contract-template.css?url';
|
import styles from '~/styles/pages/contract-template.css?url';
|
||||||
|
|
||||||
|
// 导入FilePreview组件
|
||||||
|
import { FilePreview } from '~/components/reviews';
|
||||||
|
|
||||||
export const links = () => [
|
export const links = () => [
|
||||||
{ rel: 'stylesheet', href: styles }
|
{ rel: 'stylesheet', href: styles },
|
||||||
|
// 添加专门的样式隔离
|
||||||
|
{
|
||||||
|
rel: 'stylesheet',
|
||||||
|
href: 'data:text/css;base64,' + btoa(`
|
||||||
|
.file-preview-isolation {
|
||||||
|
all: unset !important;
|
||||||
|
display: block !important;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: #333 !important;
|
||||||
|
background: #fff !important;
|
||||||
|
width: 100% !important;
|
||||||
|
min-height: 600px !important;
|
||||||
|
position: relative !important;
|
||||||
|
isolation: isolate !important;
|
||||||
|
contain: layout style !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation * {
|
||||||
|
font-family: inherit !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation .file-preview-header {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 8px 16px !important;
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
border-bottom: 1px solid #dee2e6 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
max-width: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
text-overflow: unset !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation .file-preview-actions {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation button,
|
||||||
|
.file-preview-isolation .ant-btn {
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
margin: 0 2px !important;
|
||||||
|
border: 1px solid #d9d9d9 !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
background: white !important;
|
||||||
|
color: #333 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
min-height: 24px !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation input,
|
||||||
|
.file-preview-isolation .ant-input {
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
border: 1px solid #d9d9d9 !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
background: white !important;
|
||||||
|
color: #333 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
min-height: 24px !important;
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 40px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
.file-preview-isolation .file-preview-content {
|
||||||
|
max-height: calc(100vh - 150px) !important;
|
||||||
|
overflow: auto !important;
|
||||||
|
background: #f8f9fa !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
export const meta: MetaFunction<typeof loader> = ({ data }) => {
|
||||||
@@ -154,6 +242,29 @@ export default function ContractTemplateDetail() {
|
|||||||
return stars;
|
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 (
|
return (
|
||||||
<div className="contract-search-results">
|
<div className="contract-search-results">
|
||||||
{/* 返回按钮 */}
|
{/* 返回按钮 */}
|
||||||
@@ -291,8 +402,41 @@ export default function ContractTemplateDetail() {
|
|||||||
{/* 合同预览 */}
|
{/* 合同预览 */}
|
||||||
<div className="content-section mb-8">
|
<div className="content-section mb-8">
|
||||||
<h3 className="section-title text-xl font-semibold mb-4">合同预览</h3>
|
<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">
|
<div className="border border-gray-200 rounded-lg overflow-hidden">
|
||||||
<pre className="whitespace-pre-wrap">{template.preview}</pre>
|
{/* 使用更强的样式隔离 */}
|
||||||
|
<div
|
||||||
|
className="file-preview-isolation"
|
||||||
|
style={{
|
||||||
|
// 使用CSS变量避免继承
|
||||||
|
'--font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||||
|
'--font-size': '14px',
|
||||||
|
'--line-height': '1.5',
|
||||||
|
'--text-color': '#333333',
|
||||||
|
'--bg-color': '#ffffff',
|
||||||
|
|
||||||
|
// 强制重置所有可能的样式
|
||||||
|
all: 'unset',
|
||||||
|
display: 'block',
|
||||||
|
fontFamily: 'var(--font-family)',
|
||||||
|
fontSize: 'var(--font-size)',
|
||||||
|
lineHeight: 'var(--line-height)',
|
||||||
|
color: 'var(--text-color)',
|
||||||
|
backgroundColor: 'var(--bg-color)',
|
||||||
|
width: '100%',
|
||||||
|
minHeight: '600px',
|
||||||
|
position: 'relative',
|
||||||
|
isolation: 'isolate', // 创建新的层叠上下文
|
||||||
|
contain: 'layout style', // CSS容器化
|
||||||
|
zIndex: 0
|
||||||
|
} as React.CSSProperties}
|
||||||
|
>
|
||||||
|
<FilePreview
|
||||||
|
fileContent={fileContent}
|
||||||
|
activeReviewPointResultId={null}
|
||||||
|
targetPage={undefined}
|
||||||
|
isStructuredView={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -644,4 +644,150 @@
|
|||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FilePreview 样式隔离容器 - 使用更强的样式重置 */
|
||||||
|
.file-preview-container {
|
||||||
|
/* 强制重置基础样式 */
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
|
||||||
|
/* 布局重置 */
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
min-height: 600px !important;
|
||||||
|
position: relative !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
|
||||||
|
/* 文本样式重置 */
|
||||||
|
text-align: left !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
text-transform: none !important;
|
||||||
|
letter-spacing: normal !important;
|
||||||
|
word-spacing: normal !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制重置FilePreview内部的所有元素 */
|
||||||
|
.file-preview-container *,
|
||||||
|
.file-preview-container *::before,
|
||||||
|
.file-preview-container *::after {
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重置FilePreview主容器 */
|
||||||
|
.file-preview-container .file-preview {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
width: 100% !important;
|
||||||
|
display: block !important;
|
||||||
|
position: relative !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制重置FilePreview的header样式 */
|
||||||
|
.file-preview-container .file-preview-header {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 8px 16px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #e9ecef !important;
|
||||||
|
max-width: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
text-overflow: initial !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
text-align: left !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重置按钮样式 */
|
||||||
|
.file-preview-container .ant-btn,
|
||||||
|
.file-preview-container button {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border: 1px solid #d9d9d9 !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
margin: 0 2px !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
text-align: center !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
min-height: 24px !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview-container .ant-btn:hover,
|
||||||
|
.file-preview-container button:hover {
|
||||||
|
background-color: #f5f5f5 !important;
|
||||||
|
border-color: #40a9ff !important;
|
||||||
|
color: #40a9ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重置输入框样式 */
|
||||||
|
.file-preview-container .ant-input,
|
||||||
|
.file-preview-container input {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 1.4 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border: 1px solid #d9d9d9 !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
outline: none !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
min-height: 24px !important;
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 40px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重置PDF内容区域样式 */
|
||||||
|
.file-preview-container .file-preview-content {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-height: calc(100vh - 150px) !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
display: block !important;
|
||||||
|
position: relative !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
text-align: center !important;
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user