feat: improve responsive admin experience
This commit is contained in:
+107
-9
@@ -8,7 +8,8 @@ from datetime import datetime, timedelta
|
||||
|
||||
from flask import Blueprint, abort, current_app, flash, jsonify, redirect, render_template, request, send_file, session, url_for
|
||||
from flask_login import current_user, login_required, login_user, logout_user
|
||||
from sqlalchemy.orm import joinedload
|
||||
from sqlalchemy import or_
|
||||
from sqlalchemy.orm import joinedload, selectinload
|
||||
|
||||
from .config import BASE_DIR
|
||||
from .email import (
|
||||
@@ -29,6 +30,7 @@ REFERENCE_PDF_NAME = "20260630标准文本——供水管道健康状态与剩
|
||||
TEMPLATE_EXCEL_NAME = "管道预测数据模板.xlsx"
|
||||
REGISTRATION_SETTING_KEY = "allow_registration"
|
||||
RECORDS_PER_PAGE = 10
|
||||
USERS_PER_PAGE = 20
|
||||
EMAIL_RE = re.compile(r"^[^\s@]+@[^\s@]+\.[^\s@]+$")
|
||||
EMAIL_CODE_PURPOSES = {
|
||||
"register",
|
||||
@@ -129,9 +131,9 @@ def registration_allowed() -> bool:
|
||||
return AppSetting.get_bool(REGISTRATION_SETTING_KEY, current_app.config["ALLOW_REGISTRATION"])
|
||||
|
||||
|
||||
def requested_page() -> int:
|
||||
def requested_page(parameter: str = "page") -> int:
|
||||
try:
|
||||
return max(int(request.args.get("page", 1)), 1)
|
||||
return max(int(request.args.get(parameter, 1)), 1)
|
||||
except (TypeError, ValueError):
|
||||
return 1
|
||||
|
||||
@@ -148,6 +150,44 @@ def paginated_uploads(query, endpoint: str):
|
||||
return pagination, None
|
||||
|
||||
|
||||
def paginated_users():
|
||||
search = request.args.get("q", "").strip()
|
||||
page = requested_page("user_page")
|
||||
query = User.query.filter(User.is_admin.is_(False)).options(
|
||||
selectinload(User.trusted_devices)
|
||||
)
|
||||
if search:
|
||||
pattern = f"%{search}%"
|
||||
query = query.filter(
|
||||
or_(User.username.ilike(pattern), User.email.ilike(pattern))
|
||||
)
|
||||
pagination = query.order_by(User.created_at.desc(), User.id.desc()).paginate(
|
||||
page=page,
|
||||
per_page=USERS_PER_PAGE,
|
||||
error_out=False,
|
||||
)
|
||||
if pagination.pages and page > pagination.pages:
|
||||
return pagination, search, redirect(
|
||||
url_for(
|
||||
"main.admin_dashboard",
|
||||
page=requested_page(),
|
||||
user_page=pagination.pages,
|
||||
q=search,
|
||||
)
|
||||
)
|
||||
return pagination, search, None
|
||||
|
||||
|
||||
def admin_dashboard_redirect():
|
||||
return redirect(
|
||||
url_for(
|
||||
"main.admin_dashboard",
|
||||
user_page=request.form.get("user_page", 1),
|
||||
q=request.form.get("q", ""),
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
def code_hash(email: str, purpose: str, code: str) -> str:
|
||||
return hashlib.sha256(f"{email}:{purpose}:{code}".encode()).hexdigest()
|
||||
|
||||
@@ -432,8 +472,32 @@ def history_page():
|
||||
@bp.route("/admin")
|
||||
@login_required
|
||||
def admin_dashboard():
|
||||
require_admin(); pagination, page_redirect = paginated_uploads(UploadRecord.query.options(joinedload(UploadRecord.user)), "main.admin_dashboard")
|
||||
return page_redirect or render_template("admin.html", pagination=pagination, records=pagination.items, password_reset_users=User.query.filter(User.is_admin.is_(False)).order_by(User.username).all(), registration_allowed=registration_allowed())
|
||||
require_admin()
|
||||
pagination, page_redirect = paginated_uploads(
|
||||
UploadRecord.query.options(joinedload(UploadRecord.user)),
|
||||
"main.admin_dashboard",
|
||||
)
|
||||
user_pagination, user_search, user_page_redirect = paginated_users()
|
||||
active_device_counts = {
|
||||
user.id: sum(
|
||||
device.expires_at > utc_now()
|
||||
and device.auth_version == user.auth_version
|
||||
for device in user.trusted_devices
|
||||
)
|
||||
for user in user_pagination.items
|
||||
}
|
||||
if page_redirect or user_page_redirect:
|
||||
return page_redirect or user_page_redirect
|
||||
|
||||
return render_template(
|
||||
"admin.html",
|
||||
pagination=pagination,
|
||||
records=pagination.items,
|
||||
user_pagination=user_pagination,
|
||||
user_search=user_search,
|
||||
active_device_counts=active_device_counts,
|
||||
registration_allowed=registration_allowed(),
|
||||
)
|
||||
|
||||
@bp.route("/admin/registration", methods=["POST"])
|
||||
@login_required
|
||||
@@ -443,8 +507,10 @@ def update_registration_setting():
|
||||
@bp.route("/admin/users/<int:user_id>/password-reset", methods=["POST"])
|
||||
@login_required
|
||||
def admin_password_reset(user_id: int):
|
||||
require_admin(); user = db.session.get(User, user_id)
|
||||
if not user or user.is_admin: return jsonify({"error": "用户不存在或不支持此操作"}), 404
|
||||
require_admin()
|
||||
user = db.session.get(User, user_id)
|
||||
if not user or user.is_admin:
|
||||
abort(404)
|
||||
try:
|
||||
send_transactional_email(
|
||||
to=user.email,
|
||||
@@ -455,8 +521,40 @@ def admin_password_reset(user_id: int):
|
||||
),
|
||||
)
|
||||
except (EmailConfigurationError, EmailDeliveryError):
|
||||
return jsonify({"error": "邮件发送失败"}), 503
|
||||
return jsonify({"message": "密码重置通知已发送至用户邮箱"})
|
||||
flash("邮件发送失败，请稍后重试。", "error")
|
||||
else:
|
||||
flash("密码重置通知已发送至用户邮箱。", "info")
|
||||
return admin_dashboard_redirect()
|
||||
|
||||
|
||||
@bp.route("/admin/users/<int:user_id>/trusted-devices/revoke", methods=["POST"])
|
||||
@login_required
|
||||
def admin_revoke_trusted_devices(user_id: int):
|
||||
require_admin()
|
||||
user = db.session.get(User, user_id)
|
||||
if user is None or user.is_admin:
|
||||
abort(404)
|
||||
user.revoke_authentication()
|
||||
TrustedDevice.query.filter_by(user_id=user.id).delete()
|
||||
db.session.commit()
|
||||
flash(f"已撤销 {user.username} 的所有受信设备。", "info")
|
||||
return admin_dashboard_redirect()
|
||||
|
||||
|
||||
@bp.route("/admin/users/<int:user_id>/account-status", methods=["POST"])
|
||||
@login_required
|
||||
def admin_update_account_status(user_id: int):
|
||||
require_admin()
|
||||
user = db.session.get(User, user_id)
|
||||
if user is None or user.is_admin:
|
||||
abort(404)
|
||||
user.is_active_account = request.form.get("is_active") == "true"
|
||||
user.revoke_authentication()
|
||||
TrustedDevice.query.filter_by(user_id=user.id).delete()
|
||||
db.session.commit()
|
||||
message = "已启用账号" if user.is_active_account else "已停用账号并撤销所有会话"
|
||||
flash(f"{user.username}：{message}。", "info")
|
||||
return admin_dashboard_redirect()
|
||||
|
||||
@bp.route("/download/<int:record_id>/<file_type>")
|
||||
@login_required
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -184,6 +184,107 @@
|
||||
border-color: rgba(0, 94, 184, .22);
|
||||
border-top-color: #005EB8;
|
||||
}
|
||||
|
||||
/* Authentication-specific controls, compiled with the shared Tailwind bundle. */
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: .75rem;
|
||||
display: inline-flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
border-radius: .5rem;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
padding: 0;
|
||||
transition: background-color .15s ease, color .15s ease;
|
||||
}
|
||||
|
||||
.password-toggle:hover {
|
||||
background: rgba(148, 163, 184, .16);
|
||||
color: #005EB8;
|
||||
}
|
||||
|
||||
.password-toggle:focus-visible {
|
||||
outline: 2px solid #005EB8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.password-toggle:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
.password-toggle .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.auth-input-error {
|
||||
border-color: #dc2626 !important;
|
||||
background: #fff7f7 !important;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
|
||||
}
|
||||
|
||||
.captcha-token {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, .30) 1.2px, transparent 0);
|
||||
background-size: 42px 42px;
|
||||
}
|
||||
|
||||
.panel-frame {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gradient-board {
|
||||
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
||||
}
|
||||
|
||||
.auth-alert {
|
||||
pointer-events: none;
|
||||
top: max(1rem, env(safe-area-inset-top));
|
||||
right: auto;
|
||||
left: 50%;
|
||||
width: calc(100vw - 2rem);
|
||||
max-width: 26rem;
|
||||
max-height: calc(100dvh - 2rem);
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, .5rem);
|
||||
}
|
||||
|
||||
.auth-alert::before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 24px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: rotate(45deg);
|
||||
border-top: 1px solid currentColor;
|
||||
border-left: 1px solid currentColor;
|
||||
background: #fff;
|
||||
color: #bfdbfe;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.auth-alert.is-error::before {
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.auth-alert.is-visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@@ -191,3 +292,23 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.auth-alert {
|
||||
width: 320px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
transform: translateX(.75rem);
|
||||
}
|
||||
|
||||
.auth-alert::before {
|
||||
top: var(--auth-alert-arrow-top, 44px);
|
||||
left: -7px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid currentColor;
|
||||
border-left: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.auth-alert.is-visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="14" fill="#005EB8"/>
|
||||
<path d="M32 10C25.5 19.1 18 27.3 18 37a14 14 0 1 0 28 0c0-9.7-7.5-17.9-14-27Z" fill="#fff"/>
|
||||
<path d="M24.5 39.5c0 4.1 3.4 7.5 7.5 7.5" fill="none" stroke="#005EB8" stroke-linecap="round" stroke-width="3.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
@@ -1 +0,0 @@
|
||||
<form method="post" class="space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><label class="block text-sm font-semibold">邮箱<input name="email" type="email" required class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="email"></label><label class="block text-sm font-semibold">密码<a class="float-right text-primary" href="{{ url_for('main.forgot_password') }}">找回密码</a><input name="password" type="password" required class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="current-password"></label><label class="block text-sm font-semibold">图形验证码<div class="mt-1 flex gap-2"><input name="captcha" required class="min-w-0 flex-1 rounded-lg border border-line px-3 py-2"><span class="rounded-lg bg-blueSoft px-3 py-2 font-bold tracking-widest">{{ captcha }}</span><a class="rounded-lg border border-line px-2 py-2" href="{{ url_for('main.login') }}">↻</a></div></label><label class="flex gap-2 text-sm text-textSub"><input type="checkbox" name="remember">保持登录状态</label><button class="ui-btn ui-btn-lg ui-btn-primary w-full">登录</button></form>
|
||||
@@ -6,7 +6,7 @@
|
||||
第 <span class="font-bold text-textMain">{{ pagination.page }}</span> / {{ pagination.pages }} 页
|
||||
</div>
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex flex-nowrap items-center gap-2 overflow-x-auto pb-1">
|
||||
{% set prev_page = pagination.prev_num if pagination.has_prev else pagination.page %}
|
||||
<a
|
||||
class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not pagination.has_prev }}"
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<form method="post" class="space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><label class="block text-sm font-semibold">显示名<input name="username" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2"></label><label class="block text-sm font-semibold">邮箱<input name="email" type="email" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="email"></label><label class="block text-sm font-semibold">密码（12 至 128 位）<input name="password" type="password" minlength="12" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="new-password"></label><label class="block text-sm font-semibold">图形验证码<div class="mt-1 flex gap-2"><input name="captcha" required {{ 'disabled' if not allow_registration }} class="min-w-0 flex-1 rounded-lg border border-line px-3 py-2"><span class="rounded-lg bg-blueSoft px-3 py-2 font-bold tracking-widest">{{ captcha }}</span><a class="rounded-lg border border-line px-2 py-2" href="{{ url_for('main.register') }}">↻</a></div></label>{% if not allow_registration %}<p class="text-sm text-dangerText">当前未开放自助注册，请联系管理员。</p>{% endif %}<button {{ 'disabled' if not allow_registration }} class="ui-btn ui-btn-lg ui-btn-primary w-full">发送邮箱验证码</button></form>
|
||||
@@ -5,19 +5,19 @@
|
||||
|
||||
{% block content %}
|
||||
<section class="mx-auto max-w-3xl rounded-xl border border-line bg-white shadow-panel">
|
||||
<header class="border-b border-line px-6 py-6 sm:px-8">
|
||||
<header class="border-b border-line px-5 py-6 sm:px-8">
|
||||
<h1 class="text-2xl font-extrabold">账户安全</h1>
|
||||
<p class="mt-2 text-sm text-textSub">登录邮箱：{{ current_user.email }}</p>
|
||||
</header>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% for category, message in messages %}
|
||||
<p class="mx-6 mt-5 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primary' }} sm:mx-8">{{ message }}</p>
|
||||
<p class="mx-5 mt-5 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primary' }} sm:mx-8">{{ message }}</p>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="divide-y divide-line">
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">password</span>
|
||||
<div>
|
||||
@@ -30,18 +30,18 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码">
|
||||
<input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入新密码">
|
||||
<button class="ui-btn ui-btn-primary sm:col-span-2 sm:w-fit">确认更新密码</button>
|
||||
<button class="ui-btn ui-btn-primary w-full sm:col-span-2 sm:w-fit">确认更新密码</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2 sm:max-w-sm" placeholder="输入当前密码">
|
||||
<button class="ui-btn ui-btn-primary">发送密码验证码</button>
|
||||
<button class="ui-btn ui-btn-primary w-full sm:w-fit">发送密码验证码</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">alternate_email</span>
|
||||
<div>
|
||||
@@ -54,11 +54,11 @@
|
||||
<input type="hidden" name="action" value="change_email">
|
||||
<input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="输入当前密码">
|
||||
<input name="new_email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新登录邮箱">
|
||||
<button class="ui-btn ui-btn-secondary sm:col-span-2 sm:w-fit">验证并更换邮箱</button>
|
||||
<button class="ui-btn ui-btn-secondary w-full sm:col-span-2 sm:w-fit">验证并更换邮箱</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">devices</span>
|
||||
<div>
|
||||
@@ -70,7 +70,7 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="action" value="revoke_devices">
|
||||
<input name="current_password" type="password" required class="mb-3 w-full rounded-lg border border-line px-3 py-2 sm:max-w-sm" placeholder="输入当前密码以确认">
|
||||
<button class="ui-btn ui-btn-secondary">撤销所有受信设备</button>
|
||||
<button class="ui-btn ui-btn-secondary w-full sm:w-fit">撤销所有受信设备</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
+189
-27
@@ -7,7 +7,7 @@
|
||||
{% block content %}
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold">管理台</h1>
|
||||
<p class="mt-2 text-sm text-textSub">管理注册状态、密码重置和所有预测记录。</p>
|
||||
<p class="mt-2 text-sm text-textSub">管理用户账号、注册状态和预测记录。</p>
|
||||
</div>
|
||||
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
@@ -23,43 +23,205 @@
|
||||
</section>
|
||||
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">用户密码重置</h2>
|
||||
<p class="mt-1 text-sm text-textSub">向用户已验证邮箱发送重置通知。</p>
|
||||
<div class="mt-4 overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-line text-left">
|
||||
<th class="p-2">显示名</th><th class="p-2">邮箱</th><th class="p-2">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in password_reset_users %}
|
||||
<tr class="border-b border-line">
|
||||
<td class="p-2">{{ user.username }}</td>
|
||||
<td class="p-2">{{ user.email or '未设置' }}</td>
|
||||
<td class="p-2">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h2 class="font-extrabold">用户管理</h2>
|
||||
<p class="mt-1 text-sm text-textSub">查看用户状态，发送重置通知或撤销受信设备。</p>
|
||||
</div>
|
||||
<form method="get" class="flex w-full gap-2 sm:w-auto">
|
||||
<input
|
||||
name="q"
|
||||
value="{{ user_search }}"
|
||||
class="min-w-0 flex-1 rounded-lg border border-line px-3 py-2 text-sm sm:w-64"
|
||||
placeholder="搜索显示名或邮箱"
|
||||
>
|
||||
<button class="ui-btn ui-btn-sm ui-btn-secondary">搜索</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-3 lg:hidden">
|
||||
{% for user in user_pagination.items %}
|
||||
<article class="rounded-lg border border-line bg-slate-50 p-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<h3 class="truncate font-bold">{{ user.username }}</h3>
|
||||
<p class="mt-1 break-all text-xs text-textSub">{{ user.email or '未设置邮箱' }}</p>
|
||||
</div>
|
||||
<span class="shrink-0 rounded-full px-2 py-1 text-xs font-bold {{ 'bg-successSoft text-successText' if user.is_active_account else 'bg-dangerSoft text-dangerText' }}">
|
||||
{{ '已启用' if user.is_active_account else '已停用' }}
|
||||
</span>
|
||||
</div>
|
||||
<dl class="mt-4 grid grid-cols-2 gap-3 text-sm">
|
||||
<div><dt class="text-xs text-textSub">邮箱状态</dt><dd class="mt-1 font-semibold">{{ '已验证' if user.email_verified_at else '未验证' }}</dd></div>
|
||||
<div><dt class="text-xs text-textSub">受信设备</dt><dd class="mt-1 font-semibold">{{ active_device_counts.get(user.id, 0) }} 台</dd></div>
|
||||
<div class="col-span-2"><dt class="text-xs text-textSub">注册时间</dt><dd class="mt-1 text-textMain">{{ format_datetime(user.created_at) }}</dd></div>
|
||||
</dl>
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-3">
|
||||
{% if user.email %}
|
||||
<form method="post" action="{{ url_for('main.admin_password_reset', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="ui-btn ui-btn-sm ui-btn-secondary">发送重置通知</button>
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<button class="ui-btn ui-btn-compact ui-btn-secondary w-full">重置通知</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ url_for('main.admin_revoke_trusted_devices', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<button class="ui-btn ui-btn-compact ui-btn-secondary w-full">撤销设备</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('main.admin_update_account_status', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<input type="hidden" name="is_active" value="{{ 'false' if user.is_active_account else 'true' }}">
|
||||
<button class="ui-btn ui-btn-compact w-full {{ 'ui-btn-secondary' if user.is_active_account else 'ui-btn-primary' }}">{{ '停用账号' if user.is_active_account else '启用账号' }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<p class="rounded-lg border border-dashed border-line px-3 py-8 text-center text-sm text-textSub">未找到匹配用户。</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 hidden overflow-x-auto lg:block">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 text-left text-xs font-bold uppercase tracking-[.08em] text-textSub">
|
||||
<tr>
|
||||
<th class="px-3 py-3">用户</th>
|
||||
<th class="px-3 py-3">邮箱状态</th>
|
||||
<th class="px-3 py-3">账号状态</th>
|
||||
<th class="px-3 py-3">受信设备</th>
|
||||
<th class="px-3 py-3">注册时间</th>
|
||||
<th class="px-3 py-3">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-line">
|
||||
{% for user in user_pagination.items %}
|
||||
<tr>
|
||||
<td class="px-3 py-3">
|
||||
<div class="font-bold">{{ user.username }}</div>
|
||||
<div class="mt-1 text-xs text-textSub">{{ user.email or '未设置邮箱' }}</div>
|
||||
</td>
|
||||
<td class="px-3 py-3">
|
||||
<span class="rounded-full px-2 py-1 text-xs font-bold {{ 'bg-successSoft text-successText' if user.email_verified_at else 'bg-warnSoft text-warnText' }}">
|
||||
{{ '已验证' if user.email_verified_at else '未验证' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-3">
|
||||
<span class="rounded-full px-2 py-1 text-xs font-bold {{ 'bg-successSoft text-successText' if user.is_active_account else 'bg-dangerSoft text-dangerText' }}">
|
||||
{{ '已启用' if user.is_active_account else '已停用' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-3 font-semibold">{{ active_device_counts.get(user.id, 0) }}</td>
|
||||
<td class="whitespace-nowrap px-3 py-3 text-textSub">{{ format_datetime(user.created_at) }}</td>
|
||||
<td class="px-3 py-3">
|
||||
<div class="flex min-w-[260px] flex-wrap gap-2">
|
||||
{% if user.email %}
|
||||
<form method="post" action="{{ url_for('main.admin_password_reset', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<button class="ui-btn ui-btn-compact ui-btn-secondary">重置通知</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ url_for('main.admin_revoke_trusted_devices', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<button class="ui-btn ui-btn-compact ui-btn-secondary">撤销设备</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('main.admin_update_account_status', user_id=user.id) }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="user_page" value="{{ user_pagination.page }}">
|
||||
<input type="hidden" name="q" value="{{ user_search }}">
|
||||
<input type="hidden" name="is_active" value="{{ 'false' if user.is_active_account else 'true' }}">
|
||||
<button class="ui-btn ui-btn-compact {{ 'ui-btn-secondary' if user.is_active_account else 'ui-btn-primary' }}">
|
||||
{{ '停用账号' if user.is_active_account else '启用账号' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="px-3 py-8 text-center text-sm text-textSub">未找到匹配用户。</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% if user_pagination.total %}
|
||||
<nav class="flex flex-col gap-3 border-t border-line px-1 pt-4 text-sm sm:flex-row sm:items-center sm:justify-between" aria-label="用户分页">
|
||||
<span class="text-textSub">共 {{ user_pagination.total }} 位用户，第 {{ user_pagination.page }} / {{ user_pagination.pages }} 页</span>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not user_pagination.has_prev }}"
|
||||
href="{{ url_for('main.admin_dashboard', user_page=user_pagination.prev_num if user_pagination.has_prev else user_pagination.page, q=user_search) }}"
|
||||
>上一页</a>
|
||||
<a
|
||||
class="ui-btn ui-btn-sm ui-btn-secondary {{ 'pointer-events-none opacity-50' if not user_pagination.has_next }}"
|
||||
href="{{ url_for('main.admin_dashboard', user_page=user_pagination.next_num if user_pagination.has_next else user_pagination.page, q=user_search) }}"
|
||||
>下一页</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">上传记录</h2>
|
||||
<div class="mt-4 space-y-3 lg:hidden">
|
||||
{% for record in records %}
|
||||
<article class="rounded-lg border border-line bg-slate-50 p-4">
|
||||
<h3 class="break-all font-bold">{{ record.original_filename }}</h3>
|
||||
<dl class="mt-3 grid gap-2 text-sm">
|
||||
<div class="flex justify-between gap-4"><dt class="text-textSub">用户</dt><dd class="font-semibold">{{ record.user.username }}</dd></div>
|
||||
<div class="flex justify-between gap-4"><dt class="text-textSub">上传时间</dt><dd class="text-right">{{ format_datetime(record.upload_time) }}</dd></div>
|
||||
</dl>
|
||||
<div class="mt-4 grid grid-cols-2 gap-2">
|
||||
<a class="ui-btn ui-btn-compact ui-btn-secondary w-full" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}" data-download-action data-download-pending="下载中...">
|
||||
<span class="material-symbols-outlined text-lg">description</span>
|
||||
原始文件
|
||||
</a>
|
||||
<a class="ui-btn ui-btn-compact ui-btn-primary w-full" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}" data-download-action data-download-pending="下载中...">
|
||||
<span class="material-symbols-outlined text-lg">download</span>
|
||||
预测结果
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<p class="rounded-lg border border-dashed border-line px-3 py-8 text-center text-sm text-textSub">暂无上传记录。</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="mt-4 hidden overflow-x-auto lg:block">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-line text-left">
|
||||
<th class="p-2">用户</th>
|
||||
<th class="p-2">文件</th>
|
||||
<th class="p-2">时间</th>
|
||||
<th class="p-2">下载</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for record in records %}
|
||||
<tr class="border-b border-line">
|
||||
<td class="p-2">{{ record.user.username }}</td>
|
||||
<td class="p-2">{{ record.original_filename }}</td>
|
||||
<td class="p-2">{{ format_datetime(record.upload_time) }}</td>
|
||||
<td class="p-2">
|
||||
<div class="flex min-w-[190px] gap-2">
|
||||
<a class="ui-btn ui-btn-compact ui-btn-secondary" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}" data-download-action data-download-pending="下载中...">原始文件</a>
|
||||
<a class="ui-btn ui-btn-compact ui-btn-primary" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}" data-download-action data-download-pending="下载中...">预测结果</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">上传记录</h2>
|
||||
<div class="mt-4 overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead><tr class="border-b border-line text-left"><th class="p-2">用户</th><th class="p-2">文件</th><th class="p-2">时间</th></tr></thead>
|
||||
<tbody>{% for record in records %}<tr class="border-b border-line"><td class="p-2">{{ record.user.username }}</td><td class="p-2">{{ record.original_filename }}</td><td class="p-2">{{ format_datetime(record.upload_time) }}</td></tr>{% endfor %}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ render_pagination(pagination, 'main.admin_dashboard') }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
+6
-4
@@ -4,6 +4,8 @@
|
||||
<title>{% block title %}供水管道健康评估系统{% endblock %}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#005EB8" />
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml" />
|
||||
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
|
||||
{% block head_extra %}{% endblock %}
|
||||
</head>
|
||||
@@ -37,8 +39,8 @@
|
||||
</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="md:hidden border-t border-line bg-white">
|
||||
<div class="mx-auto max-w-7xl px-2 flex overflow-x-auto text-sm font-semibold">
|
||||
<nav class="md:hidden border-t border-line bg-white" aria-label="主导航">
|
||||
<div class="mx-auto flex max-w-7xl gap-1 overflow-x-auto px-2 text-sm font-semibold">
|
||||
<a href="{{ url_for('main.home') }}" class="whitespace-nowrap px-3 py-3 {{ 'text-primary' if active_page == 'home' else 'text-slate-500' }}">主页</a>
|
||||
<a href="{{ url_for('main.result_page') }}" class="whitespace-nowrap px-3 py-3 {{ 'text-primary' if active_page == 'result' else 'text-slate-500' }}">结果</a>
|
||||
<a href="{{ url_for('main.history_page') }}" class="whitespace-nowrap px-3 py-3 {{ 'text-primary' if active_page == 'history' else 'text-slate-500' }}">历史</a>
|
||||
@@ -52,7 +54,7 @@
|
||||
</header>
|
||||
|
||||
{% with flashed_messages = get_flashed_messages(with_categories=true) %}
|
||||
<div id="alertBox" class="pointer-events-none fixed left-1/2 top-20 z-50 hidden w-[calc(100vw-2rem)] max-w-[430px] -translate-x-1/2 translate-y-3 rounded-lg border bg-white p-4 opacity-0 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out sm:top-24" role="status" aria-live="polite">
|
||||
<div id="alertBox" class="pointer-events-none fixed left-1/2 top-20 z-50 hidden max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-[430px] -translate-x-1/2 translate-y-3 overflow-y-auto rounded-lg border bg-white p-4 opacity-0 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out sm:top-24" role="status" aria-live="polite">
|
||||
<div class="flex items-start gap-3">
|
||||
<span id="alertIconWrap" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
|
||||
<span id="alertIcon" class="material-symbols-outlined text-xl">priority_high</span>
|
||||
@@ -74,7 +76,7 @@
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
||||
<main class="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
|
||||
<main id="main-content" class="mx-auto w-full max-w-7xl flex-1 px-4 py-5 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-6 shadow-panel"><h1 class="text-2xl font-extrabold">找回密码</h1><p class="mt-2 text-sm text-textSub">输入邮箱后，如账户存在会收到验证码。</p><form method="post" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="邮箱"><button class="ui-btn ui-btn-primary w-full">发送验证码</button></form></section>{% endblock %}
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-5 shadow-panel sm:p-6"><h1 class="text-2xl font-extrabold">找回密码</h1><p class="mt-2 text-sm text-textSub">输入邮箱后，如账户存在会收到验证码。</p><form method="post" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="邮箱"><button class="ui-btn ui-btn-primary w-full">发送验证码</button></form></section>{% endblock %}
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">预测历史</h1>
|
||||
<p class="mt-2 text-sm text-textSub">查看已上传文件和对应预测报告。</p>
|
||||
</div>
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary">
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary w-full sm:w-fit">
|
||||
<span class="material-symbols-outlined text-lg">upload_file</span>
|
||||
新建分析
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="flex h-[900px] min-w-0 flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
|
||||
<section class="flex min-w-0 flex-col rounded-lg border border-line bg-white shadow-panel lg:h-[900px] lg:overflow-hidden">
|
||||
<div class="border-b border-line px-5 py-4">
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h2 class="text-lg font-extrabold">上传记录</h2>
|
||||
@@ -25,9 +25,9 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-h-0 min-w-0 flex-1 divide-y divide-line overflow-y-auto">
|
||||
<div class="min-w-0 flex-1 md:divide-y md:divide-line lg:min-h-0 lg:overflow-y-auto">
|
||||
{% for record in records %}
|
||||
<div class="grid min-h-[76px] min-w-0 gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
|
||||
<article class="m-3 grid min-w-0 gap-3 rounded-lg border border-line bg-slate-50 p-4 md:m-0 md:min-h-[76px] md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:rounded-none md:border-0 md:bg-transparent md:px-4 md:py-3">
|
||||
<div class="min-w-0 overflow-hidden">
|
||||
<div class="truncate text-sm font-bold">{{ record.original_filename }}</div>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-textSub">
|
||||
@@ -46,9 +46,9 @@
|
||||
预测结果
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="flex h-full min-h-[520px] flex-col items-center justify-center p-10 text-center">
|
||||
<div class="flex min-h-[360px] flex-col items-center justify-center p-10 text-center lg:h-full lg:min-h-[520px]">
|
||||
<span class="material-symbols-outlined text-5xl text-primary">history</span>
|
||||
<h2 class="mt-4 text-xl font-extrabold">还没有历史记录</h2>
|
||||
<p class="mt-2 text-sm text-textSub">上传数据并完成预测后，记录会显示在这里。</p>
|
||||
|
||||
+11
-11
@@ -9,14 +9,14 @@
|
||||
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">管道健康状态与剩余寿命评估</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm leading-6 text-textSub">上传标准数据文件，系统将生成管道的剩余寿命分析图、健康等级摘要、剩余寿命判断和电子表格预测报告。</p>
|
||||
</div>
|
||||
<a href="{{ url_for('main.download_template') }}" class="ui-btn ui-btn-secondary text-primary" data-download-action data-download-pending="下载中...">
|
||||
<a href="{{ url_for('main.download_template') }}" class="ui-btn ui-btn-secondary w-full text-primary sm:w-fit" data-download-action data-download-pending="下载中...">
|
||||
<span class="material-symbols-outlined text-lg">download</span>
|
||||
下载数据模板
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="mainGrid" class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
|
||||
<section id="uploadPanel" class="order-1 flex h-[460px] flex-col rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-1">
|
||||
<section id="uploadPanel" class="order-1 flex flex-col rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:h-[460px] lg:col-start-1 lg:row-start-1">
|
||||
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-xl font-extrabold">上传分析文件</h2>
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<form id="predictForm" action="{{ url_for('main.predict') }}" method="post" enctype="multipart/form-data" novalidate class="flex flex-1 flex-col gap-5">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<label id="dropZone" class="flex min-h-0 flex-1 cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-outline bg-slate-50 px-5 py-8 text-center transition hover:border-primary hover:bg-blue-50/50">
|
||||
<label id="dropZone" class="flex min-h-[260px] flex-1 cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-outline bg-slate-50 px-5 py-8 text-center transition hover:border-primary hover:bg-blue-50/50 lg:min-h-0">
|
||||
<input id="fileInput" name="file" type="file" accept=".csv,.xls,.xlsx" class="absolute h-px w-px opacity-0">
|
||||
<span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-white text-primary shadow-panel">
|
||||
<span class="material-symbols-outlined text-3xl">cloud_upload</span>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<div class="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-xs text-textSub">预测结果会在本页生成摘要，并可进入结果页查看完整报告。</p>
|
||||
<button id="submitBtn" class="ui-btn ui-btn-primary min-w-[150px]" type="submit">
|
||||
<button id="submitBtn" class="ui-btn ui-btn-primary w-full sm:w-fit sm:min-w-[150px]" type="submit">
|
||||
<span id="submitText">分析并预测</span>
|
||||
<span id="submitIcon" class="material-symbols-outlined text-lg">analytics</span>
|
||||
</button>
|
||||
@@ -50,7 +50,7 @@
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="inlineResult" class="order-3 h-[520px] overflow-hidden rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-2">
|
||||
<section id="inlineResult" class="order-3 min-h-[420px] overflow-hidden rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:h-[520px] lg:col-start-1 lg:row-start-2">
|
||||
<div id="resultPlaceholder" class="flex h-full min-h-0 flex-col">
|
||||
<div>
|
||||
<h2 class="text-xl font-extrabold">最新预测结果</h2>
|
||||
@@ -69,12 +69,12 @@
|
||||
<h2 class="text-xl font-extrabold">最新预测结果</h2>
|
||||
<p class="mt-1 text-sm text-textSub">已生成图表与电子表格结果文件。</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a id="resultPageBtn" href="{{ url_for('main.result_page') }}" class="ui-btn ui-btn-sm ui-btn-secondary">
|
||||
<div class="grid gap-2 sm:flex sm:flex-wrap">
|
||||
<a id="resultPageBtn" href="{{ url_for('main.result_page') }}" class="ui-btn ui-btn-sm ui-btn-secondary w-full sm:w-auto">
|
||||
<span class="material-symbols-outlined text-lg">monitoring</span>
|
||||
查看结果页
|
||||
</a>
|
||||
<a id="excelBtn" href="#" class="ui-btn ui-btn-sm ui-btn-primary" data-download-action data-download-pending="下载中...">
|
||||
<a id="excelBtn" href="#" class="ui-btn ui-btn-sm ui-btn-primary w-full sm:w-auto" data-download-action data-download-pending="下载中...">
|
||||
<span class="material-symbols-outlined text-lg">download</span>
|
||||
下载结果表
|
||||
</a>
|
||||
@@ -84,7 +84,7 @@
|
||||
<div class="min-h-0 flex-1 overflow-hidden">
|
||||
<div class="flex h-full min-h-0 flex-col rounded-md border border-line bg-slate-50 p-3">
|
||||
<div class="mb-2 shrink-0 text-xs font-bold text-textSub">管道的剩余寿命分析图</div>
|
||||
<div class="min-h-0 flex-1 overflow-hidden rounded bg-white">
|
||||
<div class="min-h-[260px] flex-1 overflow-hidden rounded bg-white lg:min-h-0">
|
||||
<img id="resultImage" src="" alt="预测图" class="h-full w-full object-contain">
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="requirementsPanel" class="order-2 h-[460px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-1">
|
||||
<section id="requirementsPanel" class="order-2 rounded-lg border border-line bg-white p-5 shadow-panel lg:h-[460px] lg:col-start-2 lg:row-start-1">
|
||||
<h2 class="flex items-center gap-2 text-lg font-extrabold">
|
||||
<span class="material-symbols-outlined text-primary">rule</span>
|
||||
数据要求
|
||||
@@ -118,7 +118,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-4 h-[520px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-2">
|
||||
<section class="order-4 rounded-lg border border-line bg-white p-5 shadow-panel lg:h-[520px] lg:col-start-2 lg:row-start-2">
|
||||
<h2 class="flex items-center gap-2 text-lg font-extrabold">
|
||||
<span class="material-symbols-outlined text-primary">quick_reference</span>
|
||||
快速入口
|
||||
|
||||
+8
-97
@@ -4,103 +4,9 @@
|
||||
<title>{{ '注册' if mode == 'register' else '登录' }} | 供水管道健康评估系统</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#005EB8" />
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml" />
|
||||
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
|
||||
<style>
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: .75rem;
|
||||
top: 50%;
|
||||
display: inline-flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: .5rem;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
padding: 0;
|
||||
transition: background-color .15s ease, color .15s ease;
|
||||
}
|
||||
.password-toggle:hover {
|
||||
background: rgba(148, 163, 184, .16);
|
||||
color: #005EB8;
|
||||
}
|
||||
.password-toggle:focus-visible {
|
||||
outline: 2px solid #005EB8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.password-toggle:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .45;
|
||||
}
|
||||
.password-toggle .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.auth-input-error {
|
||||
border-color: #dc2626 !important;
|
||||
background: #fff7f7 !important;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
|
||||
}
|
||||
.captcha-token {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.30) 1.2px, transparent 0);
|
||||
background-size: 42px 42px;
|
||||
}
|
||||
.panel-frame {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.gradient-board {
|
||||
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
||||
}
|
||||
.auth-alert {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(.5rem);
|
||||
}
|
||||
.auth-alert::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: -7px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: rotate(45deg);
|
||||
border-left: 1px solid currentColor;
|
||||
border-top: 1px solid currentColor;
|
||||
background: #fff;
|
||||
color: #bfdbfe;
|
||||
}
|
||||
.auth-alert.is-error::before {
|
||||
color: #fecaca;
|
||||
}
|
||||
.auth-alert.is-visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.auth-alert {
|
||||
transform: translateX(.75rem);
|
||||
}
|
||||
.auth-alert::before {
|
||||
left: -7px;
|
||||
top: var(--auth-alert-arrow-top, 44px);
|
||||
border: 0;
|
||||
border-left: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
.auth-alert.is-visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-page min-h-screen text-textMain">
|
||||
{% set page_notice = "当前未开放自助注册。系统仅支持管理员分配账号，请联系管理员完成账号开通后再登录。" if mode == 'register' and not allow_registration else none %}
|
||||
@@ -135,7 +41,7 @@
|
||||
<section id="authPanel" class="relative bg-white flex flex-col justify-between min-h-screen">
|
||||
<div class="flex-1 flex items-center px-7 sm:px-12 md:px-14 py-12">
|
||||
<div id="authCard" class="relative w-full max-w-[360px] min-h-[620px] mx-auto">
|
||||
<div id="alertBox" class="auth-alert fixed left-7 right-7 top-6 z-50 hidden rounded-lg border bg-white p-3.5 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out sm:left-12 sm:right-12 xl:left-auto xl:right-auto xl:w-[320px]" role="status" aria-live="polite">
|
||||
<div id="alertBox" class="auth-alert fixed z-50 hidden rounded-lg border bg-white p-3.5 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out" role="status" aria-live="polite">
|
||||
<div class="flex items-start gap-3">
|
||||
<span id="alertIconWrap" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
|
||||
<span id="alertIcon" class="material-symbols-outlined text-lg">priority_high</span>
|
||||
@@ -350,6 +256,11 @@
|
||||
positionAlert(alertAnchor);
|
||||
}
|
||||
});
|
||||
window.visualViewport?.addEventListener('resize', () => {
|
||||
if (alertBox && alertBox.classList.contains('is-visible')) {
|
||||
positionAlert(alertAnchor);
|
||||
}
|
||||
});
|
||||
|
||||
function markFieldError(field) {
|
||||
if (!field) return;
|
||||
|
||||
@@ -1,623 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<title>重置密码 | 供水管道健康评估系统</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
|
||||
<style>
|
||||
.reset-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(360px, .82fr) minmax(420px, 1fr);
|
||||
background: #f3f5f8;
|
||||
color: #0f172a;
|
||||
}
|
||||
.reset-aside {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 56px 64px;
|
||||
background:
|
||||
radial-gradient(circle at 1px 1px, rgba(255,255,255,.20) 1px, transparent 0) 0 0 / 34px 34px,
|
||||
#0f766e;
|
||||
color: #fff;
|
||||
}
|
||||
.reset-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.reset-aside-main {
|
||||
max-width: 460px;
|
||||
}
|
||||
.reset-kicker {
|
||||
margin-bottom: 14px;
|
||||
color: rgba(255,255,255,.72);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.reset-aside h1 {
|
||||
margin: 0;
|
||||
font-size: 46px;
|
||||
line-height: 1.18;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.reset-aside p {
|
||||
margin: 22px 0 0;
|
||||
max-width: 420px;
|
||||
color: rgba(255,255,255,.78);
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.reset-meta {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.reset-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: rgba(255,255,255,.82);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.reset-aside-foot {
|
||||
color: rgba(255,255,255,.58);
|
||||
font-size: 12px;
|
||||
}
|
||||
.reset-panel {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 28px;
|
||||
background: #fff;
|
||||
}
|
||||
.reset-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
.reset-mobile-brand {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
color: #0f766e;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.reset-icon {
|
||||
display: inline-flex;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
background: #ccfbf1;
|
||||
color: #0f766e;
|
||||
}
|
||||
.reset-card h2 {
|
||||
margin: 18px 0 8px;
|
||||
font-size: 34px;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.reset-copy {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.reset-copy strong {
|
||||
color: #0f172a;
|
||||
font-weight: 900;
|
||||
}
|
||||
.auth-input-error {
|
||||
border-color: #dc2626 !important;
|
||||
background: #fff7f7 !important;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
|
||||
}
|
||||
.auth-alert {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(.5rem);
|
||||
}
|
||||
.auth-alert::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: -7px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: rotate(45deg);
|
||||
border-left: 1px solid currentColor;
|
||||
border-top: 1px solid currentColor;
|
||||
background: #fff;
|
||||
color: #bfdbfe;
|
||||
}
|
||||
.auth-alert.is-error::before {
|
||||
color: #fecaca;
|
||||
}
|
||||
.auth-alert.is-visible {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.reset-form {
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
.reset-field label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.reset-input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.reset-input-icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
font-size: 20px;
|
||||
}
|
||||
.reset-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
background: #eceff3;
|
||||
padding: 14px 48px 14px 44px;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
outline: none;
|
||||
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.reset-input:focus {
|
||||
border-color: #0f766e;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
|
||||
}
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
display: inline-flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
padding: 0;
|
||||
transition: background-color .15s ease, color .15s ease;
|
||||
}
|
||||
.password-toggle:hover {
|
||||
background: rgba(148, 163, 184, .16);
|
||||
color: #0f766e;
|
||||
}
|
||||
.password-toggle:focus-visible {
|
||||
outline: 2px solid #0f766e;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.password-toggle .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.reset-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.reset-expiry {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.reset-submit {
|
||||
display: inline-flex;
|
||||
min-width: 154px;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #0f766e;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 16px 30px rgba(15, 118, 110, .20);
|
||||
transition: background-color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.reset-submit:hover {
|
||||
background: #115e59;
|
||||
box-shadow: 0 12px 24px rgba(15, 118, 110, .20);
|
||||
}
|
||||
.reset-submit:focus-visible {
|
||||
outline: 2px solid #0f766e;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.reset-login {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 28px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
padding: 0 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
|
||||
}
|
||||
.reset-login:hover {
|
||||
border-color: #0f766e;
|
||||
color: #0f766e;
|
||||
background: #f8fafc;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.reset-page {
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
.reset-aside {
|
||||
display: none;
|
||||
}
|
||||
.reset-panel {
|
||||
min-height: 100vh;
|
||||
padding: 32px 22px;
|
||||
}
|
||||
.reset-mobile-brand {
|
||||
display: flex;
|
||||
}
|
||||
.reset-card h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.reset-actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.reset-submit {
|
||||
width: 100%;
|
||||
}
|
||||
.reset-expiry {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.auth-alert {
|
||||
transform: translateX(.75rem);
|
||||
}
|
||||
.auth-alert::before {
|
||||
left: -7px;
|
||||
top: var(--auth-alert-arrow-top, 44px);
|
||||
border: 0;
|
||||
border-left: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
.auth-alert.is-visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% with flashed_messages = get_flashed_messages(with_categories=true) %}
|
||||
<script>
|
||||
window.__flashMessages = {{ flashed_messages|tojson }};
|
||||
</script>
|
||||
<div class="sr-only" aria-hidden="true">
|
||||
{% for category, message in flashed_messages %}{{ message }}{% endfor %}
|
||||
</div>
|
||||
<main class="reset-page">
|
||||
<aside class="reset-aside" aria-label="系统信息">
|
||||
<div class="reset-brand">
|
||||
<span class="material-symbols-outlined">water_drop</span>
|
||||
<span>供水管道健康评估系统</span>
|
||||
</div>
|
||||
<div class="reset-aside-main">
|
||||
<div class="reset-kicker">Password reset</div>
|
||||
<h1>为账号设置新的访问密码</h1>
|
||||
<p>使用管理员生成的一次性链接完成密码更新。提交成功后，旧链接会立即失效。</p>
|
||||
<div class="reset-meta" aria-hidden="true">
|
||||
<div class="reset-meta-item">
|
||||
<span class="material-symbols-outlined">link_off</span>
|
||||
<span>一次性链接</span>
|
||||
</div>
|
||||
<div class="reset-meta-item">
|
||||
<span class="material-symbols-outlined">encrypted</span>
|
||||
<span>密码本地加密存储</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reset-aside-foot">© {{ now_year() }} 供水管道健康评估系统</div>
|
||||
</aside>
|
||||
|
||||
<section class="reset-panel">
|
||||
<div id="authCard" class="reset-card relative">
|
||||
<div id="alertBox" class="auth-alert fixed left-7 right-7 top-6 z-50 hidden rounded-lg border bg-white p-3.5 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out sm:left-12 sm:right-12 xl:left-auto xl:right-auto xl:w-[320px]" role="status" aria-live="polite">
|
||||
<div class="flex items-start gap-3">
|
||||
<span id="alertIconWrap" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
|
||||
<span id="alertIcon" class="material-symbols-outlined text-lg">priority_high</span>
|
||||
</span>
|
||||
<div class="min-w-0 flex-1 pt-0.5">
|
||||
<div id="alertTitle" class="text-sm font-extrabold text-textMain"></div>
|
||||
<div id="alertMessage" class="mt-1 text-sm leading-5 text-textSub"></div>
|
||||
</div>
|
||||
<button id="alertClose" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700" type="button" aria-label="关闭通知">
|
||||
<span class="material-symbols-outlined text-base">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reset-mobile-brand">
|
||||
<span class="material-symbols-outlined">water_drop</span>
|
||||
<span>供水管道健康评估系统</span>
|
||||
</div>
|
||||
<div class="reset-icon">
|
||||
<span class="material-symbols-outlined text-[28px]">lock_reset</span>
|
||||
</div>
|
||||
<h2>重置密码</h2>
|
||||
<p class="reset-copy">
|
||||
{% if token_available %}
|
||||
为账号 <strong>{{ reset_token.user.username }}</strong> 设置新密码。
|
||||
{% else %}
|
||||
当前链接不可用，请联系管理员重新生成一次性重置链接。
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{% if token_available %}
|
||||
<form method="post" action="{{ url_for('main.password_reset', token=token) }}" class="reset-form" novalidate data-auth-form>
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="reset-field">
|
||||
<label for="resetPassword">新密码</label>
|
||||
<div class="reset-input-wrap">
|
||||
<span class="material-symbols-outlined reset-input-icon">lock</span>
|
||||
<input id="resetPassword" name="password" type="password" minlength="6" required class="reset-input" placeholder="请输入至少 6 位密码" />
|
||||
<button class="password-toggle" type="button" data-password-toggle="resetPassword" aria-label="显示密码" aria-pressed="false">
|
||||
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reset-field">
|
||||
<label for="resetPasswordConfirm">确认密码</label>
|
||||
<div class="reset-input-wrap">
|
||||
<span class="material-symbols-outlined reset-input-icon">lock</span>
|
||||
<input id="resetPasswordConfirm" name="password_confirm" type="password" minlength="6" required class="reset-input" placeholder="请再次输入新密码" />
|
||||
<button class="password-toggle" type="button" data-password-toggle="resetPasswordConfirm" aria-label="显示密码" aria-pressed="false">
|
||||
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reset-actions">
|
||||
<div class="reset-expiry">链接有效期至<br>{{ format_datetime(reset_token.expires_at) }}</div>
|
||||
<button class="reset-submit" type="submit">
|
||||
<span class="material-symbols-outlined text-lg">check</span>
|
||||
保存新密码
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="{{ url_for('main.login') }}" class="reset-login">
|
||||
<span class="material-symbols-outlined text-lg">arrow_back</span>
|
||||
返回登录
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endwith %}
|
||||
<script>
|
||||
(() => {
|
||||
const alertBox = document.getElementById('alertBox');
|
||||
const alertIconWrap = document.getElementById('alertIconWrap');
|
||||
const alertIcon = document.getElementById('alertIcon');
|
||||
const alertTitle = document.getElementById('alertTitle');
|
||||
const alertMessage = document.getElementById('alertMessage');
|
||||
const alertClose = document.getElementById('alertClose');
|
||||
const authCard = document.getElementById('authCard');
|
||||
let alertTimer = null;
|
||||
let alertHideTimer = null;
|
||||
let alertAnchor = null;
|
||||
|
||||
function hideAlert() {
|
||||
clearTimeout(alertTimer);
|
||||
clearTimeout(alertHideTimer);
|
||||
if (!alertBox) return;
|
||||
alertBox.classList.remove('is-visible');
|
||||
alertHideTimer = setTimeout(() => {
|
||||
alertBox.classList.add('hidden');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function positionAlert(anchor) {
|
||||
if (!alertBox || !authCard) return;
|
||||
|
||||
const cardRect = authCard.getBoundingClientRect();
|
||||
const anchorRect = anchor?.getBoundingClientRect();
|
||||
const useSidePopover = window.matchMedia('(min-width: 1280px)').matches;
|
||||
|
||||
if (!useSidePopover) {
|
||||
alertBox.style.left = '';
|
||||
alertBox.style.right = '';
|
||||
alertBox.style.top = '';
|
||||
alertBox.style.setProperty('--auth-alert-arrow-top', '28px');
|
||||
return;
|
||||
}
|
||||
|
||||
const width = 320;
|
||||
const gap = 18;
|
||||
const viewportPadding = 16;
|
||||
const desiredLeft = cardRect.right + gap;
|
||||
const left = Math.min(desiredLeft, window.innerWidth - width - viewportPadding);
|
||||
const targetCenter = anchorRect ? anchorRect.top + (anchorRect.height / 2) : cardRect.top + 116;
|
||||
const top = Math.max(viewportPadding, Math.min(targetCenter - 42, window.innerHeight - 140));
|
||||
const arrowTop = Math.max(22, Math.min(targetCenter - top - 7, 92));
|
||||
|
||||
alertBox.style.left = `${left}px`;
|
||||
alertBox.style.right = 'auto';
|
||||
alertBox.style.top = `${top}px`;
|
||||
alertBox.style.setProperty('--auth-alert-arrow-top', `${arrowTop}px`);
|
||||
}
|
||||
|
||||
function showAppNotification(message, type = 'info', title, anchor) {
|
||||
if (!alertBox || !alertIconWrap || !alertIcon || !alertTitle || !alertMessage) return;
|
||||
|
||||
clearTimeout(alertTimer);
|
||||
clearTimeout(alertHideTimer);
|
||||
alertAnchor = anchor || null;
|
||||
positionAlert(anchor);
|
||||
alertBox.classList.remove('hidden', 'border-red-200', 'border-blue-200', 'is-error');
|
||||
alertIconWrap.classList.remove('bg-dangerSoft', 'text-dangerText', 'bg-blueSoft', 'text-primary');
|
||||
|
||||
if (type === 'error') {
|
||||
alertBox.classList.add('border-red-200', 'is-error');
|
||||
alertIconWrap.classList.add('bg-dangerSoft', 'text-dangerText');
|
||||
alertIcon.textContent = 'priority_high';
|
||||
alertTitle.textContent = title || '操作未完成';
|
||||
} else {
|
||||
alertBox.classList.add('border-blue-200');
|
||||
alertIconWrap.classList.add('bg-blueSoft', 'text-primary');
|
||||
alertIcon.textContent = 'info';
|
||||
alertTitle.textContent = title || '提示';
|
||||
}
|
||||
|
||||
alertMessage.textContent = message;
|
||||
requestAnimationFrame(() => {
|
||||
alertBox.classList.add('is-visible');
|
||||
});
|
||||
alertTimer = setTimeout(hideAlert, 10000);
|
||||
}
|
||||
|
||||
if (alertClose) {
|
||||
alertClose.addEventListener('click', hideAlert);
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
if (alertBox && alertBox.classList.contains('is-visible')) {
|
||||
positionAlert(alertAnchor);
|
||||
}
|
||||
});
|
||||
|
||||
function markFieldError(field) {
|
||||
if (!field) return;
|
||||
field.classList.add('auth-input-error');
|
||||
field.setAttribute('aria-invalid', 'true');
|
||||
}
|
||||
|
||||
function clearFieldError(field) {
|
||||
field.classList.remove('auth-input-error');
|
||||
field.removeAttribute('aria-invalid');
|
||||
}
|
||||
|
||||
function clearFormErrors(form) {
|
||||
form.querySelectorAll('.auth-input-error').forEach(clearFieldError);
|
||||
}
|
||||
|
||||
function fieldForServerMessage(message) {
|
||||
const activeForm = document.querySelector('[data-auth-form]');
|
||||
if (!activeForm) return null;
|
||||
if (message.includes('两次')) return activeForm.querySelector('input[name="password_confirm"]');
|
||||
if (message.includes('密码')) return activeForm.querySelector('input[name="password"]');
|
||||
return null;
|
||||
}
|
||||
|
||||
const flashedMessages = window.__flashMessages || [];
|
||||
if (flashedMessages.length) {
|
||||
const [category, message] = flashedMessages[flashedMessages.length - 1];
|
||||
const serverField = category === 'error' ? fieldForServerMessage(message) : null;
|
||||
showAppNotification(message, category === 'error' ? 'error' : 'info', undefined, serverField);
|
||||
if (category === 'error') {
|
||||
markFieldError(serverField);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-auth-form]').forEach((form) => {
|
||||
form.querySelectorAll('input').forEach((field) => {
|
||||
field.addEventListener('input', () => clearFieldError(field));
|
||||
});
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
clearFormErrors(form);
|
||||
const fields = Array.from(form.querySelectorAll('input[required]:not(:disabled)'));
|
||||
const emptyField = fields.find((field) => !field.value.trim());
|
||||
if (emptyField) {
|
||||
event.preventDefault();
|
||||
showAppNotification('密码不能为空', 'error', undefined, emptyField);
|
||||
markFieldError(emptyField);
|
||||
emptyField.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const shortPassword = fields.find((field) => {
|
||||
const minLength = Number(field.getAttribute('minlength'));
|
||||
return minLength > 0 && field.value.length < minLength;
|
||||
});
|
||||
if (shortPassword) {
|
||||
event.preventDefault();
|
||||
const minLength = shortPassword.getAttribute('minlength');
|
||||
showAppNotification(`密码至少需要 ${minLength} 位`, 'error', undefined, shortPassword);
|
||||
markFieldError(shortPassword);
|
||||
shortPassword.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const password = form.querySelector('input[name="password"]');
|
||||
const passwordConfirm = form.querySelector('input[name="password_confirm"]');
|
||||
if (password && passwordConfirm && password.value !== passwordConfirm.value) {
|
||||
event.preventDefault();
|
||||
showAppNotification('两次输入的密码不一致', 'error', undefined, passwordConfirm);
|
||||
markFieldError(passwordConfirm);
|
||||
passwordConfirm.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-password-toggle]').forEach((toggle) => {
|
||||
const input = document.getElementById(toggle.dataset.passwordToggle);
|
||||
const icon = toggle.querySelector('.material-symbols-outlined');
|
||||
if (!input || !icon) return;
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const shouldShow = input.type === 'password';
|
||||
input.type = shouldShow ? 'text' : 'password';
|
||||
icon.textContent = shouldShow ? 'visibility_off' : 'visibility';
|
||||
toggle.setAttribute('aria-label', shouldShow ? '隐藏密码' : '显示密码');
|
||||
toggle.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,21 +9,21 @@
|
||||
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">技术导则参考文档</h1>
|
||||
<p class="mt-2 text-sm text-textSub">供水管道健康状态与剩余寿命评估系统</p>
|
||||
</div>
|
||||
<a href="{{ url_for('main.reference_pdf') }}" target="_blank" rel="noopener" class="ui-btn ui-btn-primary">
|
||||
<a href="{{ url_for('main.reference_pdf') }}" target="_blank" rel="noopener" class="ui-btn ui-btn-primary w-full sm:w-fit">
|
||||
<span class="material-symbols-outlined text-lg">open_in_new</span>
|
||||
新窗口查看
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section class="overflow-hidden rounded-lg border border-line bg-white shadow-panel">
|
||||
<div class="border-b border-line px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex flex-col gap-2 border-b border-line px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex items-center gap-2 text-sm font-bold">
|
||||
<span class="material-symbols-outlined text-primary">picture_as_pdf</span>
|
||||
文档预览
|
||||
</div>
|
||||
<span class="text-xs text-textSub">浏览器不支持内嵌时可使用右上角按钮</span>
|
||||
</div>
|
||||
<div class="h-[calc(100vh-230px)] min-h-[560px] bg-slate-100">
|
||||
<div class="h-[65svh] min-h-[400px] bg-slate-100 sm:h-[calc(100vh-230px)] sm:min-h-[560px]">
|
||||
<object data="{{ url_for('main.reference_pdf') }}#toolbar=1&navpanes=0" type="application/pdf" class="h-full w-full">
|
||||
<div class="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
|
||||
<span class="material-symbols-outlined text-5xl text-primary">picture_as_pdf</span>
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">预测结果</h1>
|
||||
<p class="mt-2 text-sm text-textSub">文件：<span class="font-semibold text-textMain">{{ result.original_filename }}</span> · 生成于 {{ result.generated_at }}</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-secondary">
|
||||
<div class="grid gap-3 sm:flex sm:flex-wrap">
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-secondary w-full sm:w-auto">
|
||||
<span class="material-symbols-outlined text-lg">refresh</span>
|
||||
重新分析
|
||||
</a>
|
||||
<a href="{{ result.excel_url }}" class="ui-btn ui-btn-primary" data-download-action data-download-pending="导出中...">
|
||||
<a href="{{ result.excel_url }}" class="ui-btn ui-btn-primary w-full sm:w-auto" data-download-action data-download-pending="导出中...">
|
||||
<span class="material-symbols-outlined text-lg">download</span>
|
||||
导出结果表
|
||||
</a>
|
||||
@@ -28,7 +28,7 @@
|
||||
<h2 class="text-xl font-extrabold">管道剩余寿命动态评估</h2>
|
||||
<p class="mt-1 text-sm text-textSub">管道剩余寿命随时间变化的分析曲线。</p>
|
||||
</div>
|
||||
<div class="flex min-h-[360px] flex-1 items-center justify-center rounded-md border border-line bg-slate-50 p-3">
|
||||
<div class="flex min-h-[260px] flex-1 items-center justify-center rounded-md border border-line bg-slate-50 p-3 sm:min-h-[360px]">
|
||||
<img src="{{ result.image_url }}" alt="管道的剩余寿命分析图" class="max-h-full w-full rounded bg-white object-contain">
|
||||
</div>
|
||||
</section>
|
||||
@@ -63,7 +63,7 @@
|
||||
<span class="material-symbols-outlined text-5xl text-primary">monitoring</span>
|
||||
<h1 class="mt-4 text-2xl font-extrabold">当前还没有预测结果</h1>
|
||||
<p class="mt-2 text-sm text-textSub">请先从主页上传文件并运行预测。</p>
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary mt-6">
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-primary mt-6 w-full sm:w-fit">
|
||||
<span class="material-symbols-outlined text-lg">upload_file</span>
|
||||
去上传数据
|
||||
</a>
|
||||
|
||||
@@ -1 +1 @@
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-6 shadow-panel"><h1 class="text-2xl font-extrabold">{{ title }}</h1><p class="mt-2 text-sm text-textSub">12 至 128 位，须包含大写字母、小写字母、数字和特殊字符，且不能含空格。</p>{% with messages=get_flashed_messages(with_categories=true) %}{% for c,m in messages %}<p class="mt-3 text-sm text-dangerText">{{ m }}</p>{% endfor %}{% endwith %}<form method="post" action="{{ action }}" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码"><input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入新密码"><button class="ui-btn ui-btn-primary w-full">保存密码</button></form></section>{% endblock %}
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-5 shadow-panel sm:p-6"><h1 class="text-2xl font-extrabold">{{ title }}</h1><p class="mt-2 text-sm text-textSub">12 至 128 位，须包含大写字母、小写字母、数字和特殊字符，且不能含空格。</p>{% with messages=get_flashed_messages(with_categories=true) %}{% for c,m in messages %}<p class="mt-3 text-sm text-dangerText">{{ m }}</p>{% endfor %}{% endwith %}<form method="post" action="{{ action }}" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码"><input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入新密码"><button class="ui-btn ui-btn-primary w-full">保存密码</button></form></section>{% endblock %}
|
||||
|
||||
@@ -4,11 +4,13 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ title }} | 供水管道健康评估系统</title>
|
||||
<meta name="theme-color" content="#005EB8">
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
|
||||
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body class="min-h-screen bg-page text-textMain">
|
||||
<main class="mx-auto flex min-h-screen max-w-md items-center px-5">
|
||||
<section class="w-full rounded-2xl border border-line bg-white p-7 shadow-panel">
|
||||
<main class="mx-auto flex min-h-screen max-w-md items-center px-4 py-5 sm:px-5">
|
||||
<section class="w-full rounded-2xl border border-line bg-white p-5 shadow-panel sm:p-7">
|
||||
<span class="material-symbols-outlined text-4xl text-primary">mark_email_read</span>
|
||||
<h1 class="mt-3 text-2xl font-extrabold">{{ title }}</h1>
|
||||
<p class="mt-2 text-sm leading-6 text-textSub">验证码已发送至 {{ email }}，10 分钟内有效。</p>
|
||||
@@ -24,7 +26,7 @@
|
||||
<input id="verificationCode" type="hidden" name="code" value="">
|
||||
<fieldset>
|
||||
<legend class="text-sm font-semibold">请输入 6 位验证码</legend>
|
||||
<div class="mt-3 grid grid-cols-6 gap-2" id="codeInputs">
|
||||
<div class="mt-3 grid grid-cols-6 gap-1.5 sm:gap-2" id="codeInputs">
|
||||
{% for index in range(6) %}
|
||||
<input
|
||||
type="text"
|
||||
@@ -32,7 +34,7 @@
|
||||
autocomplete="one-time-code"
|
||||
maxlength="1"
|
||||
aria-label="验证码第 {{ index + 1 }} 位"
|
||||
class="h-12 min-w-0 rounded-lg border border-line text-center text-xl font-bold tracking-wide focus:border-primary focus:ring-primary"
|
||||
class="h-11 min-w-0 rounded-lg border border-line text-center text-lg font-bold tracking-wide focus:border-primary focus:ring-primary sm:h-12 sm:text-xl"
|
||||
data-code-digit
|
||||
{% if index == 0 %}autofocus{% endif %}
|
||||
>
|
||||
|
||||
@@ -82,6 +82,51 @@ class EmailAuthenticationTest(unittest.TestCase):
|
||||
data["csrf_token"] = self.csrf(page)
|
||||
return client.post(path, data=data)
|
||||
|
||||
def login_as(self, client, user: User) -> None:
|
||||
with client.session_transaction() as state:
|
||||
state["_user_id"] = str(user.id)
|
||||
state["_fresh"] = True
|
||||
state["auth_version"] = user.auth_version
|
||||
|
||||
def test_admin_user_list_is_paginated_and_searchable(self):
|
||||
with TemporaryDirectory() as directory:
|
||||
app = self.create_app(directory)
|
||||
with app.app_context():
|
||||
admin = User(
|
||||
username="Admin",
|
||||
email="admin@example.com",
|
||||
is_admin=True,
|
||||
is_active_account=True,
|
||||
)
|
||||
admin.set_password("Password-1234!")
|
||||
db.session.add(admin)
|
||||
for index in range(21):
|
||||
user = User(
|
||||
username=f"User{index:02d}",
|
||||
email=f"user{index:02d}@example.com",
|
||||
is_active_account=True,
|
||||
)
|
||||
user.set_password("Password-1234!")
|
||||
db.session.add(user)
|
||||
db.session.commit()
|
||||
admin_id = admin.id
|
||||
|
||||
client = app.test_client()
|
||||
with app.app_context():
|
||||
self.login_as(client, db.session.get(User, admin_id))
|
||||
|
||||
response = client.get("/admin?user_page=2")
|
||||
html = response.get_data(as_text=True)
|
||||
self.assertEqual(response.status_code, 200)
|
||||
self.assertIn("共 21 位用户，第 2 / 2 页", html)
|
||||
self.assertIn("User00", html)
|
||||
self.assertNotIn("User20", html)
|
||||
|
||||
response = client.get("/admin?q=user20@example.com")
|
||||
html = response.get_data(as_text=True)
|
||||
self.assertIn("共 1 位用户，第 1 / 1 页", html)
|
||||
self.assertIn("User20", html)
|
||||
|
||||
@patch("app.routes.send_transactional_email")
|
||||
@patch("app.routes.secrets.randbelow", return_value=123456)
|
||||
def test_registration_requires_and_consumes_email_code(self, _random, _send):
|
||||
|
||||
Reference in New Issue
Block a user