From f73babef8a18fb3ccfd82dd9f991ae06c1b8284c Mon Sep 17 00:00:00 2001
From: Emrys <219520811+Emryswu@users.noreply.github.com>
Date: Mon, 19 Oct 2026 19:03:44 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=8E=E6=93=8D=E4=BD=9C=E5=AE=A1=E8=AE=A1=E9=A1=B5=E6=8C=89?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E5=9B=BE=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 登录页：顶部深色品牌栏，左侧复用首页实验室横幅与三条卖点，右侧圆角登录卡片；
  快速体验改为四张角色卡片（图标、说明、选中态），只保留系统真实具备的功能
- 审计页：首页同款横幅，表格列出时间、操作图标、中文角色标签、详情与对象、操作人；
  支持按角色与操作类型筛选、分页，详情里的状态码显示为中文
- 后端 /api/audit-logs 新增 actorRole 筛选，集成测试覆盖与 action 组合
- 补齐支付、退款、对账等审计动作的中文名；角色图标与配色抽成 roleTag 共用
- 弹窗关闭按钮改用 Icon
- 测试：扫描后端代码确认每个审计动作都有中文名；演示账号与种子数据一致；
  筛选项不随当前行变化；翻页沿用已应用的筛选；慢响应不覆盖新页
---
 frontend/app/components/LoginView.tsx         |  86 +++---
 frontend/app/components/icons.tsx             |   4 +
 frontend/app/components/roleTag.tsx           |  26 ++
 frontend/app/components/ui.tsx                |   6 +-
 frontend/app/components/views/AuditView.tsx   | 114 +++++++-
 frontend/app/globals.css                      | 117 +++++---
 frontend/app/lib/labels.ts                    |  31 +++
 frontend/app/page.tsx                         |  41 ++-
 frontend/tests/login-audit.test.mjs           | 263 ++++++++++++++++++
 frontend/tests/session-isolation.test.mjs     |   2 +-
 .../labops/audit/OperationLogController.java  |   3 +-
 .../audit/OperationLogQueryService.java       |  10 +-
 .../BusinessOperationsIntegrationTest.java    |  18 ++
 13 files changed, 630 insertions(+), 91 deletions(-)
 create mode 100644 frontend/app/components/roleTag.tsx
 create mode 100644 frontend/tests/login-audit.test.mjs

diff --git a/frontend/app/components/LoginView.tsx b/frontend/app/components/LoginView.tsx
index 5f1eacf..9a5eaf1 100644
--- a/frontend/app/components/LoginView.tsx
+++ b/frontend/app/components/LoginView.tsx
@@ -1,9 +1,25 @@
 import type { FormEvent } from "react";
 import type { ToastState } from "../lib/types";
+import { Icon, type IconName } from "./icons";
+import { roleStyle } from "./roleTag";
 import { Brand, Toast } from "./ui";
 
 type LoginState = { username: string; password: string };
 
