wujingjing
2025-01-10 cb8d6096461752e321dda968d39999f3c2f81183
src/layout/component/header/Header.vue
@@ -1,12 +1,18 @@
<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 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>
      </div>
      <el-dialog
         v-model="state.isAnnouncementDialog"
@@ -30,7 +36,7 @@
      <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 notice_box_show" v-show="state.isShowAnnouncement" ref="noticeRef">
         <div class="notice_box_header">
            <span>最新公告</span>
         </div>
@@ -51,10 +57,16 @@
</template>
<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue';
import { onClickOutside } from '@vueuse/core';
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
import { systemNotifyList } from '/@/api/ai/chat';
import router from '/@/router';
import { isSharePage } from '/@/stores/chatRoom';
import { isSharePage, newChatRoomClick } from '/@/stores/chatRoom';
import emitter from '/@/utils/mitt';
import { storeToRefs } from 'pinia';
import pinia from '/@/stores';
import { useThemeConfig } from '/@/stores/themeConfig';
const props = defineProps(['sidebarIsShow']);
let state = reactive({
   isShowAnnouncement: false,
   isAnnouncementDialog: false,
@@ -62,7 +74,7 @@
   announcementContent: '',
   announcementTime: '',
});
const noticeRef = ref(null);
const getSystemNotify = async () => {
   const res = await systemNotifyList();
   res.messages?.forEach((element) => {
@@ -71,6 +83,17 @@
   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) => {
   // routerMeta.value.title = title;
   // triggerRef(routerMeta);
   document.title = `${title} - ${globalTitle.value}`;
};
const handleAnnouncementClick = () => {
   state.isShowAnnouncement = !state.isShowAnnouncement;
};
@@ -91,8 +114,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">
@@ -101,7 +142,7 @@
   height: 42px;
   background-color: #fff;
   top: 0;
   z-index: 0;
   z-index: 1;
}
.notice {