partner-admin/src/layouts/AdminLayout.vue

<template>
  <a-layout class="admin-layout">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" collapsible :theme="'dark'" style="background: #1a1a1a; position: fixed; height: 100vh; z-index: 10; left: 0; top: 0;">
      <div class="logo">
        <h1 v-if="!collapsed">蜂快·运营商平台</h1>
        <h1 v-else>蜂快</h1>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        style="background: #1a1a1a;"
      >
        <a-menu-item key="dashboard" @click="() => $router.push('/dashboard')">
          <template #icon><dashboard-outlined /></template>
          <span>仪表盘</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    
    <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px', transition: 'all 0.2s' }">
      <!-- 头部 -->
      <a-layout-header class="layout-header" :style="{ width: `calc(100% - ${collapsed ? 80 : 200}px)` }">
        <!-- 面包屑导航 -->
        <div class="header-breadcrumb">
          <a-breadcrumb>
            <a-breadcrumb-item>
              <home-outlined />
            </a-breadcrumb-item>
            <a-breadcrumb-item>蜂快·运营商平台</a-breadcrumb-item>
            <a-breadcrumb-item>{{ currentPageTitle }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        
        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <a-avatar :src="userInfo?.avatar" />
              <span style="margin-left: 8px">{{ userInfo?.nickname || userInfo?.name || '用户' }}</span>
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="0">
                  <a href="javascript:;" @click="handleLogout">退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      
      <!-- 内容区 -->
      <a-layout-content class="layout-content">
        <div class="content-container">
          <router-view></router-view>
        </div>
      </a-layout-content>
      
      <!-- 底部 -->
      <a-layout-footer class="layout-footer">
        蜂快·运营商平台 ©2025
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { 
  DashboardOutlined,
  HomeOutlined
} from '@ant-design/icons-vue';

export default {
  name: 'AdminLayout',
  components: {
    DashboardOutlined,
    HomeOutlined
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    
    const collapsed = computed({
      get: () => store.getters.sidebarCollapsed,
      set: (value) => store.commit('TOGGLE_SIDEBAR')
    });
    
    const userInfo = computed(() => store.getters.userInfo);
    const selectedKeys = ref([]);
    
    // 获取当前页面标题
    const currentPageTitle = computed(() => {
      return route.meta.title || '页面';
    });
    
    // 根据当前路由设置选中的菜单项
    watch(() => route.path, (path) => {
      const key = path.split('/')[1] || 'dashboard';
      selectedKeys.value = [key];
    }, { immediate: true });
    
    // 检查是否已登录
    onMounted(() => {
      if (!store.getters.isAuthenticated) {
        router.push('/login');
      }
    });
    
    const handleLogout = () => {
      store.dispatch('logout');
      router.push('/login');
    };
    
    return {
      collapsed,
      selectedKeys,
      userInfo,
      handleLogout,
      currentPageTitle
    };
  }
};
</script>

<style scoped>
.admin-layout {
  min-height: 100vh;
}

.logo {
  height: 32px;
  margin: 16px;
  color: white;
  text-align: center;
  overflow: hidden;
  background: #1a1a1a;
}

.logo h1 {
  color: white;
  font-size: 18px;
  margin: 0;
}

.layout-header {
  background: #fff;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  transition: width 0.2s;
}

.header-breadcrumb {
  margin-left: 24px;
  height: 64px;
  display: flex;
  align-items: center;
}

.header-right {
  margin-right: 24px;
  height: 64px;
  display: flex;
  align-items: center;
}

.header-right .ant-dropdown-link {
  display: flex;
  align-items: center;
  color: #1a1a1a;
  cursor: pointer;
  padding: 0 12px;
  height: 64px;
  transition: all 0.3s;
}

.header-right .ant-dropdown-link:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

.layout-content {
  margin-top: 64px; /* 头部高度 */
  padding: 16px;
  overflow-y: auto;
  height: calc(100vh - 64px - 70px); /* 减去头部和底部的高度 */
}

.content-container {
  padding: 24px;
  background: #fff;
  min-height: 360px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.layout-footer {
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
  padding: 16px;
  height: 70px;
}

:deep(.ant-layout-sider-trigger) {
  background: #000000;
}

:deep(.ant-menu-dark) {
  background: #1a1a1a;
}

:deep(.ant-menu-dark .ant-menu-item-selected) {
  background-color: #333333;
}

:deep(.ant-menu-dark .ant-menu-item) {
  margin: 4px 0;
  border-radius: 4px;
  margin-left: 8px;
  margin-right: 8px;
  width: calc(100% - 16px);
}

:deep(.ant-menu-dark .ant-menu-item:hover) {
  background-color: #333333;
}

:deep(.ant-layout-sider) {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

:deep(.ant-dropdown-menu) {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

:deep(.ant-dropdown-menu-item:hover) {
  background-color: rgba(26, 26, 26, 0.05);
}

:deep(.ant-avatar) {
  background-color: #1a1a1a;
}

/* 链接样式 */
:deep(a) {
  color: #1a1a1a;
  transition: all 0.3s;
}

:deep(a:hover) {
  color: #333333;
}

/* 下拉菜单中的链接 */
:deep(.ant-dropdown-menu-item a) {
  color: #1a1a1a;
  transition: all 0.3s;
}

:deep(.ant-dropdown-menu-item a:hover) {
  color: #333333;
}

/* 白色背景上的图标 */
:deep(.ant-layout-header .anticon),
:deep(.ant-layout-content .anticon) {
  color: #1a1a1a;
}

/* 深色背景上的图标 */
:deep(.ant-menu-dark .anticon) {
  color: #fff;
}
</style>