From df2991507fc5c374b8389045b454bcc711a47598 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Wed, 11 Dec 2024 13:08:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=97=E8=A1=A8=E9=A1=B9?=
 =?UTF-8?q?=E7=9A=84=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 159 ++++++++++++++++++++++++++++-----
 src/components/VirtualList.vue |  48 ++++++++--
 2 files changed, 179 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 589a2fa..4edbdc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 import VirtualList from './components/VirtualList.vue'
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 // 虚拟列表配置
 const listConfig = {
@@ -17,9 +17,19 @@ const listData = Array.from({ length: 100 }, (_, i) => ({
   path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
 }))
 
-// 选择处理
+// 添加当前选中项的状态
+const selectedItem = ref(null)
+
+// 修改选择处理函数
 const handleSelect = (item) => {
   console.log('Selected:', item)
+  selectedItem.value = item
+}
+
+// 添加点击处理函数
+const handleClick = (item) => {
+  console.log('Clicked:', item)
+  // 这里可以添加点击特定处理逻辑
 }
 
 // 菜单配置
@@ -32,25 +42,72 @@ const menuItems = [
 // 控制菜单显示状态
 const showMenu = ref(false)
 
-// 菜单点击处理
+// 添加列表冻结状态
+const listFrozen = ref(false)
+
+// 修改菜单显示状态的处理
+const showContextMenu = (data) => {
+  const { item } = data
+  // 选中该项
+  handleSelect(item)
+  // 显示菜单
+  showMenu.value = true
+  listFrozen.value = true  // 冻结列表
+}
+
+// 修改关闭菜单的处理
+const closeMenu = () => {
+  showMenu.value = false
+  listFrozen.value = false  // 解冻列表
+}
+
+onMounted(() => {
+  // 添加全局点击事件来关闭菜单
+  document.addEventListener('click', closeMenu)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeMenu)
+})
+
+// 修改菜单点击处理
 const handleMenuClick = (item) => {
   console.log('Menu clicked:', item)
   showMenu.value = false
+  listFrozen.value = false  // 解冻列表
 }
 
-// 切换菜单显示状态
-const toggleMenu = () => {
-  showMenu.value = !showMenu.value
+// 修改菜单触发器点击处理
+const handleMenuTriggerClick = (e) => {
+  e.stopPropagation()
+  // 切换菜单显示状态
+  if (showMenu.value) {
+    showMenu.value = false
+    listFrozen.value = false  // 解冻列表
+  } else {
+    // 如果���有选中项，选中第一个可见项
+    if (listData.length > 0) {
+      // 如果已有选中项就保持当前选中，否则选中第一项
+      const itemToSelect = selectedItem.value || listData[0]
+      showContextMenu({ item: itemToSelect })
+    } else {
+      showMenu.value = true
+      listFrozen.value = true  // 冻结列表
+    }
+  }
 }
 </script>
 
 <template>
-  <div class="app-container">
+  <div class="app-container" @contextmenu.prevent>
     <div class="main-content">
       <VirtualList 
         :data="listData" 
-        :config="listConfig" 
-        @select="handleSelect" 
+        :config="listConfig"
+        :frozen="listFrozen"
+        @select="handleSelect"
+        @click="handleClick"
+        @contextmenu="showContextMenu"
       />
     </div>
     <div class="toolbar">
@@ -59,14 +116,28 @@ const toggleMenu = () => {
           共 {{ listData.length }} 项
         </div>
         <div class="toolbar-spacer"></div>
-        <div class="menu-trigger" @click="toggleMenu">
+        <div 
+          class="menu-trigger" 
+          :class="{ 'active': showMenu }"
+          @click="handleMenuTriggerClick"
+        >
           <svg viewBox="0 0 24 24" width="16" height="16">
             <circle cx="12" cy="6" r="2" fill="currentColor"/>
             <circle cx="12" cy="12" r="2" fill="currentColor"/>
             <circle cx="12" cy="18" r="2" fill="currentColor"/>
           </svg>
           <!-- 弹出菜单 -->
-          <div v-if="showMenu" class="popup-menu">
+          <div 
+            v-if="showMenu" 
+            class="popup-menu"
+            @click.stop
+          >
+            <!-- 添加选中项信息区域 -->
+            <div v-if="selectedItem" class="selected-item-info">
+              <div class="selected-item-name">{{ selectedItem.name }}</div>
+              <div class="selected-item-path">{{ selectedItem.path }}</div>
+            </div>
+            <div class="menu-divider"></div>
             <div
               v-for="item in menuItems"
               :key="item.id"
@@ -133,41 +204,83 @@ html, body {
 
 .menu-trigger {
   position: relative;
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #666;
-  border-radius: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
 }
 
 .menu-trigger:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f5f5f5;
+  color: #1a1a1a;
+}
+
+.menu-trigger.active {
+  background-color: #f5f5f5;
+  color: #1a1a1a;
 }
 
 .popup-menu {
   position: absolute;
   bottom: 100%;
   right: 0;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
   background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  min-width: 120px;
-  padding: 4px 0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  min-width: 240px;
+  padding: 6px 0;
+  z-index: 1000;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(8px);
 }
 
 .menu-item {
-  padding: 8px 16px;
+  padding: 9px 16px;
+  margin: 0 4px;
   font-size: 13px;
   color: #333;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: all 0.2s ease;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
 }
 
 .menu-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f5f5f5;
+  color: #1a1a1a;
+}
+
+.selected-item-info {
+  padding: 12px 16px;
+  background-color: #f8f8f8;
+  margin: 0 4px 4px 4px;
+  border-radius: 6px;
+}
+
+.selected-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1a1a1a;
+  margin-bottom: 6px;
+}
+
+.selected-item-path {
+  font-size: 12px;
+  color: #666;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #f0f0f0;
+  margin: 4px 0;
 }
 </style>
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index b5c3704..cc0a12e 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -21,10 +21,14 @@ const props = defineProps({
   height: {
     type: [String, Number],
     default: '100%'
+  },
+  frozen: {
+    type: Boolean,
+    default: false
   }
 })
 
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select', 'click', 'contextmenu'])
 
 // 计算列表项实际总高度
 const totalItemHeight = computed(() => 
@@ -82,10 +86,18 @@ const phantomHeight = computed(() =>
 
 // 选择处理
 const handleSelect = (item) => {
+  if (props.frozen) return  // 如果列表被冻结，不响应选择
   selectedIndex.value = item.index
   emit('select', item)
 }
 
+// 点击处理
+const handleClick = (item) => {
+  if (props.frozen) return  // 如果列表被冻��，不响应点击
+  handleSelect(item)  // 点击时同时触发选中
+  emit('click', item)
+}
+
 // 修改更新容器高度的方法
 function updateContainerHeight() {
   if (containerRef.value) {
@@ -123,16 +135,24 @@ const handleScroll = debounce(() => {
 
 // 鼠标移入处理
 function handleMouseEnter(index) {
+  if (props.frozen) return  // 如果列表被冻结，不响应鼠标移入
   if (!isKeyboardNavigating.value) {
     selectedIndex.value = index
-    // 移除滚动检查和处理，直接调用确保可见的方法
+    emit('select', { ...props.data[index], index })
     ensureSelectedItemVisible()
   }
 }
 
 // 键盘事件处理
 function handleKeyDown(e) {
-  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+  if (props.frozen) return  // 如果列表被冻结，不响应键盘事件
+  if (e.key === 'Enter') {
+    // 回车键触发点击事件
+    if (selectedIndex.value >= 0 && selectedIndex.value < props.data.length) {
+      const item = props.data[selectedIndex.value]
+      emit('click', { ...item, index: selectedIndex.value })
+    }
+  } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
     e.preventDefault()
     
     isKeyboardNavigating.value = true
@@ -144,6 +164,7 @@ function handleKeyDown(e) {
     if (e.key === 'ArrowUp') {
       const nextIndex = Math.max(0, selectedIndex.value - 1)
       selectedIndex.value = nextIndex
+      emit('select', { ...props.data[nextIndex], index: nextIndex })
       
       // 使用与向下相同的逻辑，计算项目顶部位置
       const itemTop = nextIndex * totalItemHeight.value
@@ -154,6 +175,7 @@ function handleKeyDown(e) {
     } else {
       const nextIndex = Math.min(props.data.length - 1, selectedIndex.value + 1)
       selectedIndex.value = nextIndex
+      emit('select', { ...props.data[nextIndex], index: nextIndex })
       
       // 计算项目底部位置
       const itemBottom = (nextIndex + 1) * totalItemHeight.value
@@ -191,6 +213,13 @@ function ensureSelectedItemVisible() {
   }
 }
 
+// 修改右键点击处理函数
+const handleContextMenu = (e, item) => {
+  if (props.frozen) return  // 如果列表被冻结，不响应右键点击
+  e.preventDefault() // 阻止默认右键菜单
+  emit('contextmenu', { item }) // 不需要传递事件对象
+}
+
 onMounted(() => {
   if (containerRef.value) {
     containerRef.value.addEventListener('scroll', handleScroll)
@@ -233,6 +262,7 @@ onBeforeUnmount(() => {
   <div 
     ref="containerRef" 
     class="virtual-list-container"
+    :class="{ 'list-frozen': frozen }"
     :style="{ height: '100%' }"
     tabindex="0"
   >
@@ -252,7 +282,8 @@ onBeforeUnmount(() => {
           :class="{ 'selected': selectedIndex === item.index }"
           :style="{ height: `${config.itemHeight}px` }"
           @mouseenter="handleMouseEnter(item.index)"
-          @click="handleSelect(item)"
+          @click="handleClick(item)"
+          @contextmenu="handleContextMenu($event, item)"
         >
           <slot name="item" :item="item">
             <!-- 默认列表项样式 -->
@@ -300,7 +331,7 @@ onBeforeUnmount(() => {
   padding: 8px 16px;
   display: flex;
   align-items: center;
-  transition: background-color 0.8s ease;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
   cursor: pointer;
   background-color: white;
 }
@@ -348,4 +379,11 @@ onBeforeUnmount(() => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* 添加冻结状态的样式 */
+.list-frozen {
+  pointer-events: none;  /* 禁用鼠标事件 */
+  opacity: 0.7;  /* 降低透明度表示冻结状态 */
+  user-select: none;  /* 禁用文本选择 */
+}
 </style> 
\ No newline at end of file