自适应调试其他细节调整

src/views/tag/TagManage.vue

@@ -128,10 +128,45 @@
             class="course-table"
         >
           <template #bodyCell="{ record, column }">
+            <!-- 关联课程ID -->
+            <template v-if="column.key === 'courseId'">
+              <div class="course-id-cell" :title="record.courseId">
+                {{ record.courseId }}
+              </div>
+            </template>
+
+            <!-- 关联课程名称 -->
+            <template v-else-if="column.key === 'courseName'">
+              <a-tooltip placement="topLeft" :title="record.courseName">
+                <div class="course-name-cell">
+                  {{ record.courseName }}
+                </div>
+              </a-tooltip>
+            </template>
+
+            <!-- 关联人 -->
+            <template v-else-if="column.key === 'sysCreateBy'">
+              <a-tooltip placement="topLeft" :title="record.sysCreateBy">
+                <div class="creator-cell">
+                  {{ record.sysCreateBy }}
+                </div>
+              </a-tooltip>
+            </template>
+
             <!-- 关联时间格式化 -->
-            <template v-if="column.key === 'sysCreateTime'">
+            <template v-else-if="column.key === 'sysCreateTime'">
               {{ formatDate(record.sysCreateTime) }}
             </template>
+
+            <!-- 本课程绑定的其他标签 -->
+            <template v-else-if="column.key === 'otherTags'">
+              <a-tooltip placement="topLeft" :title="record.otherTags">
+                <div class="other-tags-cell">
+                  {{ record.otherTags }}
+                </div>
+              </a-tooltip>
+            </template>
+
             <!-- 操作列 -->
             <template v-else-if="column.key === 'operation'">
               <a-button type="link" @click="unbindCurrentTag(record)" class="unbind-btn">解绑</a-button>
@@ -158,12 +193,15 @@
 
 <script>
 import { reactive, toRefs, ref } from "vue";
