refactor: 优化站内信及消息管理

1.新增站内信未读消息轮询 2.优化消息管理 API，移除部分无用 API 3.优化部分代码格式
2025-10-26 20:57:11 +08:00 · 2023-11-03 23:25:04 +08:00
parent 28f4791833
commit d41e01c388
32 changed files with 547 additions and 468 deletions
--- a/continew-admin-ui/src/api/system/message.ts
+++ b/continew-admin-ui/src/api/system/message.ts
@@ -3,45 +3,33 @@ import qs from 'query-string';

 const BASE_URL = '/system/message';

-export interface MessageRecord {
+export interface DataRecord {
  id: number;
  title: string;
  content: string;
-  type: string;
-  createUserString: string;
+  type: number;
+  createUserString?: string;
  createTime: string;
-  subTitle: string;
-  readStatus: boolean;
+  isRead: boolean;
  readTime: string;
 }

-export interface ChatRecord {
-  id: number;
-  username: string;
-  content: string;
-  time: string;
-  isCollect: boolean;
-}
-
 export interface ListParam {
  title?: string;
-  readStatus?: 0 | 1;
-  type?: string;
+  type?: number;
+  isRead?: boolean;
  page?: number;
  size?: number;
-  uid?: number;
  sort?: Array<string>;
 }

-export interface PageRes {
-  list: MessageRecord[];
+export interface ListRes {
+  list: DataRecord[];
  total: number;
 }

-export type MessageListType = MessageRecord[];
-
-export function page(params?: ListParam) {
-  return axios.get<PageRes>(`${BASE_URL}`, {
+export function list(params: ListParam) {
+  return axios.get<ListRes>(`${BASE_URL}`, {
    params,
    paramsSerializer: (obj) => {
      return qs.stringify(obj);
@@ -49,27 +37,24 @@ export function page(params?: ListParam) {
  });
 }

-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 read(ids: Array<number>) {
+  return axios.patch(`${BASE_URL}/read?ids=${ids}`);
 }

-export function queryChatList() {
-  return axios.get<ChatRecord[]>('/api/chat/list');
+export interface MessageTypeUnreadRes {
+  type: number;
+  count: number;
+}
+
+export interface MessageUnreadRes {
+  total: number;
+  details: MessageTypeUnreadRes[];
+}
+
+export function countUnread(detail: boolean) {
+  return axios.get<MessageUnreadRes>(`${BASE_URL}/unread?detail=${detail}`);
 }
--- a/continew-admin-ui/src/components/message-box/index.vue
+++ b/continew-admin-ui/src/components/message-box/index.vue
@@ -1,56 +1,68 @@
 <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 message_type" :key="item.value">
+      <a-tab-pane :key="1">
        <template #title>
-          <span> {{ item.label }}{{ formatUnreadLength(item.value) }} </span>
+          <span>
+            {{ $t('messageBox.tab.title.message.system')
+            }}{{ formatUnreadCount(messageType) }}
+          </span>
        </template>
-        <a-result v-if="!renderList.length" status="404">
+        <a-result v-if="!messageList.length" status="404">
          <template #subtitle> {{ $t('messageBox.noContent') }} </template>
        </a-result>
-        <List
-          :render-list="renderList"
-          :unread-count="unreadCount"
-          @item-click="handleItemClick"
-        />
+        <List :render-list="messageList" @item-click="handleItemClick" />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
 </template>

 <script lang="ts" setup>
-  import { computed, getCurrentInstance, reactive, ref, toRefs } from 'vue';
+  import { reactive, ref, toRefs } from 'vue';
  import {
-    MessageListType,
-    MessageRecord,
+    DataRecord,
+    MessageUnreadRes,
    list,
    read,
+    countUnread,
+    ListParam,
  } from '@/api/system/message';
  import useLoading from '@/hooks/loading';
  import List from './list.vue';

-  const { proxy } = getCurrentInstance() as any;
-  const { message_type } = proxy.useDict('message_type');
-  const { loading, setLoading } = useLoading(true);
-  const messageType = ref('1');
-
-  const messageData = reactive<{
-    renderList: MessageRecord[];
-    messageList: MessageRecord[];
-  }>({
-    renderList: [],
-    messageList: [],
+  const { loading, setLoading } = useLoading();
+  const messageType = ref(1);
+  const unreadCount = ref<MessageUnreadRes>();
+  const messageList = ref<DataRecord[]>([]);
+  const data = reactive({
+    // 查询参数
+    queryParams: {
+      type: messageType.value,
+      isRead: false,
+      page: 1,
+      size: 3,
+      sort: ['createTime,desc'],
+    },
  });
-  toRefs(messageData);
+  const { queryParams } = toRefs(data);

  /**
-   * 查询列表
+   * 查询未读消息数量
   */
-  async function fetchSourceData() {
+  async function getUnreadCount() {
+    const res = await countUnread(true);
+    unreadCount.value = res.data;
+  }
+
+  /**
+   * 查询未读消息列表
+   */
+  async function getList(params: ListParam = { ...queryParams.value }) {
+    await getUnreadCount();
    setLoading(true);
    try {
-      list({ sort: ['createTime,desc'] }).then((res) => {
-        messageData.messageList = res.data;
+      await list(params).then((res) => {
+        messageList.value = res.data.list;
      });
    } finally {
      setLoading(false);
@@ -60,49 +72,25 @@
  /**
   * 将消息设置为已读
   *
-   * @param data 消息列表
+   * @param items 消息列表
   */
-  async function readMessage(data: MessageListType) {
-    const ids = data.map((item) => item.id);
+  async function readMessage(items: DataRecord[]) {
+    const ids = items.map((item) => item.id);
    await read(ids);
-    await fetchSourceData();
+    await getList();
+    await getUnreadCount();
  }

-  /**
-   * 每个消息类型下的消息列表
-   */
-  const renderList = computed(() => {
-    return messageData.messageList
-      .filter((item) => item.type === messageType.value && !item.readStatus)
-      .splice(0, 3);
-  });
-
-  /**
-   * 未读消息数量
-   */
-  const unreadCount = computed(() => {
-    return renderList.value.filter((item) => !item.readStatus).length;
-  });
-
-  /**
-   * 未读消息列表
-   *
-   * @param type 消息类型
-   */
-  const getUnreadList = (type: string) => {
-    return messageData.messageList.filter(
-      (item) => item.type === type && !item.readStatus
-    );
-  };
-
  /**
   * 每个类型的未读消息数量
   *
   * @param type 消息类型
   */
-  const formatUnreadLength = (type: string) => {
-    const unreadList = getUnreadList(type);
-    return unreadList.length ? `(${unreadList.length})` : ``;
+  const formatUnreadCount = (type: number) => {
+    const count = unreadCount.value?.details.find(
+      (item) => item.type === type
+    )?.count;
+    return count && count !== 0 ? `(${count})` : '';
  };

  /**
@@ -110,10 +98,10 @@
   *
   * @param items 消息
   */
-  const handleItemClick = (items: MessageListType) => {
-    if (renderList.value.length) readMessage([...items]);
+  const handleItemClick = (items: DataRecord[]) => {
+    if (messageList.value.length) readMessage([...items]);
  };
-  fetchSourceData();
+  getList();
 </script>

 <style scoped lang="less">
--- a/continew-admin-ui/src/components/message-box/list.vue
+++ b/continew-admin-ui/src/components/message-box/list.vue
@@ -5,7 +5,7 @@
      :key="item.id"
      action-layout="vertical"
      :style="{
-        opacity: item.readStatus ? 0.5 : 1,
+        opacity: item.isRead ? 0.5 : 1,
      }"
    >
      <div class="item-wrap" @click="onItemClick(item)">
@@ -13,9 +13,6 @@
          <template #title>
            <a-space :size="4">
              <span>{{ item.title }}</span>
-              <a-typography-text type="secondary">
-                {{ item.subTitle }}
-              </a-typography-text>
            </a-space>
          </template>
          <template #description>
@@ -41,10 +38,12 @@
        :class="{ 'add-border-top': renderList.length < showMax }"
      >
        <div class="footer-wrap">
-          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
+          <a-link @click="handleReadAll">{{ $t('messageBox.allRead') }}</a-link>
        </div>
        <div class="footer-wrap">
-          <a-link @click="toList">{{ $t('messageBox.viewMore') }}</a-link>
+          <a-link @click="handleViewMore">{{
+            $t('messageBox.viewMore')
+          }}</a-link>
        </div>
      </a-space>
    </template>
@@ -58,33 +57,28 @@
 <script lang="ts" setup>
  import { PropType } from 'vue';
  import { useRouter } from 'vue-router';
-  import { MessageRecord, MessageListType } from '@/api/system/message';
+  import { DataRecord } from '@/api/system/message';

  const router = useRouter();
-
  const props = defineProps({
    renderList: {
-      type: Array as PropType<MessageListType>,
+      type: Array as PropType<DataRecord[]>,
      required: true,
    },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
  });
  const emit = defineEmits(['itemClick']);

  /**
   * 全部已读
   */
-  const allRead = () => {
+  const handleReadAll = () => {
    emit('itemClick', [...props.renderList]);
  };

  /**
   * 查看更多
   */
-  const toList = () => {
+  const handleViewMore = () => {
    router.push({
      name: 'Message',
    });
@@ -92,10 +86,11 @@

  /**
   * 点击消息
+   *
   * @param item 消息
   */
-  const onItemClick = (item: MessageRecord) => {
-    if (!item.readStatus) {
+  const onItemClick = (item: DataRecord) => {
+    if (!item.isRead) {
      emit('itemClick', [item]);
    }
  };
--- a/continew-admin-ui/src/components/message-box/locale/en-US.ts
+++ b/continew-admin-ui/src/components/message-box/locale/en-US.ts
@@ -1,7 +1,5 @@
 export default {
-  'messageBox.tab.title.message': 'Message',
-  'messageBox.tab.title.notice': 'Notice',
-  'messageBox.tab.title.todo': 'Todo',
+  'messageBox.tab.title.message.system': 'System Message',
  'messageBox.tab.button': 'empty',
  'messageBox.allRead': 'All Read',
  'messageBox.viewMore': 'View More',
--- a/continew-admin-ui/src/components/message-box/locale/zh-CN.ts
+++ b/continew-admin-ui/src/components/message-box/locale/zh-CN.ts
@@ -1,7 +1,5 @@
 export default {
-  'messageBox.tab.title.message': '消息',
-  'messageBox.tab.title.notice': '通知',
-  'messageBox.tab.title.todo': '待办',
+  'messageBox.tab.title.message.system': '系统消息',
  'messageBox.tab.button': '清空',
  'messageBox.allRead': '全部已读',
  'messageBox.viewMore': '查看更多',
--- a/continew-admin-ui/src/components/navbar/index.vue
+++ b/continew-admin-ui/src/components/navbar/index.vue
@@ -193,7 +193,7 @@
  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 { countUnread } from '@/api/system/message';
  import { LOCALE_OPTIONS } from '@/locale';
  import useLocale from '@/hooks/locale';
  import useUser from '@/hooks/user';
@@ -224,12 +224,17 @@
    },
  });
  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;
-  });
+
+  /**
+   * 查询未读消息总数
+   */
+  async function getUnreadCount() {
+    const res = await countUnread(false);
+    unReadMessageCount.value = res.data.total;
+  }
+  getUnreadCount();
+  setInterval(getUnreadCount, 10000);

  const handleToggleTheme = () => {
    toggleTheme();
--- a/continew-admin-ui/src/locale/en-US.ts
+++ b/continew-admin-ui/src/locale/en-US.ts
@@ -5,7 +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 localeMessage 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';

@@ -63,7 +63,7 @@ export default {
  ...localeMenu,
  ...localeDept,
  ...localeAnnouncement,
-  ...localeNotice,
+  ...localeMessage,
  ...localeDict,
  ...localeConfig,

--- a/continew-admin-ui/src/locale/zh-CN.ts
+++ b/continew-admin-ui/src/locale/zh-CN.ts
@@ -5,7 +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 localeMessage 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';

@@ -63,7 +63,7 @@ export default {
  ...localeMenu,
  ...localeDept,
  ...localeAnnouncement,
-  ...locaoNotice,
+  ...localeMessage,
  ...localeDict,
  ...localeConfig,

--- a/continew-admin-ui/src/router/routes/modules/system.ts
+++ b/continew-admin-ui/src/router/routes/modules/system.ts
@@ -62,7 +62,7 @@ const System: AppRouteRecordRaw = {
      path: '/system/message',
      component: () => import('@/views/system/message/index.vue'),
      meta: {
-        locale: 'menu.system.message',
+        locale: 'menu.system.message.list',
        requiresAuth: true,
      },
    },
--- a/continew-admin-ui/src/views/system/message/index.vue
+++ b/continew-admin-ui/src/views/system/message/index.vue
@@ -10,7 +10,7 @@
            <a-form-item field="title" hide-label>
              <a-input
                v-model="queryParams.title"
-                placeholder="输入主题搜索"
+                placeholder="输入标题搜索"
                allow-clear
                style="width: 230px"
                @press-enter="handleQuery"
@@ -19,16 +19,15 @@
            <a-form-item field="type" hide-label>
              <a-select
                v-model="queryParams.type"
-                :options="message_type"
+                :options="message_type_enum"
                placeholder="类型搜索"
                allow-clear
                style="width: 150px"
              />
            </a-form-item>
-
-            <a-form-item field="type" hide-label>
+            <a-form-item field="isRead" hide-label>
              <a-select
-                v-model="queryParams.readStatus"
+                v-model="queryParams.isRead"
                :style="{ width: '150px' }"
                placeholder="是否已读"
                allow-clear
@@ -58,7 +57,7 @@
                  type="primary"
                  status="success"
                  :disabled="readMultiple"
-                  :title="readMultiple ? '请选择要读取的数据' : ''"
+                  :title="readMultiple ? '请选择数据' : ''"
                  @click="handleBatchRedaMessage"
                >
                  <template #icon><icon-check /></template>标记已读
@@ -123,33 +122,27 @@
              {{ rowIndex + 1 + (queryParams.page - 1) * queryParams.size }}
            </template>
          </a-table-column>
-          <a-table-column title="主题">
+          <a-table-column title="标题">
            <template #cell="{ record }">
-              <a-link @click="toDetail(record.id)">{{ record.title }}</a-link>
+              <a-link @click="toDetail(record)">{{ 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" />
+              <dict-tag :value="record.type" :dict="message_type_enum" />
            </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-if="record.isRead" 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"
-          >
+          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-button
-                :disabled="record.readStatus"
+                :disabled="record.isRead"
                type="text"
                size="small"
                title="标记已读"
@@ -157,7 +150,6 @@
              >
                <template #icon><icon-check /></template>标记已读
              </a-button>
-
              <a-popconfirm
                content="确定要删除当前选中的数据吗？"
                type="warning"
@@ -189,60 +181,47 @@
        @cancel="handleDetailCancel"
      >
        <a-descriptions :column="2" bordered size="large">
-          <a-descriptions-item label="主题">
+          <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" />
+              <dict-tag :value="dataDetail.type" :dict="message_type_enum" />
            </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 v-else>
-              <a-tag v-if="dataDetail.readStatus" color="green">是</a-tag>
+              <a-tag v-if="dataDetail.isRead" 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.createUserString }}</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.createTime }}</span>
+          </a-descriptions-item>
          <a-descriptions-item label="内容">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
@@ -257,29 +236,19 @@

 <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';
+  import { DataRecord, ListParam, list, del, read } from '@/api/system/message';

  const { proxy } = getCurrentInstance() as any;
-  const { message_type } = proxy.useDict('message_type');
-
-  const dataList = ref<MessageRecord[]>([]);
-  const dataDetail = ref<MessageRecord>({
+  const { message_type_enum } = proxy.useDict('message_type_enum');
+  const dataList = ref<DataRecord[]>([]);
+  const dataDetail = ref<DataRecord>({
    id: 0,
    title: '',
    content: '',
-    type: '',
+    type: 1,
    createUserString: '',
    createTime: '',
-    subTitle: '',
-    readStatus: false,
+    isRead: false,
    readTime: '',
  });
  const total = ref(0);
@@ -296,21 +265,22 @@
    // 查询参数
    queryParams: {
      title: undefined,
-      readStatus: undefined,
      type: undefined,
+      isRead: undefined,
      page: 1,
      size: 10,
-      sort: ['createTime,desc'],
+      sort: ['isRead,asc', 'createTime,desc'],
    },
  });
  const { queryParams } = toRefs(data);
+
  /**
   * 查询列表
   *
   */
  const getList = (params: ListParam = { ...queryParams.value }) => {
    loading.value = true;
-    page(params)
+    list(params)
      .then((res) => {
        dataList.value = res.data.list;
        total.value = res.data.total;
@@ -324,13 +294,11 @@
  /**
   * 查看详情
   *
-   * @param id ID
+   * @param record 记录信息
   */
-  const toDetail = async (id: number) => {
+  const toDetail = async (record: DataRecord) => {
    detailVisible.value = true;
-    get(id).then((res) => {
-      dataDetail.value = res.data;
-    });
+    dataDetail.value = record;
  };

  /**
@@ -377,7 +345,7 @@
   */
  const handleBatchRedaMessage = () => {
    if (ids.value.length === 0) {
-      proxy.$message.info('请选择要读取的数据');
+      proxy.$message.info('请选择数据');
    } else {
      handleReadMessage(ids.value);
    }
@@ -410,7 +378,7 @@
   */
  const handleSelectionChange = (rowKeys: Array<any>) => {
    const unReadMessageList = dataList.value.filter(
-      (item) => rowKeys.indexOf(item.id) !== -1 && !item.readStatus
+      (item) => rowKeys.indexOf(item.id) !== -1 && !item.isRead
    );
    readMultiple.value = !unReadMessageList.length;
    ids.value = rowKeys;
@@ -460,25 +428,4 @@
  };
 </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>
+<style scoped lang="less"></style>