From d90aa86f3f102a51cc0e9d3adff73836229a7ff1 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Wed, 11 Dec 2024 14:57:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=8B=E4=BB=B6=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=EF=BC=8C=E4=BD=BF=E5=A4=96=E9=83=A8=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E6=9B=B4=E7=AE=80=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 41 +++++++++++++++++++++-------------
 src/components/ProjectList.vue | 21 ++++++++++++-----
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 55da46d..a0310a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,34 +19,43 @@ const listConfig = {
 
 // 自定义菜单项
 const menuItems = [
-  { id: 'refresh', label: '刷新列表' },
-  { id: 'clear', label: '清空选择' },
-  { id: 'export', label: '导出数据' },
+  { 
+    id: 'refresh', 
+    label: '刷新列表',
+    action: (item) => {
+      console.log('当前选中项:', item)
+    }
+  },
+  { 
+    id: 'clear', 
+    label: '清空选择',
+    action: (item) => {
+      console.log('清空前选中项:', item)
+    }
+  },
+  { 
+    id: 'export', 
+    label: '导出数据',
+    action: (item) => {
+      console.log('当前选中项:', item)
+    }
+  },
 ]
 
-// 选中项
-const selectedItem = ref(null)
-
-// 事件处理
-const handleSelect = (item) => {
-  console.log('Selected:', item)
-}
-
-const handleMenuClick = (item) => {
-  console.log('Menu clicked:', item)
+// 列表项点击事件处理
+const handleItemClick = (item) => {
+  console.log('点击列表项:', item)
 }
 </script>
 
 <template>
   <ProjectList
-    v-model:selected="selectedItem"
     :data="listData"
     :config="listConfig"
     :menu-items="menuItems"
     :show-toolbar="true"
     :toolbar-height="40"
-    @select="handleSelect"
-    @menu-click="handleMenuClick"
+    @click="handleItemClick"
   />
 </template>
 
diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue
index 9b01c6a..c18d648 100644
--- a/src/components/ProjectList.vue
+++ b/src/components/ProjectList.vue
@@ -22,9 +22,21 @@ const props = defineProps({
   menuItems: {
     type: Array,
     default: () => [
-      { id: 'refresh', label: '刷新列表' },
-      { id: 'clear', label: '清空选择' },
-      { id: 'export', label: '导出数据' },
+      { 
+        id: 'refresh', 
+        label: '刷新列表',
+        action: (selectedItem) => console.log('刷新列表', selectedItem)
+      },
+      { 
+        id: 'clear', 
+        label: '清空选择',
+        action: (selectedItem) => console.log('清空选择', selectedItem)
+      },
+      { 
+        id: 'export', 
+        label: '导出数据',
+        action: (selectedItem) => console.log('导出数据', selectedItem)
+      },
     ]
   },
   // 是否显示工具栏
@@ -43,7 +55,6 @@ const props = defineProps({
 const emit = defineEmits([
   'select',           // 选中项变化
   'click',           // 点击项目
-  'menu-click',      // 点击菜单项
   'context-menu',    // 右键菜单
   'update:selected'  // 支持 v-model:selected
 ])
@@ -93,7 +104,7 @@ const closeMenu = () => {
 }
 
 const handleMenuClick = (item) => {
-  emit('menu-click', item)
+  item.action?.(selectedItem.value)
   closeMenu()
 }