From 85dcc86f7e5d4a57dbf3a14661902020699ee0f0 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Sat, 1 Nov 2025 14:47:23 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tag/TagManage.vue | 878 +++++++++++++++++++++++++++++-------
 1 file changed, 712 insertions(+), 166 deletions(-)

diff --git a/src/views/tag/TagManage.vue b/src/views/tag/TagManage.vue
index addeefaf..6c2a8744 100644
--- a/src/views/tag/TagManage.vue
+++ b/src/views/tag/TagManage.vue
@@ -3,30 +3,19 @@
     <!-- 搜索框及按钮 -->
     <div class="filter">
       <div class="filterItems">
-<!--        <div class="select">
-          <a-input
-              v-model:value="searchParam.id"
-              style="width: 270px; height: 40px; border-radius: 8px"
-              placeholder="请输入标签ID"
-              allowClear
-              showSearch
-          >
-          </a-input>
-        </div>-->
         <div class="select">
           <a-input
               v-model:value="searchParam.tagName"
-              style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入标签名称"
               allowClear
               showSearch
+              @pressEnter="searchSubmit"
           >
           </a-input>
         </div>
         <div class="select">
           <a-select
               v-model:value="searchParam.isHot"
-              style="width: 270px"
               placeholder="请选择热点标签状态"
               :options="hotOptions"
               allowClear
@@ -35,13 +24,12 @@
         <div class="select">
           <a-select
               v-model:value="searchParam.isPublic"
-              style="width: 270px"
               placeholder="请选择前台公共显示状态"
               :options="hotOptions"
               allowClear
           ></a-select>
         </div>
-        <div style="display: flex; margin-bottom: 20px">
+        <div class="button-group">
           <div class="btnn btn1" @click="searchSubmit">
             <div class="search"></div>
             <div class="btnText">搜索</div>
@@ -50,18 +38,17 @@
             <div class="search"></div>
             <div class="btnText">重置</div>
           </div>
-        </div>
-        <div class="btn btn2" @click="exportTag">
-          <div class="btnText">导出</div>
+          <div class="btn btn2" @click="exportTag">
+            <div class="btnText">导出</div>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- 表格 -->
-    <div style="padding: 10px 35px">
+    <div class="table-container">
       <a-table
           :header-cell-style="{ 'text-align': 'center' }"
-          style="border: 1px solid #f2f6fe"
           :columns="columns"
           :data-source="tableData"
           :loading="tableLoading"
@@ -76,16 +63,27 @@
             <a
                 v-if="record.useCount > 0"
                 @click="showCourseByTagg(record.id)"
-                style="color: #4ea6ff; text-decoration: underline; cursor: pointer;"
+                class="course-link"
             >
               {{ record.useCount }}
             </a>
-            <span v-else style="color: #999;">0</span>
+            <span v-else class="zero-count">0</span>
           </template>
 
           <!-- 前台公共显示列 -->
           <template v-else-if="column.key === 'isPublic'">
+            <a-tooltip
+                v-if="record.isHot"
+                title="热点标签必须是公共标签，请先修改热点标签状态"
+            >
+              <a-switch
+                  v-model:checked="record.isPublic"
+                  :disabled="record.isHot"
+                  @change="handlePublicChange(record)"
+              />
+            </a-tooltip>
             <a-switch
+                v-else
                 v-model:checked="record.isPublic"
                 :disabled="record.isHot"
                 @change="handlePublicChange(record)"
@@ -94,7 +92,18 @@
 
           <!-- 热点标签展示列 -->
           <template v-else-if="column.key === 'isHot'">
+            <a-tooltip
+                v-if="!record.isPublic"
+                title="请先设置为公共标签。"
+            >
+              <a-switch
+                  v-model:checked="record.isHot"
+                  :disabled="!record.isPublic"
+                  @change="handleHotChange(record)"
+              />
+            </a-tooltip>
             <a-switch
+                v-else
                 v-model:checked="record.isHot"
                 :disabled="!record.isPublic"
                 @change="handleHotChange(record)"
