fix(component): 🐛 修复聊天框内右键菜单问题

修复mac下右键会选中文本问题｜修复艾特框不消失问题｜修复聊天框右键菜单emoji表情栏样式问题

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

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) => {

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')) {
     /** 解决更替交换回复气泡时候没有触发动画的问题 */

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()!

src/styles/scss/chat-main.scss

@@ -15,6 +15,9 @@
   }
 }
 .bubble {
+  &::selection {
+    background: red; /* 设置选中背景为透明 */
+  }
   @include bubble;
 }
 .bubble-oneself {

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,