From 74c937517e38e0447308892e742084b538291ba9 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Sat, 1 Nov 2025 10:54:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E7=BB=86=E8=8A=82=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 | 404 +++++++++---------------------------
 1 file changed, 102 insertions(+), 302 deletions(-)

diff --git a/src/views/tag/TagManage.vue b/src/views/tag/TagManage.vue
index b487dc62..91522bbd 100644
--- a/src/views/tag/TagManage.vue
+++ b/src/views/tag/TagManage.vue
@@ -194,13 +194,15 @@
 <script>
 import { reactive, toRefs, ref } from "vue";
 import { message, Tooltip, Modal } 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";
 
 export default {
   name: "TagManage",
   components: {
-    ATooltip: Tooltip
+    ATooltip: Tooltip,
+    ExclamationCircleOutlined
   },
   setup() {
     const state = reactive({
@@ -538,7 +540,8 @@ export default {
     // 解绑确认弹框
     const handleUnbindConfirm = (record) => {
       Modal.confirm({
-        title: '操作确认',
+        title: '提示',
+        icon: () => h(ExclamationCircleOutlined, { style: { color: '#1890ff' } }),
         content: '确认解绑该课程？',
         okText: '确定',
         cancelText: '取消',
@@ -1090,31 +1093,106 @@ export default {
 </style>
 
 <style lang="scss">
-// 全局弹窗样式调整
-.course-dialog {
+// 解绑确认弹框样式 - 根据图片样式定制
+.unbind-confirm-modal {
   .ant-modal {
-    top: 50px !important;
-
     .ant-modal-content {
-      border-radius: 12px;
-      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      background: #fff;
 
       .ant-modal-header {
-        background: linear-gradient(0deg, rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100%);
-        border-bottom: 1px solid #e8f4ff;
+        background: #fff;
+        border-bottom: 1px solid #f0f0f0;
         padding: 16px 24px;
+        border-radius: 8px 8px 0 0;
 
         .ant-modal-title {
           font-size: 16px;
           font-weight: 600;
-          color: #1890ff;
+          color: #333;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .anticon {
+            color: #1890ff;
+            font-size: 18px;
+          }
         }
       }
 
       .ant-modal-body {
         padding: 24px;
-        max-height: 70vh;
-        overflow-y: auto;
+        font-size: 14px;
+        color: #666;
+        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 {
@@ -1129,260 +1207,6 @@ 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 {
-        .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;
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    .ant-modal {
-      width: 95% !important;
-      max-width: none !important;
-
-      .ant-modal-content {
-        .ant-modal-body {
-          padding: 12px;
-          max-height: 50vh;
-        }
-      }
-    }
-  }
-}
-
-// 解绑确认弹框样式 - 参考CourseRecommended.vue样式
-.unbind-confirm-modal {
-  .ant-modal {
-    .ant-modal-content {
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
-      .ant-modal-header {
-        background: #fafafa;
-        border-bottom: 1px solid #e8e8e8;
-        padding: 16px 24px;
-        border-radius: 8px 8px 0 0;
-
-        .ant-modal-title {
-          font-size: 16px;
-          font-weight: 600;
-          color: #333;
-        }
-      }
-
-      .ant-modal-body {
-        padding: 24px;
-        font-size: 14px;
-        color: #666;
-        line-height: 1.5;
-
-        .ant-modal-confirm-body {
-          display: flex;
-          align-items: flex-start;
-
-          .ant-modal-confirm-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 8px;
-          }
-
-          .ant-modal-confirm-content {
-            margin-left: 0;
-            margin-top: 0;
-            color: #666;
-          }
-        }
-      }
-
-      .ant-modal-footer {
-        padding: 10px 24px 24px;
-        border-top: 1px solid #e8e8e8;
-        text-align: right;
-
-        .ant-btn {
-          height: 32px;
-          padding: 0 16px;
-          border-radius: 6px;
-          font-size: 14px;
-          margin-left: 8px;
-
-          &.ant-btn-default {
-            border: 1px solid #d9d9d9;
-            color: #333;
-
-            &:hover {
-              border-color: #4ea6ff;
-              color: #4ea6ff;
-            }
-          }
-
-          &.ant-btn-primary {
-            background: #4ea6ff;
-            border-color: #4ea6ff;
-
-            &:hover {
-              background: #388be1;
-              border-color: #388be1;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 表格滚动条样式优化
-.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;
-      }
-    }
-  }
-}
-
-// 确认框样式优化
-.ant-modal-confirm {
-  .ant-modal-body {
-    padding: 24px !important;
-
-    .ant-modal-confirm-body-wrapper {
-      .ant-modal-confirm-body {
-        .anticon {
-          margin-top: 4px;
-          color: #faad14;
-          font-size: 22px;
-        }
-
-        .ant-modal-confirm-title {
-          font-size: 16px;
-          font-weight: 600;
-          color: #333;
-        }
-
-        .ant-modal-confirm-content {
-          margin-left: 38px;
-          color: #666;
-          font-size: 14px;
-          line-height: 1.5;
-        }
-      }
-
-      .ant-modal-confirm-btns {
-        margin-top: 24px;
-        text-align: right;
-
-        .ant-btn {
-          height: 32px;
-          padding: 0 16px;
-          border-radius: 6px;
-          font-size: 14px;
-          margin-left: 8px;
-
-          &.ant-btn-default {
-            border: 1px solid #d9d9d9;
-            color: #333;
-
-            &:hover {
-              border-color: #4ea6ff;
-              color: #4ea6ff;
-            }
-          }
-
-          &.ant-btn-primary {
-            background: #4ea6ff;
-            border-color: #4ea6ff;
-
-            &:hover {
-              background: #388be1;
-              border-color: #388be1;
-            }
-          }
-        }
-      }
-    }
-  }
 }
 
 // 响应式适配
@@ -1391,26 +1215,27 @@ export default {
     .ant-modal {
       .ant-modal-content {
         margin: 20px;
-        width: auto !important;
+
+        .ant-modal-header {
+          padding: 12px 16px;
+
+          .ant-modal-title {
+            font-size: 14px;
+          }
+        }
 
         .ant-modal-body {
-          padding: 16px !important;
+          padding: 16px;
 
           .ant-modal-confirm-body-wrapper {
-            .ant-modal-confirm-body {
-              .ant-modal-confirm-content {
-                margin-left: 32px;
-                font-size: 13px;
-              }
-            }
-
             .ant-modal-confirm-btns {
               margin-top: 20px;
 
               .ant-btn {
                 height: 28px;
-                padding: 0 12px;
+                padding: 0 16px;
                 font-size: 13px;
+                min-width: 70px;
               }
             }
           }
@@ -1418,30 +1243,5 @@ export default {
       }
     }
   }
-
-  .ant-modal-confirm {
-    .ant-modal-body {
-      padding: 16px !important;
-
-      .ant-modal-confirm-body-wrapper {
-        .ant-modal-confirm-body {
-          .ant-modal-confirm-content {
-            margin-left: 32px;
-            font-size: 13px;
-          }
-        }
-
-        .ant-modal-confirm-btns {
-          margin-top: 20px;
-
-          .ant-btn {
-            height: 28px;
-            padding: 0 12px;
-            font-size: 13px;
-          }
-        }
-      }
-    }
-  }
 }
 </style>
\ No newline at end of file