From a5bac22f6e10b1b662e5ae41055714f234b63d37 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期四, 03 四月 2025 17:27:04 +0800 Subject: [PATCH] GIS系统隐藏 --- src/layout/component/header/Header.vue | 196 ++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 155 insertions(+), 41 deletions(-) diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue index 23f5564..fa42f6f 100644 --- a/src/layout/component/header/Header.vue +++ b/src/layout/component/header/Header.vue @@ -1,39 +1,19 @@ <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 +34,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 +79,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) => { 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 +156,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 +184,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 +213,7 @@ } .notice_box { position: absolute; - z-index: 12; + z-index: 1; top: calc(100% + 20px); right: -10px; width: 0; @@ -202,4 +281,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> -- Gitblit v1.9.3