Skip to content

Commit

Permalink
🚧 完成消息详情查看处理
Browse files Browse the repository at this point in the history
  • Loading branch information
@Memoyu
Memoyu committed Jul 4, 2024
1 parent f407914 commit fb4bcfa
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 128 deletions.
3 changes: 2 additions & 1 deletion src/.env.development
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
NODE_ENV=development
VITE_BASE_API=http://localhost:11010/
VITE_BASE_API=http://localhost:11010/
VITE_CLIENT_SITE=http://192.168.3.86:11012/
13 changes: 12 additions & 1 deletion src/src/common/constant.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const clientBaseURL = import.meta.env.VITE_CLIENT_SITE;

// 授权用户 token
const TOKEN: string = 'token';
// const REFRESH_TOKEN: string = 'refresh-token';
Expand All @@ -8,4 +10,13 @@ const THEME_MODE: string = 'theme-mode';
const NOTIFICATION_HUB_ENDPOINT = 'hubs/management/notification';
const NOTIFICATION_METHOD_NAME = 'ReceivedNotification';

export { TOKEN, USER, THEME_MODE, NOTIFICATION_HUB_ENDPOINT, NOTIFICATION_METHOD_NAME };
const CLIENT_ARTICLE_DETAIL_URL = `${clientBaseURL}article/detail/`;

export {
TOKEN,
USER,
THEME_MODE,
NOTIFICATION_HUB_ENDPOINT,
NOTIFICATION_METHOD_NAME,
CLIENT_ARTICLE_DETAIL_URL,
};
6 changes: 3 additions & 3 deletions src/src/common/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,7 +681,7 @@ export interface CommentMessageResult {
visitorNickname: string;
visitorAvatar: string;
title: string;
belongId: number;
belongId: string;
commentType: BelongType;
content: string;
}
Expand All @@ -690,7 +690,7 @@ export interface LikeMessageResult {
visitorNickname: string;
visitorAvatar: string;
title: string;
belongId: number;
belongId: string;
likeType: BelongType;
}

