From 9642f2c4369a798afc21295aafe2436d6438a4e4 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 17 Nov 2021 10:38:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E4=BD=BF=E5=85=B6=E6=89=93=E5=BC=80=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=97=B6=E8=83=BD=E5=A4=9F=E9=94=81=E5=AE=9A=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/Item.tsx          | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index d2511eaa..d24c0cb1 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   ChatMessage,
   formatShortTime,
@@ -24,6 +24,7 @@ import { Icon } from '@iconify/react';
 import { Divider, Dropdown, Menu } from 'antd';
 import { UserName } from '@/components/UserName';
 import './item.less';
+import clsx from 'clsx';
 
 /**
  * 消息的会话操作
@@ -111,11 +112,17 @@ MessageQuote.displayName = 'MessageQuote';
 const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
   const { showAvatar, payload } = props;
   const userInfo = useCachedUserInfo(payload.author ?? '');
+  const [isActionBtnActive, setIsActionBtnActive] = useState(false);
 
   const actions = useChatMessageItemAction(payload);
 
   return (
-    <div className="chat-message-item flex px-2 group hover:bg-black hover:bg-opacity-10 relative">
+    <div
+      className={clsx('chat-message-item flex px-2 group relative', {
+        'bg-black bg-opacity-10': isActionBtnActive,
+        'hover:bg-black hover:bg-opacity-10': !isActionBtnActive,
+      })}
+    >
       {/* 头像 */}
       <div className="w-18 flex items-start justify-center pt-0.5">
         {showAvatar ? (
@@ -149,8 +156,22 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
       </div>
 
       {/* 操作 */}
-      <Dropdown overlay={actions} placement="bottomLeft" trigger={['click']}>
-        <div className="opacity-0 group-hover:opacity-100 bg-white dark:bg-black bg-opacity-80 hover:bg-opacity-100 rounded px-0.5 absolute right-2 cursor-pointer w-6 h-6 -top-3 flex justify-center items-center shadow-sm">
+      <Dropdown
+        overlay={actions}
+        placement="bottomLeft"
+        trigger={['click']}
+        onVisibleChange={setIsActionBtnActive}
+      >
+        <div
+          className={clsx(
+            'bg-white dark:bg-black rounded px-0.5 absolute right-2 cursor-pointer w-6 h-6 -top-3 flex justify-center items-center shadow-sm',
+            {
+              'opacity-0 group-hover:opacity-100 bg-opacity-80 hover:bg-opacity-100':
+                !isActionBtnActive,
+              'opacity-100 bg-opacity-100': isActionBtnActive,
+            }
+          )}
+        >
           <Icon icon="mdi:dots-horizontal" />
         </div>
       </Dropdown>