@@ -123,31 +132,14 @@
     <!-- 标签关联课程弹窗 -->
     <a-modal
         v-model:visible="courseDialogVisible"
-        :title="null"
+        title="关联课程"
         :footer="null"
         :closable="true"
-        wrapClassName="courseDialog"
-        width="1100px"
+        wrapClassName="course-dialog"
+        width="90%"
+        :style="{ maxWidth: '1100px' }"
     >
-      <div
-          class="modalHeader"
-          style="
-          width: 100%;
-          height: 68px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        "
-      >
-        <div class="headerLeft" style="margin-left: 32px">
-          <span class="headerLeftText" style="font-size: 16px">关联课程</span>
-        </div>
-        <div style="cursor: pointer; margin-right: 32px" @click="closeCourseDialog">
-
-        </div>
-      </div>
-
-      <div class="modalMain" style="padding: 5px;">
+      <div class="course-dialog-content">
         <a-table
             :columns="courseColumns"
             :data-source="courseTableData"
@@ -156,33 +148,72 @@
             :scroll="{ x: 'max-content' }"
             rowKey="id"
             @change="handleRelTableChange"
+            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)">解绑</a-button>
+              <a-space :key="record.id">
+                <a-button @click="() => handleOper(record)"
+                          type="link"
+                >
+                  解绑
+                </a-button>
+              </a-space>
             </template>
           </template>
         </a-table>
 
-        <div class="tableBox">
-          <div class="pa">
-            <a-pagination
-                v-if="courseTableTotal > 5"
-                :showSizeChanger="false"
-                :showQuickJumper="true"
-                :hideOnSinglePage="true"
-                :pageSize="coursePageSize"
-                v-model:current="courseSearchParam.pageNo"
-                :total="courseTableTotal"
-                class="pagination"
-                @change="changeCoursePagination"
-            />
-          </div>
+        <div class="course-pagination">
+          <a-pagination
+              v-if="courseTableTotal > 5"
+              :showSizeChanger="false"
+              :showQuickJumper="true"
+              :hideOnSinglePage="true"
+              :pageSize="coursePageSize"
+              v-model:current="courseSearchParam.pageNo"
+              :total="courseTableTotal"
+              @change="changeCoursePagination"
+          />
         </div>
       </div>
     </a-modal>
@@ -191,13 +222,17 @@
 
 <script>
 import { reactive, toRefs, ref } from "vue";
-import { message } from "ant-design-vue";
-// import { apiCourseTag } from "@/api/courseTag.js";
-import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation,searchTags,createTag,exportTagFile } from "../../api/courseTag.js";
+import { message, Tooltip } from "ant-design-vue";
+import { portalPageList ,changeTagPublic,changeTagHot,showCourseByTag,unbindCourseTagRelation } from "../../api/courseTag.js";
 import moment from "moment";
