feat: 添加消息图标面板

xingyu
1 parent 2d5571bc
Showing 8 changed files with 157 additions and 2 deletions
yudao-ui-admin-vue3/src/layout/components/Message/index.ts
yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
yudao-ui-admin-vue3/src/layout/components/Setting/src/Setting.vue
yudao-ui-admin-vue3/src/layout/components/Setting/src/components/InterfaceDisplay.vue
yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
yudao-ui-admin-vue3/src/locales/en.ts
yudao-ui-admin-vue3/src/locales/zh-CN.ts
yudao-ui-admin-vue3/src/store/modules/app.ts
+import Message from './src/Message.vue'
+
+export { Message }
+<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>
@@ -122,6 +122,8 @@ const copyConfig = async () =&gt; {
       size: ${appStore.getSize},
       // 多语言图标
       locale: ${appStore.getLocale},
+      // 消息图标
+      message: ${appStore.getMessage},
       // 标签页
       tagsView: ${appStore.getTagsView},
       // 标签页图标
@@ -57,6 +57,13 @@ const localeChange = (show: boolean) =&gt; {
   appStore.setLocale(show)
 }
+// 消息图标
+const message = ref(appStore.getMessage)
+
+const messageChange = (show: boolean) => {
+  appStore.setMessage(show)
+}
+
 // 标签页
 const tagsView = ref(appStore.getTagsView)
@@ -165,6 +172,11 @@ watch(
     </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" />
     </div>
 <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(() =&gt; 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>
@@ -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',
@@ -80,6 +80,7 @@ export default {
     screenfullIcon: '全屏图标',
     sizeIcon: '尺寸图标',
     localeIcon: '多语言图标',
+    messageIcon: '消息图标',
     tagsView: '标签页',
     logo: '标志',
     greyMode: '灰色模式',
@@ -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(&#39;app&#39;, {
       screenfull: true, // 全屏图标
       size: true, // 尺寸图标
       locale: true, // 多语言图标
+      message: true, // 消息图标
       tagsView: true, // 标签页
       tagsViewIcon: true, // 是否显示标签图标
       logo: true, // logo
@@ -121,6 +123,9 @@ export const useAppStore = defineStore(&#39;app&#39;, {
     getLocale(): boolean {
       return this.locale
     },
+    getMessage(): boolean {
+      return this.message
+    },
     getTagsView(): boolean {
       return this.tagsView
     },
@@ -195,6 +200,9 @@ export const useAppStore = defineStore(&#39;app&#39;, {
     setLocale(locale: boolean) {
       this.locale = locale
     },
+    setMessage(message: boolean) {
+      this.message = message
+    },
     setTagsView(tagsView: boolean) {
       this.tagsView = tagsView
     },