feat: 新增系统管理/消息管理（列表、查看详情、标记已读、全部已读、删除）

continew-admin-ui/src/api/system/message.ts

@@ -0,0 +1,76 @@
+import axios from 'axios';
+import qs from 'query-string';
+import { DataRecord } from "@/api/system/dict";
+
+const BASE_URL = '/system/message';
+
+export interface MessageRecord {
+  id?: number;
+  type?: string;
+  title?: string;
+  subTitle?: string;
+  avatar?: string;
+  content?: string;
+  createTime?: string;
+  readStatus?: 0 | 1;
+  messageType?: number;
+}
+
+export interface ChatRecord {
+  id: number;
+  username: string;
+  content: string;
+  time: string;
+  isCollect: boolean;
+}
+
+export interface ListParam {
+  title?: string;
+  readStatus?: 0 | 1;
+  type?: string;
+  page?: number;
+  size?: number;
+  uid?:number
+  sort?: Array<string>;
+}
+
+export interface PageRes {
+  list: DataRecord[];
+  total: number;
+}
+
+export type MessageListType = MessageRecord[];
+
+export function page(params?: ListParam) {
+  return axios.get<PageRes>(`${BASE_URL}`, {
+    params,
+    paramsSerializer: (obj) => {
+      return qs.stringify(obj);
+    },
+  });
+}
+
+export function list(params?: ListParam) {
+  return axios.get<MessageListType>(`${BASE_URL}/list`, {
+    params,
+    paramsSerializer: (obj) => {
+      return qs.stringify(obj);
+    },
+  });
+}
+
+export function get(id: number) {
+  return axios.get<MessageRecord>(`${BASE_URL}/${id}`);
+}
+
+export function del(ids: number | Array<number>) {
+  return axios.delete(`${BASE_URL}/${ids}`);
+}
+
+export function read(data: Array<number>) {
+  return axios.patch<MessageListType>(`${BASE_URL}/read?ids=${data}`);
+}
+
+export function queryChatList() {
+  return axios.get<ChatRecord[]>('/api/chat/list');
+}

continew-admin-ui/src/components/message-box/index.vue

@@ -1,9 +1,9 @@
 <template>
   <a-spin style="display: block" :loading="loading">
     <a-tabs v-model:activeKey="messageType" type="rounded" destroy-on-hide>
-      <a-tab-pane v-for="item in tabList" :key="item.key">
+      <a-tab-pane v-for="item in message_type" :key="item.value">
         <template #title>
-          <span> {{ item.title }}{{ formatUnreadLength(item.key) }} </span>
+          <span> {{ item.label }}{{ formatUnreadLength(item.value) }} </span>
         </template>
         <a-result v-if="!renderList.length" status="404">
           <template #subtitle> {{ $t('messageBox.noContent') }} </template>
@@ -14,35 +14,26 @@
           @item-click="handleItemClick"
         />
       </a-tab-pane>
-      <template #extra>
-        <a-button type="text" @click="emptyList">
-          {{ $t('messageBox.tab.button') }}
-        </a-button>
-      </template>
     </a-tabs>
   </a-spin>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, toRefs, computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
+  import { computed, getCurrentInstance, reactive, ref, toRefs } from 'vue';
   import {
-    queryMessageList,
-    setMessageStatus,
-    MessageRecord,
     MessageListType,
-  } from '@/api/demo/message';
+    MessageRecord,
+    list,
+    read,
+  } from '@/api/system/message';
   import useLoading from '@/hooks/loading';
   import List from './list.vue';
 
-  interface TabItem {
-    key: string;
-    title: string;
-    avatar?: string;
-  }
+  const { proxy } = getCurrentInstance() as any;
+  const { message_type } = proxy.useDict('message_type');
   const { loading, setLoading } = useLoading(true);
