Browse Source

优化通知页面,新增消息状态判断,仅在未读状态下显示“标记已读”按钮,提升用户交互体验。

zyh 8 tháng trước cách đây
mục cha
commit
387c8f71f9
1 tập tin đã thay đổi với 10 bổ sung7 xóa
  1. 10 7
      client/mobile/pages_messages.tsx

+ 10 - 7
client/mobile/pages_messages.tsx

@@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { BellIcon } from '@heroicons/react/24/outline';
+import { MessageStatus } from '../share/types.ts';
 
 
 // 添加通知页面组件
@@ -79,13 +80,15 @@ export const NotificationsPage = () => {
             <div className="flex justify-between items-start">
               <h3 className="font-medium">{message.title}</h3>
               <div className="flex space-x-2">
-                <button
-                  type="button"
-                  onClick={() => handleMarkAsRead(message.id)}
-                  className="text-xs text-blue-600 hover:text-blue-800"
-                >
-                  标记已读
-                </button>
+                {message.user_status === MessageStatus.UNREAD && (
+                  <button
+                    type="button"
+                    onClick={() => handleMarkAsRead(message.id)}
+                    className="text-xs text-blue-600 hover:text-blue-800"
+                  >
+                    标记已读
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={() => handleDelete(message.id)}