From 0a9172f6394383e2a3db4b70d8036a9cdb0e5bab Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Fri, 25 Sep 2026 09:36:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=80=BB=E8=A7=88=E6=B4=BB?=
 =?UTF-8?q?=E5=8A=A8=E5=88=97=E8=A1=A8=E4=B8=8E=E7=94=A8=E6=88=B7=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Dashboard/Dashboard.css      |  8 ++++++++
 frontend/src/views/Dashboard/Dashboard.test.js  | 17 +++++++++++++++++
 frontend/src/views/Dashboard/Dashboard.vue      |  6 +++---
 .../src/views/UserManagement/UserManagement.vue |  5 +++--
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Dashboard/Dashboard.css b/frontend/src/views/Dashboard/Dashboard.css
index 1b77960..38855b0 100644
--- a/frontend/src/views/Dashboard/Dashboard.css
+++ b/frontend/src/views/Dashboard/Dashboard.css
@@ -170,7 +170,15 @@ h2 {
 }
 .record-list {
   display: grid;
+  align-content: start;
   gap: 8px;
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+.record-list:focus-visible {
+  outline: 2px solid #315aaa;
+  outline-offset: 3px;
 }
 .record-row {
   display: flex;
diff --git a/frontend/src/views/Dashboard/Dashboard.test.js b/frontend/src/views/Dashboard/Dashboard.test.js
index 50db230..0902516 100644
--- a/frontend/src/views/Dashboard/Dashboard.test.js
+++ b/frontend/src/views/Dashboard/Dashboard.test.js
@@ -566,3 +566,20 @@ test("domainAction.refreshesSuccessfulResultAndRetainsNotice", async (t) => {
   assert.match(state.notice.value, /example\.test/);
   assert.deepEqual(state.tasks.value, [{ id: "task-2", status: "success" }]);
 });
+
+test("dashboardLayout.keepsActivityListsBoundedAndKeyboardAccessible", async () => {
+  const { readFile } = await import("node:fs/promises");
+  const template = await readFile(new URL("./Dashboard.vue", import.meta.url), "utf8");
+  const stylesheet = await readFile(new URL("./Dashboard.css", import.meta.url), "utf8");
+  assert.equal((template.match(/class="record-list" tabindex="0"/g) || []).length, 3);
+  assert.match(stylesheet, /\.record-list\s*\{[^}]*max-height:\s*280px;[^}]*overflow-y:\s*auto;/);
+  assert.match(stylesheet, /\.record-list:focus-visible/);
+});
+
+test("dashboardLayout.usesSharedTooltipForUserManagementDescription", async () => {
+  const { readFile } = await import("node:fs/promises");
+  const template = await readFile(new URL("../UserManagement/UserManagement.vue", import.meta.url), "utf8");
+  assert.match(template, /import HelpTip from "\.\.\/components\/HelpTip\/HelpTip.vue";/);
+  assert.match(template, /<HelpTip>[\s\S]*?<\/HelpTip>/);
+  assert.doesNotMatch(template, /<p class="user-management-description">/);
+});
\ No newline at end of file
diff --git a/frontend/src/views/Dashboard/Dashboard.vue b/frontend/src/views/Dashboard/Dashboard.vue
index bd0a3ba..6cc4a46 100644
--- a/frontend/src/views/Dashboard/Dashboard.vue
+++ b/frontend/src/views/Dashboard/Dashboard.vue
@@ -209,7 +209,7 @@ const {
         <div>
           <h3>证书状态</h3>
           <div v-if="certificates.length === 0" class="empty-state compact-empty">暂无证书记录</div>
-          <div v-else class="record-list">
+          <div v-else class="record-list" tabindex="0">
             <article v-for="item in certificates" :key="item.domain.id" class="record-row">
               <div>
                 <strong>{{ item.domain.name }}</strong>
@@ -224,7 +224,7 @@ const {
         <div>
           <h3>任务记录</h3>
           <div v-if="tasks.length === 0" class="empty-state compact-empty">暂无任务记录</div>
-          <div v-else class="record-list">
+          <div v-else class="record-list" tabindex="0">
             <article v-for="item in tasks" :key="item.id" class="record-row">
               <div>
                 <strong>{{ taskTypeLabel(item.task_type) }}</strong>
@@ -250,7 +250,7 @@ const {
         <div>
           <h3>审计日志</h3>
           <div v-if="auditLogs.length === 0" class="empty-state compact-empty">暂无审计日志</div>
-          <div v-else class="record-list">
+          <div v-else class="record-list" tabindex="0">
             <article v-for="item in auditLogs" :key="item.id" class="record-row">
               <div>
                 <strong>{{ auditActionLabel(item.action) }}</strong>
diff --git a/frontend/src/views/UserManagement/UserManagement.vue b/frontend/src/views/UserManagement/UserManagement.vue
index 16b6761..017e346 100644
--- a/frontend/src/views/UserManagement/UserManagement.vue
+++ b/frontend/src/views/UserManagement/UserManagement.vue
@@ -1,4 +1,5 @@
 <script setup>
+import HelpTip from "../components/HelpTip/HelpTip.vue";
 import { useUserManagement } from "./UserManagement.js";
 
 const {
@@ -32,9 +33,9 @@ const {
       <div>
         <p class="eyebrow">权限与账号</p>
         <h2>用户管理</h2>
-        <p class="user-management-description">
+        <HelpTip>
           管理登录账号、角色和使用状态。密码只在服务端保存摘要。
-        </p>
+        </HelpTip>
       </div>
       <div class="user-management-actions">
         <button class="secondary-button" type="button" :disabled="loading" @click="loadUsers">