From e59630b70ed0d245174c97136d502bb63cac03ec Mon Sep 17 00:00:00 2001
From: nongyehong <2439646234@qq.com>
Date: Wed, 30 Oct 2024 10:35:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(component):=20:bug:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=A1=86=E5=86=85=E5=8F=B3=E9=94=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复mac下右键会选中文本问题｜修复艾特框不消失问题｜修复聊天框右键菜单emoji表情栏样式问题
---
 src/components/common/ContextMenu.vue        |  4 +++-
 src/components/rightBox/MsgInput.vue         |  2 +-
 src/components/rightBox/chatBox/ChatMain.vue | 19 +++++++++++++++++++
 src/hooks/useMsgInput.ts                     |  2 --
 src/styles/scss/chat-main.scss               |  3 +++
 src/styles/scss/message.scss                 |  2 +-
 6 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/common/ContextMenu.vue b/src/components/common/ContextMenu.vue
index d37bf7e..d886ece 100644
--- a/src/components/common/ContextMenu.vue
+++ b/src/components/common/ContextMenu.vue
@@ -141,7 +141,7 @@ const handleEnter = (el: any) => {
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       el.style.height = `${h}px`
-      el.style.transition = '0.5s'
+      el.style.transition = '0.3s'
     })
   })
 }
@@ -168,6 +168,8 @@ const handleAfterEnter = (el: any) => {
 .context-menu {
   @include menu-item-style();
   .emoji-list {
+    -webkit-backdrop-filter: blur(10px);
+    background: var(--bg-menu);
     @apply size-fit p-4px select-none;
     .emoji-item {
       @apply size-28px rounded-4px text-16px cursor-pointer hover:bg-[--emoji-hover];
diff --git a/src/components/rightBox/MsgInput.vue b/src/components/rightBox/MsgInput.vue
index fa8cf13..91b3c05 100644
--- a/src/components/rightBox/MsgInput.vue
+++ b/src/components/rightBox/MsgInput.vue
@@ -166,7 +166,7 @@ const handleAitKeyChange = (direction: 1 | -1) => {
   const newIndex = Math.max(0, Math.min(currentIndex + direction, personList.value.length - 1))
   selectedAitKey.value = personList.value[newIndex].uid
   // 获取新选中项在列表中的索引，并滚动到该位置(使用key来进行定位)
-  virtualListInst.value?.scrollTo({ key: selectedAitKey.value })
+  virtualListInst.value?.scrollTo({ index: newIndex })
 }
 
 const closeMenu = (event: any) => {
diff --git a/src/components/rightBox/chatBox/ChatMain.vue b/src/components/rightBox/chatBox/ChatMain.vue
index 7dc98cc..834c5b7 100644
--- a/src/components/rightBox/chatBox/ChatMain.vue
+++ b/src/components/rightBox/chatBox/ChatMain.vue
@@ -173,6 +173,7 @@
               </n-flex>
               <!--  气泡样式  -->
               <ContextMenu
+                @contextmenu="handleMacSelect"
                 @mouseenter="handleMouseEnter(item.message.id)"
                 @mouseleave="handleMouseLeave"
                 class="w-fit"
@@ -381,6 +382,9 @@ const hoverBubble = ref<{
 }>({
   key: -1
 })
+/** 记录右键菜单时选中的气泡的元素(用于处理mac右键会选中文本的问题) */
+const recordEL = ref()
+const isMac = computed(() => type() === 'macos')
 const { removeTag, userUid } = useCommon()
 const {
   handleScroll,
@@ -515,9 +519,24 @@ const scrollBottom = () => {
   })
 }
 
+/**
+ * 解决mac右键会选中文本的问题
+ * @param event
+ */
+const handleMacSelect = (event: any) => {
+  if (isMac.value) {
+    event.target.classList.add('select-none')
+    recordEL.value = event.target
+  }
+}
+
 const closeMenu = (event: any) => {
   if (!event.target.matches('.bubble', 'bubble-oneself')) {
     activeBubble.value = -1
+    // 解决mac右键会选中文本的问题
+    if (isMac.value) {
+      recordEL.value.classList.remove('select-none')
+    }
   }
   if (!event.target.matches('.active-reply')) {
     /** 解决更替交换回复气泡时候没有触发动画的问题 */
diff --git a/src/hooks/useMsgInput.ts b/src/hooks/useMsgInput.ts
index be62719..a8a3197 100644
--- a/src/hooks/useMsgInput.ts
+++ b/src/hooks/useMsgInput.ts
@@ -215,13 +215,11 @@ export const useMsgInput = (messageInputDom: Ref) => {
   /** 当输入框手动输入值的时候触发input事件(使用vueUse的防抖) */
   const handleInput = useDebounceFn(async (e: Event) => {
     const inputElement = e.target as HTMLInputElement
-    console.log('input', inputElement)
     // 如果输入框中只有<br />标签，则清空输入框内容
     // TODO: 为什么这里输入后会有一个br标签?
     if (inputElement.innerHTML === '<br>') {
       inputElement.innerHTML = ''
       msgInput.value = inputElement.innerHTML
-      return
     }
     msgInput.value = inputElement.innerHTML || ''
     const { range, selection } = getEditorRange()!
diff --git a/src/styles/scss/chat-main.scss b/src/styles/scss/chat-main.scss
index 55cde8f..17b877e 100644
--- a/src/styles/scss/chat-main.scss
+++ b/src/styles/scss/chat-main.scss
@@ -15,6 +15,9 @@
   }
 }
 .bubble {
+  &::selection {
+    background: red; /* 设置选中背景为透明 */
+  }
   @include bubble;
 }
 .bubble-oneself {
diff --git a/src/styles/scss/message.scss b/src/styles/scss/message.scss
index 888ca7d..2f9c8e5 100644
--- a/src/styles/scss/message.scss
+++ b/src/styles/scss/message.scss
@@ -31,7 +31,7 @@
 .fade-move,
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .fade-enter-from,