Zzzz/Book-management-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端修复，日志功能加入

Browse Source
This commit is contained in:
Zzzz
2026-04-28 18:26:28 +08:00
parent dc192e8223
commit cc32c222a4
35 changed files with 874 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/webapp/WEB-INF/jsp/admin/users/form.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><c:out value="${formTitle}" /> - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/admin/users/manage.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户管理 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/auth/login.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body class="auth-page">
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/auth/unauthorized.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无权限 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/books/catalog.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>馆藏检索 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/books/categories.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分类管理 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/books/category-form.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><c:out value="${formTitle}" /> - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/books/form.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><c:out value="${formTitle}" /> - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/books/manage.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图书管理 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/borrowing/form.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>新增借阅 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/borrowing/manage.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>借阅管理 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/common/header.jspf
+60 -37
View File
@@ -1,83 +1,102 @@
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<header class="app-header">
<header class="app-header ${not empty sessionScope.authenticatedUser ? 'app-header-auth' : 'app-header-public'}">
<c:choose>
<c:when test="${not empty sessionScope.authenticatedUser}">
<c:set var="currentUri" value="${pageContext.request.requestURI}" />
<aside class="app-sidebar" aria-label="主导航">
<a class="sidebar-brand" href="${pageContext.request.contextPath}/dashboard">
<span class="brand-mark" aria-hidden="true">书</span>
<span>图书管理系统</span>
<span class="brand-text">图书管理系统</span>
</a>
<section class="role-workbench" aria-label="角色工作台">
<p class="sidebar-section-title">角色工作台</p>
<c:if test="${sessionScope.userRole == 'administrator'}">
<a class="role-chip role-chip-admin" href="${pageContext.request.contextPath}/admin/home">
<span aria-hidden="true">管</span>
<strong>管理员</strong>
<small>/admin/home</small>
<span class="role-chip-icon" aria-hidden="true">管</span>
<span class="role-chip-copy">
<strong>管理员</strong>
<small>系统管理</small>
</span>
</a>
</c:if>
<c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
<a class="role-chip role-chip-librarian" href="${pageContext.request.contextPath}/librarian/home">
<span aria-hidden="true">馆</span>
<strong>馆员</strong>
<small>/librarian/home</small>
<span class="role-chip-icon" aria-hidden="true">馆</span>
<span class="role-chip-copy">
<strong>馆员</strong>
<small>流通工作</small>
</span>
</a>
</c:if>
<c:if test="${sessionScope.userRole == 'reader'}">
<a class="role-chip role-chip-reader" href="${pageContext.request.contextPath}/reader/home">
<span class="role-chip-icon" aria-hidden="true">读</span>
<span class="role-chip-copy">
<strong>读者</strong>
<small>自助服务</small>
</span>
</a>
</c:if>
<a class="role-chip role-chip-reader" href="${pageContext.request.contextPath}/reader/home">
<span aria-hidden="true">读</span>
<strong>读者</strong>
<small>/reader/home</small>
</a>
</section>
<nav class="side-nav" aria-label="模块导航">
<a class="side-nav-link ${fn:contains(currentUri, '/dashboard') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/dashboard">
<span aria-hidden="true">台</span>工作台
<span class="nav-icon" aria-hidden="true">台</span>
<span class="nav-text">工作台</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/catalog') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/catalog">
<span aria-hidden="true">搜</span>馆藏检索
<span class="nav-icon" aria-hidden="true">搜</span>
<span class="nav-text">馆藏检索</span>
</a>
<c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
<a class="side-nav-link ${fn:contains(currentUri, '/books') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/books">
<span aria-hidden="true">书</span>图书管理
<span class="nav-icon" aria-hidden="true">书</span>
<span class="nav-text">图书管理</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/book-categories') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/book-categories">
<span aria-hidden="true">类</span>图书分类管理
<span class="nav-icon" aria-hidden="true">类</span>
<span class="nav-text">图书分类管理</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/readers') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/readers">
<span aria-hidden="true">人</span>读者管理
<span class="nav-icon" aria-hidden="true">人</span>
<span class="nav-text">读者管理</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/borrowing') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/borrowing">
<span aria-hidden="true">借</span>借阅流通
<span class="nav-icon" aria-hidden="true">借</span>
<span class="nav-text">借阅流通</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/reports') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/reports">
<span aria-hidden="true">报</span>报表中心
<span class="nav-icon" aria-hidden="true">报</span>
<span class="nav-text">报表中心</span>
</a>
</c:if>
<c:if test="${sessionScope.userRole == 'reader'}">
<a class="side-nav-link ${fn:contains(currentUri, '/reader/loans') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/reader/loans">
<span aria-hidden="true">历</span>读者借阅历史
<span class="nav-icon" aria-hidden="true">历</span>
<span class="nav-text">读者借阅历史</span>
</a>
</c:if>
<c:if test="${sessionScope.userRole == 'administrator'}">
<a class="side-nav-link ${fn:contains(currentUri, '/admin/users') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/admin/users">
<span aria-hidden="true">户</span>用户管理
<span class="nav-icon" aria-hidden="true">户</span>
<span class="nav-text">用户管理</span>
</a>
<a class="side-nav-link ${fn:contains(currentUri, '/admin/system-logs') ? 'is-active' : ''}"
href="${pageContext.request.contextPath}/admin/system-logs">
<span aria-hidden="true">志</span>系统日志
<span class="nav-icon" aria-hidden="true">志</span>
<span class="nav-text">系统日志</span>
</a>
</c:if>
</nav>
@@ -89,26 +108,30 @@
</aside>
<div class="app-topbar">
<div class="breadcrumb">已登录 <span>/</span> Dashboard</div>
<div class="breadcrumb">已登录 <span>/</span> 工作台</div>
<form class="global-search" action="${pageContext.request.contextPath}/catalog" method="get">
<label class="sr-only" for="globalTitle">搜索图书、读者、功能</label>
<input id="globalTitle" name="title" type="search" placeholder="搜索图书、读者、功能...">
<button type="submit" aria-label="搜索">⌕</button>
<button type="submit" aria-label="搜索">搜</button>
</form>
<div class="topbar-actions">
<span class="notification-dot" aria-label="通知">!</span>
<span class="avatar" aria-hidden="true">
<c:choose>
<c:when test="${sessionScope.userRole == 'administrator'}">管</c:when>
<c:when test="${sessionScope.userRole == 'librarian'}">馆</c:when>
<c:otherwise>读</c:otherwise>
</c:choose>
</span>
<span class="user-pill">
<c:out value="${sessionScope.authenticatedUser.displayName}" />
</span>
<span class="role-label">
<c:out value="${sessionScope.authenticatedUser.role.displayName}" />
<span class="user-summary">
<span class="avatar" aria-hidden="true">
<c:choose>
<c:when test="${sessionScope.userRole == 'administrator'}">管</c:when>
<c:when test="${sessionScope.userRole == 'librarian'}">馆</c:when>
<c:otherwise>读</c:otherwise>
</c:choose>
</span>
<span class="user-meta">
<span class="user-pill">
<c:out value="${sessionScope.authenticatedUser.displayName}" />
</span>
<span class="role-label">
<c:out value="${sessionScope.authenticatedUser.role.displayName}" />
</span>
</span>
</span>
</div>
</div>
src/main/webapp/WEB-INF/jsp/dashboard.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>控制台 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/maintenance/system-logs.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>系统日志 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/reader/loans.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>借阅历史 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/readers/form.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><c:out value="${formTitle}" /> - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/readers/manage.jsp
+1 -1
View File
@@ -7,7 +7,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>读者管理 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/reports/dashboard.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>报表 - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/WEB-INF/jsp/role-home.jsp
+1 -1
View File
@@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><c:out value="${areaName}" /> - MZH 图书馆</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css?v=20260428-visual-shell">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
src/main/webapp/static/css/app.css
+223 -63
View File
@@ -17,7 +17,7 @@
--color-purple: #7c6ee6;
--shadow-panel: 0 10px 28px rgba(15, 23, 42, 0.09);
--shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
--sidebar-width: 248px;
--sidebar-width: 264px;
--topbar-height: 64px;
}
@@ -32,7 +32,9 @@ html {
body {
margin: 0;
min-height: 100vh;
color: #111827;
color: var(--color-ink);
background: #eef3f8;
background: var(--color-page);
font-family: Arial, "Microsoft YaHei", sans-serif;
font-size: 14px;
@@ -65,7 +67,8 @@ textarea {
min-height: 0;
}
.auth-page .app-header {
.auth-page .app-header,
.app-header-public {
min-height: 64px;
display: flex;
align-items: center;
@@ -74,16 +77,7 @@ textarea {
background: rgba(255, 255, 255, 0.9);
}
.app-header:has(.auth-brand) {
min-height: 64px;
display: flex;
align-items: center;
padding: 0 32px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
background: rgba(255, 255, 255, 0.94);
}
.app-header:has(.auth-brand) + .page-shell {
.app-header-public + .page-shell {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
padding: 36px 0 56px;
@@ -98,31 +92,44 @@ textarea {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
inset: 0 auto 0 0;
z-index: 30;
width: 264px;
width: var(--sidebar-width);
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 22px 14px 16px;
overflow-y: auto;
padding: 20px 16px 16px;
color: #cbd5e1;
background:
radial-gradient(circle at 25% 8%, rgba(59, 130, 246, 0.16), transparent 34%),
linear-gradient(180deg, #101a2b 0%, #172235 46%, #0f1726 100%);
background: #101a2b;
background: linear-gradient(180deg, #101a2b 0%, #172235 46%, #0f1726 100%);
box-shadow: 12px 0 30px rgba(15, 23, 42, 0.18);
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 12px;
gap: 11px;
min-height: 44px;
padding: 0 10px;
color: #ffffff;
font-size: 17px;
font-weight: 800;
text-decoration: none;
}
.brand-text {
min-width: 0;
overflow: hidden;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand-mark {
width: 28px;
height: 28px;
@@ -136,11 +143,15 @@ textarea {
}
.role-workbench {
margin-top: 24px;
padding: 0 0 14px;
display: grid;
gap: 8px;
margin-top: 22px;
padding: 0 0 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.sidebar-section-title {
grid-column: 1 / -1;
margin: 0 0 10px;
padding: 0 12px;
color: #91a2bd;
@@ -149,24 +160,21 @@ textarea {
}
.role-chip {
min-height: 38px;
min-height: 44px;
display: grid;
grid-template-columns: 28px 1fr;
grid-template-rows: auto auto;
gap: 0 9px;
grid-template-columns: 30px minmax(0, 1fr);
gap: 0 10px;
align-items: center;
margin: 8px 0;
padding: 8px 11px;
padding: 9px 11px;
border-radius: 7px;
color: #ffffff;
text-decoration: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}
.role-chip span {
grid-row: 1 / 3;
width: 26px;
height: 26px;
.role-chip-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -176,13 +184,25 @@ textarea {
font-weight: 800;
}
.role-chip-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.role-chip strong {
overflow: hidden;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.role-chip small {
overflow: hidden;
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.role-chip-admin {
@@ -199,30 +219,43 @@ textarea {
.side-nav {
display: grid;
gap: 5px;
margin-top: 4px;
gap: 6px;
margin-top: 14px;
}
.side-nav-link {
min-height: 40px;
display: flex;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
gap: 11px;
padding: 9px 11px;
gap: 10px;
padding: 8px 10px;
border-radius: 7px;
color: #c8d2df;
line-height: 1.2;
text-decoration: none;
}
.side-nav-link span {
width: 22px;
.side-nav-link .nav-icon {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: #9aa9bd;
background: rgba(255, 255, 255, 0.06);
font-size: 13px;
font-weight: 800;
}
.side-nav-link .nav-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.side-nav-link:hover,
.side-nav-link.is-active {
color: #ffffff;
@@ -230,9 +263,10 @@ textarea {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.side-nav-link:hover span,
.side-nav-link.is-active span {
.side-nav-link:hover .nav-icon,
.side-nav-link.is-active .nav-icon {
color: #ffffff;
background: rgba(255, 255, 255, 0.18);
}
.sidebar-footer {
@@ -260,12 +294,20 @@ textarea {
.app-topbar {
position: fixed;
top: 0;
right: 0;
left: 264px;
left: var(--sidebar-width);
inset: 0 0 auto var(--sidebar-width);
z-index: 25;
height: 64px;
height: var(--topbar-height);
display: flex;
display: grid;
grid-template-columns: minmax(140px, 1fr) minmax(260px, 420px) auto;
align-items: center;
gap: 18px;
justify-content: space-between;
gap: 16px;
padding: 0 28px;
border-bottom: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.96);
@@ -273,11 +315,13 @@ textarea {
}
.breadcrumb {
flex: 1;
min-width: 160px;
min-width: 0;
overflow: hidden;
color: #475569;
font-size: 13px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb span {
@@ -286,8 +330,9 @@ textarea {
}
.global-search {
width: min(360px, 34vw);
min-width: 240px;
width: 100%;
max-width: 420px;
min-width: 0;
height: 38px;
display: flex;
align-items: center;
@@ -298,6 +343,7 @@ textarea {
.global-search input {
width: 100%;
min-width: 0;
height: 100%;
padding: 0 12px;
border: 0;
@@ -307,7 +353,8 @@ textarea {
}
.global-search button {
width: 40px;
width: 42px;
flex: 0 0 42px;
height: 100%;
border: 0;
color: #64748b;
@@ -316,16 +363,20 @@ textarea {
}
.topbar-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 11px;
min-width: 0;
color: #334155;
white-space: nowrap;
}
.notification-dot {
width: 22px;
height: 22px;
width: 24px;
height: 24px;
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -337,6 +388,18 @@ textarea {
font-weight: 800;
}
.user-summary {
min-width: 0;
max-width: 240px;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: #f8fafc;
}
.avatar {
width: 32px;
height: 32px;
@@ -347,14 +410,24 @@ textarea {
color: #102033;
background: linear-gradient(135deg, #dbeafe, #ffffff);
font-weight: 800;
flex: 0 0 32px;
box-shadow: inset 0 0 0 1px #bfdbfe;
}
.user-meta {
min-width: 0;
display: grid;
gap: 2px;
line-height: 1.12;
}
.user-pill,
.role-label {
max-width: 160px;
display: block;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-pill {
@@ -390,10 +463,17 @@ textarea {
body:not(.auth-page) .page-shell {
width: auto;
max-width: none;
margin-left: 264px;
margin-left: var(--sidebar-width);
padding: 82px 24px 44px;
padding: calc(var(--topbar-height) + 18px) 24px 44px;
}
body:not(.auth-page) .dashboard-shell {
max-width: 1360px;
margin-right: auto;
}
.login-panel,
.notice-panel,
.dashboard-hero,
@@ -405,9 +485,12 @@ body:not(.auth-page) .page-shell {
.dashboard-panel,
.metric-card,
.shortcut-card {
border: 1px solid #e2e8f0;
border: 1px solid var(--color-border);
border-radius: 8px;
background: #ffffff;
background: var(--color-panel);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
box-shadow: var(--shadow-panel);
}
@@ -573,8 +656,8 @@ h2 {
}
.dashboard-hero {
padding: 24px;
margin-bottom: 16px;
padding: 24px 26px;
margin-bottom: 18px;
}
.dashboard-welcome {
@@ -584,6 +667,14 @@ h2 {
gap: 18px;
}
.dashboard-welcome > div:first-child {
min-width: 0;
}
.dashboard-welcome p {
max-width: 760px;
}
.dashboard-welcome p:last-child,
.workspace-card p:last-child,
.notice-panel p:last-child {
@@ -592,6 +683,7 @@ h2 {
.welcome-user {
min-width: 150px;
max-width: 240px;
display: grid;
gap: 4px;
padding: 11px 14px;
@@ -611,13 +703,17 @@ h2 {
}
.dashboard-metrics {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
gap: 18px;
margin-bottom: 18px;
}
.metric-card {
flex: 1 1 230px;
min-width: 0;
min-height: 98px;
display: flex;
align-items: center;
@@ -625,6 +721,10 @@ h2 {
padding: 18px 20px;
}
.metric-card > div {
min-width: 0;
}
.metric-card h2 {
margin-bottom: 5px;
color: #475569;
@@ -665,6 +765,7 @@ h2 {
font-size: 24px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
.metric-value small {
@@ -687,13 +788,17 @@ h2 {
}
.dashboard-grid {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: minmax(320px, 0.96fr) minmax(420px, 1.34fr);
gap: 16px;
margin-bottom: 16px;
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.3fr);
gap: 18px;
margin-bottom: 18px;
}
.dashboard-panel {
flex: 1 1 360px;
min-width: 0;
padding: 16px;
}
@@ -705,7 +810,7 @@ h2 {
.dashboard-search-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 22px;
gap: 13px 16px;
align-items: end;
}
@@ -749,9 +854,9 @@ h2 {
.rank-chart {
height: 162px;
display: grid;
grid-template-columns: repeat(10, minmax(36px, 1fr));
grid-template-columns: repeat(10, minmax(26px, 1fr));
align-items: end;
gap: 12px;
gap: 10px;
padding: 6px 4px 0;
border-top: 1px solid #eef2f7;
background:
@@ -793,9 +898,12 @@ h2 {
}
.dashboard-table-grid {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.9fr);
gap: 16px;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
align-items: start;
gap: 18px;
}
.table-panel-wide {
@@ -814,7 +922,7 @@ h2 {
.shortcut-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
@@ -1157,6 +1265,10 @@ h2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric-card {
flex-basis: calc(50% - 9px);
}
.dashboard-grid,
.dashboard-table-grid {
grid-template-columns: 1fr;
@@ -1171,6 +1283,10 @@ h2 {
.app-sidebar,
.app-topbar {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
inset: auto;
}
@@ -1180,12 +1296,40 @@ h2 {
border-radius: 0;
}
.role-workbench {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.side-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-footer {
margin-top: 14px;
}
.app-topbar {
height: auto;
flex-wrap: wrap;
flex-direction: column;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 10px;
padding: 14px 16px;
}
.topbar-actions {
justify-content: space-between;
}
.user-summary {
max-width: none;
}
.user-pill,
.role-label {
max-width: none;
}
body:not(.auth-page) .page-shell {
width: min(1280px, calc(100% - 24px));
margin: 0 auto;
@@ -1194,6 +1338,7 @@ h2 {
.global-search {
width: 100%;
max-width: none;
}
}
@@ -1214,6 +1359,7 @@ h2 {
.dashboard-metrics,
.dashboard-search-form,
.side-nav,
.shortcut-grid,
.search-form,
.borrowing-search-form,
@@ -1222,6 +1368,11 @@ h2 {
grid-template-columns: 1fr;
}
.metric-card,
.dashboard-panel {
flex-basis: 100%;
}
.rank-chart {
grid-template-columns: repeat(5, minmax(36px, 1fr));
height: auto;
@@ -1231,6 +1382,15 @@ h2 {
height: 132px;
}
.dashboard-form-actions,
.topbar-actions {
flex-wrap: wrap;
}
.dashboard-form-actions .button {
flex: 1 1 120px;
}
.login-panel,
.notice-panel,
.dashboard-hero,