From c7b6030418156a16b841298553848078427b7285 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 22 Dec 2022 14:15:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=B6=88=E6=81=AF?=
=?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/layout/components/Message/index.ts | 3 +
.../layout/components/Message/src/Message.vue | 121 ++++++++++++++++++
.../layout/components/Setting/src/Setting.vue | 2 +
.../src/components/InterfaceDisplay.vue | 12 ++
.../src/layout/components/ToolHeader.vue | 11 +-
yudao-ui-admin-vue3/src/locales/en.ts | 1 +
yudao-ui-admin-vue3/src/locales/zh-CN.ts | 1 +
yudao-ui-admin-vue3/src/store/modules/app.ts | 8 ++
8 files changed, 157 insertions(+), 2 deletions(-)
create mode 100644 yudao-ui-admin-vue3/src/layout/components/Message/index.ts
create mode 100644 yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
diff --git a/yudao-ui-admin-vue3/src/layout/components/Message/index.ts b/yudao-ui-admin-vue3/src/layout/components/Message/index.ts
new file mode 100644
index 000000000..dfe020760
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/layout/components/Message/index.ts
@@ -0,0 +1,3 @@
+import Message from './src/Message.vue'
+
+export { Message }
diff --git a/yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue b/yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
new file mode 100644
index 000000000..d304ef26d
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
@@ -0,0 +1,121 @@
+<template>
+ <div class="message">
+ <el-popover placement="bottom" :width="310" trigger="click">
+ <template #reference>
+ <el-badge :value="noticeList.length" class="item">
+ <Icon icon="ep:bell" :size="18" class="cursor-pointer" />
+ </el-badge>
+ </template>
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="通知(5)" name="first">
+ <div class="message-list">
+ <template v-for="item in noticeList" :key="item.id">
+ <div class="message-item">
+ <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
+ <div class="message-content">
+ <span class="message-title">{{ item.title }}</span>
+ <span class="message-date">{{ item.date }}</span>
+ </div>
+ </div>
+ </template>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="消息(0)" name="second">
+ <div class="message-list">
+ <template v-for="item in messageList" :key="item.id">
+ <div class="message-item">
+ <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
+ <div class="message-content">
+ <span class="message-title">{{ item.title }}</span>
+ <span class="message-date">{{ item.date }}</span>
+ </div>
+ </div>
+ </template>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="代办(0)" name="third">
+ <div class="message-list">
+ <template v-for="item in needList" :key="item.id">
+ <div class="message-item">
+ <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
+ <div class="message-content">
+ <span class="message-title">{{ item.title }}</span>
+ <span class="message-date">{{ item.date }}</span>
+ </div>
+ </div>
+ </template>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </el-popover>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
+
+const activeName = ref('first')
+
+const noticeList = ref([
+ { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
+ { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
+ { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
+ { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
+ { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
+])
+const messageList = ref([
+ { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
+ { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
+ { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
+ { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
+ { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
+])
+const needList = ref([
+ { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
+ { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
+ { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
+ { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
+ { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
+])
+</script>
+
+<style scoped lang="scss">
+.message-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 260px;
+ line-height: 45px;
+}
+.message-list {
+ display: flex;
+ flex-direction: column;
+ .message-item {
+ display: flex;
+ align-items: center;
+ padding: 20px 0;
+ border-bottom: 1px solid var(--el-border-color-light);
+ &:last-child {
+ border: none;
+ }
+ .message-icon {
+ width: 40px;
+ height: 40px;
+ margin: 0 20px 0 5px;
+ }
+ .message-content {
+ display: flex;
+ flex-direction: column;
+ .message-title {
+ margin-bottom: 5px;
+ }
+ .message-date {
+ font-size: 12px;
+ color: var(--el-text-color-secondary);
+ }
+ }
+ }
+}
+</style>
diff --git a/yudao-ui-admin-vue3/src/layout/components/Setting/src/Setting.vue b/yudao-ui-admin-vue3/src/layout/components/Setting/src/Setting.vue
index ac3f13aff..14bb7393d 100644
--- a/yudao-ui-admin-vue3/src/layout/components/Setting/src/Setting.vue
+++ b/yudao-ui-admin-vue3/src/layout/components/Setting/src/Setting.vue
@@ -122,6 +122,8 @@ const copyConfig = async () => {
size: ${appStore.getSize},
// 多语言图标
locale: ${appStore.getLocale},
+ // 消息图标
+ message: ${appStore.getMessage},
// 标签页
tagsView: ${appStore.getTagsView},
// 标签页图标
diff --git a/yudao-ui-admin-vue3/src/layout/components/Setting/src/components/InterfaceDisplay.vue b/yudao-ui-admin-vue3/src/layout/components/Setting/src/components/InterfaceDisplay.vue
index 39030a6f2..f44397c45 100644
--- a/yudao-ui-admin-vue3/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/yudao-ui-admin-vue3/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -57,6 +57,13 @@ const localeChange = (show: boolean) => {
appStore.setLocale(show)
}
+// 消息图标
+const message = ref(appStore.getMessage)
+
+const messageChange = (show: boolean) => {
+ appStore.setMessage(show)
+}
+
// 标签页
const tagsView = ref(appStore.getTagsView)
@@ -164,6 +171,11 @@ watch(
<ElSwitch v-model="locale" @change="localeChange" />
</div>
+ <div class="flex justify-between items-center">
+ <span class="text-14px">{{ t('setting.messageIcon') }}</span>
+ <ElSwitch v-model="message" @change="messageChange" />
+ </div>
+
<div class="flex justify-between items-center">
<span class="text-14px">{{ t('setting.tagsView') }}</span>
<ElSwitch v-model="tagsView" @change="tagsViewChange" />
diff --git a/yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue b/yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
index 674886c4c..493077739 100644
--- a/yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
+++ b/yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
@@ -1,11 +1,12 @@
<script lang="tsx">
import { defineComponent, computed } from 'vue'
+import { Message } from '@/layout/components//Message'
import { Collapse } from '@/layout/components/Collapse'
-import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
-import { SizeDropdown } from '@/layout/components/SizeDropdown'
import { UserInfo } from '@/layout/components/UserInfo'
import { Screenfull } from '@/layout/components/Screenfull'
import { Breadcrumb } from '@/layout/components/Breadcrumb'
+import { SizeDropdown } from '@/layout/components/SizeDropdown'
+import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
@@ -33,6 +34,9 @@ const layout = computed(() => appStore.getLayout)
// 多语言图标
const locale = computed(() => appStore.getLocale)
+// 消息图标
+const message = computed(() => appStore.getMessage)
+
export default defineComponent({
name: 'ToolHeader',
setup() {
@@ -66,6 +70,9 @@ export default defineComponent({
color="var(--top-header-text-color)"
></LocaleDropdown>
) : undefined}
+ {message.value ? (
+ <Message class="hover-trigger" color="var(--top-header-text-color)"></Message>
+ ) : undefined}
<UserInfo class="hover-trigger"></UserInfo>
</div>
</div>
diff --git a/yudao-ui-admin-vue3/src/locales/en.ts b/yudao-ui-admin-vue3/src/locales/en.ts
index 9733d9c93..ed5bf72cc 100644
--- a/yudao-ui-admin-vue3/src/locales/en.ts
+++ b/yudao-ui-admin-vue3/src/locales/en.ts
@@ -80,6 +80,7 @@ export default {
screenfullIcon: 'Screenfull icon',
sizeIcon: 'Size icon',
localeIcon: 'Locale icon',
+ messageIcon: 'Message icon',
tagsView: 'Tags view',
logo: 'Logo',
greyMode: 'Grey mode',
diff --git a/yudao-ui-admin-vue3/src/locales/zh-CN.ts b/yudao-ui-admin-vue3/src/locales/zh-CN.ts
index 71e2c3427..7faf145dc 100644
--- a/yudao-ui-admin-vue3/src/locales/zh-CN.ts
+++ b/yudao-ui-admin-vue3/src/locales/zh-CN.ts
@@ -80,6 +80,7 @@ export default {
screenfullIcon: '全屏图标',
sizeIcon: '尺寸图标',
localeIcon: '多语言图标',
+ messageIcon: '消息图标',
tagsView: '标签页',
logo: '标志',
greyMode: '灰色模式',
diff --git a/yudao-ui-admin-vue3/src/store/modules/app.ts b/yudao-ui-admin-vue3/src/store/modules/app.ts
index 89dd5ed89..2489f87e3 100644
--- a/yudao-ui-admin-vue3/src/store/modules/app.ts
+++ b/yudao-ui-admin-vue3/src/store/modules/app.ts
@@ -18,6 +18,7 @@ interface AppState {
screenfull: boolean
size: boolean
locale: boolean
+ message: boolean
tagsView: boolean
tagsViewIcon: boolean
logo: boolean
@@ -53,6 +54,7 @@ export const useAppStore = defineStore('app', {
screenfull: true, // 全屏图标
size: true, // 尺寸图标
locale: true, // 多语言图标
+ message: true, // 消息图标
tagsView: true, // 标签页
tagsViewIcon: true, // 是否显示标签图标
logo: true, // logo
@@ -121,6 +123,9 @@ export const useAppStore = defineStore('app', {
getLocale(): boolean {
return this.locale
},
+ getMessage(): boolean {
+ return this.message
+ },
getTagsView(): boolean {
return this.tagsView
},
@@ -195,6 +200,9 @@ export const useAppStore = defineStore('app', {
setLocale(locale: boolean) {
this.locale = locale
},
+ setMessage(message: boolean) {
+ this.message = message
+ },
setTagsView(tagsView: boolean) {
this.tagsView = tagsView
},