From 590b572263c3752ec165941ee603c3b7163e923c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 18 Jan 2023 01:02:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E5=AE=B9=E5=99=A8=E7=94=A8=E4=BA=8E=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/Item.tsx          | 12 ++++--
 .../MessageHighlightContainer.tsx             | 41 +++++++++++++++++++
 .../Main/Content/Inbox/Content/Message.tsx    |  5 ++-
 3 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 client/web/src/components/ChatBox/ChatMessageList/MessageHighlightContainer.tsx

diff --git a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 9ff9c053..add788ea 100644
--- a/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/client/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -74,10 +74,14 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
 
   return (
     <div
-      className={clsx('chat-message-item flex px-2 group relative', {
-        'bg-black bg-opacity-10': isActionBtnActive,
-        'hover:bg-black hover:bg-opacity-5': !isActionBtnActive,
-      })}
+      className={clsx(
+        'chat-message-item flex px-2 group relative select-text',
+        {
+          'bg-black bg-opacity-10': isActionBtnActive,
+          'hover:bg-black hover:bg-opacity-5': !isActionBtnActive,
+        }
+      )}
+      data-message-id={payload._id}
     >
       {/* 头像 */}
       <div className="w-18 flex items-start justify-center pt-0.5">
diff --git a/client/web/src/components/ChatBox/ChatMessageList/MessageHighlightContainer.tsx b/client/web/src/components/ChatBox/ChatMessageList/MessageHighlightContainer.tsx
new file mode 100644
index 00000000..12a41a83
--- /dev/null
+++ b/client/web/src/components/ChatBox/ChatMessageList/MessageHighlightContainer.tsx
@@ -0,0 +1,41 @@
+import React, { PropsWithChildren, useEffect, useMemo } from 'react';
+
+interface Props extends PropsWithChildren {
+  messageId: string;
+}
+
+/**
+ * 消息高亮容器
+ * 在消息项的外部包裹该容器，则对应的消息会高亮
+ * 基于 [data-message-id="xxx"] 选择器
+ */
+export const MessageHighlightContainer: React.FC<Props> = React.memo(
+  (props) => {
+    const className = useMemo(
+      () => `message-highlight-${String(Math.random()).substring(2)}`,
+      []
+    );
+    useEffect(() => {
+      const style = document.createElement('style');
+      style.innerHTML = `
+.${className} [data-message-id="${props.messageId}"] {
+  background: #e0e7ff !important;
+}
+
+.dark .${className} [data-message-id="${props.messageId}"] {
+  background: rgba(0, 0, 0, 0.15) !important;
+}
+      `;
+      style.setAttribute('highlight-message-id', props.messageId);
+
+      document.body.append(style);
+
+      return () => {
+        style.remove();
+      };
+    }, [props.messageId, className]);
+
+    return <div className={className}>{props.children}</div>;
+  }
+);
+MessageHighlightContainer.displayName = 'MessageHighlightContainer';
diff --git a/client/web/src/routes/Main/Content/Inbox/Content/Message.tsx b/client/web/src/routes/Main/Content/Inbox/Content/Message.tsx
index 23742088..f9705fce 100644
--- a/client/web/src/routes/Main/Content/Inbox/Content/Message.tsx
+++ b/client/web/src/routes/Main/Content/Inbox/Content/Message.tsx
@@ -1,3 +1,4 @@
+import { MessageHighlightContainer } from '@/components/ChatBox/ChatMessageList/MessageHighlightContainer';
 import { NormalMessageList } from '@/components/ChatBox/ChatMessageList/NormalList';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { Problem } from '@/components/Problem';
@@ -71,14 +72,14 @@ export const NearbyMessages: React.FC<{
   }
 
   return (
-    <div>
+    <MessageHighlightContainer messageId={props.messageId}>
       <NormalMessageList
         messages={value}
         isLoadingMore={false}
         hasMoreMessage={false}
         onLoadMore={async () => {}}
       />
-    </div>
+    </MessageHighlightContainer>
   );
 });
 NearbyMessages.displayName = 'NearbyMessages';