Files
pdf-translate-web/templates/index.html
coder 4f33e92abf feat: 用户个人中心功能
- 账户余额显示和管理
- 充值功能(模拟模式)
- 退款申请功能(需管理员审核)
- 账户流水记录查看
- 会员购买记录查看
- 使用统计展示
- 新增模型:UserRecharge, UserRefund, MembershipPurchase, AccountTransaction
- User模型添加balance字段
- 导航栏添加个人中心入口
2026-04-14 18:29:46 +08:00

206 lines
9.9 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 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="/">📄 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>
<li class="nav-item"><a class="nav-link" href="/profile">个人中心</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>
<!-- 会员状态栏 -->
{% if user %}
{% if user.user_type == 'vip_enterprise' %}
<div class="alert alert-dark py-2 mb-0 text-center">
<strong>👑 企业会员</strong> |
无限翻译次数 | 到期:{{ user.membership_expire.strftime('%Y-%m-%d') if user.membership_expire else '永久' }}
</div>
{% elif user.user_type == 'vip_pro' %}
<div class="alert alert-warning py-2 mb-0 text-center">
<strong>⭐ 专业会员</strong> |
每日200次 · 最多500页 | 到期:{{ user.membership_expire.strftime('%Y-%m-%d') if user.membership_expire else '永久' }}
| <a href="/pricing" class="alert-link">升级企业会员享无限</a>
</div>
{% elif user.user_type == 'vip_basic' %}
<div class="alert alert-success py-2 mb-0 text-center">
<strong>💚 基础会员</strong> |
每日50次 · 最多100页 | 到期:{{ user.membership_expire.strftime('%Y-%m-%d') if user.membership_expire else '永久' }}
| <a href="/pricing" class="alert-link">升级享更多权益</a>
</div>
{% elif user.user_type == 'free' %}
<div class="alert alert-info py-2 mb-0 text-center">
<strong>👤 免费用户</strong> |
每日10次 · 最多50页 | <a href="/pricing" class="alert-link">升级会员解锁更多功能</a>
</div>
{% elif user.user_type == 'admin' %}
<div class="alert alert-danger py-2 mb-0 text-center">
<strong>🔧 管理员</strong> |
完整权限 | <a href="/admin" class="alert-link">进入后台管理</a>
</div>
{% endif %}
{% else %}
<div class="alert alert-secondary py-2 mb-0 text-center">
<strong>👁 访客模式</strong> |
每日仅3次 · 最多20页 · 功能受限 |
<a href="/login" class="alert-link">登录获取更多权益</a>
<a href="/register" class="alert-link">免费注册</a>
</div>
{% endif %}
<!-- 主内容 -->
<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>
{% for feat in features %}
<li>{% if feat.has %}✅{% else %}❌{% endif %} {{ feat.name }}</li>
{% endfor %}
</ul>
{% if not user or user.user_type == 'free' %}
<small class="text-muted">❌ 标记为会员专属功能,<a href="/pricing">升级会员</a>解锁</small>
{% endif %}
</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>