linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin nav: implement eweishop-like top navigation with dropdown groups

Browse Source
This commit is contained in:
萝卜
2026-03-15 01:45:34 +00:00
parent 6bb3c843dd
commit 8017488088
2 changed files with 162 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
public/css/admin-components.css
View File

@@ -170,7 +170,124 @@
line-height:1.4;
}
/* 总台管理：左侧导航二级分组（最小可用版） */
/* 总台管理：顶部导航（参考 eweishop 的“横向主导航 + 下拉子菜单”交互） */
.sidebar.topnav{
white-space:normal;
overflow-x:visible;
}
.topnav-row{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
}
.topnav-brand{
display:inline-flex;
align-items:center;
font-weight:800;
color:#e2e8f0;
padding:8px 10px;
border-radius:10px;
}
.topnav-brand:hover{
text-decoration:none;
background:#111827;
}
.topnav-menu{
display:flex;
align-items:center;
gap:8px;
flex:1;
flex-wrap:wrap;
}
.topnav-link,
.topnav-summary{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 10px;
border-radius:10px;
color:#cbd5e1;
}
.topnav-link:hover,
.topnav-summary:hover{
text-decoration:none;
background:#1e293b;
}
.topnav-item{
position:relative;
}
.topnav-item > summary::-webkit-details-marker{
display:none;
}
.topnav-item > summary{
list-style:none;
cursor:pointer;
user-select:none;
}
.topnav-dropdown{
position:absolute;
top:calc(100% + 8px);
left:0;
min-width:180px;
background:#0f172a;
border:1px solid #334155;
border-radius:12px;
padding:10px;
box-shadow:0 12px 30px rgba(0,0,0,.35);
z-index:100;
}
/* details 未展开时不展示下拉 */
.topnav-item:not([open]) .topnav-dropdown{
display:none;
}
.topnav-sub{
display:block;
padding:9px 10px;
border-radius:10px;
color:#cbd5e1;
margin:0;
}
.topnav-sub:hover{
text-decoration:none;
background:#1e293b;
}
.topnav-actions{
display:flex;
align-items:center;
gap:10px;
}
.topnav-meta{
margin-top:6px;
}
/* 移动端：下拉改为文档流（避免 absolute 导致溢出） */
@media (max-width: 768px){
.topnav-row{gap:10px;}
.topnav-dropdown{
position:static;
min-width:auto;
box-shadow:none;
margin-top:6px;
}
}
/* 兼容：旧的左侧导航二级分组样式（保留但不再作为主形态） */
.sidebar .nav-group{
margin:10px 0;
}

83
resources/views/admin/layouts/app.blade.php
View File

@@ -10,41 +10,56 @@
</head>
<body>
<div class="layout layout-topnav">
<aside class="sidebar">
<h2 class="sidebar-title">SaaSShop</h2>
<aside class="sidebar topnav">
<div class="topnav-row">
<a class="topnav-brand" href="/admin">SaaSShop</a>
<nav class="topnav-menu" aria-label="总台主导航">
<a class="topnav-link" href="/admin">总览</a>
<details class="topnav-item nav-group">
<summary class="topnav-summary nav-group-title">收费中心</summary>
<div class="topnav-dropdown">
<a href="/admin/platform-orders" class="topnav-sub nav-item nav-item--sub">平台订单</a>
<a href="/admin/site-subscriptions" class="topnav-sub nav-item nav-item--sub">订阅管理</a>
<a href="/admin/plans" class="topnav-sub nav-item nav-item--sub">套餐管理</a>
</div>
</details>
<details class="topnav-item nav-group">
<summary class="topnav-summary nav-group-title">站点治理</summary>
<div class="topnav-dropdown">
<a href="/admin/merchants" class="topnav-sub nav-item nav-item--sub">站点管理</a>
<a href="/admin/orders" class="topnav-sub nav-item nav-item--sub">订单监控</a>
<a href="/admin/products" class="topnav-sub nav-item nav-item--sub">商品巡检</a>
<a href="/admin/product-categories" class="topnav-sub nav-item nav-item--sub">商品分类</a>
</div>
</details>
<details class="topnav-item nav-group">
<summary class="topnav-summary nav-group-title">增长转化</summary>
<div class="topnav-dropdown">
<a href="/admin/platform-leads" class="topnav-sub nav-item nav-item--sub">开通线索</a>
</div>
</details>
<details class="topnav-item nav-group">
<summary class="topnav-summary nav-group-title">系统</summary>
<div class="topnav-dropdown">
<a href="/admin/settings/system" class="topnav-sub nav-item nav-item--sub">系统配置</a>
</div>
</details>
</nav>
<div class="topnav-actions">
<a class="topnav-link" href="/">返回前台</a>
<form method="post" action="/admin/logout" class="logout-form topnav-logout">@csrf <button type="submit" class="btn btn-secondary btn-sm">退出登录</button></form>
</div>
</div>
<div class="topnav-meta">
<div class="muted">总台管理 / Platform Ops</div>
<div class="group-title">总览</div>
<a href="/admin">总台仪表盘</a>
<details class="nav-group" open>
<summary class="nav-group-title">收费中心</summary>
<a href="/admin/platform-orders" class="nav-item nav-item--sub">平台订单</a>
<a href="/admin/site-subscriptions" class="nav-item nav-item--sub">订阅管理</a>
<a href="/admin/plans" class="nav-item nav-item--sub">套餐管理</a>
</details>
<details class="nav-group" open>
<summary class="nav-group-title">站点治理</summary>
<a href="/admin/merchants" class="nav-item nav-item--sub">站点管理</a>
<a href="/admin/orders" class="nav-item nav-item--sub">订单监控</a>
<a href="/admin/products" class="nav-item nav-item--sub">商品巡检</a>
<a href="/admin/product-categories" class="nav-item nav-item--sub">商品分类</a>
</details>
<details class="nav-group" open>
<summary class="nav-group-title">增长转化</summary>
<a href="/admin/platform-leads" class="nav-item nav-item--sub">开通线索</a>
</details>
<details class="nav-group" open>
<summary class="nav-group-title">系统</summary>
<a href="/admin/settings/system" class="nav-item nav-item--sub">系统配置</a>
</details>
<div class="group-title">外部入口</div>
<a href="/">返回前台</a>
<form method="post" action="/admin/logout" class="logout-form">@csrf <button type="submit">退出登录</button></form>
</div>
</aside>
<main class="content">
<div class="top">