优化总览活动列表与用户说明提示

This commit is contained in:
xuans 2026-09-25 09:36:08 +08:00
parent 2ac7342524
commit 0a9172f639
4 changed files with 31 additions and 5 deletions

View File

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

View File

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

View File

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

View File

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