主界面列表组件化
This commit is contained in:
422
src/App.vue
422
src/App.vue
@@ -1,8 +1,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import VirtualList from './components/VirtualList.vue'
|
import ProjectList from './components/ProjectList.vue'
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
// 虚拟列表配置
|
// 生成模拟数据
|
||||||
|
const listData = Array.from({ length: 789 }, (_, i) => ({
|
||||||
|
id: i,
|
||||||
|
name: `project-${i + 1}`,
|
||||||
|
path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 自定义配置
|
||||||
const listConfig = {
|
const listConfig = {
|
||||||
itemHeight: 50,
|
itemHeight: 50,
|
||||||
itemPadding: 16,
|
itemPadding: 16,
|
||||||
@@ -10,256 +17,41 @@ const listConfig = {
|
|||||||
scrollDebounceTime: 16,
|
scrollDebounceTime: 16,
|
||||||
}
|
}
|
||||||
|
|
||||||
// 生成模拟数据
|
// 自定义菜单项
|
||||||
const listData = Array.from({ length: 100 }, (_, i) => ({
|
|
||||||
id: i,
|
|
||||||
name: `project-${i + 1}`,
|
|
||||||
path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 添加当前选中项的状态
|
|
||||||
const selectedItem = ref(null)
|
|
||||||
|
|
||||||
// 修改选择处理函数
|
|
||||||
const handleSelect = (item) => {
|
|
||||||
selectedItem.value = item
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加点击处理函数
|
|
||||||
const handleClick = (item) => {
|
|
||||||
console.log('Clicked:', item)
|
|
||||||
// 这里可以添加点击特定处理逻辑
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单配置
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ id: 'refresh', label: '刷新列表' },
|
{ id: 'refresh', label: '刷新列表' },
|
||||||
{ id: 'clear', label: '清空选择' },
|
{ id: 'clear', label: '清空选择' },
|
||||||
{ id: 'export', label: '导出数据' },
|
{ id: 'export', label: '导出数据' },
|
||||||
]
|
]
|
||||||
|
|
||||||
// 控制菜单显示状态
|
// 选中项
|
||||||
const showMenu = ref(false)
|
const selectedItem = ref(null)
|
||||||
|
|
||||||
// 添加列表冻结状态
|
// 事件处理
|
||||||
const listFrozen = ref(false)
|
const handleSelect = (item) => {
|
||||||
|
console.log('Selected:', item)
|
||||||
// 修改菜单显示状态的处理
|
|
||||||
const showContextMenu = (data) => {
|
|
||||||
const { item } = data
|
|
||||||
// 选中该项
|
|
||||||
handleSelect(item)
|
|
||||||
// 显示菜单
|
|
||||||
showMenu.value = true
|
|
||||||
listFrozen.value = true // 冻结列表
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加一个状态来控制临时禁用鼠标悬浮
|
|
||||||
const temporaryDisableHover = ref(false)
|
|
||||||
let hoverDisableTimer = null
|
|
||||||
|
|
||||||
// 修改关闭菜单的处理
|
|
||||||
const closeMenu = () => {
|
|
||||||
showMenu.value = false
|
|
||||||
listFrozen.value = false
|
|
||||||
selectedMenuIndex.value = -1 // 重置菜单选中项
|
|
||||||
|
|
||||||
// 临时禁用鼠标悬浮
|
|
||||||
temporaryDisableHover.value = true
|
|
||||||
if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
|
|
||||||
hoverDisableTimer = setTimeout(() => {
|
|
||||||
temporaryDisableHover.value = false
|
|
||||||
}, 300) // 300ms 后恢复鼠标悬浮功能
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加当前选中的菜单项索引
|
|
||||||
const selectedMenuIndex = ref(-1)
|
|
||||||
|
|
||||||
// 修改键盘事件处理函数
|
|
||||||
const handleKeyDown = (e) => {
|
|
||||||
if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) {
|
|
||||||
e.preventDefault()
|
|
||||||
handleMenuTriggerClick(e)
|
|
||||||
} else if ((e.key === 'ArrowLeft' || e.key === 'Escape') && showMenu.value) {
|
|
||||||
e.preventDefault()
|
|
||||||
closeMenu()
|
|
||||||
} else if (showMenu.value) {
|
|
||||||
switch (e.key) {
|
|
||||||
case 'ArrowUp':
|
|
||||||
e.preventDefault()
|
|
||||||
selectedMenuIndex.value =
|
|
||||||
selectedMenuIndex.value <= 0
|
|
||||||
? menuItems.length - 1
|
|
||||||
: selectedMenuIndex.value - 1
|
|
||||||
break
|
|
||||||
case 'ArrowDown':
|
|
||||||
e.preventDefault()
|
|
||||||
selectedMenuIndex.value =
|
|
||||||
selectedMenuIndex.value >= menuItems.length - 1
|
|
||||||
? 0
|
|
||||||
: selectedMenuIndex.value + 1
|
|
||||||
break
|
|
||||||
case 'Enter':
|
|
||||||
e.preventDefault()
|
|
||||||
if (selectedMenuIndex.value >= 0) {
|
|
||||||
handleMenuClick(menuItems[selectedMenuIndex.value])
|
|
||||||
selectedMenuIndex.value = -1 // 重置菜单选中项
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 添加全局击事件来关闭菜单
|
|
||||||
document.addEventListener('click', closeMenu)
|
|
||||||
// 添加键盘事件监听
|
|
||||||
document.addEventListener('keydown', handleKeyDown)
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
document.removeEventListener('click', closeMenu)
|
|
||||||
// 移除键盘事件监听
|
|
||||||
document.removeEventListener('keydown', handleKeyDown)
|
|
||||||
if (toastTimer) {
|
|
||||||
clearTimeout(toastTimer)
|
|
||||||
}
|
|
||||||
if (hoverDisableTimer) {
|
|
||||||
clearTimeout(hoverDisableTimer)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 修改菜单击处理
|
|
||||||
const handleMenuClick = (item) => {
|
const handleMenuClick = (item) => {
|
||||||
console.log('Menu clicked:', item)
|
console.log('Menu clicked:', item)
|
||||||
showMenu.value = false
|
|
||||||
listFrozen.value = false // 解冻列表
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改菜单触发器点击处理
|
|
||||||
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 // 冻结列表
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加过渡钩子函数
|
|
||||||
const onBeforeLeave = (el) => {
|
|
||||||
// 确保元素在离开过渡开始时可见
|
|
||||||
el.style.display = 'block'
|
|
||||||
}
|
|
||||||
|
|
||||||
const onAfterLeave = (el) => {
|
|
||||||
// 过渡结束后重置样式
|
|
||||||
el.style.display = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加 toast 相关状态
|
|
||||||
const toastVisible = ref(false)
|
|
||||||
const toastMessage = ref('')
|
|
||||||
let toastTimer = null
|
|
||||||
|
|
||||||
// 添加 toast 处理函数
|
|
||||||
const showToast = (message) => {
|
|
||||||
if (toastTimer) {
|
|
||||||
clearTimeout(toastTimer)
|
|
||||||
}
|
|
||||||
|
|
||||||
toastMessage.value = message
|
|
||||||
toastVisible.value = true
|
|
||||||
|
|
||||||
toastTimer = setTimeout(() => {
|
|
||||||
toastVisible.value = false
|
|
||||||
}, 3000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 在 onBeforeUnmount 中清理定时器
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
if (toastTimer) {
|
|
||||||
clearTimeout(toastTimer)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container" @contextmenu.prevent>
|
<ProjectList
|
||||||
<div class="main-content">
|
v-model:selected="selectedItem"
|
||||||
<VirtualList
|
|
||||||
:data="listData"
|
:data="listData"
|
||||||
:config="listConfig"
|
:config="listConfig"
|
||||||
:frozen="listFrozen"
|
:menu-items="menuItems"
|
||||||
:disable-hover="showMenu || temporaryDisableHover"
|
:show-toolbar="true"
|
||||||
|
:toolbar-height="40"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
@click="handleClick"
|
@menu-click="handleMenuClick"
|
||||||
@contextmenu="showContextMenu"
|
|
||||||
@showToast="showToast"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div class="toolbar">
|
|
||||||
<div class="toolbar-content">
|
|
||||||
<div class="total-count">共 {{ listData.length }} 项</div>
|
|
||||||
<div class="toolbar-spacer"></div>
|
|
||||||
<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>
|
|
||||||
<!-- 使用 transition 组件包裹菜单 -->
|
|
||||||
<transition
|
|
||||||
name="menu"
|
|
||||||
@before-leave="onBeforeLeave"
|
|
||||||
@after-leave="onAfterLeave"
|
|
||||||
>
|
|
||||||
<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, index) in menuItems"
|
|
||||||
:key="item.id"
|
|
||||||
class="menu-item"
|
|
||||||
:class="{ 'menu-item-selected': index === selectedMenuIndex }"
|
|
||||||
@click="handleMenuClick(item)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 添加 Toast 组件 -->
|
|
||||||
<transition name="toast">
|
|
||||||
<div v-if="toastVisible" class="toast">
|
|
||||||
{{ toastMessage }}
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html,
|
html, body {
|
||||||
body {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -269,171 +61,3 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.app-container {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0; /* 重要：防止内容溢出 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
height: 40px;
|
|
||||||
border-top: 1px solid #e8e8e8;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-content {
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-count {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-spacer {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-trigger {
|
|
||||||
position: relative;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #666;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-trigger:hover {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-trigger.active {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-menu {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100%;
|
|
||||||
right: 0;
|
|
||||||
margin-bottom: 23px;
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
|
|
||||||
0 2px 8px rgba(0, 0, 0, 0.04);
|
|
||||||
min-width: 260px;
|
|
||||||
padding: 8px 0;
|
|
||||||
z-index: 1000;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
transform-origin: top right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加 transition 相关样式 */
|
|
||||||
.menu-enter-active,
|
|
||||||
.menu-leave-active {
|
|
||||||
transition: all 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-enter-from,
|
|
||||||
.menu-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-enter-to,
|
|
||||||
.menu-leave-from {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-divider {
|
|
||||||
height: 1px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
padding: 10px 16px;
|
|
||||||
margin: 0 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item:hover, .menu-item-selected {
|
|
||||||
background-color: rgba(79, 70, 229, 0.06);
|
|
||||||
color: #4f46e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-item-info {
|
|
||||||
padding: 12px 16px;
|
|
||||||
margin: 0 4px 4px 4px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-item-name {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1a1a1a;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-item-path {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
word-break: break-all;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加 Toast 相关样式 */
|
|
||||||
.toast {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
color: white;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 1000;
|
|
||||||
pointer-events: none;
|
|
||||||
max-width: 80%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-enter-active,
|
|
||||||
.toast-leave-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-enter-from,
|
|
||||||
.toast-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate(-50%, -40%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
408
src/components/ProjectList.vue
Normal file
408
src/components/ProjectList.vue
Normal file
@@ -0,0 +1,408 @@
|
|||||||
|
<script setup>
|
||||||
|
import VirtualList from './VirtualList.vue'
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// 列表数据
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 虚拟列表配置
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
itemHeight: 50,
|
||||||
|
itemPadding: 16,
|
||||||
|
bufferCount: 10,
|
||||||
|
scrollDebounceTime: 16,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 菜单项配置
|
||||||
|
menuItems: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [
|
||||||
|
{ id: 'refresh', label: '刷新列表' },
|
||||||
|
{ id: 'clear', label: '清空选择' },
|
||||||
|
{ id: 'export', label: '导出数据' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 是否显示工具栏
|
||||||
|
showToolbar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 工具栏高度
|
||||||
|
toolbarHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 40
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定义事件
|
||||||
|
const emit = defineEmits([
|
||||||
|
'select', // 选中项变化
|
||||||
|
'click', // 点击项目
|
||||||
|
'menu-click', // 点击菜单项
|
||||||
|
'context-menu', // 右键菜单
|
||||||
|
'update:selected' // 支持 v-model:selected
|
||||||
|
])
|
||||||
|
|
||||||
|
// 状态管理
|
||||||
|
const selectedItem = ref(null)
|
||||||
|
const showMenu = ref(false)
|
||||||
|
const listFrozen = ref(false)
|
||||||
|
const temporaryDisableHover = ref(false)
|
||||||
|
const selectedMenuIndex = ref(-1)
|
||||||
|
const toastVisible = ref(false)
|
||||||
|
const toastMessage = ref('')
|
||||||
|
|
||||||
|
// 定时器
|
||||||
|
let hoverDisableTimer = null
|
||||||
|
let toastTimer = null
|
||||||
|
|
||||||
|
// 处理函数
|
||||||
|
const handleSelect = (item) => {
|
||||||
|
selectedItem.value = item
|
||||||
|
emit('select', item)
|
||||||
|
emit('update:selected', item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClick = (item) => {
|
||||||
|
emit('click', item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const showContextMenu = (data) => {
|
||||||
|
const { item } = data
|
||||||
|
handleSelect(item)
|
||||||
|
showMenu.value = true
|
||||||
|
listFrozen.value = true
|
||||||
|
emit('context-menu', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
showMenu.value = false
|
||||||
|
listFrozen.value = false
|
||||||
|
selectedMenuIndex.value = -1
|
||||||
|
|
||||||
|
temporaryDisableHover.value = true
|
||||||
|
if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
|
||||||
|
hoverDisableTimer = setTimeout(() => {
|
||||||
|
temporaryDisableHover.value = false
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMenuClick = (item) => {
|
||||||
|
emit('menu-click', item)
|
||||||
|
closeMenu()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMenuTriggerClick = (e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
if (showMenu.value) {
|
||||||
|
closeMenu()
|
||||||
|
} else {
|
||||||
|
if (props.data.length > 0) {
|
||||||
|
const itemToSelect = selectedItem.value || props.data[0]
|
||||||
|
showContextMenu({ item: itemToSelect })
|
||||||
|
} else {
|
||||||
|
showMenu.value = true
|
||||||
|
listFrozen.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleKeyDown = (e) => {
|
||||||
|
if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) {
|
||||||
|
e.preventDefault()
|
||||||
|
handleMenuTriggerClick(e)
|
||||||
|
} else if ((e.key === 'ArrowLeft' || e.key === 'Escape') && showMenu.value) {
|
||||||
|
e.preventDefault()
|
||||||
|
closeMenu()
|
||||||
|
} else if (showMenu.value) {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowUp':
|
||||||
|
e.preventDefault()
|
||||||
|
selectedMenuIndex.value =
|
||||||
|
selectedMenuIndex.value <= 0
|
||||||
|
? props.menuItems.length - 1
|
||||||
|
: selectedMenuIndex.value - 1
|
||||||
|
break
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault()
|
||||||
|
selectedMenuIndex.value =
|
||||||
|
selectedMenuIndex.value >= props.menuItems.length - 1
|
||||||
|
? 0
|
||||||
|
: selectedMenuIndex.value + 1
|
||||||
|
break
|
||||||
|
case 'Enter':
|
||||||
|
e.preventDefault()
|
||||||
|
if (selectedMenuIndex.value >= 0) {
|
||||||
|
handleMenuClick(props.menuItems[selectedMenuIndex.value])
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const showToast = (message) => {
|
||||||
|
if (toastTimer) clearTimeout(toastTimer)
|
||||||
|
toastMessage.value = message
|
||||||
|
toastVisible.value = true
|
||||||
|
toastTimer = setTimeout(() => {
|
||||||
|
toastVisible.value = false
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('click', closeMenu)
|
||||||
|
document.addEventListener('keydown', handleKeyDown)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener('click', closeMenu)
|
||||||
|
document.removeEventListener('keydown', handleKeyDown)
|
||||||
|
if (toastTimer) clearTimeout(toastTimer)
|
||||||
|
if (hoverDisableTimer) clearTimeout(hoverDisableTimer)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 过渡钩子
|
||||||
|
const onBeforeLeave = (el) => {
|
||||||
|
el.style.display = 'block'
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAfterLeave = (el) => {
|
||||||
|
el.style.display = ''
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="project-list-container" @contextmenu.prevent>
|
||||||
|
<div class="main-content">
|
||||||
|
<VirtualList
|
||||||
|
:data="data"
|
||||||
|
:config="config"
|
||||||
|
:frozen="listFrozen"
|
||||||
|
:disable-hover="showMenu || temporaryDisableHover"
|
||||||
|
@select="handleSelect"
|
||||||
|
@click="handleClick"
|
||||||
|
@contextmenu="showContextMenu"
|
||||||
|
@showToast="showToast"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="showToolbar" class="toolbar" :style="{ height: `${toolbarHeight}px` }">
|
||||||
|
<div class="toolbar-content">
|
||||||
|
<div class="total-count">共 {{ data.length }} 项</div>
|
||||||
|
<div class="toolbar-spacer"></div>
|
||||||
|
<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>
|
||||||
|
<transition
|
||||||
|
name="menu"
|
||||||
|
@before-leave="onBeforeLeave"
|
||||||
|
@after-leave="onAfterLeave"
|
||||||
|
>
|
||||||
|
<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, index) in menuItems"
|
||||||
|
:key="item.id"
|
||||||
|
class="menu-item"
|
||||||
|
:class="{ 'menu-item-selected': index === selectedMenuIndex }"
|
||||||
|
@click="handleMenuClick(item)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition name="toast">
|
||||||
|
<div v-if="toastVisible" class="toast">
|
||||||
|
{{ toastMessage }}
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 保持原有样式，但将 .app-container 改为 .project-list-container */
|
||||||
|
.project-list-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0; /* 重要：防止内容溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
height: 40px;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-content {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-count {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-spacer {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-trigger {
|
||||||
|
position: relative;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-trigger:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-trigger.active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-menu {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin-bottom: 23px;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
|
||||||
|
0 2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
min-width: 260px;
|
||||||
|
padding: 8px 0;
|
||||||
|
z-index: 1000;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加 transition 相关样式 */
|
||||||
|
.menu-enter-active,
|
||||||
|
.menu-leave-active {
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-enter-from,
|
||||||
|
.menu-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-enter-to,
|
||||||
|
.menu-leave-from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
padding: 10px 16px;
|
||||||
|
margin: 0 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover, .menu-item-selected {
|
||||||
|
background-color: rgba(79, 70, 229, 0.06);
|
||||||
|
color: #4f46e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-info {
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 0 4px 4px 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a1a;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-path {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加 Toast 相关样式 */
|
||||||
|
.toast {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
max-width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-enter-active,
|
||||||
|
.toast-leave-active {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-enter-from,
|
||||||
|
.toast-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -40%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user