优化前端文本

This commit is contained in:
xunbu committed 2025-10-20 16:22:18 +08:00
1 parent 3ad64c4d9c
commit 6eeb29fd68
2 files changed
+3 -3

No files matched your search

+2 -2
View File
@@ -126,7 +126,7 @@
"closeBtn": "关闭",
"downloadBtn": "下载",
"tutorialModalTitle": "使用教程",
"tutorialModalBody": "<p><i class=\"bi bi-camera-video me-2\"></i>视频教程可以在B站搜索 <a href=\"https://search.bilibili.com/all?keyword=docutranslate\" target=\"_blank\">docutranslate</a> 获取。</p><p>欢迎使用 DocuTranslate!请按照以下步骤完成文档翻译:</p><ol><li><strong><i class=\"bi bi-diagram-3 me-2\"></i>第一步:选择工作流</strong><p class=\"mt-2\">在左侧配置面板的顶部,首先选择最适合您文件类型的处理流程。<div class=\"alert alert-info mt-2\" role=\"alert\"><i class=\"bi bi-lightbulb-fill me-2\"></i>提示: 默认已开启“自动选择工作流”。您只需上传文件,系统会自动为您匹配合适的工作流,简化操作。</div></p><ul><li><b>转Markdown再翻译</b>: 适用于翻译PDF、markdown、图片等文件。这是最通用和强大的模式。</li><li><b>纯文本翻译</b>: 用于翻译 <code>.txt</code> 纯文本文件。</li><li><b>EPUB翻译</b>: 用于翻译 <code>.epub</code> 电子书文件。</li><li><b>DOCX翻译</b>: 用于翻译 <code>.docx</code> Word文档。</li><li><b>XLSX翻译</b>: 用于翻译 <code>.xlsx</code> 或 <code>.csv</code> 电子表格文件。</li><li><b>SRT字幕翻译</b>: 用于翻译 <code>.srt</code> 字幕文件。</li><li><b>ASS字幕翻译</b>: 用于翻译 <code>.ass</code> 特效字幕文件。</li><li><b>JSON翻译</b>: 用于翻译 <code>.json</code> 文件中的特定字段。</li><li><b>HTML翻译</b>: 用于翻译 <code>.html</code> 网页文件。</li></ul></li><li><strong><i class=\"bi bi-gear-fill me-2\"></i>第二步:配置参数</strong><p class=\"mt-2\">选择工作流后,下方会显示相关的配置选项。请依次完成设置(所有配置都会自动保存在您的浏览器中):</p><p class=\"mb-2\"><strong>A. 工作流特定选项</strong> (根据您第一步的选择出现):</p><ul class=\"ms-4\"><li><u>如果选择“转Markdown再翻译”</u>,请配置 <strong>解析配置</strong>:<ul><li><strong>解析引擎</strong>: 选择一个引擎将您的文件(如PDF)转换为适合翻译的Markdown格式。如果您的文件已经是Markdown格式,则无需选择。</li><li><strong>Mineru Token</strong>: 如果您选择 <code>minerU</code> 引擎,需要在此处填入您的Token。</li></ul></li><li><u>如果选择“纯文本/DOCX/XLSX/SRT/ASS/EPUB/HTML”</u>,请配置其 <strong>翻译选项</strong>:<ul><li><strong>插入模式</strong>: 定义翻译结果如何放入文档。您可以选择直接“替换”原文,或是在原文之后“附加”,或是在原文之前“前置”。</li><li><strong>分隔符</strong>: 当选择“附加”或“前置”模式时,此项用于在原文和译文之间插入分隔符(例如ASS格式常用 <code>\\N</code>,EPUB格式常用 <code>&lt;br /&gt;</code> 作为换行分隔符)。</li></ul></li><li><u>如果选择“JSON翻译”</u>,请配置 <strong>JSON路径</strong>:<ul><li><strong>需要翻译的JSON路径</strong>: 每行输入一个 <a href=\"https://goessner.net/articles/JsonPath/\" target=\"_blank\">JSONPath</a> 表达式,将翻译所有与路径匹配的对象中的字符串。例如:<code>$..description</code>(翻译全部字符串),<code>$..description</code>(翻译所有键为<code>description</code>的值)。</li></ul></li></ul><p class=\"mb-2 mt-3\"><strong>B. 通用选项</strong> (适用于所有工作流):</p><ul class=\"ms-4\"><li><strong>翻译模型</strong>:<ul><li><strong>选择平台/API 地址/API Key/模型ID</strong>: 配置您希望使用的AI翻译服务。模型能力指令遵循越强,<strong>出错</strong>、<strong>漏翻</strong>的概率越低。</li><li><strong>跳过翻译</strong>: 勾选此项后,将只执行文档解析和格式转换,不调用AI进行翻译。</li></ul></li><li><strong>翻译配置</strong>:<ul><li><strong>目标语言</strong>: 指定翻译的目标语言。</li><li><strong>自定义Prompt</strong>: 可选,添加额外指令,如“人名保持原文不翻译”。</li><li><strong>思考模式</strong>: 针对部分支持混合推理的模型进行设置,建议选择“禁用(推荐)”。</li><li><strong>分块大小/并发数等</strong>: 高级参数,用于调整性能和API请求行为,通常保持默认即可。</li></ul></li><li><strong>术语表</strong>:<ul><li><strong>上传术语表 (可选)</strong>: 上传CSV文件(需包含'src'和'dst'列)来保证特定术语翻译的统一性和准确性。</li><li><strong>自动生成术语表</strong>: 启用后,程序会先从原文中提取术语并生成一个术语表,然后再进行翻译。</li></ul></li></ul></li><li><strong><i class=\"bi bi-file-earmark-arrow-up-fill me-2\"></i>第三步:上传文件</strong><p class=\"mt-2\">在右侧的任务列表中,点击或拖拽您的文档到文件上传区域。</p></li><li><strong><i class=\"bi bi-play-circle-fill me-2\"></i>第四步:开始翻译</strong><p class=\"mLine truncated
"tutorialModalBody": "<p><i class=\"bi bi-camera-video me-2\"></i>视频教程可以在B站搜索 <a href=\"https://search.bilibili.com/all?keyword=docutranslate\" target=\"_blank\">docutranslate</a> 获取。</p><p>欢迎使用 DocuTranslate!请按照以下步骤完成文档翻译:</p><ol><li><strong><i class=\"bi bi-diagram-3 me-2\"></i>第一步:选择工作流</strong><p class=\"mt-2\">在左侧配置面板的顶部,首先选择最适合您文件类型的处理流程。<div class=\"alert alert-info mt-2\" role=\"alert\"><i class=\"bi bi-lightbulb-fill me-2\"></i>提示: 默认已开启“自动选择工作流”。您只需上传文件,系统会自动为您匹配合适的工作流,简化操作。</div></p><ul><li><b>转Markdown再翻译</b>: 适用于翻译PDF、markdown、图片等文件。这是最通用和强大的模式。</li><li><b>纯文本翻译</b>: 用于翻译 <code>.txt</code> 纯文本文件。</li><li><b>EPUB翻译</b>: 用于翻译 <code>.epub</code> 电子书文件。</li><li><b>DOCX翻译</b>: 用于翻译 <code>.docx</code> Word文档。</li><li><b>XLSX翻译</b>: 用于翻译 <code>.xlsx</code> 或 <code>.csv</code> 电子表格文件。</li><li><b>SRT字幕翻译</b>: 用于翻译 <code>.srt</code> 字幕文件。</li><li><b>ASS字幕翻译</b>: 用于翻译 <code>.ass</code> 特效字幕文件。</li><li><b>JSON翻译</b>: 用于翻译 <code>.json</code> 文件中的特定字段。</li><li><b>HTML翻译</b>: 用于翻译 <code>.html</code> 网页文件。</li></ul></li><li><strong><i class=\"bi bi-gear-fill me-2\"></i>第二步:配置参数</strong><p class=\"mt-2\">选择工作流后,下方会显示相关的配置选项。请依次完成设置(所有配置都会自动保存在您的浏览器中):</p><p class=\"mb-2\"><strong>A. 工作流特定选项</strong> (根据您第一步的选择出现):</p><ul class=\"ms-4\"><li><u>如果选择“转Markdown再翻译”</u>,请配置 <strong>解析配置</strong>:<ul><li><strong>解析引擎</strong>: 选择一个引擎将您的文件(如PDF)转换为适合翻译的Markdown格式。如果您的文件已经是Markdown格式,则无需选择。</li><li><strong>Mineru Token</strong>: 如果您选择 <code>minerU</code> 引擎,需要在此处填入您的Token。</li></ul></li><li><u>如果选择“纯文本/DOCX/XLSX/SRT/ASS/EPUB/HTML”</u>,请配置其 <strong>翻译选项</strong>:<ul><li><strong>插入模式</strong>: 定义翻译结果如何放入文档。您可以选择直接“替换”原文,或是在原文之后“附加”,或是在原文之前“前置”。</li><li><strong>分隔符</strong>: 当选择“附加”或“前置”模式时,此项用于在原文和译文之间插入分隔符(例如ASS格式常用 <code>\\N</code>,EPUB格式常用 <code>&lt;br /&gt;</code> 作为换行分隔符)。</li></ul></li><li><u>如果选择“JSON翻译”</u>,请配置 <strong>JSON路径</strong>:<ul><li><strong>需要翻译的JSON路径</strong>: 每行输入一个 <a href=\"https://goessner.net/articles/JsonPath/\" target=\"_blank\">JSONPath</a> 表达式,将翻译所有与路径匹配的对象中的字符串。例如:<code>$.*</code>(翻译全部字符串),<code>$..description</code>(翻译所有键为<code>description</code>的值)。</li></ul></li></ul><p class=\"mb-2 mt-3\"><strong>B. 通用选项</strong> (适用于所有工作流):</p><ul class=\"ms-4\"><li><strong>翻译模型</strong>:<ul><li><strong>选择平台/API 地址/API Key/模型ID</strong>: 配置您希望使用的AI翻译服务。模型能力指令遵循越强,<strong>出错</strong>、<strong>漏翻</strong>的概率越低。</li><li><strong>跳过翻译</strong>: 勾选此项后,将只执行文档解析和格式转换,不调用AI进行翻译。</li></ul></li><li><strong>翻译配置</strong>:<ul><li><strong>目标语言</strong>: 指定翻译的目标语言。</li><li><strong>自定义Prompt</strong>: 可选,添加额外指令,如“人名保持原文不翻译”。</li><li><strong>思考模式</strong>: 针对部分支持混合推理的模型进行设置,建议选择“禁用(推荐)”。</li><li><strong>分块大小/并发数等</strong>: 高级参数,用于调整性能和API请求行为,通常保持默认即可。</li></ul></li><li><strong>术语表</strong>:<ul><li><strong>上传术语表 (可选)</strong>: 上传CSV文件(需包含'src'和'dst'列)来保证特定术语翻译的统一性和准确性。</li><li><strong>自动生成术语表</strong>: 启用后,程序会先从原文中提取术语并生成一个术语表,然后再进行翻译。</li></ul></li></ul></li><li><strong><i class=\"bi bi-file-earmark-arrow-up-fill me-2\"></i>第三步:上传文件</strong><p class=\"mt-2\">在右侧的任务列表中,点击或拖拽您的文档到文件上传区域。</p></li><li><strong><i class=\"bi bi-play-circle-fill me-2\"></i>第四步:开始翻译</strong><p class=\"mt-2\">文Line truncated
"tutorialUnderstandBtn": "我明白了",
"contributorsModalTitle": "感谢贡献",
"contributorsPara1": "DocuTranslate是一个开源项目!大家的需求与使用是项目进步的动力。",
@@ -301,7 +301,7 @@
"closeBtn": "Close",
"downloadBtn": "Download",
"tutorialModalTitle": "Tutorial",
"tutorialModalBody": "<p><i class=\"bi bi-camera-video me-2\"></i>Video tutorials are available on Bilibili by searching for <a href=\"https://search.bilibili.com/all?keyword=docutranslate\" target=\"_blank\">docutranslate</a>.</p><p>Welcome to DocuTranslate! Please follow these steps to translate your documents:</p><ol><li><strong><i class=\"bi bi-diagram-3 me-2\"></i>Step 1: Select Workflow</strong><p class=\"mt-2\">At the top of the left-side settings panel, first choose the processing flow that best suits your file type.<div class=\"alert alert-info mt-2\" role=\"alert\"><i class=\"bi bi-lightbulb-fill me-2\"></i>Tip: 'Auto-select workflow' is enabled by default. Just upload your file, and the system will automatically match it to the appropriate workflow, simplifying the process.</div></p><ul><li><b>Markdown-based Translation</b>: Ideal for translating PDFs, Markdown files, images, etc. This is the most versatile and powerful mode.</li><li><b>Plain Text Translation</b>: For translating <code>.txt</code> plain text files.</li><li><b>EPUB Translation</b>: For translating <code>.epub</code> e-book files.</li><li><b>DOCX Translation</b>: For translating <code>.docx</code> Word documents.</li><li><b>XLSX Translation</b>: For translating <code>.xlsx</code> or <code>.csv</code> spreadsheet files.</li><li><b>SRT Subtitle Translation</b>: For translating <code>.srt</code> subtitle files.</li><li><b>ASS Subtitle Translation</b>: For translating <code>.ass</code> advanced subtitle files.</li><li><b>JSON Translation</b>: For translating specific fields within <code>.json</code> files.</li><li><b>HTML Translation</b>: For translating <code>.html</code> web page files.</li></ul></li><li><strong><i class=\"bi bi-gear-fill me-2\"></i>Step 2: Configure Parameters</strong><p class=\"mt-2\">After selecting a workflow, relevant configuration options will appear below. Please complete the settings in order (all configurations are automatically saved in your browser):</p><p class=\"mb-2\"><strong>A. Workflow-Specific Options</strong> (Appears based on your choice in Step 1):</p><ul class=\"ms-4\"><li><u>If you chose 'Markdown-based Translation'</u>, configure the <strong>Parsing Configuration</strong>:<ul><li><strong>Parsing Engine</strong>: Select an engine to convert your file (like a PDF) into a translation-friendly Markdown format. No selection is needed if your file is already in Markdown format.</li><li><strong>Mineru Token</strong>: If you select the <code>minerU</code> engine, you must enter your token here.</li></ul></li><li><u>If you chose 'Plain Text/DOCX/XLSX/SRT/ASS/EPUB/HTML'</u>, configure its <strong>Translation Options</strong>:<ul><li><strong>Insert Mode</strong>: Defines how the translation result is placed in the document. You can 'Replace' the original, 'Append' after, or 'Prepend' before it.</li><li><strong>Separator</strong>: When in 'Append' or 'Prepend' mode, this is used to insert a separator between the original and translated text (e.g., <code>\\N</code> for ASS, <code>&lt;br /&gt;</code> for EPUB).</li></ul></li><li><u>If you chose 'JSON Translation'</u>, configure the <strong>JSON Paths</strong>:<ul><li><strong>JSON Paths to Translate</strong>: Enter one <a href=\"https://goessner.net/articles/JsonPath/\" target=\"_blank\">JSONPath</a> expression per line to translate all strings within matching objects. E.g., <code>$..*</code> (translate all strings), <code>$..description</code> (translate all values with the key <code>description</code>).</li></ul></li></ul><p class=\"mb-2 mt-3\"><strong>B. General Options</strong> (Applicable to all workflows):</p><ul class=\"ms-4\"><li><strong>Translation Model</strong>:<ul><li><strong>Select Platform/API Address/API Key/Model ID</strong>: Configure the AI translation service you want to use. The stronger the model's instruction-following capabilities, the lower the probability of errors or missed translations.</li><li><strong>Skip Translation</strong>: If checked, only document parsing and format conversion will be performed, without calling the AI for translation.</li></ul></li><li><strong>Translation Configuration</strong>:<ul><li><strong>Target Language</strong>: Specify the target language for the translation.</li><li><strong>Custom Prompt</strong>: Optional; add extra instructions, such as 'Keep proper names in their original language.'</li><li><strong>Thinking Mode</strong>: A setting for some models that support hybrid inference. 'Disable (Recommended)' is advised.</li><li><strong>Chunk Size/Concurrency, etc.</strong>: Advanced parameters for adjusting performance and API request behavior. The defaults are usually fine.</li></ul></li><li><strong>Glossary</strong>:<ul><li><strong>Upload Glossary (Optional)</strong>: Upload a CSV file (must contain 'src' and 'dst' columns) to ensure consistency and accuracy for specific terms.</li><li><strong>Auto-generate Glossary</strong>: When enabled, the program will first extract terms from the original texLine truncated
"tutorialModalBody": "<p><i class=\"bi bi-camera-video me-2\"></i>Video tutorials are available on Bilibili by searching for <a href=\"https://search.bilibili.com/all?keyword=docutranslate\" target=\"_blank\">docutranslate</a>.</p><p>Welcome to DocuTranslate! Please follow these steps to translate your documents:</p><ol><li><strong><i class=\"bi bi-diagram-3 me-2\"></i>Step 1: Select Workflow</strong><p class=\"mt-2\">At the top of the left-side settings panel, first choose the processing flow that best suits your file type.<div class=\"alert alert-info mt-2\" role=\"alert\"><i class=\"bi bi-lightbulb-fill me-2\"></i>Tip: 'Auto-select workflow' is enabled by default. Just upload your file, and the system will automatically match it to the appropriate workflow, simplifying the process.</div></p><ul><li><b>Markdown-based Translation</b>: Ideal for translating PDFs, Markdown files, images, etc. This is the most versatile and powerful mode.</li><li><b>Plain Text Translation</b>: For translating <code>.txt</code> plain text files.</li><li><b>EPUB Translation</b>: For translating <code>.epub</code> e-book files.</li><li><b>DOCX Translation</b>: For translating <code>.docx</code> Word documents.</li><li><b>XLSX Translation</b>: For translating <code>.xlsx</code> or <code>.csv</code> spreadsheet files.</li><li><b>SRT Subtitle Translation</b>: For translating <code>.srt</code> subtitle files.</li><li><b>ASS Subtitle Translation</b>: For translating <code>.ass</code> advanced subtitle files.</li><li><b>JSON Translation</b>: For translating specific fields within <code>.json</code> files.</li><li><b>HTML Translation</b>: For translating <code>.html</code> web page files.</li></ul></li><li><strong><i class=\"bi bi-gear-fill me-2\"></i>Step 2: Configure Parameters</strong><p class=\"mt-2\">After selecting a workflow, relevant configuration options will appear below. Please complete the settings in order (all configurations are automatically saved in your browser):</p><p class=\"mb-2\"><strong>A. Workflow-Specific Options</strong> (Appears based on your choice in Step 1):</p><ul class=\"ms-4\"><li><u>If you chose 'Markdown-based Translation'</u>, configure the <strong>Parsing Configuration</strong>:<ul><li><strong>Parsing Engine</strong>: Select an engine to convert your file (like a PDF) into a translation-friendly Markdown format. No selection is needed if your file is already in Markdown format.</li><li><strong>Mineru Token</strong>: If you select the <code>minerU</code> engine, you must enter your token here.</li></ul></li><li><u>If you chose 'Plain Text/DOCX/XLSX/SRT/ASS/EPUB/HTML'</u>, configure its <strong>Translation Options</strong>:<ul><li><strong>Insert Mode</strong>: Defines how the translation result is placed in the document. You can 'Replace' the original, 'Append' after, or 'Prepend' before it.</li><li><strong>Separator</strong>: When in 'Append' or 'Prepend' mode, this is used to insert a separator between the original and translated text (e.g., <code>\\N</code> for ASS, <code>&lt;br /&gt;</code> for EPUB).</li></ul></li><li><u>If you chose 'JSON Translation'</u>, configure the <strong>JSON Paths</strong>:<ul><li><strong>JSON Paths to Translate</strong>: Enter one <a href=\"https://goessner.net/articles/JsonPath/\" target=\"_blank\">JSONPath</a> expression per line to translate all strings within matching objects. E.g., <code>$.*</code> (translate all strings), <code>$..description</code> (translate all values with the key <code>description</code>).</li></ul></li></ul><p class=\"mb-2 mt-3\"><strong>B. General Options</strong> (Applicable to all workflows):</p><ul class=\"ms-4\"><li><strong>Translation Model</strong>:<ul><li><strong>Select Platform/API Address/API Key/Model ID</strong>: Configure the AI translation service you want to use. The stronger the model's instruction-following capabilities, the lower the probability of errors or missed translations.</li><li><strong>Skip Translation</strong>: If checked, only document parsing and format conversion will be performed, without calling the AI for translation.</li></ul></li><li><strong>Translation Configuration</strong>:<ul><li><strong>Target Language</strong>: Specify the target language for the translation.</li><li><strong>Custom Prompt</strong>: Optional; add extra instructions, such as 'Keep proper names in their original language.'</li><li><strong>Thinking Mode</strong>: A setting for some models that support hybrid inference. 'Disable (Recommended)' is advised.</li><li><strong>Chunk Size/Concurrency, etc.</strong>: Advanced parameters for adjusting performance and API request behavior. The defaults are usually fine.</li></ul></li><li><strong>Glossary</strong>:<ul><li><strong>Upload Glossary (Optional)</strong>: Upload a CSV file (must contain 'src' and 'dst' columns) to ensure consistency and accuracy for specific terms.</li><li><strong>Auto-generate Glossary</strong>: When enabled, the program will first extract terms from the original textLine truncated
"tutorialUnderstandBtn": "I Understand",
"contributorsModalTitle": "Thanks for Contributing",
"contributorsPara1": "DocuTranslate is an open-source project! Your needs and usage are what drive its progress.",
+1 -1
View File
@@ -1 +1 @@
<html lang="zh-CN" data-bs-theme="auto"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-i18n-title="pageTitle">DocuTranslate - 交互式文档翻译</title> <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <!-- Bootstrap CSS --> <link href="/static/bootstrap.css" rel="stylesheet" crossorigin="anonymous"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="/static/bootstrap-icons.css"> <style> body { background-color: var(--bs-body-bg); } button:focus { outline: none !important; box-shadow: none !important; } .main-container { display: flex; flex-direction: column; height: 100vh; padding-top: 1rem; padding-bottom: 1rem; } .settings-panel { height: calc(100vh - 2rem); overflow-y: auto; padding-right: 15px; /* for scrollbar */ } .task-area { height: calc(100vh - 2rem); overflow-y: auto; } .task-card { transition: all 0.3s ease-in-out; } .task-id-placeholder { color: var(--bs-secondary-color); font-style: italic; } .log-area { height: 150px; background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; font-family: monospace; font-size: 0.8rem; padding: 10px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } /* [NEW] Wrapper for log area to position the copy button */ .log-area-wrapper { position: relative; } /* [NEW] Styles for the copy button */ .copy-log-btn { position: absolute; bottom: 5px; right: 5px; z-index: 10; opacity: 0.5; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; padding: 0.1rem 0.4rem; line-height: 1; } .copy-log-btn:hover { opacity: 1; } .file-drop-area { border: 2px dashed var(--bs-secondary-bg); border-radius: .375rem; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; background-color: var(--bs-body-bg); } .file-drop-area.drag-over { border-color: var(--bs-primary); background-color: var(--bs-secondary-bg); } .file-drop-area.file-selected { border-style: solid; border-color: var(--bs-success); background-color: var(--bs-success-bg-subtle); } .file-drop-area.input-error { border-color: var(--bs-danger); } .file-name-display.input-error-text { color: var(--bs-danger); font-weight: bold; } #printFrame, #translatedPreviewFrame { border: none; width: 100%; } #previewOffcanvas { --bs-offcanvas-width: 95vw; max-width: 1600px; } .preview-split-container { display: flex; flex-direction: row; height: 90%; } .preview-pane-wrapper { display: flex; flex-direction: column; overflow: hidden; /* Important for split.js */ } .preview-pane-wrapper h6 { flex-shrink: 0; padding: 0.25rem; } .preview-pane-wrapper .preview-pane { flex-grow: 1; /* Make the inner pane grow */ border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: auto; } .gutter { background-color: var(--bs-tertiary-bg); background-repeat: no-repeat; background-position: 50%; } .gutter.gutter-horizontal { cursor: col-resize; border-left: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); } .gutter.gutter-vertical { cursor: row-resize; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); } .preview-pane iframe, .preview-pane pre { width: 100%; height: 95%; border: none; margin: 0; padding: 0; overflow: auto; background-color: var(--bs-body-bg); } .slider-reset-btn { visibility: hidden; } .bottom-left-controls { Line truncated
<html lang="zh-CN" data-bs-theme="auto"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-i18n-title="pageTitle">DocuTranslate - 交互式文档翻译</title> <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <!-- Bootstrap CSS --> <link href="/static/bootstrap.css" rel="stylesheet" crossorigin="anonymous"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="/static/bootstrap-icons.css"> <style> body { background-color: var(--bs-body-bg); } button:focus { outline: none !important; box-shadow: none !important; } .main-container { display: flex; flex-direction: column; height: 100vh; padding-top: 1rem; padding-bottom: 1rem; } .settings-panel { height: calc(100vh - 2rem); overflow-y: auto; padding-right: 15px; /* for scrollbar */ } .task-area { height: calc(100vh - 2rem); overflow-y: auto; } .task-card { transition: all 0.3s ease-in-out; } .task-id-placeholder { color: var(--bs-secondary-color); font-style: italic; } .log-area { height: 150px; background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; font-family: monospace; font-size: 0.8rem; padding: 10px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } /* [NEW] Wrapper for log area to position the copy button */ .log-area-wrapper { position: relative; } /* [NEW] Styles for the copy button */ .copy-log-btn { position: absolute; bottom: 5px; right: 5px; z-index: 10; opacity: 0.5; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; padding: 0.1rem 0.4rem; line-height: 1; } .copy-log-btn:hover { opacity: 1; } .file-drop-area { border: 2px dashed var(--bs-secondary-bg); border-radius: .375rem; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; background-color: var(--bs-body-bg); } .file-drop-area.drag-over { border-color: var(--bs-primary); background-color: var(--bs-secondary-bg); } .file-drop-area.file-selected { border-style: solid; border-color: var(--bs-success); background-color: var(--bs-success-bg-subtle); } .file-drop-area.input-error { border-color: var(--bs-danger); } .file-name-display.input-error-text { color: var(--bs-danger); font-weight: bold; } #printFrame, #translatedPreviewFrame { border: none; width: 100%; } #previewOffcanvas { --bs-offcanvas-width: 95vw; max-width: 1600px; } .preview-split-container { display: flex; flex-direction: row; height: 90%; } .preview-pane-wrapper { display: flex; flex-direction: column; overflow: hidden; /* Important for split.js */ } .preview-pane-wrapper h6 { flex-shrink: 0; padding: 0.25rem; } .preview-pane-wrapper .preview-pane { flex-grow: 1; /* Make the inner pane grow */ border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: auto; } .gutter { background-color: var(--bs-tertiary-bg); background-repeat: no-repeat; background-position: 50%; } .gutter.gutter-horizontal { cursor: col-resize; border-left: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); } .gutter.gutter-vertical { cursor: row-resize; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); } .preview-pane iframe, .preview-pane pre { width: 100%; height: 95%; border: none; margin: 0; padding: 0; overflow: auto; background-color: var(--bs-body-bg); } .slider-reset-btn { visibility: hidden; } .bottom-left-controls { Line truncated