chat-pc/src/components/editor/MentionList.vue

<template>
  <div class="dropdown-menu" ref="dropdownMenuRef">
    <n-virtual-list
      ref="virtualListRef"
      style="max-height: 240px"
      :item-size="50"
      :items="props.items"
    >
      <template #default="{ item }">
        <button
          :class="{ 'is-selected': props.items[selectedIndex] === item }"
          @click="selectItem(item)"
        >
          <img :src="item.avatar" class="avatar" />
          <span class="nickname">{{ item.nickname }}</span>
        </button>
      </template>
    </n-virtual-list>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineExpose, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  command: {
    type: Function,
    required: true
  }
})

const selectedIndex = ref(0)
const virtualListRef = ref(null)
const dropdownMenuRef = ref(null)

let observer = null

let isViewport = ref(true)
const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      isViewport.value = true
      // 在这里处理元素可见的逻辑
    } else {
      isViewport.value = false
      // 在这里处理元素不可见的逻辑
    }
  })
}
onMounted(() => {
  observer = new IntersectionObserver(handleIntersection, {
    root: null, // null 值表示视口
    rootMargin: '0px',
    threshold: 0.1 // 元素至少有 10% 可见时触发回调
  })

  if (dropdownMenuRef.value) {
    observer.observe(dropdownMenuRef.value)
  }
})

onUnmounted(() => {
  if (observer && dropdownMenuRef.value) {
    observer.unobserve(dropdownMenuRef.value)
    observer.disconnect()
  }
})

watch(
  () => props.items,
  () => {
    selectedIndex.value = 0
  }
)

const onKeyDown = ({ event }) => {
  console.log('event', event)
  if(!isViewport.value) return false
  if (event.key === 'ArrowUp') {
    upHandler()
    return true
  }

  if (event.key === 'ArrowDown') {
    downHandler()
    return true
  }

  if (event.key === 'Enter') {
    enterHandler()
    return true
  }

  return false
}

const upHandler = () => {
  selectedIndex.value =
    (selectedIndex.value + props.items.length - 1) % props.items.length
  virtualListRef.value?.scrollTo({ index: selectedIndex.value })
}

const downHandler = () => {
  selectedIndex.value = (selectedIndex.value + 1) % props.items.length
  virtualListRef.value?.scrollTo({ index: selectedIndex.value })
}

const enterHandler = () => {
  selectItem(props.items[selectedIndex.value])
}

const selectItem = item => {
  if (item) {
    props.command({ id: item.id, label: item.nickname })
  }
}
defineExpose({
  onKeyDown
})
</script>

<style lang="scss">
.dropdown-menu {
  background: var(--white, #fff);
  border: 1px solid var(--gray-1, #e0e0e0);
  border-radius: 0.7rem;
  box-shadow: var(--shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: auto;
  padding: 0.4rem;
  position: relative;
  
  max-height: 200px;
  width: 200px;
  button {
    align-items: center;
    background-color: transparent;
    display: flex;
    gap: 0.25rem;
    text-align: left;
    width: 100%;
    padding: 5px 10px;
    border: none;
    cursor: pointer;

    &:hover,
    &:hover.is-selected {
      background-color: var(--gray-3, #f5f7fa);
    }

    &.is-selected {
      background-color: var(--gray-2, #f0f0f0);
    }
    
    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .nickname {
      font-size: 14px;
    }
  }
}

/* 暗色模式下的样式调整 */
html[theme-mode='dark'] {
  .dropdown-menu {
    background-color: #1e1e1e;
    border-color: #333;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    
    button {
      &:hover,
      &:hover.is-selected {
        background-color: #2c2c2c;
      }

      &.is-selected {
        background-color: #333;
      }
      
      .nickname {
        color: #e0e0e0;
      }
    }
  }
}
</style>