coder
69e4ca4d64
- 使用 Flask context_processor 自动注入 site_config - 所有页面标题使用 site_name 配置 - 所有页面导航栏品牌使用 site_name 配置 - 所有页面底部使用 site_footer 配置 - 文件上传时使用 max_file_size 配置验证文件大小 - 显示最大文件限制提示
158 lines
6.2 KiB
HTML
158 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>翻译详情 - {{ site_config.site_name }}</title>
|
|
<link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/static/css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">📄 {{ site_config.site_name }}</a>
|
|
<div class="navbar-nav ms-auto">
|
|
{% if user %}
|
|
<span class="nav-link text-light">👋 {{ user.username }}</span>
|
|
<a class="nav-link" href="/logout">退出</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container my-5">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h4 class="mb-0">{{ translation.original_filename }}</h4>
|
|
<div>
|
|
<a href="/api/download/{{ translation.id }}" class="btn btn-success btn-sm">下载结果</a>
|
|
<button class="btn btn-outline-primary btn-sm" id="toggleCompare">切换对比</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<small class="text-muted">
|
|
页数: {{ translation.page_count }} |
|
|
时间: {{ translation.created_at.strftime('%Y-%m-%d %H:%M') }} |
|
|
{% if translation.from_cache %}
|
|
<span class="text-success">来自缓存</span>
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
|
|
<div id="resultContent" class="translation-content">
|
|
加载中...
|
|
</div>
|
|
|
|
{% if user %}
|
|
<hr>
|
|
<div class="mt-3">
|
|
<h5>重新翻译</h5>
|
|
<textarea class="form-control" id="retranslateInstruction" rows="2"
|
|
placeholder="输入新的翻译要求，如：更口语化、保留更多原文术语等"></textarea>
|
|
<button class="btn btn-primary mt-2" id="retranslateBtn">重新翻译</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// 加载翻译结果
|
|
const translationId = {{ translation.id }};
|
|
let showCompare = false;
|
|
|
|
async function loadResult() {
|
|
try {
|
|
const response = await fetch(`/api/result/${translationId}`);
|
|
const result = await response.json();
|
|
|
|
document.getElementById('resultContent').innerHTML = renderMarkdown(result.content);
|
|
|
|
} catch (error) {
|
|
document.getElementById('resultContent').innerHTML = '加载失败: ' + error.message;
|
|
}
|
|
}
|
|
|
|
// 切换对比视图
|
|
document.getElementById('toggleCompare').addEventListener('click', async function() {
|
|
showCompare = !showCompare;
|
|
|
|
if (showCompare) {
|
|
try {
|
|
const response = await fetch(`/api/compare/${translationId}`);
|
|
const result = await response.json();
|
|
|
|
document.getElementById('resultContent').innerHTML = `
|
|
<div class="compare-container">
|
|
<div class="compare-panel original">
|
|
<h5>原文</h5>
|
|
<div>${escapeHtml(result.original)}</div>
|
|
</div>
|
|
<div class="compare-panel translated">
|
|
<h5>译文</h5>
|
|
<div>${renderMarkdown(result.translated)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
} catch (error) {
|
|
alert('加载对比失败');
|
|
}
|
|
} else {
|
|
loadResult();
|
|
}
|
|
});
|
|
|
|
// 重新翻译
|
|
document.getElementById('retranslateBtn')?.addEventListener('click', async function() {
|
|
const instruction = document.getElementById('retranslateInstruction').value;
|
|
if (!instruction.trim()) {
|
|
alert('请输入翻译要求');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/retranslate/${translationId}`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({instruction: instruction})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error);
|
|
}
|
|
|
|
alert('重译任务已创建，请稍后查看');
|
|
window.location.reload();
|
|
|
|
} catch (error) {
|
|
alert('重译失败: ' + error.message);
|
|
}
|
|
});
|
|
|
|
// 简单Markdown渲染
|
|
function renderMarkdown(text) {
|
|
text = text.replace(/^## (.*)$/gm, '<h2>$1</h2>');
|
|
text = text.replace(/^# (.*)$/gm, '<h1>$1</h1>');
|
|
text = text.replace(/^---$/gm, '<hr>');
|
|
text = text.replace(/^> (.*)$/gm, '<blockquote>$1</blockquote>');
|
|
text = text.replace(/\n\n/g, '</p><p>');
|
|
text = '<p>' + text + '</p>';
|
|
return text;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// 初始化加载
|
|
loadResult();
|
|
</script>
|
|
</body>
|
|
</html> |