-  const messageType = ref('message');
-  const { t } = useI18n();
+  const messageType = ref('1');
+
   const messageData = reactive<{
     renderList: MessageRecord[];
     messageList: MessageRecord[];
@@ -51,59 +42,87 @@
     messageList: [],
   });
   toRefs(messageData);
-  const tabList: TabItem[] = [
-    {
-      key: 'message',
-      title: t('messageBox.tab.title.message'),
-    },
-    {
-      key: 'notice',
-      title: t('messageBox.tab.title.notice'),
-    },
-    {
-      key: 'todo',
-      title: t('messageBox.tab.title.todo'),
-    },
-  ];
+
+  /**
+   * 查询列表
+   */
   async function fetchSourceData() {
     setLoading(true);
     try {
-      const { data } = await queryMessageList();
-      messageData.messageList = data;
+      list({ sort: ['createTime,desc'] }).then((res) => {
+        messageData.messageList = res.data;
+      });
     } catch (err) {
       // you can report use errorHandler or other
     } finally {
       setLoading(false);
     }
   }
+
+  /**
+   * 将消息设置为已读
+   *
+   * @param data 消息列表
+   */
   async function readMessage(data: MessageListType) {
     const ids = data.map((item) => item.id);
-    await setMessageStatus({ ids });
+    await read(ids);
     fetchSourceData();
   }
+
+  /**
+   * 每个消息类型下的消息列表
+   */
   const renderList = computed(() => {
     return messageData.messageList.filter(
-      (item) => messageType.value === item.type
-    );
+      (item) => item.type === messageType.value && !item.readStatus
+    ).splice(0,3);
   });
+
+  /**
+   * 未读消息数量
+   */
   const unreadCount = computed(() => {
-    return renderList.value.filter((item) => !item.status).length;
+    return renderList.value.filter((item) => !item.readStatus).length;
   });
+
+  /**
+   * 未读消息列表
+   *
+   * @param type 消息类型
+   */
   const getUnreadList = (type: string) => {
-    const list = messageData.messageList.filter(
-      (item) => item.type === type && !item.status
+    return messageData.messageList.filter(
+      (item) => item.type === type && !item.readStatus
     );
-    return list;
   };
+
+  /**
+   * 每个类型的未读消息数量
+   *
+   * @param type 消息类型
+   */
   const formatUnreadLength = (type: string) => {
-    const list = getUnreadList(type);
-    return list.length ? `(${list.length})` : ``;
+    const unreadList = getUnreadList(type);
+    return unreadList.length ? `(${unreadList.length})` : ``;
   };
+
+  /**
+   * 点击消息事件
+   *
+   * @param items 消息
+   */
   const handleItemClick = (items: MessageListType) => {
     if (renderList.value.length) readMessage([...items]);
   };
+
+  /**
+   * 清空消息
+   */
   const emptyList = () => {
-    messageData.messageList = [];
+    read([]).then((res) => {
+      messageData.messageList = [];
+    });
   };
   fetchSourceData();
 </script>

continew-admin-ui/src/components/message-box/list.vue

@@ -5,15 +5,9 @@
       :key="item.id"
       action-layout="vertical"
       :style="{
-        opacity: item.status ? 0.5 : 1,
+        opacity: item.readStatus == 1 ? 0.5 : 1,
       }"
     >
-      <template #extra>
-        <a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
-        <a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
-        <a-tag v-else-if="item.messageType === 2" color="blue">进行中</a-tag>
-        <a-tag v-else-if="item.messageType === 3" color="red">即将到期</a-tag>
-      </template>
       <div class="item-wrap" @click="onItemClick(item)">
         <a-list-item-meta>
           <template v-if="item.avatar" #avatar>
@@ -38,11 +32,8 @@
                 }"
                 >{{ item.content }}</a-typography-paragraph
               >
-              <a-typography-text
-                v-if="item.type === 'message'"
-                class="time-text"
-              >
-                {{ item.time }}
+              <a-typography-text class="time-text">
+                {{ item.createTime }}
               </a-typography-text>
             </div>
           </template>
