From adea5cd2775acfde1043b22a65c288f8078d5e9e Mon Sep 17 00:00:00 2001 From: awen Date: Thu, 29 May 2025 22:29:38 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=90=88=E5=90=8C=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5=E6=98=BE=E7=A4=BA=E5=90=88=E5=90=8C=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/routes/contract-template.detail.$id.tsx | 38 +- app/styles/pages/contract-template.css | 58 + html/合同模板页面-多个页面.html | 1627 +++++++++++++++++++ 3 files changed, 1721 insertions(+), 2 deletions(-) create mode 100644 html/合同模板页面-多个页面.html diff --git a/app/routes/contract-template.detail.$id.tsx b/app/routes/contract-template.detail.$id.tsx index fdd8b88..c175500 100644 --- a/app/routes/contract-template.detail.$id.tsx +++ b/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 (
{/* 返回按钮 */} @@ -291,8 +317,16 @@ export default function ContractTemplateDetail() { {/* 合同预览 */}

合同预览

-
- 
{template.preview}
+
+ {/* 为FilePreview创建样式隔离容器 */} +
+ +
diff --git a/app/styles/pages/contract-template.css b/app/styles/pages/contract-template.css index aec02fc..2ddd8c6 100644 --- a/app/styles/pages/contract-template.css +++ b/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; } \ No newline at end of file diff --git a/html/合同模板页面-多个页面.html b/html/合同模板页面-多个页面.html new file mode 100644 index 0000000..357f504 --- /dev/null +++ b/html/合同模板页面-多个页面.html @@ -0,0 +1,1627 @@ + + + + + + 中国烟草合同模板库 - AI智能搜索系统 + + + + + + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 智能搜索 +
+
+ 欢迎，张经理 + +
+
+ +
+
+

AI智能合同模板搜索

+

输入合同名称、用途或关键内容，快速找到最适合的模板

+ +
+
+ +
+
+ + 支持自然语言描述，AI将为您匹配最相关的模板 +
+ +
+
+
+
+ +
+
+
+ +
+
销售合同
+
128个模板
+
+
+
+ +
+
采购合同
+
96个模板
+
+
+
+ +
+
物流运输
+
64个模板
+
+
+
+ +
+
人事劳务
+
52个模板
+
+
+
+ +
+
租赁合同
+
38个模板
+
+
+
+ +
+
保密协议
+
24个模板
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 搜索结果 +
+
+
+ + +
+ 欢迎，张经理 + +
+
+ +
+ +
+
+ +
+
+ + 搜索用时 0.3秒 +
+ +
+
+
+ +
+
+ 为您找到 24 个相关模板 +
+
+ +
+
+ +
+
全部 (24)
+
销售合同 (18)
+
采购合同 (4)
+
服务合同 (2)
+
+ +
+
+
+
销售合同
+
+ + 4.8 +
+
+

烟草产品销售合同标准模板

+

适用于烟草产品销售业务，包含完整的违约责任条款、付款方式、交付条件等核心要素，符合行业规范要求。

+
+ 更新时间：2023-10-25 + 使用次数：1,248 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.6 +
+
+

零售商销售协议模板

+

专为零售商设计的销售协议，详细规定了违约责任、退换货政策、结算方式等条款。

+
+ 更新时间：2023-10-20 + 使用次数：856 +
+
+ + + +
+
+ +
+
+
采购合同
+
+ + 4.7 +
+
+

设备采购合同（含违约条款）

+

设备采购专用合同模板，包含详细的违约责任条款、质量保证、验收标准等内容。

+
+ 更新时间：2023-10-18 + 使用次数：642 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.5 +
+
+

批发销售合同模板

+

适用于大宗批发业务的销售合同，强化了违约责任条款和风险控制措施。

+
+ 更新时间：2023-10-15 + 使用次数：534 +
+
+ + + +
+
+ +
+
+
服务合同
+
+ + 4.4 +
+
+

技术服务合同（标准版）

+

技术服务类合同模板，包含服务标准、违约责任、知识产权保护等关键条款。

+
+ 更新时间：2023-10-12 + 使用次数：423 +
+
+ + + +
+
+ +
+
+
销售合同
+
+ + 4.3 +
+
+

区域代理销售合同

+

区域代理商专用销售合同，明确代理权限、销售目标、违约责任等核心条款。

+
+ 更新时间：2023-10-10 + 使用次数：312 +
+
+ + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 模板分类 + 销售合同 +
+
+
+ + +
+ 欢迎，张经理 + +
+
+ +
+
+
+

销售合同模板

+
+ 共 128 个模板 +
+
+
+ +
+
+ +
+
全部 (128)
+
标准版 (86)
+
简化版 (24)
+
专业版 (18)
+
+ +
+
+
+
标准版
+
+ + 4.9 +
+
+

烟草产品销售合同（2023版）

+

最新版本的烟草产品销售合同模板，包含完整的法律条款、风险控制措施和行业标准要求。

+
+ 更新时间：2023-10-25 + 使用次数：2,156 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.8 +
+
+

零售商销售协议模板

+

专为零售商设计的销售协议，涵盖商品配送、结算方式、退换货政策等关键条款。

+
+ 更新时间：2023-10-20 + 使用次数：1,834 +
+
+ + + +
+
+ +
+
+
专业版
+
+ + 4.7 +
+
+

大客户销售合同模板

+

适用于大客户的专业销售合同，包含定制化条款、特殊优惠政策和长期合作框架。

+
+ 更新时间：2023-10-18 + 使用次数：1,245 +
+
+ + + +
+
+ +
+
+
简化版
+
+ + 4.6 +
+
+

小额销售合同（简化版）

+

适用于小额交易的简化版销售合同，条款精简但保证法律效力。

+
+ 更新时间：2023-10-15 + 使用次数：956 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.5 +
+
+

区域代理销售合同

+

区域代理商专用销售合同，明确代理权限、销售目标和考核标准。

+
+ 更新时间：2023-10-12 + 使用次数：743 +
+
+ + + +
+
+ +
+
+
标准版
+
+ + 4.4 +
+
+

批发销售合同模板

+

适用于大宗批发业务的销售合同，包含数量折扣、物流配送等专业条款。

+
+ 更新时间：2023-10-10 + 使用次数：612 +
+
+ + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 智能搜索 +
+
+ 模板分类 +
+
+ 收藏模板 +
+
+ 使用历史 +
+
+ 上传模板 +
+
+ 系统设置 +
+
+
+ +
+
+
+ 首页 + 模板分类 + 销售合同 + 烟草产品销售合同 +
+
+ + 欢迎，张经理 + +
+
+ +
+
+
+
+
销售合同 · 标准版
+
+
+ + + + + + 4.9 (156评价) +
+
+
+ +

烟草产品销售合同（2023版）

+ +
+
+ 模板编号： + XS-2023-001 +
+
+ 更新时间： + 2023年10月25日 +
+
+ 使用次数： + 2,156次 +
+
+ 文件大小： + 245KB +
+
+ 适用范围： + 烟草产品销售 +
+
+ 法律依据： + 《合同法》《烟草专卖法》 +
+
+ +
+ + + + +
+
+ +
+
+

模板简介

+

+ 本模板是专为烟草行业设计的标准销售合同，严格遵循《烟草专卖法》等相关法律法规， + 涵盖了烟草产品销售过程中的各个关键环节。模板包含完整的合同条款结构， + 包括合同主体、标的物、价格条款、交付方式、付款条件、违约责任、争议解决等核心内容。 + 适用于各类烟草产品的销售业务，能够有效保护交易双方的合法权益。 +

+
+ +
+

主要特点

+
+
+
+ + 法律合规 +
+

严格遵循烟草行业法律法规，确保合同条款合法有效

+
+
+
+ + 条款完整 +
+

涵盖销售全流程，条款结构完整，逻辑清晰

+
+
+
+ + 易于定制 +
+

模板化设计，可根据具体业务需求灵活调整

+
+
+
+ + 行业标准 +
+

符合烟草行业标准，被广泛使用和认可

+
+
+
+ +
+

合同条款结构

+
+
+
1
+
+
合同主体
+
甲乙双方基本信息、资质证明
+
+
+
+
2
+
+
标的物条款
+
产品名称、规格、数量、质量标准
+
+
+
+
3
+
+
价格与付款
+
价格条款、付款方式、结算周期
+
+
+
+
4
+
+
交付与验收
+
交付时间、地点、方式、验收标准
+
+
+
+
5
+
+
违约责任
+
违约情形、责任承担、损失赔偿
+
+
+
+
6
+
+
争议解决
+
争议处理方式、管辖法院
+
+
+
+
+ +
+

合同预览

+
+
+

烟草产品销售合同

+

合同编号：_______________

+
+ +
+

甲方（销售方）：_________________________

+

地址：_____________________________________

+

法定代表人：_______________ 联系电话：_______________

+

烟草专卖许可证号：_________________________

+
+ +
+

乙方（采购方）：_________________________

+

地址：_____________________________________

+

法定代表人：_______________ 联系电话：_______________

+

烟草专卖零售许可证号：_____________________

+
+ +
+

根据《中华人民共和国合同法》、《中华人民共和国烟草专卖法》等相关法律法规， + 甲乙双方在平等、自愿、公平、诚信的基础上，就烟草产品销售事宜达成如下协议：

+
+ +
+

第一条 标的物

+

1.1 产品名称：_________________________

+

1.2 产品规格：_________________________

+

1.3 产品数量：_________________________

+

1.4 产品单价：_________________________

+

1.5 合同总金额：_______________________

+
+ +
+ ... 更多条款内容请下载完整模板查看 ... +
+
+
+ +
+

用户评价

+
+
+
+
+
李
+ 李经理 +
+ + + + + +
+
+ 2023-10-20 +
+

模板非常专业，条款完整，符合行业规范。我们公司一直在使用这个模板，效果很好。

+
+ +
+
+
+
王
+ 王总 +
+ + + + + +
+
+ 2023-10-18 +
+

模板结构清晰，易于理解和使用。特别是违约责任条款写得很详细，对我们很有帮助。

+
+ +
+
+
+
张
+ 张主任 +
+ + + + + +
+
+ 2023-10-15 +
+

非常实用的模板，法律条款严谨，符合最新的法规要求。推荐给同行使用。

+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file From d0c479f9d4bd587751bccd11d93ac8028efbcce1 Mon Sep 17 00:00:00 2001 From: awen Date: Thu, 29 May 2025 22:35:11 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/routes/contract-template.detail.$id.tsx | 116 +++++++++++++- app/styles/pages/contract-template.css | 168 +++++++++++++++----- 2 files changed, 241 insertions(+), 43 deletions(-) diff --git a/app/routes/contract-template.detail.$id.tsx b/app/routes/contract-template.detail.$id.tsx index c175500..fdaac27 100644 --- a/app/routes/contract-template.detail.$id.tsx +++ b/app/routes/contract-template.detail.$id.tsx @@ -7,7 +7,92 @@ import styles from '~/styles/pages/contract-template.css?url'; import { FilePreview } from '~/components/reviews'; 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 = ({ data }) => { @@ -318,8 +403,33 @@ export default function ContractTemplateDetail() {

合同预览

- {/* 为FilePreview创建样式隔离容器 */} -
+ {/* 使用更强的样式隔离 */} +