From bcf533af62edcc93fb0c26a7c526a8235e3b9dba Mon Sep 17 00:00:00 2001
From: lrl <742798240@qq.com>
Date: Mon, 15 Nov 2021 23:19:00 +0800
Subject: [PATCH 1/5] feat: add headerNotice

---
 src/layout/components/navbar.vue             |   9 ++
 src/layout/components/notice/index.vue       | 110 +++++++++++++++++++
 src/layout/components/notice/noticeItem.vue  |  62 +++++++++++
 src/layout/components/notice/noticeList.vue  |  23 ++++
 src/layout/components/sidebar/horizontal.vue |   3 +
 src/layout/types.ts                          |   6 +
 src/plugins/element-plus/index.ts            |  20 +++-
 src/style/sidebar.scss                       |   9 ++
 8 files changed, 238 insertions(+), 4 deletions(-)
 create mode 100644 src/layout/components/notice/index.vue
 create mode 100644 src/layout/components/notice/noticeItem.vue
 create mode 100644 src/layout/components/notice/noticeList.vue

diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue
index badaaf0b5..a5b1eff3f 100644
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -5,6 +5,7 @@ import Hamburger from "./sidebar/hamBurger.vue";
 import { useRouter, useRoute } from "vue-router";
 import { storageSession } from "/@/utils/storage";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
