68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import ProjectList from './components/ProjectList.vue'
|
|
import type { ListItem, MenuItem } from '@/types'
|
|
|
|
// 生成模拟数据
|
|
const listData: ListItem[] = Array.from({ length: 789 }, (_, i) => ({
|
|
id: i,
|
|
name: `project-${i + 1}`,
|
|
path: `/Users/lanyuanxiaoyao/Project/IdeaProjects/project-${i + 1}`,
|
|
tags: [
|
|
{ id: 1, name: 'Vue', color: '#42b883' },
|
|
{ id: 2, name: 'TypeScript', color: '#3178c6' },
|
|
...(i % 3 === 0 ? [{ id: 3, name: 'React', color: '#61dafb' }] : []),
|
|
...(i % 4 === 0 ? [{ id: 4, name: 'Node.js', color: '#339933' }] : []),
|
|
]
|
|
}))
|
|
|
|
// 自定义菜单项
|
|
const menuItems: MenuItem[] = [
|
|
{
|
|
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 handleItemClick = (item: ListItem): void => {
|
|
console.log('点击列表项:', item)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ProjectList
|
|
:data="listData"
|
|
:menu-items="menuItems"
|
|
@click="handleItemClick"
|
|
/>
|
|
</template>
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
</style>
|