DashboardLayout.vue

<template>
  <div class="dashboard-container">
    <el-container class="dashboard-wrapper">
      <!-- 侧边栏 -->
      <el-aside 
        :width="isCollapse ? '64px' : '240px'" 
        class="dashboard-sidebar"
        :class="{ 'sidebar-collapsed': isCollapse, 'sidebar-expanded': !isCollapse }">
        <div class="sidebar-header">
          <div class="sidebar-logo" :class="{ 'logo-center': isCollapse }">
            <img 
              src="../assets/icons/a74fada241bbe2bf828e041e685f9486904a94e9.png" 
              alt="Logo" 
              class="logo-image"
            >
            <transition name="fade">
              <div v-if="!isCollapse" class="logo-text">
                <h2 class="logo-title">上门随销</h2>
                <p class="logo-subtitle">商机管理平台</p>
              </div>
            </transition>
          </div>
        </div>

        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#001529"
          text-color="#ffffff"
          active-text-color="#409EFF"
          unique-opened
          router
          class="sidebar-menu">
          <template v-for="item in menuItems">
            <!-- 有子菜单的项 -->
            <el-submenu 
              v-if="item.subItems" 
              :key="item.title"
              :index="item.title" >
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="subItem in item.subItems"
                :key="subItem.url"
                v-if="hasPermissionChild(subItem.url)"
                :index="subItem.url">
                <i :class="subItem.icon"></i>
                <span slot="title">{{ subItem.title }}</span>
              </el-menu-item>
            </el-submenu>

            <!-- 无子菜单的项 -->
            <el-menu-item 
              v-else-if="item.url && hasPermission(item.url)"
              :key="item.title"
              :index="item.url"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>

        <div class="sidebar-footer">
          <div class="sidebar-divider"></div>
          <div class="user-dropdown" :class="{ 'user-center': isCollapse }">
            <el-dropdown @command="handleUserCommand">
              <div class="user-info">
                <el-avatar :size="isCollapse ? 32 : 40" :src="userAvatar">
                  {{ userInitial }}
                </el-avatar>
                <transition name="fade">
                  <div v-if="!isCollapse" class="user-details">
                    <span class="user-name">{{ acc.accountName }}</span>
                    <span class="user-region">{{ acc.areaName }}</span>
                  </div>
                </transition>
              </div>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="profile">
                  <i class="el-icon-user"></i>
                  个人信息
                </el-dropdown-item> -->
                <el-dropdown-item command="logout">
                  <i class="el-icon-switch-button"></i>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-aside>

      <!-- 主内容区 -->
      <el-container style="min-width: 1400px;overflow:auto;">
        <!-- 顶部导航栏 -->
        <el-header class="dashboard-header">
          <div class="header-left">
            <el-button 
              type="text" 
              class="sidebar-toggle"
              @click="toggleCollapse"
            >
              <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
            </el-button>
            <div class="header-divider"></div>
            
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
                {{ item.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-right">
            <span v-if="isDemoMode" class="demo-badge">演示模式</span>
            <span class="current-region">当前区域: {{ acc.areaName }}</span>
          </div>
        </el-header>

        <!-- 页面内容 -->
        <el-main class="dashboard-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

// 导航菜单配置
const menuItems = [
  {
    title: "全部商机",
    url: "/opportunities",
    icon: "el-icon-document",
    permissions: [
      "view_grid_opportunities",
      "view_county_opportunities",
      "view_city_opportunities",
      "view_all_opportunities"
    ]
  },
  {
    title: "网格查询",
    url: "/grid-query",
    icon: "el-icon-map-location",
    permissions: [
      "view_grid_opportunities",
      "view_county_opportunities",
      "view_city_opportunities",
      "view_all_opportunities",
      "manage_system"
    ]
  },
  {
    title: "系统管理",
    icon: "el-icon-setting",
    permissions: ["manage_system"],
    subItems: [
      {
        title: "人员管理",
        url: "/system/personnel",
        icon: "el-icon-user"
      },
      {
        title: "商机管理",
        url: "/system/opportunity-config",
        icon: "el-icon-price-tag"
      },
      {
        title: "账号管理",
        url: "/system/accounts",
        icon: "el-icon-user-solid"
      }
    ]
  }
]

// 面包屑配置
const breadcrumbMap = {
  "/opportunities": "商机管理",
  "/grid-query": "网格查询",
  "/system": "系统管理",
  "/system/personnel": "人员管理",
  "/system/opportunity-config": "商机管理",
  "/system/accounts": "账号管理"
}

export default {
  name: 'DashboardLayout',
  data() {
    return {
      isCollapse: false,
      menuItems: menuItems,
      breadcrumbMap: breadcrumbMap,
      acc: JSON.parse(localStorage.getItem('accountInfo'))
    }
  },
  computed: {
    userInitial() {
      return this.acc.accountName ? this.acc.accountName.charAt(0) : ''
    },
    userAvatar() {
      return ''
    },
    isDemoMode() {
      return sessionStorage.getItem('demoMode') == 'true'
    },
    activeMenu() {
      const { meta, path } = this.$route
      // 如果设置了 meta.activeMenu，则使用它作为激活菜单
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    breadcrumbs() {
      const pathSegments = this.$route.path.split('/').filter(Boolean)
      const breadcrumbs = []
      let currentPath = ''

      for (const segment of pathSegments) {
        currentPath += `/${segment}`
        const title = this.breadcrumbMap[currentPath] || segment
        breadcrumbs.push({ title, path: currentPath })
      }

      return breadcrumbs
    }
  },
  methods: {
    ...mapActions(['logout']),
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    hasPermission(url) {
      if(url=='/grid-query' && this.acc.gridCode){
        return false
      }

      return true
    },
    hasPermissionChild(url){
      if(url == '/system/opportunity-config'){
        if(this.acc.cityCode && !this.acc.countyCode){
          return true
        }

        return false
      }

      return true
    },
    async handleUserCommand(command) {
      this.apiReq.logout().then(res=>{
        if(res.code == '200'){
          localStorage.removeItem('accountInfo')
          localStorage.removeItem('tokenInfo')

          this.$router.push('/login')
        }else{
          this.$message.error(res.message)
        }
      })

      // if (command == 'logout') {
      //   await this.logout()
      //   this.$message.success('退出登录成功')
      //   this.$router.push('/login')
      // } else if (command == 'profile') {
      //   this.$message.info('个人信息功能开发中')
      // }
    }
  },
  created() {
    // 初始化认证状态
    this.$store.dispatch('initializeAuth')
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  height: 100vh;
  background-color: #f7f9fc;

  .dashboard-wrapper {
    height: 100%;
    .dashboard-sidebar {
      background-color: #001529;
      transition: width 0.3s ease;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

      .sidebar-header {
        padding: 24px 0;
        background-color: #002140;

        .sidebar-logo {
          display: flex;
          align-items: center;
          padding: 0 24px;
          transition: padding 0.3s;

          &.logo-center {
            justify-content: center;
            padding: 0;
          }

          .logo-image {
            width: 32px;
            height: 32px;
            border-radius: 6px;
          }

          .logo-text {
            margin-left: 12px;

            .logo-title {
              font-size: 18px;
              font-weight: 600;
              color: white;
              margin: 0 0 2px 0;
            }

            .logo-subtitle {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.65);
              margin: 0;
            }
          }
        }
      }

      .sidebar-menu {
        border: none;
        flex: 1;

        ::v-deep .el-menu-item,
        ::v-deep .el-submenu__title {
          &:hover {
            background-color: #1890ff !important;
          }

          &.is-active {
            background-color: #1890ff !important;
            color: white !important;
          }
        }

        ::v-deep .el-submenu {
          .el-submenu__title {
            &:hover {
              background-color: #000c17 !important;
            }
          }
        }
      }

      .sidebar-footer {
        padding: 16px 0;

        .sidebar-divider {
          height: 1px;
          background-color: rgba(255, 255, 255, 0.06);
          margin: 0 16px 16px;
        }

        .user-dropdown {
          padding: 0 16px;

          &.user-center {
            display: flex;
            justify-content: center;
          }

          .user-info {
            display: flex;
            align-items: center;
            cursor: pointer;

            .user-details {
              margin-left: 12px;

              .user-name {
                display: block;
                color: white;
                font-size: 14px;
                line-height: 1.2;
              }

              .user-region {
                display: block;
                color: rgba(255, 255, 255, 0.65);
                font-size: 12px;
                line-height: 1.2;
                margin-top: 4px;
              }
            }
          }
        }
      }
    }

    .dashboard-header {
      background-color: white;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 64px;

      .header-left {
        display: flex;
        align-items: center;

        .sidebar-toggle {
          font-size: 20px;
          padding: 0;
          margin-right: 16px;
        }

        .header-divider {
          height: 24px;
          width: 1px;
          background-color: #e8eaec;
          margin-right: 16px;
        }
      }

      .header-right {
        display: flex;
        align-items: center;

        .demo-badge {
          background-color: #e6f7ff;
          color: #1890ff;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          margin-right: 16px;
        }

        .current-region {
          color: #606266;
          font-size: 14px;
        }
      }
    }

    .dashboard-main {
      padding: 24px;
      overflow-y: auto;
    }
  }
}

// 动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-container {
    .dashboard-wrapper {
      .dashboard-sidebar {
        &.sidebar-expanded {
          position: fixed;
          z-index: 1000;
          height: 100vh;
        }
      }
    }
  }
}
</style>