fix:网站管理端页面修改

src/components/admin/Menu.vue

@@ -1,7 +1,7 @@
 <!-- src/components/admin/Menu.vue -->
 <template>
   <div class="admin-menu">
-    <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="collapsed"
+    <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="!collapsed"
       @click="handleMenuClick">
       <a-menu-item key="dashboard">
         <template #icon>
@@ -41,11 +41,15 @@ import {
   // SettingOutlined
 } from '@ant-design/icons-vue'
 
+// 定义组件接收的属性
+const props = defineProps<{
+  collapsed?: boolean
+}>()
 const route = useRoute()
 const router = useRouter()
 
 const selectedKeys = ref<string[]>([])
-const collapsed = ref(false)
+
 
 // 监听路由变化，更新选中菜单
 watch(

src/views/admin/index.vue

@@ -2,19 +2,32 @@
 <template>
   <div class="container">
     <!-- 左侧 导航栏 -->
-    <div class="container-left">
+    <div :class="menuCollapsed ? 'container-left' : 'container-left collapsed'">
       <h4>东方低碳</h4>
       <div class="left-nav">
-        <AdminMenu />
+        <AdminMenu :collapsed="menuCollapsed" />
       </div>
     </div>
     <!-- 右侧 主体 -->
     <div class="container-right">
       <div class="top">
-        <MenuFoldOutlined />
+        <MenuFoldOutlined @click="toggleMenu" :rotate="menuCollapsed ? 180 : 0" />
         <div class="account">
-          <img src="../../assets/images/avatar.png" alt="头像" />
-          <span>admin</span>
+          <!-- <img src="../../assets/images/avatar.png" alt="头像" />
+          <span>admin</span> -->
+          <a-dropdown>
+            <div class="account-dropdown-trigger">
+              <img src="../../assets/images/avatar.png" alt="头像" />
+              <span>admin</span>
+            </div>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item key="logout" @click="handleLogout">
+                  <span>退出登录</span>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
         </div>
       </div>
       <div class="breadcrumb">
@@ -31,13 +44,37 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { Modal } from 'ant-design-vue'
 import AdminMenu from '@/components/admin/Menu.vue'
 const route = useRoute()
+const router = useRouter()
+const menuCollapsed = ref(true)
 // 根据当前路由获取面包屑名称
 const currentRouteName = computed(() => {
   return route.meta?.breadcrumb || ''
 })
+// 切换菜单展开/收起状态
+const toggleMenu = () => {
+  menuCollapsed.value = !menuCollapsed.value
+}
+// 处理退出登录
+const handleLogout = () => {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      // 清除登录信息（根据实际项目情况调整）
+      localStorage.removeItem('token')
+      sessionStorage.clear()
+
+      // 跳转到登录页
+      router.push('/admin/login')
+    }
+  })
+}
 
 </script>
 
@@ -55,6 +92,10 @@ const currentRouteName = computed(() => {
     display: flex;
     flex-direction: column;
 
+    &.collapsed {
+      width: 88px;
+    }
+
     h4 {
       color: #ffffff;
       padding: 20px 16px 10px;