+/** Seeded demo accounts (DemoUserInitializer); a card fills the form so the visitor can sign in at once. */
+export const DEMO_ACCOUNTS = [
+  { role: "STUDENT", label: "学生", note: "查看设备，提交预约与报修", username: "student", password: "student123" },
+  { role: "TEACHER", label: "教师", note: "审批预约，管理实验设备", username: "teacher", password: "teacher123" },
+  { role: "TECHNICIAN", label: "维修员", note: "接单处理，跟踪工单进度", username: "technician", password: "tech123" },
+  { role: "ADMIN", label: "管理员", note: "全局管理、支付对账与审计", username: "admin", password: "admin123" },
+] as const;
+
+const STORY_POINTS: { icon: IconName; text: string }[] = [
+  { icon: "box", text: "设备状态一眼看清" },
+  { icon: "calendar", text: "预约冲突实时拦截" },
+  { icon: "wrench", text: "故障进度全程追踪" },
+];
+
 export function LoginView({ login, busy, toast, onLoginChange, onSubmit, onDemo }: {
   login: LoginState;
   busy: boolean;
@@ -13,37 +29,45 @@ export function LoginView({ login, busy, toast, onLoginChange, onSubmit, onDemo
   onDemo: (username: string, password: string) => void;
 }) {
   return <main className="login-shell">
-    <section className="login-story">
-      <Brand light />
-      <div className="story-copy">
-        <span className="eyebrow">LAB OPERATIONS GRID / 2026</span>
-        <h1>设备预约与维护，<br />一张工作台搞定。</h1>
-        <p>用清晰的排期、设备状态和维修进度，让实验室每天都按计划运转。</p>
-      </div>
-      <div className="story-metrics">
-        <div><strong>01 / 排期</strong><span>预约冲突实时拦截</span></div>
-        <div><strong>02 / 设备</strong><span>运行状态一眼识别</span></div>
-        <div><strong>03 / 维修</strong><span>故障进度全程追踪</span></div>
-      </div>
-    </section>
-    <section className="login-panel">
-      <Brand mobile />
-      <form className="login-card" onSubmit={onSubmit}>
-        <span className="eyebrow">SECURE ACCESS / 安全访问</span>
-        <h2>进入设备运行台</h2>
-        <p>使用实验室账号进入对应角色空间</p>
-        <label>账号<input value={login.username} onChange={(e) => onLoginChange({ ...login, username: e.target.value })} autoComplete="username" required /></label>
-        <label>密码<input type="password" value={login.password} onChange={(e) => onLoginChange({ ...login, password: e.target.value })} autoComplete="current-password" required /></label>
-        <button className="primary wide" disabled={busy}>{busy ? "正在验证…" : "进入 LabFlow"}<span>→</span></button>
-        <div className="demo-divider"><span>快速体验角色</span></div>
-        <div className="demo-grid">
-          <button type="button" onClick={() => onDemo("student", "student123")}><b>学生</b><small>提交预约与报修</small></button>
-          <button type="button" onClick={() => onDemo("teacher", "teacher123")}><b>教师</b><small>审批与设备管理</small></button>
-          <button type="button" onClick={() => onDemo("technician", "tech123")}><b>维修员</b><small>处理故障工单</small></button>
-          <button type="button" onClick={() => onDemo("admin", "admin123")}><b>管理员</b><small>全局管理与审计</small></button>
-        </div>
-      </form>
-    </section>
+    <header className="login-bar"><Brand light /></header>
+    <div className="login-stage">
+      <section className="login-story">
+        <i className="hero-rule" aria-hidden="true" />
+        <h1>让实验室运营更高效</h1>
+        <p>连接设备、预约、维修与支付对账，让高校实验室每天都按计划运转。</p>
+        <ul className="story-points">
+          {STORY_POINTS.map((point) => <li key={point.text}><span><Icon name={point.icon} size={18} /></span>{point.text}</li>)}
+        </ul>
+      </section>
+      <section className="login-panel">
+        <form className="login-card" onSubmit={onSubmit}>
+          <h2>登录 LabFlow</h2>
+          <label className="icon-field">
+            <Icon name="user" size={19} />
+            <input aria-label="账号" placeholder="账号" value={login.username} onChange={(e) => onLoginChange({ ...login, username: e.target.value })} autoComplete="username" required />
+          </label>
+          <label className="icon-field">
+            <Icon name="lock" size={19} />
+            <input aria-label="密码" placeholder="密码" type="password" value={login.password} onChange={(e) => onLoginChange({ ...login, password: e.target.value })} autoComplete="current-password" required />
+          </label>
+          <button className="solid-button login-submit" disabled={busy}>{busy ? "正在验证…" : "登录"}</button>
+          <div className="demo-divider"><span>快速体验</span></div>
+          <div className="demo-grid">
+            {DEMO_ACCOUNTS.map((account) => {
+              const style = roleStyle(account.role);
+              const selected = login.username === account.username;
+              return <button type="button" key={account.role} data-demo={account.role} aria-pressed={selected} className={selected ? "selected" : ""}
+                onClick={() => onDemo(account.username, account.password)}>
+                <span className={`demo-icon tone-${style.tone}`}><Icon name={style.icon} size={20} /></span>
+                <span className="demo-copy"><b>{account.label}</b><small>{account.note}</small></span>
+                <Icon name="chevron" size={16} className="demo-arrow" />
+              </button>;
+            })}
+          </div>
+          <p className="demo-hint">点选角色会填好演示账号，再点「登录」即可进入</p>
+        </form>
+      </section>
+    </div>
     <Toast toast={toast} />
   </main>;
 }
diff --git a/frontend/app/components/icons.tsx b/frontend/app/components/icons.tsx
index 1ad240e..e5aa153 100644
--- a/frontend/app/components/icons.tsx
+++ b/frontend/app/components/icons.tsx
@@ -31,6 +31,10 @@ const paths = {
   gem: <><path d="M6.5 4h11L21 9l-9 11.5L3 9z" /><path d="M3 9h18M9.5 4 8 9l4 11.5L16 9l-1.5-5" /></>,
   dna: <><path d="M7 3c0 6 10 6 10 12s-10 6-10 6" /><path d="M17 3c0 6-10 6-10 12M17 21v0" /><path d="M8.5 7h7M8.5 17h7M10 12h4" /></>,
   waves: <path d="M3 8c2.2-2 3.8-2 6 0s3.8 2 6 0 3.8-2 6 0M3 13c2.2-2 3.8-2 6 0s3.8 2 6 0 3.8-2 6 0M3 18c2.2-2 3.8-2 6 0s3.8 2 6 0 3.8-2 6 0" />,
+  lock: <><rect x="5" y="10.5" width="14" height="10" rx="2.5" /><path d="M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3M12 14.5v2.5" /></>,
+  cap: <><path d="M2.5 9.5 12 5l9.5 4.5L12 14z" /><path d="M6.5 11.5v4.2c1.4 1.4 3.3 2.3 5.5 2.3s4.1-.9 5.5-2.3v-4.2M21.5 9.5v5" /></>,
+  gear: <><circle cx="12" cy="12" r="3" /><path d="M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7" /><circle cx="12" cy="12" r="6.6" /></>,
+  close: <path d="M6 6l12 12M18 6 6 18" />,
   centrifuge: <><circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="1.8" /><path d="M12 6.5v.01M17 14.5v.01M7 14.5v.01" /></>,
 } as const;
 
diff --git a/frontend/app/components/roleTag.tsx b/frontend/app/components/roleTag.tsx
new file mode 100644
index 0000000..8a2181e
--- /dev/null
+++ b/frontend/app/components/roleTag.tsx
@@ -0,0 +1,26 @@
+import { actorRoleLabels } from "../lib/labels";
+import { type CategoryTone, Icon, type IconName } from "./icons";
+
+/**
+ * One icon and colour per role, shared by the login page's demo cards and the audit
+ * log's role tags. A role missing here falls back to grey; tests/login-audit.test.mjs
+ * fails if one is missing.
+ */
+export const ROLE_STYLES: Record<string, { icon: IconName; tone: CategoryTone }> = {
+  STUDENT: { icon: "cap", tone: "orange" },
+  TEACHER: { icon: "user", tone: "blue" },
+  TECHNICIAN: { icon: "wrench", tone: "green" },
+  ADMIN: { icon: "gear", tone: "violet" },
+  SYSTEM: { icon: "bolt", tone: "graphite" },
+};
+
+export function roleStyle(role: string) {
+  return ROLE_STYLES[role] ?? { icon: "user" as IconName, tone: "graphite" as CategoryTone };
+}
+
+export function RoleTag({ role }: { role: string }) {
+  const style = roleStyle(role);
+  return <span className={`role-tag tone-${style.tone}`} data-role-tag={role}>
+    <Icon name={style.icon} size={14} />{actorRoleLabels[role] ?? role}
+  </span>;
+}
diff --git a/frontend/app/components/ui.tsx b/frontend/app/components/ui.tsx
index 268de25..7317275 100644
--- a/frontend/app/components/ui.tsx
+++ b/frontend/app/components/ui.tsx
@@ -3,8 +3,8 @@ import { statusLabels } from "../lib/labels";
 import type { ToastState } from "../lib/types";
 import { Icon } from "./icons";
 
-export function Brand({ light = false, mobile = false }: { light?: boolean; mobile?: boolean }) {
-  return <div className={`${mobile ? "mobile-brand " : ""}brand ${light ? "light" : ""}`}>
+export function Brand({ light = false }: { light?: boolean }) {
+  return <div className={`brand ${light ? "light" : ""}`}>
     <span className="brand-mark" aria-hidden="true">
       <svg viewBox="0 0 32 32" width="32" height="32">
         <path d="M9 3h10l8 6v12l-8 8H9l-6-6V9z" fill="var(--orange)" />
@@ -25,7 +25,7 @@ export function Modal({ title, subtitle, onClose, children }: { title: string; s
     <section className="modal" role="dialog" aria-modal="true" aria-label={title}>
       <header>
         <div><h2>{title}</h2><p>{subtitle}</p></div>
-        <button className="icon-button" onClick={onClose} aria-label="关闭">×</button>
+        <button type="button" className="icon-button" onClick={onClose} aria-label="关闭"><Icon name="close" size={18} /></button>
       </header>
       {children}
     </section>
diff --git a/frontend/app/components/views/AuditView.tsx b/frontend/app/components/views/AuditView.tsx
index b4efa99..dea89c0 100644
--- a/frontend/app/components/views/AuditView.tsx
+++ b/frontend/app/components/views/AuditView.tsx
@@ -1,13 +1,113 @@
-import { actionLabels, formatDate } from "../../lib/labels";
+import {
+  type ActionDomain, actionDomain, actionDomainLabels, actionLabels, actorRoleLabels, readableDetails, targetTypeLabels,
+} from "../../lib/labels";
 import type { AuditLog, PageData } from "../../lib/types";
-import { Empty, StatusBadge } from "../ui";
+import { type CategoryTone, Icon, type IconName } from "../icons";
+import { RoleTag } from "../roleTag";
+import { Empty } from "../ui";
 
-export function AuditView({ auditLogs }: { auditLogs: PageData<AuditLog> | null }) {
+export type AuditFilter = { actorRole: string; action: string };
+export const emptyAuditFilter: AuditFilter = { actorRole: "", action: "" };
+
+const DOMAIN_STYLES: Record<ActionDomain, { icon: IconName; tone: CategoryTone }> = {
+  equipment: { icon: "box", tone: "violet" },
+  reservation: { icon: "calendar", tone: "orange" },
+  workorder: { icon: "wrench", tone: "green" },
+  payment: { icon: "receipt", tone: "blue" },
+};
+
+/**
+ * Filter options come from the label tables, never from the rows on screen, so an
+ * action stays selectable after filtering or paging (see AGENTS.md).
+ */
+const ACTION_GROUPS = (Object.keys(actionDomainLabels) as ActionDomain[]).map((domain) => ({
+  domain,
+  actions: Object.keys(actionLabels).filter((action) => actionDomain(action) === domain),
+}));
+
+function splitDateTime(value: string) {
+  const date = new Date(value);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return {
+    day: `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
+    time: `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`,
+  };
+}
+
+export function AuditView({ auditLogs, filter, onFilterChange, onSearch, onReset, onPage }: {
+  auditLogs: PageData<AuditLog> | null;
+  filter: AuditFilter;
+  onFilterChange: (filter: AuditFilter) => void;
+  onSearch: () => void;
+  onReset: () => void;
+  onPage: (page: number) => void;
+}) {
+  const page = auditLogs?.page ?? 0;
+  const totalPages = auditLogs?.totalPages ?? 0;
   return <div className="view-stack">
-    <section className="panel table-panel">
-      <header><h3>操作审计日志</h3><small>仅管理员可见 · {auditLogs?.totalElements ?? 0} 条</small></header>
-      <div className="timeline">{auditLogs?.content.map((item) => <article key={item.id}><span className="timeline-dot"></span><div><header><b>{actionLabels[item.action] ?? item.action}</b><StatusBadge value={item.actorRole} /></header><p>{item.details}</p><small>{item.actorUsername} · {item.targetType} #{item.targetId ?? "—"} · {formatDate(item.createdAt)}</small></div></article>)}{!auditLogs?.content.length && <Empty text="暂无审计记录" />}</div>
+    <section className="hero page-hero">
+      <div className="hero-copy">
+        <i className="hero-rule" aria-hidden="true" />
+        <h2>操作审计</h2>
+        <p>记录系统关键操作，便于追踪、复核与合规管理。</p>
+      </div>
+      <p className="hero-motto" aria-hidden="true">
+        可追溯、可审计，<br />让实验室运行更规范。
+        <small>BETTER LABS<br />BRIGHTER DISCOVERIES</small>
+      </p>
+    </section>
+
+    <section className="panel table-panel audit-panel">
+      <form className="audit-filters" onSubmit={(event) => { event.preventDefault(); onSearch(); }}>
+        <label>角色筛选
+          <select data-audit-filter="role" value={filter.actorRole} onChange={(e) => onFilterChange({ ...filter, actorRole: e.target.value })}>
+            <option value="">全部角色</option>
+            {Object.entries(actorRoleLabels).map(([role, label]) => <option key={role} value={role}>{label}</option>)}
+          </select>
+        </label>
+        <label>操作类型
+          <select data-audit-filter="action" value={filter.action} onChange={(e) => onFilterChange({ ...filter, action: e.target.value })}>
+            <option value="">全部操作类型</option>
+            {ACTION_GROUPS.map((group) => <optgroup key={group.domain} label={actionDomainLabels[group.domain]}>
+              {group.actions.map((action) => <option key={action} value={action}>{actionLabels[action]}</option>)}
+            </optgroup>)}
+          </select>
+        </label>
+        <div className="spacer" />
+        <button type="submit" className="solid-button" data-action="search">查询</button>
+        <button type="button" className="ghost-button" data-action="reset" onClick={onReset}>重置</button>
+      </form>
+
+      {Boolean(auditLogs?.content.length) && <div className="table-scroll"><table className="list-table audit-table">
+        <thead><tr><th>操作时间</th><th>操作</th><th>角色</th><th>操作详情</th><th>操作人</th></tr></thead>
+        <tbody>{auditLogs?.content.map((item) => {
+          const when = splitDateTime(item.createdAt);
+          const style = DOMAIN_STYLES[actionDomain(item.action)];
+          const target = targetTypeLabels[item.targetType] ?? item.targetType;
+          return <tr key={item.id} data-audit-id={item.id}>
+            <td className="audit-time"><i aria-hidden="true" /><b>{when.day}</b><small>{when.time}</small></td>
+            <td><div className="audit-action">
+              <span className={`action-icon tone-${style.tone}`}><Icon name={style.icon} size={20} /></span>
+              <b>{actionLabels[item.action] ?? item.action}</b>
+            </div></td>
+            <td><RoleTag role={item.actorRole} /></td>
+            <td><div className="fault-cell audit-detail">
+              <b>{readableDetails(item.details)}</b>
+              <small>{target}{item.targetId != null ? ` #${item.targetId}` : ""}</small>
+            </div></td>
+            <td><div className="audit-actor">
+              <span className="avatar" aria-hidden="true">{item.actorRole === "SYSTEM" ? <Icon name="bolt" size={16} /> : item.actorUsername.slice(0, 1).toUpperCase()}</span>
+              <b>{item.actorUsername}</b>
+            </div></td>
+          </tr>;
+        })}</tbody>
+      </table></div>}
+      {!auditLogs?.content.length && <Empty text="没有符合条件的审计记录" />}
+      {Boolean(auditLogs?.totalElements) && <footer className="pager">
+        <small>共 {auditLogs?.totalElements} 条 · 第 {page + 1} / {Math.max(totalPages, 1)} 页</small>
+        <button type="button" className="ghost-button" data-action="prev-page" disabled={page <= 0} onClick={() => onPage(page - 1)}>上一页</button>
+        <button type="button" className="ghost-button" data-action="next-page" disabled={page + 1 >= totalPages} onClick={() => onPage(page + 1)}>下一页</button>
+      </footer>}
     </section>
   </div>;
 }
-
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 344da7b..bbe3262 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -50,45 +50,50 @@ label { display: grid; gap: 7px; color: #4d4641; font-size: 13px; font-weight: 6
 .brand.light small { color: #c8c4be; }
 .eyebrow { color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
 
-/* Login: industrial-grid equipment console */
-.login-shell { display: grid; grid-template-columns: minmax(470px, 1.15fr) minmax(410px, .85fr); min-height: 100vh; background: #f4f2ef; }
-.login-story { position: relative; display: flex; min-height: 100vh; padding: 38px 54px 42px; flex-direction: column; overflow: hidden; color: white; background-color: #292a2d; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(135deg, #37383c, #1d1e21); background-size: 36px 36px, 36px 36px, auto; }
-.login-story::before { content: "LAB / 01"; position: absolute; right: 34px; top: 28px; color: rgba(255,255,255,.16); font-size: 58px; font-weight: 800; letter-spacing: -3px; }
-.login-story::after { content: ""; position: absolute; right: -80px; bottom: 90px; width: 330px; height: 330px; border: 42px solid rgba(255,107,44,.18); border-radius: 50%; }
-.story-copy { position: relative; z-index: 1; max-width: 650px; margin: auto 0; padding: 70px 0; }
-.story-copy .eyebrow { color: #ffae87; }
-/* 负字距按西文标题的收紧手法设定，中文方块字本无字间空隙，收得过紧会显拥挤 */
-.story-copy h1 { max-width: 650px; margin: 17px 0 22px; font-size: clamp(42px, 5vw, 72px); font-weight: 800; line-height: 1.12; letter-spacing: -1.5px; }
-.story-copy p { max-width: 530px; margin: 0; color: #d2cfca; font-size: 14px; line-height: 1.85; }
-.story-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid rgba(255,255,255,.28); }
-.story-metrics div { padding: 17px 16px 3px 0; }
-.story-metrics strong, .story-metrics span { display: block; }
-.story-metrics strong { color: white; font-size: 13px; letter-spacing: .4px; }
-.story-metrics span { margin-top: 6px; color: #c7c2bc; font-size: 11px; }
-.login-panel { position: relative; display: grid; place-items: center; padding: 55px; background: #f4f2ef; }
-.login-panel::before { content: "AUTHORIZED PERSONNEL ONLY"; position: absolute; top: 28px; right: 35px; color: #716a64; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; }
-.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid #ddd6cf; border-top: 5px solid var(--orange); background: white; box-shadow: var(--shadow); }
-.login-card h2 { margin: 10px 0 6px; font-size: 29px; font-weight: 800; letter-spacing: -.5px; }
-.login-card > p { margin: 0 0 28px; color: var(--muted); font-size: 13px; }
-.login-card label { margin-bottom: 15px; }
+/* Login: the dashboard's bright lab photo behind the copy, sign-in card on the right */
+.login-shell { display: flex; min-height: 100vh; flex-direction: column; background: #fbfbfa; }
+.login-bar { display: flex; height: 64px; padding: 0 clamp(20px, 4vw, 64px); align-items: center; flex: 0 0 auto; background: var(--nav); }
+/*
+ * The photo is a 2400×588 banner. Kept at about two thirds of the stage height so it is not
+ * upscaled into a blur, anchored at the bottom with the microscope just left of the card;
+ * the overlay fades its top and right edges into the page colour.
+ */
+.login-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 540px); flex: 1; gap: 40px; padding: clamp(28px, 5vh, 56px) clamp(20px, 4vw, 48px) clamp(28px, 5vh, 56px) clamp(24px, 5vw, 80px); align-items: center; overflow: hidden; background: #fbfbfa url("/images/hero-lab.webp") right 440px bottom / auto 66% no-repeat; }
+.login-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fbfbfa 36%, rgba(251,251,250,.55) 46%, rgba(251,251,250,0) 60%), linear-gradient(90deg, #fbfbfa 0%, rgba(251,251,250,.9) 22%, rgba(251,251,250,.2) 36%, rgba(251,251,250,0) 44%, rgba(251,251,250,0) 56%, #fbfbfa 66%); pointer-events: none; }
+.login-story { position: relative; z-index: 1; align-self: start; max-width: 640px; padding-top: clamp(24px, 9vh, 96px); }
+.hero-rule { display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--orange); }
+.login-story h1 { margin: 34px 0 18px; color: #14171b; font-size: clamp(38px, 4.4vw, 64px); font-weight: 900; line-height: 1.12; letter-spacing: 2px; }
+.login-story p { max-width: 560px; margin: 0; color: #3d424a; font-size: 17px; line-height: 1.8; }
+.story-points { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 34px 0 0; padding: 0; list-style: none; }
+.story-points li { display: inline-flex; align-items: center; gap: 10px; color: #2c3036; font-size: 14px; font-weight: 600; }
+.story-points span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--orange); background: rgba(255, 241, 232, .95); }
+.login-panel { position: relative; z-index: 1; display: grid; place-items: center; }
+.login-card { width: 100%; padding: 44px 44px 34px; border-radius: 18px; background: white; box-shadow: 0 18px 50px rgba(24, 28, 36, .12); }
+.login-card h2 { margin: 0 0 30px; color: #14171b; font-size: 34px; font-weight: 900; letter-spacing: .5px; }
+.icon-field { position: relative; display: block; margin-bottom: 18px; }
+.icon-field .icon { position: absolute; top: 50%; left: 18px; color: #5a5f67; transform: translateY(-50%); pointer-events: none; }
+.icon-field input { height: 56px; padding-left: 52px; border-radius: 10px; background: #f7f8f9; font-size: 15px; }
+.icon-field input:focus { background: white; }
+.login-submit { width: 100%; height: 56px; margin-top: 8px; border-radius: 10px; font-size: 17px; letter-spacing: 4px; }
+.login-submit:hover { background: var(--accent-dark); }
+.login-submit:disabled { opacity: .7; cursor: wait; }
 .primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 17px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; letter-spacing: .1px; }
 .primary { border: 1px solid var(--accent); color: white; background: var(--accent); box-shadow: 0 4px 12px rgba(232, 98, 26, .22); }
 .primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
 .secondary { border: 1px solid #d9dce1; color: #3d424a; background: white; }
 .secondary:hover { border-color: #9f9186; }
-.wide { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; margin-top: 6px; padding: 0 18px; }
-.wide span { font-size: 19px; }
-.demo-divider { display: flex; align-items: center; gap: 12px; margin: 27px 0 13px; color: #716a64; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
-.demo-divider::after { content: ""; flex: 1; height: 1px; background: #e0d9d2; }
-.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
-.demo-grid button { position: relative; padding: 11px 12px; border: 1px solid #ddd6cf; border-radius: 2px; color: #4b443f; background: #faf9f7; text-align: left; }
-.demo-grid button::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #bdb2a9; }
-.demo-grid button:hover { border-color: #dc9d86; background: var(--soft-accent); }
-.demo-grid button:hover::before { background: var(--accent); }
-.demo-grid b, .demo-grid small { display: block; }
-.demo-grid b { font-size: 13px; }
-.demo-grid small { margin-top: 4px; color: #6f6862; font-size: 11px; }
-.mobile-brand { display: none; }
+.demo-divider { display: flex; align-items: center; gap: 14px; margin: 34px 0 16px; color: #2c3036; font-size: 15px; font-weight: 700; }
+.demo-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
+.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.demo-grid button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px 14px; align-items: start; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; text-align: left; transition: border-color .16s, box-shadow .16s, transform .16s; }
+.demo-grid button:hover { border-color: #f3c1a2; box-shadow: var(--shadow-hover); transform: translateY(-1px); }
+.demo-grid button.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 107, 29, .14); }
+.demo-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
+.demo-copy b, .demo-copy small { display: block; }
+.demo-copy b { margin-top: 2px; font-size: 16px; font-weight: 800; }
+.demo-copy small { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.demo-arrow { margin-top: 4px; color: #9aa0a8; }
+.demo-hint { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
 
 /* App shell: dark top navigation shared by every page */
 .app-shell { min-height: 100vh; overflow-x: hidden; background: var(--paper); }
@@ -312,6 +317,31 @@ label { display: grid; gap: 7px; color: #4d4641; font-size: 13px; font-weight: 6
 .list-actions .solid-button:disabled { color: #9aa0a8; background: #eceef1; box-shadow: none; cursor: not-allowed; }
 .list-actions .assign-control select { height: 32px; }
 .state-danger { color: #b4332a; background: #fdeeed; }
+/* Audit page: hero banner like the dashboard's, filters inside the table card */
+.page-hero { min-height: 196px; }
+.page-hero h2 { margin: 20px 0 10px; font-size: 44px; letter-spacing: 4px; }
+.audit-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 18px 22px; align-items: center; border-bottom: 1px solid var(--line); }
+.audit-filters label { display: flex; align-items: center; gap: 12px; color: #3d424a; font-size: 13px; font-weight: 600; white-space: nowrap; }
+.audit-filters select { width: 200px; height: 40px; font-size: 13px; font-weight: 500; }
+.audit-filters .solid-button, .audit-filters .ghost-button { height: 40px; min-width: 76px; padding: 0 18px; font-size: 13px; }
+.audit-table td { padding: 14px 15px; }
+.audit-table td.audit-time { position: relative; padding-left: 34px; white-space: nowrap; }
+.audit-time i { position: absolute; top: 20px; left: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
+.audit-time b, .audit-time small { display: block; }
+.audit-time b { color: var(--ink); font-size: 13px; font-weight: 600; }
+.audit-time small { margin-top: 4px; color: var(--muted); font-size: 12px; }
+.audit-action { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
+.audit-action b { font-size: 14px; }
+.action-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; }
+.role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
+.audit-detail { max-width: 520px; }
+.audit-detail b { display: block; font-weight: 500; line-height: 1.5; }
+.audit-actor { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
+.audit-actor .avatar { width: 34px; height: 34px; color: #6b7079; background: #eceef1; font-size: 13px; }
+.audit-actor b { font-size: 13px; font-weight: 600; }
+.pager { display: flex; padding: 12px 20px; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
+.pager small { margin-right: auto; color: var(--muted); font-size: 12px; }
+.pager .ghost-button:disabled { color: #b4b8bf; cursor: not-allowed; }
 .table-note { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
 .equipment-detail { display: grid; gap: 16px; padding: 22px 24px; }
 .equipment-detail-head { display: flex; align-items: center; gap: 10px; }
@@ -435,11 +465,9 @@ tbody tr:hover { background: #faf8f5; }
 }
 
 @media (max-width: 900px) {
-  .login-shell { grid-template-columns: 1fr; }
+  .login-stage { grid-template-columns: minmax(0, 1fr); background-position: right -40px bottom; }
+  .login-stage::before { background: rgba(251,251,250,.82); }
   .login-story { display: none; }
-  .login-panel { min-height: 100vh; }
-  .mobile-brand { display: flex; margin-bottom: 35px; }
-  .mobile-brand .brand-mark { color: var(--accent); border-color: var(--accent); }
   .sidebar { position: relative; min-height: auto; padding: 14px 18px; flex-wrap: wrap; }
   .sidebar .brand { padding-right: 0; border: 0; }
   .sidebar nav { order: 3; width: 100%; height: 47px; overflow-x: auto; }
@@ -448,13 +476,20 @@ tbody tr:hover { background: #faf8f5; }
   .workspace { min-height: auto; }
   .dashboard-grid, .dashboard-grid.lower { grid-template-columns: minmax(0, 1fr); }
   .hero-motto { display: none; }
+  .audit-filters label { flex: 1 1 100%; }
+  .audit-filters select { width: 100%; }
+  .audit-filters .spacer { display: none; }
+  .audit-filters .solid-button, .audit-filters .ghost-button { flex: 1; }
   .hero::before { background: linear-gradient(90deg, #fefefc 45%, rgba(254,254,252,.55) 75%, rgba(254,254,252,.1) 100%); }
 }
 
 @media (max-width: 640px) {
-  .login-panel { padding: 28px 18px; }
-  .login-panel::before { display: none; }
-  .login-card { padding: 25px 20px; }
+  .login-stage { padding: 20px 14px; }
+  .login-card { padding: 28px 20px 24px; }
+  .login-card h2 { font-size: 28px; }
+  .demo-grid { gap: 10px; }
+  .demo-grid button { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
+  .demo-arrow { display: none; }
   .workspace { padding: 23px 13px calc(92px + env(safe-area-inset-bottom)); }
   .topbar { align-items: flex-start; }
   .topbar .eyebrow { display: none; }
diff --git a/frontend/app/lib/labels.ts b/frontend/app/lib/labels.ts
index 6683f86..3432574 100644
--- a/frontend/app/lib/labels.ts
+++ b/frontend/app/lib/labels.ts
@@ -23,8 +23,39 @@ export const actionLabels: Record<string, string> = {
   RESERVATION_EXPIRED: "预约过期", WORK_ORDER_CREATED: "提交工单", WORK_ORDER_ASSIGNED: "派单",
   WORK_ORDER_CLAIMED: "维修员接单", WORK_ORDER_IN_PROGRESS: "开始维修", WORK_ORDER_RESOLVED: "解决故障",
   WORK_ORDER_CLOSED: "关闭工单", WORK_ORDER_CANCELLED: "取消工单",
+  RESERVATION_PAYMENT_EXPIRED: "支付超时关单", PAYMENT_SUCCEEDED: "支付成功", REFUND_SUCCEEDED: "退款成功",
+  PAYMENT_ARRIVED_LATE: "迟到支付退款", PAYMENT_CALLBACK_UNSUCCESSFUL: "支付回调未成功",
+  PAYMENT_CALLBACK_AMOUNT_REJECTED: "回调金额不符", PAYMENT_DISPATCH_ABANDONED: "支付请求放弃",
+  RECONCILIATION_DISCREPANCY: "对账差异", RECONCILIATION_UNKNOWN_ORDER: "对账未知订单",
+  RECONCILIATION_UNKNOWN_EQUIPMENT: "对账设备缺失",
 };
 
+/** Who an audit entry belongs to: the four user roles, plus SYSTEM for timers and payment callbacks. */
+export const actorRoleLabels: Record<string, string> = { ...roleLabels, SYSTEM: "系统" };
+
+export const targetTypeLabels: Record<string, string> = {
+  EQUIPMENT: "设备", RESERVATION: "预约", WORK_ORDER: "工单", PAYMENT: "支付",
+};
+
+export type ActionDomain = "equipment" | "reservation" | "workorder" | "payment";
+
+/** Audit actions grouped by the business area they belong to; drives the filter and the row icon. */
+export function actionDomain(action: string): ActionDomain {
+  if (action.startsWith("EQUIPMENT_")) return "equipment";
+  if (action.startsWith("WORK_ORDER_")) return "workorder";
+  if (action.startsWith("RESERVATION_") && action !== "RESERVATION_PAYMENT_EXPIRED") return "reservation";
+  return "payment";
+}
+
+export const actionDomainLabels: Record<ActionDomain, string> = {
+  equipment: "设备", reservation: "预约", workorder: "工单", payment: "支付与对账",
+};
+
+/** Backend details embed status codes ("工单从 ASSIGNED 流转到 IN_PROGRESS"); show them as labels. */
+export function readableDetails(details: string) {
+  return details.replace(/\b[A-Z][A-Z_]+\b/g, (code) => statusLabels[code] ?? code);
+}
+
 export const formatDate = (value?: string | null) => value
   ? new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }).format(new Date(value))
   : "—";
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 4f914f6..e7f0323 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -5,7 +5,7 @@ import { ActionModals } from "./components/ActionModals";
 import { AppHeader, WorkspaceHeader } from "./components/AppHeader";
 import { LoginView } from "./components/LoginView";
 import { Toast } from "./components/ui";
-import { AuditView } from "./components/views/AuditView";
+import { type AuditFilter, AuditView, emptyAuditFilter } from "./components/views/AuditView";
 import { DashboardView } from "./components/views/DashboardView";
 import { EquipmentView } from "./components/views/EquipmentView";
 import { ReservationsView } from "./components/views/ReservationsView";
@@ -81,7 +81,11 @@ export default function Home() {
   const [equipmentFilter, setEquipmentFilter] = useState<EquipmentFilter>(emptyEquipmentFilter);
   const [reservationFilter, setReservationFilter] = useState("");
   const [workorderFilter, setWorkorderFilter] = useState("");
+  const [auditFilter, setAuditFilter] = useState<AuditFilter>(emptyAuditFilter);
   const appliedEquipmentFilter = useRef(equipmentFilter);
+  // Paging keeps the filter that was last applied, not edits that have not been searched yet.
+  const appliedAuditQuery = useRef({ filter: emptyAuditFilter, page: 0 });
+  const auditRequestSequence = useRef(0);
   const equipmentRequestSequence = useRef(0);
   const trendsRequestSequence = useRef(0);
   const [equipmentForm, setEquipmentForm] = useState<EquipmentForm>(emptyEquipmentForm);
@@ -109,6 +113,8 @@ export default function Home() {
     activeSessionRequests.current.clear();
     equipmentRequestSequence.current += 1;
     appliedEquipmentFilter.current = emptyEquipmentFilter;
+    auditRequestSequence.current += 1;
+    appliedAuditQuery.current = { filter: emptyAuditFilter, page: 0 };
     setStats(null);
     setTrends(null);
     setEquipment(null);
@@ -125,6 +131,7 @@ export default function Home() {
     setEquipmentFilter(emptyEquipmentFilter);
     setReservationFilter("");
     setWorkorderFilter("");
+    setAuditFilter(emptyAuditFilter);
     setEquipmentForm(emptyEquipmentForm);
     setReservationForm(emptyReservationForm);
     setWorkorderForm(emptyWorkorderForm);
@@ -218,8 +225,14 @@ export default function Home() {
         if (isCurrentSessionRequest()) setWorkorders(workorderData);
         await applyLookup(lookup, setDashboardEquipment);
       } else if (target === "audit") {
-        const auditData = await api<PageData<AuditLog>>("/api/audit-logs?size=40&sort=createdAt,desc", token, { signal: controller.signal });
-        if (isCurrentSessionRequest()) setAuditLogs(auditData);
+        const requestSequence = ++auditRequestSequence.current;
+        const { filter, page } = appliedAuditQuery.current;
+        const query = new URLSearchParams({ page: String(page), size: "20", sort: "createdAt,desc" });
+        if (filter.actorRole) query.set("actorRole", filter.actorRole);
+        if (filter.action) query.set("action", filter.action);
+        const auditData = await api<PageData<AuditLog>>(`/api/audit-logs?${query}`, token, { signal: controller.signal });
+        // A slower response for an earlier page or filter must not overwrite the latest one.
+        if (isCurrentSessionRequest() && requestSequence === auditRequestSequence.current) setAuditLogs(auditData);
       }
     } catch (error) {
       if (isCurrentSessionRequest()) {
@@ -397,6 +410,22 @@ export default function Home() {
     void load("equipment");
   }
 
+  function applyAuditFilter() {
+    appliedAuditQuery.current = { filter: auditFilter, page: 0 };
+    void load("audit");
+  }
+
+  function resetAuditFilter() {
+    setAuditFilter(emptyAuditFilter);
+    appliedAuditQuery.current = { filter: emptyAuditFilter, page: 0 };
+    void load("audit");
+  }
+
+  function goToAuditPage(page: number) {
+    appliedAuditQuery.current = { ...appliedAuditQuery.current, page };
+    void load("audit");
+  }
+
   // Row actions open the usual modals with the device already chosen.
   function reserveEquipment(item: Equipment) {
     setReservationForm({ ...emptyReservationForm, equipmentId: String(item.id) });
@@ -413,14 +442,14 @@ export default function Home() {
   return <main className="app-shell">
     <AppHeader user={user} view={activeView} onViewChange={setView} onLogout={logout} />
     <section className="workspace">
-      {/* The dashboard hero carries its own title and refresh action. */}
-      {activeView !== "dashboard" && <WorkspaceHeader user={user} view={activeView} onRefresh={() => void load(activeView)} />}
+      {/* The dashboard and audit heroes carry their own titles. */}
+      {activeView !== "dashboard" && activeView !== "audit" && <WorkspaceHeader user={user} view={activeView} onRefresh={() => void load(activeView)} />}
       {pageLoading && <div className="loading-bar"><span></span></div>}
       {activeView === "dashboard" && <DashboardView user={user} stats={stats} trends={trends} reservations={reservations} workorders={workorders} equipment={dashboardEquipment} busy={busy} canApprove={canApprove} onViewChange={setView} onOpenCreate={(kind) => void openCreate(kind)} onDecide={(id, decision) => void decideReservation(id, decision)} onRefresh={() => void load("dashboard")} />}
       {activeView === "equipment" && <EquipmentView equipment={equipment} categories={equipmentCategories} filter={equipmentFilter} canManage={canManageEquipment} canReserve={canReserve} onFilterChange={setEquipmentFilter} onLoad={applyEquipmentFilter} onReset={resetEquipmentFilter} onCreate={() => void openCreate("equipment")} onReserve={reserveEquipment} onReport={reportEquipment} onRetire={(item) => void mutate(`/api/equipment/${item.id}/retire`, { method: "PATCH" }, `设备 ${item.code} 已退役`)} onRestore={(item) => void mutate(`/api/equipment/${item.id}/restore`, { method: "PATCH" }, `设备 ${item.code} 已恢复`)} />}
       {activeView === "reservations" && <ReservationsView user={user} reservations={reservations} scheduleReservations={scheduleReservations} equipment={equipment} filter={reservationFilter} canApprove={canApprove} onFilterChange={setReservationFilter} onLoad={() => void load("reservations")} onCreate={() => void openCreate("reservation")} onDecide={(id, decision) => void decideReservation(id, decision)} onCancel={(id) => void mutate(`/api/reservations/${id}/cancel`, { method: "PATCH" }, "预约已取消")} onComplete={(id) => void mutate(`/api/reservations/${id}/complete`, { method: "PATCH" }, "预约已完成")} />}
       {activeView === "workorders" && user && <WorkOrdersView user={user} workorders={workorders} equipment={dashboardEquipment} technicians={technicians} filter={workorderFilter} canAssign={canAssignWorkOrders} canClaim={canClaimWorkOrders} canProcess={canProcessWorkOrders} onFilterChange={setWorkorderFilter} onLoad={() => void load("workorders")} onCreate={() => void openCreate("workorder")} onTransition={(item, target, assigneeId) => void transitionWorkorder(item, target, assigneeId)} onClaim={(item) => void claimWorkorder(item)} />}
-      {activeView === "audit" && <AuditView auditLogs={auditLogs} />}
+      {activeView === "audit" && <AuditView auditLogs={auditLogs} filter={auditFilter} onFilterChange={setAuditFilter} onSearch={applyAuditFilter} onReset={resetAuditFilter} onPage={goToAuditPage} />}
     </section>
     <ActionModals modal={modal} busy={busy} equipment={equipment} equipmentForm={equipmentForm} reservationForm={reservationForm} workorderForm={workorderForm} onClose={() => setModal(null)} onEquipmentChange={setEquipmentForm} onReservationChange={setReservationForm} onWorkorderChange={setWorkorderForm} onSubmitEquipment={submitEquipment} onSubmitReservation={submitReservation} onSubmitWorkorder={submitWorkorder} />
     <Toast toast={toast} />
diff --git a/frontend/tests/login-audit.test.mjs b/frontend/tests/login-audit.test.mjs
new file mode 100644
index 0000000..2310a46
--- /dev/null
+++ b/frontend/tests/login-audit.test.mjs
@@ -0,0 +1,263 @@
+import assert from "node:assert/strict";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { runInThisContext } from "node:vm";
+import { setTimeout as delay } from "node:timers/promises";
+import { JSDOM } from "jsdom";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
+import ts from "typescript";
+
+const appDirectory = fileURLToPath(new URL("../app/", import.meta.url));
+const javaRoot = fileURLToPath(new URL("../../src/main/java/com/arthur/labops/", import.meta.url));
+const require = createRequire(import.meta.url);
+
+// Run the real TSX components with React; only replace the API boundary.
+function loadComponent(path, apiModule) {
+  const cache = new Map();
+  function load(filename) {
+    if (filename === resolve(appDirectory, "lib/api.ts")) return apiModule;
+    if (cache.has(filename)) return cache.get(filename).exports;
+    const loadedModule = { exports: {} };
+    cache.set(filename, loadedModule);
+    const output = ts.transpileModule(readFileSync(filename, "utf8"), {
+      compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, jsx: ts.JsxEmit.ReactJSX, esModuleInterop: true },
+    }).outputText;
+    const localRequire = (specifier) => {
+      if (!specifier.startsWith(".")) return require(specifier);
+      const base = resolve(dirname(filename), specifier);
+      return load([`${base}.ts`, `${base}.tsx`].find(existsSync));
+    };
+    runInThisContext(`(function(require, module, exports) {${output}\n})`, { filename })(localRequire, loadedModule, loadedModule.exports);
+    return loadedModule.exports;
+  }
+  return load(resolve(appDirectory, path));
+}
+
+function javaSources(directory) {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    if (statSync(path).isDirectory()) return javaSources(path);
+    return name.endsWith(".java") ? [readFileSync(path, "utf8")] : [];
+  });
+}
+
+/** Every action the backend can write to the audit log, read from the services themselves. */
+function backendAuditActions() {
+  const sources = javaSources(javaRoot);
+  const actions = new Set();
+  for (const source of sources) {
+    for (const match of source.matchAll(/auditLogService\s*\.\s*record(?:System)?\(\s*(?:\w+\s*,\s*)?"([A-Z_]+)"\s*,/g)) actions.add(match[1]);
+  }
+  // Two calls build the action from an enum: "WORK_ORDER_" + target and "RESERVATION_" + decision.
+  const joined = sources.join("\n");
+  assert.match(joined, /"WORK_ORDER_" \+ target\.name\(\)/, "dynamic work-order action changed; update this test");
+  assert.match(joined, /"RESERVATION_" \+ request\.decision\(\)\.name\(\)/, "dynamic reservation action changed; update this test");
+  const workOrderStatuses = readFileSync(join(javaRoot, "workorder/WorkOrderStatus.java"), "utf8")
+    .match(/enum WorkOrderStatus \{([\s\S]*?)\}/)[1].match(/[A-Z_]+/g);
+  // A work order is created as SUBMITTED, never transitioned to it.
+  for (const status of workOrderStatuses.filter((status) => status !== "SUBMITTED")) actions.add(`WORK_ORDER_${status}`);
+  for (const decision of ["APPROVED", "REJECTED"]) actions.add(`RESERVATION_${decision}`);
+  return actions;
+}
+
+const page = (content, extra = {}) => ({ content, page: 0, size: 20, totalElements: content.length, totalPages: 1, ...extra });
+const log = (id, actorRole, action, extra = {}) => ({
+  id, actorUsername: actorRole === "SYSTEM" ? "system" : actorRole.toLowerCase(), actorRole, action,
+  targetType: "WORK_ORDER", targetId: 2, details: "工单从 ASSIGNED 流转到 IN_PROGRESS", createdAt: "2026-10-19T09:05:07+08:00", ...extra,
+});
+const noop = () => {};
+
+test("every audit action the backend records has a Chinese label", () => {
+  const { actionLabels } = loadComponent("lib/labels.ts");
+  const actions = backendAuditActions();
+  assert.ok(actions.size > 20, `scan found only ${actions.size} actions`);
+  const missing = [...actions].filter((action) => !actionLabels[action]);
+  assert.deepEqual(missing, [], "add these to actionLabels in lib/labels.ts");
+});
+
+test("every audit role has a tag style, and the demo cards match the seeded accounts", () => {
+  const { actorRoleLabels } = loadComponent("lib/labels.ts");
+  const { ROLE_STYLES } = loadComponent("components/roleTag.tsx");
+  assert.deepEqual(Object.keys(actorRoleLabels).filter((role) => !ROLE_STYLES[role]), []);
+
+  const { DEMO_ACCOUNTS } = loadComponent("components/LoginView.tsx");
+  const seeds = readFileSync(join(javaRoot, "user/DemoUserInitializer.java"), "utf8");
+  for (const account of DEMO_ACCOUNTS) {
+    assert.ok(seeds.includes(`createIfMissing("${account.username}", "${account.password}"`), `${account.username} is not seeded with that password`);
+    assert.ok(seeds.includes(`UserRole.${account.role});`) && ROLE_STYLES[account.role], account.role);
+  }
+});
+
+test("audit rows show Chinese roles, readable details, the target and a system avatar", () => {
+  const { AuditView, emptyAuditFilter } = loadComponent("components/views/AuditView.tsx");
+  const html = renderToStaticMarkup(React.createElement(AuditView, {
+    auditLogs: page([
+      log(1, "TECHNICIAN", "WORK_ORDER_IN_PROGRESS"),
+      log(2, "SYSTEM", "PAYMENT_SUCCEEDED", { targetType: "RESERVATION", targetId: 11, details: "支付成功" }),
+      log(3, "SYSTEM", "RECONCILIATION_UNKNOWN_ORDER", { targetType: "PAYMENT", targetId: null, details: "未知订单" }),
+    ]),
+    filter: emptyAuditFilter, onFilterChange: noop, onSearch: noop, onReset: noop, onPage: noop,
+  }));
+  const row = (id) => html.match(new RegExp(`<tr data-audit-id="${id}">[\\s\\S]*?</tr>`))[0];
+  assert.ok(row(1).includes("开始维修") && row(1).includes('data-role-tag="TECHNICIAN"') && row(1).includes("维修员"));
+  assert.ok(row(1).includes("工单从 已派单 流转到 处理中"), "status codes in details are translated");
+  assert.ok(row(1).includes("工单 #2") && row(1).includes("2026-10-19") && row(1).includes("09:05:07"));
+  assert.ok(row(2).includes("支付成功") && row(2).includes("系统") && row(2).includes("预约 #11"));
+  assert.ok(!row(2).includes(">S<"), "system rows get an icon, not a letter avatar");
+  assert.ok(row(3).includes(">支付<") && !row(3).includes("#null"));
+  assert.ok(!html.includes("TECHNICIAN<") && !html.includes("PAYMENT_SUCCEEDED<"));
+});
+
+test("audit filter options do not depend on the rows on screen", () => {
+  const { AuditView, emptyAuditFilter } = loadComponent("components/views/AuditView.tsx");
+  const { actionLabels, actorRoleLabels } = loadComponent("lib/labels.ts");
+  const html = renderToStaticMarkup(React.createElement(AuditView, {
+    auditLogs: page([log(1, "TEACHER", "RESERVATION_APPROVED")]),
+    filter: emptyAuditFilter, onFilterChange: noop, onSearch: noop, onReset: noop, onPage: noop,
+  }));
+  for (const action of Object.keys(actionLabels)) assert.ok(html.includes(`value="${action}"`), action);
+  for (const role of Object.keys(actorRoleLabels)) assert.ok(html.includes(`value="${role}"`), role);
+});
+
+async function waitFor(check) {
+  for (let attempt = 0; attempt < 200; attempt += 1) {
+    if (check()) return;
+    await act(async () => { await delay(5); });
+    if (check()) return;
+  }
+  assert.fail("Timed out waiting for React and the requested data");
+}
+
+function mountDom(t) {
+  const dom = new JSDOM("<div id='root'></div>", { url: "http://localhost/" });
+  const globals = { window: dom.window, document: dom.window.document, IS_REACT_ACT_ENVIRONMENT: true };
+  const previous = Object.fromEntries(Object.keys(globals).map((key) => [key, Object.getOwnPropertyDescriptor(globalThis, key)]));
+  for (const [key, value] of Object.entries(globals)) {
+    Object.defineProperty(globalThis, key, { configurable: true, writable: true, value });
+  }
+  const container = document.getElementById("root");
+  const root = createRoot(container);
+  t.after(async () => {
+    await act(async () => root.unmount());
+    dom.window.close();
+    for (const key of Object.keys(globals)) {
+      if (previous[key]) Object.defineProperty(globalThis, key, previous[key]);
+      else delete globalThis[key];
+    }
+  });
+  return { container, root };
+}
+
+function choose(select, value) {
+  select.value = value;
+  select.dispatchEvent(new window.Event("change", { bubbles: true }));
+}
+
+test("audit search sends the filters, paging keeps the applied filter, reset clears it", async (t) => {
+  const { container, root } = mountDom(t);
+  let listener;
+  const auditRequests = [];
+  const { default: Home } = loadComponent("page.tsx", {
+    subscribeSession: (next) => { listener = next; return () => {}; },
+    clearLegacyAuthStorage() {},
+    refreshSession: async () => listener({ accessToken: "t", user: { id: 1, username: "admin", displayName: "管理员", role: "ADMIN" } }),
+    api: async (path) => {
+      const url = new URL(path, "http://localhost/");
+      switch (url.pathname) {
+        case "/api/dashboard/stats": return {};
+        case "/api/dashboard/trends": return null;
+        case "/api/users/technicians": return [];
+        case "/api/reservations": case "/api/work-orders": case "/api/equipment": return page([]);
+        case "/api/audit-logs": {
+          auditRequests.push(url.searchParams);
+          const current = Number(url.searchParams.get("page"));
+          return page([log(100 + current, "TEACHER", "RESERVATION_APPROVED")], { page: current, totalElements: 45, totalPages: 3 });
+        }
+        default: throw new Error(`Unexpected API request: ${path}`);
+      }
+    },
+  });
+  await act(async () => root.render(React.createElement(Home)));
+  await waitFor(() => container.querySelector('[data-nav="audit"]'));
+  await act(async () => container.querySelector('[data-nav="audit"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="100"]'));
+  assert.equal(auditRequests.at(-1).get("actorRole"), null);
+
+  await act(async () => choose(container.querySelector('[data-audit-filter="role"]'), "TEACHER"));
+  await act(async () => container.querySelector('[data-action="search"]').click());
+  await waitFor(() => auditRequests.at(-1).get("actorRole") === "TEACHER");
+  assert.equal(auditRequests.at(-1).get("page"), "0");
+
+  // An edit that was never searched must not leak into paging.
+  await act(async () => choose(container.querySelector('[data-audit-filter="action"]'), "EQUIPMENT_CREATED"));
+  await act(async () => container.querySelector('[data-action="next-page"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="101"]'));
+  assert.equal(auditRequests.at(-1).get("page"), "1");
+  assert.equal(auditRequests.at(-1).get("actorRole"), "TEACHER");
+  assert.equal(auditRequests.at(-1).get("action"), null);
+  assert.ok(container.textContent.includes("第 2 / 3 页"));
+
+  await act(async () => container.querySelector('[data-action="reset"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="100"]'));
+  assert.equal(auditRequests.at(-1).get("actorRole"), null);
+  assert.equal(auditRequests.at(-1).get("page"), "0");
+  assert.equal(container.querySelector('[data-audit-filter="role"]').value, "");
+  assert.equal(container.querySelector('[data-action="prev-page"]').disabled, true);
+});
+
+test("a slower response for an earlier audit page does not overwrite the latest one", async (t) => {
+  const { container, root } = mountDom(t);
+  let listener;
+  let releaseFirstPage;
+  const { default: Home } = loadComponent("page.tsx", {
+    subscribeSession: (next) => { listener = next; return () => {}; },
+    clearLegacyAuthStorage() {},
+    refreshSession: async () => listener({ accessToken: "t", user: { id: 1, username: "admin", displayName: "管理员", role: "ADMIN" } }),
+    api: async (path) => {
+      const url = new URL(path, "http://localhost/");
+      if (url.pathname !== "/api/audit-logs") {
+        return url.pathname === "/api/users/technicians" ? [] : url.pathname === "/api/dashboard/trends" ? null : page([]);
+      }
+      const current = Number(url.searchParams.get("page"));
+      const body = page([log(100 + current, "ADMIN", "EQUIPMENT_CREATED")], { page: current, totalElements: 45, totalPages: 3 });
+      // The second request for page 0 (after "previous") is held back until page 2 has landed.
+      if (current === 0 && releaseFirstPage === null) return new Promise((done) => { releaseFirstPage = () => done(body); });
+      return body;
+    },
+  });
+  await act(async () => root.render(React.createElement(Home)));
+  await waitFor(() => container.querySelector('[data-nav="audit"]'));
+  await act(async () => container.querySelector('[data-nav="audit"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="100"]'));
+  await act(async () => container.querySelector('[data-action="next-page"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="101"]'));
+  releaseFirstPage = null;
+  await act(async () => container.querySelector('[data-action="prev-page"]').click());
+  await act(async () => container.querySelector('[data-action="next-page"]').click());
+  await waitFor(() => container.querySelector('[data-audit-id="102"]') && releaseFirstPage);
+  await act(async () => releaseFirstPage());
+  await act(async () => { await delay(20); });
+  assert.ok(container.querySelector('[data-audit-id="102"]'), "the late page-0 response was applied over page 2");
+});
+
+test("a demo card fills the login form with that seeded account", async (t) => {
+  const { container, root } = mountDom(t);
+  const { default: Home } = loadComponent("page.tsx", {
+    subscribeSession: () => () => {},
+    clearLegacyAuthStorage() {},
+    refreshSession: async () => {},
+    api: async (path) => { throw new Error(`Unexpected API request: ${path}`); },
+  });
+  await act(async () => root.render(React.createElement(Home)));
+  await waitFor(() => container.querySelector('[data-demo="TECHNICIAN"]'));
+  await act(async () => container.querySelector('[data-demo="TECHNICIAN"]').click());
+  assert.equal(container.querySelector('input[autocomplete="username"]').value, "technician");
+  assert.equal(container.querySelector('input[autocomplete="current-password"]').value, "tech123");
+  assert.equal(container.querySelector('[data-demo="TECHNICIAN"]').getAttribute("aria-pressed"), "true");
+  assert.equal(container.querySelector('[data-demo="STUDENT"]').getAttribute("aria-pressed"), "false");
+});
diff --git a/frontend/tests/session-isolation.test.mjs b/frontend/tests/session-isolation.test.mjs
index 0784816..8b64a78 100644
--- a/frontend/tests/session-isolation.test.mjs
+++ b/frontend/tests/session-isolation.test.mjs
@@ -47,7 +47,7 @@ test("late page responses are gated by the current session generation", async ()
   assert.match(loadBlock, /api<Stats>\([^\n]+signal: controller\.signal/);
   assert.match(loadBlock, /if \(!isCurrentSessionRequest\(\)\) return;[\s\S]*?setStats\(statsData\)/);
   assert.match(loadBlock, /if \(isCurrentSessionRequest\(\)\) \{?\s*setWorkorders\(workorderData\)/);
-  assert.match(loadBlock, /if \(isCurrentSessionRequest\(\)\) setAuditLogs\(auditData\)/);
+  assert.match(loadBlock, /if \(isCurrentSessionRequest\(\)(?: && [^)]+)?\) setAuditLogs\(auditData\)/);
 });
 
 test("failed mutations keep form contents", async () => {
diff --git a/src/main/java/com/arthur/labops/audit/OperationLogController.java b/src/main/java/com/arthur/labops/audit/OperationLogController.java
index f2504f9..85a824d 100644
--- a/src/main/java/com/arthur/labops/audit/OperationLogController.java
+++ b/src/main/java/com/arthur/labops/audit/OperationLogController.java
@@ -22,9 +22,10 @@ public OperationLogController(OperationLogQueryService queryService) {
     @GetMapping
     PageResponse<OperationLogResponse> findAll(
             @RequestParam(required = false) String actorUsername,
+            @RequestParam(required = false) String actorRole,
             @RequestParam(required = false) String action,
             @RequestParam(required = false) String targetType,
             @PageableDefault(size = 20, sort = "createdAt", direction = Sort.Direction.DESC) Pageable pageable) {
-        return PageResponse.from(queryService.findAll(actorUsername, action, targetType, pageable));
+        return PageResponse.from(queryService.findAll(actorUsername, actorRole, action, targetType, pageable));
     }
 }
diff --git a/src/main/java/com/arthur/labops/audit/OperationLogQueryService.java b/src/main/java/com/arthur/labops/audit/OperationLogQueryService.java
index 5dd1711..02b89bd 100644
--- a/src/main/java/com/arthur/labops/audit/OperationLogQueryService.java
+++ b/src/main/java/com/arthur/labops/audit/OperationLogQueryService.java
@@ -1,5 +1,7 @@
 package com.arthur.labops.audit;
 
+import java.util.Locale;
+
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.domain.Specification;
@@ -16,13 +18,19 @@ public OperationLogQueryService(OperationLogRepository operationLogRepository) {
     }
 
     @Transactional(readOnly = true)
-    public Page<OperationLogResponse> findAll(String actorUsername, String action,
+    public Page<OperationLogResponse> findAll(String actorUsername, String actorRole, String action,
                                               String targetType, Pageable pageable) {
         Specification<OperationLog> specification = (root, query, builder) -> builder.conjunction();
         if (actorUsername != null && !actorUsername.isBlank()) {
             specification = specification.and((root, query, builder) ->
                     builder.equal(root.get("actorUsername"), actorUsername.trim()));
         }
+        if (actorRole != null && !actorRole.isBlank()) {
+            // Roles are stored as the enum name (STUDENT … ADMIN), or SYSTEM for automatic jobs.
+            String role = actorRole.trim().toUpperCase(Locale.ROOT);
+            specification = specification.and((root, query, builder) ->
+                    builder.equal(root.get("actorRole"), role));
+        }
         if (action != null && !action.isBlank()) {
             specification = specification.and((root, query, builder) ->
                     builder.equal(root.get("action"), action.trim()));
diff --git a/src/test/java/com/arthur/labops/BusinessOperationsIntegrationTest.java b/src/test/java/com/arthur/labops/BusinessOperationsIntegrationTest.java
index 75fb431..0e0f3e9 100644
--- a/src/test/java/com/arthur/labops/BusinessOperationsIntegrationTest.java
+++ b/src/test/java/com/arthur/labops/BusinessOperationsIntegrationTest.java
@@ -1,6 +1,8 @@
 package com.arthur.labops;
 
 import static com.arthur.labops.TestAuth.bearer;
+import static org.hamcrest.Matchers.everyItem;
+import static org.hamcrest.Matchers.is;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.patch;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
@@ -75,6 +77,22 @@ void reservationOwnershipLifecycleAuditPaginationAndStatsWorkTogether() throws E
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.content[0].action").value("RESERVATION_COMPLETED"));
 
+        // Role filter combines with the action filter: the teacher completed it, a student never can.
+        mockMvc.perform(get("/api/audit-logs")
+                        .param("actorRole", "teacher")
+                        .param("action", "RESERVATION_COMPLETED")
+                        .header(HttpHeaders.AUTHORIZATION, bearer(mockMvc, objectMapper, "admin", "admin123")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.content[0].action").value("RESERVATION_COMPLETED"))
+                .andExpect(jsonPath("$.content[*].actorRole", everyItem(is("TEACHER"))));
+
+        mockMvc.perform(get("/api/audit-logs")
+                        .param("actorRole", "STUDENT")
+                        .param("action", "RESERVATION_COMPLETED")
+                        .header(HttpHeaders.AUTHORIZATION, bearer(mockMvc, objectMapper, "admin", "admin123")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.totalElements").value(0));
+
         mockMvc.perform(get("/api/audit-logs")
                         .header(HttpHeaders.AUTHORIZATION, bearer(mockMvc, objectMapper, "student", "student123")))
                 .andExpect(status().isForbidden());

From 9b87717e4a37f75712161d6bc7bfccd48aed349f Mon Sep 17 00:00:00 2001
From: Emrys <219520811+Emryswu@users.noreply.github.com>
Date: Mon, 19 Oct 2026 19:09:01 +0800
Subject: [PATCH 2/3] =?UTF-8?q?test(frontend):=20=E5=AE=A1=E8=AE=A1?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=B5=8B=E8=AF=95=E6=95=B0=E6=8D=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E6=8C=89=E6=9C=AC=E5=9C=B0=E6=97=B6=E9=97=B4=E6=9E=84?=
 =?UTF-8?q?=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI 跑在 UTC，写死 +08:00 的时间会渲染成 01:05:07，本地东八区却能通过。
AGENTS.md 补充测试里构造时间的写法和 TZ=UTC 复查命令。
---
 AGENTS.md                           | 2 +-
 frontend/tests/login-audit.test.mjs | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index f86161c..4188569 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -32,7 +32,7 @@ CI（`ci.yml`）对每个指向 main 的 PR 跑以下全部检查。
 - 安装：`npm ci`
 - lint：`npm run lint`
 - 类型检查：`npm run typecheck`（`tsc --noEmit`；lint 和测试的 TS 转译都不做类型检查，类型错误只有这一步拦得住）
-- 测试：`npm test`，先 `vinext build` 生产构建，再跑 `tests/**/*.test.mjs`。
+- 测试：`npm test`，先 `vinext build` 生产构建，再跑 `tests/**/*.test.mjs`。CI 跑在 UTC，断言渲染出的日期或时分时，测试数据用 `new Date(年, 月, 日, 时, 分)` 按本地时间构造，不要写死带时区的字符串；本地可用 `TZ=UTC npm test` 复查。
 - 本地开发：`npm run dev`，后端地址见 `frontend/.env.example`（默认 `http://127.0.0.1:18080`）。
 
 **提交信息检查**（在仓库根目录下）
diff --git a/frontend/tests/login-audit.test.mjs b/frontend/tests/login-audit.test.mjs
index 2310a46..1b2eec6 100644
--- a/frontend/tests/login-audit.test.mjs
+++ b/frontend/tests/login-audit.test.mjs
@@ -68,7 +68,8 @@ function backendAuditActions() {
 const page = (content, extra = {}) => ({ content, page: 0, size: 20, totalElements: content.length, totalPages: 1, ...extra });
 const log = (id, actorRole, action, extra = {}) => ({
   id, actorUsername: actorRole === "SYSTEM" ? "system" : actorRole.toLowerCase(), actorRole, action,
-  targetType: "WORK_ORDER", targetId: 2, details: "工单从 ASSIGNED 流转到 IN_PROGRESS", createdAt: "2026-10-19T09:05:07+08:00", ...extra,
+  // Built in local time so the rendered date and clock match on any CI time zone.
+  targetType: "WORK_ORDER", targetId: 2, details: "工单从 ASSIGNED 流转到 IN_PROGRESS", createdAt: new Date(2026, 9, 19, 9, 5, 7).toISOString(), ...extra,
 });
 const noop = () => {};
 

From 0fc3b2d3b7ce0c98a28170c71e4f8b1f3aebf61d Mon Sep 17 00:00:00 2001
From: Emrys <219520811+Emryswu@users.noreply.github.com>
Date: Mon, 19 Oct 2026 19:19:48 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(frontend):=20=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=B0=BA=E5=AF=B8=E4=B8=8D=E5=86=8D=E8=A2=AB?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=20.solid-button=20=E8=A6=86=E7=9B=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .login-submit 与 .solid-button 同为单类选择器，后者写在后面，按源码顺序把登录按钮
  压回 32px 高、12px 字号，禁用态也变成灰色；改为 .login-card .login-submit
- 新增 tests/css-cascade.mjs：按优先级、!important 与源码顺序解析样式
  （jsdom 的 getComputedStyle 不算优先级，测不出这类覆盖）
- 测试断言登录按钮与审计筛选按钮的尺寸、登录中的禁用样式；改回单类选择器时失败
- AGENTS.md 前端约定补充通用按钮类的写法
---
 AGENTS.md                           |  1 +
 frontend/app/globals.css            |  7 ++--
 frontend/tests/css-cascade.mjs      | 63 +++++++++++++++++++++++++++++
 frontend/tests/login-audit.test.mjs | 37 +++++++++++++++++
 4 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 frontend/tests/css-cascade.mjs

diff --git a/AGENTS.md b/AGENTS.md
index 4188569..4b77b69 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -64,6 +64,7 @@ CI（`ci.yml`）对每个指向 main 的 PR 跑以下全部检查。
 - 角色导航以 `app/lib/roles.ts` 的 `navItemsForRole` 为准；`tests/rendered-html.test.mjs` 里有一份对照，改导航时两处一起改。
 - 筛选项（下拉选项、标签列表）不要从当前页、已筛选的列表数据里推导：换页或加筛选后选项会消失。由后端单独接口提供，例如设备类别用 `GET /api/equipment/categories`。测试要覆盖「筛选后」和「数据在第一页之外」两种情况。
 - 设备名录这类只用来装饰行的数据，不要和页面自己的数据放进同一个 `Promise.all`：名录失败会连带已经成功的行一起丢掉。用 `page.tsx` 的 `settle` 单独等待，失败时行回退到编号并单独提示；测试要覆盖「主数据成功、名录失败」。
+- 给 `.solid-button`、`.ghost-button` 这类通用类加页面专属尺寸时，选择器要带上父级（如 `.login-card .login-submit`）：单个类名写在通用样式前面会按源码顺序被覆盖。jsdom 的 `getComputedStyle` 不算优先级，测不出这种覆盖，要断言样式时用 `tests/css-cascade.mjs` 的 `cascadedValue`。
 - 菜单、下拉层等浮层不要渲染在 `overflow` 滚动容器里（表格外层的 `.table-scroll` 会裁掉纵向溢出），用 portal 挂到 `body` 再按触发按钮定位，参照 `EquipmentView` 的 `MoreMenu`。测试至少覆盖一行、两行和末行三种情况。
 
 ## 编辑方式
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index bbe3262..d8c9358 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -74,9 +74,10 @@ label { display: grid; gap: 7px; color: #4d4641; font-size: 13px; font-weight: 6
 .icon-field .icon { position: absolute; top: 50%; left: 18px; color: #5a5f67; transform: translateY(-50%); pointer-events: none; }
 .icon-field input { height: 56px; padding-left: 52px; border-radius: 10px; background: #f7f8f9; font-size: 15px; }
 .icon-field input:focus { background: white; }
-.login-submit { width: 100%; height: 56px; margin-top: 8px; border-radius: 10px; font-size: 17px; letter-spacing: 4px; }
-.login-submit:hover { background: var(--accent-dark); }
-.login-submit:disabled { opacity: .7; cursor: wait; }
+/* Scoped to the card so the shared .solid-button size further down cannot win on source order. */
+.login-card .login-submit { width: 100%; height: 56px; margin-top: 8px; border-radius: 10px; font-size: 17px; letter-spacing: 4px; }
+.login-card .login-submit:hover { background: var(--accent-dark); }
+.login-card .login-submit:disabled { color: white; background: var(--orange); opacity: .7; cursor: wait; }
 .primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 17px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; letter-spacing: .1px; }
 .primary { border: 1px solid var(--accent); color: white; background: var(--accent); box-shadow: 0 4px 12px rgba(232, 98, 26, .22); }
 .primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
diff --git a/frontend/tests/css-cascade.mjs b/frontend/tests/css-cascade.mjs
new file mode 100644
index 0000000..d92091f
--- /dev/null
+++ b/frontend/tests/css-cascade.mjs
@@ -0,0 +1,63 @@
+import { readFileSync } from "node:fs";
+import { JSDOM } from "jsdom";
+
+/**
+ * jsdom's getComputedStyle ignores selector specificity (a later `.solid-button` beats an
+ * earlier `.card .solid-button`), so it cannot catch a shared style overriding a local one.
+ * This resolves one property the way a browser does: matching rules, then !important,
+ * specificity and source order. Media queries are limited to (max-width)/(min-width) and
+ * (prefers-*), which is all globals.css uses.
+ */
+const stylesheet = new URL("../app/globals.css", import.meta.url);
+
+export function loadStyles() {
+  const css = readFileSync(stylesheet, "utf8").replace(/@import[^;]+;/g, "");
+  return new JSDOM(`<style>${css}</style>`).window.document.styleSheets[0].cssRules;
+}
+
+function specificity(selector) {
+  const bare = selector.replace(/::?(before|after|placeholder|selection)\b/g, "").replace(/\([^)]*\)/g, "");
+  const ids = (bare.match(/#[\w-]+/g) ?? []).length;
+  const classes = (bare.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g) ?? []).length;
+  const types = (bare.replace(/#[\w-]+|\.[\w-]+|\[[^\]]*\]|:[\w-]+/g, " ").match(/(^|[\s>+~])[a-z][\w-]*/gi) ?? []).length;
+  return ids * 10000 + classes * 100 + types;
+}
+
+function mediaApplies(text, width) {
+  return text.split(/\band\b/).every((part) => {
+    const max = part.match(/max-width:\s*(\d+)px/);
+    if (max) return width <= Number(max[1]);
+    const min = part.match(/min-width:\s*(\d+)px/);
+    if (min) return width >= Number(min[1]);
+    return !/prefers-/.test(part);
+  });
+}
+
+export function cascadedValue(element, property, { rules = loadStyles(), width = 1440 } = {}) {
+  let best = null;
+  let order = 0;
+  const visit = (list) => {
+    for (const rule of list) {
+      if (rule.media) {
+        if (mediaApplies(rule.media.mediaText, width)) visit(rule.cssRules);
+        continue;
+      }
+      if (!rule.selectorText) continue;
+      order += 1;
+      const value = rule.style.getPropertyValue(property);
+      if (!value) continue;
+      const important = rule.style.getPropertyPriority(property) === "important";
+      for (const selector of rule.selectorText.split(",").map((part) => part.trim())) {
+        let matches = false;
+        try { matches = element.matches(selector.replace(/::?(before|after)\b/g, "")); } catch { continue; }
+        if (!matches || /::?(before|after)\b/.test(selector)) continue;
+        const rank = [important ? 1 : 0, specificity(selector), order];
+        if (!best || rank[0] > best.rank[0] || (rank[0] === best.rank[0] && (rank[1] > best.rank[1] || (rank[1] === best.rank[1] && rank[2] >= best.rank[2])))) {
+          best = { rank, value, selector };
+        }
+      }
+    }
+  };
+  visit(rules);
+  return best?.value ?? "";
+}
diff --git a/frontend/tests/login-audit.test.mjs b/frontend/tests/login-audit.test.mjs
index 1b2eec6..86c3cf9 100644
--- a/frontend/tests/login-audit.test.mjs
+++ b/frontend/tests/login-audit.test.mjs
@@ -262,3 +262,40 @@ test("a demo card fills the login form with that seeded account", async (t) => {
   assert.equal(container.querySelector('[data-demo="TECHNICIAN"]').getAttribute("aria-pressed"), "true");
   assert.equal(container.querySelector('[data-demo="STUDENT"]').getAttribute("aria-pressed"), "false");
 });
+
+test("page-specific button sizes are not overridden by the shared .solid-button style", async () => {
+  const { cascadedValue, loadStyles } = await import("./css-cascade.mjs");
+  const rules = loadStyles();
+  const { LoginView } = loadComponent("components/LoginView.tsx");
+  const { AuditView, emptyAuditFilter } = loadComponent("components/views/AuditView.tsx");
+  const login = (busy) => renderToStaticMarkup(React.createElement(LoginView, {
+    login: { username: "", password: "" }, busy, toast: null, onLoginChange: noop, onSubmit: noop, onDemo: noop,
+  }));
+  const audit = renderToStaticMarkup(React.createElement(AuditView, {
+    auditLogs: page([log(1, "ADMIN", "EQUIPMENT_CREATED")]), filter: emptyAuditFilter, onFilterChange: noop, onSearch: noop, onReset: noop, onPage: noop,
+  }));
+  const { document } = new JSDOM(`${login(false)}<div id="busy">${login(true)}</div>${audit}`).window;
+  const style = (element, property) => cascadedValue(element, property, { rules });
+
+  const submit = document.querySelector(".login-submit");
+  assert.equal(style(submit, "height"), "56px");
+  assert.equal(style(submit, "font-size"), "17px");
+  assert.equal(style(submit, "border-radius"), "10px");
+  const busySubmit = document.querySelector("#busy .login-submit");
+  assert.equal(busySubmit.disabled, true);
+  assert.equal(style(busySubmit, "cursor"), "wait", "busy login keeps its own disabled look");
+
+  for (const button of document.querySelectorAll(".audit-filters button")) {
+    assert.equal(style(button, "height"), "40px", button.textContent);
+  }
+  // The shared size still applies where nothing more specific is set.
+  assert.equal(style(document.querySelector('[data-action="next-page"]'), "height"), "32px");
+});
+
+test("the cascade helper ranks specificity above source order", async () => {
+  const { cascadedValue } = await import("./css-cascade.mjs");
+  const { document } = new JSDOM(`<style>.a .b{height:56px} .b{height:32px} .c{height:1px !important} #d.c{height:2px}</style><div class="a"><i class="b"></i><i id="d" class="c"></i></div>`).window;
+  const rules = document.styleSheets[0].cssRules;
+  assert.equal(cascadedValue(document.querySelector(".b"), "height", { rules }), "56px");
+  assert.equal(cascadedValue(document.querySelector(".c"), "height", { rules }), "1px");
+});