主界面列表组件化
This commit is contained in:
430
src/App.vue
430
src/App.vue
@@ -1,8 +1,15 @@
|
||||
<script setup>
|
||||
import VirtualList from './components/VirtualList.vue'
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import ProjectList from './components/ProjectList.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 = {
|
||||
itemHeight: 50,
|
||||
itemPadding: 16,
|
||||
@@ -10,256 +17,41 @@ const listConfig = {
|
||||
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 = [
|
||||
{ id: 'refresh', label: '刷新列表' },
|
||||
{ id: 'clear', label: '清空选择' },
|
||||
{ id: 'export', label: '导出数据' },
|
||||
]
|
||||
|
||||
// 控制菜单显示状态
|
||||
const showMenu = ref(false)
|
||||
// 选中项
|
||||
const selectedItem = ref(null)
|
||||
|
||||
// 添加列表冻结状态
|
||||
const listFrozen = ref(false)
|
||||
|
||||
// 修改菜单显示状态的处理
|
||||
const showContextMenu = (data) => {
|
||||
const { item } = data
|
||||
// 选中该项
|
||||
handleSelect(item)
|
||||
// 显示菜单
|
||||
showMenu.value = true
|
||||
listFrozen.value = true // 冻结列表
|
||||
// 事件处理
|
||||
const handleSelect = (item) => {
|
||||
console.log('Selected:', item)
|
||||
}
|
||||
|
||||
// 添加一个状态来控制临时禁用鼠标悬浮
|
||||
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) => {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="app-container" @contextmenu.prevent>
|
||||
<div class="main-content">
|
||||
<VirtualList
|
||||
:data="listData"
|
||||
:config="listConfig"
|
||||
:frozen="listFrozen"
|
||||
:disable-hover="showMenu || temporaryDisableHover"
|
||||
@select="handleSelect"
|
||||
@click="handleClick"
|
||||
@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>
|
||||
<ProjectList
|
||||
v-model:selected="selectedItem"
|
||||
:data="listData"
|
||||
:config="listConfig"
|
||||
:menu-items="menuItems"
|
||||
:show-toolbar="true"
|
||||
:toolbar-height="40"
|
||||
@select="handleSelect"
|
||||
@menu-click="handleMenuClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
@@ -269,171 +61,3 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user