提交修改，后台管理页面bug修复，已经发布后台管理界面V1.0版本

admin-web/src/components/Layout/Sidebar.vue

@@ -1,105 +1,105 @@
 <template>
-  <aside
-    class="sidebar"
-    :class="{ 'sidebar--open': isOpen }"
-  >
-    <nav class="sidebar-nav">
-      <ul class="nav-list">
-        <li class="nav-item" v-for="menu in menuList" :key="menu.path">
-          <router-link
-            :to="menu.path"
-            class="nav-link"
-            :class="{ 'is-active': $route.path === menu.path }"
-            @click="handleMenuClick"
-          >
-            <el-icon class="nav-icon"><component :is="menu.icon" /></el-icon>
-            <span class="nav-text">{{ menu.title }}</span>
-          </router-link>
-        </li>
-      </ul>
-    </nav>
-    
-    <!-- 遮罩层（手机端） -->
-    <div
-      v-if="isOpen && isMobile"
-      class="sidebar-mask"
-      @click="handleMaskClick"
-    ></div>
+  <!-- 桌面/平板：固定侧边栏（不做展开/收起动画） -->
+  <aside v-if="!isMobile" class="sidebar-desktop">
+    <el-menu router :default-active="activePath" class="sidebar-menu" @select="handleSelect">
+      <el-menu-item index="/">
+        <el-icon><HomeFilled /></el-icon>
+        <span>首页</span>
+      </el-menu-item>
+      <el-menu-item index="/conversations">
+        <el-icon><Message /></el-icon>
+        <span>会话记录管理</span>
+      </el-menu-item>
+      <el-menu-item index="/users">
+        <el-icon><User /></el-icon>
+        <span>用户管理</span>
+      </el-menu-item>
+    </el-menu>
   </aside>
+
+  <!-- 手机端：抽屉菜单（Element Plus 自带隐藏/遮罩/动画） -->
+  <el-drawer
+    v-else
+    v-model="drawerOpen"
+    direction="ltr"
+    size="250px"
+    :with-header="false"
+  >
+    <el-menu router :default-active="activePath" class="drawer-menu" @select="handleSelect">
+      <el-menu-item index="/">
+        <el-icon><HomeFilled /></el-icon>
+        <span>首页</span>
+      </el-menu-item>
+      <el-menu-item index="/conversations">
+        <el-icon><Message /></el-icon>
+        <span>会话记录管理</span>
+      </el-menu-item>
+      <el-menu-item index="/users">
+        <el-icon><User /></el-icon>
+        <span>用户管理</span>
+      </el-menu-item>
+    </el-menu>
+  </el-drawer>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { HomeFilled, Message, User } from '@element-plus/icons-vue'
 
-// 菜单数据
-const menuList = [
-  {
-    path: '/',
-    title: '首页',
-    icon: HomeFilled
-  },
-  {
-    path: '/conversations',
-    title: '会话记录管理',
-    icon: Message
-  },
-  {
-    path: '/users',
-    title: '用户管理',
-    icon: User
-  }
-]
-
-// 侧边栏显示状态（手机端）
 const props = defineProps({
-  isOpen: {
+  modelValue: {
     type: Boolean,
     default: false
   }
 })
 
-// 定义事件
-const emit = defineEmits(['closeSidebar'])
+const emit = defineEmits(['update:modelValue'])
+
+const route = useRoute()
 
 // 响应式布局：判断是否为手机端
 const isMobile = ref(false)
 
-// 监听窗口大小变化
 const handleResize = () => {
   isMobile.value = window.innerWidth < 768
-  // 如果不是手机端，关闭侧边栏
-  if (!isMobile.value) {
-    emit('closeSidebar')
+  // 切回非手机端时，确保抽屉关闭
+  if (!isMobile.value && props.modelValue) {
+    emit('update:modelValue', false)
   }
 }
 
-// 初始化响应式状态
 onMounted(() => {
   handleResize()
   window.addEventListener('resize', handleResize)
 })
 
-// 清理事件监听
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
 })
 
-// 菜单点击处理（手机端）
-const handleMenuClick = () => {
-  if (isMobile.value) {
-    emit('closeSidebar')
-  }
-}
+const activePath = computed(() => route.path)
 
-// 遮罩层点击处理（手机端）
-const handleMaskClick = () => {
-  emit('closeSidebar')
+// el-drawer v-model 适配
+const drawerOpen = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
+
+const handleSelect = () => {
+  // 手机端点击菜单项后自动关闭抽屉
+  if (isMobile.value) {
+    emit('update:modelValue', false)
+  }
 }
 </script>
 
-<style scoped>
-.sidebar {
+<style scoped lang="scss">
+.sidebar-desktop {
   position: fixed;
   top: 64px;
   left: 0;
@@ -107,86 +107,20 @@ const handleMaskClick = () => {
   width: 250px;
   background-color: var(--background-color);
   border-right: 1px solid var(--border-color);
-  transition: all 0.3s ease;
   z-index: 99;
   overflow-y: auto;
-  
-  /* 桌面端默认显示，手机端默认隐藏 */
-  @media (max-width: 767px) {
-    transform: translateX(-100%);
-  }
-}
 
-/* 侧边栏打开状态（手机端） */
-.sidebar--open {
-  @media (max-width: 767px) {
-    transform: translateX(0);
-  }
-}
-
-.sidebar-nav {
-  padding: 20px 0;
-}
-
-.nav-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.nav-item {
-  margin-bottom: 4px;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  padding: 12px 24px;
-  color: var(--text-color);
-  text-decoration: none;
-  transition: all 0.3s;
-  
-  &:hover {
-    background-color: var(--border-color-lighter);
-    color: var(--primary-color);
-  }
-  
-  &.is-active {
-    background-color: rgba(64, 158, 255, 0.1);
-    color: var(--primary-color);
-    border-right: 3px solid var(--primary-color);
-  }
-}
-
-.nav-icon {
-  font-size: 18px;
-  margin-right: 12px;
-  width: 20px;
-  text-align: center;
-}
-
-.nav-text {
-  font-size: 14px;
-}
-
-/* 遮罩层（手机端） */
-.sidebar-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 98;
-  @media (min-width: 768px) {
-    display: none;
-  }
-}
-
-/* 平板端侧边栏宽度调整 */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .sidebar {
+  @media (max-width: 1023px) {
     width: 200px;
   }
 }
+
+.sidebar-menu,
+.drawer-menu {
+  border-right: none;
+}
+
+:deep(.el-drawer__body) {
+  padding: 0;
+}
 </style>