feat(projects): 增加消息中心相关组件

.eslintrc.js

@@ -27,12 +27,30 @@ module.exports = {
     '@vue/eslint-config-prettier',
     '@vue/typescript/recommended',
   ],
+  overrides: [
+    {
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      },
+      rules: {
+        'no-undef': 'off'
+      }
+    },
+    {
+      files: ['*.html'],
+      rules: {
+        'vue/comment-directive': 'off'
+      }
+    }
+  ],
   rules: {
     // TSESLint docs https://typescript-eslint.io/rules/
-    'no-var': 'error', // 禁止使用var
-    'no-unused-vars': 'off', // 允许声明不使用的值
-    'no-console': 'off', // 允许出现console
-    'no-debugger': 'off', // 关闭debugger警告
+    // 'no-var': 'error', // 禁止使用var
+    // 'no-unused-vars': 'off', // 允许声明不使用的值
+    // 'no-console': 'off', // 允许出现console
+    // 'no-debugger': 'off', // 关闭debugger警告
     'vue/multi-word-component-names': 0, // 关闭文件名多单词
     // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }],
     "@typescript-eslint/no-explicit-any": ["off"], // 允许使用any

.gitignore

@@ -28,4 +28,4 @@ stats.html
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-/src/types/components.d.ts
+/src/typings/components.d.ts

build/plugins/unplugin.ts

@@ -7,7 +7,7 @@ import path from 'path';
 
 export default [
   Components({
-    dts: 'src/types/components.d.ts',
+    dts: 'src/typings/components.d.ts',
     resolvers: [IconsResolver(), NaiveUiResolver()],
   }),
   Icons({

mock/module/list.ts

@@ -2,7 +2,7 @@ import Mock from 'mockjs';
 import { resultSuccess } from '../utils';
 
 const userList = Mock.mock({
-  'list|10': [
+  'list|20': [
     {
       id: '@id',
       name: '@cname',

src/layouts/BasicLayout/index.vue

@@ -14,22 +14,23 @@
           <Reload />
           <!-- <Search /> -->
           <Notices />
-          <!-- <Github /> -->
+          <Github />
           <FullScreen />
           <DarkMode />
           <Setting />
           <UserCenter />
         </div>
       </n-layout-header>
       <n-layout-header class="h-45px"><TabBar /></n-layout-header>
-      <div class="p-16px">
+      <div class="p-16px p-b-52px">
         <n-layout-content class="bg-transparent">
           <router-view v-slot="{ Component }">
             <transition name="fade-slide" appear mode="out-in">
               <component :is="Component" v-if="appStore.loadFlag" />
             </transition>
           </router-view>
         </n-layout-content>
+        <BackTop />
       </div>
       <n-layout-footer position="absolute" bordered class="flex-center h-40px">
         {{ appStore.footerText }}
@@ -54,6 +55,7 @@ import {
   Search,
   Reload,
   TabBar,
+  BackTop,
 } from '../components';
 
 const appStore = useAppStore();

src/layouts/components/common/BackTop.vue

@@ -0,0 +1,16 @@
+<template>
+  <n-back-top :bottom="80" :visibility-height="300">
+    <n-tooltip placement="left" trigger="hover">
+      <template #trigger>
+        <div wh-full flex-center>
+          <i-icon-park-outline-to-top />
+        </div>
+      </template>
+      <span>返回顶部</span>
+    </n-tooltip>
+  </n-back-top>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/layouts/components/common/NoticeList.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-scrollbar style="height: 400px">
+    <n-list hoverable clickable>
+      <n-list-item v-for="(item, index) in props.list" :key="item.id" @click="handleRead(index)">
+        <n-thing content-indented :class="{ 'opacity-30': item.isRead }">
+          <template #header>
+            <n-ellipsis :line-clamp="1">
+              {{ item.title }}
+            </n-ellipsis>
+          </template>
+          <template #avatar>
+            <e-icon :icon="item.icon" :size="30" class="c-primary" />
+          </template>
+          <template v-if="item.tagTitle" #header-extra>
+            <n-tag :bordered="false" :type="item.tagType" size="small">{{ item.tagTitle }}</n-tag>
+          </template>
+          <template v-if="item.description" #description>
+            <n-ellipsis :line-clamp="2">
+              {{ item.description }}
+            </n-ellipsis>
+          </template>
+          <template #footer>{{ item.date }}</template>
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  list?: Message.List[];
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'read', val: number): void;
+}
+const emit = defineEmits<Emits>();
+
+function handleRead(index: number) {
+  emit('read', index);
+}
+</script>
+
+<style scoped></style>

src/layouts/components/header/Notices.vue

@@ -1,34 +1,135 @@
 <template>
-  <n-popover placement="bottom" trigger="click" arrow-point-to-center style="width: 400px">
+  <n-popover placement="bottom" trigger="click" arrow-point-to-center class="!p-0">
     <template #trigger>
       <n-tooltip placement="bottom" trigger="hover">
         <template #trigger>
-          <HeaderButton @click="openNotice">
-            <i-icon-park-outline-remind class="text-18px" />
+          <HeaderButton>
+            <n-badge :value="massageCount" :max="99" style="color: unset">
+              <i-icon-park-outline-remind class="text-18px" />
+            </n-badge>
           </HeaderButton>
         </template>
         <span>消息通知</span>
       </n-tooltip>
     </template>
-    <n-tabs type="line" animated justify-content="space-evenly">
-      <n-tab-pane name="chap1" tab="通知">
-        我这辈子最疯狂的事，发生在我在 Amazon 当软件工程师的时候，故事是这样的：
-      </n-tab-pane>
-      <n-tab-pane name="chap2" tab="消息">
-        “威尔！着火了！快来帮忙！”我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的 Amazon 服务，还是救公寓的火。
-      </n-tab-pane>
-      <n-tab-pane name="chap3" tab="待办">
-        但是忽然，公寓的烟味消失，火警也停了。我的女朋友走进了房间，让我震惊的是，她摘下了自己的假发，她是 Jeff
+    <n-tabs v-model:value="currentTab" type="line" animated justify-content="space-evenly" class="w-390px">
+      <n-tab-pane v-for="item in MassageData" :key="item.key" :name="item.key">
+        <template #tab>
+          <n-space class="w-130px" justify="center">
+            {{ item.name }}
+            <n-badge v-bind="item.badgeProps" :value="item.list.filter((item) => !item.isRead).length" :max="99" />
+          </n-space>
+        </template>
+        <NoticeList :list="item.list" @read="handleRead" />
       </n-tab-pane>
     </n-tabs>
   </n-popover>
 </template>
 
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
-const openNotice = () => {
-  console.log('消息通知');
-};
+import NoticeList from '../common/NoticeList.vue';
+import { ref, computed } from 'vue';
+
+const MassageData = ref<Message.Tab[]>([
+  {
+    key: 0,
+    name: '通知',
+    badgeProps: { type: 'warning' },
+    list: [
+      {
+        id: 0,
+        title: 'EnchAdmin 已经完成40%了！',
+        icon: 'icon-park-outline:tips-one',
+        tagTitle: '未开始',
+        tagType: 'info',
+        description: '项目稳定推进中，很快就能看到正式版了',
+        date: '2022-2-2 12:22',
+      },
+      {
+        id: 1,
+        title: 'EnchAdmin 已经添加通知功能！',
+        icon: 'icon-park-outline:comment-one',
+        tagTitle: '未开始',
+        tagType: 'success',
+        date: '2022-2-2 12:22',
+      },
+      {
+        id: 2,
+        title: 'EnchAdmin 已经添加路由功能！',
+        icon: 'icon-park-outline:message-emoji',
+        tagTitle: '未开始',
+        tagType: 'warning',
+        description: '项目稳定推进中...',
+        date: '2022-2-5 18:32',
+      },
+      {
+        id: 3,
+        title:
+          'EnchAdmin 已经添加菜单导航功能！EnchAdmin 已经添加菜单导航功能！EnchAdmin 已经添加菜单导航功能！EnchAdmin 已经添加菜单导航功能！',
+        icon: 'icon-park-outline:tips-one',
+        tagTitle: '未开始',
+        tagType: 'error',
+        description:
+          '项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...',
+        date: '2022-2-5 18:32',
+      },
+      {
+        id: 4,
+        title: 'EnchAdmin开始启动了！',
+        icon: 'icon-park-outline:tips-one',
+        tagTitle: '未开始',
+        description: '项目稳定推进中...',
+        date: '2022-2-5 18:32',
+      },
+    ],
+  },
+  {
+    key: 1,
+    name: '消息',
+    badgeProps: { type: 'info' },
+    list: [
+      {
+        id: 0,
+        title: '相见恨晚??',
+        icon: 'icon-park-outline:comment',
+        description: '项目稳定推进中，很快就能看到正式版了',
+        date: '2022-2-2 12:22',
+      },
+      {
+        id: 1,
+        title: '动态路由已完成！',
+        icon: 'icon-park-outline:comment',
+        description: '项目稳定推进中，很快就能看到正式版了',
+        date: '2022-2-25 12:22',
+      },
+    ],
+  },
+  {
+    key: 2,
+    name: '待办',
+    badgeProps: { type: 'error' },
+    list: [
+      {
+        id: 0,
+        title: '接下来需要完善一些',
+        icon: 'icon-park-outline:beach-umbrella',
+        tagTitle: '未开始',
+        description: '项目稳定推进中，很快就能看到正式版了',
+        date: '2022-2-2 12:22',
+      },
+    ],
+  },
+]);
+const currentTab = ref(0);
+function handleRead(index: number) {
+  MassageData.value[currentTab.value].list[index].isRead = true;
+}
+const massageCount = computed(() => {
+  return MassageData.value.reduce((pre, cur) => {
+    return pre + cur.list.filter((item) => !item.isRead).length;
+  }, 0);
+});
 </script>
 
 <style scoped></style>

src/layouts/components/index.ts

@@ -17,6 +17,9 @@ import Reload from './header/Reload.vue';
 /* 标签栏组件  */
 import TabBar from './tab/TabBar.vue';
 
+/* 其他组件 */
+// 返回顶部
+import BackTop from './common/BackTop.vue';
 export {
   Breadcrumb,
   CollapaseButton,
@@ -31,4 +34,5 @@ export {
   Search,
   Reload,
   TabBar,
+  BackTop,
 };

src/service/index.ts

@@ -1,2 +1,3 @@
 export * from './api/test';
 export * from './api/login';
+export * from './api/mock';

src/types/components.d.ts

@@ -0,0 +1,18 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core';
+
+export {};
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    EIcon: typeof import('./../components/custom/EIcon.vue')['default'];
+    ErrorTip: typeof import('./../components/common/ErrorTip.vue')['default'];
+    NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default'];
+    Pagination: typeof import('./../components/custom/Pagination.vue')['default'];
+    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterView: typeof import('vue-router')['RouterView'];
+    SvgIcon: typeof import('./../components/custom/SvgIcon.vue')['default'];
+  }
+}

src/types/business.d.ts → src/typings/business.d.ts

@@ -28,3 +28,22 @@ declare namespace Auth {
     password: string;
   }
 }
+/* 系统消息 */
+declare namespace Message {
+  interface Tab {
+    key: number;
+    name: string;
+    badgeProps?: import('naive-ui').BadgeProps;
+    list: List[];
+  }
+  interface List {
+    id: number;
+    title: string;
+    icon: string;
+    tagTitle?: string;
+    tagType?: 'error' | 'info' | 'success' | 'warning';
+    description?: string;
+    isRead?: boolean;
+    date: string;
+  }
+}