标注时手动增加类型

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

@@ -21,6 +21,7 @@
                     placeholder="请选择"
                     clearable
                     filterable
+                    allow-create
                     style="width: 240px"
                 >
                     <el-option

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

@@ -22,6 +22,7 @@
                 :visible-tags="visibleTags"
                 :selected-tag="selectedTag"
                 @toggle-tag="$emit('toggle-tag', $event)"
+                @new-tag-change="$emit('new-tag-change', $event)"
                 @toggle-all-tags="$emit('toggle-all-tags')"
             />
 

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

@@ -289,6 +289,35 @@
                             {{ option.label }}
                         </el-radio-button>
                     </el-radio-group>
+
+                    <!-- 增加一个tags标签新增 每次可以新增一个 -->
+                    <div>
+                        <el-tag
+                            :key="tag"
+                            closable
+                            v-for="tag in newTagsList"
+                            :disable-transitions="false"
+                            @close="handleClose(tag)"
+                        >
+                            {{ tag }}
+                        </el-tag>
+                        <el-input
+                            class="input-new-tag"
+                            v-if="inputVisible"
+                            v-model="inputValue"
+                            ref="saveTagInput"
+                            size="small"
+                            @blur="handleInputConfirm"
+                        >
+                        </el-input>
+                        <el-button
+                            v-else
+                            class="button-new-tag"
+                            size="small"
+                            @click="showInput"
+                            >+ 其他</el-button
+                        >
+                    </div>
                 </div>
 
                 <div class="annotation-info">
@@ -446,6 +475,9 @@ export default {
 
             imgSrc: '',
             isSure: null,
+            newTagsList: [],
+            inputVisible: false,
+            inputValue: '',
         }
     },
     created() {
@@ -962,6 +994,49 @@ export default {
                 }))
             })
         },
+
+        handleClose(tag) {
+            this.newTagsList.splice(this.newTagsList.indexOf(tag), 1)
+            // 根据value删除annotationTypeOptions中的数据
+            this.annotationTypeOptions = this.annotationTypeOptions.filter(
+                (item) => item.value !== tag,
+            )
+        },
+
+        showInput() {
+            this.inputVisible = true
+            this.$nextTick((_) => {
+                this.$refs.saveTagInput.$refs.input.focus()
+            })
+        },
+
+        handleInputConfirm() {
+            let inputValue = this.inputValue
+
+            // 根据inputValue在annotationTypeOptions中查找是否存在
+            const index = this.annotationTypeOptions.findIndex(
+                (item) => item.value === inputValue,
+            )
+            if (index === -1) {
+                this.newTagsList.push(inputValue)
+                this.annotationTypeOptions.push({
+                    label: inputValue,
+                    value: inputValue,
+                })
+            } else {
+                this.$message.warning('标签已存在')
+                return
+            }
+            // if (inputValue) {
+            //     this.newTagsList.push(inputValue)
+            //     this.annotationTypeOptions.push({
+            //         label: inputValue,
+            //         value: inputValue,
+            //     })
+            // }
+            this.inputVisible = false
+            this.inp
+        },
     },
 }
 </script>
@@ -1067,6 +1142,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 12px;
+    flex-wrap: wrap;
 }
 
 .annotation-type .label {
@@ -1262,4 +1338,20 @@ el-image {
         font-size: 30px;
     }
 }
+
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
 </style>

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

@@ -1,95 +1,164 @@
 <template>
-  <div class="tag-container">
+    <div class="tag-container">
-    <template v-for="(tag, index) in visibleTags">
+        <template v-for="(tag, index) in visibleTags">
-      <div
+            <div
-        :key="'tag-' + tag.id"
+                :key="'tag-' + tag.id"
-        class="tag-item"
+                class="tag-item"
-        :class="{ active: isSelected(tag) }"
+                :class="{ active: isSelected(tag) }"
-        @click="$emit('toggle-tag', tag)"
+                @click="$emit('toggle-tag', tag)"
-      >
+            >
-        {{ tag.name }}
+                {{ tag.name }}
-      </div>
+            </div>
-      <span
+            <span
-        v-if="index < visibleTags.length - 1"
+                v-if="index < visibleTags.length - 1"
-        :key="'sep-' + index"
+                :key="'sep-' + index"
-        class="separator"
+                class="separator"
-      >
+            >
-        |
+                |
-      </span>
+            </span>
-    </template>
+        </template>
 
