diff --git a/frontend/syspro/src/components/MainLayout.vue b/frontend/syspro/src/components/MainLayout.vue
index 9d2a7526241986691ead38a146811688c7a84d7a..3fd173971ac59fdc84129feb55ce1a4b8f717481 100644
--- a/frontend/syspro/src/components/MainLayout.vue
+++ b/frontend/syspro/src/components/MainLayout.vue
@@ -1,61 +1,59 @@
 <template>
   <div class="admin-container">
+
     <div class="content-wrapper">
       <!-- 折叠按钮 -->
-      <div class="collapse-btn-container"
-        :style="{ left: isCollapsed ? sidebarCollapsedWidth : sidebarWidth, transform: 'translateX(-50%)' }">
+      <div class="collapse-btn-container" :style="{ left: isCollapsed ? sidebarCollapsedWidth : sidebarWidth, transform: 'translateX(-50%)' }">
         <el-button type="primary" @click="toggleCollapse" class="btn-aside" circle>
-          <el-icon v-if="isCollapsed">
-            <Expand />
-          </el-icon>
-          <el-icon v-else>
-            <Fold />
-          </el-icon>
+          <el-icon v-if="isCollapsed"><Expand /></el-icon>
+          <el-icon v-else><Fold /></el-icon>
         </el-button>
       </div>
 
       <!-- 侧边栏 -->
       <el-aside class="sidebar" :style="{ width: isCollapsed ? sidebarCollapsedWidth : sidebarWidth }">
+        <!-- 流星特效容器 -->
+        <div class="meteor-container">
+          <div class="meteor" v-for="i in 10" :key="i" :style="{
+            animationDelay: (i * 2) + 's',
+            left: (Math.random() * 90 + 5) + '%',
+            width: (Math.random() * 40 + 20) + 'px',
+            height: '2px',
+            animationDuration: (Math.random() * 2 + 4) + 's',
+            top: (Math.random() * 100) + '%',
+            transform: 'rotate(' + (Math.random() * 10 - 5) + 'deg)'
+          }"></div>
+        </div>
+
         <div class="logo-container">
           <div class="logo" :style="{ justifyContent: 'center' }">
             <span v-if="!isCollapsed">AI 单测系统</span>
-            <span v-else>Ai</span><!-- 折叠时显示简化标题 -->
+            <span v-else>Ai</span>
           </div>
         </div>
 
-       <el-menu mode="vertical" background-color="transparent" text-color="#4E5969" active-text-color="#409eff"
-  :collapse="isCollapsed" :collapse-transition="false" :router="true" ref="menuRef" @select="handleMenuSelect">
+        <el-menu mode="vertical" background-color="transparent" text-color="#ffffff" active-text-color="#ffffff"
+          :default-active="currentRoute" :collapse="isCollapsed" :collapse-transition="false" router>
           <el-menu-item index="/">
-            <el-icon>
-              <HomeFilled />
-            </el-icon>
+            <el-icon><HomeFilled /></el-icon>
             <span>首页</span>
           </el-menu-item>
           <el-menu-item index="/admin/user-management">
-            <el-icon>
-              <User />
-            </el-icon>
+            <el-icon><User /></el-icon>
             <span>用户管理</span>
           </el-menu-item>
           <el-menu-item index="/admin/document-management">
-            <el-icon>
-              <Files />
-            </el-icon>
+            <el-icon><Files /></el-icon>
             <span>文档管理</span>
           </el-menu-item>
           <el-menu-item index="/admin/role-management">
-            <el-icon :size="isCollapsed ? 18 : 16">
-              <UserFilled />
-            </el-icon>
+            <el-icon><UserFilled /></el-icon>
             <span>角色管理</span>
           </el-menu-item>
-          <el-menu-item index="/admin/settings" :key="'settings-menu'">
-            <el-icon :size="isCollapsed ? 18 : 16">
-              <Setting />
-            </el-icon>
+          <el-menu-item index="/admin/settings">
+            <el-icon><Setting /></el-icon>
             <span>个人设置</span>
           </el-menu-item>
-          <!-- 添加日志管理一级菜单和操作日志二级菜单 -->
           <el-sub-menu index="/log">
             <template #title>
               <el-icon><Document /></el-icon>
@@ -67,37 +65,110 @@
             </el-menu-item>
           </el-sub-menu>
         </el-menu>
+
+        <!-- 菜单栏右下角的二宝 -->
+        <div class="fairy-container" :style="{ display: isCollapsed ? 'none' : 'flex' }" @mousemove="trackMouse">
+          <!-- 对话气泡 -->
+          <div class="speech-bubble" v-if="showSpeech" :class="{ 'show': showSpeech }">
+            <p>{{ currentSpeech }}</p>
+            <div class="triangle"></div>
+          </div>
+          
+          <div class="fairy" :class="{ 'fairy-jump': fairyJump }" @click="toggleFairyJump">
+            <!-- 精灵头部 -->
+            <div class="fairy-head">
+              <!-- 头发细节 -->
+              <div class="fairy-hair">
+                <div class="hair-strand strand1"></div>
+                <div class="hair-strand strand2"></div>
+                <div class="hair-strand strand3"></div>
+              </div>
+              
+              <!-- 眼睛（带眼球追踪） -->
+              <div class="fairy-eyes">
+                <div class="fairy-eye left">
+                  <div class="pupil" :style="{ left: eyeX + 'px', top: eyeY + 'px' }"></div>
+                </div>
+                <div class="fairy-eye right">
+                  <div class="pupil" :style="{ left: eyeX + 'px', top: eyeY + 'px' }"></div>
+                </div>
+              </div>
+              
+              <!-- 嘴巴（动态表情） -->
+              <div class="fairy-mouth" :class="{ 'smile': isSmiling }"></div>
+              
+              <!-- 腮红（呼吸效果） -->
+              <div class="fairy-cheeks">
+                <div class="fairy-cheek left"></div>
+                <div class="fairy-cheek right"></div>
+              </div>
+              
+              <!-- 触角（带渐变和摆动） -->
+              <div class="fairy-antennas">
+                <div class="antenna left">
+                  <div class="antenna-ball"></div>
+                </div>
+                <div class="antenna right">
+                  <div class="antenna-ball"></div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 身体（带轻微摆动） -->
+            <div class="fairy-body">
+              <!-- 手臂（带细微动作） -->
+              <div class="fairy-arms">
+                <div class="arm left"></div>
+                <div class="arm right"></div>
+              </div>
+              
+              <!-- 翅膀（带纹理和光点） -->
+              <div class="fairy-wings">
+                <div class="wing left">
+                  <div class="wing-pattern"></div>
+                  <div class="wing-sparkle sparkle1"></div>
+                  <div class="wing-sparkle sparkle2"></div>
+                </div>
+                <div class="wing right">
+                  <div class="wing-pattern"></div>
+                  <div class="wing-sparkle sparkle1"></div>
+                  <div class="wing-sparkle sparkle2"></div>
+                </div>
+              </div>
+              
+              <!-- 腿部（带行走动画） -->
+              <div class="fairy-legs">
+                <div class="leg left"></div>
+                <div class="leg right"></div>
+              </div>
+            </div>
+            
+            <!-- 名字（带浮动效果） -->
+            <div class="fairy-name">二宝</div>
+          </div>
+        </div>
       </el-aside>
 
       <!-- 主内容区域 -->
       <div class="main" :class="{ collapsed: isCollapsed }">
