refactor: 调整我的消息内容展示方式为弹窗

src/views/user/message/components/MyMessage.vue

@@ -52,7 +52,18 @@
       </a-button>
     </template>
     <template #title="{ record }">
-      <a-tooltip :content="record.content"><span>{{ record.title }}</span></a-tooltip>
+      <a-link @click="showMessageDetail(record)">
+        <a-typography-paragraph
+          class="link-text"
+          :ellipsis="{
+            rows: 1,
+            showTooltip: true,
+            css: true,
+          }"
+        >
+          {{ record.title }}
+        </a-typography-paragraph>
+      </a-link>
     </template>
     <template #type="{ record }">
       <GiCellTag :value="record.type" :dict="message_type_enum" />
@@ -63,18 +74,41 @@
       </a-tag>
     </template>
   </GiTable>
+
+  <!-- 消息详情弹窗 -->
+  <a-modal
+    v-model:visible="messageDetailVisible"
+    :width="width >= 500 ? 500 : '100%'"
+    :footer="false"
+    :mask-closable="true"
+    class="message-detail-modal"
+  >
+    <template #title>{{ currentMessage?.title }}</template>
+    <div class="message-detail-content">
+      <div class="message-content">{{ currentMessage?.content }}</div>
+      <div class="message-footer">
+        <div class="time-info">
+          <icon-clock-circle class="time-icon" />
+          <span class="time-label">发送时间：</span>
+          <span class="time-value">{{ currentMessage?.createTime }}</span>
+        </div>
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
 import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
 import { type MessageQuery, deleteMessage, listMessage, readAllMessage, readMessage } from '@/apis'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import mittBus from '@/utils/mitt'
 
-defineOptions({ name: 'SystemMessage' })
+defineOptions({ name: 'UserMyMessage' })
 
+const { width } = useWindowSize()
 const { message_type_enum } = useDict('message_type_enum')
 
 const queryForm = reactive<MessageQuery>({
@@ -148,6 +182,111 @@ const onReadAll = async () => {
     },
   })
 }
+
+// 消息详情弹窗相关
+const messageDetailVisible = ref(false)
+const currentMessage = ref()
+
+// 标记单条消息为已读
+const markAsRead = async (messageId: string) => {
+  try {
+    await readMessage([messageId])
+    search()
+  } catch (error) {
+    Message.error('操作失败')
+  }
+}
+
+// 显示消息详情
+const showMessageDetail = async (record: any) => {
+  currentMessage.value = record
+  messageDetailVisible.value = true
+  // 如果消息未读，自动标记为已读
+  if (!record.isRead) {
+    await markAsRead(record.id)
+  }
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.link-text {
+  margin-bottom: 0;
+  font-weight: 500;
+
+  :deep(.arco-typography) {
+    margin-bottom: 0;
+  }
+}
+
+:deep(.message-detail-modal) {
+  .arco-modal-header {
+    border-bottom: 1px solid var(--color-border-2);
+    padding: 20px 24px 16px;
+
+    .arco-modal-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text-1);
+    }
+  }
+
+  .arco-modal-body {
+    padding: 24px;
+  }
+}
+
+.message-detail-content {
+  .message-content {
+    margin-bottom: 24px;
+    line-height: 1.6;
+    color: var(--color-text-1);
+    font-size: 14px;
+    min-height: 80px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  .message-footer {
+    .time-info {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .time-icon {
+        font-size: 14px;
+        color: var(--color-text-3);
+      }
+
+      .time-label {
+        font-size: 13px;
+        color: var(--color-text-3);
+      }
+
+      .time-value {
+        font-size: 13px;
+        color: var(--color-text-2);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border-2);
+  background-color: var(--color-bg-1);
+
+  .arco-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .btn-icon {
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/user/message/components/MyNotice.vue

@@ -55,7 +55,7 @@ import { type NoticeQuery, type NoticeResp, listUserNotice } from '@/apis/system
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 
-defineOptions({ name: 'SystemMessage' })
+defineOptions({ name: 'UserMyNotice' })
 
 const { notice_type } = useDict('notice_type')
 

src/views/user/message/index.vue

@@ -18,9 +18,7 @@
         </a-tab-pane>
       </a-tabs>
     </template>
-    <transition name="fade-slide" mode="out-in" appear>
+    <component :is="menuList.find((item) => item.key === activeKey)?.value"></component>
-      <component :is="menuList.find((item) => item.key === activeKey)?.value"></component>
-    </transition>
   </GiPageLayout>
 </template>
 
@@ -58,8 +56,8 @@ const unreadMessageCount = ref(0)
 const unreadNoticeCount = ref(0)
 
 const tabItems = computed(() => [
-  { key: 'msg', title: '我的消息', count: unreadMessageCount },
+  { key: 'msg', title: '我的消息', count: unreadMessageCount.value },
-  { key: 'notice', title: '我的公告', count: unreadNoticeCount },
+  { key: 'notice', title: '我的公告', count: unreadNoticeCount.value },
 ])
 
 const getMessageData = async () => {
@@ -77,6 +75,7 @@ onMounted(() => {
   getNoticeData()
   mittBus.on('count-refresh', () => {
     getMessageData()
+    getNoticeData()
   })
 })