-    <div v-if="tags.length > 3" class="more-btn" @click="$emit('toggle-all-tags')">
+        <div>
-      <i class="el-icon-menu"></i>
+            <el-tag
-      <span>更多</span>
+                :key="tag"
+                closable
+                v-for="tag in newTagsList"
+                :disable-transitions="false"
+                @close="handleClose(tag)"
+            >
+                {{ tag }}
+            </el-tag>
+            <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-button
+                v-else
+                class="button-new-tag"
+                size="small"
+                @click="showInput"
+                >+ 其他</el-button
+            >
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "TagSelector",
+    name: 'TagSelector',
-  props: {
+    props: {
-    tags: {
+        tags: {
-      type: Array,
+            type: Array,
-      default: () => []
+            default: () => [],
+        },
+        visibleTags: {
+            type: Array,
+            default: () => [],
+        },
+        selectedTag: {
+            type: Array,
+            default: () => [],
+        },
     },
-    visibleTags: {
+    data() {
-      type: Array,
+        return {
-      default: () => []
+            newTagsList: [],
+            inputVisible: false,
+            inputValue: '',
+        }
+    },
+    methods: {
+        // 检查标签是否被选中
+        isSelected(tag) {
+            return this.selectedTag.some((item) => item.id === tag.id)
+        },
+
+        handleClose(tag) {
+            this.newTagsList.splice(this.newTagsList.indexOf(tag), 1)
+            this.$emit('new-tag-change', this.newTagsList)
+        },
+
+        showInput() {
+            this.inputVisible = true
+            this.$nextTick((_) => {
+                this.$refs.saveTagInput.$refs.input.focus()
+            })
+        },
+
+        handleInputConfirm() {
+            let inputValue = this.inputValue
+            if (inputValue) {
+                this.newTagsList.push(inputValue)
+                this.$emit('new-tag-change', this.newTagsList)
+            }
+            this.inputVisible = false
+            this.inputValue = ''
+        },
     },
-    selectedTag: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    // 检查标签是否被选中
-    isSelected(tag) {
-      return this.selectedTag.some(item => item.id === tag.id)
-    }
-  }
 }
 </script>
 
 <style scoped>
 .tag-container {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  gap: 5px;
+    gap: 5px;
-  margin-bottom: 20px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
 }
 
 .tag-item {
-  padding: 6px 12px;
+    padding: 6px 12px;
-  font-size: 14px;
+    font-size: 14px;
-  cursor: pointer;
+    cursor: pointer;
-  transition: all 0.3s;
+    transition: all 0.3s;
-  flex-shrink: 0;
+    flex-shrink: 0;
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .tag-item.active {
-  color: #0060EF;
+    color: #0060ef;
-  background: #FFFFFF;
+    background: #ffffff;
-  border-radius: 40px 40px 40px 40px;
+    border-radius: 40px 40px 40px 40px;
-  border: 1px solid #0060EF;
+    border: 1px solid #0060ef;
 }
 
 .more-btn {
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  gap: 4px;
+    gap: 4px;
-  padding: 6px 12px;
+    padding: 6px 12px;
-  font-size: 14px;
+    font-size: 14px;
-  cursor: pointer;
+    cursor: pointer;
-  transition: all 0.3s;
+    transition: all 0.3s;
-  flex-shrink: 0;
+    flex-shrink: 0;
-  margin-left: auto;
+    margin-left: auto;
-  align-self: flex-start;
+    align-self: flex-start;
 }
 
 .separator {
-  margin: 0 5px;
+    margin: 0 5px;
-  color: #999;
+    color: #999;
+}
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
 }
 </style>

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="tag-container">
+    <template v-for="(tag, index) in visibleTags">
+      <div
+        :key="'tag-' + tag.id"
+        class="tag-item"
+        :class="{ active: isSelected(tag) }"
+        @click="$emit('toggle-tag', tag)"
+      >
+        {{ tag.name }}
+      </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>
+      <span>更多</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TagSelector",
+  props: {
+    tags: {
+      type: Array,
+      default: () => []
+    },
+    visibleTags: {
+      type: Array,
+      default: () => []
+    },
+    selectedTag: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    // 检查标签是否被选中
+    isSelected(tag) {
+      return this.selectedTag.some(item => item.id === tag.id)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 20px;
+}
+
+.tag-item {
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.tag-item.active {
+  color: #0060EF;
+  background: #FFFFFF;
+  border-radius: 40px 40px 40px 40px;
+  border: 1px solid #0060EF;
+}
+
+.more-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 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

@@ -24,6 +24,7 @@
                     :visible-tags="visibleTags"
                     :selected-tag="selectedTag"
                     @toggle-tag="toggleTag"
+                    @new-tag-change="newTagChange"
                     @toggle-all-tags="toggleAllTags"
                 />
 
@@ -61,6 +62,7 @@
                 @hand-click="handleHandClick"
                 @confirm-results="confirmResults"
                 @toggle-tag="toggleTag"
+                @new-tag-change="newTagChange"
                 @toggle-all-tags="toggleAllTags"
                 @file-change="handleFileChange"
                 @remove-image="removeImage"
@@ -119,6 +121,8 @@ export default {
             groupedImageResults: [], // 新增分组数据
 
             remarkInfo: '', // 备注信息
+
+            newTagsList: [], // 新增标签列表
         }
     },
 
@@ -140,7 +144,9 @@ export default {
                         id: item.id,
                         name: item.name,
                     }))
-                    this.visibleTags = this.tags.slice(0, 3)
+                    // this.visibleTags = this.tags.slice(0, 3)
+                    console.log('this.tags:', this.tags)
+                    this.visibleTags = this.tags
                 } else {
                     console.error('获取标签列表失败:', res)
                     this.tags = []
@@ -190,9 +196,16 @@ export default {
             const selectedTagIds = this.selectedTag
                 .map((tag) => tag.id)
                 .join(',')
-            const selectedTagNames = this.selectedTag
+            let selectedTagNames = this.selectedTag
                 .map((tag) => tag.name)
                 .join(',')
+
+            let newTagsNames = ''
+            if (this.newTagsList.length > 0) {
+                newTagsNames = this.newTagsList.join(',')
+                selectedTagNames = `${selectedTagNames},${newTagsNames}`
+            }
+
             console.log('选中的标签IDs:', selectedTagIds)
             console.log('选中的标签名称:', selectedTagNames)
             if (this.fileList.length === 0) {
@@ -344,10 +357,14 @@ export default {
             }
 
             if (!this.showAllTags) {
-                this.updateVisibleTagsInCollapsedState()
+                // this.updateVisibleTagsInCollapsedState()
             }
         },
 
+        newTagChange(newTagsList) {
+            this.newTagsList = newTagsList
+        },
+
         updateVisibleTagsInCollapsedState() {
             const selectedTags = this.selectedTag || []
             const defaultTags = this.tags.slice(0, 3)