feat：【antd】【mall】ProductAttributes 组件样式优化

apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue

@@ -82,10 +82,10 @@ watch(
 
 /** 删除属性值 */
 function handleCloseValue(index: number, value: PropertyAndValues) {
-  if (attributeList.value[index]) {
+  if (attributeList.value[index]?.values) {
-    attributeList.value[index].values = attributeList.value?.[
+    attributeList.value[index].values = attributeList.value[
       index
-    ]?.values?.filter((item) => item.id !== value.id);
+    ].values?.filter((item) => item.id !== value.id);
   }
 }
 
@@ -166,9 +166,8 @@ async function getAttributeOptions(propertyId: number) {
 
 <template>
   <Col v-for="(attribute, index) in attributeList" :key="index">
-    <Divider class="my-4" />
+    <Divider class="my-3" />
-    <!-- TODO @puhui999：1）间隙可以看看；2)vue3 + element-plus 添加属性这个按钮，是和属性名在一排，感觉更好看点。 -->
+    <div class="mt-2 flex flex-wrap items-center gap-2">
-    <div class="mt-1">
       <span class="mx-1">属性名：</span>
       <Tag
         :closable="!isDetail"
@@ -179,7 +178,7 @@ async function getAttributeOptions(propertyId: number) {
         {{ attribute.name }}
       </Tag>
     </div>
-    <div class="mt-2">
+    <div class="mt-2 flex flex-wrap items-center gap-2">
       <span class="mx-1">属性值：</span>
       <Tag
         v-for="(value, valueIndex) in attribute.values"
@@ -188,8 +187,7 @@ async function getAttributeOptions(propertyId: number) {
         class="mx-1"
         @close="handleCloseValue(index, value)"
       >
-        <!-- TODO @puhui999：这里貌似爆红？！idea -->
+        {{ value?.name }}
-        {{ value.name }}
       </Tag>
       <Select
         v-show="inputVisible(index)"