From 580d2338e820e1b4b9a5d929c0cc362ae846f392 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Sat, 7 Dec 2024 22:46:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=90=8E=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 175 +++----------------------------
 src/components/layout/TopBar.vue |   8 ++
 src/views/DashboardView.vue      |   4 +
 src/views/HomeView.vue           |   5 +
 4 files changed, 30 insertions(+), 162 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1e3cc05..04c7d84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,174 +1,25 @@
 <template>
-  <!-- 根据路由判断是否显示主布局 -->
-  <template v-if="isAuthPage">
-    <router-view></router-view>
-  </template>
-  
-  <template v-else>
-    <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 class="app-container">
+    <TopBar />
+    <div class="main-content">
+      <router-view v-slot="{ Component }">
+        <component :is="Component" />
+      </router-view>
     </div>
-  </template>
+  </div>
 </template>
 
-<script setup lang="ts">
-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;
-}
-
+<style scoped>
 .app-container {
   min-height: 100vh;
-  background: #f5f7fa;
-}
-
-.main-wrapper {
-  margin-left: 240px;
-  transition: margin-left 0.3s;
-}
-
-.main-wrapper.sidebar-collapsed {
-  margin-left: 64px;
+  display: flex;
+  flex-direction: column;
 }
 
 .main-content {
-  padding: 80px 20px 20px;
-  min-height: calc(100vh - 60px);
-}
-
-/* 全局滚动条样式 */
-::-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);
+  flex: 1;
+  position: relative;
+  z-index: 1;
 }
 </style>
 
diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
index b8039a8..587822b 100644
--- a/src/components/layout/TopBar.vue
+++ b/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>
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index e0938bd..51c2987 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -967,4 +967,8 @@ onBeforeUnmount(() => {
     width: 100%;
   }
 }
+
+.dashboard-container {
+  z-index: 1;
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index aa2927c..4dc9ab8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -352,4 +352,9 @@ const stats = [
     margin-bottom: 20px;
   }
 }
+
+.home-container {
+  /* ... 其他样式 ... */
+  z-index: 1;  /* 确保比 TopBar 的 z-index 小 */
+}
 </style>