增加标签栏显示

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;
 }
 
 /* 添加冻结状态的样式 */