支持自定义管理员路由 修复任务详细信息对话框按钮不对齐 优化手机端系统配置页面显示效果

src/config/api.config.js

@@ -6,3 +6,5 @@ export const API_ENDPOINTS = {
     PROCESS: (id) => `/Management/${id}/process`,
   }
 } 
+
+export const ADMIN_ROUTE_BASE = "/admin"

src/layout/Layout.vue

@@ -13,26 +13,26 @@
         text-color="rgba(255,255,255,0.65)"
         active-text-color="#fff"
         :collapse="isCollapse">
-        <el-menu-item index="/dashboard">
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`">
           <el-icon><DataLine /></el-icon>
           <span>概览面板</span>
         </el-menu-item>
         <template v-if="userRole === 'admin'">
-          <el-menu-item index="/tasks">
+          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`">
             <el-icon><List /></el-icon>
             <span>任务管理</span>
           </el-menu-item>
-          <el-menu-item index="/config">
+          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`">
             <el-icon><Setting /></el-icon>
             <span>系统配置</span>
           </el-menu-item>
           <template v-if="userInfo.mask === 2">
-            <el-menu-item index="/users">
+            <el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`">
               <el-icon><User /></el-icon>
               <span>用户管理</span>
             </el-menu-item>
           </template>
-          <el-menu-item index="/events">
+          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
             <el-icon><List /></el-icon>
             <span>事件记录</span>
           </el-menu-item>
@@ -59,7 +59,7 @@
             </span>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click="router.push('/profile')">
+                <el-dropdown-item @click="router.push(`${ADMIN_ROUTE_BASE}/profile`)">
                   <el-icon><User /></el-icon>个人信息
                 </el-dropdown-item>
                 <el-dropdown-item divided @click="handleLogout">
