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

src/views/system/notice/NoticeDetailModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-modal v-model:visible="visible" width="70%" :footer="false" @close="reset">
+    <a-typography :style="{ marginTop: '-40px', textAlign: 'center' }">
+      <a-typography-title>
+        {{ dataDetail?.title }}
+      </a-typography-title>
+      <a-typography-paragraph>
+        <div class="meta-data">
+          <a-space>
+            <span>
+              <icon-user class="icon" />
+              <span class="label">发布人：</span>
+              <span>{{ dataDetail?.createUserString }}</span>
+            </span>
+            <a-divider direction="vertical" />
+            <span>
+              <icon-history class="icon" />
+              <span class="label">发布时间：</span>
+              <span>{{ dataDetail?.effectiveTime ? dataDetail?.effectiveTime : dataDetail?.createTime }}</span>
+            </span>
+          </a-space>
+        </div>
+      </a-typography-paragraph>
+    </a-typography>
+    <a-divider />
+    <MdPreview :editorId="dataDetail?.id" :modelValue="dataDetail?.content" />
+    <a-divider />
+    <div v-if="dataDetail?.updateTime" class="update-time-row">
+      <span>
+        <icon-schedule class="icon" />
+        <span>最后更新于：</span>
+        <span>{{ dataDetail?.updateTime }}</span>
+      </span>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { getNotice, type NoticeResp } from '@/apis'
+import { MdPreview } from 'md-editor-v3'
+
+const dataDetail = ref<NoticeResp>()
+const visible = ref(false)
+// 详情
+const onDetail = async (id: string) => {
+  const res = await getNotice(id)
+  dataDetail.value = res.data
+  visible.value = true
+}
+
+// 重置
+const reset = () => {
+  dataDetail.value = {}
+}
+
+defineExpose({ onDetail })
+</script>
+
+<style lang="scss" scoped>
+.arco-link {
+  color: rgb(var(--gray-8));
+}
+
+.icon {
+  margin-right: 3px;
+}
+
+.update-time-row {
+  text-align: right;
+}
+</style>