xiaodou-ai-admin/src/layout/components/Sidebar/index.vue

<template>
  <a-button
    v-if="isMobile"
    class="open-icon"
    type="primary"
    @click="openDrawer"
  >
    <right-outlined />
  </a-button>
  <a-drawer
      placement="left"
      :closable="false"
      :open="drawerVisible"
      :get-container="false"
      :style="{ position: 'absolute' }"
      width="240px"
      @close="drawerVisible = false"
    >
    <a-layout-sider
        :trigger="null"
        v-model:collapsed="collapsed"
        collapsible
        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
      >
        <a-menu
          v-model:selectedKeys="selectedKeys"
          :openKeys="openKeys"
          mode="inline"
          :style="{ borderRight: 0 }"
        >
          <sidebar-item
            :item="route"
            v-for="route in sidebarRoute"
            :key="route.path"
            :base-path="route.path"
          />
        </a-menu>
    </a-layout-sider>
  </a-drawer>
  <a-layout-sider
    v-if="!isMobile"
    :style="{backgroundColor: bgColor, overflow: 'hidden', overflowY: 'scroll', boxShadow: `0 1px 4px rgba(0,21,41,.12)`, paddingTop: '6px'}"
    breakpoint="lg"
    collapsible
    v-model:collapsed="collapsed"
  >
    <div class="logo" >
      <img :src="logoPng" alt="" v-if="logoPng">
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      :openKeys="openKeys"
      mode="inline"
      :style="{ borderRight: 0 }"
    >
      <sidebar-item
        :item="route"
        v-for="route in sidebarRoute"
        :key="route.path"
        :base-path="route.path"
      />
    </a-menu>
  </a-layout-sider>

</template>

<script lang="ts" setup >

import { ref, computed, watch, onMounted } from 'vue'
import SidebarItem from './SidebarItem.vue'
import { useRouter, useRoute } from 'vue-router'
import { useDesignStore } from '@/store'
import { useDeviceType } from '@/hooks'
import { RightOutlined } from '@ant-design/icons-vue'
import { routes } from '@/router/index'
import AppConfig from 'AppConfig'
import { useIsMicro } from '@/hooks/effect'

const designStore = useDesignStore()

const isMobile = useDeviceType()

const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')

const route = useRoute()

const router = useRouter()

const collapsed = ref<boolean>(true)

const logoPng = computed(() => collapsed.value ? AppConfig.logoContract : AppConfig.logoExpand)

const sidebarRoute = ref<any>()

const selectedKeys = ref<string[]>()

const openKeys = ref<string[]>()

const drawerVisible = ref<boolean>(false)

const compatibleRoutes = !useIsMicro() ? router.getRoutes().filter(item => item.path !== '/cloudlink') : router.getRoutes()

watch(
  () => route.path,
  () => {
    sidebarRoute.value = isMobile ? routes : router.getRoutes().find(item => item.path === route.matched[useIsMicro() ? 1 : 0].path)?.children
    selectedKeys.value = [route.path]
    openKeys.value = [route.matched[1].path]
  },
  {
    immediate: true
  }
)

const openDrawer = () => drawerVisible.value = true

onMounted(() => {
  console.log('我渲染了嗎')
})

</script>

<style lang="less" scoped >
/deep/ .ant-layout-sider-children {
  margin-top: -4px;
}

.ant-layout-sider::-webkit-scrollbar {
  width: 0;
}

.logo {
  width: 100%;
  height: 53px;
  margin: 0px 0px;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  img {
    width: 60%;
    height: 70%;
  }
}

.mobile-sider {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.open-icon {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 200px;
  left: 0px;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/deep/ .ant-layout-sider-trigger {
  background-color: #fff !important;
}

</style>