@@ -59,7 +50,7 @@
           <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
         </div>
         <div class="footer-wrap">
-          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
+          <a-link @click="toList">{{ $t('messageBox.viewMore') }}</a-link>
         </div>
       </a-space>
     </template>
@@ -72,7 +63,10 @@
 
 <script lang="ts" setup>
   import { PropType } from 'vue';
-  import { MessageRecord, MessageListType } from '@/api/demo/message';
+  import { useRouter } from 'vue-router';
+  import { MessageRecord, MessageListType } from '@/api/system/message';
+
+  const router = useRouter();
 
   const props = defineProps({
     renderList: {
@@ -85,12 +79,29 @@
     },
   });
   const emit = defineEmits(['itemClick']);
+
+  /**
+   * 全部已读
+   */
   const allRead = () => {
     emit('itemClick', [...props.renderList]);
   };
 
+  /**
+   * 查看更多
+   */
+  const toList = ()=>{
+    router.push({
+      path: '/system/message',
+    });
+  };
+
+  /**
+   * 点击消息
+   * @param item 消息
+   */
   const onItemClick = (item: MessageRecord) => {
-    if (!item.status) {
+    if (!item.readStatus) {
       emit('itemClick', [item]);
     }
   };

continew-admin-ui/src/components/navbar/index.vue

@@ -82,7 +82,7 @@
       <li>
         <a-tooltip :content="$t('settings.navbar.alerts')">
           <div class="message-box-trigger">
-            <a-badge :count="9" dot>
+            <a-badge :count="unReadMessageCount" dot>
               <a-button
                 class="nav-btn"
                 type="outline"
@@ -190,9 +190,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, inject } from 'vue';
+  import { computed, ref, inject,watchEffect } from 'vue';
   import { useDark, useToggle, useFullscreen } from '@vueuse/core';
   import { useAppStore, useUserStore } from '@/store';
+  import { list } from '@/api/system/message';
   import { LOCALE_OPTIONS } from '@/locale';
   import useLocale from '@/hooks/locale';
   import useUser from '@/hooks/user';
@@ -223,6 +224,13 @@
     },
   });
   const toggleTheme = useToggle(isDark);
+
+  const unReadMessageCount = ref(0);
+  watchEffect(async () => {
+    const res = await list({ sort: ["createTime,desc"],readStatus:0 });
+    unReadMessageCount.value = res.data?.length ?? 0;
+  });
+
   const handleToggleTheme = () => {
     toggleTheme();
   };

continew-admin-ui/src/locale/en-US.ts

@@ -5,6 +5,7 @@ import localeRole from '@/views/system/role/locale/en-US';
 import localeMenu from '@/views/system/menu/locale/en-US';
 import localeDept from '@/views/system/dept/locale/en-US';
 import localeAnnouncement from '@/views/system/announcement/locale/en-US';
+import localeNotice from '@/views/system/message/locale/en-US';
 import localeDict from '@/views/system/dict/locale/en-US';
 import localeConfig from '@/views/system/config/locale/en-US';
 
@@ -62,6 +63,7 @@ export default {
   ...localeMenu,
   ...localeDept,
   ...localeAnnouncement,
+  ...localeNotice,
   ...localeDict,
   ...localeConfig,
 

continew-admin-ui/src/locale/zh-CN.ts

@@ -5,6 +5,7 @@ import localeRole from '@/views/system/role/locale/zh-CN';
 import localeMenu from '@/views/system/menu/locale/zh-CN';
 import localeDept from '@/views/system/dept/locale/zh-CN';
 import localeAnnouncement from '@/views/system/announcement/locale/zh-CN';
+import locaoNotice from '@/views/system/message/locale/zh-CN';
 import localeDict from '@/views/system/dict/locale/zh-CN';
 import localeConfig from '@/views/system/config/locale/zh-CN';
 
@@ -62,6 +63,7 @@ export default {
   ...localeMenu,
   ...localeDept,
   ...localeAnnouncement,
+  ...locaoNotice,
   ...localeDict,
   ...localeConfig,
 

continew-admin-ui/src/router/routes/modules/system.ts

@@ -75,6 +75,15 @@ const System: AppRouteRecordRaw = {
         requiresAuth: true,
       },
     },
+    {
+      name: 'Message',
+      path: '/system/message',
+      component: () => import('@/views/system/message/index.vue'),
+      meta: {
+        locale: 'menu.system.message',
+        requiresAuth: true,
+      },
+    },
   ],
 };
 

