From 72e3d1b756fc9672c3e2a2842346c8a8231f7413 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Wed, 11 Dec 2024 15:07:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=87=E7=AD=BE=E6=A0=8F?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  7 ++++-
 src/components/VirtualList.vue | 53 ++++++++++++++++++++++++++++++++--
 2 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0310a4..1e2fd61 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,17 @@
 <script setup>
 import ProjectList from './components/ProjectList.vue'
-import { ref } from 'vue'
 
 // 生成模拟数据
 const listData = 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' }] : []),
+  ]
 }))
 
 // 自定义配置
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index 1cb0b64..94a3bbd 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -349,8 +349,22 @@ onBeforeUnmount(() => {
                 </svg>
               </div>
               <div class="item-content">
-                <div class="item-name">{{ item.name }}</div>
-                <div class="item-path">{{ item.path }}</div>
+                <div class="item-header">
+                  <div class="item-name">{{ item.name }}</div>
+                  <div class="item-tags" v-if="item.tags?.length">
+                    <span 
+                      v-for="tag in item.tags" 
+                      :key="tag.id"
+                      class="item-tag"
+                      :style="{ backgroundColor: `${tag.color}15`, color: tag.color }"
+                    >
+                      {{ tag.name }}
+                    </span>
+                  </div>
+                </div>
+                <div class="item-info">
+                  <div class="item-path">{{ item.path }}</div>
+                </div>
               </div>
             </div>
           </slot>
@@ -421,10 +435,27 @@ onBeforeUnmount(() => {
   gap: 4px;
 }
 
+.item-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
 .item-name {
   font-size: 14px;
   color: #1a1a1a;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.item-info {
+  display: flex;
+  gap: 4px;
 }
 
 .item-path {
@@ -433,6 +464,24 @@ onBeforeUnmount(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
+}
+
+.item-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.item-tag {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 /* 添加冻结状态的样式 */