+import Notice from "./notice/index.vue";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { unref, watch, getCurrentInstance } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
@@ -70,6 +71,8 @@ function translationEn() {
     <Breadcrumb class="breadcrumb-container" />
 
     <div class="vertical-header-right">
+      <!-- 通知 -->
+      <Notice />
       <!-- 全屏 -->
       <screenfull v-show="!deviceDetection()" />
       <!-- 国际化 -->
@@ -156,6 +159,12 @@ function translationEn() {
     color: #000000d9;
     justify-content: flex-end;
 
+    :deep(.dropdown-badge) {
+      &:hover {
+        background: #f6f6f6;
+      }
+    }
+
     .screen-full {
       cursor: pointer;
 
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
new file mode 100644
index 000000000..d90a5f8b1
--- /dev/null
+++ b/src/layout/components/notice/index.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import NoticeList from "./noticeList.vue";
+
+const loading = ref(false);
+const activeName = ref("first");
+
+function visibleChange(val) {
+  if (loading.value) {
+    loading.value = false;
+    return;
+  }
+  if (!val) return; //防止加载完成后再次点击出现loading
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 1000);
+}
+
+const noticeList = [
+  {
+    imgUrl:
+      "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+    title: "你收到了 12 份新周报",
+    description: "一年前"
+  },
+  {
+    imgUrl:
+      "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    title: "你推荐的 前端高手 已通过第三轮面试",
+    description: "一年前"
+  },
+  {
+    imgUrl:
+      "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
+    title: "这种模板可以区分多种通知类型",
+    description: "一年前"
+  }
+];
+const newsList = [];
+const agencyList = [];
+</script>
+
+<template>
+  <el-dropdown
+    trigger="click"
+    placement="bottom-end"
+    @visible-change="visibleChange"
+  >
+    <span class="dropdown-badge">
+      <el-badge :value="12" :max="99">
+        <el-icon class="header-notice-icon"><bell /></el-icon>
+      </el-badge>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-tabs
+          v-model="activeName"
+          v-loading="loading"
+          class="dropdown-tabs"
+          :style="{ width: '297px' }"
+        >
+          <el-tab-pane label="通知" name="first">
+            <NoticeList :list="noticeList" />
+          </el-tab-pane>
+          <el-tab-pane label="消息" name="second">
+            <NoticeList :list="newsList" />
+          </el-tab-pane>
+          <el-tab-pane label="代办" name="third">
+            <NoticeList :list="agencyList" />
+          </el-tab-pane>
+        </el-tabs>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.dropdown-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  width: 60px;
+  cursor: pointer;
+
+  .header-notice-icon {
+    font-size: 18px;
+  }
+}
+
+.dropdown-tabs {
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+  border-radius: 4px;
+
+  :deep(.el-tabs__nav-scroll) {
+    display: flex;
+    justify-content: center;
+  }
+
+  :deep(.el-tabs__nav-wrap)::after {
+    height: 1px;
+  }
+
+  :deep(.el-tabs__content) {
+    padding: 0 24px;
+  }
+}
+</style>
diff --git a/src/layout/components/notice/noticeItem.vue b/src/layout/components/notice/noticeItem.vue
new file mode 100644
index 000000000..82692a5f7
--- /dev/null
+++ b/src/layout/components/notice/noticeItem.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import { noticeItemType } from "../../types";
+
+const props = defineProps({
+  noticeItem: {
+    type: Object as PropType<noticeItemType>,
+    default: () => {}
+  }
+});
+</script>
+
+<template>
+  <div class="notice-container">
+    <el-avatar
+      :size="30"
+      :src="props.noticeItem.imgUrl"
+      class="notice-container-avatar"
+    ></el-avatar>
+    <div class="notice-container-text">
+      <div class="container-text-title">{{ props.noticeItem.title }}</div>
+      <div class="container-text-description">
+        {{ props.noticeItem.description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.notice-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  .notice-container-avatar {
+    margin-right: 16px;
+  }
+
+  .notice-container-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+
+    .container-text-title {
+      margin-bottom: 4px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      line-height: 22px;
+      cursor: pointer;
+    }
+
+    .container-text-description {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/notice/noticeList.vue b/src/layout/components/notice/noticeList.vue
new file mode 100644
index 000000000..3f2367252
--- /dev/null
+++ b/src/layout/components/notice/noticeList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import NoticeItem from "./noticeItem.vue";
+import { noticeItemType } from "../../types";
+
+const props = defineProps({
+  list: {
+    type: Array as PropType<Array<noticeItemType>>,
+    default: () => []
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.list.length">
+    <NoticeItem
+      v-for="(item, index) in props.list"
+      :noticeItem="item"
+      :key="index"
+    ></NoticeItem>
+  </div>
+  <el-empty v-else description="暂无数据"></el-empty>
+</template>
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 7fc7715df..4d2e2d759 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -9,6 +9,7 @@ import {
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
+import Notice from "../notice/index.vue";
 import { templateRef } from "@vueuse/core";
 import SidebarItem from "./sidebarItem.vue";
 import { algorithm } from "/@/utils/algorithm";
@@ -138,6 +139,8 @@ onMounted(() => {
       />
     </el-menu>
     <div class="horizontal-header-right">
+      <!-- 通知 -->
+      <Notice />
       <!-- 全屏 -->
       <screenfull v-show="!deviceDetection()" />
       <!-- 国际化 -->
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 1aaabd5b9..5e518eac3 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -71,3 +71,9 @@ export type themeColorsType = {
   rgb: string;
   themeColor: string;
 };
+
+export type noticeItemType = {
+  imgUrl: string;
+  title: string;
+  description: string;
+};
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index fbaad0b5c..d83470347 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -36,7 +36,12 @@ import {
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  ElSwitch
+  ElSwitch,
+  ElBadge,
+  ElTabs,
+  ElTabPane,
+  ElAvatar,
+  ElEmpty
 } from "element-plus";
 
 // https://element-plus.org/zh-CN/component/icon.html
@@ -54,7 +59,8 @@ import {
   RefreshRight,
   ArrowDown,
   Close,
-  CloseBold
+  CloseBold,
+  Bell
 } from "@element-plus/icons";
 
 const components = [
@@ -93,7 +99,12 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  ElSwitch
+  ElSwitch,
+  ElBadge,
+  ElTabs,
+  ElTabPane,
+  ElAvatar,
+  ElEmpty
 ];
 // icon
 export const iconComponents = [
@@ -110,7 +121,8 @@ export const iconComponents = [
   RefreshRight,
   ArrowDown,
   Close,
-  CloseBold
+  CloseBold,
+  Bell
 ];
 
 const plugins = [ElLoading];
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 35d6e9515..b82d9d796 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -212,6 +212,15 @@
       color: $subMenuActiveText;
       justify-content: flex-end;
 
+      .dropdown-badge {
+        height: 62px;
+        color: $subMenuActiveText;
+
+        &:hover {
+          background: $menuHover;
+        }
+      }
+
       .screen-full {
         cursor: pointer;
 

From 6b064bdef9500d61299022a79512ac45a9c7d01a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 16 Nov 2021 22:21:05 +0800
Subject: [PATCH 2/5] fix: icon

---
 src/utils/storage/responsive.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts
index 6288b47b5..4df889f00 100644
--- a/src/utils/storage/responsive.ts
+++ b/src/utils/storage/responsive.ts
@@ -14,7 +14,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
           meta: {
             title: "message.hshome",
             i18n: true,
-            icon: "el-icon-s-home",
+            icon: "HomeFilled",
             showLink: true
           }
         }

From 5d9638758be0075bc3fcf7aa5ce569c1b35d77db Mon Sep 17 00:00:00 2001
From: lrl <742798240@qq.com>
Date: Tue, 16 Nov 2021 23:46:34 +0800
Subject: [PATCH 3/5] perf: headerNotice

---
 src/layout/components/notice/data.ts        | 130 +++++++++++++++++++
 src/layout/components/notice/index.vue      |  73 +++--------
 src/layout/components/notice/noticeItem.vue | 135 ++++++++++++++++++--
 src/layout/components/notice/noticeList.vue |   4 +-
 src/layout/types.ts                         |   6 -
 5 files changed, 268 insertions(+), 80 deletions(-)
 create mode 100644 src/layout/components/notice/data.ts

diff --git a/src/layout/components/notice/data.ts b/src/layout/components/notice/data.ts
new file mode 100644
index 000000000..4b0402b54
--- /dev/null
+++ b/src/layout/components/notice/data.ts
@@ -0,0 +1,130 @@
+export interface ListItem {
+  avatar: string;
+  title: string;
+  datetime: string;
+  type: string;
+  description: string;
+  status?: "" | "success" | "warning" | "info" | "danger";
+  extra?: string;
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  list: ListItem[];
+}
+
+export const noticesData: TabItem[] = [
+  {
+    key: "1",
+    name: "通知",
+    list: [
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+        title: "你收到了 12 份新周报",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+        title: "你推荐的 前端高手 已通过第三轮面试",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
+        title: "这种模板可以区分多种通知类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title:
+          "展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      }
+    ]
+  },
+  {
+    key: "2",
+    name: "消息",
+    list: [
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "李白 评论了你",
+        description: "长风破浪会有时,直挂云帆济沧海",
+        datetime: "一年前",
+        type: "2"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "李白 回复了你",
+        description: "行路难，行路难，多歧路，今安在。",
+        datetime: "一年前",
+        type: "2"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+        title: "标题",
+        description:
+          "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
+        datetime: "一年前",
+        type: "2"
+      }
+    ]
+  },
+  {
+    key: "3",
+    name: "代办",
+    list: [
+      {
+        avatar: "",
+        title: "任务名称",
+        description: "任务需要在 2021-11-16 20:00 前启动",
+        datetime: "",
+        extra: "未开始",
+        status: "info",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "第三方紧急代码变更",
+        description:
+          "一拳提交于 2021-11-16，需在 2021-11-18 前完成代码变更任务",
+        datetime: "",
+        extra: "马上到期",
+        status: "danger",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "信息安全考试",
+        description: "指派小仙于 2021-12-12 前完成更新并发布",
+        datetime: "",
+        extra: "已耗时 8 天",
+        status: "warning",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "vue-pure-admin 版本发布",
+        description: "vue-pure-admin 版本发布",
+        datetime: "",
+        extra: "进行中",
+        type: "3"
+      }
+    ]
+  }
+];
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index d90a5f8b1..90579c7da 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -1,74 +1,30 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import NoticeList from "./noticeList.vue";
+import { noticesData } from "./data";
 
-const loading = ref(false);
-const activeName = ref("first");
-
-function visibleChange(val) {
-  if (loading.value) {
-    loading.value = false;
-    return;
-  }
-  if (!val) return; //防止加载完成后再次点击出现loading
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-  }, 1000);
-}
-
-const noticeList = [
-  {
-    imgUrl:
-      "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
-    title: "你收到了 12 份新周报",
-    description: "一年前"
-  },
-  {
-    imgUrl:
-      "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
-    title: "你推荐的 前端高手 已通过第三轮面试",
-    description: "一年前"
-  },
-  {
-    imgUrl:
-      "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
-    title: "这种模板可以区分多种通知类型",
-    description: "一年前"
-  }
-];
-const newsList = [];
-const agencyList = [];
+const activeName = ref(noticesData[0].name);
+const notices = ref(noticesData);
 </script>
 
 <template>
-  <el-dropdown
-    trigger="click"
-    placement="bottom-end"
-    @visible-change="visibleChange"
-  >
+  <el-dropdown trigger="click" placement="bottom-end">
     <span class="dropdown-badge">
-      <el-badge :value="12" :max="99">
+      <el-badge :value="10" :max="99">
         <el-icon class="header-notice-icon"><bell /></el-icon>
       </el-badge>
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-tabs
-          v-model="activeName"
-          v-loading="loading"
-          class="dropdown-tabs"
-          :style="{ width: '297px' }"
-        >
-          <el-tab-pane label="通知" name="first">
-            <NoticeList :list="noticeList" />
-          </el-tab-pane>
-          <el-tab-pane label="消息" name="second">
-            <NoticeList :list="newsList" />
-          </el-tab-pane>
-          <el-tab-pane label="代办" name="third">
-            <NoticeList :list="agencyList" />
-          </el-tab-pane>
+        <el-tabs v-model="activeName" class="dropdown-tabs">
+          <template v-for="item in notices" :key="item.key">
+            <el-tab-pane
+              :label="`${item.name}(${item.list.length})`"
+              :name="item.name"
+            >
+              <NoticeList :list="item.list" />
+            </el-tab-pane>
+          </template>
         </el-tabs>
       </el-dropdown-menu>
     </template>
@@ -90,6 +46,7 @@ const agencyList = [];
 }
 
 .dropdown-tabs {
+  width: 336px;
   background-color: #fff;
   box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
   border-radius: 4px;
diff --git a/src/layout/components/notice/noticeItem.vue b/src/layout/components/notice/noticeItem.vue
index 82692a5f7..4110e87cb 100644
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -1,31 +1,108 @@
 <script setup lang="ts">
-import { PropType } from "vue";
-import { noticeItemType } from "../../types";
+import { ListItem } from "./data";
+import { ref, PropType, nextTick } from "vue";
 
 const props = defineProps({
   noticeItem: {
-    type: Object as PropType<noticeItemType>,
+    type: Object as PropType<ListItem>,
     default: () => {}
   }
 });
+
+const titleRef = ref(null);
+const descriptionRef = ref(null);
+const titleTooltip = ref(false);
+const descriptionTooltip = ref(false);
+
+function hoverTitle() {
+  titleTooltip.value = false;
+  nextTick(() => {
+    titleRef.value?.scrollWidth > titleRef.value?.clientWidth
+      ? (titleTooltip.value = true)
+      : (titleTooltip.value = false);
+  });
+}
+
+function hoverDescription(event, description) {
+  // currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
+  let tempTag = document.createElement("span");
+  tempTag.innerText = description;
+  tempTag.className = "getDescriptionWidth";
+  document.querySelector("body").appendChild(tempTag);
+  let currentWidth = (
+    document.querySelector(".getDescriptionWidth") as HTMLSpanElement
+  ).offsetWidth;
+  document.querySelector(".getDescriptionWidth").remove();
+
+  // cellWidth为容器的宽度
+  const cellWidth = event.target.offsetWidth;
+
+  // 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
+  currentWidth > 2 * cellWidth
+    ? (descriptionTooltip.value = true)
+    : (descriptionTooltip.value = false);
+}
 </script>
 
 <template>
   <div class="notice-container">
     <el-avatar
+      v-if="props.noticeItem.avatar"
       :size="30"
-      :src="props.noticeItem.imgUrl"
+      :src="props.noticeItem.avatar"
       class="notice-container-avatar"
     ></el-avatar>
     <div class="notice-container-text">
-      <div class="container-text-title">{{ props.noticeItem.title }}</div>
-      <div class="container-text-description">
-        {{ props.noticeItem.description }}
+      <div class="notice-text-title">
+        <el-tooltip
+          popper-class="notice-title-popper"
+          :disabled="!titleTooltip"
+          :content="props.noticeItem.title"
+          placement="top-start"
+        >
+          <div
+            ref="titleRef"
+            class="notice-title-content"
+            @mouseover="hoverTitle"
+          >
+            {{ props.noticeItem.title }}
+          </div>
+        </el-tooltip>
+        <el-tag
+          v-if="props.noticeItem?.extra"
+          :type="props.noticeItem?.status"
+          size="small"
+          class="notice-title-extra"
+          >{{ props.noticeItem?.extra }}
+        </el-tag>
+      </div>
+
+      <el-tooltip
+        popper-class="notice-title-popper"
+        :disabled="!descriptionTooltip"
+        :content="props.noticeItem.description"
+        placement="top-start"
+      >
+        <div
+          ref="descriptionRef"
+          class="notice-text-description"
+          @mouseover="hoverDescription($event, props.noticeItem.description)"
+        >
+          {{ props.noticeItem.description }}
+        </div>
+      </el-tooltip>
+      <div class="notice-text-datetime">
+        {{ props.noticeItem.datetime }}
       </div>
     </div>
   </div>
 </template>
 
+<style>
+.notice-title-popper {
+  max-width: 238px;
+}
+</style>
 <style scoped lang="scss">
 .notice-container {
   display: flex;
@@ -36,6 +113,7 @@ const props = defineProps({
 
   .notice-container-avatar {
     margin-right: 16px;
+    background: #fff;
   }
 
   .notice-container-text {
@@ -44,18 +122,47 @@ const props = defineProps({
     justify-content: space-between;
     flex: 1;
 
-    .container-text-title {
-      margin-bottom: 4px;
-      color: rgba(0, 0, 0, 0.65);
+    .notice-text-title {
+      display: flex;
+      margin-bottom: 8px;
+      font-weight: 400;
       font-size: 14px;
-      line-height: 22px;
+      line-height: 1.5715;
+      color: rgba(0, 0, 0, 0.85);
       cursor: pointer;
+
+      .notice-title-content {
+        flex: 1;
+        width: 200px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .notice-title-extra {
+        float: right;
+        margin-top: -1.5px;
+        font-weight: 400;
+      }
     }
 
-    .container-text-description {
+    .notice-text-description,
+    .notice-text-datetime {
+      font-size: 12px;
+      line-height: 1.5715;
       color: rgba(0, 0, 0, 0.45);
-      font-size: 14px;
-      line-height: 22px;
+    }
+
+    .notice-text-description {
+      display: -webkit-box;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .notice-text-datetime {
+      margin-top: 4px;
     }
   }
 }
diff --git a/src/layout/components/notice/noticeList.vue b/src/layout/components/notice/noticeList.vue
index 3f2367252..90f6e986f 100644
--- a/src/layout/components/notice/noticeList.vue
+++ b/src/layout/components/notice/noticeList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { PropType } from "vue";
 import NoticeItem from "./noticeItem.vue";
-import { noticeItemType } from "../../types";
+import { ListItem } from "./data";
 
 const props = defineProps({
   list: {
-    type: Array as PropType<Array<noticeItemType>>,
+    type: Array as PropType<Array<ListItem>>,
     default: () => []
   }
 });
diff --git a/src/layout/types.ts b/src/layout/types.ts
index b1946d7c0..82ac8144a 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -73,9 +73,3 @@ export type themeColorsType = {
   rgb: string;
   themeColor: string;
 };
-
-export type noticeItemType = {
-  imgUrl: string;
-  title: string;
-  description: string;
-};

From 89dc4e50525fbeb5ee4a4893b59c029542f4d857 Mon Sep 17 00:00:00 2001
From: lrl <742798240@qq.com>
Date: Wed, 17 Nov 2021 18:10:01 +0800
Subject: [PATCH 4/5] perf: notice add scrollbar

---
 src/layout/components/notice/data.ts        | 16 ++++++++++++++++
 src/layout/components/notice/index.vue      | 21 +++++++++++++++++----
 src/layout/components/notice/noticeItem.vue |  1 -
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/layout/components/notice/data.ts b/src/layout/components/notice/data.ts
index 4b0402b54..b918e6298 100644
--- a/src/layout/components/notice/data.ts
+++ b/src/layout/components/notice/data.ts
@@ -51,6 +51,22 @@ export const noticesData: TabItem[] = [
         datetime: "一年前",
         description: "",
         type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title: "左侧图标用于区分不同的类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
+      },
+      {
+        avatar:
+          "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+        title: "左侧图标用于区分不同的类型",
+        datetime: "一年前",
+        description: "",
+        type: "1"
       }
     ]
   },
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 90579c7da..e039ad8dd 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -5,12 +5,17 @@ import { noticesData } from "./data";
 
 const activeName = ref(noticesData[0].name);
 const notices = ref(noticesData);
+
+let noticesNum = ref(0);
+notices.value.forEach(notice => {
+  noticesNum.value += notice.list.length;
+});
 </script>
 
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
     <span class="dropdown-badge">
-      <el-badge :value="10" :max="99">
+      <el-badge :value="noticesNum" :max="99">
         <el-icon class="header-notice-icon"><bell /></el-icon>
       </el-badge>
     </span>
@@ -22,7 +27,11 @@ const notices = ref(noticesData);
               :label="`${item.name}(${item.list.length})`"
               :name="item.name"
             >
-              <NoticeList :list="item.list" />
+              <el-scrollbar max-height="404px">
+                <div class="noticeList-container">
+                  <NoticeList :list="item.list" />
+                </div>
+              </el-scrollbar>
             </el-tab-pane>
           </template>
         </el-tabs>
@@ -51,6 +60,10 @@ const notices = ref(noticesData);
   box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
   border-radius: 4px;
 
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
   :deep(.el-tabs__nav-scroll) {
     display: flex;
     justify-content: center;
@@ -60,8 +73,8 @@ const notices = ref(noticesData);
     height: 1px;
   }
 
-  :deep(.el-tabs__content) {
-    padding: 0 24px;
+  :deep(.noticeList-container) {
+    padding: 15px 24px 0 24px;
   }
 }
 </style>
diff --git a/src/layout/components/notice/noticeItem.vue b/src/layout/components/notice/noticeItem.vue
index 4110e87cb..900469050 100644
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -15,7 +15,6 @@ const titleTooltip = ref(false);
 const descriptionTooltip = ref(false);
 
 function hoverTitle() {
-  titleTooltip.value = false;
   nextTick(() => {
     titleRef.value?.scrollWidth > titleRef.value?.clientWidth
       ? (titleTooltip.value = true)

From 0380d4a17acfd2821b5efac5f62fc8f6f713cfdf Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Nov 2021 22:31:10 +0800
Subject: [PATCH 5/5] style: notices style

---
 src/layout/components/notice/index.vue | 2 +-
 src/plugins/element-plus/index.ts      | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index e039ad8dd..108bebda8 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -27,7 +27,7 @@ notices.value.forEach(notice => {
               :label="`${item.name}(${item.list.length})`"
               :name="item.name"
             >
-              <el-scrollbar max-height="404px">
+              <el-scrollbar max-height="330px">
                 <div class="noticeList-container">
                   <NoticeList :list="item.list" />
                 </div>
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index d83470347..380943f44 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -23,7 +23,6 @@ import {
   ElInput,
   ElForm,
   ElFormItem,
-  ElLoading,
   ElPopover,
   ElPopper,
   ElTooltip,
@@ -41,7 +40,10 @@ import {
   ElTabs,
   ElTabPane,
   ElAvatar,
-  ElEmpty
+  ElEmpty,
+  // 指令
+  ElLoading,
+  ElInfiniteScroll
 } from "element-plus";
 
 // https://element-plus.org/zh-CN/component/icon.html
@@ -125,7 +127,7 @@ export const iconComponents = [
   Bell
 ];
 
-const plugins = [ElLoading];
+const plugins = [ElLoading, ElInfiniteScroll];
 
 export function useElementPlus(app: App) {
   components.push(...iconComponents);