初始提交

src/pages/Project.vue

@@ -0,0 +1,62 @@
+<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>