62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, type Ref } from 'vue'
|
|
import ProjectList from '@/components/ProjectList.vue'
|
|
import type { ListItem, MenuItem } from '@/types'
|
|
|
|
// 生成模拟数据
|
|
const listData: Ref<ListItem[]> = ref([])
|
|
const initListData = () => {
|
|
let samplePic = 'https://aisuda.bce.baidu.com/amis/static/favicon_b3b0647.png'
|
|
listData.value = Array.from({ length: 1000 }, (_, i) => ({
|
|
id: i,
|
|
name: `project-${i + 1}`,
|
|
description: `这是项目 ${i + 1} 的详细描述信息`,
|
|
icon: samplePic,
|
|
tags: [
|
|
...(i % 2 === 0 ? [{ id: 1, name: 'Vue', color: '#42b883' }] : []),
|
|
...(i % 3 === 0 ? [{ id: 2, name: 'TypeScript', color: '#3178c6' }] : []),
|
|
...(i % 4 === 0 ? [{ id: 3, name: 'React', color: '#149eca' }] : []),
|
|
...(i % 5 === 0 ? [{ id: 4, name: 'Node.js', color: '#539e43' }] : []),
|
|
],
|
|
}))
|
|
}
|
|
initListData()
|
|
|
|
// 自定义菜单项
|
|
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> |