-        <!-- 固定导航栏 -->
         <div class="fixed-nav" :style="{ marginLeft: isCollapsed ? sidebarCollapsedWidth : sidebarWidth, top: '0px' }">
           <div class="fixed-nav-content">
-            <!-- 用户头像组件 -->
             <div class="user-avatar-container" @mouseenter="openDropdown" @mouseleave="startCloseTimer">
               <div class="avatar-container">
                 <el-image class="avatar" :src="avatarUrl" fit="cover"></el-image>
               </div>
-              <div class="user-dropdown" v-if="dropdownVisible" ref="dropdownRef" @mouseenter="cancelCloseTimer"
-                @mouseleave="startCloseTimer">
+              <div class="user-dropdown" v-if="dropdownVisible" ref="dropdownRef" @mouseenter="cancelCloseTimer" @mouseleave="startCloseTimer">
                 <div class="dropdown-menu">
                   <div class="menu-item" @click="goTo('/admin/settings')">
-                    <el-icon>
-                      <User />
-                    </el-icon>
+                    <el-icon><User /></el-icon>
                     <span class="profile-center">个人中心</span>
                   </div>
                   <div class="menu-item" @click="tiaozhuan()">
-                    <el-icon>
-                      <ArrowRight />
-                    </el-icon>
+                    <el-icon><ArrowRight /></el-icon>
                     <span class="profile-center">项目地址</span>
                   </div>
                   <div class="menu-item logout" @click="logout">
-                    <el-icon>
-                      <SwitchButton />
-                    </el-icon>
+                    <el-icon><SwitchButton /></el-icon>
                     <span class="profile-center">退出登录</span>
                   </div>
                 </div>
@@ -116,23 +187,24 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, watch, inject } from 'vue';
 import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
+import * as ElIcons from '@element-plus/icons-vue';
 import { useRouter, useRoute } from 'vue-router';
-// 导入必要的图标
-import { HomeFilled, User, Files, UserFilled, Setting, Document, List } from '@element-plus/icons-vue';
-// 假设userStore是通过pinia或vuex提供的
-// 这里我们先模拟一个userInfo对象
+import { HomeFilled, User, Files, UserFilled, Setting, Document, List, Expand, Fold, ArrowRight, SwitchButton } from '@element-plus/icons-vue';
+
 const userInfo = ref({
   avatar_url: '',
-  // 其他用户信息
 });
 
-// 菜单引用
-const menuRef = ref(null);
 const router = useRouter();
 const route = useRoute();
 
+// 从子组件获取页面数据状态
+const userManagementData = inject('userManagementData', ref({ updated: false, newCount: 0 }));
+const documentManagementData = inject('documentManagementData', ref({ updated: false, newCount: 0 }));
+const logData = inject('logData', ref({ updated: false, newCount: 0 }));
+
 // 侧边栏折叠状态
 const isCollapsed = ref(false);
 // 头像下拉菜单状态
@@ -140,6 +212,109 @@ const dropdownVisible = ref(false);
 const dropdownRef = ref(null);
 let closeTimer = null;
 
+// 小精灵互动状态
+const fairyJump = ref(false);
+const isSmiling = ref(true); // 表情状态
+const eyeX = ref(3); // 眼球X位置
+const eyeY = ref(3); // 眼球Y位置
+const isWandering = ref(true); // 控制溜达状态
+
+// 对话功能相关
+const showSpeech = ref(false);
+const currentSpeech = ref('');
+let speechTimer = null;
+let wanderTimer = null;
+
+// 根据当前页面和数据状态生成相关对话
+const getPageSpecificSpeech = () => {
+  // 首页
+  if (route.path === '/') {
+    const totalUpdates = userManagementData.value.newCount + 
+                         documentManagementData.value.newCount + 
+                         logData.value.newCount;
+                         
+    if (totalUpdates > 0) {
+      return `检测到${totalUpdates}条新数据，需要查看吗？`;
+    }
+    return "当前系统状态良好，数据同步正常";
+  }
+  
+  // 用户管理页面
+  if (route.path === '/admin/user-management') {
+    if (userManagementData.value.updated) {
+      return `你好 😊`;
+    }
+    return "祝您开心呀";
+  }
+  
+  // 文档管理页面
+  if (route.path === '/admin/document-management') {
+    if (documentManagementData.value.updated) {
+      return `新上传了${documentManagementData.value.newCount}份文档`;
+    }
+    return "当前文档总数：" + (Math.floor(Math.random() * 30) + 5) + "份";
+  }
+  
+  // 日志管理页面
+  if (route.path === '/log/operationLog') {
+    if (logData.value.updated) {
+      return `有${logData.value.newCount}条新操作日志`;
+    }
+    return "今日操作记录：" + (Math.floor(Math.random() * 100) + 20) + "条";
+  }
+  
+  // 其他页面
+  return [
+    "系统数据已自动备份",
+    "最近30分钟无异常操作",
+    "性能监控正常，响应时间<200ms",
+    "数据同步完成，最新更新于" + new Date().toLocaleTimeString()
+  ][Math.floor(Math.random() * 4)];
+};
+
+// 追踪鼠标移动，实现眼球跟随效果
+const trackMouse = (e) => {
+  const fairyRect = e.currentTarget.getBoundingClientRect();
+  const centerX = fairyRect.left + fairyRect.width / 2;
+  const centerY = fairyRect.top + fairyRect.height / 2;
+  
+  // 计算眼球移动比例（限制范围）
+  const moveX = Math.max(-2, Math.min(2, (e.clientX - centerX) / 30));
+  const moveY = Math.max(-2, Math.min(2, (e.clientY - centerY) / 30));
+  
+  eyeX.value = 3 + moveX;
+  eyeY.value = 3 + moveY;
+  
+  // 鼠标靠近时改变表情和状态
+  const distance = Math.sqrt(Math.pow(e.clientX - centerX, 2) + Math.pow(e.clientY - centerY, 2));
+  isSmiling.value = distance < 100;
+  
+  // 鼠标靠近时停止溜达并触发对话
+  if (distance < 80) {
+    isWandering.value = false;
+    if (!showSpeech.value) {
+      triggerSpeech();
+    }
+  } else {
+    // 鼠标离开时恢复溜达
+    isWandering.value = true;
+  }
+};
+
+// 触发对话
+const triggerSpeech = () => {
+  if (showSpeech.value) return;
+  
+  currentSpeech.value = getPageSpecificSpeech();
+  showSpeech.value = true;
+  
+  // 3-5秒后隐藏
+  const hideDelay = 3000 + Math.random() * 2000;
+  setTimeout(() => {
+    showSpeech.value = false;
+  }, hideDelay);
+};
+
 // 响应式侧边栏宽度
 const sidebarWidth = ref('220px');
 const sidebarCollapsedWidth = ref('64px');