Expand All @@ -709,7 +709,7 @@ export interface UserNotifyModel {

export interface MessageReadRequest {
type?: MessageType;
messagesIds?: Array<string>;
messageIds?: Array<string>;
}

export interface MessagePageRequest extends PaginationRequest {
Expand Down
90 changes: 57 additions & 33 deletions src/src/components/layout/components/footer/components/user-avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Popover,
Popconfirm,
Notification,
Toast,
} from '@douyinfe/semi-ui';
import { IconExit, IconLikeHeart, IconAt, IconSend } from '@douyinfe/semi-icons';

Expand All @@ -22,13 +23,15 @@ import { shallow } from 'zustand/shallow';

import './index.scss';

import { unreadMessageGet } from '@src/utils/request';
import { messageRead, unreadMessageGet } from '@src/utils/request';

import { CLIENT_ARTICLE_DETAIL_URL } from '@common/constant';
import {
MessageType,
UserMessageResult,
CommentMessageResult,
LikeMessageResult,
NotificationStore,
} from '@src/common/model';

interface ComProps {}
Expand All @@ -44,6 +47,8 @@ const Index: FC<ComProps> = ({}) => {
const { setUnreadNum } = useNotificationStore.getState();
const total = useNotificationStore((state) => state.unreadNum.total, shallow);

const readMessage = useNotificationStore((state) => state.readMessage);

const [notifyVisible, setNotifyVisible] = useState<boolean>(false);

const getUnreadMessageNum = () => {
Expand All @@ -57,16 +62,15 @@ const Index: FC<ComProps> = ({}) => {
const unsub = useNotificationStore.subscribe(
(state) => state.notifications,
(notifications, prevnNotifications) => {
console.log('订阅触发');
if (notifications.length < 1) return;
let notification = notifications[0];

// 推送通知
Notification.info({
icon: getMessageIcon(notification.type),
title: getMessageTitle(notification.type),
content: getMessageContent(notification.type, notification.content),
duration: 10,
content: getMessageContent(notification),
duration: 0,
});
}
);
Expand Down Expand Up @@ -103,40 +107,60 @@ const Index: FC<ComProps> = ({}) => {
};

// 构建消息提醒内容
const getMessageContent = (type: MessageType, content: string) => {
const getMessageContent = (notification: NotificationStore) => {
let type = notification.type;
let message = notification.content;
let title = '';
let content = '';
let link = '';

switch (type) {
case MessageType.User:
let userMessage: UserMessageResult = JSON.parse(content);
return (
<>
<Text strong>{userMessage.userNickname} 发来消息：</Text>
<br />
<Text ellipsis={true} style={{ width: 330 }}>
{userMessage.content}
</Text>
</>
);
let userMessage: UserMessageResult = JSON.parse(message);
title = `${userMessage.userNickname} 发来消息：`;
content = userMessage.content;
break;
case MessageType.Comment:
let commentMessage: CommentMessageResult = JSON.parse(content);
return (
<>
<Text strong ellipsis={true} style={{ width: 330 }}>
{commentMessage.visitorNickname} 评论文章: [{commentMessage.title}]
</Text>
<br />
<Text ellipsis={true} style={{ width: 330 }}>
{commentMessage.content}
</Text>
</>
);
let commentMessage: CommentMessageResult = JSON.parse(message);
title = `${commentMessage.visitorNickname} 评论文章: [${commentMessage.title}]`;
content = commentMessage.content;
link = CLIENT_ARTICLE_DETAIL_URL + commentMessage.belongId;
break;
case MessageType.Like:
let likeMessage: LikeMessageResult = JSON.parse(content);
return (
<Text strong ellipsis={true} style={{ width: 330 }}>
{likeMessage.visitorNickname} 点赞文章: {likeMessage.title}
</Text>
);
let likeMessage: LikeMessageResult = JSON.parse(message);
title = `${likeMessage.visitorNickname} 点赞文章: [${likeMessage.title}]`;
link = CLIENT_ARTICLE_DETAIL_URL + likeMessage.belongId;
break;
}

return (
<>
<Text strong ellipsis={true} style={{ width: 330 }}>
{title}
</Text>
<br />
{content.length > 1 && (
<Text ellipsis={true} style={{ width: 330, marginLeft: 10 }}>
{content}
</Text>
)}
{link.length > 1 && (
<div style={{ marginTop: 8 }}>
<Text
onClick={() => handleReadMessageClick(type, notification.messageId)}
link={{ href: link, target: '_blank' }}
>
查看详情
</Text>
</div>
)}
</>
);
};

// 触发查看消息详情，并已读消息
const handleReadMessageClick = (type: MessageType, messageId: string) => {
readMessage(type, messageId);
};

// 展示用户信息
Expand Down
95 changes: 67 additions & 28 deletions src/src/components/layout/components/footer/components/user-notify/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
} from '@src/common/model';

import './index.scss';
import { CLIENT_ARTICLE_DETAIL_URL } from '@src/common/constant';

interface MessageShowModel {
messageId: string;
Expand All @@ -40,6 +41,7 @@ interface MessageShowModel {
title: string;
content: string;
date: Date;
link: string;
}

interface ComProps {}
Expand All @@ -49,6 +51,7 @@ const { Text, Paragraph } = Typography;
const Index: FC<ComProps> = ({}) => {
const setTypeUnreadNum = useNotificationStore((state) => state.setTypeUnreadNum);
const unreadNum = useNotificationStore((state) => state.unreadNum, shallow);
const readMessage = useNotificationStore((state) => state.readMessage);

const pageSize = 15;
const [_, messageShowLoading, _set, setMessageShowLoading] = useData<Array<MessageShowModel>>();
Expand Down Expand Up @@ -86,13 +89,12 @@ const Index: FC<ComProps> = ({}) => {
};

useEffect(() => {
const unsub = useNotificationStore.subscribe(
const unsubNotification = useNotificationStore.subscribe(
(state) => state.notifications,
(notifications, _) => {
if (notifications.length < 1) return;
let notification = notifications[0];

console.log(tabActive.current, notification.type);
// console.log(tabActive.current, notification.type);
if (tabActive.current != notification.type) return; // 推送的消息不是当前选中的tab
setMessageShows((ms) => {
if (!ms) ms = [];
Expand All @@ -108,7 +110,30 @@ const Index: FC<ComProps> = ({}) => {
});
}
);
return unsub;

const unsubReadMessage = useNotificationStore.subscribe(
(state) => state.readMessageId,
(id, _) => {
if (id.length < 1) return;
setMessageShows((ms) => {
if (!ms) return;
try {
ms.map((m) => {
if (m.messageId == id) {
m.isRead = true;
throw '成功已读';
}
});
} catch {}
return [...ms];
});
}
);

return () => {
unsubNotification();
unsubReadMessage();
};
}, []);

useOnMountUnsafe(() => {
Expand All @@ -124,6 +149,7 @@ const Index: FC<ComProps> = ({}) => {
title: '',
content: '',
date: message.createTime,
link: '',
};
switch (message.messageType) {
case MessageType.User:
Expand All @@ -137,11 +163,13 @@ const Index: FC<ComProps> = ({}) => {
show.avatar = commentMessage.visitorAvatar;
show.title = `${commentMessage.visitorNickname} 评论文章: [${commentMessage.title}]`;
show.content = commentMessage.content;
show.link = CLIENT_ARTICLE_DETAIL_URL + commentMessage.belongId;
break;
case MessageType.Like:
let likeMessage: LikeMessageResult = JSON.parse(message.content);
show.avatar = likeMessage.visitorAvatar;
show.title = `${likeMessage.visitorNickname} 点赞文章: [${likeMessage.title}]`;
show.link = CLIENT_ARTICLE_DETAIL_URL + likeMessage.belongId;
break;
}
return show;
Expand All @@ -159,11 +187,7 @@ const Index: FC<ComProps> = ({}) => {
// 【全部已读】触发，已读当前选选中的类型消息
const handleAllReadClick = () => {
let type: MessageType = tabActive.current;
let request: MessageReadRequest = {
type: type,
};

messageRead(request).then((res) => {
messageRead({ type }).then((res) => {
if (!res.isSuccess) {
Toast.error('操作失败：' + res.message);
return;
Expand All @@ -174,6 +198,12 @@ const Index: FC<ComProps> = ({}) => {
});
};

// 触发查看消息详情，并已读消息
const handleReadMessageClick = (messageId: string) => {
let type: MessageType = tabActive.current;
readMessage(type, messageId);
};

const emptyRender = (
<div className="empty">
<Empty
Expand Down Expand Up @@ -238,29 +268,36 @@ const Index: FC<ComProps> = ({}) => {
}
main={
<div>
<Text strong>{item.title}</Text>
<Paragraph ellipsis={true} style={{ width: 260 }}>
{item.content}
</Paragraph>

<Text
strong
link={
item.link.length > 1 && {
href: item.link,
target: '_blank',
}
}
onClick={() =>
item.isRead
? () => {}
: handleReadMessageClick(item.messageId)
}
>
{item.title}
</Text>
{item.content.length > 1 && (
<Paragraph
ellipsis={true}
style={{ width: 250, marginLeft: 10 }}
>
{item.content}
</Paragraph>
)}
<div
style={{
marginTop: 10,
// display: 'flex',
// justifyContent: 'space-between',
alignItems: 'center',
}}
>
{/* {!item.isRead && (
<Button
style={{ float: 'left' }}
size="small"
theme="borderless"
onClick={() => {}}
>
标为已读
</Button>
)} */}
<Text type="tertiary" style={{ float: 'right' }}>
{format(item.date, 'yyyy-MM-dd HH:mm')}
</Text>
Expand All @@ -278,12 +315,14 @@ const Index: FC<ComProps> = ({}) => {
return (
<Tabs
size="small"
// activeKey={tabActiveKey}
defaultActiveKey={tabActive.current.toString()}
onChange={handleTabChange}
tabBarExtraContent={
<div style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={handleAllReadClick}>全部已读</Button>
<Text onClick={handleAllReadClick} link>
全部已读
</Text>
{/* <Button onClick={handleAllReadClick}>全部已读</Button> */}
</div>
}
>
Expand Down
Loading

0 comments on commit fb4bcfa

Please sign in to comment.