From 3e779e4efdc02ff946cb4830938255a6fc08a376 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Wed, 21 Oct 2026 17:16:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin):=20=E5=A4=9A=E9=80=89=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E4=B8=8E=E5=86=85=E5=AE=B9=E7=B1=BB=E5=9E=8B=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contentManagement/DramaManagementView.vue | 69 ++++++++++++++-----
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/views/contentManagement/DramaManagementView.vue b/src/views/contentManagement/DramaManagementView.vue
index 439ebad..cba1ef5 100644
--- a/src/views/contentManagement/DramaManagementView.vue
+++ b/src/views/contentManagement/DramaManagementView.vue
@@ -214,9 +214,15 @@ function dramaTypeLabel(value) {
   return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
 }
 
-function rowCategoryNames(row) {
-  const names = Array.isArray(row.categoryNames) ? row.categoryNames.filter(Boolean) : []
-  return names.length ? names.join(' / ') : row.genre || '—'
+function rowCategoryList(row) {
+  if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
+    return row.categoryNames.filter(Boolean)
+  }
+  if (!row.genre) return []
+  return row.genre
+    .split('/')
+    .map((name) => name.trim())
+    .filter(Boolean)
 }
 
 function rowDramaTypes(row) {
@@ -394,9 +400,8 @@ onMounted(async () => {
             :value="item.code" /></el-select
         ><el-select
           v-model="categoryIds"
+          class="drama-multi-select"
           multiple
-          collapse-tags
-          collapse-tags-tooltip
           clearable
           placeholder="全部类型"
           @change="search"
@@ -407,9 +412,8 @@ onMounted(async () => {
             :value="item.id" /></el-select
         ><el-select
           v-model="dramaTypes"
+          class="drama-multi-select"
           multiple
-          collapse-tags
-          collapse-tags-tooltip
           clearable
           placeholder="全部内容类型"
           @change="search"
@@ -456,12 +460,18 @@ onMounted(async () => {
           ><span v-else class="table-empty-text">—</span></template
         ></el-table-column
       >
-      <el-table-column label="类型" min-width="150" show-overflow-tooltip
-        ><template #default="{ row }">{{ rowCategoryNames(row) }}</template>
-      </el-table-column>
-      <el-table-column label="内容类型" min-width="150"
+      <el-table-column label="类型" min-width="200"
         ><template #default="{ row }"
-          ><div class="table-actions"
+          ><div class="tag-wrap"
+            ><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
+              name
+            }}</el-tag></div
+          ></template
+        >
+      </el-table-column>
+      <el-table-column label="内容类型" min-width="180"
+        ><template #default="{ row }"
+          ><div class="tag-wrap"
             ><el-tag
               v-for="type in rowDramaTypes(row)"
               :key="type"
@@ -584,9 +594,8 @@ onMounted(async () => {
           <el-form-item label="类型" prop="categoryIds">
             <el-select
               v-model="form.categoryIds"
+              class="drama-multi-select"
               multiple
-              collapse-tags
-              collapse-tags-tooltip
               filterable
               placeholder="请选择类型"
             >
@@ -601,9 +610,8 @@ onMounted(async () => {
           <el-form-item label="内容类型" prop="dramaTypes">
             <el-select
               v-model="form.dramaTypes"
+              class="drama-multi-select"
               multiple
-              collapse-tags
-              collapse-tags-tooltip
               filterable
               placeholder="请选择内容类型"
             >
@@ -769,3 +777,32 @@ onMounted(async () => {
     </template>
   </el-dialog>
 </template>
+
+<style scoped>
+.drama-multi-select {
+  min-width: 220px;
+}
+
+.drama-multi-select :deep(.el-select__wrapper) {
+  height: auto;
+  min-height: 32px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.drama-multi-select :deep(.el-select__selection) {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.drama-editor-form .drama-multi-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+</style>