From 340ad6b1095b12d0efd3fe11732a8c0bd611c6ec Mon Sep 17 00:00:00 2001
From: shirainbown <shirainbown@gmail.com>
Date: Fri, 19 Jun 2026 01:12:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AE=BF=E5=AE=A2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E8=AE=A4=E8=AF=81=E7=8A=B6=E6=80=81=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=EF=BC=8C=E5=AE=8C=E5=96=84=E8=AE=BF=E5=AE=A2=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端 /auth/me 未登录时返回 401 而非 200
- 访客只能访问机器列表，其他页面自动重定向
- 侧边栏隐藏非访客菜单，无登录入口提示
- 登录页需手动访问 /login
---
 server/handlers/auth.go           |  2 +-
 web/src/api/index.js              |  2 +-
 web/src/components/MainLayout.vue | 89 +++++++++++--------------------
 web/src/router/index.js           | 40 +++++++++-----
 web/src/views/MachineList.vue     | 59 +++++++++++++++++---
 5 files changed, 113 insertions(+), 79 deletions(-)

diff --git a/server/handlers/auth.go b/server/handlers/auth.go
index 70a103a..dd3536f 100644
--- a/server/handlers/auth.go
+++ b/server/handlers/auth.go
@@ -54,7 +54,7 @@ func (h *AuthHandler) Me(c *gin.Context) {
 	session := sessions.Default(c)
 	user := session.Get(middleware.AdminSessionKey)
 	if user == nil {
-		c.JSON(http.StatusOK, gin.H{"is_admin": false, "ui_refresh_interval": h.Cfg.UIRefreshInterval})
+		c.JSON(http.StatusUnauthorized, gin.H{"is_admin": false, "ui_refresh_interval": h.Cfg.UIRefreshInterval})
 		return
 	}
 	c.JSON(http.StatusOK, gin.H{"is_admin": true, "username": user.(string), "ui_refresh_interval": h.Cfg.UIRefreshInterval})
diff --git a/web/src/api/index.js b/web/src/api/index.js
index 0a84597..0ab617b 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -17,7 +17,7 @@ api.interceptors.response.use(
     const msg = err.response?.data?.error || err.message || '请求失败'
     if (err.response?.status === 401) {
       refreshAuth()
-      window.location.href = '/login'
+      // 不再自动跳转到登录页，只在需要管理员权限时由业务逻辑处理
       return Promise.reject(err)
     }
     ElMessage.error(msg)
diff --git a/web/src/components/MainLayout.vue b/web/src/components/MainLayout.vue
index e27fece..91ebebf 100644
--- a/web/src/components/MainLayout.vue
+++ b/web/src/components/MainLayout.vue
@@ -12,22 +12,33 @@
       </div>
 
       <nav class="nav">
-        <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 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>
       </nav>
 
       <div class="sidebar-footer">
@@ -35,11 +46,6 @@
           <el-icon class="theme-icon"><component :is="isDark ? Sunny : Moon" /></el-icon>
           <span>{{ isDark ? '浅色模式' : '深色模式' }}</span>
         </div>
-        <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">
@@ -48,7 +54,8 @@
           </div>
         </div>
         <div class="footer-actions" v-if="isLoggedIn">
-          <el-button text class="footer-btn" @click="openChangePassword">
+          <!-- 管理员才有修改密码 -->
+          <el-button v-if="isAdmin" text class="footer-btn" @click="openChangePassword">
             <el-icon><Lock /></el-icon>
             <span>修改密码</span>
           </el-button>
@@ -61,10 +68,6 @@
     </aside>
 
     <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>
@@ -131,7 +134,7 @@
 <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, Warning } from '@element-plus/icons-vue'
+import { Odometer, Monitor, Share, Document, UserFilled, SwitchButton, Sunny, Moon, Lock, Key, CircleCheck } from '@element-plus/icons-vue'
 import { getAuth, refreshAuth } from '@/router'
 import { logout as apiLogout, changePassword } from '@/api'
 import { ElMessage } from 'element-plus'
@@ -383,36 +386,6 @@ html.dark .brand-logo {
   background: var(--page-bg);
   transition: background .25s ease;
 }
-.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-inner {
   padding: 10px;
 }
@@ -425,7 +398,5 @@ html.dark .brand-logo {
   .user-info { justify-content: center; padding: 10px; }
   .theme-toggle { justify-content: center; padding: 10px; }
   .main { margin-left: 64px; }
-  .guest-notice span { display: none; }
-  .guest-notice .el-button { display: none; }
 }
 </style>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 93b23b7..49f2955 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -11,14 +11,8 @@ const routes = [
   {
     path: '/',
     component: () => import('@/components/MainLayout.vue'),
+    redirect: '/machines',
     children: [
-      { path: '', redirect: '/dashboard' },
-      {
-        path: 'dashboard',
-        name: 'Dashboard',
-        component: () => import('@/views/Dashboard.vue'),
-        meta: { public: true },
-      },
       {
         path: 'machines',
         name: 'MachineList',
@@ -29,19 +23,25 @@ const routes = [
         path: 'machines/:id',
         name: 'MachineDetail',
         component: () => import('@/views/MachineDetail.vue'),
-        meta: { public: true },
+        meta: { admin: true },
+      },
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: () => import('@/views/Dashboard.vue'),
+        meta: { admin: true },
       },
       {
         path: 'topology',
         name: 'Topology',
         component: () => import('@/views/Topology.vue'),
-        meta: { public: true },
+        meta: { admin: true },
       },
       {
         path: 'logs',
         name: 'Logs',
         component: () => import('@/views/Logs.vue'),
-        meta: { public: true },
+        meta: { admin: true },
       },
     ]
   },
@@ -66,8 +66,24 @@ router.beforeEach(async (to, from, next) => {
     authChecked = true
   }
 
-  if (to.meta.guestOnly && authState.is_logged_in) {
-    return next('/')
+  // 未登录，且不是公开页面也不是登录页 → 强制去登录
+  if (!authState.is_logged_in && !to.meta.public && !to.meta.guestOnly) {
+    return next('/login?redirect=' + encodeURIComponent(to.fullPath))
+  }
+
+  // 已登录访客，访问需要 admin 的页面 → 去机器列表
+  if (authState.is_logged_in && !authState.is_admin && to.meta.admin) {
+    return next('/machines')
+  }
+
+  // 已登录访客，访问登录页 → 去机器列表
+  if (authState.is_logged_in && !authState.is_admin && to.meta.guestOnly) {
+    return next('/machines')
+  }
+
+  // 管理员访问登录页 → 去仪表盘
+  if (authState.is_admin && to.meta.guestOnly) {
+    return next('/dashboard')
   }
 
   next()
diff --git a/web/src/views/MachineList.vue b/web/src/views/MachineList.vue
index c3f870d..dacaf36 100644
--- a/web/src/views/MachineList.vue
+++ b/web/src/views/MachineList.vue
@@ -1,10 +1,16 @@
 <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">
         <el-icon class="search-icon"><Search /></el-icon>
-        <el-input v-model="search" placeholder="搜索主机名或 IP" clearable @change="load" />
+        <el-input v-model="search" placeholder="搜索主机名" clearable @change="load" />
       </div>
       <el-select v-model="osFilter" placeholder="系统类型" clearable @change="load" class="os-select">
         <el-option label="Linux" value="Linux">
@@ -28,7 +34,8 @@
 
     <!-- Cards Grid -->
     <div class="cards-grid" v-if="machines.length">
-      <div v-for="m in machines" :key="m.id" class="server-card"
+      <!-- 管理员卡片：完整信息 + 可点击 -->
+      <div v-if="isAdmin" v-for="m in machines" :key="m.id" class="server-card"
            :class="[{ 'offline-card': !m.is_online }]"
            @click="goDetail(m.id)">
         <div class="card-header">
@@ -49,7 +56,7 @@
             </el-tag>
           </div>
           <div class="meta-row">
-            <span v-if="isAdmin" class="meta-ip">
+            <span class="meta-ip">
               <el-icon :size="10"><Link /></el-icon> {{ m.ip }}
             </span>
             <span class="meta-item">
@@ -59,7 +66,7 @@
             <span v-if="m.uptime" class="meta-uptime">
               <el-icon :size="10"><Timer /></el-icon> {{ m.uptime }}
             </span>
-            <span v-if="isAdmin && m.pve_host_id && m.pve_vmid" class="meta-pve">
+            <span v-if="m.pve_host_id && m.pve_vmid" class="meta-pve">
               <el-tag size="small" :type="m.pve_vm_status === 'running' ? 'success' : 'danger'" effect="light" round class="vm-tag">
                 <el-icon :size="10"><component :is="m.pve_vm_status === 'running' ? VideoPlay : VideoPause" /></el-icon>
                 {{ m.pve_vm_status === 'running' ? 'VM运行中' : m.pve_vm_status === 'stopped' ? 'VM已停止' : 'VM检测中' }}
@@ -113,6 +120,31 @@
           同步于 {{ formatTime(m.ssh_synced_at) }}
         </div>
       </div>
+
+      <!-- 访客卡片：仅主机名 + 状态 + OS，不可点击 -->
+      <div v-if="!isAdmin" v-for="m in machines" :key="m.id" class="server-card guest-card"
+           :class="[{ 'offline-card': !m.is_online }]">
+        <div class="card-header">
+          <div class="title-row">
+            <div class="os-badge" :class="osClass(m.os_type)" :title="m.os_type">
+              <el-icon :size="12">
+                <component :is="osIcon(m.os_type)" />
+              </el-icon>
+              <span>{{ osShort(m.os_type) }}</span>
+            </div>
+            <span class="hostname">{{ m.hostname }}</span>
+            <el-tag :type="m.is_online ? 'success' : 'danger'" size="small" effect="light" round class="status-tag">
+              <el-icon :size="10"><component :is="m.is_online ? CircleCheck : CircleClose" /></el-icon>
+              {{ m.is_online ? '在线' : '离线' }}
+            </el-tag>
+          </div>
+          <div class="meta-row">
+            <span class="meta-item">
+              <el-icon :size="10"><Cpu /></el-icon> {{ m.os_type }}
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <el-empty v-if="!machines.length" description="暂无机器" :image-size="80">
@@ -210,7 +242,7 @@ import {
   Plus, Search, Download, Upload, Check, Platform, Monitor, Apple,
   QuestionFilled, CircleCheck, CircleClose, Service, Link, Cpu, Timer,
   Collection, Histogram, Connection, Clock, VideoPlay, VideoPause, Lock, User, Key,
-  EditPen, Grid, InfoFilled
+  EditPen, Grid, InfoFilled, Warning
 } from '@element-plus/icons-vue'
 import { fetchMachines, createMachine, updateMachine, checkAuth, uiRefreshInterval, exportData, importData, fetchPVEHosts, fetchVMStatus } from '@/api'
 import { getAuth } from '@/router'
@@ -218,7 +250,6 @@ 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('')
@@ -402,6 +433,22 @@ function formatTime(t) {
 </script>
 
 <style scoped>
+.guest-page-notice {
+  padding: 10px 16px;
+  background: rgba(242, 201, 76, 0.12);
+  border: 1px solid rgba(242, 201, 76, 0.3);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #d29922;
+}
+.guest-page-notice .el-icon {
+  font-size: 16px;
+}
+
 .toolbar {
   display: flex;
   align-items: center;