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,7 +14,7 @@
           <Reload />
           <!-- <Search /> -->
           <Notices />
-          <!-- <Github /> -->
+          <Github />
           <FullScreen />
           <DarkMode />
           <Setting />
@@ -22,7 +22,7 @@
         </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">
@@ -30,6 +30,7 @@
             </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,24 +1,26 @@
 <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">
+          <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>
@@ -26,9 +28,108 @@
 
 <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/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;
+  }
+}

src/typings/components.d.ts

@@ -0,0 +1,75 @@
+// 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'];
+    IIconParkOutlineAddOne: typeof import('~icons/icon-park-outline/add-one')['default'];
+    IIconParkOutlineAfferent: typeof import('~icons/icon-park-outline/afferent')['default'];
+    IIconParkOutlineDownload: typeof import('~icons/icon-park-outline/download')['default'];
+    IIconParkOutlineFullScreenTwo: typeof import('~icons/icon-park-outline/full-screen-two')['default'];
+    IIconParkOutlineGithub: typeof import('~icons/icon-park-outline/github')['default'];
+    IIconParkOutlineMenuFold: typeof import('~icons/icon-park-outline/menu-fold')['default'];
+    IIconParkOutlineMenuUnfold: typeof import('~icons/icon-park-outline/menu-unfold')['default'];
+    IIconParkOutlineMoon: typeof import('~icons/icon-park-outline/moon')['default'];
+    IIconParkOutlineOffScreenTwo: typeof import('~icons/icon-park-outline/off-screen-two')['default'];
+    IIconParkOutlineRedo: typeof import('~icons/icon-park-outline/redo')['default'];
+    IIconParkOutlineRefresh: typeof import('~icons/icon-park-outline/refresh')['default'];
+    IIconParkOutlineRemind: typeof import('~icons/icon-park-outline/remind')['default'];
+    IIconParkOutlineSearch: typeof import('~icons/icon-park-outline/search')['default'];
+    IIconParkOutlineSettingTwo: typeof import('~icons/icon-park-outline/setting-two')['default'];
+    IIconParkOutlineSun: typeof import('~icons/icon-park-outline/sun')['default'];
+    IIconParkOutlineToTop: typeof import('~icons/icon-park-outline/to-top')['default'];
+    NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default'];
+    NAvatar: typeof import('naive-ui')['NAvatar'];
+    NBackTop: typeof import('naive-ui')['NBackTop'];
+    NBadge: typeof import('naive-ui')['NBadge'];
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb'];
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem'];
+    NButton: typeof import('naive-ui')['NButton'];
+    NCard: typeof import('naive-ui')['NCard'];
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
+    NDataTable: typeof import('naive-ui')['NDataTable'];
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider'];
+    NDrawer: typeof import('naive-ui')['NDrawer'];
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent'];
+    NDropdown: typeof import('naive-ui')['NDropdown'];
+    NEllipsis: typeof import('naive-ui')['NEllipsis'];
+    NForm: typeof import('naive-ui')['NForm'];
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi'];
+    NGi: typeof import('naive-ui')['NGi'];
+    NGrid: typeof import('naive-ui')['NGrid'];
+    NIcon: typeof import('naive-ui')['NIcon'];
+    NInput: typeof import('naive-ui')['NInput'];
+    NLayout: typeof import('naive-ui')['NLayout'];
+    NLayoutContent: typeof import('naive-ui')['NLayoutContent'];
+    NLayoutFooter: typeof import('naive-ui')['NLayoutFooter'];
+    NLayoutHeader: typeof import('naive-ui')['NLayoutHeader'];
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
+    NList: typeof import('naive-ui')['NList'];
+    NListItem: typeof import('naive-ui')['NListItem'];
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider'];
+    NMenu: typeof import('naive-ui')['NMenu'];
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider'];
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'];
+    NPagination: typeof import('naive-ui')['NPagination'];
+    NPopover: typeof import('naive-ui')['NPopover'];
+    NScrollbar: typeof import('naive-ui')['NScrollbar'];
+    NSpace: typeof import('naive-ui')['NSpace'];
+    NTab: typeof import('naive-ui')['NTab'];
+    NTabPane: typeof import('naive-ui')['NTabPane'];
+    NTabs: typeof import('naive-ui')['NTabs'];
+    NTag: typeof import('naive-ui')['NTag'];
+    NThing: typeof import('naive-ui')['NThing'];
+    NTooltip: typeof import('naive-ui')['NTooltip'];
+    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/views/list/commonList/index.vue

@@ -1,44 +1,34 @@
 <template>
   <n-space vertical size="large">
     <n-card>
