feat: notice manager (#1131)

Reviewed-on: daoyoucloud/tachybase#1131

packages/core/client/src/application/Application.tsx

@@ -18,6 +18,7 @@ import { CSSVariableProvider } from '../style/css-variable';
 import { AntdAppProvider, GlobalThemeProvider } from '../style/theme';
 import { AppSchemaComponentProvider } from './AppSchemaComponentProvider';
 import { AppComponent, BlankComponent, defaultAppComponents } from './components';
+import { NoticeManager } from './NoticesManager';
 import type { Plugin } from './Plugin';
 import { PluginManager, PluginType } from './PluginManager';
 import { PluginSettingOptions, PluginSettingsManager } from './PluginSettingsManager';
@@ -79,6 +80,7 @@ export class Application {
   public schemaInitializerManager: SchemaInitializerManager;
   public schemaSettingsManager: SchemaSettingsManager;
   public dataSourceManager: DataSourceManager;
+  public noticeManager: NoticeManager;
 
   public name: string;
 
@@ -117,11 +119,11 @@ export class Application {
     this.pluginManager = new PluginManager(options.plugins, options.loadRemotePlugins, this);
     this.schemaInitializerManager = new SchemaInitializerManager(options.schemaInitializers, this);
     this.dataSourceManager = new DataSourceManager(options.dataSourceManager, this);
+    this.noticeManager = new NoticeManager(this);
     this.addDefaultProviders();
     this.addReactRouterComponents();
     this.addProviders(options.providers || []);
-    this.ws = new WebSocketClient(options.ws);
-    this.ws.app = this;
+    this.ws = new WebSocketClient(options.ws, this);
     this.pluginSettingsManager = new PluginSettingsManager(options.pluginSettings, this);
     this.addRoutes();
     this.name = this.options.name || getSubAppName(options.publicPath) || 'main';
@@ -231,6 +233,9 @@ export class Application {
         this.notification[data.payload?.type || 'info']({ message: data.payload?.message });
         return;
       }
+      if (data.type === 'notice') {
+        this.noticeManager.on(data.payload);
+      }
       const maintaining = data.type === 'maintaining' && data.payload.code !== 'APP_RUNNING';
       if (maintaining) {
         this.maintaining = true;

packages/core/client/src/application/NoticesManager.tsx

@@ -0,0 +1,67 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+import { message, notification } from 'antd';
+
+import { Application } from './Application';
+import { useApp } from './hooks';
+import { WebSocketClient } from './WebSocketClient';
+
+export const enum NoticeLevel {
+  INFO = 'info',
+  WARNING = 'warning',
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+
+export const enum NoticeType {
+  STATUS = 'status',
+  TOAST = 'toast',
+  NOTIFICATION = 'notification',
+}
+
+export interface NoticeManagerContextProps {
+  manager: NoticeManager;
+}
+
+export const NoticeManagerContext = createContext<NoticeManagerContextProps>(null);
+
+export const NoticeManagerProvider = ({ children }: { children: ReactNode }) => {
+  const app = useApp();
+  return (
+    <NoticeManagerContext.Provider value={{ manager: app.noticeManager }}>{children}</NoticeManagerContext.Provider>
+  );
+};
+
+export const useNoticeManager = () => {
+  return useContext(NoticeManagerContext);
+};
+
+export class NoticeManager {
+  private ws: WebSocketClient;
+  constructor(private app: Application) {
+    this.ws = app.ws;
+  }
+
+  on(data: { type: NoticeType; title?: string; content: string; level: NoticeLevel }) {
+    if (data.type === NoticeType.NOTIFICATION) {
+      this[data.type](data.title, data.content, data.level);
+    } else {
+      this[data.type](data.content, data.level);
+    }
+  }
+
+  status(content: string, level: NoticeLevel) {
+    // 常驻消息
+  }
+
+  toast(content: string, level: NoticeLevel) {
+    message[level](content);
+  }
+
+  notification(title: string, content: string, level: NoticeLevel) {
+    notification[level]({
+      message: title,
+      description: content,
+    });
+  }
+}

packages/core/client/src/application/WebSocketClient.ts

@@ -18,13 +18,15 @@ export class WebSocketClient {
   protected _reconnectTimes = 0;
   protected events = [];
   protected options: WebSocketClientOptions;
-  app: Application;
   enabled: boolean;
   connected = false;
   serverDown = false;
   lastMessage = {};
 
-  constructor(options: WebSocketClientOptions | boolean) {
+  constructor(
+    options: WebSocketClientOptions | boolean,
+    private app: Application,
+  ) {
     if (!options) {
       this.enabled = false;
       return;

packages/core/client/src/schema-component/antd/action/Action.Area.style.ts

@@ -2,7 +2,6 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => {
   return css`
-    padding-top: ${token.paddingContentVerticalLG}px;
-    background-color: var(--colorBgDrawer);
+    padding-top: ${token.padding}px;
   `;
 });

packages/core/data-source-manager/src/data-source-manager.ts

@@ -1,4 +1,5 @@
 import { ToposortOptions } from '@tachybase/utils';
+
 import { DataSource } from './data-source';
 import { DataSourceFactory } from './data-source-factory';
 
@@ -35,7 +36,6 @@ export class DataSourceManager {
         }
       }
       await next();
-      console.log('next....');
     };
   }
 }