feat: 访客模式极简界面,隐藏所有导航和登录入口

- 访客:顶部标题栏 + 深色模式图标,无侧边栏导航
- 访客:只能查看机器列表、搜索、筛选,无任何操作按钮
- 访客:无登录提示,无登录入口
- 管理员:完整侧边栏 + 操作按钮
- 登录页需手动访问 /login
This commit is contained in:
shirainbown
2026-06-19 01:24:04 +08:00
parent 340ad6b109
commit 9eae8986e3
2 changed files with 75 additions and 36 deletions

View File

@@ -1,6 +1,7 @@
<template>
<div class="layout">
<aside class="sidebar">
<!-- 管理员侧边栏 -->
<aside class="sidebar" v-if="isAdmin">
<div class="brand">
<div class="brand-logo">
<img src="/logo.svg" alt="LAN Manager" style="width:22px;height:22px;" />
@@ -12,33 +13,22 @@
</div>
<nav class="nav">
<!-- 管理员全部导航 -->
<template v-if="isAdmin">
<router-link to="/dashboard" class="nav-item" active-class="active">
<el-icon><Odometer /></el-icon>
<span>仪表盘</span>
</router-link>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
<router-link to="/topology" class="nav-item" active-class="active">
<el-icon><Share /></el-icon>
<span>拓扑图</span>
</router-link>
<router-link to="/logs" class="nav-item" active-class="active">
<el-icon><Document /></el-icon>
<span>操作日志</span>
</router-link>
</template>
<!-- 访客只能看到机器列表 -->
<template v-else>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
</template>
<router-link to="/dashboard" class="nav-item" active-class="active">
<el-icon><Odometer /></el-icon>
<span>仪表盘</span>
</router-link>
<router-link to="/machines" class="nav-item" active-class="active">
<el-icon><Monitor /></el-icon>
<span>机器列表</span>
</router-link>
<router-link to="/topology" class="nav-item" active-class="active">
<el-icon><Share /></el-icon>
<span>拓扑图</span>
</router-link>
<router-link to="/logs" class="nav-item" active-class="active">
<el-icon><Document /></el-icon>
<span>操作日志</span>
</router-link>
</nav>
<div class="sidebar-footer">
@@ -54,7 +44,6 @@
</div>
</div>
<div class="footer-actions" v-if="isLoggedIn">
<!-- 管理员才有修改密码 -->
<el-button v-if="isAdmin" text class="footer-btn" @click="openChangePassword">
<el-icon><Lock /></el-icon>
<span>修改密码</span>
@@ -67,7 +56,18 @@
</div>
</aside>
<main class="main">
<!-- 访客顶部极简标题栏 -->
<header class="guest-header" v-if="!isAdmin">
<div class="guest-brand">
<img src="/logo.svg" alt="LAN Manager" style="width:22px;height:22px;" />
<span>LAN Manager</span>
</div>
<div class="guest-theme-toggle" @click="toggleTheme">
<el-icon><component :is="isDark ? Sunny : Moon" /></el-icon>
</div>
</header>
<main class="main" :class="{ 'guest-main': !isAdmin }">
<div class="main-inner">
<router-view />
</div>
@@ -390,6 +390,50 @@ html.dark .brand-logo {
padding: 10px;
}
.guest-main {
margin-left: 0;
padding-top: 48px;
}
.guest-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background: var(--sidebar-bg);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
z-index: 100;
}
.guest-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
}
.guest-theme-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--card-bg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text);
transition: all .2s ease;
}
.guest-theme-toggle:hover {
background: var(--hover-bg);
}
@media (max-width: 768px) {
.sidebar { width: 64px; }
.brand-text, .nav-item span, .user-meta, .footer-btn span, .theme-toggle span { display: none; }
@@ -398,5 +442,6 @@ html.dark .brand-logo {
.user-info { justify-content: center; padding: 10px; }
.theme-toggle { justify-content: center; padding: 10px; }
.main { margin-left: 64px; }
.guest-main { margin-left: 0; }
}
</style>

View File

@@ -1,11 +1,5 @@
<template>
<div class="page">
<!-- 访客提示 -->
<div v-if="!isAdmin" class="guest-page-notice">
<el-icon><Warning /></el-icon>
<span>当前为只读模式</span>
</div>
<!-- Toolbar -->
<div class="toolbar">
<div class="search-wrap">