feat: 完善仪表盘公告区块内容

continew-admin-ui/src/api/dashboard.ts

@@ -1,6 +1,18 @@
 import axios from 'axios';
 import type { TableData } from '@arco-design/web-vue/es/table/interface';
 
+const BASE_URL = '/dashboard';
+
+export interface AnnouncementDashboardRecord {
+  id: string;
+  title: string;
+  type: number;
+}
+
+export function listAnnouncement() {
+  return axios.get<AnnouncementDashboardRecord[]>(`${BASE_URL}/announcement`);
+}
+
 export interface ContentDataRecord {
   x: string;
   y: number;

continew-admin-ui/src/views/dashboard/workplace/components/announcement.vue

@@ -6,47 +6,128 @@
     :body-style="{ padding: '15px 20px 13px 20px' }"
   >
     <template #extra>
-      <a-link>{{ $t('workplace.viewMore') }}</a-link>
+      <a-link href="/system/announcement">{{
+        $t('workplace.viewMore')
+      }}</a-link>
     </template>
     <div>
       <div v-for="(item, idx) in list" :key="idx" class="item">
-        <a-tag :color="item.type" size="small">{{ item.label }}</a-tag>
+        <a-tag v-if="item.type === 1" color="orangered">活动</a-tag>
+        <a-tag v-else-if="item.type === 2" color="cyan">消息</a-tag>
+        <a-tag v-else color="blue">通知</a-tag>
         <span class="item-content">
-          {{ item.content }}
+          <a-link @click="toDetail(item.id)">{{ item.title }}</a-link>
         </span>
       </div>
     </div>
+
+    <!-- 详情区域 -->
+    <a-modal
+      :visible="detailVisible"
+      modal-class="detail"
+      width="70%"
+      :footer="false"
+      unmount-on-close
+      render-to-body
+      @cancel="handleDetailCancel"
+    >
+      <a-spin
+        :loading="detailLoading"
+        tip="公告正在赶来..."
+        style="width: 100%"
+      >
+        <template #icon>
+          <icon-sync />
+        </template>
+        <a-typography :style="{ marginTop: '-40px', textAlign: 'center' }">
+          <a-typography-title>
+            {{ detail.title }}
+          </a-typography-title>
+          <a-typography-paragraph>
+            <div class="meta-data">
+              <a-space>
+                <span>
+                  <icon-user class="icon" />
+                  <span class="label">发布人：</span>
+                  <span>{{ detail.createUserString }}</span>
+                </span>
+                <a-divider direction="vertical" />
+                <span>
+                  <svg-icon icon-class="clock-circle" class="icon" />
+                  <span class="label">发布时间：</span>
+                  <span>{{
+                    detail.effectiveTime
+                      ? detail.effectiveTime
+                      : detail.createTime
+                  }}</span>
+                </span>
+              </a-space>
+            </div>
+          </a-typography-paragraph>
+        </a-typography>
+        <a-divider />
+        <v-md-preview :text="detail.content"></v-md-preview>
+        <a-divider />
+        <div v-if="detail.updateTime" class="update-time-row">
+          <span>
+            <icon-schedule class="icon" />
+            <span>最后更新于：</span>
+            <span>{{ detail.updateTime }}</span>
+          </span>
+        </div>
+      </a-spin>
+    </a-modal>
   </a-card>
 </template>
 
 <script lang="ts" setup>
-  const list = [
-    {
-      type: 'orangered',
-      label: '活动',
-      content: '内容最新优惠活动',
-    },
-    {
-      type: 'cyan',
-      label: '消息',
-      content: '新增内容尚未通过审核，详情请点击查看。',
-    },
-    {
-      type: 'blue',
-      label: '通知',
-      content: '当前产品试用期即将结束，如需续费请点击查看。',
-    },
-    {
-      type: 'blue',
-      label: '通知',
-      content: '1月新系统升级计划通知',
-    },
-    {
-      type: 'cyan',
-      label: '消息',
-      content: '新增内容已经通过审核，详情请点击查看。',
-    },
-  ];
+  import { ref } from 'vue';
+  import {
+    AnnouncementDashboardRecord,
+    listAnnouncement,
+  } from '@/api/dashboard';
+  import { DataRecord, get } from '@/api/system/announcement';
+
+  const list = ref<AnnouncementDashboardRecord[]>([]);
+  const detail = ref<DataRecord>({});
+  const detailLoading = ref(false);
+  const detailVisible = ref(false);
+
+  /**
+   * 查询公告列表
+   */
+  const getList = () => {
+    listAnnouncement().then((res) => {
+      list.value = res.data;
+    });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: string) => {
+    if (detailLoading.value) return;
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        detail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+    detail.value = {};
+  };
 </script>
 
 <style scoped lang="less">
@@ -56,6 +137,9 @@
     width: 100%;
     height: 24px;
     margin-bottom: 4px;
+    .arco-link {
+      color: rgb(var(--gray-8));
+    }
     .item-content {
       flex: 1;
       overflow: hidden;
@@ -68,4 +152,17 @@
       cursor: pointer;
     }
   }
+
+  .meta-data {
+    font-size: 15px;
+    text-align: center;
+  }
+
+  .icon {
+    margin-right: 3px;
+  }
+
+  .update-time-row {
+    text-align: right;
+  }
 </style>