组件样式调整

src/views/imageCaptioning/image-captioning/components/Sidebar.vue

@@ -13,8 +13,9 @@
       </div>
 
       <div class="nav-item-add" @click="$emit('create-new-label')">
-        <i class="el-icon-plus"></i> &nbsp;&nbsp;
+        <img src="@/assets/images/imageCaptioning/ten.png" alt="新建标注" class="add-icon" />
-        <span>新建标注</span>
+        <span v-if="currentIndex === 0">新建评估</span>
+        <span v-else>新建标注</span>
       </div>
 
       <div
@@ -25,7 +26,7 @@
         @click="$emit('select-item', item)"
       >
         <div class="date">{{ item.date }}</div>
-        <div class="label-name">{{ item.name }}</div>
+        <div class="label-name">{{ truncateText(item.name, 7) }}</div>
       </div>
     </div>
 
@@ -58,6 +59,17 @@ export default {
     selectedItem: {
       type: [Number, String],
       default: null
+    },
+    currentIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    truncateText(text, maxLength) {
+      if (!text) return '';
+      if (text.length <= maxLength) return text;
+      return text.substring(0, maxLength) + '...';
     }
   }
 }
@@ -106,17 +118,17 @@ export default {
 .nav-item-add {
   padding: 12px 20px;
   cursor: pointer;
-  transition: background-color 0.3s;
   background-color: #fff;
-  width: 80%;
+  width: 90%;
-  margin: 10% 0 10% 4%;
+  margin: 10% 0 10% 5%;
   border: 1px solid #fff;
   border-radius: 8px 8px 8px 8px;
   text-align: center;
   font-weight: 400;
-  color: #0060EF;
+  color: #146CF0;
   font-style: normal;
   text-transform: none;
+  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
 }
 
 .nav-item {
@@ -149,9 +161,17 @@ export default {
   padding: 14px 8px;
   border-radius: 8px;
   width: 100%;
+  font-weight: 500;
 }
 
 .sidebar-toggle {
   /* 根据需要添加样式 */
 }
+
+.add-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: sub;
+  margin-right: 5px;
+}
 </style>

src/views/imageCaptioning/image-captioning/components/TagSelector.vue

@@ -1,14 +1,31 @@
 <template>
   <div class="tag-container">
-    <div
+<!--    <div-->
-      v-for="(tag, index) in visibleTags"
+<!--      v-for="(tag, index) in visibleTags"-->
-      :key="index"
+<!--      :key="index"-->
-      class="tag-item"
+<!--      class="tag-item"-->
-      :class="{ active: selectedTag.includes(tag) }"
+<!--      :class="{ active: selectedTag.includes(tag) }"-->
-      @click="$emit('toggle-tag', tag)"
+<!--      @click="$emit('toggle-tag', tag)"-->
-    >
+<!--    >-->
-      {{ tag }}
+<!--      {{ tag }}-->
-    </div>
+<!--    </div>-->
+    <template v-for="(tag, index) in visibleTags">
+      <div
+        :key="'tag-' + index"
+        class="tag-item"
+        :class="{ active: selectedTag.includes(tag) }"
+        @click="$emit('toggle-tag', tag)"
+      >
+        {{ tag }}
+      </div>
+      <span
+        v-if="index < visibleTags.length - 1"
+        :key="'sep-' + index"
+        class="separator"
+      >
+        |
+      </span>
+    </template>
 
     <div v-if="tags.length > 3" class="more-btn" @click="$emit('toggle-all-tags')">
       <i class="el-icon-menu"></i>
@@ -41,7 +58,7 @@ export default {
 .tag-container {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 5px;
   margin-bottom: 20px;
 }
 
@@ -51,6 +68,7 @@ export default {
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
+  font-weight: 500;
 }
 
 .tag-item.active {
@@ -65,11 +83,16 @@ export default {
   align-items: center;
   gap: 4px;
   padding: 6px 12px;
-  font-size: 12px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   flex-shrink: 0;
   margin-left: auto;
   align-self: flex-start;
 }
+
+.separator {
+  margin: 0 5px;
+  color: #999;
+}
 </style>

src/views/imageCaptioning/image-captioning/index.vue

@@ -5,6 +5,7 @@
       :is-sidebar-visible="isSidebarVisible"
       :label-list="labelList"
       :selected-item="selectedItem"
+      :current-index="1"
       @toggle-sidebar="toggleSidebar"
       @create-new-label="createNewLabel"
       @select-item="selectItem"
@@ -88,7 +89,7 @@ export default {
 
       // 导航栏数据
       labelList: [
-        {id: 1, date: '2025-09-13', name: '安全帽、绝缘子...'},
+        {id: 1, date: '2025-09-13', name: '安全帽、绝缘子、虎视眈眈、去去去、滴滴滴、'},
         {id: 2, date: '2025-09-10', name: '安全帽'}
       ],
       selectedItem: null,