activeTopMenuStyle

wujingjing

2025-04-09 dd58c1d3a27ba48a5df050aab7c586bb9b988914

 src/layout/component/header/Header.vue

@@ -1,17 +1,11 @@
<template>
   <div class="top_text flex justify-between px-6 items-center" :class="sidebarIsShow ? 'px-6' : 'pl-[unset] pr-6'">
      <div class="flex-items-center">
         <div
            class="flex-items-center space-x-3 mr-4 pr-4 border border-solid border-r-1 border-l-0 border-y-0 border-gray-300"
            v-if="!sidebarIsShow"
         ></div>
         <div v-if="routerMeta.showTitle" class="font-bold flex items-center">
            <span class="flex-center cursor-pointer" v-if="routerMeta.showBack" @click="goBack">
               <SvgIcon name="ele-ArrowLeft" />
            </span>
            <span class="">
               {{ routerMeta.title }}
            </span>
   <div class="top_text flex justify-between px-6 items-center pl-[unset] pr-6">
      <div class="flex-items-center h-full">
         <div class="nav-menu">
            <router-link v-for="item in menuList" :to="item.path" :key="item.label" class="nav-item" active-class="active">
               <i class="icon-park-outline-robot"></i>
               {{ item.label }}
            </router-link>
         </div>
      </div>
      <el-dialog
@@ -58,16 +52,17 @@

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import { systemNotifyList } from '/@/api/ai/chat';
import router from '/@/router';
import { isSharePage, newChatRoomClick } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { storeToRefs } from 'pinia';
import pinia from '/@/stores';
import { activeChatRoom, activeRoomId, activeTopMenuStyle, isSharePage, newChatRoomClick, TopMenuStyle } from '/@/stores/chatRoom';
import { useThemeConfig } from '/@/stores/themeConfig';
import { Local } from '/@/utils/storage';
import emitter from '/@/utils/mitt';
import { userInfoKey } from '/@/utils/request';
import { Local } from '/@/utils/storage';

const props = defineProps(['sidebarIsShow']);
let state = reactive({
   isShowAnnouncement: false,
@@ -76,6 +71,52 @@
   announcementContent: '',
   announcementTime: '',
});

const menuList = computed(() => {
   const smartAssistant = {
      path: firstToPath.value,
      label: '智能助手',
   };

   const personalWorkbench = {
      path: '/workspace/situation',
      label: '个人工作台',
   };
   const gis = {
      path: '/gis/situation',
      label: 'GIS系统',
   };

   switch (activeTopMenuStyle.value) {
      case TopMenuStyle.Normal:
         return [smartAssistant, personalWorkbench];
      case TopMenuStyle.Gis:
         return [smartAssistant, gis];

      default:
         return [smartAssistant];
   }
});
const firstToPath = computed(() => {
   if (!activeChatRoom.value)
      return {
         path: '/home',
      };
   const result = activeChatRoom.value.isInitial
      ? {
            path: '/home',
            query: {
               id: activeChatRoom.value.id,
            },
        }
      : {
            path: '/ask_answer',
            query: { id: activeChatRoom.value.id },
        };

   return result;
});

//#region ====================== 公告是否看过 ======================
const userInfo = ref(Local.get(userInfoKey));
const readKey = `announcementIsRead_${userInfo.value?.id}`;
@@ -107,9 +148,6 @@
const globalTitle = computed(() => themeConfig.value.globalTitle);

const setHeaderTitle = (title: string) => {
   // routerMeta.value.title = title;
   // triggerRef(routerMeta);

   document.title = `${title} - ${globalTitle.value}`;
};

@@ -169,7 +207,7 @@

.notice {
   position: fixed;
   top: 18px;
   top: 12px;
   right: 30px;
   z-index: 1;
   .set-notice {
@@ -261,4 +299,39 @@
   padding: 10px 20px 20px;
   box-sizing: border-box;
}

.nav-menu {
   display: flex;
   align-items: center;
   height: 100%;
   gap: 8px;

   .nav-item {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 100%;
      color: var(--el-text-color-regular);
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s ease;
      border-bottom: 2px solid transparent;
      gap: 4px;

      i {
         font-size: 16px;
      }

      &:hover {
         color: var(--el-color-primary);
         background-color: rgba(var(--el-color-primary-rgb), 0.1);
      }

      &.active {
         color: var(--el-color-primary);
         border-bottom-color: var(--el-color-primary);
         background-color: rgba(var(--el-color-primary-rgb), 0.1);
      }
   }
}
</style>