feat: 添加 message 消息提示函数，兼容 Element Plus 和 Ant Design 两种 Message 风格

2025-11-03 13:44:47 +08:00 · 2022-11-27 16:14:55 +08:00
parent 667ef918fc
commit 33bd64d9ff
22 changed files with 381 additions and 45 deletions
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { h } from "vue";
+import hot from "@/assets/svg/hot.svg?component";
+import { message, closeAllMessage } from "@/utils/message";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "Message"
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> Message提示 </span>
+      </div>
+    </template>
+
+    <h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
+
+    <el-space>
+      <el-button
+        type="info"
+        @click="message('Info类型消息', { customClass: 'el' })"
+      >
+        Info
+      </el-button>
+      <el-button
+        type="success"
+        @click="
+          message('Success类型消息', { customClass: 'el', type: 'success' })
+        "
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="
+          message('Warning类型消息', { customClass: 'el', type: 'warning' })
+        "
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { customClass: 'el', type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button
+        @click="message('可关闭消息', { customClass: 'el', showClose: true })"
+      >
+        可关闭
+      </el-button>
+      <el-button
+        @click="
+          message('分组消息合并', {
+            customClass: 'el',
+            type: 'success',
+            grouping: true
+          })
+        "
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            customClass: 'el',
+            icon: useRenderIcon('check')
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            customClass: 'el',
+            duration: 3000,
+            onClose: () =>
+              message('消息已关闭', { customClass: 'el', type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ]),
+            { customClass: 'el' }
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            customClass: 'el',
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <h4 class="mb-4">
+      类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
+      样式改版，不会影响 ElMessage
+      原本样式，使用和打包大小成本极低并适配暗黑模式）
+    </h4>
+
+    <el-space>
+      <el-button type="info" @click="message('Info类型消息')">Info</el-button>
+      <el-button
+        type="success"
+        @click="message('Success类型消息', { type: 'success' })"
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="message('Warning类型消息', { type: 'warning' })"
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button @click="message('可关闭消息', { showClose: true })">
+        可关闭
+      </el-button>
+      <el-button
+        @click="message('分组消息合并', { type: 'success', grouping: true })"
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            icon: hot
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            duration: 3000,
+            onClose: () => message('消息已关闭', { type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
+  </el-card>
+</template>
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -26,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
    if (valid) {
      // 模拟登录请求，需根据实际开发进行修改
      setTimeout(() => {
-        message(transformI18n($t("login.loginSuccess")), "success");
+        message(transformI18n($t("login.loginSuccess")), { type: "success" });
        loading.value = false;
      }, 2000);
    } else {
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@@ -45,12 +45,14 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
      if (checked.value) {
        // 模拟请求，需根据实际开发进行修改
        setTimeout(() => {
-          message(transformI18n($t("login.registerSuccess")), "success");
+          message(transformI18n($t("login.registerSuccess")), {
+            type: "success"
+          });
          loading.value = false;
        }, 2000);
      } else {
        loading.value = false;
-        message(transformI18n($t("login.tickPrivacy")), "warning");
+        message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
      }
    } else {
      loading.value = false;
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@@ -42,7 +42,9 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
    if (valid) {
      // 模拟请求，需根据实际开发进行修改
      setTimeout(() => {
-        message(transformI18n($t("login.passwordUpdateReg")), "success");
+        message(transformI18n($t("login.passwordUpdateReg")), {
+          type: "success"
+        });
        loading.value = false;
      }, 2000);
    } else {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -73,7 +73,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
            // 获取后端路由
            initRouter().then(() => {
              router.push("/");
-              message("登录成功", "success");
+              message("登录成功", { type: "success" });
            });
          }
        });
--- a/src/views/pure-table/base/column-template/columns.tsx
+++ b/src/views/pure-table/base/column-template/columns.tsx
@@ -56,14 +56,13 @@ export function useColumns() {
  ];

  const handleEdit = (index: number, row) => {
-    message(
-      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
-      "success"
-    );
+    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
  };

  const handleDelete = (index: number, row) => {
-    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
  };

  return {
--- a/src/views/pure-table/base/header-renderer/columns.tsx
+++ b/src/views/pure-table/base/header-renderer/columns.tsx
@@ -15,14 +15,13 @@ export function useColumns() {
  );

  const handleEdit = (index: number, row) => {
-    message(
-      `您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
-      "success"
-    );
+    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
  };

  const handleDelete = (index: number, row) => {
-    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
  };

  const columns: TableColumnList = [
--- a/src/views/pure-table/high.vue
+++ b/src/views/pure-table/high.vue
@@ -68,4 +68,15 @@ function tabClick({ index }) {
 :deep(.el-alert__title) {
  font-size: 16px;
 }
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
 </style>
--- a/src/views/pure-table/high/contextmenu/columns.tsx
+++ b/src/views/pure-table/high/contextmenu/columns.tsx
@@ -37,7 +37,9 @@ export function useColumns() {
            `您编辑了第 ${
              dataList.value.findIndex(v => v.id === row.id) + 1
            } 行，数据为：${JSON.stringify(row)}`,
-            "success"
+            {
+              type: "success"
+            }
          )
      }
    ]
--- a/src/views/pure-table/high/echarts/columns.tsx
+++ b/src/views/pure-table/high/echarts/columns.tsx
@@ -78,7 +78,9 @@ export function useColumns() {
        callback: ({ data: { name, value } }) => {
          message(
            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
-            "success"
+            {
+              type: "success"
+            }
          );
        }
      }
--- a/src/views/pure-table/high/edit/columns.tsx
+++ b/src/views/pure-table/high/edit/columns.tsx
@@ -113,7 +113,9 @@ export function useColumns() {
      `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
        dataList.value[index]
      )}`,
-      "success"
+      {
+        type: "success"
+      }
    );
    // 编辑状态关闭
    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
--- a/src/views/pure-table/high/execl/columns.tsx
+++ b/src/views/pure-table/high/execl/columns.tsx
@@ -39,7 +39,9 @@ export function useColumns() {
    const workBook = utils.book_new();
    utils.book_append_sheet(workBook, workSheet, "数据报表");
    writeFile(workBook, "pure-admin-table.xlsx");
-    message("导出成功", "success");
+    message("导出成功", {
+      type: "success"
+    });
  };

  return {
--- a/src/views/pure-table/index.vue
+++ b/src/views/pure-table/index.vue
@@ -62,4 +62,15 @@ defineOptions({
 :deep(.el-alert__title) {
  font-size: 16px;
 }
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
 </style>
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@@ -113,7 +113,9 @@ export function useColumns() {
              loading: false
            }
          );
-          message("已成功修改角色状态", "success");
+          message("已成功修改角色状态", {
+            type: "success"
+          });
        }, 300);
      })
      .catch(() => {
--- a/src/views/system/user/columns.tsx
+++ b/src/views/system/user/columns.tsx
@@ -118,7 +118,9 @@ export function useColumns() {
              loading: false
            }
          );
-          message("已成功修改用户状态", "success");
+          message("已成功修改用户状态", {
+            type: "success"
+          });
        }, 300);
      })
      .catch(() => {