feat: 添加清除当前用户的所有消息按钮

yuan

14 小时以前 31e43b73379326df5d0d06dcc37ef5049a34f0f1

 src/layout/components/NotificationCenter/index.vue

@@ -2,12 +2,20 @@
  <div class="notification-popover-content">
    <div class="popover-header">
      <span class="popover-title">消息通知</span>
      <el-button type="primary"
                 size="small"
                 @click="handleMarkAllAsRead"
                 :disabled="unreadCount === 0">
        一键已读
      </el-button>
      <div class="popover-actions">
        <el-button type="primary"
                   size="small"
                   @click="handleMarkAllAsRead"
                   :disabled="unreadCount === 0">
          一键已读
        </el-button>
        <el-button type="danger"
                   size="small"
                   plain
                   @click="handleClearAll">
          清除
        </el-button>
      </div>
    </div>
    <div class="notification-content">
      <el-tabs v-model="activeTab"
@@ -91,10 +99,11 @@
    listMessage,
    markAsRead,
    markAllAsRead,
    clearAllMessage,
    confirmMessage,
    getUnreadCount,
  } from "@/api/system/message";
  import { ElMessage } from "element-plus";
  import { ElMessage, ElMessageBox } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { useRouter } from "vue-router";

@@ -221,6 +230,35 @@
    }
  };

  // 清除全部消息
  const handleClearAll = async () => {
    try {
      await ElMessageBox.confirm("确认清除全部消息吗？清除后无法恢复。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    } catch (error) {
      // 取消清除
      return;
    }
    try {
      const res = await clearAllMessage();
      if (res.code === 200) {
        ElMessage.success("清除成功");
        unreadList.value = [];
        readList.value = [];
        total.value = 0;
        pageNum.value = 1;
        loadMessages();
        loadUnreadCount();
      }
    } catch (error) {
      console.error("清除消息失败:", error);
      ElMessage.error("清除失败");
    }
  };

  // 分页大小改变
  const handleSizeChange = size => {
    pageSize.value = size;
@@ -255,6 +293,7 @@
    flex-direction: column;
    width: 500px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .popover-header {
@@ -264,12 +303,17 @@
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    border-bottom: 1px solid var(--surface-border);

    .popover-title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
      color: var(--text-primary);
    }

    .popover-actions {
      display: flex;
      align-items: center;
    }
  }

@@ -315,11 +359,11 @@
    .notification-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      transition: background-color 0.3s;

      &:hover {
        background-color: #f5f7fa;
        background-color: #f8fbff;
      }

      &.read {
@@ -333,7 +377,7 @@
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f9ff;
        background-color: rgba(59, 130, 246, 0.12);
        border-radius: 50%;
        margin-right: 12px;
      }
@@ -345,13 +389,13 @@
        .notification-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          color: var(--text-primary);
          margin-bottom: 8px;
        }

        .notification-detail {
          font-size: 13px;
          color: #606266;
          color: var(--text-secondary);
          line-height: 1.5;
          margin-bottom: 8px;
          word-break: break-all;
@@ -359,7 +403,7 @@

        .notification-time {
          font-size: 12px;
          color: #909399;
          color: var(--text-tertiary);
        }
      }

@@ -375,7 +419,7 @@
  .pagination-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    border-top: 1px solid var(--surface-border);
    display: flex;
    justify-content: center;
    padding-left: 0;