feat: improve responsive admin experience

app/routes.py

@@ -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")
+    require_admin()
-    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())
+    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)
+    require_admin()
-    if not user or user.is_admin: return jsonify({"error": "用户不存在或不支持此操作"}), 404
+    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
+        flash("邮件发送失败，请稍后重试。", "error")
-    return jsonify({"message": "密码重置通知已发送至用户邮箱"})
+    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

static/css/app.src.css

@@ -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);
+  }
+}

static/favicon.svg

@@ -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>

templates/_login_form.html

@@ -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>

templates/_pagination.html

@@ -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 }}"

templates/_register_form.html

@@ -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>

templates/account_security.html

@@ -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>

templates/admin.html

@@ -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>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-  <p class="mt-1 text-sm text-textSub">向用户已验证邮箱发送重置通知。</p>
+    <div>
-  <div class="mt-4 overflow-x-auto">
+      <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() }}">
+          <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>
+          <th class="p-2">文件</th>
+          <th class="p-2">时间</th>
+          <th class="p-2">下载</th>
         </tr>
       </thead>
       <tbody>
-        {% for user in password_reset_users %}
+        {% for record in records %}
         <tr class="border-b border-line">
-          <td class="p-2">{{ user.username }}</td>
+          <td class="p-2">{{ record.user.username }}</td>
-          <td class="p-2">{{ user.email or '未设置' }}</td>
+          <td class="p-2">{{ record.original_filename }}</td>
+          <td class="p-2">{{ format_datetime(record.upload_time) }}</td>
           <td class="p-2">
-            {% if user.email %}
+            <div class="flex min-w-[190px] gap-2">
-            <form method="post" action="{{ url_for('main.admin_password_reset', user_id=user.id) }}">
+              <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>
-              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+              <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>
-              <button class="ui-btn ui-btn-sm ui-btn-secondary">发送重置通知</button>
+            </div>
-            </form>
-            {% endif %}
           </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 %}

templates/base.html

@@ -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">
+    <nav class="md:hidden border-t border-line bg-white" aria-label="主导航">
-      <div class="mx-auto max-w-7xl px-2 flex overflow-x-auto text-sm font-semibold">
+      <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>
 

templates/forgot_password.html

@@ -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 %}

templates/history.html

@@ -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>

templates/home.html

@@ -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">
+          <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">
+            <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>
         快速入口

templates/login.html

@@ -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;

templates/password_reset.html

@@ -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>

templates/reference.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>

templates/result.html

@@ -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">
+  <div class="grid gap-3 sm:flex sm:flex-wrap">
-    <a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-secondary">
+    <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>

templates/set_password.html

@@ -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 %}

templates/verification.html

@@ -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">
+  <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-7 shadow-panel">
+    <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 %}
             >

tests/test_auth_registration.py

@@ -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):