feat: 访客模式极简界面,隐藏所有导航和登录入口
- 访客:顶部标题栏 + 深色模式图标,无侧边栏导航 - 访客:只能查看机器列表、搜索、筛选,无任何操作按钮 - 访客:无登录提示,无登录入口 - 管理员:完整侧边栏 + 操作按钮 - 登录页需手动访问 /login
This commit is contained in:
@@ -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,8 +13,6 @@
|
||||
</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>
|
||||
@@ -30,15 +29,6 @@
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user