-import { message } from "ant-design-vue";
+import { message, Tooltip } from "ant-design-vue";
 import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
 import moment from "moment";
 
 export default {
   name: "TagManage",
+  components: {
+    ATooltip: Tooltip
+  },
   setup() {
     const state = reactive({
       tableLoading: false,
@@ -275,14 +313,13 @@ export default {
         dataIndex: "courseName",
         key: "courseName",
         width: 200,
-        align: "center",
-        ellipsis: true
+        align: "center"
       },
       {
         title: "关联课程ID",
         dataIndex: "courseId",
         key: "courseId",
-        width: 120,
+        width: 180,
         align: "center"
       },
       {
@@ -290,8 +327,7 @@ export default {
         dataIndex: "sysCreateBy",
         key: "sysCreateBy",
         width: 120,
-        align: "center",
-        ellipsis: true
+        align: "center"
       },
       {
         title: "关联时间",
@@ -306,8 +342,7 @@ export default {
         dataIndex: "otherTags",
         key: "otherTags",
         width: 200,
-        align: "center",
-        ellipsis: true
+        align: "center"
       },
       {
         title: "操作",
@@ -721,11 +756,13 @@ export default {
         text-align: center !important;
         white-space: nowrap;
         font-weight: 600;
+        padding: 12px 8px;
       }
 
       .ant-table-tbody > tr > td {
         text-align: center;
-        white-space: nowrap;
+        padding: 8px;
+        vertical-align: top;
       }
     }
   }
@@ -746,6 +783,72 @@ export default {
   }
 }
 
+// 自定义单元格样式
+.course-id-cell {
+  width: 100%;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 2.8em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-align: center;
+  margin: 0 auto;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+}
+
+.course-name-cell {
+  width: 100%;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 2.8em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-align: left;
+  text-align: center;
+
+  // 每行显示15个汉字，2行显示30个字
+  max-width: 240px; // 15个汉字 * 16px ≈ 240px
+  margin: 0 auto;
+}
+
+.creator-cell {
+  width: 100%;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 2.8em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-align: center;
+
+  // 每行5个汉字，2行显示10个字
+  max-width: 80px; // 5个汉字 * 16px ≈ 80px
+  margin: 0 auto;
+}
+
+.other-tags-cell {
+  width: 100%;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 2.8em;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-align: left;
+  text-align: center;
+
+  // 每行15个汉字，2行显示30个字
+  max-width: 240px; // 15个汉字 * 16px ≈ 240px
+  margin: 0 auto;
+}
+
 /* 媒体查询适配不同分辨率 */
 @media (max-width: 1600px) {
   .tagManage {
@@ -768,6 +871,14 @@ export default {
       }
     }
   }
+
+  .course-id-cell,
+  .course-name-cell,
+  .creator-cell,
+  .other-tags-cell {
+    font-size: 12px;
+    line-height: 1.3;
+  }
 }
 
 @media (max-width: 1400px) {
@@ -802,15 +913,36 @@ export default {
         font-size: 12px;
 
         .ant-table-thead > tr > th {
-          padding: 8px;
+          padding: 10px 6px;
+          font-size: 12px;
         }
 
         .ant-table-tbody > tr > td {
-          padding: 8px;
+          padding: 6px 4px;
         }
       }
     }
   }
+
+  .course-id-cell {
+    font-size: 11px;
+    max-width: 160px;
+  }
+
+  .course-name-cell {
+    max-width: 200px;
+    font-size: 12px;
+  }
+
+  .creator-cell {
+    max-width: 70px;
+    font-size: 12px;
+  }
+
+  .other-tags-cell {
+    max-width: 200px;
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 1280px) {
@@ -842,6 +974,7 @@ export default {
 }
 
 /* 弹窗在小屏幕下的适配 */
+
 @media (max-width: 768px) {
   .course-dialog-content {
     .course-table {
@@ -851,6 +984,7 @@ export default {
         .ant-table-thead > tr > th,
         .ant-table-tbody > tr > td {
           padding: 6px 4px;
+          font-size: 11px;
         }
       }
     }
@@ -872,6 +1006,34 @@ export default {
       }
     }
   }
+
+  .course-id-cell {
+    font-size: 10px;
+    max-width: 120px;
+    line-height: 1.2;
+    max-height: 2.4em;
+  }
+
+  .course-name-cell {
+    max-width: 150px;
+    font-size: 11px;
+    line-height: 1.2;
+    max-height: 2.4em;
+  }
+
+  .creator-cell {
+    max-width: 60px;
+    font-size: 11px;
+    line-height: 1.2;
+    max-height: 2.4em;
+  }
+
+  .other-tags-cell {
+    max-width: 150px;
+    font-size: 11px;
+    line-height: 1.2;
+    max-height: 2.4em;
+  }
 }
 
 /* 高DPI屏幕适配 */
@@ -897,6 +1059,13 @@ export default {
       }
     }
   }
+
+  .course-id-cell,
+  .course-name-cell,
+  .creator-cell,
+  .other-tags-cell {
+    font-size: 14px;
+  }
 }
 </style>
 
@@ -941,6 +1110,18 @@ export default {
     }
   }
 
+  // 弹窗内表格工具提示样式优化
+  .ant-tooltip {
+    .ant-tooltip-inner {
+      max-width: 400px;
+      word-break: break-all;
+      background-color: rgba(0, 0, 0, 0.85);
+      font-size: 13px;
+      line-height: 1.5;
+      padding: 8px 12px;
+    }
+  }
+
   @media (max-width: 768px) {
     .ant-modal {
       .ant-modal-content {
@@ -948,6 +1129,71 @@ export default {
           padding: 16px;
           max-height: 60vh;
         }
+
+        .ant-modal-header {
+          padding: 12px 16px;
+
+          .ant-modal-title {
+            font-size: 14px;
+          }
+        }
+      }
+
+      .ant-modal-close {
+        top: 8px;
+        right: 8px;
+
+        .ant-modal-close-x {
+          width: 36px;
+          height: 36px;
+          line-height: 36px;
+        }
+      }
+    }
+
+    .ant-tooltip {
+      .ant-tooltip-inner {
+        max-width: 300px;
+        font-size: 12px;
+        padding: 6px 10px;
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .ant-modal {
+      width: 95% !important;
+      max-width: none !important;
+
+      .ant-modal-content {
+        .ant-modal-body {
+          padding: 12px;
+          max-height: 50vh;
+        }
+      }
+    }
+  }
+}
+
+// 表格滚动条样式优化
+.course-dialog {
+  .ant-table-body {
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+      border-radius: 3px;
+
+      &:hover {
+        background: #a8a8a8;
       }
     }
   }