适配新后端认证 修复了身份过期导致无限重定向的bug

.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL=http://localhost:5098
+VITE_API_BASE_URL=http://admin.gitdl.cn:50050

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
+        "@fingerprintjs/fingerprintjs": "^4.5.1",
         "axios": "^1.7.8",
         "element-plus": "^2.9.0",
         "vue": "^3.3.4",
@@ -429,6 +430,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fingerprintjs/fingerprintjs": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.5.1.tgz",
+      "integrity": "sha512-hKJaRoLHNeUUPhb+Md3pTlY/Js2YR4aXjroaDHpxrjoM8kGnEFyZVZxXo6l3gRyKnQN52Uoqsycd3M73eCdMzw==",
+      "dependencies": {
+        "tslib": "^2.4.1"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.8",
       "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
@@ -989,6 +998,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "node_modules/vite": {
       "version": "4.5.5",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.5.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
     "axios": "^1.7.8",
     "element-plus": "^2.9.0",
     "vue": "^3.3.4",

src/App.vue

@@ -20,8 +20,13 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { UserAPI } from '@/api/user'
+import { initFingerprint } from '@/utils/fingerprint'
 
+const router = useRouter()
 const isLoading = ref(false)
 
 const showLoadingMask = () => {
@@ -31,6 +36,50 @@ const showLoadingMask = () => {
 const hideLoadingMask = () => {
   isLoading.value = false
 }
+
+// 检查登录状态
+const checkAuthStatus = async () => {
+  const token = localStorage.getItem('token')
+  const isAuthenticated = localStorage.getItem('isAuthenticated')
+  
+  // 只有当存在token和认证状态时才检查
+  if (token && isAuthenticated) {
+    try {
+      const response = await UserAPI.getUserInfo()
+      if (response.retcode !== 0) {
+        clearAuthData('登录已失效，请重新登录')
+      }
+    } catch (error) {
+      // 如果是401错误，清除认证数据并重定向
+      if (error.response?.status === 401) {
+        clearAuthData('登录已过期，请重新登录')
+      }
+    }
+  }
+}
+
+// 清除认证数据
+const clearAuthData = (message) => {
+  localStorage.removeItem('token')
+  localStorage.removeItem('isAuthenticated')
+  localStorage.removeItem('userRole')
+  localStorage.removeItem('userInfo')
+  
+  // 如果当前不在访客页面，显示提示并重定向到登录页
+  if (!router.currentRoute.value.path.startsWith('/visitor')) {
+    if (message) {
+      ElMessage.warning(message)
+    }
+    router.push('/login')
+  }
+}
+
+onMounted(async () => {
+  // 初始化指纹
+  await initFingerprint()
+  // 检查登录状态
+  await checkAuthStatus()
+})
 </script>
 
 <style>

src/api/request.js

@@ -1,8 +1,11 @@
 import axios from 'axios'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import router from '../router'
 import { API_BASE_URL } from '../config/api.config'
 
+// 创建一个全局的指纹变量
+let globalFingerprint = null
+
 const request = axios.create({
   baseURL: API_BASE_URL,
   timeout: 10000,
@@ -14,6 +17,11 @@ const request = axios.create({
 // 请求拦截器
 request.interceptors.request.use(
   config => {
+    // 如果有全局指纹，直接使用
+    if (globalFingerprint) {
+      config.headers['X-Device-Fingerprint'] = globalFingerprint
+    }
+
     // 如果是访客页面的请求，不需要添加 token
     if (!config.url.startsWith('/visitor')) {
       const token = localStorage.getItem('token')
@@ -35,6 +43,14 @@ request.interceptors.response.use(
     const { data } = response
     console.log('Response Data:', data)
     
+    // 登录接口特殊处理
+    if (response.config.url === '/user/login') {
+      if (data.retcode === 0) {
+        localStorage.setItem('isAuthenticated', 'true')
+      }
+      return data
+    }
+    
     if (data.retcode === 0) {
       return data
     }
@@ -49,10 +65,14 @@ request.interceptors.response.use(
     if (error.response) {
       switch (error.response.status) {
         case 401:
-          // 只有非访客页面才需要清除登录状态并跳转
+          // 清除所有认证相关的存储
+          localStorage.removeItem('token')
+          localStorage.removeItem('isAuthenticated')
+          localStorage.removeItem('userRole')
+          localStorage.removeItem('userInfo')
+          
+          // 只有非访客页面才需要跳转
           if (!router.currentRoute.value.path.startsWith('/visitor')) {
-            localStorage.removeItem('token')
-            localStorage.removeItem('userRole')
             router.push('/login')
           }
           break
@@ -71,4 +91,9 @@ request.interceptors.response.use(
   }
 )
 
+// 导出一个设置指纹的方法
+export const setGlobalFingerprint = (fingerprint) => {
+  globalFingerprint = fingerprint
+}
+
 export default request 

src/api/task.js

@@ -91,5 +91,26 @@ export const TaskAPI = {
     return request.post('/AddOfflineTask', null, {
       params: { url }
     })
+  },
+
+  /**
+   * 获取系统日志
+   * @param {Object} params 查询参数
+   * @param {number} params.page 页码
+   * @param {number} params.pageSize 每页数量
+   * @param {string} [params.level] 日志级别
+   * @param {string} [params.keyword] 搜索关键词
+   * @param {string} [params.startTime] 开始时间
+   * @param {string} [params.endTime] 结束时间
+   */
+  getSystemLogs(params) {
+    return request.get('/Management/GetSystemLogs', { params })
+  },
+
+  /**
+   * 获取数据库连接池信息
+   */
+  getConnectionPoolInfo() {
+    return request.get('/Management/GetConnectionPoolInfo')
   }
 } 

src/config/api.config.js

@@ -1,4 +1,4 @@
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000'
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://admin.gitdl.cn:50050'
 
 export const API_ENDPOINTS = {
   TASK: {
@@ -7,4 +7,4 @@ export const API_ENDPOINTS = {
   }
 } 
 
-export const ADMIN_ROUTE_BASE = "/admin"
+export const ADMIN_ROUTE_BASE = "/admin"

src/layout/Layout.vue

@@ -42,6 +42,10 @@
           <el-icon><List /></el-icon>
           <span>事件记录</span>
         </el-menu-item>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/debug`" v-if="hasPermission(UserMask.SuperAdmin, userInfo?.mask)">
+          <el-icon><Monitor /></el-icon>
+          <span>调试信息</span>
+        </el-menu-item>
       </el-menu>
     </el-aside>
     
@@ -85,7 +89,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { DataLine, List, Expand, Fold, Setting, User, SwitchButton } from '@element-plus/icons-vue'
+import { DataLine, List, Expand, Fold, Setting, User, SwitchButton, Monitor } from '@element-plus/icons-vue'
 import { ADMIN_ROUTE_BASE } from '@/config/api.config'
 import { UserMask, hasPermission } from '@/utils/permission'
 

src/main.js

@@ -2,8 +2,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { initFingerprint } from '@/utils/fingerprint'
+import { setGlobalFingerprint } from '@/api/request'
 
 const app = createApp(App)
 
@@ -12,6 +15,20 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+// 配置 Element Plus 使用中文
+app.use(ElementPlus, {
+  locale: zhCn,
+})
+
 app.use(router)
-app.use(ElementPlus)
+
-app.mount('#app') 
+// 初始化指纹后再挂载应用
+initFingerprint().then(fingerprint => {
+  if (fingerprint) {
+    setGlobalFingerprint(fingerprint)
+  }
+  app.mount('#app')
+}).catch(() => {
+  // 即使获取指纹失败也继续挂载应用
+  app.mount('#app')
+}) 

src/router/index.js

@@ -68,6 +68,14 @@ const routes = [
         name: 'Events',
         component: () => import('../views/UserEvents.vue'),
         meta: { roles: ['admin', 'guest'] }
+      },
+      {
+        path: 'debug',
+        name: 'Debug',
+        component: () => import('../views/DebugView.vue'),
+        meta: { 
+          minMask: UserMask.SuperAdmin  // 仅超级管理员可访问
+        }
       }
     ]
   },

src/utils/fingerprint.js

@@ -0,0 +1,29 @@
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+
+let cachedFingerprint = null
+let fpPromise = null
+
+// 初始化函数
+export async function initFingerprint() {
+  if (!fpPromise) {
+    fpPromise = FingerprintJS.load()
+  }
+  
+  try {
+    const fp = await fpPromise
+    const result = await fp.get()
+    cachedFingerprint = result.visitorId
+    return cachedFingerprint
+  } catch (error) {
+    console.error('初始化浏览器指纹失败:', error)
+    return null
+  }
+}
+
+export async function getFingerprint() {
+  if (cachedFingerprint) {
+    return cachedFingerprint
+  }
+
+  return initFingerprint()
+}

src/views/ConfigView.vue

@@ -105,6 +105,9 @@
             <el-descriptions-item label="密码">
               ********
             </el-descriptions-item>
+            <el-descriptions-item label="连接池最大连接数">
+              {{ config.Database.MaxConnectionPoolSize }}
+            </el-descriptions-item>
             <el-descriptions-item label="数据库" :span="isMobile ? 1 : 2">
               <div class="database-tags">
                 <el-tag 

src/views/DebugView.vue

@@ -0,0 +1,685 @@
+<template>
+  <div class="debug-view">
+    <el-card class="debug-card">
+      <el-tabs v-model="activeTab">
+        <!-- 调试信息选项卡 -->
+        <el-tab-pane label="调试信息" name="debug">
+          <div class="debug-content">
+            <div class="debug-header">
+              <h3>系统调试信息</h3>
+              <el-button type="primary" @click="refreshDebugInfo">
+                <el-icon><Refresh /></el-icon>刷新
+              </el-button>
+            </div>
+            
+            <el-descriptions :column="isMobile ? 1 : 2" border>
+              <el-descriptions-item label="总连接数">
+                {{ poolInfo.totalConnections }}
+              </el-descriptions-item>
+              <el-descriptions-item label="活跃连接">
+                <el-tag :type="getConnectionTagType(poolInfo.activeConnections)">
+                  {{ poolInfo.activeConnections }}
+                </el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="空闲连接">
+                {{ poolInfo.sleepingConnections }}
+              </el-descriptions-item>
+              <el-descriptions-item label="最大连接数">
+                {{ poolInfo.maxPoolSize }}
+              </el-descriptions-item>
+            </el-descriptions>
+
+            <!-- 添加连接详情表格 -->
+            <div class="connection-details">
+              <div class="section-title">连接详情</div>
+              <el-table
+                :data="poolInfo.connections"
+                style="width: 100%"
+                border
+                size="small">
+                <el-table-column prop="id" label="ID" width="80" />
+                <el-table-column prop="user" label="用户" width="120" />
+                <el-table-column prop="host" label="主机" width="150" show-overflow-tooltip />
+                <el-table-column prop="db" label="数据库" width="120" />
+                <el-table-column prop="command" label="命令" width="100" />
+                <el-table-column prop="time" label="耗时(s)" width="100" />
+                <el-table-column prop="state" label="状态" width="120">
+                  <template #default="{ row }">
+                    <el-tag 
+                      v-if="row.state" 
+                      :type="getStateTagType(row.state)" 
+                      size="small">
+                      {{ row.state }}
+                    </el-tag>
+                    <span v-else class="no-state">-</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="info" label="SQL" min-width="300" show-overflow-tooltip />
+              </el-table>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <!-- 系统日志选项卡 -->
+        <el-tab-pane label="系统日志" name="logs">
+          <div class="logs-content">
+            <div class="filter-section">
+              <el-form :inline="!isMobile" @submit.prevent>
+                <el-form-item label="日志级别">
+                  <el-select 
+                    v-model="filters.level" 
+                    clearable 
+                    placeholder="选择日志级别"
+                    popper-class="log-level-dropdown">
+                    <el-option 
+                      v-for="(label, level) in logLevels" 
+                      :key="level"
+                      :label="label.text" 
+                      :value="level">
+                      <el-tag 
+                        :type="label.type" 
+                        size="small" 
+                        class="level-tag">
+                        {{ label.text }}
+                      </el-tag>
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="时间范围">
+                  <el-date-picker
+                    v-model="filters.timeRange"
+                    type="datetimerange"
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    value-format="YYYY-MM-DDTHH:mm:ss"
+                    :shortcuts="dateShortcuts" />
+                </el-form-item>
+
+                <el-form-item label="关键词">
+                  <el-input
+                    v-model="filters.keyword"
+                    placeholder="搜索日志内容"
+                    clearable
+                    @keyup.enter="handleSearch" />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="handleSearch">
+                    <el-icon><Search /></el-icon>搜索
+                  </el-button>
+                  <el-button @click="resetFilters">
+                    <el-icon><RefreshLeft /></el-icon>重置
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+
+            <el-table
+              v-loading="loading"
+              :data="logs"
+              style="width: 100%"
+              border>
+              <el-table-column type="expand">
+                <template #default="{ row }">
+                  <div class="log-details">
+                    <el-descriptions :column="1" border>
+                      <el-descriptions-item v-if="row.logId" label="日志ID">
+                        {{ row.logId }}
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="row.properties" label="属性信息">
+                        <div class="properties-info">
+                          <template v-for="(value, key) in parseProperties(row.properties)" :key="key">
+                            <div class="property-item">
+                              <span class="property-key">{{ formatPropertyKey(key) }}:</span>
+                              <span class="property-value">{{ formatPropertyValue(value) }}</span>
+                            </div>
+                          </template>
+                        </div>
+                      </el-descriptions-item>
+                      <el-descriptions-item v-if="row.exception" label="异常信息">
+                        <div class="exception-info">
+                          <el-button 
+                            type="danger" 
+                            link
+                            @click="showExceptionDialog(row.exception)">
+                            查看完整异常信息
+                          </el-button>
+                          <div class="exception-preview">
+                            {{ getExceptionPreview(row.exception) }}
+                          </div>
+                        </div>
+                      </el-descriptions-item>
+                    </el-descriptions>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="timestamp"
+                label="时间"
+                width="180">
+                <template #default="{ row }">
+                  {{ formatDateTime(row.timestamp) }}
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="level"
+                label="级别"
+                width="100">
+                <template #default="{ row }">
+                  <el-tag :type="getLogLevelType(row.level)">
+                    {{ row.level }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="message"
+                label="日志内容"
+                min-width="300"
+                show-overflow-tooltip>
+                <template #default="{ row }">
+                  <div class="log-message" :class="{ 'error-message': row.level === 'Error' }">
+                    {{ row.message }}
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 异常信息对话框 -->
+            <el-dialog
+              v-model="exceptionDialogVisible"
+              title="异常详细信息"
+              width="80%"
+              class="exception-dialog">
+              <pre class="exception-content">{{ currentException }}</pre>
+            </el-dialog>
+
+            <div class="pagination-container">
+              <el-pagination
+                v-model:current-page="currentPage"
+                v-model:page-size="pageSize"
+                :page-sizes="[10, 20, 50, 100]"
+                :total="total"
+                layout="total, sizes, prev, pager, next, jumper"
+                @size-change="handleSizeChange"
+                @current-change="handlePageChange" />
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { 
+  Monitor, Refresh, Search, RefreshLeft,
+  WarningFilled, CircleCheckFilled, InfoFilled
+} from '@element-plus/icons-vue'
+import { TaskAPI } from '../api/task'
+
+const activeTab = ref('logs')
+const loading = ref(false)
+const logs = ref([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
+
+// 过滤条件
+const filters = ref({
+  level: '',
+  timeRange: null,
+  keyword: ''
+})
+
+// 日期快捷选项
+const dateShortcuts = [
+  {
+    text: '最近一小时',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000)
+      return [start, end]
+    }
+  },
+  {
+    text: '今天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近24小时',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近3天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
+      return [start, end]
+    }
+  }
+]
+
+// 日志等级配置
+const logLevels = {
+  'Verbose': { text: '详细', type: 'info' },
+  'Debug': { text: '调试', type: 'info' },
+  'Information': { text: '信息', type: 'success' },
+  'Warning': { text: '警告', type: 'warning' },
+  'Error': { text: '错误', type: 'danger' },
+  'Fatal': { text: '致命', type: 'danger' }
+}
+
+// 获取日志级别样式
+const getLogLevelType = (level) => {
+  return logLevels[level]?.type || ''
+}
+
+// 格式化时间
+const formatDateTime = (dateStr) => {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+// 获取日志列表
+const fetchLogs = async () => {
+  loading.value = true
+  try {
+    const params = {
+      page: currentPage.value,
+      pageSize: pageSize.value
+    }
+
+    // 添加过滤条件
+    if (filters.value.level) {
+      params.level = filters.value.level
+    }
+    if (filters.value.keyword) {
+      params.keyword = filters.value.keyword
+    }
+    if (filters.value.timeRange) {
+      params.startTime = filters.value.timeRange[0]
+      params.endTime = filters.value.timeRange[1]
+    }
+
+    const response = await TaskAPI.getSystemLogs(params)
+    if (response.retcode === 0) {
+      logs.value = response.data.data || []
+      total.value = response.data.total || 0
+    }
+  } catch (error) {
+    console.error('获取日志失败:', error)
+    ElMessage.error('获取日志失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  fetchLogs()
+}
+
+// 重置过滤条件
+const resetFilters = () => {
+  filters.value = {
+    level: '',
+    timeRange: null,
+    keyword: ''
+  }
+  handleSearch()
+}
+
+// 处理页码变化
+const handlePageChange = (page) => {
+  currentPage.value = page
+  fetchLogs()
+}
+
+// 处理每页数量变化
+const handleSizeChange = (size) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchLogs()
+}
+
+// 添加移动检测
+const isMobile = computed(() => {
+  return window.innerWidth <= 768
+})
+
+// 添加连接池信息状态
+const poolInfo = ref({
+  totalConnections: 0,
+  activeConnections: 0,
+  sleepingConnections: 0,
+  maxPoolSize: 0,
+  connections: []
+})
+
+// 获取连接数量标签类型
+const getConnectionTagType = (count) => {
+  if (count === 0) return 'info'
+  if (count < 10) return 'success'
+  if (count < 50) return 'warning'
+  return 'danger'
+}
+
+// 获取连接状态标签类型
+const getStateTagType = (state) => {
+  switch (state?.toLowerCase()) {
+    case 'executing':
+      return 'primary'
+    case 'sleeping':
+      return 'info'
+    case 'waiting':
+      return 'warning'
+    default:
+      return ''
+  }
+}
+
+// 刷新调试信息
+const refreshDebugInfo = async () => {
+  try {
+    const response = await TaskAPI.getConnectionPoolInfo()
+    if (response.retcode === 0) {
+      poolInfo.value = response.data
+    }
+  } catch (error) {
+    console.error('获取连接池信息失败:', error)
+    ElMessage.error('获取连接池信息失败')
+  }
+}
+
+// 在组件挂载时获取调试信息
+onMounted(() => {
+  fetchLogs()
+  refreshDebugInfo()
+})
+
+const exceptionDialogVisible = ref(false)
+const currentException = ref('')
+
+// 解析属性信息
+const parseProperties = (propertiesStr) => {
+  try {
+    return JSON.parse(propertiesStr)
+  } catch {
+    return {}
+  }
+}
+
+// 格式化属性键名
+const formatPropertyKey = (key) => {
+  return key
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, str => str.toUpperCase())
+    .trim()
+}
+
+// 格式化属性值
+const formatPropertyValue = (value) => {
+  try {
+    // 处理双重转义的JSON字符串
+    return JSON.parse(value)
+  } catch {
+    return value
+  }
+}
+
+// 获取异常信息预览
+const getExceptionPreview = (exception) => {
+  if (!exception) return ''
+  const firstLine = exception.split('\n')[0]
+  return firstLine.length > 100 ? firstLine.slice(0, 100) + '...' : firstLine
+}
+
+// 显示完整异常信息
+const showExceptionDialog = (exception) => {
+  currentException.value = exception
+  exceptionDialogVisible.value = true
+}
+</script>
+
+<style scoped>
+.debug-view {
+  padding: 20px;
+}
+
+.debug-card {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.debug-content,
+.logs-content {
+  margin-top: 20px;
+}
+
+.debug-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.filter-section {
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 10;
+}
+
+.log-message {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.error-message {
+  color: #f56c6c;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.connection-details {
+  margin-top: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 16px 0;
+  color: #606266;
+}
+
+.log-details {
+  padding: 20px;
+  background-color: #fafafa;
+}
+
+.properties-info {
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.property-item {
+  margin: 4px 0;
+  line-height: 1.5;
+}
+
+.property-key {
+  color: #409EFF;
+  margin-right: 8px;
+}
+
+.property-value {
+  color: #606266;
+}
+
+.exception-info {
+  margin-top: 8px;
+}
+
+.exception-preview {
+  margin-top: 8px;
+  font-family: monospace;
+  color: #F56C6C;
+  background-color: #FEF0F0;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.exception-content {
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 16px;
+  background-color: #FEF0F0;
+  border-radius: 4px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .debug-view {
+    padding: 10px;
+  }
+
+  .filter-section {
+    :deep(.el-form-item) {
+      margin-bottom: 10px;
+      width: 100%;
+    }
+
+    :deep(.el-form-item__content) {
+      width: 100%;
+    }
+
+    :deep(.el-input),
+    :deep(.el-select),
+    :deep(.el-date-editor) {
+      width: 100% !important;
+    }
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+  }
+
+  :deep(.el-pagination) {
+    justify-content: center;
+    flex-wrap: wrap;
+    
+    .el-pagination__total,
+    .el-pagination__sizes,
+    .el-pagination__jump {
+      display: none;
+    }
+  }
+
+  .connection-details {
+    margin-top: 16px;
+  }
+
+  .section-title {
+    font-size: 14px;
+    margin: 12px 0;
+  }
+
+  .log-details {
+    padding: 10px;
+  }
+
+  .exception-dialog {
+    :deep(.el-dialog) {
+      width: 95% !important;
+      margin: 0 auto;
+    }
+  }
+}
+
+/* 确保下拉菜单在最上层 */
+:deep(.el-select-dropdown) {
+  z-index: 3000 !important;
+}
+
+:deep(.el-select) {
+  z-index: 11;
+  min-width: 120px;  /* 设置最小宽度 */
+  width: auto !important;  /* 允许自动扩展 */
+}
+
+:deep(.el-date-editor) {
+  z-index: 11;
+}
+
+/* 调整表格层级 */
+:deep(.el-table) {
+  position: relative;
+  z-index: 1;
+}
+
+/* 自定义下拉菜单的宽度 */
+:global(.log-level-dropdown) {
+  min-width: 120px !important;  /* 设置最小宽度 */
+  width: auto !important;  /* 允许自动扩展 */
+}
+
+/* 优化下拉选项的样式 */
+:deep(.el-select) {
+  min-width: 120px;
+}
+
+:global(.log-level-dropdown) {
+  min-width: 120px !important;
+}
+
+:deep(.level-tag) {
+  width: 100%;
+  text-align: center;
+}
+
+/* 调整选项的内边距 */
+:deep(.el-select-dropdown__item) {
+  padding: 0 12px;
+  height: 32px;
+  line-height: 32px;
+}
+
+/* 选中状态的背景色 */
+:deep(.el-select-dropdown__item.selected) {
+  background-color: #f5f7fa;
+}
+
+.no-state {
+  color: #909399;
+  font-size: 12px;
+}
+</style> 

src/views/LoginView.vue

@@ -95,13 +95,12 @@ const handleLogin = async () => {
         })
         if (response.retcode === 0) {
           localStorage.setItem('token', JSON.stringify(response.data))
-          localStorage.setItem('isAuthenticated', 'true')
+          
-          localStorage.setItem('userRole', 'admin')
-
           // 获取用户信息
           const userInfoResponse = await UserAPI.getUserInfo()
           if (userInfoResponse.retcode === 0) {
             localStorage.setItem('userInfo', JSON.stringify(userInfoResponse.data))
+            localStorage.setItem('userRole', 'admin')  // 设置角色
             
             // 根据用户权限决定跳转页面
             if (userInfoResponse.data.mask >= UserMask.Admin) {
@@ -111,12 +110,21 @@ const handleLogin = async () => {
             }
             
             ElMessage.success('登录成功')
+          } else {
+            // 获取用户信息失败，清除token
+            localStorage.removeItem('token')
+            ElMessage.error('获取用户信息失败')
           }
         } else {
           ElMessage.error(response.message || '登录失败')
         }
       } catch (error) {
         console.error('登录失败:', error)
+        // 确保清除所有认证相关的存储
+        localStorage.removeItem('token')
+        localStorage.removeItem('isAuthenticated')
+        localStorage.removeItem('userRole')
+        localStorage.removeItem('userInfo')
         ElMessage.error('登录失败，请重试')
       } finally {
         loading.value = false