-      <n-grid :x-gap="24" :cols="23">
-        <n-gi :span="5">
-          <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center justify-start">姓名</n-grid-item>
-            <n-grid-item :span="4"><n-input v-model:value="model.condition_1" placeholder="Input" /></n-grid-item>
-          </n-grid>
-        </n-gi>
-        <n-gi :span="5">
-          <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">年龄</n-grid-item>
-            <n-grid-item :span="4"><n-input v-model:value="model.condition_2" placeholder="Input" /></n-grid-item>
-          </n-grid>
-        </n-gi>
-        <n-gi :span="5">
-          <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">性别</n-grid-item>
-            <n-grid-item :span="4"><n-input v-model:value="model.condition_3" placeholder="Input" /></n-grid-item>
-          </n-grid>
-        </n-gi>
-        <n-gi :span="5">
-          <n-grid :cols="5">
-            <n-grid-item :span="1" class="flex-center">地址</n-grid-item>
-            <n-grid-item :span="4"><n-input v-model:value="model.condition_4" placeholder="Input" /></n-grid-item>
-          </n-grid>
-        </n-gi>
-        <n-gi :span="3">
-          <n-space justify="end">
+      <n-form ref="formRef" :model="model" label-placement="left" :show-feedback="false">
+        <n-grid :x-gap="30" :cols="18">
+          <n-form-item-gi :span="4" label="姓名" path="condition_1">
+            <n-input v-model:value="model.condition_1" placeholder="请输入" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="4" label="年龄" path="condition_2">
+            <n-input v-model:value="model.condition_2" placeholder="请输入" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="4" label="性别" path="condition_3">
+            <n-input v-model:value="model.condition_3" placeholder="请输入" />
+          </n-form-item-gi>
+          <n-form-item-gi :span="4" label="地址" path="condition_4">
+            <n-input v-model:value="model.condition_4" placeholder="请输入" />
+          </n-form-item-gi>
+          <n-gi :span="1">
             <n-button type="primary">
               <template #icon><i-icon-park-outline-search /></template>
               搜索
             </n-button>
-            <n-button strong secondary>
+          </n-gi>
+          <n-gi :span="1">
+            <n-button strong secondary @click="handleResetSearch">
               <template #icon><i-icon-park-outline-redo /></template>
               重置
             </n-button>
-          </n-space>
           </n-gi>
         </n-grid>
+      </n-form>
     </n-card>
     <n-card>
       <n-space vertical size="large">
@@ -65,19 +55,17 @@
 
 <script setup lang="tsx">
 import { onMounted, ref, h } from 'vue';
-import { fetchUserList } from '~/src/service/api/mock';
+import { fetchUserList } from '@/service';
 import type { DataTableColumns } from 'naive-ui';
-import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui';
+import { NButton, NPopconfirm, NSpace, NSwitch, NTag, FormInst } from 'naive-ui';
 import { useLoading } from '@/hook';
 
 const { loading, startLoading, endLoading } = useLoading(false);
-const model = ref({
-  condition_1: '',
-  condition_2: '',
-  condition_3: '',
-  condition_4: '',
-});
 
+const initialModel = { condition_1: '', condition_2: '', condition_3: '', condition_4: '' };
+const model = ref({ ...initialModel });
+
+const formRef = ref<FormInst | null>();
 const columns: DataTableColumns = [
   {
     title: '姓名',
@@ -93,6 +81,22 @@ const columns: DataTableColumns = [
     title: '性别',
     align: 'center',
     key: 'gender',
+    render: (row) => {
+      const rowData = row as unknown as UserList;
+      const tagType = {
+        '0': {
+          label: '女',
+          type: 'primary',
+        },
+        '1': {
+          label: '男',
+          type: 'success',
+        },
+      } as const;
+      if (rowData.gender) {
+        return <NTag type={tagType[rowData.gender].type}>{tagType[rowData.gender].label}</NTag>;
+      }
+    },
   },
   {
     title: '邮箱',
@@ -108,6 +112,15 @@ const columns: DataTableColumns = [
     title: '角色',
     align: 'center',
     key: 'role',
+    render: (row) => {
+      const rowData = row as unknown as UserList;
+      const tagType = {
+        super: 'primary',
+        admin: 'warning',
+        user: 'success',
+      } as const;
+      return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>;
+    },
   },
   {
     title: '状态',
@@ -115,6 +128,7 @@ const columns: DataTableColumns = [
     key: 'disabled',
     render: (row) => {
       const rowData = row as unknown as UserList;
+
       return (
         <NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
           {{ checked: () => '启用', unchecked: () => '禁用' }}
@@ -157,10 +171,10 @@ interface UserList {
   id: number;
   name: string;
   age: number;
-  gender: string;
+  gender: '0' | '1' | null;
   email: string;
   address: string;
-  role: string;
+  role: 'super' | 'admin' | 'user';
   disabled: boolean;
 }
 const listData = ref<UserList[]>([]);
@@ -178,6 +192,9 @@ async function getUserList() {
 function changePage(page: number, size: number) {
   window.$message.success(`分页器:${page},${size}`);
 }
+function handleResetSearch() {
+  model.value = { ...initialModel };
+}
 </script>
 
 <style scoped></style>

unocss.config.ts

@@ -8,4 +8,9 @@ export default defineConfig({
     'flex-x-center': 'flex justify-center',
     'flex-y-center': 'flex items-center',
   },
+  theme: {
+    colors: {
+      primary: '#165DFFFF',
+    },
+  },
 });