zhaoshang_client_ui/src/utils/app-message.ts

/**
 * 全局轻提示（顶部居中、过一会儿自动消失）。
 *
 * 用 **Ant Design Vue 的 `message`**（本项目已依赖 ant-design-vue 4.x，CSS-in-JS 自带样式）
 * —— 就是设计稿那种「粉底 + 红色感叹号的小条」。
 *
 * 再包一层是为了统一时长与默认类型，调用方不必到处 import antd，
 * 将来换实现也只改这一个文件。
 */

import { message } from "ant-design-vue";

export type AppMessageType = "error" | "warning" | "success" | "info";

/** 自动消失时间（秒）。AntD 默认 3s，这里显式写出来便于统一调整 */
export const APP_MESSAGE_DURATION = 2;

/**
 * 弹一条轻提示。`text` 为空时什么都不做（避免弹出一个空气泡）。
 * 默认 `error`（红）：现有调用点都是「这事没成」。
 */
export const showAppMessage = (text: string, type: AppMessageType = "error"): void => {
  const content = String(text ?? "").trim();
  if (!content) return;

  const api = message as unknown as Record<
    AppMessageType,
    (c: string, d: number) => void | Promise<unknown>
  >;
  try {
    // ⚠️ antd 的 message 返回 Promise（挂载/更新是异步的）——失败要吞掉，
    // 否则会变成 unhandled rejection（提示失败不该反过来影响业务）
    void Promise.resolve(api[type](content, APP_MESSAGE_DURATION)).catch((err) => {
      /* console.warn("[app-message] 弹出提示失败：", (err as Error)?.message || err); */
    });
  } catch (err) {
    /* console.warn("[app-message] 弹出提示失败：", (err as Error)?.message || err); */
  }
};

/** 关掉当前所有轻提示（切会话等场景要清场时用） */
export const clearAppMessages = (): void => {
  message.destroy();
};