fix: 优化相关逻辑，修复遗留bug

src/views/mall/product/spu/components/ProductAttributes.vue

@@ -2,23 +2,25 @@
   <el-col v-for="(item, index) in attributeList" :key="index">
     <div>
       <el-text class="mx-1">属性名：</el-text>
-      <el-text class="mx-1">{{ item.name }}</el-text>
+      <el-tag class="mx-1" closable type="success" @close="handleCloseProperty(index)"
+        >{{ item.name }}
+      </el-tag>
     </div>
     <div>
       <el-text class="mx-1">属性值：</el-text>
       <el-tag
         v-for="(value, valueIndex) in item.values"
         :key="value.id"
-        :disable-transitions="false"
         class="mx-1"
         closable
-        @close="handleClose(index, valueIndex)"
+        @close="handleCloseValue(index, valueIndex)"
       >
         {{ value.name }}
       </el-tag>
       <el-input
         v-show="inputVisible(index)"
-        ref="InputRef"
+        :id="`input${index}`"
+        :ref="setInputRef"
         v-model="inputValue"
         class="!w-20"
         size="small"
@@ -51,7 +53,15 @@ const inputVisible = computed(() => (index) => {
   if (attributeIndex.value === null) return false
   if (attributeIndex.value === index) return true
 })
-const InputRef = ref() //标签输入框Ref
+const inputRef = ref([]) //标签输入框Ref
+/** 解决 ref 在 v-for 中的获取问题*/
+const setInputRef = (el) => {
+  if (el === null || typeof el === 'undefined') return
+  // 如果不存在id相同的元素才添加
+  if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
+    inputRef.value.push(el)
+  }
+}
 const attributeList = ref([]) // 商品属性列表
 const props = defineProps({
   propertyList: {
@@ -72,19 +82,22 @@ watch(
   }
 )
 
-/** 删除标签 tagValue 标签值*/
-const handleClose = (index, valueIndex) => {
+/** 删除属性值*/
+const handleCloseValue = (index, valueIndex) => {
   attributeList.value[index].values?.splice(valueIndex, 1)
 }
-
+/** 删除属性*/
+const handleCloseProperty = (index) => {
+  attributeList.value?.splice(index, 1)
+}
 /** 显示输入框并获取焦点 */
 const showInput = async (index) => {
   attributeIndex.value = index
-  // TODO 嗯！！！自动获取焦点还是有点问题，后续继续改进
-  // 因为组件在ref中所以需要用索引获取对应的Ref
-  InputRef.value[index]!.input!.focus()
+  inputRef.value[index].focus()
 }
 
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
 /** 输入框失去焦点或点击回车时触发 */
 const handleInputConfirm = async (index, propertyId) => {
   if (inputValue.value) {
@@ -93,6 +106,7 @@ const handleInputConfirm = async (index, propertyId) => {
       const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
       attributeList.value[index].values.push({ id, name: inputValue.value })
       message.success(t('common.createSuccess'))
+      emit('success', attributeList.value)
     } catch {
       message.error('添加失败，请重试') // TODO 缺少国际化
     }