From c6d8ea02ade42a78e9f4a2304e8e1c5f67853d91 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 06 三月 2025 16:17:06 +0800
Subject: [PATCH] 创建工单
---
src/layout/component/header/Header.vue | 203 ++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 170 insertions(+), 33 deletions(-)
diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue
index 42e0181..980d7e6 100644
--- a/src/layout/component/header/Header.vue
+++ b/src/layout/component/header/Header.vue
@@ -1,29 +1,55 @@
<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>
-
- <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">
+ <el-dialog
+ v-model="state.isAnnouncementDialog"
+ width="500"
+ :before-close="handleCloseAnnouncement"
+ :modal="false"
+ title="鍏憡鍐呭"
+ :align-center="true"
+ >
+ <div class="set-content">
+ <span class="notice-content">{{ state.announcementContent }}</span>
+ </div>
+ <template #footer>
+ <p class="text-right text-[#555]">
+ <span>{{ state.announcementTime }}</span>
+ </p>
+ </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>
- <p class="text-right mr-[23px]">
- <span>{{ item.notify_time }}</span>
- </p>
</div>
+
+ <p class="text-right mr-[19px]">
+ <span>{{ item.notify_time }}</span>
+ </p>
</div>
</div>
</div>
@@ -31,28 +57,106 @@
</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, newChatRoomClick } from '/@/stores/chatRoom';
+import emitter from '/@/utils/mitt';
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Local } from '/@/utils/storage';
+import { userInfoKey } from '/@/utils/request';
+const props = defineProps(['sidebarIsShow']);
let state = reactive({
isShowAnnouncement: false,
+ isAnnouncementDialog: false,
announcementList: [],
+ announcementContent: '',
+ announcementTime: '',
});
-onMounted(() => {
- getSystemNotify();
-});
+//#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();
- state.announcementList = res.messages || [];
+ res.messages?.forEach((element) => {
+ element.notify_time = element.notify_time.slice(0, 10);
+ });
+ 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 = () => {
router.back();
};
+//鏍规嵁鎸囧畾瀛楁 瑙勫垯鎺掑簭 杩欓噷鏄幏鍙栨椂闂寸殑鏃堕棿鎴崇劧鍚庢瘮杈�
+function sortData(a, b) {
+ return new Date(b.notify_time).getTime() - new Date(a.notify_time).getTime();
+}
+//鍏憡鍐呭鐐瑰嚮浜嬩欢
+const announcementContentClick = (item) => {
+ state.announcementContent = item.notify_message;
+ state.announcementTime = item.notify_time.slice(0, 10);
+ state.isAnnouncementDialog = true;
+};
+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">
.top_text {
@@ -60,24 +164,26 @@
height: 42px;
background-color: #fff;
top: 0;
- z-index: 10;
+ z-index: 1;
}
.notice {
position: fixed;
top: 18px;
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;
- height: 400px !important;
+ height: 470px !important;
+ // height: 100% !important;
padding: 0 20px 10px;
::-webkit-scrollbar {
height: 0;
@@ -87,7 +193,7 @@
}
.notice_box {
position: absolute;
- z-index: 12;
+ z-index: 1;
top: calc(100% + 20px);
right: -10px;
width: 0;
@@ -110,18 +216,49 @@
}
&_body {
height: calc(100% - 40px);
- overflow: auto;
+ // overflow: auto;
.notice_item {
cursor: pointer;
padding: 10px;
- width: 280px;
+ width: 272px;
border-top: 1px solid #efefef;
color: #767a97;
position: relative;
+ box-sizing: border-box;
line-height: 19px;
font-size: 12px;
+ .set-circle {
+ width: 3px;
+ height: 3px;
+ position: absolute;
+ top: 17px;
+ left: 0;
+ transform: scale(0.8) translate(50%, -50%);
+ display: block;
+ padding: 2px;
+ min-width: 3px;
+ min-height: 3px;
+ text-align: center;
+ border-radius: 50%;
+ background: #ff423d;
+ color: #fff;
+ font-size: 12px;
+ }
}
}
}
}
+
+.set-content {
+ padding: 0px 20px;
+ .notice-content {
+ white-space: pre-wrap;
+ font-size: 14px;
+ }
+}
+:deep(.el-dialog__footer) {
+ border-top: unset;
+ padding: 10px 20px 20px;
+ box-sizing: border-box;
+}
</style>
--
Gitblit v1.9.3