feat: 全面开放访客浏览模式，访客可查看拓扑图/日志/详情页

- 路由权限放宽：拓扑图、操作日志对访客开放 - 访客模式提示 UI：横幅 + 侧边栏提示 - Logo 使用 logo.svg 替代 Element Plus 图标 - 访客可点击进入机器详情页 - IP 地址信息对访客开放
2026-06-19 00:46:31 +08:00
parent e31b6b21f1
commit 8d6f831d22
5 changed files with 65 additions and 30 deletions
--- a/web/src/components/MainLayout.vue
+++ b/web/src/components/MainLayout.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="layout">
-    <aside v-if="isAdmin" class="sidebar">
+    <aside class="sidebar">
      <div class="brand">
        <div class="brand-logo">
-          <el-icon><Connection /></el-icon>
+          <img src="/logo.svg" alt="LAN Manager" style="width:22px;height:22px;" />
        </div>
        <div class="brand-text">
          <div class="brand-name">LAN Manager</div>
@@ -20,11 +20,11 @@
          <el-icon><Monitor /></el-icon>
          <span>机器列表</span>
        </router-link>
-        <router-link v-if="isAdmin" to="/topology" class="nav-item" active-class="active">
+        <router-link to="/topology" class="nav-item" active-class="active">
          <el-icon><Share /></el-icon>
          <span>拓扑图</span>
        </router-link>
-        <router-link v-if="isAdmin" to="/logs" class="nav-item" active-class="active">
+        <router-link to="/logs" class="nav-item" active-class="active">
          <el-icon><Document /></el-icon>
          <span>操作日志</span>
        </router-link>
@@ -35,14 +35,19 @@
          <el-icon class="theme-icon"><component :is="isDark ? Sunny : Moon" /></el-icon>
          <span>{{ isDark ? '浅色模式' : '深色模式' }}</span>
        </div>
-        <div class="user-info">
+        <div v-if="!isLoggedIn" class="guest-notice">
+          <el-icon><Warning /></el-icon>
+          <span>访客浏览，仅查看</span>
+          <el-button text size="small" type="primary" @click="router.push('/login')">登录</el-button>
+        </div>
+        <div class="user-info" v-if="isLoggedIn">
          <el-icon class="user-icon"><UserFilled /></el-icon>
          <div class="user-meta">
            <span class="user-name">{{ isAdmin ? '管理员' : '访客' }}</span>
            <span class="user-role">{{ isAdmin ? 'Admin' : 'Guest' }}</span>
          </div>
        </div>
-        <div class="footer-actions">
+        <div class="footer-actions" v-if="isLoggedIn">
          <el-button text class="footer-btn" @click="openChangePassword">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
@@ -55,7 +60,11 @@
      </div>
    </aside>

-    <main class="main" :class="{ 'no-sidebar': !isAdmin }">
+    <main class="main">
+      <div class="guest-banner" v-if="!isLoggedIn">
+        <el-icon><Warning /></el-icon>
+        <span>您当前以访客身份浏览，所有数据为只读展示，如需操作请<el-button text type="primary" size="small" @click="router.push('/login')">登录</el-button></span>
+      </div>
      <div class="main-inner">
        <router-view />
      </div>
@@ -122,13 +131,14 @@
 <script setup>
 import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Odometer, Monitor, Share, Document, UserFilled, SwitchButton, Sunny, Moon, Lock, Key, CircleCheck, Connection } from '@element-plus/icons-vue'
+import { Odometer, Monitor, Share, Document, UserFilled, SwitchButton, Sunny, Moon, Lock, Key, CircleCheck, Connection, Warning } from '@element-plus/icons-vue'
 import { getAuth, refreshAuth } from '@/router'
 import { logout as apiLogout, changePassword } from '@/api'
 import { ElMessage } from 'element-plus'

 const router = useRouter()
 const isAdmin = computed(() => getAuth().is_admin)
