拆分主要页面

src/pages/Config.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 配置项状态
+const config = ref({
+  theme: 'light',
+  language: 'zh-CN',
+  autoSave: true,
+  notifications: true
+})
+
+// 处理配置更改
+const handleConfigChange = () => {
+  // 这里可以添加保存配置的逻辑
+  console.log('配置已更新:', config.value)
+}
+</script>
+
+<template>
+  <div class="config-container">
+    <h2 class="config-title">系统设置</h2>
+    
+    <div class="config-section">
+      <div class="config-item">
+        <label>主题</label>
+        <select v-model="config.theme">
+          <option value="light">浅色</option>
+          <option value="dark">深色</option>
+        </select>
+      </div>
+
+      <div class="config-item">
+        <label>语言</label>
+        <select v-model="config.language">
+          <option value="zh-CN">中文</option>
+          <option value="en-US">English</option>
+        </select>
+      </div>
+
+      <div class="config-item">
+        <label>自动保存</label>
+        <input 
+          type="checkbox" 
+          v-model="config.autoSave"
+        >
+      </div>
+
+      <div class="config-item">
+        <label>通知提醒</label>
+        <input 
+          type="checkbox" 
+          v-model="config.notifications"
+        >
+      </div>
+    </div>
+
+    <div class="config-actions">
+      <button 
+        class="save-button"
+        @click="handleConfigChange"
+      >
+        保存设置
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.config-container {
+  padding: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.config-title {
+  font-size: 24px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 24px;
+}
+
+.config-section {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.config-item:last-child {
+  border-bottom: none;
+}
+
+.config-item label {
+  font-size: 14px;
+  color: #333;
+}
+
+.config-item select {
+  padding: 6px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 120px;
+}
+
+.config-actions {
+  margin-top: 24px;
+  text-align: right;
+}
+
+.save-button {
+  background: #1976d2;
+  color: white;
+  border: none;
+  padding: 8px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.save-button:hover {
+  background: #1565c0;
+}
+</style> 

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>