🌈 style: 关联标签修改

src/components/common/Empty.vue

+<template>
+  <div class="w-full h-full flex items-center justify-center">
+    <div class="flex flex-col justify-center">
+      <iconpark-icon name="Empty-2" class="text-[80px]"></iconpark-icon>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CommonEmpty",
+};
+</script>
+<style></style>

src/views/popup/AddTagsDrawer/components/TagsCheck.vue

@@ -11,29 +11,40 @@
     <div
       class="flex flex-wrap content-start gap-[8px] mt-[8px] pb-[12px] border-b-[1px] border-dashed border-b-[#E5E5E6] h-[112px] overflow-y-auto"
     >
-      <div
-        class="flex items-center px-[6px] h-[22px] rounded-[4px] bg-[#F5F5F5]"
-        :class="[
-          checkedIds && checkedIds.includes(item[options.value])
-            ? ''
-            : 'bg-[#E8F1FD] ',
-        ]"
-        v-for="(item, index) in value"
-        :key="index"
-      >
-        {{ item[options.label] }}
-        <i
-          v-if="checkedIds && !checkedIds.includes(item[options.value])"
-          @click="remove(item)"
-          class="el-icon-close ml-[6px] cursor-pointer text-[#B0B2B5] hover:text-primary"
-        ></i>
-      </div>
+      <template v-if="value.length > 0">
+        <div
+          class="flex items-center px-[6px] h-[22px] rounded-[4px] bg-[#F5F5F5]"
+          :class="[
+            checkedIds && checkedIds.includes(item[options.value])
+              ? ''
+              : 'bg-[#E8F1FD] ',
+          ]"
+          v-for="(item, index) in value"
+          :key="index"
+        >
+          {{ item[options.label] }}
+          <i
+            v-if="checkedIds && !checkedIds.includes(item[options.value])"
+            @click="remove(item)"
+            class="el-icon-close ml-[6px] cursor-pointer text-[#B0B2B5] hover:text-primary"
+          ></i>
+        </div>
+      </template>
+      <Empty v-else>
+        <div class="text-[#6D7176] text-[12px]">
+          未选择标签，点击下方标签进行勾选
+        </div>
+      </Empty>
     </div>
   </div>
 </template>
 <script>
+import Empty from "@/components/common/Empty.vue";
 export default {
   name: "TagsCheck",
+  components: {
+    Empty,
+  },
   props: {
     value: {
       type: Array,
@@ -45,7 +56,7 @@ export default {
     },
     checkedIds: {
       type: Array,
-      default: () => null,
+      default: () => [],
     },
   },
   methods: {
@@ -54,6 +65,7 @@ export default {
         "input",
         this.value.filter((i) => i !== item)
       );
+      this.$emit("change");
     },
     clear() {
       this.$emit(
@@ -62,6 +74,7 @@ export default {
           this.checkedIds.includes(i[this.options.value])
         )
       );
+      this.$emit("change");
     },
   },
 };

src/views/popup/AddTagsDrawer/index.vue

@@ -11,6 +11,7 @@
         v-model="list"
         :checked-ids="defaultCheckedIds"
         :options="{ label: 'label_name', value: 'id' }"
+        @change="applyInitialDisabledState"
       />
       <div class="flex-1 overflow-y-auto">
         <div class="text-[#363E49] text-[13px] mt-[12px] mb-[8px]">
@@ -137,6 +138,7 @@ export default {
       if (res.status_code === 1) {
         this.$message.success(res.msg);
         this.close();
+        this.$emit("submitOk");
       } else {
         this.$message.error(res.msg || "添加失败");
       }

src/views/userInfo/components/Info.vue

@@ -149,58 +149,76 @@
           />
 
           <!-- 游戏标签 -->
-          <div class="item rowFlex columnCenter spaceBetween tagsLost">
-            <div class="rowFlex">
+          <div class="item rowFlex columnCenter spaceBetween tagsLost group">
+            <div class="rowFlex items-center">
               <span class="label">关联标签:</span>
               <div
                 v-if="
                   chatUserDetails.tag_group &&
                   chatUserDetails.tag_group.length > 0
                 "
+                class="flex space-x-[4px] items-center"
               >
-                <!-- 第一个标签组的所有标签 -->
-                <el-tag
-                  v-for="(items, indexs) in chatUserDetails.tag_group[0].tag"
-                  :key="indexs"
-                  >{{ items.name }}</el-tag
-                >
-                <!-- 如果有多个标签组，显示+n -->
-                <el-popover
-                  v-if="chatUserDetails.tag_group.length > 1"
-                  placement="top"
-                  trigger="hover"
-                  popper-class="tag-popover"
-                >
+                <div class="flex items-center space-x-[4px] cursor-pointer">
                   <div
-                    class="groups-popover-content"
-                    style="max-height: 600px; overflow-y: auto"
+                    v-for="(items, index) in chatUserDetails.tag_group[0].tag"
+                    :key="index"
+                    class="px-[6px] rounded-[4px] bg-[#F5F5F5] gap-[4px] flex items-center h-[22px]"
                   >
                     <div
-                      v-for="(
-                        group, groupIndex
-                      ) in chatUserDetails.tag_group.slice(1)"
-                      :key="groupIndex"
-                      class="group-item"
+                      v-if="chatUserDetails.tag_group.length > 1"
+                      class="flex-1 truncate"
                     >
