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

<template>
   <a-layout-header class="header-mobile" v-if="isMobile" :style="{backgroundColor: headerBgColor}">
      <a-row>
        <a-col :span="6" >
          <search />
        </a-col>
        <a-col :span="6" class="df-center">
          <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
        </a-col>
        <a-col :span="6" class="df-center"  >
          <user />
        </a-col>
      </a-row>
  </a-layout-header>
  <a-layout-header class="header-pc" v-else :style="{backgroundColor: headerBgColor, height: '54px'}">
      <a-row style="width: 100%;height: 54px;" justify="start" >
        <a-col :span="15" style="height: 54px;" >
        <a-menu
          mode="horizontal"
          :style="{ lineHeight: '54px', border: 'none' , marginLeft: '-20px'}"
          :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="9" style="height: 54px;" >
          <a-row :gutter="[8, 8]" justify="end"  style="height: 54px;" >
            <a-col  class="df-center" style="height: 54px;" >
              <search />
            </a-col>
            <a-col class="df-center"  style="height: 54px;">
              <a-tooltip placement="bottom">
                <template #title>
                  <span>添加网页到桌面</span>
                </template>
                <a-button type="text" @click="addDeskToApp" >  <DesktopOutlined  style="font-size: 22px;" /></a-button>
              </a-tooltip>
            </a-col>
            <a-col class="df-center" style="height: 54px;">
              <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
            </a-col>
            <a-col class="df-center"  style="height: 54px;">
              <user v-if="!AppConfig.userInfoHidden" />
            </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'
import { useDeviceType } from '@/hooks'
import search from './components/search/index.vue'
import { DesktopOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import AppConfig from 'AppConfig'
import { useIsMicro } from '@/hooks/effect'

const route = useRoute()

const router = useRouter()

const appRouter = useAppRouter()

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

const designStore = useDesignStore()

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

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

const isMobile = useDeviceType()

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

const changeRouter = (route: ROUTER.RoutesProps) => {
  selectedKeys.value = [route.path]
  appRouter.changeNavbarRoute(route)
}

const addDeskToApp = () => {
  if ('beforeinstallprompt' in window) {
    // 在支持 PWA 安装的浏览器中，手动触发安装提示
    window.beforeinstallprompt.prompt()
    window.beforeinstallprompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('用户已接受安装提示')
      } else {
        console.log('用户已拒绝安装提示')
      }
    })
  } else {
    message.error('该浏览器暂不支持此操作')
  }
}

</script>

<style lang="less" scoped >

.header-mobile {
  padding: 0 24px;
}

.header-pc {
  width: 100%;
  position: relative;
  height: 54px;
  z-index: 20;
  // box-shadow: 0 1px 4px rgba(0,21,41,.12);

  overflow: hidden;
  padding: 0;
  padding-right: 32px;
}

.df-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>