feat: 适配首页公告卡片并完善通知公告

Author: Charles7c

src/apis/common/home.ts

@@ -4,6 +4,11 @@ import type * as Common from './type'
 const BASE_URL = '/dashboard'
 
 /** @desc 查询访问趋势 */
-export function listAccessTrend(days: number) {
+export function listDashboardAccessTrend(days: number) {
   return http.get<Common.DashboardAccessTrendResp[]>(`${BASE_URL}/access/trend/${days}`)
 }
+
+/** @desc 查询公告列表 */
+export function listDashboardNotice() {
+  return http.get<Common.DashboardNoticeResp[]>(`${BASE_URL}/notice`)
+}

src/apis/common/type.ts

@@ -4,9 +4,16 @@ export interface ImageCaptchaResp {
   img: string
 }
 
-/** 仪表盘访问趋势 */
+/** 仪表盘访问趋势类型 */
 export interface DashboardAccessTrendResp {
   date: string
   pvCount: number
   ipCount: number
 }
+
+/** 仪表盘公告类型 */
+export interface DashboardNoticeResp {
+  id: number
+  title: string
+  type: number
+}

src/apis/system/announcement.ts

@@ -2,7 +2,7 @@ export * from './user'
 export * from './role'
 export * from './menu'
 export * from './dept'
-export * from './announcement'
+export * from './notice'
 export * from './dict'
 export * from './file'
 export * from './storage'

src/apis/system/index.ts

@@ -0,0 +1,29 @@
+import http from '@/utils/http'
+import type * as System from './type'
+
+const BASE_URL = '/system/notice'
+
+/** @desc 查询公告列表 */
+export function listNotice(query: System.NoticeQuery) {
+  return http.get<PageRes<System.NoticeResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询公告详情 */
+export function getNotice(id: string) {
+  return http.get<System.NoticeResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增公告 */
+export function addNotice(data: any) {
+  return http.post(BASE_URL, data)
+}
+
+/** @desc 修改公告 */
+export function updateNotice(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除公告 */
+export function deleteNotice(ids: string | Array<number>) {
+  return http.del(`${BASE_URL}/${ids}`)
+}

src/apis/system/notice.ts

@@ -119,6 +119,25 @@ export interface DeptQuery {
   sort: Array<string>
 }
 
+/** 系统公告类型 */
+export interface NoticeResp {
+  id: string
+  title: string
+  content: string
+  status: number
+  type: string
+  effectiveTime: string
+  terminateTime: string
+  createUserString: string
+  createTime: string
+  updateUserString: string
+  updateTime: string
+}
+export interface NoticeQuery extends PageQuery {
+  title?: string
+  type?: string
+}
+
 /** 系统字典类型 */
 export interface DictResp {
   id: string
@@ -222,26 +241,3 @@ export interface BindSocialAccountRes {
   source: string
   description: string
 }
-
-/** 公告类型 */
-export interface AnnouncementResp {
-  id: string
-  title: string
-  content: string
-  status: number
-  type?: string
-  effectiveTime?: string
-  terminateTime?: string
-  createUser: string
-  createTime: string
-  updateUser: string
-  updateTime: string
-  createUserString: string
-  updateUserString: string
-}
-
-export interface AnnouncementQuery extends PageQuery {
-  title?: string
-  status?: number
-  type?: string
-}

src/apis/system/type.ts

@@ -1,13 +1,13 @@
 <template>
   <div class="message">
     <a-tabs default-active-key="1">
-      <a-tab-pane key="1">
+      <a-tab-pane key="1" disabled>
         <template #title>通知(1)</template>
       </a-tab-pane>
-      <a-tab-pane key="2">
+      <a-tab-pane key="2" disabled>
         <template #title>关注(1)</template>
       </a-tab-pane>
-      <a-tab-pane key="3">
+      <a-tab-pane key="3" disabled>
         <template #title>待办(2)</template>
       </a-tab-pane>
     </a-tabs>
@@ -22,7 +22,7 @@
       >
         <template #actions></template>
         <template #avatar>
-          <a-avatar><img :src="item.avatar" /></a-avatar>
+          <a-avatar><img :src="item.avatar" alt="avatar" /></a-avatar>
         </template>
       </a-comment>
     </section>
@@ -31,24 +31,13 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'Message' })
+
 const list = [
   {
     name: 'Socrates',
     datetime: '1小时之前',
-    content: 'Comment body content.',
+    content: 'v3.1.0 重构消息通知',
     avatar: 'https://lolicode.gitee.io/scui-doc/demo/img/avatar2.gif'
-  },
-  {
-    name: '木木糖醇',
-    datetime: '2小时之前',
-    content: '关注了你',
-    avatar: 'https://s1.ax1x.com/2022/06/14/XhteeO.jpg'
-  },
-  {
-    name: '徐欣',
-    datetime: '2个半小时之前',
-    content: '收藏了你的文章',
-    avatar: 'https://s1.ax1x.com/2022/06/14/XhtSwF.jpg'
   }
 ]
 </script>

src/layout/components/HeaderRightBar/Message.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { listAccessTrend, type DashboardAccessTrendResp } from '@/apis'
+import { listDashboardAccessTrend, type DashboardAccessTrendResp } from '@/apis'
 import VCharts from 'vue-echarts'
 import { graphic } from 'echarts'
 import { useChart } from '@/hooks'
@@ -180,7 +180,7 @@ const getChartData = async (days: number) => {
     xData.value = []
     pvStatisticsData.value = []
     ipStatisticsData.value = []
-    const { data: chartData } = await listAccessTrend(days)
+    const { data: chartData } = await listDashboardAccessTrend(days)
     chartData.forEach((el: DashboardAccessTrendResp) => {
       xData.value.unshift(el.date)
       pvStatisticsData.value.unshift(el.pvCount)

src/views/home/components/AccessTrendCard.vue

@@ -13,24 +13,41 @@
     >
       <template #content>
         <div class="content">
-          <a-tag v-if="item.type === 1" color="blue" size="small">通知</a-tag>
-          <a-tag v-if="item.type === 2" color="orangered" size="small">活动</a-tag>
-          <a-tag v-if="item.type === 3" color="cyan" size="small">消息</a-tag>
-          <p>{{ item.content }}</p>
+          <GiCellTag :value="item.type" :dict="notice_type" />
+          <p>
+            <a-link @click="onDetail(item.id)">{{ item.title }}</a-link>
+          </p>
         </div>
       </template>
     </a-comment>
   </a-card>
+
+  <NoticeDetailModal ref="NoticeDetailModalRef" />
 </template>
 
 <script setup lang="ts">
-const dataList = [
-  { type: 1, content: 'v2.4.0 版本发布公告🎉' },
-  { type: 1, content: 'v2.3.0 版本发布公告🎉' },
-  { type: 1, content: 'v2.2.0 版本发布公告🎉' },
-  { type: 2, content: '作者喊你来贡献代码了~' },
-  { type: 2, content: '作者喊你来提需求了~' }
-]
+import { listDashboardNotice, type DashboardNoticeResp } from '@/apis'
+import { useDict } from '@/hooks/app'
+import NoticeDetailModal from '@/views/system/notice/NoticeDetailModal.vue'
+
+const { notice_type } = useDict('notice_type')
+
+const dataList = ref<DashboardNoticeResp[]>([])
+// 查询列表数据
+const getDataList = async () => {
+  const res = await listDashboardNotice()
+  dataList.value = res.data
+}
+
+const NoticeDetailModalRef = ref<InstanceType<typeof NoticeDetailModal>>()
+// 详情
+const onDetail = (id: string) => {
+  NoticeDetailModalRef.value?.onDetail(id)
+}
+
+onMounted(() => {
+  getDataList()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -52,4 +69,16 @@ const dataList = [
     margin-left: 6px;
   }
 }
+
+.arco-link {
+  color: rgb(var(--gray-8));
+}
+
+.icon {
+  margin-right: 3px;
+}
+
+.update-time-row {
+  text-align: right;
+}
 </style>

src/views/home/components/NoticeCard.vue

@@ -74,9 +74,9 @@ const onUpdate = async (id: string) => {
 
 // 保存
 const save = async () => {
+  const isInvalid = await formRef.value?.formRef?.validate()
+  if (isInvalid) return false
   try {
-    const isInvalid = await formRef.value?.formRef?.validate()
-    if (isInvalid) return false
     if (isUpdate.value) {
       await updateDict(form, dataId.value)
       Message.success('修改成功')