From 2b8b2cac4fe3f05474459a034bc4034f2d7aa0cb Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 四月 2025 10:14:06 +0800
Subject: [PATCH] Merge branch 'test' into huishui_iframe
---
src/layout/component/header/Header.vue | 157 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 118 insertions(+), 39 deletions(-)
diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue
index f752425..c10cbd8 100644
--- a/src/layout/component/header/Header.vue
+++ b/src/layout/component/header/Header.vue
@@ -1,17 +1,20 @@
<template>
- <div class="top_text flex justify-between px-6 items-center">
- <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="text-sm">
- {{ 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 :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
@@ -31,38 +34,27 @@
</p>
</template>
</el-dialog>
- </div>
- <div class="notice" v-if="!isSharePage">
- <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" 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>
+ <el-tooltip content="鏈�灏忓寲" placement="bottom">
+ <span class="cursor-pointer ywifont ywicon-tuichuquanping" size="15px" @click="smallScreenClick" />
+ </el-tooltip>
</div>
</template>
<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, reactive, ref, triggerRef } from 'vue';
+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 pinia from '/@/stores';
+import { activeChatRoom, newChatRoomClick, sidebarIsShow } from '/@/stores/chatRoom';
+import { ParentRegister } from '/@/stores/global';
+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,
@@ -71,6 +63,53 @@
announcementContent: '',
announcementTime: '',
});
+
+const smallScreenClick = () => {
+ const pathname = window.location.pathname;
+ const basePath = pathname.replace(/\/web\/index\.html$/, '');
+ window.location.href = basePath || '/';
+ ParentRegister.notify?.({
+ type: 'fullScreen',
+ value: false,
+ });
+};
+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();
@@ -80,14 +119,19 @@
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;
+ if (!announcementIsRead.value && state.isShowAnnouncement) {
+ setRead(true);
+ }
};
const goBack = () => {
@@ -139,7 +183,7 @@
.notice {
position: fixed;
- top: 18px;
+ top: 12px;
right: 30px;
z-index: 1;
.set-notice {
@@ -231,4 +275,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