xiaodou-ai-admin/src/layout/navbar.vue

<template>
  <a-layout-header class="header" :style="{backgroundColor: headerBgColor}">
      <a-row   >
        <a-col :span="18" >
        <a-menu
          mode="horizontal"
          :style="{ lineHeight: '64px', border: 'none' }"
          :selectedKeys="selectedKeys"
      >
          <a-menu-item
            v-for="route in appRouter.$state.router.navbar.route"
            :key="route.path"
            @click="changeRouter(route)"
          >
            {{route.name}}
          </a-menu-item>
        </a-menu>
        </a-col>
        <a-col :span="4" >
          <a-row :gutter="[8, 8]" justify="end" >
            <a-col class="df-center" >
              <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
            </a-col>
            <a-col class="df-center" >
              <user />
            </a-col>
          </a-row>
        </a-col>
      </a-row>
  </a-layout-header>
</template>

<script lang="ts" setup >
import { computed, onMounted, ref } from 'vue'
import { useAppRouter } from '@/store/router'
import user from './user.vue'
import { useRouter, useRoute } from 'vue-router'
import { routes } from '@/router/index'
import { IconTsx } from '@/components/MicroComponents/index'
import { useDesignStore } from '@/store'

const logoPng = require('@/assets/logo.png')

const router = useRouter()

const route = useRoute()

const appRouter = useAppRouter()

const selectedKeys = ref<string[]>()

const designStore = useDesignStore()

console.log('designStore:', !!designStore.theme, designStore.theme)

const iconName = computed(() => designStore.theme ? 'sun' : 'moon')

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

const changeTheme = () => {
  designStore.changeModeltheme()
}

const changeRouter = (route: ROUTER.RoutesProps) => {
  if (route.link) {
    window.open(route.path)
  } else {
    selectedKeys.value = [route.path]
    appRouter.changeNavbar(route.path, '')
  }
}

const hasCurrentRourte = (children: ROUTER.RoutesProps[]): boolean => {
  let r = false
  children.forEach(item => {
    if (item.path === route.path) {
      r = true
    }

    if (item.children && item.children.length) {
      item.children.forEach(_ => {
        if (_.path === route.path) {
          r = true
        }
      })
    }
  })

  return r
}

onMounted(() => {
  routes.forEach(item => {
    if (item.children && hasCurrentRourte(item.children)) {
      selectedKeys.value = [item.path]
      appRouter.changeNavbar(item.path, 'init')
      appRouter.changeSiderRoute()
    }
  })
})

</script>

<style lang="less" scoped >
.header {
  // width: 100%;
  // position: absolute;
  // z-index: 2;
  // background-color: #fff;
}

.df-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>