@@ -81,6 +81,7 @@
 import { ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { DataLine, List, Expand, Fold, Setting, User, SwitchButton } from '@element-plus/icons-vue'
+import { ADMIN_ROUTE_BASE } from '@/config/api.config'
 
 const router = useRouter()
 const userRole = computed(() => localStorage.getItem('userRole'))

src/router/index.js

@@ -2,8 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import Layout from '../layout/Layout.vue'
 import { UserAPI } from '../api/user'
+import { ADMIN_ROUTE_BASE } from '@/config/api.config'
 
 const routes = [
+  {
+    path: '/',
+    redirect: '/visitor'
+  },
   {
     path: '/login',
     name: 'Login',
@@ -15,9 +20,9 @@ const routes = [
     component: () => import('../views/RegisterView.vue')
   },
   {
-    path: '/',
+    path: ADMIN_ROUTE_BASE,
     component: Layout,
-    redirect: '/dashboard',
+    redirect: `${ADMIN_ROUTE_BASE}/dashboard`,
     children: [
       {
         path: 'dashboard',
@@ -109,20 +114,23 @@ router.beforeEach(async (to, from, next) => {
     return
   }
 
-  const token = localStorage.getItem('token')
+  // 如果是登录页和注册页可以直接访问
-  const isAuthenticated = localStorage.getItem('isAuthenticated')
-  const userRole = localStorage.getItem('userRole')
-  
-  // 登录页和注册页可以直接访问
   if (to.path === '/login' || to.path === '/register') {
+    const isAuthenticated = localStorage.getItem('isAuthenticated')
     if (isAuthenticated) {
-      next('/dashboard')
+      next('/admin/dashboard')
     } else {
       next()
     }
     return
   }
 
+  // 如果是管理后台页面
+  if (to.path.startsWith(ADMIN_ROUTE_BASE)) {
+    const token = localStorage.getItem('token')
+    const isAuthenticated = localStorage.getItem('isAuthenticated')
+    const userRole = localStorage.getItem('userRole')
+    
     if (!isAuthenticated) {
       next('/login')
       return
@@ -133,7 +141,6 @@ router.beforeEach(async (to, from, next) => {
       try {
         const response = await UserAPI.getUserInfo()
         if (response.retcode !== 0) {
-        // 用户信息获取失败，清除登录状态
           localStorage.clear()
           next('/login')
           return
@@ -145,20 +152,19 @@ router.beforeEach(async (to, from, next) => {
       }
     }
 
-  // 如果是公开页面，直接放行
-  if (to.meta.public) {
-    next()
-    return
-  }
-
     // 检查权限
     if (to.meta.roles && !to.meta.roles.includes(userRole)) {
       ElMessage.error('没有访问权限')
-    next('/dashboard')
+      next('/admin/dashboard')
       return
     }
 
     next()
+    return
+  }
+
+  // 其他未匹配的路由重定向到访客页面
+  next('/visitor')
 })
 
 // 添加全局路由守卫来更新标题

src/views/ConfigView.vue

@@ -4,7 +4,7 @@
       <template #header>
         <div class="card-header">
           <span class="title">系统配置</span>
-          <el-button type="primary" @click="handleRefresh">
+          <el-button type="primary" @click="handleRefresh" class="refresh-btn">
             <el-icon><Refresh /></el-icon>刷新配置
           </el-button>
         </div>
@@ -12,7 +12,7 @@
 
       <el-tabs type="border-card">
         <el-tab-pane label="下载配置">
-          <el-descriptions :column="2" border>
+          <el-descriptions :column="isMobile ? 1 : 2" border>
             <el-descriptions-item label="临时文件位置">
               {{ config.Download.savePath }}
             </el-descriptions-item>
@@ -127,7 +127,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Refresh, InfoFilled } from '@element-plus/icons-vue'
 import { TaskAPI } from '../api/task'
@@ -198,6 +198,24 @@ const handleRefresh = async () => {
   }
 }
 
+// 添加移动端检测
+const isMobile = computed(() => {
+  return window.innerWidth <= 768
+})
+
+// 监听窗口大小变化
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    isMobile.value = window.innerWidth <= 768
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', () => {
+    isMobile.value = window.innerWidth <= 768
+  })
+})
+
 onMounted(() => {
   fetchConfig()
 })
@@ -245,7 +263,7 @@ onMounted(() => {
   margin: 4px;
 }
 
-/* 添加响应式样式 */
+/* 移动端样式 */
 @media screen and (max-width: 768px) {
   .config-view {
     padding: 10px;
@@ -260,43 +278,36 @@ onMounted(() => {
     font-size: 14px;
   }
 
-  /* 调整描述列表在移动端的显示 */
+  .refresh-btn {
+    width: 100%;
+  }
+
   :deep(.el-descriptions) {
-    .el-descriptions__label {
+    margin-top: 12px;
+  }
+
+  :deep(.el-descriptions__label) {
     width: 100px;
     min-width: 100px;
     font-size: 12px;
   }
 
-    .el-descriptions__content {
+  :deep(.el-descriptions__content) {
     font-size: 12px;
     word-break: break-all;
   }
 
-    .el-descriptions__cell {
+  :deep(.el-descriptions__cell) {
     padding: 12px !important;
   }
-  }
 
-  /* 调整标签在移动端的显示 */
   :deep(.el-tag) {
-    margin: 2px;
     font-size: 11px;
-  }
+    padding: 0 4px;
-
-  /* 调整选项卡在移动端的显示 */
-  :deep(.el-tabs__item) {
-    font-size: 13px;
-    padding: 0 10px;
-  }
-
-  /* 调整刷新按钮 */
-  .card-header .el-button {
-    width: 100%;
   }
 }
 
-/* 平板端样式调整 */
+/* 平板端样式 */
 @media screen and (min-width: 769px) and (max-width: 1024px) {
   .config-view {
     padding: 15px;
@@ -306,4 +317,18 @@ onMounted(() => {
     width: 120px;
   }
 }
+
+/* 优化标签显示 */
+:deep(.el-tag) {
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 优化按钮图标对齐 */
+:deep(.el-button .el-icon) {
+  margin-right: 4px;
+  vertical-align: middle;
+}
 </style> 

src/views/TaskManagement.vue

@@ -970,4 +970,21 @@ onUnmounted(() => {
     }
   }
 }
+
+/* 优化对话框内容在移动端的显示 */
+:deep(.el-dialog) {
+  @media screen and (max-width: 768px) {
+    .details-actions {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 8px;
+      padding: 0 20px;
+    }
+
+    .el-button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
 </style> 

src/views/visitor/TaskList.vue

@@ -207,4 +207,21 @@ onMounted(() => {
     padding: 8px;
   }
 }
+
+/* 优化对话框内容在移动端的显示 */
+:deep(.task-details-dialog) {
+  @media screen and (max-width: 768px) {
+    .details-actions {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 8px;
+      padding: 0 20px;
+    }
+
+    .el-button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
 </style>