feat: 增加消息高亮容器用于高亮消息

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">

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';

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';