From 3dcbad68fdc585ddde38139e162ec91d632361ef Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 8 Oct 2021 20:39:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E7=9A=84=E4=BF=A1=E6=81=AF=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/index.tsx                              |   1 +
 shared/utils/consts.ts                        |   5 +
 .../ChatBox/ChatMessageList/Item.tsx          | 111 +++++++++++-------
 3 files changed, 76 insertions(+), 41 deletions(-)

diff --git a/shared/index.tsx b/shared/index.tsx
index da84108d..4e8b5532 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -132,6 +132,7 @@ export type { AppStore, AppState, AppDispatch } from './redux/store';
 
 // utils
 export { joinArray } from './utils/array-helper';
+export { SYSTEM_USERID } from './utils/consts';
 export {
   shouldShowMessageTime,
   getMessageTimeDiff,
diff --git a/shared/utils/consts.ts b/shared/utils/consts.ts
index 556626d3..9342f0f7 100644
--- a/shared/utils/consts.ts
+++ b/shared/utils/consts.ts
@@ -2,3 +2,8 @@
  * 系统语言的常量
  */
 export const LANGUAGE_KEY = 'i18n:language';
+
+/**
+ * 系统用户id
+ */
+export const SYSTEM_USERID = '000000000000000000000000';
diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index cf9ccba8..a61c547b 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import {
   ChatMessage,
   formatShortTime,
+  SYSTEM_USERID,
   t,
   useCachedUserInfo,
   useChatBoxContext,
@@ -53,59 +54,87 @@ const MessageQuote: React.FC<{ payload: ChatMessage }> = React.memo(
 );
 MessageQuote.displayName = 'MessageQuote';
 
-interface ChatMessageItemProps {
-  showAvatar: boolean;
-  payload: ChatMessage;
-}
-export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
-  (props) => {
-    const { showAvatar, payload } = props;
-    const userInfo = useCachedUserInfo(payload.author ?? '');
+/**
+ * 普通消息
+ */
+const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
+  const { showAvatar, payload } = props;
+  const userInfo = useCachedUserInfo(payload.author ?? '');
 
-    const actions = useChatMessageItemAction(payload);
+  const actions = useChatMessageItemAction(payload);
 
-    return (
-      <div className="chat-message-item flex px-2 group hover:bg-black hover:bg-opacity-10 relative">
-        {/* 头像 */}
-        <div className="w-18 flex items-start justify-center pt-0.5">
-          {showAvatar ? (
-            <Avatar size={40} src={userInfo.avatar} name={userInfo.nickname} />
-          ) : (
-            <div className="hidden group-hover:block opacity-40">
+  return (
+    <div className="chat-message-item flex px-2 group hover:bg-black hover:bg-opacity-10 relative">
+      {/* 头像 */}
+      <div className="w-18 flex items-start justify-center pt-0.5">
+        {showAvatar ? (
+          <Avatar size={40} src={userInfo.avatar} name={userInfo.nickname} />
+        ) : (
+          <div className="hidden group-hover:block opacity-40">
+            {formatShortTime(payload.createdAt)}
+          </div>
+        )}
+      </div>
+
+      {/* 主体 */}
+      <div className="flex flex-col flex-1 overflow-auto group">
+        {showAvatar && (
+          <div className="flex items-center">
+            <div className="font-bold">{userInfo.nickname}</div>
+            <div className="hidden group-hover:block opacity-40 ml-1 text-sm">
               {formatShortTime(payload.createdAt)}
             </div>
-          )}
-        </div>
+          </div>
+        )}
 
-        {/* 主体 */}
-        <div className="flex flex-col flex-1 overflow-auto group">
-          {showAvatar && (
-            <div className="flex items-center">
-              <div className="font-bold">{userInfo.nickname}</div>
-              <div className="hidden group-hover:block opacity-40 ml-1 text-sm">
-                {formatShortTime(payload.createdAt)}
-              </div>
-            </div>
-          )}
+        <div className="leading-6 break-words">
+          <MessageQuote payload={payload} />
 
-          <div className="leading-6 break-words">
-            <MessageQuote payload={payload} />
+          <span>{getMessageRender(payload.content)}</span>
 
-            <span>{getMessageRender(payload.content)}</span>
+          {/* 解释器按钮 */}
+          {useRenderPluginMessageInterpreter(payload.content)}
+        </div>
+      </div>
 
-            {/* 解释器按钮 */}
-            {useRenderPluginMessageInterpreter(payload.content)}
-          </div>
+      {/* 操作 */}
+      <Dropdown overlay={actions} placement="bottomLeft" trigger={['click']}>
+        <div className="opacity-0 group-hover:opacity-100 bg-black bg-opacity-5 hover:bg-opacity-10 rounded px-0.5 absolute right-2 top-0.5 cursor-pointer">
+          <Icon icon="mdi:dots-horizontal" />
         </div>
+      </Dropdown>
+    </div>
+  );
+});
+NormalMessage.displayName = 'NormalMessage';
 
-        {/* 操作 */}
-        <Dropdown overlay={actions} placement="bottomLeft" trigger={['click']}>
-          <div className="opacity-0 group-hover:opacity-100 bg-black bg-opacity-5 hover:bg-opacity-10 rounded px-0.5 absolute right-2 top-0.5 cursor-pointer">
-            <Icon icon="mdi:dots-horizontal" />
-          </div>
-        </Dropdown>
+/**
+ * 系统消息
+ */
+const SystemMessage: React.FC<ChatMessageItemProps> = React.memo(
+  ({ payload }) => {
+    return (
+      <div className="text-center">
+        <div className="bg-black bg-opacity-20 rounded inline-block py-0.5 px-2 my-1 text-sm">
+          {payload.content}
+        </div>
       </div>
     );
   }
 );
+SystemMessage.displayName = 'SystemMessage';
+
+interface ChatMessageItemProps {
+  showAvatar: boolean;
+  payload: ChatMessage;
+}
+export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
+  (props) => {
+    if (props.payload.author === SYSTEM_USERID) {
+      return <SystemMessage {...props} />;
+    }
+
+    return <NormalMessage {...props} />;
+  }
+);
 ChatMessageItem.displayName = 'ChatMessageItem';