+import dialog from "@/utils/dialog";
 
 export default {
   name: "TagManage",
+  components: {
+    ATooltip: Tooltip,
+    // APopconfirm: Popconfirm
+  },
   setup() {
     const state = reactive({
       tableLoading: false,
@@ -234,25 +269,19 @@ export default {
     });
 
     const columns = ref([
-      /*{
-        title: "标签ID",
-        dataIndex: "id",
-        key: "id",
-        width: 200,
-        align: "center"
-      },*/
       {
         title: "标签名称",
         dataIndex: "tagName",
         key: "tagName",
         width: 250,
-        align: "center"
+        align: "center",
+        ellipsis: true
       },
       {
         title: "已关联课程",
         dataIndex: "useCount",
         key: "useCount",
-        width: 200,
+        width: 120,
         align: "center",
         sorter: true
       },
@@ -260,42 +289,44 @@ export default {
         title: "前台公共显示",
         dataIndex: "isPublic",
         key: "isPublic",
-        width: 180,
+        width: 150,
         align: "center"
       },
       {
         title: "热点标签展示",
         dataIndex: "isHot",
         key: "isHot",
-        width: 180,
+        width: 150,
         align: "center"
       },
       {
         title: "创建人",
         dataIndex: "sysCreateBy",
         key: "sysCreateBy",
-        width: 150,
-        align: "center"
+        width: 120,
+        align: "center",
+        ellipsis: true
       },
       {
         title: "创建时间",
         dataIndex: "sysCreateTime",
         key: "sysCreateTime",
-        width: 180,
+        width: 150,
         align: "center"
       },
       {
         title: "更新人",
         dataIndex: "sysUpdateBy",
         key: "sysUpdateBy",
-        width: 150,
-        align: "center"
+        width: 120,
+        align: "center",
+        ellipsis: true
       },
       {
         title: "更新时间",
         dataIndex: "sysUpdateTime",
         key: "sysUpdateTime",
-        width: 180,
+        width: 150,
         align: "center"
       }
     ]);
@@ -312,7 +343,7 @@ export default {
         title: "关联课程名称",
         dataIndex: "courseName",
         key: "courseName",
-        width: 180,
+        width: 200,
         align: "center"
       },
       {
@@ -326,7 +357,7 @@ export default {
         title: "关联人",
         dataIndex: "sysCreateBy",
         key: "sysCreateBy",
-        width: 100,
+        width: 120,
         align: "center"
       },
       {
@@ -348,7 +379,8 @@ export default {
         title: "操作",
         key: "operation",
         width: 100,
-        align: "center"
+        align: "center",
+        fixed: 'right'
       }
     ]);
 
@@ -398,7 +430,9 @@ export default {
         pageSize: 10,
         id: "",
         tagName: "",
-        isHot: undefined
+        isHot: undefined,
+        isPublic: undefined,
+        order: null
       };
       getTagList();
     };
@@ -409,10 +443,10 @@ export default {
       getTagList();
     };
 
+
     // 表格排序变化
     const handleTableChange = (pagination, filters, sorter) => {
       if (sorter.field === 'useCount') {
-        // 处理排序逻辑
         console.log('排序字段:', sorter.field, '排序方式:', sorter.order);
         if (sorter.order === 'ascend') {
           state.searchParam.order = 'asc';
@@ -427,7 +461,6 @@ export default {
 
     const handleRelTableChange = (pagination, filters, sorter) => {
       if (sorter.field === 'sysCreateTime') {
-        // 处理排序逻辑
         console.log('REL排序字段:', sorter.field, '排序方式:', sorter.order);
         if (sorter.order === 'ascend') {
           state.searchParam.order = 'asc';
@@ -440,19 +473,16 @@ export default {
       }
     };
 
-
     // 改变公共显示状态
     const handlePublicChange = async (record) => {
       const originalStatus = record.isPublic;
       try {
-        // await apiCourseTag.changeTagPublic(record);
         console.log("修改公共显示 参数 : ",record);
         console.log("修改公共显示 参数 : ",record.id);
         changeTagPublic(record.id).then ((res) => {
           console.log("更新公共显示 结果 : ",res);
           if (res.status === 200) {
             console.log("更新成功");
-            // message.success('更新成功');
           }else {
             message.success('更新失败');
           }
@@ -471,7 +501,6 @@ export default {
         changeTagHot(record.id).then ((res) => {
           console.log("修改热点 结果 : ",res);
           if (res.status === 200) {
-            // message.success(res.message);
             console.log("更新成功");
           }else {
             record.isHot = false;
@@ -538,6 +567,13 @@ export default {
       getCourseListByTag();
     };
 
+    const handleOper = (record) => {
+      dialog({
+        content: "确认解绑该课程？",
+        ok: () => unbindCurrentTag(record)  // 修改为箭头函数，延迟执行
+      });
+    };
+
     // 解绑标签
     const unbindCurrentTag = async (record) => {
       try {
@@ -546,7 +582,7 @@ export default {
           if (res.status === 200) {
             message.success('解绑成功');
             getCourseListByTag();
-            getTagList(); // 刷新主列表
+            getTagList();
           }else {
             message.error('解绑失败1');
           }
@@ -559,10 +595,8 @@ export default {
     const exportTag = async () => {
       console.log("调用导出标签接口");
       try {
-        // 构建查询参数对象
         const params = {};
 
-        // 只有当参数存在且不为空时才添加到查询参数中
         if (state.searchParam.tagName) {
           params.tagName = state.searchParam.tagName;
         }
@@ -576,7 +610,6 @@ export default {
           params.orders = state.searchParam.order;
         }
 
-        // 构建查询字符串
         const queryString = new URLSearchParams(params).toString();
         const baseUrl = `${process.env.VUE_APP_BASE_API}/admin/courseTag/exportTag`;
         const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
@@ -587,7 +620,6 @@ export default {
       }
     };
 
-
     // 日期格式化
     const formatDate = (date) => {
       return date ? moment(date).format('YYYY-MM-DD') : '';
@@ -607,20 +639,13 @@ export default {
       handleRelTableChange,
       handlePublicChange,
       handleHotChange,
-      showCourseByTag,
       showCourseByTagg,
       closeCourseDialog,
       changeCoursePagination,
       unbindCurrentTag,
       formatDate,
       exportTag,
-      exportTagFile,
-      portalPageList,
-      changeTagPublic,
-      changeTagHot,
-      unbindCourseTagRelation,
-      searchTags,
-      createTag
+      handleOper
     };
   }
 };
@@ -632,11 +657,11 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-width: 1200px;
+  overflow-x: auto;
 
   .filter {
-    margin-left: 38px;
-    margin-right: 38px;
-    margin-top: 30px;
+    margin: 20px 2%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -644,24 +669,41 @@ export default {
     .filterItems {
       display: flex;
       flex-wrap: wrap;
+      width: 100%;
+      gap: 15px;
 
       .select {
-        margin-right: 20px;
-        margin-bottom: 20px;
+        flex: 1;
+        min-width: 200px;
+        max-width: 300px;
+
+        :deep(.ant-input),
+        :deep(.ant-select) {
+          width: 100%;
+          height: 30px;
+          border-radius: 8px;
+        }
       }
 
-      .btn {
-        padding: 0px 26px 0px 26px;
-        height: 38px;
+      .button-group {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        min-width: 300px;
+      }
+
+      .btn, .btnn {
+        padding: 0 20px;
+        height: 40px;
         background: #4ea6ff;
         border-radius: 8px;
         border: 1px solid rgba(64, 158, 255, 1);
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-right: 14px;
-        flex-shrink: 0;
         cursor: pointer;
+        white-space: nowrap;
+        min-width: 80px;
 
         .search {
           background-size: 100%;
@@ -671,33 +713,6 @@ export default {
           font-size: 14px;
           font-weight: 400;
           color: #fff;
-          line-height: 36px;
-          margin-left: 5px;
-        }
-      }
-
-      .btnn {
-        padding: 0px 26px 0px 26px;
-        height: 38px;
-        background: #4ea6ff;
-        border-radius: 8px;
-        border: 1px solid rgba(64, 158, 255, 1);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 14px;
-        flex-shrink: 0;
-        cursor: pointer;
-
-        .search {
-          background-size: 100%;
-        }
-
-        .btnText {
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 36px;
           margin-left: 5px;
         }
       }
@@ -718,29 +733,32 @@ export default {
         }
       }
 
-      .btn1:active {
-        background: #0982ff;
-      }
-
-      .btn2:active {
+      .btn1:active, .btn2:active {
         background: #0982ff;
       }
     }
   }
 
-  .tableBox {
-    margin: 20px 38px 30px;
+  .table-container {
+    flex: 1;
+    padding: 0 2%;
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
 
-    .ant-table-thead > tr > th {
-      background-color: #eff4fc;
-    }
-    th {
-      background-color: #eff4fc !important;
-      text-align: center !important;
+    :deep(.ant-table) {
+      flex: 1;
+
+      .ant-table-thead > tr > th {
+        background-color: #eff4fc;
+        text-align: center !important;
+        white-space: nowrap;
+      }
     }
   }
 
   .tableBox {
+    margin-top: 20px;
     padding-bottom: 20px;
 
     .pa {
@@ -749,29 +767,557 @@ export default {
       justify-content: center;
     }
   }
+
+  .course-link {
+    color: #4ea6ff;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .zero-count {
+    color: #999;
+  }
 }
 
-.courseDialog {
-  .ant-modal {
-    .ant-modal-body {
-      padding: 0;
+// 关联课程弹窗样式
+.course-dialog-content {
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
 
-      .modalHeader {
-        background: linear-gradient(
-                0deg,
-                rgba(78, 166, 255, 0) 0%,
-                rgba(78, 166, 255, 0.2) 100%
-        );
+  .course-table {
+    flex: 1;
+    min-height: 200px;
+    margin-bottom: 20px;
+
+    :deep(.ant-table) {
+      .ant-table-thead > tr > th {
+        background-color: #f0f7ff;
+        text-align: center !important;
+        white-space: nowrap;
+        font-weight: 600;
+        padding: 16px 8px;
       }
 
-      .modalMain {
-        padding: 20px;
+      .ant-table-tbody > tr > td {
+        text-align: center;
+        padding: 12px 8px;
+        vertical-align: top;
+      }
 
-        .tableBox {
-          margin: 20px 0 0 0;
+      .ant-table-placeholder {
+        .ant-table-cell {
+          padding: 40px 0;
+        }
+      }
+    }
+  }
+
+  .course-pagination {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    padding: 15px 0;
+  }
+
+  .unbind-btn {
+    color: #ff4d4f;
+
+    &:hover {
+      color: #ff7875;
+    }
+  }
+}
+
+// 自定义单元格样式
+.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: center;
+
+  // 每行显示15个汉字，2行显示30个字
+  max-width: 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;
+  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: center;
+
+  // 每行15个汉字，2行显示30个字
+  max-width: 240px;
+  margin: 0 auto;
+}
+
+/* 媒体查询适配不同分辨率 */
+@media (max-width: 1600px) {
+  .tagManage {
+    min-width: 1000px;
+
+    .filter {
+      .filterItems {
+        .select {
+          min-width: 180px;
+          max-width: 250px;
+        }
+      }
+    }
+  }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 13px;
+      }
+    }
+  }
+
+  .course-id-cell,
+  .course-name-cell,
+  .creator-cell,
+  .other-tags-cell {
+    font-size: 12px;
+    line-height: 1.3;
+  }
+}
+
+@media (max-width: 1400px) {
+  .tagManage {
+    min-width: 900px;
+
+    .filter {
+      margin: 15px 1%;
+
+      .filterItems {
+        gap: 10px;
+
+        .select {
+          min-width: 160px;
+          max-width: 220px;
+        }
+
+        .button-group {
+          min-width: 250px;
+        }
+      }
+    }
+
+    .table-container {
+      padding: 0 1%;
+    }
+  }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 12px;
+
+        .ant-table-thead > tr > th {
+          padding: 14px 6px;
+          font-size: 12px;
+        }
+
+        .ant-table-tbody > tr > td {
+          padding: 10px 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) {
+  .tagManage {
+    min-width: 800px;
+    font-size: 14px;
+
+    .filter {
+      .filterItems {
+        .btn, .btnn {
+          height: 36px;
+          padding: 0 15px;
+
+          .btnText {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+
+  .course-dialog-content {
+    min-height: 280px;
+
+    .course-table {
+      min-height: 180px;
+    }
+  }
+}
+
+/* 弹窗在小屏幕下的适配 */
+@media (max-width: 768px) {
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 12px;
+
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+          padding: 10px 4px;
+          font-size: 11px;
+        }
+      }
+    }
+
+    .course-pagination {
+      :deep(.ant-pagination) {
+        .ant-pagination-item,
+        .ant-pagination-prev,
+        .ant-pagination-next {
+          min-width: 28px;
+          height: 28px;
+          line-height: 26px;
+        }
+
+        .ant-pagination-item a {
+          padding: 0 6px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .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屏幕适配 */
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  .tagManage {
+    font-size: 15px;
+
+    .filter {
+      .filterItems {
+        .btn, .btnn {
+          .btnText {
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
+
+  .course-dialog-content {
+    .course-table {
+      :deep(.ant-table) {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .course-id-cell,
+  .course-name-cell,
+  .creator-cell,
+  .other-tags-cell {
+    font-size: 14px;
+  }
+}
+</style>
+
+<style lang="scss">
+// 全局弹窗样式调整 - 修改弹框标题栏背景色为蓝色
+.course-dialog {
+  .ant-modal {
+    top: 50px !important;
+
+    .ant-modal-content {
+      border-radius: 12px;
+      overflow: hidden;
+
+      .ant-modal-header {
+        background: #4ea6ff !important; // 修改为蓝色背景
+        border-bottom: 1px solid #4ea6ff;
+        padding: 16px 24px;
+
+        .ant-modal-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #fff !important; // 修改文字为白色
+        }
+      }
+
+      .ant-modal-body {
+        padding: 24px;
+        max-height: 70vh;
+        overflow-y: auto;
+      }
+
+      .ant-modal-close {
+        top: 12px;
+        right: 12px;
+
+        .ant-modal-close-x {
+          width: 44px;
+          height: 44px;
+          line-height: 44px;
+
+          .ant-modal-close-icon {
+            color: #fff !important; // 关闭按钮改为白色
+          }
+        }
+
+        &:hover {
+          .ant-modal-close-x {
+            .ant-modal-close-icon {
+              color: #f0f0f0 !important; // 鼠标悬停时浅灰色
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 弹窗内表格工具提示样式优化
+  .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;
+    }
+  }
+
+  // 确认框样式优化
+  .ant-popconfirm {
+    .ant-popconfirm-message {
+      .ant-popconfirm-message-title {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+
+    .ant-popconfirm-buttons {
+      button {
+        border-radius: 6px;
+        font-size: 13px;
+        height: 32px;
+        padding: 0 16px;
+
+        &.ant-btn-primary {
+          background: #ff4d4f;
+          border-color: #ff4d4f;
+
+          &:hover {
+            background: #ff7875;
+            border-color: #ff7875;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .ant-modal {
+      .ant-modal-content {
+        .ant-modal-body {
+          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;
+      }
+    }
+
+    .ant-popconfirm {
+      .ant-popconfirm-message {
+        .ant-popconfirm-message-title {
+          font-size: 13px;
+        }
+      }
+
+      .ant-popconfirm-buttons {
+        button {
+          height: 28px;
+          padding: 0 12px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  @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;
+      }
+    }
+  }
+}
+
+// 空状态样式优化
+.course-dialog {
+  .ant-table-placeholder {
+    .ant-empty {
+      .ant-empty-image {
+        height: 80px;
+
+        svg {
+          width: 80px;
+          height: 80px;
+        }
+      }
+
+      .ant-empty-description {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

From 2dd62b0422fee0208f2b9d6696f28d75d99c5045 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Sun, 2 Nov 2025 15:30:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tag/TagManage.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/views/tag/TagManage.vue b/src/views/tag/TagManage.vue
index 6c2a8744..678dcc05 100644
--- a/src/views/tag/TagManage.vue
+++ b/src/views/tag/TagManage.vue
@@ -161,7 +161,7 @@
             <!-- 关联课程名称 -->
             <template v-else-if="column.key === 'courseName'">
               <a-tooltip placement="topLeft" :title="record.courseName">
-                <div class="course-name-cell">
+                <div class="course-name-cell ellipsis">
                   {{ record.courseName }}
                 </div>
               </a-tooltip>
@@ -860,6 +860,12 @@ export default {
   // 每行显示15个汉字，2行显示30个字
   max-width: 240px;
   margin: 0 auto;
+
+  &.ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 
 .creator-cell {
@@ -892,6 +898,12 @@ export default {
   // 每行15个汉字，2行显示30个字
   max-width: 240px;
   margin: 0 auto;
+
+  &.ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 
 /* 媒体查询适配不同分辨率 */