对接后端

src/App.vue

@@ -1,174 +1,25 @@
 <template>
-  <!-- 根据路由判断是否显示主布局 -->
+  <div class="app-container">
-  <template v-if="isAuthPage">
+    <TopBar />
-    <router-view></router-view>
+    <div class="main-content">
-  </template>
+      <router-view v-slot="{ Component }">
-  
+        <component :is="Component" />
-  <template v-else>
+      </router-view>
-    <div class="app-container">
-      <SideBar :menu-items="menuItems" />
-      <div class="main-wrapper" :class="{ 'sidebar-collapsed': isCollapsed }">
-        <TopBar />
-        <div class="main-content">
-          <router-view></router-view>
-        </div>
-      </div>
     </div>
-  </template>
+  </div>
 </template>
 
-<script setup lang="ts">
+<style scoped>
-import { ref, provide, computed } from 'vue'
-import { useRoute } from 'vue-router'
-import TopBar from '@/components/layout/TopBar.vue'
-import SideBar from '@/components/layout/SideBar.vue'
-
-const route = useRoute()
-const isCollapsed = ref(false)
-provide('isCollapsed', isCollapsed)
-
-// 判断是否是认证相关页面
-const isAuthPage = computed(() => {
-  return ['/login', '/register', '/forgot-password'].includes(route.path)
-})
-
-const menuItems = ref([
-  {
-    icon: 'House',
-    title: '首页',
-    path: '/'
-  },
-  {
-    icon: 'DataBoard',
-    title: '数据看板',
-    path: '/dashboard'
-  },
-  {
-    icon: 'VideoCamera',
-    title: '视频服务',
-    path: '/video-service'
-  },
-  {
-    icon: 'FirstAidKit',
-    title: '医疗服务',
-    path: '/medical'
-  },
-  {
-    icon: 'Van',
-    title: '出行服务',
-    path: '/transportation'
-  },
-  {
-    icon: 'Bowl',
-    title: '饮食服务',
-    path: '/diet'
-  },
-  {
-    icon: 'Microphone',
-    title: '语音助手',
-    path: '/voice-assistant'
-  },
-  {
-    icon: 'Calendar',
-    title: '活动中心',
-    path: '/activities'
-  },
-  {
-    icon: 'Monitor',
-    title: '设备管理',
-    path: '/devices'
-  },
-  {
-    icon: 'Service',
-    title: '生活服务',
-    path: '/life-service'
-  },
-  {
-    icon: 'ChatDotRound',
-    title: '社区交流',
-    path: '/community'
-  },
-  {
-    icon: 'Bell',
-    title: '新闻资讯',
-    path: '/news'
-  },
-  {
-    icon: 'Headset',
-    title: '音乐服务',
-    path: '/music'
-  },
-  {
-    icon: 'ChatLineRound',
-    title: 'AI助手',
-    path: '/ai-assistant'
-  },
-  {
-    icon: 'Monitor',
-    title: '娱乐服务',
-    path: '/entertainment'
-  },
-  {
-    icon: 'Shop',
-    title: '智慧商城',
-    path: '/shop'
-  },
-  {
-    icon: 'Setting',
-    title: '系统设置',
-    path: '/settings'
-  }
-])
-
-provide('menuItems', menuItems)  // 提供给子组件使用
-</script>
-
-<style>
-/* 全局样式 */
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
 .app-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  display: flex;
-}
+  flex-direction: column;
-
-.main-wrapper {
-  margin-left: 240px;
-  transition: margin-left 0.3s;
-}
-
-.main-wrapper.sidebar-collapsed {
-  margin-left: 64px;
 }
 
 .main-content {
-  padding: 80px 20px 20px;
+  flex: 1;
-  min-height: calc(100vh - 60px);
+  position: relative;
-}
+  z-index: 1;
-
-/* 全局滚动条样式 */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(144, 147, 153, 0.3);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(144, 147, 153, 0.5);
 }
 </style>
 

src/components/layout/TopBar.vue

@@ -97,6 +97,8 @@ const handleLogout = async () => {
   height: 60px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1000;
 }
 
 .logo {
@@ -110,6 +112,8 @@ const handleLogout = async () => {
   display: flex;
   align-items: center;
   gap: 16px;
+  position: relative;
+  z-index: 1001;
 }
 
 .user-info {
@@ -155,4 +159,8 @@ const handleLogout = async () => {
 .user-info:hover .el-icon--right {
   transform: rotate(180deg);
 }
+
+:deep(.el-dropdown-menu) {
+  z-index: 1002 !important;
+}
 </style>

src/views/DashboardView.vue

@@ -967,4 +967,8 @@ onBeforeUnmount(() => {
     width: 100%;
   }
 }
+
+.dashboard-container {
+  z-index: 1;
+}
 </style> 

src/views/HomeView.vue

@@ -352,4 +352,9 @@ const stats = [
     margin-bottom: 20px;
   }
 }
+
+.home-container {
+  /* ... 其他样式 ... */
+  z-index: 1;  /* 确保比 TopBar 的 z-index 小 */
+}
 </style>