From 0c29ed2a0ec3fb36cd25200b09e8715cbe87cea1 Mon Sep 17 00:00:00 2001
From: ljj <ljj@gmail.com>
Date: Fri, 11 Jul 2025 15:15:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20templates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/account_h5_info.html |  97 +++++++++++++++++++++++++++
 templates/add_h5_user.html     |  90 +++++++++++++++++++++++++
 templates/edit_h5_user.html    | 119 +++++++++++++++++++++++++++++++++
 3 files changed, 306 insertions(+)
 create mode 100644 templates/account_h5_info.html
 create mode 100644 templates/add_h5_user.html
 create mode 100644 templates/edit_h5_user.html
diff --git a/templates/account_h5_info.html b/templates/account_h5_info.html
new file mode 100644
index 0000000..ee8b627
--- /dev/null
+++ b/templates/account_h5_info.html
@@ -0,0 +1,97 @@
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>H5账户信息管理</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        .account-card {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.3s;
+        }
+        .account-card:hover {
+            transform: translateY(-5px);
+        }
+        .status-active {
+            color: #28a745;
+        }
+        .status-inactive {
+            color: #dc3545;
+        }
+        .action-btn {
+            margin-right: 5px;
+        }
+        .table-bordered {
+            border: 1px solid #dee2e6;
+        }
+        .table-bordered th,
+        .table-bordered td {
+            border: 1px solid #dee2e6;
+        }
+        .text-truncate {
+            max-width: 150px;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="display-5 text-primary">账户信息管理</h1>
+            <a href="{{ url_for('add_h5_user') }}" class="btn btn-primary">
+                <i class="bi bi-plus-circle"></i> 添加账户
+            </a>
+        </div>
+
+        <div class="card account-card">
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle table-bordered">
+                        <thead class="table-light">
+                            <tr>
+                                <th>账户ID</th>
+                                <th>账户名称</th>
+                                <th>国家列表</th>
+                                <th>链接地址</th>
+                                <th>留存任务比率</th>
+                                <th>任务总数</th>
+                                <th>状态</th>
+                                <th>操作</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for user in users %}
+                            <tr>
+                                <td>{{ user.account_id }}</td>
+                                <td>{{ user.account_name }}</td>
+                                <td class="text-truncate">{{ user.countries }}</td>
+                                <td class="text-truncate">
+                                    <a href="{{ user.link_url }}" target="_blank" >{{ user.link_url }}</a>
+                                </td>
+                                <td>{{ user.keep_rate }}</td>
+                                <td>{{ user.task_total }}</td>
+                                <td>
+                                    <span class="badge rounded-pill bg-{{ 'success' if user.is_active else 'danger' }}">
+                                        {{ '活跃'  if user.is_active else  '禁用'}}
+                                    </span>
+                                </td>
+                                <td>
+                                    <a href="{{ url_for('edit_user', account_id=user.account_id) }}"
+                                       class="btn btn-sm btn-outline-primary action-btn">
+                                        <i class="bi bi-pencil-square"></i> 编辑
+                                    </a>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/templates/add_h5_user.html b/templates/add_h5_user.html
new file mode 100644
index 0000000..8c448b3
--- /dev/null
+++ b/templates/add_h5_user.html
@@ -0,0 +1,90 @@
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>H5添加账户</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        .account-card {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.3s;
+        }
+        .account-card:hover {
+            transform: translateY(-5px);
+        }
+        .form-container {
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        .form-hint {
+            font-size: 0.8rem;
+            color: #6c757d;
+            margin-top: 0.25rem;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="display-5 text-primary">添加新账户</h1>
+            <a href="{{ url_for('get_h5_account_info') }}" class="btn btn-outline-secondary">
+                <i class="bi bi-arrow-left"></i> 返回
+            </a>
+        </div>
+
+        <div class="card account-card">
+            <div class="card-body">
+                <form method="POST" class="form-container">
+                    <div class="mb-3">
+                        <label for="account" class="form-label">账户名称：</label>
+                        <input type="text" class="form-control" id="account" name="account_name" required
+                               pattern="[A-Za-z0-9]+" title="只能包含字母和数字">
+                        <div class="form-hint">只能包含字母和数字</div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="taskTotal" class="form-label">新增任务总数：</label>
+                        <input type="number" class="form-control" id="taskTotal" name="task_total" required
+                               min="1" step="1" placeholder="请输入正整数">
+                        <div class="form-hint">需要输入数字</div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="keepRate" class="form-label">留存比率：</label>
+                        <input type="text" class="form-control" id="keepRate" name="keep_rate" required
+                               pattern="^(0\.[0-9]+)(,0\.[0-9]+)*$"
+                               placeholder="0.5,0.3,0.18,0.11,0.09,0.06,0.04">
+                        <div class="form-hint">请输入逗号分隔的小数值，如示例格式</div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="countries" class="form-label">国家列表：</label>
+                        <input type="text" class="form-control" id="countries" name="countries" required
+                               pattern="^[A-Za-z]{2}(,[A-Za-z]{2})*$"
+                               placeholder="US,UK,JP,CN">
+                        <div class="form-hint">请输入逗号分隔的国家代码，如US,UK,JP</div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="linkUrl" class="form-label">链接地址：</label>
+                        <input type="url" class="form-control" id="linkUrl" name="link_url" required
+                               placeholder="https://example.com">
+                        <div class="form-hint">请输入有效的URL地址</div>
+                    </div>
+
+                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-check-circle"></i> 提交
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/templates/edit_h5_user.html b/templates/edit_h5_user.html
new file mode 100644
index 0000000..c3bdea3
--- /dev/null
+++ b/templates/edit_h5_user.html
@@ -0,0 +1,119 @@
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>H5编辑账户</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <style>
+        .account-card {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.3s;
+        }
+        .account-card:hover {
+            transform: translateY(-5px);
+        }
+        .form-container {
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        .form-hint {
+            font-size: 0.8rem;
+            color: #6c757d;
+            margin-top: 0.25rem;
+        }
+        .readonly-field {
+            background-color: #e9ecef;
+            opacity: 1;
+        }
+        .default-value {
+            color: #6c757d;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body class="bg-light">
+    <div class="container py-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h1 class="display-5 text-primary">编辑账户信息</h1>
+            <a href="{{ url_for('get_h5_account_info') }}" class="btn btn-outline-secondary">
+                <i class="bi bi-arrow-left"></i> 返回
+            </a>
+        </div>
+
+        <div class="card account-card">
+            <div class="card-body">
+                <form method="POST" class="form-container">
+                    <input type="hidden" name="account_id" value="{{ users.account_id }}">
+
+                    <div class="mb-3">
+                        <label for="accountId" class="form-label">账户ID：</label>
+                        <input type="text" class="form-control readonly-field" id="accountId"
+                               value="{{ users.account_id }}" readonly>
+                        <div class="form-hint default-value">默认ID不可修改</div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="accountName" class="form-label">账户名称：</label>
+                        <input type="text" class="form-control" id="accountName" name="account_name"
+                               value="{{ users.account_name }}" required pattern="[A-Za-z0-9]+"
+                               title="只能包含字母和数字">
+                        <div class="form-hint">当前值: <span class="default-value">{{ users.account_name }}</span></div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="countries" class="form-label">国家列表：</label>
+                        <input type="text" class="form-control" id="countries" name="countries"
+                               value="{{ users.countries }}" required
+                               pattern="^[A-Za-z]{2}(,[A-Za-z]{2})*$"
+                               title="请输入逗号分隔的国家代码，如：US,CN,JP">
+                        <div class="form-hint">当前值: <span class="default-value">{{ users.countries }}</span></div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="link_url" class="form-label">链接地址：</label>
+                        <input type="url" class="form-control" id="link_url" name="link_url"
+                               value="{{ users.link_url }}" required
+                               placeholder="https://example.com">
+                        <div class="form-hint">当前值: <span class="default-value">{{ users.link_url }}</span></div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="taskTotal" class="form-label">新增任务总数：</label>
+                        <input type="number" class="form-control" id="taskTotal" name="task_total"
+                               value="{{ users.task_total }}" required min="0">
+                        <div class="form-hint">当前值: <span class="default-value">{{ users.task_total }}</span></div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="keepRate" class="form-label">留存比率：</label>
+                        <input type="text" class="form-control" id="keepRate" name="keep_rate"
+                               value="{{ users.keep_rate }}" pattern="^(\d+(\.\d+)?)(,\s*\d+(\.\d+)?)*$"
+                               title="请输入逗号分隔的小数，如：0.5,0.3,0.2">
+                        <div class="form-hint">当前值: <span class="default-value">{{ users.keep_rate }}</span></div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="isActive" class="form-label">状态：</label>
+                        <select class="form-select" id="isActive" name="is_active">
+                            <option value="1" {% if users.is_active == 1 %}selected{% endif %}>激活</option>
+                            <option value="0" {% if users.is_active == 0 %}selected{% endif %}>禁用</option>
+                        </select>
+                        <div class="form-hint">当前状态: <span class="default-value">{% if users.is_active == 1 %}激活{% else %}禁用{% endif %}</span></div>
+                    </div>
+
+                    <div class="d-grid gap-2">
+                        <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-check-circle"></i> 更新信息
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