continew-admin-ui/src/views/system/message/index.vue

@@ -0,0 +1,467 @@
+<template>
+  <div class="app-container">
+    <Breadcrumb :items="['menu.system', 'menu.system.message.list']" />
+    <a-card class="general-card" :title="$t('menu.system.message.list')">
+      <!-- 头部区域 -->
+      <div class="header">
+        <!-- 搜索栏 -->
+        <div v-if="showQuery" class="header-query">
+          <a-form ref="queryRef" :model="queryParams" layout="inline">
+            <a-form-item field="title" hide-label>
+              <a-input
+                v-model="queryParams.title"
+                placeholder="输入主题搜索"
+                allow-clear
+                style="width: 230px"
+                @press-enter="handleQuery"
+              />
+            </a-form-item>
+            <a-form-item field="type" hide-label>
+              <a-select
+                v-model="queryParams.type"
+                :options="message_type"
+                placeholder="类型搜索"
+                allow-clear
+                style="width: 150px"
+              />
+            </a-form-item>
+
+            <a-form-item field="type" hide-label>
+              <a-select :style="{width:'150px'}" placeholder="是否已读" allow-clear v-model="queryParams.readStatus">
+                <a-option :value="true">是</a-option>
+                <a-option :value="false">否</a-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item hide-label>
+              <a-space>
+                <a-button type="primary" @click="handleQuery">
+                  <template #icon><icon-search /></template>查询
+                </a-button>
+                <a-button @click="resetQuery">
+                  <template #icon><icon-refresh /></template>重置
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-form>
+        </div>
+        <!-- 操作栏 -->
+        <div class="header-operation">
+          <a-row>
+            <a-col :span="12">
+              <a-space>
+                <a-button
+                  type="primary"
+                  status="success"
+                  :disabled="readMultiple"
+                  :title="readMultiple ? '请选择要读取的数据' : ''"
+                  @click="handleBatchRedaMessage"
+                >
+                  <template #icon><icon-check /></template>标记已读
+                </a-button>
+                <a-button
+                  type="primary"
+                  status="success"
+                  @click="handleAllRedaMessage"
+                >
+                  <template #icon><icon-check /></template>全部已读
+                </a-button>
+                <a-button
+                  v-permission="['system:announcement:delete']"
+                  type="primary"
+                  status="danger"
+                  :disabled="multiple"
+                  :title="multiple ? '请选择要删除的数据' : ''"
+                  @click="handleBatchDelete"
+                >
+                  <template #icon><icon-delete /></template>删除
+                </a-button>
+              </a-space>
+            </a-col>
+            <a-col :span="12">
+              <right-toolbar
+                v-model:show-query="showQuery"
+                @refresh="getList"
+              />
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+
+      <!-- 列表区域 -->
+      <a-table
+        ref="tableRef"
+        row-key="id"
+        :data="dataList"
+        :loading="loading"
+        :row-selection="{
+          type: 'checkbox',
+          showCheckedAll: true,
+          onlyCurrent: false,
+        }"
+        :pagination="{
+          showTotal: true,
+          showPageSize: true,
+          total: total,
+          current: queryParams.page,
+        }"
+        :bordered="false"
+        column-resizable
+        stripe
+        size="large"
+        @page-change="handlePageChange"
+        @page-size-change="handlePageSizeChange"
+        @selection-change="handleSelectionChange"
+      >
+        <template #columns>
+          <a-table-column title="序号">
+            <template #cell="{ rowIndex }">
+              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
+            </template>
+          </a-table-column>
+          <a-table-column title="主题">
+            <template #cell="{ record }">
+              <a-link @click="toDetail(record.id)">{{ record.title }}</a-link>
+            </template>
+          </a-table-column>
+          <a-table-column title="类型" align="center">
+            <template #cell="{ record }">
+              <dict-tag :value="record.type" :dict="message_type" />
+            </template>
+          </a-table-column>
+          <a-table-column title="是否已读" align="center">
+            <template #cell="{ record }">
+              <a-tag v-if="record.readStatus" color="green">是</a-tag>
+              <a-tag v-else color="red">否</a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="发送时间" data-index="createTime" />
+          <a-table-column
+            v-if="checkPermission(['system:message:delete'])"
+            title="操作"
+            align="center"
+          >
+            <template #cell="{ record }">
+              <a-button
+                :disabled="record.readStatus"
+                type="text"
+                size="small"
+                title="标记已读"
+                @click="handleReadMessage([record.id])"
+              >
+                <template #icon><icon-check /></template>标记已读
+              </a-button>
+
+              <a-popconfirm
+                content="确定要删除当前选中的数据吗？"
+                type="warning"
+                @ok="handleDelete([record.id])"
+              >
+                <a-button
+                  v-permission="['system:announcement:delete']"
+                  type="text"
+                  size="small"
+                  title="删除"
+                  :disabled="record.disabled"
+                >
+                  <template #icon><icon-delete /></template>删除
+                </a-button>
+              </a-popconfirm>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+
+      <!-- 详情区域 -->
+      <a-drawer
+        title="消息详情"
+        :visible="detailVisible"
+        :width="580"
+        :footer="false"
+        unmount-on-close
+        render-to-body
+        @cancel="handleDetailCancel"
+      >
+        <a-descriptions :column="2" bordered size="large">
+          <a-descriptions-item label="主题">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dataDetail.title }}</span>
+          </a-descriptions-item>
+
+          <a-descriptions-item label="类型">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>
+              <dict-tag :value="dataDetail.type" :dict="message_type" />
+            </span>
+          </a-descriptions-item>
+
+          <a-descriptions-item label="发送人">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else-if="dataDetail.createUserString">{{ dataDetail.createUserString }}</span>
+            <dict-tag
+              v-if="dataDetail.createUserString == null"
+              :value="dataDetail.type"
+              :dict="message_type"
+            />
+          </a-descriptions-item>
+
+          <a-descriptions-item label="发送时间">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dataDetail.createTime }}</span>
+          </a-descriptions-item>
+
+          <a-descriptions-item label="是否已读">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span color="green" v-else>
+               <a-tag v-if="dataDetail.readStatus" color="green">已读</a-tag>
+               <a-tag v-else color="red">未读</a-tag>
+            </span>
+          </a-descriptions-item>
+
+          <a-descriptions-item label="读取时间">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dataDetail.readTime }}</span>
+          </a-descriptions-item>
+
+          <a-descriptions-item label="内容">
+            <a-skeleton v-if="detailLoading" :animation="true">
+              <a-skeleton-line :rows="1" />
+            </a-skeleton>
+            <span v-else>{{ dataDetail.content || '无' }}</span>
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-drawer>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
+  import {
+    MessageRecord,
+    page,
+    ListParam,
+    get,
+    del,
+    read,
+  } from '@/api/system/message';
+  import checkPermission from '@/utils/permission';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { message_type } = proxy.useDict('message_type');
+
+  const dataList = ref<MessageRecord[]>([]);
+  const dataDetail = ref<MessageRecord>({});
+  const total = ref(0);
+  const ids = ref<Array<number>>([]);
+  const single = ref(true);
+  const multiple = ref(true);
+  const readMultiple = ref(true);
+  const showQuery = ref(true);
+  const loading = ref(false);
+  const detailVisible = ref(false);
+  const detailLoading = ref(false);
+
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      title: undefined,
+      readStatus: undefined,
+      type: undefined,
+      page: 1,
+      size: 10,
+      sort: ['createTime,desc'],
+    },
+  });
+  const { queryParams } = toRefs(data);
+  /**
+   * 查询列表
+   *
+   */
+  const getList = (params: ListParam = { ...queryParams.value }) => {
+    loading.value = true;
+    page(params)
+      .then((res) => {
+        dataList.value = res.data.list;
+        total.value = res.data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    detailVisible.value = true;
+    get(id).then((res) => {
+      dataDetail.value = res.data;
+    });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+    dataDetail.value = {};
+  };
+
+  /**
+   * 批量删除
+   */
+  const handleBatchDelete = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要删除的数据');
+    } else {
+      proxy.$modal.warning({
+        title: '警告',
+        titleAlign: 'start',
+        content: '确定要删除当前选中的数据吗？',
+        hideCancel: false,
+        onOk: () => {
+          handleDelete(ids.value);
+        },
+      });
+    }
+  };
+
+  /**
+   * 删除
+   *
+   * @param ids ID 列表
+   */
+  const handleDelete = (ids: Array<number>) => {
+    del(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 批量将消息设置为已读
+   */
+  const handleBatchRedaMessage = () => {
+    if (ids.value.length === 0) {
+      proxy.$message.info('请选择要读取的数据');
+    } else {
+      handleReadMessage(ids.value);
+    }
+  };
+
+  /**
+   * 批量所以消息设置为已读
+   */
+  const handleAllRedaMessage = () => {
+      handleReadMessage([]);
+  };
+
+  /**
+   * 将消息设置为已读
+   *
+   * @param ids ID 列表
+   */
+  const handleReadMessage = (ids: Array<number>) => {
+    read(ids).then((res) => {
+      proxy.$message.success(res.msg);
+      getList();
+      proxy.$refs.tableRef.selectAll(false);
+    });
+  };
+
+  /**
+   * 已选择的数据行发生改变时触发
+   *
+   * @param rowKeys ID 列表
+   */
+  const handleSelectionChange = (rowKeys: Array<any>) => {
+   const unReadMessageList = dataList.value.filter(
+      (item) => rowKeys.indexOf(item.id)!==-1 && !item.readStatus
+    );
+    readMultiple.value=!unReadMessageList.length
+    ids.value = rowKeys;
+    single.value = rowKeys.length !== 1;
+    multiple.value = !rowKeys.length;
+
+  };
+
+  /**
+   * 查询
+   */
+  const handleQuery = () => {
+    getList();
+  };
+
+  /**
+   * 重置
+   */
+  const resetQuery = () => {
+    proxy.$refs.queryRef.resetFields();
+    handleQuery();
+  };
+
+  /**
+   * 切换页码
+   *
+   * @param current 页码
+   */
+  const handlePageChange = (current: number) => {
+    queryParams.value.page = current;
+    getList();
+  };
+
+  /**
+   * 切换每页条数
+   *
+   * @param pageSize 每页条数
+   */
+  const handlePageSizeChange = (pageSize: number) => {
+    queryParams.value.size = pageSize;
+    getList();
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Announcement',
+  };
+</script>
+
+<style scoped lang="less">
+  :deep(.github-markdown-body) {
+    padding: 16px 32px 5px;
+  }
+
+  :deep(.arco-form-item-label-tooltip) {
+    margin-left: 3px;
+  }
+
+  .meta-data {
+    font-size: 15px;
+    text-align: center;
+  }
+
+  .icon {
+    margin-right: 3px;
+  }
+
+  .update-time-row {
+    text-align: right;
+  }
+</style>

continew-admin-ui/src/views/system/message/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  'menu.system.message.list': 'Message management',
+};

continew-admin-ui/src/views/system/message/locale/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  'menu.system.message.list': '消息管理',
+};