Files
pdf-translate-web/templates/index.html
coder 2ef5e6da87 V2.0.0: 新增用户权限动态配置、会员套餐配置、数据包购买功能
新功能:
- 用户权限动态配置(翻译次数、页数限制)
- 会员套餐动态配置(名称、价格、周期)
- 数据包购买套餐管理
- 收入统计功能
- 数据包销售排行

技术更新:
- 新增 DynamicConfig 模型支持动态配置
- 新增 DataPackage 和 UserPackage 模型
- 后台管理增加数据包管理模块
2026-04-07 23:26:53 +08:00

162 lines
7.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF翻译助手 - 英文PDF翻译中文</title>
<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="/">📄 PDF翻译助手</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="/">首页</a></li>
<li class="nav-item"><a class="nav-link" href="/pricing">会员套餐</a></li>
{% if user %}
<li class="nav-item"><a class="nav-link" href="/history">翻译历史</a></li>
{% endif %}
</ul>
<div class="navbar-nav">
{% if user %}
<span class="nav-link text-light">👋 {{ user.username }}</span>
<a class="nav-link" href="/logout">退出</a>
{% else %}
<a class="nav-link" href="/login">登录</a>
<a class="nav-link" href="/register">注册</a>
{% endif %}
</div>
</div>
</div>
</nav>
<!-- 主内容 -->
<main class="container my-5">
<!-- 用户信息卡片 -->
<div class="row mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">📊 今日翻译额度</h5>
{% if user %}
<p class="card-text">
用户类型: <strong>{{ user.user_type }}</strong><br>
今日剩余: <strong class="text-success">{{ daily_remaining }}次</strong><br>
单文件最大: <strong>{{ max_pages }}页</strong>
</p>
{% if not user.is_vip() %}
<a href="/pricing" class="btn btn-outline-primary btn-sm">升级会员</a>
{% endif %}
{% else %}
<p class="card-text">
访客模式<br>
今日剩余: <strong class="text-warning">{{ daily_remaining }}次</strong><br>
单文件最大: <strong>{{ max_pages }}页</strong><br>
<small class="text-muted">登录后可获得更多翻译次数</small>
</p>
<a href="/login" class="btn btn-primary btn-sm">登录获取更多</a>
{% endif %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">✨ 功能特点</h5>
<ul class="list-unstyled">
<li>✅ 自动翻译缓存,相同文件秒出结果</li>
<li>✅ 支持自定义翻译要求</li>
<li>✅ 原文译文对比查看</li>
<li>✅ 翻译历史记录</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 上传区域 -->
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">📤 上传PDF文件</h4>
</div>
<div class="card-body">
<form id="uploadForm">
<div class="mb-3">
<label class="form-label">选择PDF文件最大{{ max_pages }}页)</label>
<input type="file" class="form-control" id="pdfFile" name="file" accept=".pdf" required>
<div class="form-text">支持英文PDF翻译为中文</div>
</div>
{% if user %}
<div class="mb-3">
<label class="form-label">翻译要求(可选)</label>
<textarea class="form-control" id="instruction" name="instruction" rows="2"
placeholder="例如:保持专业术语原文、使用口语化表达等"></textarea>
</div>
{% endif %}
<button type="submit" class="btn btn-primary btn-lg w-100" id="submitBtn">
<span id="btnText">开始翻译</span>
<span id="btnSpinner" class="spinner-border spinner-border-sm" style="display:none"></span>
</button>
</form>
</div>
</div>
<!-- 翻译进度 -->
<div id="progressSection" class="card mt-4" style="display:none">
<div class="card-header">
<h5 class="mb-0">🔄 翻译进度</h5>
</div>
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%">0%</div>
</div>
<p id="progressMessage" class="text-muted">等待开始...</p>
<div id="cacheNotice" class="alert alert-success" style="display:none">
✅ 使用缓存结果,无需重新翻译
</div>
</div>
</div>
<!-- 翻译结果 -->
<div id="resultSection" class="card mt-4" style="display:none">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">📝 翻译结果</h5>
<div>
<button class="btn btn-outline-primary btn-sm" id="viewCompare">对比查看</button>
<button class="btn btn-success btn-sm" id="downloadBtn">下载结果</button>
</div>
</div>
<div class="card-body">
<div id="resultContent" class="translation-content"></div>
{% if user %}
<div class="mt-3">
<label class="form-label">不满意?重新翻译</label>
<textarea class="form-control" id="retranslateInstruction" rows="2"
placeholder="输入新的翻译要求,如:更口语化、保留更多原文术语等"></textarea>
<button class="btn btn-outline-secondary mt-2" id="retranslateBtn">重新翻译</button>
</div>
{% endif %}
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
<div class="container text-center">
<p class="text-muted">PDF翻译助手 v1.0.0 | 基于本地LLM服务</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>