feat: add notice (#47)

src/layouts/default/LayoutHeader.tsx

@@ -22,6 +22,7 @@ import { useModal } from '/@/components/Modal/index';
 import { errorStore } from '/@/store/modules/error';
 import { useGo } from '/@/hooks/web/usePage';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
+import NoticeAction from './actions/notice/NoticeActionItem.vue';
 
 export default defineComponent({
   name: 'DefaultLayoutHeader',
@@ -85,7 +86,14 @@ export default defineComponent({
       const {
         useErrorHandle,
         showLogo,
-        headerSetting: { theme: headerTheme, useLockPage, showRedo, showGithub, showFullScreen },
+        headerSetting: {
+          theme: headerTheme,
+          useLockPage,
+          showRedo,
+          showGithub,
+          showFullScreen,
+          showNotice,
+        },
         menuSetting: { mode, type: menuType, split: splitMenu, topMenuAlign },
         showBreadCrumb,
       } = getProjectConfig;
@@ -163,6 +171,20 @@ export default defineComponent({
                     }}
                   </Tooltip>
                 )}
+                {showNotice && (
+                  <div>
+                    <Tooltip>
+                      {{
+                        title: () => '消息中心',
+                        default: () => (
+                          <div class={`layout-header__action-item`}>
+                            <NoticeAction />
+                          </div>
+                        ),
+                      }}
+                    </Tooltip>
+                  </div>
+                )}
                 {showRedo && (
                   <Tooltip>
                     {{

src/layouts/default/actions/notice/NoticeActionItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <Popover title="" trigger="click">
+      <Badge :count="count" :numberStyle="numberStyle">
+        <BellOutlined class="layout-header__action-icon" />
+      </Badge>
+      <template #content>
+        <Tabs>
+          <template v-for="item in tabListData" :key="item.key">
+            <TabPane>
+              <template #tab>
+                {{ item.name }}
+                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
+              </template>
+              <NoticeList :list="item.list" />
+            </TabPane>
+          </template>
+        </Tabs>
+      </template>
+    </Popover>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Popover, Tabs, Badge } from 'ant-design-vue';
+  import { BellOutlined } from '@ant-design/icons-vue';
+  import { tabListData } from './data';
+  import NoticeList from './NoticeList.vue';
+
+  export default defineComponent({
+    components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
+    setup() {
+      let count = 0;
+      for (let i = 0; i < tabListData.length; i++) {
+        count += tabListData[i].list.length;
+      }
+
+      return {
+        tabListData,
+        count,
+        numberStyle: {},
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  /deep/ .ant-tabs-tab {
+    padding-top: 8px;
+    margin-right: 12px;
+  }
+
+  /deep/ .ant-tabs-content {
+    width: 300px;
+  }
+
+  /deep/ .ant-badge {
+    font-size: 18px;
+
+    .ant-badge-multiple-words {
+      padding: 0 4px;
+      transform: translate(26%, -48%);
+    }
+  }
+</style>

src/layouts/default/actions/notice/NoticeList.vue

@@ -0,0 +1,102 @@
+<template>
+  <List class="list">
+    <template v-for="item in list" :key="item.id">
+      <ListItem class="list__item">
+        <ListItemMeta>
+          <template #title>
+            <div class="title">
+              {{ item.title }}
+              <div class="extra" v-if="item.extra">
+                <Tag class="tag" :color="item.color">
+                  {{ item.extra }}
+                </Tag>
+              </div>
+            </div>
+          </template>
+          <template #avatar>
+            <Avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <span v-else> {{ item.avatar }}</span>
+          </template>
+          <template #description>
+            <div>
+              <div class="description">{{ item.description }}</div>
+              <div class="datetime">{{ item.datetime }}</div>
+            </div>
+          </template>
+        </ListItemMeta>
+      </ListItem>
+    </template>
+  </List>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import { List, Avatar, Tag } from 'ant-design-vue';
+  import { ListItem } from './data';
+
+  export default defineComponent({
+    props: {
+      list: {
+        type: Array as PropType<Array<ListItem>>,
+        default: () => [],
+      },
+    },
+    components: {
+      List,
+      ListItem: List.Item,
+      ListItemMeta: List.Item.Meta,
+      Avatar,
+      Tag,
+    },
+    setup(props) {
+      const { list = [] } = props;
+      return {
+        list,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .list {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &__item {
+      padding: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      .title {
+        margin-bottom: 8px;
+        font-weight: normal;
+
+        .extra {
+          float: right;
+          margin-top: -1.5px;
+          margin-right: 0;
+          font-weight: normal;
+
+          .tag {
+            margin-right: 0;
+          }
+        }
+
+        .avatar {
+          margin-top: 4px;
+        }
+
+        .description {
+          font-size: 12px;
+          line-height: 18px;
+        }
+
+        .datetime {
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+</style>