增加标签栏显示

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' }] : []),
+  ]
 }))
 
 // 自定义配置

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-header">
-                <div class="item-path">{{ item.path }}</div>
+                  <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;
 }
 
 /* 添加冻结状态的样式 */