DigitalHuman

wujingjing

2025-04-07 457cc6cf166d3b6c22be4f78c1db8802a7fbb4c7

 src/layout/component/header/Header.vue

@@ -1,39 +1,20 @@
<template>
   <div class="top_text flex justify-between px-6 items-center">
      <div v-if="routerMeta.showTitle" class="font-bold flex items-center cursor-pointer" @click="goBack">
         <span class="flex-center">
            <SvgIcon name="ele-ArrowLeft" />
         </span>
         <span class="text-sm">
            {{ routerMeta.title }}
         </span>
      </div>

      <div class="notice">
         <el-badge :value="`${state.announcementList.length}`">
            <el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">系统公告</el-button>
         </el-badge>
         <div class="notice_box notice_box_show" v-show="state.isShowAnnouncement">
            <div class="notice_box_header">
               <span>最新公告</span>
            </div>
            <div class="notice_box_body">
               <div
                  class="notice_item"
                  v-for="item in state.announcementList"
                  :key="item.notify_id"
                  @click="announcementContentClick(item)"
               >
                  <div class="flex items-center">
                     <p class="set-circle"></p>
                     <p>{{ item.notify_message }}</p>
                  </div>

                  <p class="text-right mr-[19px]">
                     <span>{{ item.notify_time }}</span>
                  </p>
               </div>
            </div>
   <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 :to="firstToPath" class="nav-item" active-class="active">
               <i class="icon-park-outline-robot"></i>
               智能助手
            </router-link>
            <router-link to="/workspace/situation" class="nav-item" active-class="active">
               <i class="icon-park-outline-workbench"></i>
               个人工作台
            </router-link>
			
            <!-- <router-link to="/gis/situation" class="nav-item" active-class="active">
               <i class="icon-park-outline-system"></i>
               GIS系统
            </router-link> -->
         </div>
      </div>
      <el-dialog
@@ -54,12 +35,44 @@
         </template>
      </el-dialog>
   </div>
   <div class="notice " v-if="!isSharePage">
      <el-badge :value="`${state.announcementList.length}`" :hidden="announcementIsRead || state.announcementList?.length === 0">
         <el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">系统公告</el-button>
      </el-badge>
      <div class="notice_box notice_box_show" v-show="state.isShowAnnouncement" ref="noticeRef">
         <div class="notice_box_header">
            <span>最新公告</span>
         </div>
         <div class="notice_box_body">
            <div class="notice_item" v-for="item in state.announcementList" :key="item.notify_id" @click="announcementContentClick(item)">
               <div class="flex items-center">
                  <p class="set-circle"></p>
                  <p>{{ item.notify_message }}</p>
               </div>

               <p class="text-right mr-[19px]">
                  <span>{{ item.notify_time }}</span>
               </p>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue';
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 pinia from '/@/stores';
import { activeChatRoom, activeRoomId, isSharePage, newChatRoomClick } from '/@/stores/chatRoom';
import { useThemeConfig } from '/@/stores/themeConfig';
import emitter from '/@/utils/mitt';
import { userInfoKey } from '/@/utils/request';
import { Local } from '/@/utils/storage';

const props = defineProps(['sidebarIsShow']);
let state = reactive({
   isShowAnnouncement: false,
   isAnnouncementDialog: false,
@@ -67,17 +80,65 @@
   announcementContent: '',
   announcementTime: '',
});
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}`;
const getIsRead = () => {
   if (!userInfo.value?.id) return false;
   const isRead = Local.get(readKey) ?? false;
   return isRead;
};

const setRead = (isRead: boolean) => {
   if (!userInfo.value?.id) return;
   announcementIsRead.value = isRead;
   Local.set(readKey, isRead);
};
const announcementIsRead = ref(getIsRead());

//#endregion
const noticeRef = ref(null);
const getSystemNotify = async () => {
   const res = await systemNotifyList();
   res.messages.forEach((element) => {
   res.messages?.forEach((element) => {
      element.notify_time = element.notify_time.slice(0, 10);
   });
   state.announcementList = res.messages.sort(sortData).slice(0, 5);
   state.announcementList = res.messages?.sort(sortData).slice(0, 5) ?? [];
};
const routerMeta = computed(() => router.currentRoute.value.meta);
const stores = useThemeConfig(pinia);
const { themeConfig } = storeToRefs(stores);
const globalTitle = computed(() => themeConfig.value.globalTitle);

const setHeaderTitle = (title: string) => {
   document.title = `${title} - ${globalTitle.value}`;
};

const handleAnnouncementClick = () => {
   state.isShowAnnouncement = !state.isShowAnnouncement;
   if (!announcementIsRead.value && state.isShowAnnouncement) {
      setRead(true);
   }
};

const goBack = () => {
@@ -96,8 +157,26 @@
const handleCloseAnnouncement = () => {
   state.isAnnouncementDialog = false;
};
// 区域关闭最新公告
onClickOutside(
   noticeRef,
   () => {
      state.isShowAnnouncement = false;
   },
   {
      ignore: ['.el-overlay-dialog'],
   }
);
const newChatClick = () => {
   newChatRoomClick();
};
onMounted(() => {
   getSystemNotify();
   emitter.on('updateHeaderTitle', setHeaderTitle);
});

onUnmounted(() => {
   emitter.off('updateHeaderTitle', setHeaderTitle);
});
</script>
<style scoped lang="scss">
@@ -106,20 +185,21 @@
   height: 42px;
   background-color: #fff;
   top: 0;
   z-index: 10;
   z-index: 1;
}

.notice {
   position: fixed;
   top: 18px;
   top: 12px;
   right: 30px;
   z-index: 12;
   z-index: 1;
   .set-notice {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 17.38px;
      color: #9598b3;
      z-index: 0;
   }
   .notice_box_show {
      width: 300px !important;
@@ -134,7 +214,7 @@
   }
   .notice_box {
      position: absolute;
      z-index: 12;
      z-index: 1;
      top: calc(100% + 20px);
      right: -10px;
      width: 0;
@@ -202,4 +282,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>