From aba53348b7cb187a1147e9085e26946928052222 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Tue, 16 Apr 2024 20:32:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AE=8C=E5=96=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=BF=AB=E6=8D=B7=E6=93=8D=E4=BD=9C=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/FastCard.vue        | 16 +++---
 src/views/home/components/NoticeCard.vue      | 55 +++++++++++++++++++
 .../{Sponsor.vue => SponsorCard.vue}          |  0
 src/views/home/index.vue                      |  8 +--
 4 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 src/views/home/components/NoticeCard.vue
 rename src/views/home/components/{Sponsor.vue => SponsorCard.vue} (100%)

diff --git a/src/views/home/components/FastCard.vue b/src/views/home/components/FastCard.vue
index e6cbc7b..3fb6759 100644
--- a/src/views/home/components/FastCard.vue
+++ b/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-mind-mapping' },
-  { name: '角色管理', icon: 'icon-user-group' },
-  { name: '通知公告', icon: 'icon-notification' },
-  { name: '系统配置', icon: 'icon-desktop' },
-  { name: '系统日志', icon: 'icon-history' }
+  { name: '用户管理', icon: 'icon-user', path: '/system/user' },
+  { name: '角色管理', icon: 'icon-user-group', path: '/system/role' },
+  { name: '菜单管理', icon: 'icon-menu', path: '/system/menu' },
+  { name: '文件管理', icon: 'icon-file', path: '/system/file' },
+  { name: '系统配置', icon: 'icon-desktop', path: '/system/config' },
+  { name: '系统日志', icon: 'icon-history', path: '/monitor/log' }
 ]
 </script>
 
diff --git a/src/views/home/components/NoticeCard.vue b/src/views/home/components/NoticeCard.vue
new file mode 100644
index 0000000..1666f92
--- /dev/null
+++ b/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>
diff --git a/src/views/home/components/Sponsor.vue b/src/views/home/components/SponsorCard.vue
similarity index 100%
rename from src/views/home/components/Sponsor.vue
rename to src/views/home/components/SponsorCard.vue
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3306c77..9cb0f18 100644
--- a/src/views/home/index.vue
+++ b/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"><MessageCard /></div>
+        <div class="home__item"><SponsorCard /></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 Sponsor from './components/Sponsor.vue'
+import NoticeCard from './components/NoticeCard.vue'
+import SponsorCard from './components/SponsorCard.vue'
 
 defineOptions({ name: 'Home' })
 </script>