@@ -148,7 +323,6 @@ const sidebarCollapsedWidth = ref('64px');
 const updateSidebarWidth = () => {
   if (window.innerWidth < 900) {
     sidebarWidth.value = '180px';
-    // 当屏幕宽度小于900px时，如果侧边栏未折叠则自动折叠
     if (!isCollapsed.value) {
       isCollapsed.value = true;
     }
@@ -167,49 +341,35 @@ window.addEventListener('resize', updateSidebarWidth, { passive: true });
 // 组件卸载时移除监听
 onBeforeUnmount(() => {
   window.removeEventListener('resize', updateSidebarWidth);
+  if (speechTimer) clearInterval(speechTimer);
+  if (wanderTimer) clearInterval(wanderTimer);
 });
 
-// 添加路由监听
+// 当前路由
+const currentRoute = ref(route.path);
+
+// 监听路由变化，更新对话内容
 watch(
   () => route.path,
   (newPath) => {
-    // 使用nextTick确保DOM已更新
-    nextTick(() => {
-      // 确保菜单引用存在且setCurrentKey是函数
-      if (menuRef.value && typeof menuRef.value.setCurrentKey === 'function') {
-        // 手动设置当前激活的菜单
-        menuRef.value.setCurrentKey(newPath);
-      }
-    });
+    currentRoute.value = newPath;
+    if (!showSpeech.value && Math.random() > 0.3) {
+      setTimeout(triggerSpeech, 1000);
+    }
   }
 );
 
-// 组件挂载时初始化菜单
-onMounted(() => {
-  // 确保组件挂载完成后设置当前菜单
-  nextTick(() => {
-    if (menuRef.value && route.path && typeof menuRef.value.setCurrentKey === 'function') {
-      menuRef.value.setCurrentKey(route.path);
-    }
-  });
-});
-
-// 处理菜单选择事件
-const handleMenuSelect = (index) => {
-  // 使用nextTick确保DOM已更新
-  nextTick(() => {
-    if (menuRef.value && typeof menuRef.value.setCurrentKey === 'function') {
-      menuRef.value.setCurrentKey(index);
-    }
-  });
-
-  // 移动设备下自动折叠菜单
-  nextTick(() => {
-    if (window.innerWidth < 900 && !isCollapsed.value) {
-      isCollapsed.value = true;
+// 监听数据变化，提示更新
+watch(
+  [() => userManagementData.value.updated, 
+   () => documentManagementData.value.updated,
+   () => logData.value.updated],
+  (newValues, oldValues) => {
+    if (newValues.some((val, i) => val && !oldValues[i])) {
+      triggerSpeech();
     }
-  });
-};
+  }
+);
 
 // 切换侧边栏折叠状态
 const toggleCollapse = () => {
@@ -241,6 +401,10 @@ const cancelCloseTimer = () => {
   }
 };
 
+const closeDropdown = () => {
+  dropdownVisible.value = false;
+};
+
 // 跳转到指定页面
 const goTo = (path) => {
   router.push(path);
@@ -260,10 +424,8 @@ const logout = () => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(() => {
-    // 关闭下拉菜单
     dropdownVisible.value = false;
-
-    // 创建全屏加载动画
+    
     const loading = ElLoading.service({
       lock: true,
       text: '正在退出登录...',
@@ -272,7 +434,6 @@ const logout = () => {
       customClass: 'logout-loading'
     });
 
-    // 添加淡出动画效果
     const adminContainer = document.querySelector('.admin-container');
     if (adminContainer) {
       adminContainer.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
@@ -280,38 +441,89 @@ const logout = () => {
       adminContainer.style.transform = 'scale(0.95)';
     }
 
-    // 延迟执行退出操作
     setTimeout(() => {
-      // 清除本地存储
       localStorage.removeItem('token');
       localStorage.removeItem('user_avatar_url');
-
-      // 关闭加载动画
+      
       loading.close();
-
-      // 跳转到登录页面
+      
       router.push('/login');
-
-      // 显示退出成功消息
+      
       ElMessage.success('已成功退出登录');
     }, 600);
   }).catch(() => {
-    // 用户取消退出
     ElMessage.info('已取消退出');
   });
 };
 
-// 计算属性安全获取头像URL
+// 计算属性获取头像URL
 const avatarUrl = computed(() => {
-  // 确保在客户端环境中
   if (typeof window !== 'undefined') {
     return localStorage.getItem('user_avatar_url') || 'https://api.dicebear.com/7.x/initials/svg?seed=AD&backgroundColor=409eff&textColor=ffffff'
   }
-  // 服务器端返回默认头像
   return 'https://api.dicebear.com/7.x/initials/svg?seed=AD&backgroundColor=409eff&textColor=ffffff'
 });
 
+// 小精灵跳跃动画控制
+const toggleFairyJump = () => {
+  fairyJump.value = true;
+  setTimeout(() => {
+    fairyJump.value = false;
+  }, 600);
+  
+  triggerSpeech();
+};
+
+// 监听跳跃动画结束
+watch(fairyJump, (newVal) => {
+  if (newVal) {
+    setTimeout(() => {
+      fairyJump.value = false;
+    }, 600);
+  }
+});
 
+// 页面加载时初始化动画
+onMounted(() => {
+  // 随机表情变化
+  setInterval(() => {
+    if (!fairyJump.value && Math.random() > 0.7 && !isCollapsed.value) {
+      isSmiling.value = !isSmiling.value;
+      setTimeout(() => {
+        isSmiling.value = true;
+      }, 1000);
+    }
+  }, 3000);
+  
+  // 随机跳跃
+  setInterval(() => {
+    if (Math.random() > 0.7 && !isCollapsed.value && !fairyJump.value) {
+      toggleFairyJump();
+    }
+  }, 5000);
+  
+  // 随机触发对话
+  speechTimer = setInterval(() => {
+    if (Math.random() > 0.7 && !isCollapsed.value && !showSpeech.value) {
+      triggerSpeech();
+    }
+  }, 10000);
+  
+  // 溜达状态切换
+  wanderTimer = setInterval(() => {
+    if (!isCollapsed.value && !fairyJump.value && Math.random() > 0.7) {
+      isWandering.value = !isWandering.value;
+      // 随机切换溜达方向
+      const fairyElem = document.querySelector('.fairy');
+      if (fairyElem) {
+        fairyElem.style.animationDirection = Math.random() > 0.5 ? 'normal' : 'reverse';
+      }
+    }
+  }, 8000);
+  
+  // 初始加载后触发一次对话
+  setTimeout(triggerSpeech, 2000);
+});
 </script>
 
 <style scoped>
@@ -326,20 +538,43 @@ const avatarUrl = computed(() => {
   margin: 0;
   box-sizing: border-box;
   overflow-x: hidden;
-  /* 防止水平滚动条 */
   opacity: 1;
   transition: opacity 0.5s ease-out;
 }
 
-/* 确保body和html没有默认边距 */
-:deep(body),
-:deep(html) {
+:deep(body), :deep(html) {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
 }
 
-/* 用户头像容器 */
+.header-left .app-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1D2129;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.notification-icon, .settings-icon {
+  position: relative;
+  cursor: pointer;
+}
+
+.icon {
+  font-size: 20px;
+  color: #6B7280;
+  cursor: pointer;
+}
+
+/* 户头像容器 */
 .user-avatar-container {
   cursor: pointer;
   position: relative;
@@ -347,7 +582,6 @@ const avatarUrl = computed(() => {
   align-items: center;
 }
 
-/* 用户头像 */
 .avatar-container {
   width: 40px;
   height: 40px;
@@ -363,7 +597,6 @@ const avatarUrl = computed(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center;
 }
 
 /* 用户下拉菜单 */
@@ -392,6 +625,7 @@ const avatarUrl = computed(() => {
   color: #4E5969;
   cursor: pointer;
   transition: background-color 0.2s;
+
 }
 
 .menu-item:hover {
@@ -427,84 +661,124 @@ const avatarUrl = computed(() => {
 }
 
 .sidebar {
-  color: #4E5969;
+  background: linear-gradient(135deg, rgba(64, 158, 255, 0.9) 0%, rgba(123, 97, 255, 0.9) 50%, rgba(160, 97, 255, 0.9) 100%);
+  background-size: 300% 300%;
+  color: #ffffff;
   min-width: 56px;
   position: fixed;
   left: 0;
   top: 0;
   height: 100vh;
-  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.5s ease;
-  border-right: 1px solid #E5E6EB;
+  transition: width 0.3s ease, background-position 15s ease infinite;
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
   flex-shrink: 0;
   z-index: 1500;
   overflow-y: auto;
   overflow-x: hidden;
-  background: linear-gradient(135deg, #f1f5ff 0%, #e0e9ff 100%);
+  box-shadow: 0 0 15px rgba(64, 158, 255, 0.2);
+  animation: gradientShift 15s ease infinite, breath 8s ease-in-out infinite;
+  padding-bottom: 120px;
+  box-sizing: border-box;
 }
 
-.sidebar::before,
-.sidebar::after {
-  content: '';
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes breath {
+  0%, 100% { opacity: 0.9; }
+  50% { opacity: 0.95; }
+}
+
+/* 流星特效样式 */
+.meteor-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.meteor {
   position: absolute;
-  width: 2px;
   height: 2px;
-  background-color: rgba(255, 255, 255, 0.8);
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
   border-radius: 50%;
-  z-index: 10;
-  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
+  animation: meteorFall 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+  opacity: 0;
+  left: -100px;
+  transform-origin: left center;
+  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.8),
+              0 0 20px 3px rgba(255, 255, 255, 0.5),
+              0 0 40px 5px rgba(255, 255, 255, 0.2);
 }
 
-.sidebar::before {
-  top: 8%;
-  left: 25%;
-  animation: starPulse 6s infinite alternate;
+@keyframes meteorFall {
+  0% {
+    transform: translateX(0) translateY(0) scale(0.5) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateX(400px) translateY(100px) scale(1) rotate(10deg);
+    opacity: 0;
+  }
 }
 
-/* 流星跟手动画 */
-:deep(.el-menu .el-menu-item),
-:deep(.el-menu .el-sub-menu__title) {
+/* 菜单样式 */
+:deep(.el-menu-item) {
+  color: rgba(255, 255, 255, 0.9) !important;
+  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   position: relative;
   overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-:deep(.el-menu .el-menu-item:hover),
-:deep(.el-menu .el-sub-menu__title:hover) {
-  background-color: rgba(255, 255, 255, 0.4) !important;
-  color: #4E5969 !important;
-  transform: translateX(5px);
+:deep(.el-menu-item:active) {
+  animation: menuClick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
 
-:deep(.el-menu .el-menu-item:hover)::after,
-:deep(.el-menu .el-sub-menu__title:hover)::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
-  animation: meteor 0.6s linear forwards;
+@keyframes menuClick {
+  0% {
+    transform: scale(1);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    transform: scale(0.95);
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  100% {
+    transform: scale(1);
+    background-color: rgba(255, 255, 255, 0.25);
+  }
 }
 
-.sidebar::after {
-  top: 12%;
-  left: 70%;
-  animation: starPulse 6s infinite alternate 1.5s;
+:deep(.el-menu-item:hover) {
+  background-color: rgba(255, 255, 255, 0.18) !important;
+  transform: translateX(5px);
 }
 
-/* 自定义侧边栏滚动条样式 */
-.sidebar::-webkit-scrollbar {
-  width: 6px;
+:deep(.el-menu-item.is-active) {
+  color: #ffffff !important;
+  background-color: rgba(255, 255, 255, 0.25) !important;
+  box-shadow: 0 2px 15px rgba(255, 255, 255, 0.15) inset;
 }
 
-.sidebar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
+:deep(.el-sub-menu__title) {
+  color: rgba(255, 255, 255, 0.9) !important;
 }
 
-.sidebar::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+:deep(.el-icon) {
+  color: rgba(255, 255, 255, 0.9) !important;
 }
 
 .collapse-btn-container {
@@ -516,7 +790,7 @@ const avatarUrl = computed(() => {
 }
 
 .collapse-btn-container .el-button {
-  background: linear-gradient(135deg, #409eff 0%, #7bb0e8 100%);
+  background-color: #d88aff;
   width: 40px !important;
   height: 40px !important;
   display: flex !important;
@@ -525,46 +799,10 @@ const avatarUrl = computed(() => {
   position: relative !important;
   z-index: 2500 !important;
   border-radius: 50% !important;
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4) !important;
-  color: white !important;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  box-shadow: 0 4px 12px rgba(158, 151, 151, 0.3) !important;
+  color: #7b7d7e !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   border: none !important;
-  animation: pulseButton 2s infinite;
-}
-
-@keyframes pulseButton {
-  0% {
-    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
-  }
-
-  70% {
-    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
-  }
-
-  100% {
-    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
-  }
-}
-
-.collapse-btn-container .el-button:hover {
-  transform: scale(1.1);
-  animation: none;
-  box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7) !important;
-}
-
-:deep(.el-menu) {
-  background-color: transparent !important;
-  border-radius: 8px;
-  margin: 10px;
-  overflow: hidden;
-}
-
-:deep(.el-menu .el-menu-item.is-active),
-:deep(.el-menu .el-menu-item:focus),
-:deep(.el-menu .el-sub-menu.is-active > .el-sub-menu__title),
-:deep(.el-menu .el-sub-menu__title:focus) {
-  background-color: rgba(255, 255, 255, 0.5) !important;
-  color: #409eff !important;
 }
 
 .logo-container {
@@ -573,70 +811,82 @@ const avatarUrl = computed(() => {
   align-items: center;
   padding: 0 10px;
   height: 50px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid #c5c5c5;
   margin-top: 5px;
   overflow: hidden;
   white-space: nowrap;
-  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 10;
 }
 
 .logo {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(90deg, #4E5969, #718096);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: #ffffff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: font-size 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: all 0.3s ease;
   min-width: 0;
   flex-shrink: 0;
+  text-shadow: 
+    0 1px 0 rgba(255,255,255,0.5),
+    0 2px 4px rgba(0,0,0,0.1),
+    0 4px 8px rgba(0,0,0,0.1),
+    0 8px 16px rgba(0,0,0,0.1),
+    2px 2px 3px rgba(160, 97, 255, 0.6),
+    -2px -2px 3px rgba(64, 158, 255, 0.6);
+  animation: textPulse 3s ease-in-out infinite;
+}
+
+@keyframes textPulse {
+  0%, 100% {
+    text-shadow: 
+      0 1px 0 rgba(255,255,255,0.5),
+      0 2px 4px rgba(0,0,0,0.1),
+      0 4px 8px rgba(0,0,0,0.1),
+      0 8px 16px rgba(0,0,0,0.1),
+      2px 2px 3px rgba(160, 97, 255, 0.4),
+      -2px -2px 3px rgba(64, 158, 255, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    text-shadow: 
+      0 1px 0 rgba(255,255,255,0.5),
+      0 2px 4px rgba(0,0,0,0.15),
+      0 4px 8px rgba(0,0,0,0.15),
+      0 8px 16px rgba(0,0,0,0.15),
+      3px 3px 5px rgba(160, 97, 255, 0.7),
+      -3px -3px 5px rgba(64, 158, 255, 0.7);
+    transform: scale(1.03);
+  }
 }
 
 /* 固定导航栏样式 */
 .fixed-nav {
   height: 55px;
   width: calc(100% - var(--margin-left, 0px));
-  background-color: #F5F7FA;
+  background: linear-gradient(135deg, rgba(64, 158, 255, 0.9) 0%, rgba(123, 97, 255, 0.9) 50%, rgba(160, 97, 255, 0.9) 100%);
+  background-size: 300% 300%;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 1400;
   border-bottom: 1px solid #E5E6EB;
   margin-left: 220px;
-  transition: margin-left 0.3s ease, background 0.5s ease;
+  transition: margin-left 0.3s ease, background-position 15s ease infinite;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0 20px;
-  background: linear-gradient(135deg, #f1f5ff 0%, #e0e9ff 100%);
   box-sizing: border-box;
-}
-/* 动画定义 */
-@keyframes meteor {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
+  animation: gradientShift 15s ease infinite, breath 8s ease-in-out infinite;
 }
 
-@keyframes starPulse {
-  0% {
-    opacity: 0.3;
-    transform: scale(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-}
 .fixed-nav-content {
   display: flex;
   align-items: center;
@@ -654,10 +904,10 @@ const avatarUrl = computed(() => {
   padding-top: 75px;
   padding-left: 240px;
   box-sizing: border-box;
+  margin-left: 0;
   transition: padding-left 0.3s ease;
 }
 
-/* 侧边栏折叠状态下的主内容区域调整 */
 .main.collapsed {
   padding-left: 84px;
 }
@@ -690,15 +940,502 @@ const avatarUrl = computed(() => {
   stroke-width: 2;
 }
 
-/* 菜单样式 */
-:deep(.el-menu-item) {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 20px;
+/* 二宝容器 */
+.fairy-container {
+  position: absolute;
+  bottom: 30px;
+  right: 15px;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: all;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
+  /* 为溜达动作预留空间 */
+  height: 120px;
 }
 
-:deep(.el-menu-item.is-active) {
-  background-color: #409eff;
-  color: #fff;
+/* 对话气泡样式 */
+.speech-bubble {
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  transform: translateX(-50%) scale(0.8);
+  background-color: white;
+  border-radius: 18px;
+  padding: 10px 16px;
+  font-size: 13px;
+  color: #333;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-width: calc(100% - 40px);
+  text-align: center;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 20;
+  pointer-events: none;
+  line-height: 1.4;
+  background: linear-gradient(145deg, #ffffff, #f5f5f5);
+  border: 1px solid rgba(0,0,0,0.05);
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.speech-bubble.show {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+.speech-bubble .triangle {
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid white;
+  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
+}
+
+/* 二宝主体 - 添加溜达和待机动画 */
+.fairy {
+  width: 70px;
+  height: 90px;
+  position: relative;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  /* 组合动画：浮动+溜达+轻微旋转 */
+  animation: 
+    float 3s ease-in-out infinite,
+    wander 15s linear infinite,
+    slightRotate 8s ease-in-out infinite;
+}
+
+/* 溜达动画 - 左右移动 */
+@keyframes wander {
+  0% { transform: translateX(-20px) translateY(0); }
+  25% { transform: translateX(0) translateY(0); }
+  50% { transform: translateX(20px) translateY(0); }
+  75% { transform: translateX(0) translateY(0); }
+  100% { transform: translateX(-20px) translateY(0); }
+}
+
+/* 轻微旋转动画 - 增强待机感 */
+@keyframes slightRotate {
+  0%, 100% { transform: rotate(-2deg); }
+  50% { transform: rotate(2deg); }
+}
+
+/* 浮动动画 */
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+/* 头部 */
+.fairy-head {
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(145deg, #E0F7FA, #B2EBF2);
+  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.4),
+              inset 0 2px 3px rgba(255, 255, 255, 0.5);
+  z-index: 2;
+  /* 头部微微晃动 */
+  animation: headShake 4s ease-in-out infinite;
+}
+
+@keyframes headShake {
+  0%, 100% { transform: translateX(-50%) rotate(-1deg); }
+  50% { transform: translateX(-50%) rotate(1deg); }
+}
+
+/* 头发细节 */
+.fairy-hair {
+  position: absolute;
+  top: -5px;
+  width: 100%;
+  height: 20px;
+}
+
+.hair-strand {
+  position: absolute;
+  background-color: #B2EBF2;
+  border-radius: 50% 50% 0 0;
+}
+
+.strand1 {
+  width: 7px;
+  height: 10px;
+  top: -3px;
+  left: 10px;
+  transform: rotate(-15deg);
+  animation: hairSway 3s ease-in-out infinite;
+}
+
+.strand2 {
+  width: 7px;
+  height: 13px;
+  top: -5px;
+  left: 18px;
+  animation: hairSway 4s ease-in-out infinite;
+}
+
+.strand3 {
+  width: 7px;
+  height: 10px;
+  top: -3px;
+  left: 28px;
+  transform: rotate(15deg);
+  animation: hairSway 3.5s ease-in-out infinite;
+}
+
+/* 头发摆动动画 */
+@keyframes hairSway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(5deg); }
+}
+
+/* 眼睛 */
+.fairy-eyes {
+  position: absolute;
+  top: 13px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+
+.fairy-eye {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  border-radius: 50%;
+  position: relative;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
+  animation: blink 4s infinite;
+}
+
+.pupil {
+  width: 6px;
+  height: 6px;
+  background-color: #5A6BAF;
+  border-radius: 50%;
+  position: absolute;
+  transition: all 0.1s ease;
+}
+
+.pupil::after {
+  content: '';
+  width: 2px;
+  height: 2px;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+}
+
+/* 嘴巴 */
+.fairy-mouth {
+  width: 10px;
+  height: 5px;
+  border-radius: 0 0 10px 10px;
+  background-color: #5A6BAF;
+  position: absolute;
+  top: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: all 0.3s ease;
+}
+
+.fairy-mouth.smile {
+  height: 5px;
+  border-radius: 0 0 10px 10px;
+}
+
+.fairy-mouth:not(.smile) {
+  height: 2px;
+  border-radius: 2px;
+  top: 32px;
+}
+
+/* 腮红 */
+.fairy-cheeks {
+  position: absolute;
+  top: 28px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.fairy-cheek {
+  width: 8px;
+  height: 8px;
+  background-color: #FFCAD4;
+  border-radius: 50%;
+  opacity: 0.6;
+  animation: blush 3s ease-in-out infinite;
+}
+
+@keyframes blush {
+  0%, 100% { opacity: 0.4; transform: scale(0.9); }
+  50% { opacity: 0.7; transform: scale(1.1); }
+}
+
+/* 触角 */
+.fairy-antennas {
+  position: absolute;
+  top: -8px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+
+.antenna {
+  width: 2px;
+  height: 14px;
+  background: linear-gradient(to top, #B2EBF2, #80DEEA);
+  position: relative;
+  border-radius: 3px;
+  animation: antennaSway 3s ease-in-out infinite;
+}
+
+.antenna.left {
+  transform: rotate(-15deg);
+  animation-delay: -0.5s;
+}
+
+.antenna.right {
+  transform: rotate(15deg);
+}
+
+.antenna-ball {
+  width: 6px;
+  height: 6px;
+  background: radial-gradient(circle, #80DEEA, #4DD0E1);
+  border-radius: 50%;
+  position: absolute;
+  top: -3px;
+  left: 50%;
+  transform: translateX(-50%);
+  animation: glow 3s infinite alternate;
+  box-shadow: 0 0 6px 1px rgba(128, 222, 234, 0.6);
+}
+
+@keyframes antennaSway {
+  0%, 100% { transform: rotate(-15deg); }
+  50% { transform: rotate(-5deg); }
+}
+
+@keyframes glow {
+  0% { box-shadow: 0 0 5px 2px rgba(128, 222, 234, 0.5); }
+  100% { box-shadow: 0 0 8px 3px rgba(128, 222, 234, 0.8); }
+}
+
+/* 身体 */
+.fairy-body {
+  width: 35px;
+  height: 38px;
+  background: linear-gradient(145deg, #E0F7FA, #B2EBF2);
+  border-radius: 40% 40% 30% 30%;
+  position: absolute;
+  top: 38px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3),
+              inset 0 2px 3px rgba(255, 255, 255, 0.5);
+  animation: bodySway 4s ease-in-out infinite;
+}
+
+/* 增强身体摆动 */
+@keyframes bodySway {
+  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
+  50% { transform: translateX(-50%) rotate(2deg); }
+}
+
+/* 手臂 - 增加摆动幅度 */
+.fairy-arms {
+  position: absolute;
+  top: 10px;
+  width: 100%;
+}
+
+.arm {
+  width: 14px;
+  height: 2px;
+  background: linear-gradient(to right, #B2EBF2, #80DEEA);
+  position: absolute;
+  top: 5px;
+  border-radius: 3px;
+  animation: armWave 2s ease-in-out infinite;
+}
+
+.arm.left {
+  left: -12px;
+  transform: rotate(5deg);
+  animation-delay: -1s;
+}
+
+.arm.right {
+  right: -12px;
+  transform: rotate(-5deg);
+}
+
+/* 手臂挥舞动画 */
+@keyframes armWave {
+  0%, 100% { transform: rotate(5deg); }
+  50% { transform: rotate(-5deg); }
+}
+
+/* 翅膀 */
+.fairy-wings {
+  position: absolute;
+  top: -15px;
+  width: 100%;
+  z-index: 0;
+}
+
+.wing {
+  width: 35px;
+  height: 30px;
+  background: linear-gradient(135deg, rgba(179, 229, 252, 0.8), rgba(129, 212, 250, 0.6));
+  border-radius: 80% 20% 50% 50%;
+  position: absolute;
+  animation: flap 2s infinite alternate;
+  box-shadow: 0 0 12px 2px rgba(129, 212, 250, 0.4);
+  overflow: hidden;
+}
+
+/* 翅膀扇动动画 */
+@keyframes flap {
+  0% { transform: rotate(-10deg) scale(1); opacity: 0.7; }
+  100% { transform: rotate(-20deg) scale(0.95); opacity: 0.9; }
+}
+
+.wing-pattern {
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 60%),
+              radial-gradient(circle at 70% 60%, rgba(255,255,255,0.2) 0%, transparent 50%);
+}
+
+.wing-sparkle {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6);
+  animation: sparkle 3s infinite alternate;
+}
+
+.sparkle1 {
+  top: 20%;
+  left: 40%;
+}
+
+.sparkle2 {
+  top: 60%;
+  left: 60%;
+  animation-delay: 1s;
+}
+
+.wing.left {
+  left: -28px;
+  transform: rotate(-10deg);
+}
+
+.wing.right {
+  right: -28px;
+  transform: rotate(10deg) scaleX(-1);
+}
+
+/* 腿部 - 添加行走动画 */
+.fairy-legs {
+  position: absolute;
+  bottom: -8px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+}
+
+.leg {
+  width: 2.5px;
+  height: 9px;
+  background-color: #B2EBF2;
+  border-radius: 0 0 3px 3px;
+}
+
+.leg.left {
+  animation: legStepLeft 1.5s ease-in-out infinite;
+}
+
+.leg.right {
+  animation: legStepRight 1.5s ease-in-out infinite;
+}
+
+/* 左腿行走动画 */
+@keyframes legStepLeft {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(15deg); }
+}
+
+/* 右腿行走动画 */
+@keyframes legStepRight {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-15deg); }
+}
+
+/* 名字 */
+.fairy-name {
+  position: absolute;
+  top: 85px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: white;
+  font-weight: 500;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  letter-spacing: 0.5px;
+  animation: nameFloat 2s ease-in-out infinite;
+}
+
+@keyframes nameFloat {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(-2px); }
+}
+
+/* 跳跃动画 */
+.fairy-jump {
+  animation: jump 0.8s cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+@keyframes jump {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+  100% { transform: translateY(0); }
+}
+
+/* 眨眼动画 */
+@keyframes blink {
+  0%, 85%, 100% { height: 12px; }
+  90% { height: 2px; }
+}
+
+/* 光点动画 */
+@keyframes sparkle {
+  0% { opacity: 0.5; transform: scale(0.8); }
+  100% { opacity: 1; transform: scale(1.2); }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/syspro/src/components/Sidebar.vue b/frontend/syspro/src/components/Sidebar.vue
index 9e6acf610ccc7657ac216f58a5a8874a8ca96f99..4c6e0d73568271690dccb479266d974e19ff107a 100644
--- a/frontend/syspro/src/components/Sidebar.vue
+++ b/frontend/syspro/src/components/Sidebar.vue
@@ -1,58 +1,77 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { Menu as ElMenu, MenuItem as ElMenuItem, SubMenu as ElSubMenu } from 'element-plus';
+import { Menu as ElMenu, MenuItem as ElMenuItem } from 'element-plus';
 import 'element-plus/es/components/menu/style/css';
 import 'element-plus/es/components/menu-item/style/css';
-import 'element-plus/es/components/sub-menu/style/css';
+// 导入 UserFilled 图标
 import { HomeFilled, User, FileText, Settings, UserFilled, Document, List } from '@element-plus/icons-vue';
 
 const router = useRouter();
 const route = useRoute();
 const activeMenu = ref('HomeFilled');
-const lastPath = ref(route.path);
+const lastPath = ref(route.path); // 使用ref保存上次路径
 
+// 菜单项配置
 const menuItems = [
   { id: 'HomeFilled', name: '首页', icon: HomeFilled, path: '/' },
   { id: 'User', name: '用户管理', icon: User, path: '/admin/user-management' },
   { id: 'FileText', name: '文档管理', icon: FileText, path: '/admin/document-management' },
   { id: 'UserFilled', name: '角色管理', icon: UserFilled, path: '/admin/role-management' },
   { id: 'Settings', name: '个人设置', icon: Settings, path: '/admin/settings' },
+  // 添加日志管理一级菜单
   { id: 'Document', name: '日志管理', icon: Document, path: '/log', children: [
     { id: 'List', name: '操作日志', icon: List, path: '/log/operationLog' }
   ]}
 ];
 
+// 监听路由变化，设置当前激活的菜单项
 onMounted(() => {
   setActiveMenuByRoute();
+
+  // 监听路由变化
   const unsubscribe = router.afterEach((to) => {
+    // 确保只有在路径实际变化时才更新
     if (to.path !== lastPath.value) {
       lastPath.value = to.path;
       setActiveMenuByRoute();
     }
   });
-  onUnmounted(() => unsubscribe());
+
+  // 组件卸载时取消监听
+  onUnmounted(() => {
+    unsubscribe();
+  });
 });
 
+// 根据当前路由设置激活的菜单项
 function setActiveMenuByRoute() {
   const currentPath = route.path;
+  // 特殊处理首页
   if (currentPath === '/') {
     activeMenu.value = 'HomeFilled';
     return;
   }
+
+  // 先检查是否是子菜单路径
   for (const item of menuItems) {
     if (item.children) {
       const matchedChild = item.children.find(child => child.path === currentPath);
       if (matchedChild) {
-        activeMenu.value = matchedChild.id;
+        activeMenu.value = matchedChild.id; // 激活子菜单而不是父菜单
         return;
       }
     }
   }
+
+  // 再检查是否是一级菜单路径
   const matchedItem = menuItems.find(item => item.path === currentPath);
-  if (matchedItem) activeMenu.value = matchedItem.id;
+  if (matchedItem) {
+    activeMenu.value = matchedItem.id;
+  }
 }
 
+// 导航到指定菜单项
 function navigateTo(item) {
   router.push(item.path);
 }
@@ -74,12 +93,15 @@ watch(isDialogOpen, () => {
       :unique-opened="true"
       :router="false"  
     >
+      <!-- 处理一级菜单和二级菜单 -->
       <template v-for="item in menuItems" :key="item.id">
+        <!-- 如果有子菜单，则使用 el-sub-menu -->
         <el-sub-menu v-if="item.children" :index="item.id">
           <template #title>
             <component :is="item.icon" class="menu-icon" />
             <span>{{ item.name }}</span>
           </template>
+          <!-- 二级菜单 -->
           <el-menu-item
             v-for="child in item.children"
             :key="child.id"
@@ -90,6 +112,7 @@ watch(isDialogOpen, () => {
             <span>{{ child.name }}</span>
           </el-menu-item>
         </el-sub-menu>
+        <!-- 如果没有子菜单，则使用 el-menu-item -->
         <el-menu-item v-else :index="item.id">
           <template #icon>
             <component :is="item.icon" class="menu-icon" />
@@ -105,77 +128,46 @@ watch(isDialogOpen, () => {
 .sidebar {
   width: 240px;
   height: 100vh;
-  background: linear-gradient(135deg, #4361ee 0%, #7209b7 50%, #f72585 100%) !important;
+  background-color: #ffffff !important; /* 白色背景 - 添加 !important 确保优先级 */
+  color: #333333;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 0 20px rgba(114, 9, 183, 0.4);
-  position: relative;
-  overflow: hidden;
-}
-
-.sidebar::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 20%),
-              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.1) 0%, transparent 20%);
-  background-size: 60px 60px;
-  animation: moveBackground 15s linear infinite;
-  z-index: 0;
-}
-
-@keyframes moveBackground {
-  0% { background-position: 0 0; }
-  100% { background-position: 60px 60px; }
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 }
 
-/* 系统名称 - 使用浅蓝白色增强清晰度 */
 .system-name {
   font-size: 18px;
   font-weight: bold;
   padding: 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  color: #e0e7ff; /* 浅紫蓝色，替代纯白色 */
-  position: relative;
-  z-index: 1;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(5px);
+  border-bottom: 1px solid #f0f0f0; /* 边框颜色改为浅灰色 */
+  color: #333333; /* 系统名称文字颜色改为深灰色 */
 }
 
-/* 菜单项文字 - 调整为更清晰的浅色调 */
 .el-menu-item {
-  color: #e0e7ff !important; /* 浅紫蓝色，比白色稍深 */
+  color: #555555 !important; /* 菜单项文字颜色 */
   height: 60px !important;
   line-height: 60px !important;
   padding: 0 20px !important;
   margin: 0 !important;
-  position: relative;
-  z-index: 1;
-  transition: all 0.3s ease;
-  background: transparent !important;
 }
 
 .el-menu-item:hover {
-  background: rgba(255, 255, 255, 0.15) !important;
-  color: #f0f4ff !important; /* 悬停时稍亮 */
-  transform: translateX(5px);
+  background-color: #f5f5f5 !important; /* 悬停背景改为浅灰色 */
+  color: #222222 !important;
 }
 
 .el-menu-item.is-active {
-  background: rgba(255, 255, 255, 0.25) !important;
-  color: #ffffff !important; /* 激活项用纯白色突出 */
-  border-left: 3px solid #ffffff;
+  background-color: #e9ecef !important; /* 激活背景改为稍深的浅灰色 */
+  color: #000000 !important;
 }
 
 .menu-icon {
   color: inherit;
   font-size: 18px;
   margin-right: 10px;
-  transition: transform 0.3s ease;
 }
+<<<<<<< HEAD
+=======
 
 .el-menu-item:hover .menu-icon {
   transform: scale(1.2);
@@ -237,4 +229,5 @@ watch(isDialogOpen, () => {
   font-weight: normal !important;
   border-left: none !important;
 }
+>>>>>>> 83c2dd8cf66df16a0ca6cb1aedf8fc7e5b6bc8b7
 </style>