From 58248c6ba5d6dbbc88c2227e5f93c99bafceeb41 Mon Sep 17 00:00:00 2001 From: sealday Date: Thu, 6 Jun 2024 11:49:04 +0800 Subject: [PATCH] feat: notice manager (#1131) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1131 --- .../client/src/application/Application.tsx | 9 ++- .../client/src/application/NoticesManager.tsx | 67 +++++++++++++++++++ .../client/src/application/WebSocketClient.ts | 6 +- .../antd/action/Action.Area.style.ts | 3 +- .../src/data-source-manager.ts | 2 +- 5 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 packages/core/client/src/application/NoticesManager.tsx diff --git a/packages/core/client/src/application/Application.tsx b/packages/core/client/src/application/Application.tsx index 3cccb954e..e8dbf4ac3 100644 --- a/packages/core/client/src/application/Application.tsx +++ b/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; diff --git a/packages/core/client/src/application/NoticesManager.tsx b/packages/core/client/src/application/NoticesManager.tsx new file mode 100644 index 000000000..35721a2e2 --- /dev/null +++ b/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(null); + +export const NoticeManagerProvider = ({ children }: { children: ReactNode }) => { + const app = useApp(); + return ( + {children} + ); +}; + +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, + }); + } +} diff --git a/packages/core/client/src/application/WebSocketClient.ts b/packages/core/client/src/application/WebSocketClient.ts index a7cbe5126..cc18142d6 100644 --- a/packages/core/client/src/application/WebSocketClient.ts +++ b/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; diff --git a/packages/core/client/src/schema-component/antd/action/Action.Area.style.ts b/packages/core/client/src/schema-component/antd/action/Action.Area.style.ts index a76f7b882..232d763b8 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Area.style.ts +++ b/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; `; }); diff --git a/packages/core/data-source-manager/src/data-source-manager.ts b/packages/core/data-source-manager/src/data-source-manager.ts index 22e78daaa..de9845ac2 100644 --- a/packages/core/data-source-manager/src/data-source-manager.ts +++ b/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....'); }; } }