klarkxy/hustoj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 优化管理员菜单样式和交互逻辑

Browse Source
This commit is contained in:
klarkxy
2026-04-10 17:05:28 +08:00
parent c33c28794d
commit d30311e9bb
1 changed files with 103 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
web/admin/menu2.php
View File

@@ -11,11 +11,106 @@
<head> <head>
<title><?php echo $MSG_ADMIN?></title> <title><?php echo $MSG_ADMIN?></title>
<link rel="stylesheet" href="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE/"?>bootstrap-theme.min.css"> <link rel="stylesheet" href="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE/"?>bootstrap-theme.min.css">
<style>
.admin-menu {
margin-top: 0.5rem;
}
.admin-menu .btn-group {
display: block;
margin-bottom: 0.4rem;
width: 100%;
}
.admin-menu .dropdown-toggle {
width: 100%;
}
.admin-menu .dropdown-menu {
display: none;
position: static;
float: none;
min-width: 0;
width: 100%;
margin-top: 0.25rem;
padding: 0.2rem 0;
border: 0;
box-shadow: none;
background: transparent;
text-align: center;
}
.admin-menu .dropdown-menu.show {
display: block;
}
.admin-menu .dropdown-item {
display: block;
margin: 0.15rem 0;
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: inherit;
text-decoration: none;
}
.admin-menu .dropdown-item:hover,
.admin-menu .dropdown-item:focus {
background: rgba(0, 0, 0, 0.04);
text-decoration: none;
}
.admin-menu .caret {
display: inline-block;
margin-left: 0.35rem;
width: 0;
height: 0;
vertical-align: middle;
border-top: 0.35em solid currentColor;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
transition: transform 0.15s ease;
}
.admin-menu .dropdown-toggle[aria-expanded="true"] .caret {
transform: rotate(180deg);
}
</style>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE/"?>jquery.min.js"></script> <script src="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE/"?>jquery.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var toggles = document.querySelectorAll('.admin-menu-toggle');
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> function closeMenus(exceptToggle) {
<script src="<?php echo $OJ_CDN_URL.$path_fix."template/$OJ_TEMPLATE/"?>bootstrap.min.js"></script> toggles.forEach(function (toggle) {
var menu = toggle.parentElement.querySelector('.dropdown-menu');
var isCurrent = toggle === exceptToggle;
toggle.setAttribute('aria-expanded', isCurrent ? 'true' : 'false');
if (menu) {
menu.classList.toggle('show', isCurrent);
}
});
}
toggles.forEach(function (toggle) {
toggle.addEventListener('click', function (event) {
event.preventDefault();
var expanded = toggle.getAttribute('aria-expanded') === 'true';
if (expanded) {
closeMenus(null);
} else {
closeMenus(toggle);
}
});
});
document.addEventListener('click', function (event) {
if (!event.target.closest('.admin-menu')) {
closeMenus(null);
}
});
});
</script>
</head> </head>
@@ -26,11 +121,11 @@
<a class='btn btn-sm' href="../status.php" target="_top" title="<?php echo $MSG_HELP_SEEOJ?>"><b><?php echo $MSG_SEEOJ?></b></a><br> <a class='btn btn-sm' href="../status.php" target="_top" title="<?php echo $MSG_HELP_SEEOJ?>"><b><?php echo $MSG_SEEOJ?></b></a><br>
<div> <div class="admin-menu">
<div class="btn-group-vertical" role="menu"> <div class="btn-group-vertical" role="menu">
<div class="btn-group" role="menu"> <div class="btn-group" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle btn-sm admin-menu-toggle" aria-haspopup="true" aria-expanded="false">
<?php echo $MSG_NEWS."-".$MSG_ADMIN ?> <span class="caret"></span> <?php echo $MSG_NEWS."-".$MSG_ADMIN ?> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@@ -44,7 +139,7 @@
</div> </div>
</div> </div>
<div class="btn-group" role="menu"> <div class="btn-group" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle btn-sm admin-menu-toggle" aria-haspopup="true" aria-expanded="false">
<?php echo $MSG_USER."-".$MSG_ADMIN ?> <span class="caret"></span> <?php echo $MSG_USER."-".$MSG_ADMIN ?> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@@ -67,7 +162,7 @@
</div> </div>
<div class="btn-group" role="menu"> <div class="btn-group" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle btn-sm admin-menu-toggle" aria-haspopup="true" aria-expanded="false">
<?php echo $MSG_PROBLEM."-".$MSG_ADMIN ?> <span class="caret"></span> <?php echo $MSG_PROBLEM."-".$MSG_ADMIN ?> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@@ -84,7 +179,7 @@
<div class="btn-group" role="menu"> <div class="btn-group" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle btn-sm admin-menu-toggle" aria-haspopup="true" aria-expanded="false">
<?php echo $MSG_CONTEST."-".$MSG_ADMIN ?> <span class="caret"></span> <?php echo $MSG_CONTEST."-".$MSG_ADMIN ?> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@@ -101,7 +196,7 @@
<?php if (isset($_SESSION[$OJ_NAME.'_'.'administrator'])){?> <?php if (isset($_SESSION[$OJ_NAME.'_'.'administrator'])){?>
<div class="btn-group" role="menu"> <div class="btn-group" role="menu">
<button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle btn-sm admin-menu-toggle" aria-haspopup="true" aria-expanded="false">
<?php echo $MSG_SYSTEM."-".$MSG_ADMIN ?> <span class="caret"></span> <?php echo $MSG_SYSTEM."-".$MSG_ADMIN ?> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">