d8d-message-notifier

一个用于显示消息和通知的 React 组件库。

安装

npm install d8d-message-notifier

使用

import React from "react";
import { MessageCenter } from "d8d-message-notifier";
import "d8d-message-notifier/dist/d8d-message-notifier.min.css";

const App = () => {
  const apiConfig = {
    baseUrl: "https://your-api-base-url.com",
    searchPath: "/messages/search",
    editPath: "/messages/edit",
    addPath: "/messages/add",
    deletePath: "/messages/delete",
  };

  const customFieldMapping = {
    id: "_id",
    title: "标题",
    content: "消息内容",
    read: "是否已读",
    deleted: "是否删除",
    createdAt: "_create",
    updatedAt: "_update",
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <MessageCenter
        apiConfig={apiConfig}
        fieldMapping={customFieldMapping}
        showAddButton={true}
        onNewMessages={(newMessages) => {
          console.log("新消息", newMessages);
        }}
        displayMode="popup"
      />
    </div>
  );
};

export default App;

API

组件

• MessageCenter: 主要组件,用于显示消息中心
• MessageList: 显示消息列表的组件
• MessageNotification: 显示单条消息通知的组件

配置

ApiConfig

• baseUrl: API 的基础 URL
• searchPath: 搜索消息的路径
• editPath: 编辑消息的路径
• addPath: 添加消息的路径
• deletePath: 删除消息的路径

FieldMapping

用于自定义 API 返回的字段名称映射:

• id: 消息 ID 字段名
• title: 标题字段名
• content: 内容字段名
• read: 是否已读字段名
• deleted: 是否删除字段名
• createdAt: 创建时间字段名
• updatedAt: 更新时间字段名

属性

MessageCenter 组件接受以下属性:

• apiConfig: (必需) API 配置对象
• fieldMapping: (可选) 字段映射对象
• showAddButton: (可选) 是否显示添加消息按钮,默认为 true
• onNewMessages: (可选) 接收新消息时的回调函数
• displayMode: (可选) 显示模式,可选值为 "fullPage" 或 "popup",默认为 "fullPage"

功能

• 显示消息列表
• 标记消息为已读
• 删除消息
• 添加新消息
• 自动刷新消息列表
• 桌面通知支持
• 支持全页面和弹出窗口两种显示模式

许可证

MIT