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, ref } from 'vue'
import { useAppRouter } from '@/store/router'
import user from './user.vue'
import { useRoute, useRouter } from 'vue-router'
import { IconTsx } from '@/components/MicroComponents/index'
import { useDesignStore } from '@/store'

const route = useRoute()

const router = useRouter()

const appRouter = useAppRouter()

const selectedKeys = ref<string[]>([route.matched[0].path])

const designStore = useDesignStore()

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]
    router.push(route.path)
  }
}

</script>

<style lang="less" scoped >

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