拆分主要页面

src/App.vue

@@ -1,58 +1,12 @@
 <script setup lang="ts">
-import ProjectList from './components/ProjectList.vue'
-import type { ListItem, MenuItem } from '@/types'
+import { ref } from 'vue'
+import Config from './pages/Config.vue'
+import Project from './pages/Project.vue'
 
-const samplePic =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAACf1BMVEVGQksvbmYyaWM0ZGA3X107WFk9U1VATlNDSU8ucWgyamQ2Yl88VlhDSE8wbWY1ZGAvb2c1ZGA+U1U6WloucWgzZ2I/UFQ0ZmFATVIyaWM/T1MyaWMwbWY7V1gucWg1Yl8wbWUucWg0ZWAvb2cwbWYxa2QzaGI0ZWFBTFE5XFszZmI0ZmE9VFY7WFkxa2RERk5BTVIxamQ2YV4xbGUvcGdATlI8Vlgvb2c6Wlo5XFswbWYucWgzZ2IucWgxa2Q9U1U7WFg5W1pCSlAucWgzZ2IyaWMucWg1Y19DSE43X103X104XlwvcGc8VlcxbGUvb2c3X10wbWU6WVk4XlxATlMyaWMucWg2YV4vbmYxa2RDR041Y18ucWgyaGM2YV4vb2c1Y185W1ovb2cwbGU8VVdCSU82Yl8+UVQxa2Q4XVs0ZWE1Yl8xbGU4XVwyaWM6WlowbWY2Yl8wbGUwbWY4XVs/T1M0ZmEvb2c3X109U1YwbWYwbmYxbGU4Xlw2YV4+UVU5XFs0ZmEvbmY5W1o+UlUwbmY6Wlo/UFQ1Y181Y180ZWEyamQzZ2JBS1Evb2c8Vlc5XFsvb2cyaWM2Yl8vcGcvb2dDSU80ZWE7V1g1Yl9BTFExamRER049VFY6WVk6WlpBS1AwbWU0ZWEyaWM7WFkvb2c0ZmE5W1ozaGIxbGU4XVs1ZGAyamQzaGIxa2RCSVAzaGI7V1g6WVk2YV4zZ2I9VFYxbGU0ZmEucWgwbmYzZmIzaGIxa2QwbWY4Xlw3YF03YF5CSlAxamQvb2cyaWM0ZWA2YV43X11AT1M3X107V1gwbGVFRU1GQktFRExERU1GQ0tFQ0xERk5ERk3///+ARxMXAAAAzHRSTlMAMXyqzeXy+f4UdL7s/jivKrDz4wiX9pz6ffh/RusKuU0CqBdFao+n+9qbofHnaP77cMNfIfrrH+DbQwSSBmTz6Nz9FpN6ErP+y8rQI+1aMM9P5dL6gQ7CNWf+sgyHxBu03SxU7v279mXYprZc1YPhQbxZStf5mR3M8kg8V9HA9dygM9/0PuL3uLWidpb8KOzZJoa9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'
-// 生成模拟数据
-const listData: ListItem[] = 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' }] : []),
-  ],
-}))
-
-// 自定义菜单项
-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)
-}
+const showConfig = ref(false)
 </script>
 
 <template>
-  <ProjectList
-    :data="listData"
-    :menu-items="menuItems"
-    @click="handleItemClick"
-  />
+  <Config v-if="showConfig" />
+  <Project v-else />
 </template>

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>