+const isLoggedIn = computed(() => getAuth().is_logged_in)
 const isDark = ref(false)

 onMounted(() => {
@@ -373,12 +383,38 @@ html.dark .brand-logo {
  background: var(--page-bg);
  transition: background .25s ease;
 }
-.main-inner {
-  padding: 10px;
+.guest-banner {
+  padding: 10px 16px;
+  background: rgba(242, 201, 76, 0.12);
+  border: 1px solid rgba(242, 201, 76, 0.3);
+  border-radius: 8px;
+  margin: 10px 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #d29922;
+}
+.guest-banner .el-icon {
+  font-size: 16px;
+}
+.guest-notice {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  background: rgba(242, 201, 76, 0.10);
+  border: 1px solid rgba(242, 201, 76, 0.2);
+  font-size: 12px;
+  color: #d29922;
+}
+.guest-notice .el-icon {
+  font-size: 14px;
 }

-.main.no-sidebar {
-  margin-left: 0;
+.main-inner {
+  padding: 10px;
 }

@media (max-width: 768px) {
@@ -389,6 +425,7 @@ html.dark .brand-logo {
  .user-info { justify-content: center; padding: 10px; }
  .theme-toggle { justify-content: center; padding: 10px; }
  .main { margin-left: 64px; }
-  .main.no-sidebar { margin-left: 0; }
+  .guest-notice span { display: none; }
+  .guest-notice .el-button { display: none; }
 }
 </style>
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -35,13 +35,13 @@ const routes = [
        path: 'topology',
        name: 'Topology',
        component: () => import('@/views/Topology.vue'),
-        meta: { admin: true },
+        meta: { public: true },
      },
      {
        path: 'logs',
        name: 'Logs',
        component: () => import('@/views/Logs.vue'),
-        meta: { admin: true },
+        meta: { public: true },
      },
    ]
  },
@@ -53,38 +53,33 @@ const router = createRouter({
 })

 let authChecked = false
-let authState = { is_admin: false }
+let authState = { is_admin: false, is_logged_in: false }

 router.beforeEach(async (to, from, next) => {
  if (!authChecked) {
    try {
      const { data } = await checkAuth()
-      authState = data
+      authState = { ...data, is_logged_in: true }
    } catch (e) {
-      authState = { is_admin: false }
+      authState = { is_admin: false, is_logged_in: false }
    }
    authChecked = true
  }

-  if (to.name === 'MachineDetail' && !authState.is_admin) {
-    return next('/machines')
-  }
-
-  if (to.meta.admin && !authState.is_admin) {
-    return next('/login?redirect=' + encodeURIComponent(to.fullPath))
-  }
-  if (to.meta.guestOnly && authState.is_admin) {
+  if (to.meta.guestOnly && authState.is_logged_in) {
    return next('/')
  }
+
  next()
 })

 export function refreshAuth() {
  authChecked = false
+  authState = { is_admin: false, is_logged_in: false }
 }

 export function setAuth(data) {
-  authState = data
+  authState = { ...data, is_logged_in: true }
 }

 export function getAuth() {
--- a/web/src/views/MachineDetail.vue
+++ b/web/src/views/MachineDetail.vue
@@ -15,7 +15,7 @@
            </el-tag>
          </div>
          <div class="host-subtitle">
-            <span v-if="isAdmin"><el-icon :size="12"><Link /></el-icon> {{ machine.ip }}</span>
+            <span><el-icon :size="12"><Link /></el-icon> {{ machine.ip }}</span>
            <span><el-icon :size="12"><Cpu /></el-icon> {{ machine.os_type }}</span>
            <span v-if="machine.os_version">{{ machine.os_version }}</span>
          </div>
@@ -378,6 +378,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 const route = useRoute()
 const router = useRouter()
 const isAdmin = getAuth().is_admin
+const isLoggedIn = getAuth().is_logged_in
 const machineId = route.params.id

 const machine = ref(null)
--- a/web/src/views/MachineList.vue
+++ b/web/src/views/MachineList.vue
@@ -29,8 +29,8 @@
    <!-- Cards Grid -->
    <div class="cards-grid" v-if="machines.length">
      <div v-for="m in machines" :key="m.id" class="server-card"
-           :class="[{ 'guest-card': !isAdmin, 'offline-card': !m.is_online }]"
-           @click="isAdmin && goDetail(m.id)">
+           :class="[{ 'offline-card': !m.is_online }]"
+           @click="goDetail(m.id)">
        <div class="card-header">
          <div class="title-row">
            <div class="os-badge" :class="osClass(m.os_type)" :title="m.os_type">
@@ -218,6 +218,7 @@ import { ElMessage } from 'element-plus'

 const router = useRouter()
 const isAdmin = getAuth().is_admin
+const isLoggedIn = getAuth().is_logged_in
 const machines = ref([])
 const pveHosts = ref([])
 const search = ref('')
--- a/web/src/views/Topology.vue
+++ b/web/src/views/Topology.vue
@@ -133,6 +133,7 @@ import { getAuth } from '@/router'

 const router = useRouter()
 const isAdmin = getAuth().is_admin
+const isLoggedIn = getAuth().is_logged_in
 let graph = null
 let observer = null