index.vue

<template>
  <div class="home">
    <a-layout class="home-page">
      <a-layout-header class="header">
        <div class="header-right">
          <bell-outlined />
        </div>
         <a-dropdown>
            <template #overlay>
              <a-menu @click="handleMenuClick">
                <a-menu-item key="1">
                  <UserOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
            <div class="header-right">
                <RadarChartOutlined /><span>{{ info.name }}</span>
              </div>
          </a-dropdown>
        <div class="header-right">
          <DashOutlined />
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="200" style="background: #ebebeb">
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            style="background: #ebebeb"
          >
            <a-menu-item
              v-for="item,index in list"
              :key="item"
              @click="goNewPage(item,index)"
            >
              <div style="display: flex; align-items: center" >
                <img v-if="index === 0" :src="indexItem !== index?one:five" alt=""  style="width:30px;height: 30px; padding: 5px;"/>
                <img v-else-if="index === 1" :src="indexItem !== index?two:six" alt="" style="width:30px;height: 30px; padding: 5px;" />
                <img  v-else-if="index === 2" :src="indexItem !== index?three:seven" alt="" style="width:30px;height: 30px; padding: 5px;" />
                <img v-else-if="index === 3" :src="indexItem !== index?four:eight" alt="" style="width:30px;height: 30px;padding: 5px;"  />
                <span class="nav-text" >{{ item.name }}</span>
              </div>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
          <a-layout-content
            :style="{
              background: '#fff',
              padding: '24px',
              margin: 0,
            }"
          >
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  BellOutlined,
  RadarChartOutlined,
  DashOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from 'ant-design-vue';
import {onLogOut} from '@/api/index';
import one from '@/assets/img/1.png';
import two from '@/assets/img/2.png';
import three from '@/assets/img/3.png';
import four from '@/assets/img/4.png';
import five from '@/assets/img/5.png';
import six from '@/assets/img/6.png';
import seven from '@/assets/img/7.png';
import eight from '@/assets/img/8.png';
interface FormUser {
  name: String;
  password: String;
}

const router = useRouter();
const store = useStore();
const indexItem = ref<any>('0')
const selectedKeys = ref<string[]>(["1"])
const list = ref<any>()
const info = reactive<FormUser>(store.getters.getUserInfo);
const goNewPage = (e: any,index:any) => {
  indexItem.value = index
  const { path } = e;
  router.push({
    path,
    query:{
    }
  });
};

const handleMenuClick: MenuProps['onClick'] = async(e) => {
      console.log('click', e);
      if(e.key == '1'){
        const data  = await onLogOut()
        router.replace({
          path:'/login'
        })
      }
    };
onMounted(() => {
  const newList:any = [
    {
        path: '/home/paybind',
        name: 'PayBind',
        meta:{
          icon:'icon-fencengpeizhi'
        },
        component:  ()=>import('@/views/pay-bind/index.vue')
      },
    {
        path: '/home/goodscabinet',
        name: '商品橱柜',
        meta:{
          icon:'icon-shangpin'
        },
        component:  ()=>import('@/views/goods-cabinet/index.vue')
      },
      {
        path: '/home/paylist',
        name: '支付链接',
        meta:{
          icon:'icon-zhifubao'
        },
        component:  ()=>import('@/views/pay-list/index.vue')
      },
      {
        path: '/home/payconfig',
        name: '支付配置',
        meta:{
          icon:'icon-fencengpeizhi'
        },
        component:  ()=>import('@/views/pay-config/index.vue')
      },
      {
        path: '/home/payinfo',
        name: '订单详情',
        meta:{
          icon:'icon-gouwuchekong'
        },
        component:  ()=>import('@/views/pay-info/index.vue')
      },
  ]
  list.value = newList.splice(1,4)
  return list
});
defineExpose({
  selectedKeys,
  openKeys: ref<string[]>(["sub1"]),
  goNewPage,
  handleMenuClick,
  one,
  info,
  store,
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}

.ant-menu-submenu-arrow {
  display: none;
}

</style>
<style scoped>
.custom-icons-list :deep(.anticon) {
  margin-right: 6px;
}
</style>
<style lang="less">
.home {
  width: 100%;
  height: 100%;

  .ant-layout {
    height: 871px;
    overflow-y: hidden;
    padding: 0px !important;
    background-color: white;
    height: 100%;
  }
  .ant-layout-sider-children {
    background: rgb(235, 235, 235);
  }
  .ant-layout-has-sider {
    overflow: hidden;
  }

  .home-page {
    height: 100%;
    overflow: hidden;

    .header {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background-color: @primary-color;

      .header-right {
        margin-right: 40px;
      }
    }
  }
}
</style>