refactor: 完善首页快捷操作卡片

src/views/home/components/FastCard.vue

@@ -3,7 +3,7 @@
     <a-card-grid v-for="(item, index) in list" :key="item.name" class="card-grid-item" :style="{ width: '33.33%' }">
       <a-card :bordered="false" hoverable>
         <a-row justify="center" align="center" :class="'animated-fade-up-' + (index + 1)">
-          <a-space direction="vertical" align="center" class="wrapper">
+          <a-space direction="vertical" align="center" class="wrapper" @click="router.replace({ path: item.path })">
             <component :is="item.icon" :size="30" class="icon"></component>
             <a-typography-text class="text">{{ item.name }}</a-typography-text>
           </a-space>
@@ -14,13 +14,15 @@
 </template>
 
 <script setup lang="ts">
+const router = useRouter()
+
 const list = [
-  { name: '用户管理', icon: 'icon-user' },
+  { name: '用户管理', icon: 'icon-user', path: '/system/user' },
-  { name: '部门管理', icon: 'icon-mind-mapping' },
+  { name: '角色管理', icon: 'icon-user-group', path: '/system/role' },
-  { name: '角色管理', icon: 'icon-user-group' },
+  { name: '菜单管理', icon: 'icon-menu', path: '/system/menu' },
-  { name: '通知公告', icon: 'icon-notification' },
+  { name: '文件管理', icon: 'icon-file', path: '/system/file' },
-  { name: '系统配置', icon: 'icon-desktop' },
+  { name: '系统配置', icon: 'icon-desktop', path: '/system/config' },
-  { name: '系统日志', icon: 'icon-history' }
+  { name: '系统日志', icon: 'icon-history', path: '/monitor/log' }
 ]
 </script>
 

src/views/home/components/NoticeCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <a-card title="公告" :bordered="false" class="gi_card_title">
+    <template #extra>
+      <a-link href="/#/system/notice">更多</a-link>
+    </template>
+    <a-empty v-if="dataList.length === 0">暂无公告</a-empty>
+    <a-comment
+      v-for="(item, index) in dataList"
+      :key="index"
+      align="right"
+      :class="'animated-fade-up-' + index"
+      style="overflow: hidden"
+    >
+      <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>
+        </div>
+      </template>
+    </a-comment>
+  </a-card>
+</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: '作者喊你来提需求了~' }
+]
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-comment:not(:first-of-type), .arco-comment-inner-comment) {
+  margin-top: 10px;
+}
+:deep(.arco-comment-content) {
+  font-size: 14px;
+  color: var(--color-text-1);
+}
+:deep(.arco-comment-datetime) {
+  color: var(--color-text-4);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  > p {
+    margin-left: 6px;
+  }
+}
+</style>

src/views/home/index.vue

@@ -9,8 +9,8 @@
       </a-col>
       <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" :xxl="4">
         <div class="home__item"><FastCard /></div>
-        <div class="home__item"><Sponsor /></div>
+        <div class="home__item"><SponsorCard /></div>
-        <div class="home__item"><MessageCard /></div>
+        <div class="home__item"><NoticeCard /></div>
       </a-col>
     </a-row>
 
@@ -25,8 +25,8 @@ import WorkCard from './components/WorkCard.vue'
 import ProjectCard from './components/ProjectCard.vue'
 import AccessTrendCard from './components/AccessTrendCard.vue'
 import FastCard from './components/FastCard.vue'
-import MessageCard from './components/MessageCard.vue'
+import NoticeCard from './components/NoticeCard.vue'
-import Sponsor from './components/Sponsor.vue'
+import SponsorCard from './components/SponsorCard.vue'
 
 defineOptions({ name: 'Home' })
 </script>