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

- 路由权限放宽：拓扑图、操作日志对访客开放
- 访客模式提示 UI：横幅 + 侧边栏提示
- Logo 使用 logo.svg 替代 Element Plus 图标
- 访客可点击进入机器详情页
- IP 地址信息对访客开放

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>

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() {

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)

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('')

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