add /api/getMessageList

frontend/vben/src/api/dashboard/index.ts

@@ -0,0 +1,10 @@
+import { defHttp } from '/@/utils/http/axios'
+import { MessageItem } from './model/workbenchModel'
+
+enum Api {
+  GetMessageList = '/getMessageList',
+}
+
+export const getMessageList = () => {
+  return defHttp.get<MessageItem[]>({ url: Api.GetMessageList })
+}

frontend/vben/src/api/dashboard/model/workbenchModel.ts

@@ -0,0 +1,16 @@
+export enum MessageTypeEnum {
+  MessageNormal = 0,
+  MessageRegister = 1,
+  MessageUserAdded = 2,
+  MessageContactChange = 3,
+  MessagePasswordChange = 4,
+  MessageResetPassword = 5,
+}
+
+export interface MessageItem {
+  id: number
+  avatar: string
+  date: string
+  text: string
+  type: MessageTypeEnum
+}

frontend/vben/src/views/dashboard/workbench/components/DynamicInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <Card title="我的消息" v-bind="$attrs">
-    <List item-layout="horizontal" :data-source="dynamicInfoItems">
+    <List item-layout="horizontal" :data-source="dynamicInfoItemsRef">
       <template #renderItem="{ item }">
         <ListItem>
           <ListItemMeta>
@@ -8,11 +8,20 @@
               {{ item.date }}
             </template>
             <!-- eslint-disable-next-line -->
-            <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
+            <template #title> <span v-html="item.text"> </span> </template>
             <template #avatar>
-              <Icon :icon="item.avatar" :size="30" />
+              <Avatar :src="item.avatar || headerImg" :size="36" />
             </template>
           </ListItemMeta>
+          <a-button
+            ghost
+            color="success"
+            v-if="
+              item.type in [MessageTypeEnum.MessageRegister, MessageTypeEnum.MessageResetPassword]
+            "
+            >接受</a-button
+          >
+          &nbsp;&nbsp;
           <a-button ghost color="error">删除</a-button>
         </ListItem>
       </template>
@@ -20,10 +29,17 @@
   </Card>
 </template>
 <script lang="ts" setup>
+  import { ref } from 'vue'
   import { Card, List } from 'ant-design-vue'
-  import { dynamicInfoItems } from './data'
-  import { Icon } from '/@/components/Icon'
+  import { getMessageList } from '/@/api/dashboard/index'
+  import { MessageTypeEnum, MessageItem } from '/@/api/dashboard/model/workbenchModel'
+  import { Avatar } from 'ant-design-vue'
+  import headerImg from '/@/assets/images/header.jpg'
 
   const ListItem = List.Item
   const ListItemMeta = List.Item.Meta
+  const dynamicInfoItemsRef = ref([] as MessageItem[])
+  getMessageList().then((value) => {
+    dynamicInfoItemsRef.value = value
+  })
 </script>

frontend/vben/src/views/dashboard/workbench/components/data.ts

@@ -1,96 +0,0 @@
-interface NavItem {
-  title: string
-  icon: string
-  color: string
-}
-
-interface DynamicInfoItem {
-  avatar: string
-  name: string
-  date: string
-  desc: string
-}
-
-export const navItems: NavItem[] = [
-  {
-    title: '首页',
-    icon: 'ion:home-outline',
-    color: '#1fdaca',
-  },
-  {
-    title: '仪表盘',
-    icon: 'ion:grid-outline',
-    color: '#bf0c2c',
-  },
-  {
-    title: '组件',
-    icon: 'ion:layers-outline',
-    color: '#e18525',
-  },
-  {
-    title: '系统管理',
-    icon: 'ion:settings-outline',
-    color: '#3fb27f',
-  },
-  {
-    title: '权限管理',
-    icon: 'ion:key-outline',
-    color: '#4daf1bc9',
-  },
-  {
-    title: '图表',
-    icon: 'ion:bar-chart-outline',
-    color: '#00d8ff',
-  },
-]
-
-export const dynamicInfoItems: DynamicInfoItem[] = [
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '刚刚',
-    desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
-  },
-  {
-    avatar: 'dynamic-avatar-2|svg',
-    name: '艾文',
-    date: '1个小时前',
-    desc: `关注了 <a>威廉</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-3|svg',
-    name: '克里斯',
-    date: '1天前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-4|svg',
-    name: 'Vben',
-    date: '2天前',
-    desc: `发表文章 <a>如何编写一个Vite插件</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-5|svg',
-    name: '皮特',
-    date: '3天前',
-    desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
-  },
-  {
-    avatar: 'dynamic-avatar-6|svg',
-    name: '杰克',
-    date: '1周前',
-    desc: `关闭了问题 <a>如何运行项目</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '1周前',
-    desc: `发布了 <a>个人动态</a> `,
-  },
-  {
-    avatar: 'dynamic-avatar-1|svg',
-    name: '威廉',
-    date: '2021-04-01 20:00',
-    desc: `推送了代码到 <a>Github</a>`,
-  },
-]