-                      <el-tag
-                        v-for="(tagItem, tagIndex) in group.tag"
-                        :key="tagIndex"
-                        style="margin-right: 10px"
-                        >{{ tagItem.name }}</el-tag
-                      >
+                      {{ items.name }}
                     </div>
+
+                    <div
+                      v-else-if="chatUserDetails.tag_group.length > 0"
+                      class="flex-1 truncate"
+                    >
+                      {{ items.name }}
+                    </div>
+                    <div v-else class="flex-1 truncate">--</div>
                   </div>
-                  <span slot="reference" class="tag-more"
-                    >+{{ chatUserDetails.tag_group.length - 1 }}</span
+                  <el-tooltip
+                    effect="dark"
+                    placement="top"
+                    v-if="chatUserDetails.tag_group.length > 1"
                   >
-                </el-popover>
+                    <div slot="content" class="space-y-[4px]">
+                      <div
+                        v-for="(
+                          group, groupIndex
+                        ) in chatUserDetails.tag_group.slice(1)"
+                        :key="groupIndex"
+                        class="grid grid-cols-3 gap-[4px] border-b-[1px] border-[rgba(255,255,255,0.2)] border-dashed py-[4px]"
+                      >
+                        <div
+                          v-for="(tagItem, tagIndex) in group.tag"
+                          :key="tagIndex"
+                          class="px-[6px] w-full max-w-[200px] rounded-[4px] bg-[rgba(255,255,255,0.2)] flex items-center h-[22px] overflow-hidden"
+                        >
+                          <span class="truncate"> {{ tagItem?.name }} </span>
+                        </div>
+                      </div>
+                    </div>
+                    <el-button type="text" size="small"
+                      >+{{ chatUserDetails.tag_group.length - 1 }}
+                    </el-button>
+                  </el-tooltip>
+                  <iconpark-icon
+                    name="ziliao-tianjia-jb82dh2k"
+                    class="group-hover:visible invisible text-primary text-[14px] ml-[6px]"
+                    @click="editTags"
+                  ></iconpark-icon>
+                </div>
               </div>
             </div>
-            <i
+            <!-- <i
               class="el-icon-edit icon"
               style="font-size: 14px; margin-right: 10px"
               @click="editTags"
-            ></i>
+            ></i> -->
           </div>
           <!-- 共享信息 -->
           <shareInfo :chat-user-details="chatUserDetails" />

src/views/userInfo/components/gameInfo/ZyouTag.vue

 <template>
   <div>
-    <div class="item spaceBetween zyouTag grid grid-cols-12">
-      <div class="rowFlex col-span-3">
+    <div class="item spaceBetween zyouTag grid grid-cols-12 max-w-[360px]">
+      <div class="rowFlex col-span-3 max-w-[100px]">
         <span class="label">掌游标签:</span>
         <!-- <i
           :class="[
@@ -59,10 +59,12 @@
           </div>
           <iconpark-icon
             name="ziliao-tianjia-jb82dh2k"
-            class="group-hover:visible invisible text-primary text-[14px] ml-[6px]"
+            class="invisible text-primary text-[14px] ml-[6px]"
+            :class="{ 'group-hover:visible': item.label_type == 2 }"
             @click="addTag(item.label)"
           ></iconpark-icon>
         </div>
+        <Empty />
       </div>
     </div>
     <!-- 掌游标签列表 -->
@@ -147,7 +149,11 @@
         </div>
       </div>
     </div> -->
-    <AddTagsDrawer ref="addTagsDrawer" :game-user-info="gameUserInfo" />
+    <AddTagsDrawer
+      ref="addTagsDrawer"
+      :game-user-info="gameUserInfo"
+      @submitOk="getRoleLabelList"
+    />
   </div>
 </template>