自适应调试其他细节调整

src/views/tag/TagManage.vue

@@ -169,7 +169,21 @@
 
             <!-- 操作列 -->
             <template v-else-if="column.key === 'operation'">
-              <a-button type="link" @click="() => handleUnbindConfirm(record)" class="unbind-btn">解绑</a-button>
+<!--              <a-popconfirm
+                  title="确认解绑该课程？"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="unbindCurrentTag(record)"
+              >
+                <a-button type="link" class="unbind-btn">解绑</a-button>
+              </a-popconfirm>-->
+              <a-space :key="record.id">
+                <a-button @click="() => handleOper(record)"
+                          type="link"
+                >
+                  解绑
+                </a-button>
+              </a-space>
             </template>
           </template>
         </a-table>
@@ -192,17 +206,17 @@
 </template>
 
 <script>
-import {reactive, toRefs, ref, h} from "vue";
+import { reactive, toRefs, ref } from "vue";
-import { message, Tooltip, Modal } from "ant-design-vue";
+import { message, Tooltip, Popconfirm } from "ant-design-vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-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,
-    ExclamationCircleOutlined
+    // APopconfirm: Popconfirm
   },
   setup() {
     const state = reactive({
@@ -252,7 +266,7 @@ export default {
         title: "已关联课程",
         dataIndex: "useCount",
         key: "useCount",
-        width: 150,
+        width: 120,
         align: "center",
         sorter: true
       },
@@ -414,6 +428,7 @@ export default {
       getTagList();
     };
 
+
     // 表格排序变化
     const handleTableChange = (pagination, filters, sorter) => {
       if (sorter.field === 'useCount') {
@@ -537,20 +552,8 @@ export default {
       getCourseListByTag();
     };
 
-    // 解绑确认弹框
+    const handleOper = (record) => {
-    const handleUnbindConfirm = (record) => {
+      dialog({content: "确认解绑该课程？", ok: unbindCurrentTag(record)});
-      Modal.confirm({
-        title: '提示',
-        icon: () => h(ExclamationCircleOutlined, { style: { color: '#1890ff' } }),
-        content: '确认解绑该课程？',
-        okText: '确定',
-        cancelText: '取消',
-        centered: true,
-        wrapClassName: 'unbind-confirm-modal',
-        onOk: async () => {
-          await unbindCurrentTag(record);
-        }
-      });
     };
 
     // 解绑标签
@@ -621,10 +624,10 @@ export default {
       showCourseByTagg,
       closeCourseDialog,
       changeCoursePagination,
-      handleUnbindConfirm,
       unbindCurrentTag,
       formatDate,
-      exportTag
+      exportTag,
+      handleOper
     };
   }
 };
@@ -991,208 +994,138 @@ export default {
   .course-dialog-content {
     min-height: 280px;
 
-    .course-table {
+    .course-dialog-content {
-      min-height: 180px;
+      min-height: 280px;
-    }
-  }
-}
 
-/* 弹窗在小屏幕下的适配 */
+      .course-table {
-@media (max-width: 768px) {
+        min-height: 180px;
-  .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;
+  @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-id-cell {
+      .course-pagination {
-    font-size: 10px;
+        :deep(.ant-pagination) {
-    max-width: 120px;
+          .ant-pagination-item,
-    line-height: 1.2;
+          .ant-pagination-prev,
-    max-height: 2.4em;
+          .ant-pagination-next {
-  }
+            min-width: 28px;
+            height: 28px;
+            line-height: 26px;
+          }
 
-  .course-name-cell {
+          .ant-pagination-item a {
-    max-width: 150px;
+            padding: 0 6px;
-    font-size: 11px;
+            font-size: 12px;
-    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-id-cell {
-    .course-table {
+      font-size: 10px;
-      :deep(.ant-table) {
+      max-width: 120px;
-        font-size: 14px;
+      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;
     }
   }
 
-  .course-id-cell,
+  /* 高DPI屏幕适配 */
-  .course-name-cell,
+  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  .creator-cell,
+    .tagManage {
-  .other-tags-cell {
+      font-size: 15px;
-    font-size: 14px;
+
+      .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">
-// 解绑确认弹框样式 - 根据图片样式定制
+// 全局弹窗样式调整
-.unbind-confirm-modal {
+.course-dialog {
   .ant-modal {
+    top: 50px !important;
+
     .ant-modal-content {
-      border-radius: 8px;
+      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
-      background: #fff;
 
       .ant-modal-header {
-        background: #fff;
+        background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%);
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid #e8f4ff;
         padding: 16px 24px;
-        border-radius: 8px 8px 0 0;
 
         .ant-modal-title {
           font-size: 16px;
           font-weight: 600;
-          color: #333;
+          color: #1890ff;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .anticon {
-            color: #1890ff;
-            font-size: 18px;
-          }
         }
       }
 
       .ant-modal-body {
         padding: 24px;
-        font-size: 14px;
+        max-height: 70vh;
-        color: #666;
+        overflow-y: auto;
-        line-height: 1.5;
-        text-align: center;
-
-        .ant-modal-confirm-body-wrapper {
-          .ant-modal-confirm-body {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 16px;
-
-            .anticon {
-              color: #1890ff;
-              font-size: 22px;
-              margin: 0;
-            }
-
-            .ant-modal-confirm-title {
-              font-size: 16px;
-              font-weight: 600;
-              color: #333;
-              margin: 0;
-            }
-
-            .ant-modal-confirm-content {
-              margin: 0;
-              color: #666;
-              font-size: 14px;
-              line-height: 1.5;
-            }
-          }
-
-          .ant-modal-confirm-btns {
-            margin-top: 24px;
-            text-align: center;
-
-            .ant-btn {
-              height: 32px;
-              padding: 0 20px;
-              border-radius: 6px;
-              font-size: 14px;
-              margin: 0 8px;
-              min-width: 80px;
-
-              &.ant-btn-default {
-                border: 1px solid #1890ff;
-                color: #1890ff;
-                background: #fff;
-
-                &:hover {
-                  border-color: #40a9ff;
-                  color: #40a9ff;
-                  background: #f5f5f5;
-                }
-              }
-
-              &.ant-btn-primary {
-                background: #1890ff;
-                border-color: #1890ff;
-
-                &:hover {
-                  background: #40a9ff;
-                  border-color: #40a9ff;
-                }
-              }
-            }
-          }
-        }
       }
 
       .ant-modal-close {
@@ -1207,14 +1140,55 @@ export default {
       }
     }
   }
-}
 
-// 响应式适配
+  // 弹窗内表格工具提示样式优化
-@media (max-width: 768px) {
+  .ant-tooltip {
-  .unbind-confirm-modal {
+    .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 {
-        margin: 20px;
+        .ant-modal-body {
+          padding: 16px;
+          max-height: 60vh;
+        }
 
         .ant-modal-header {
           padding: 12px 16px;
@@ -1223,25 +1197,102 @@ export default {
             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: 16px;
+          padding: 12px;
-
+          max-height: 50vh;
-          .ant-modal-confirm-body-wrapper {
-            .ant-modal-confirm-btns {
-              margin-top: 20px;
-
-              .ant-btn {
-                height: 28px;
-                padding: 0 16px;
-                font-size: 13px;
-                min-width: 70px;
-              }
-            }
-          }
         }
       }
     }
   }
 }
+
+// 表格滚动条样式优化
+.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>