feat: init support notice area (#1216)

Reviewed-on: daoyoucloud/tachybase#1216

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

@@ -252,7 +252,7 @@ export class Application {
     });
     this.ws.on('serverDown', () => {
       this.maintaining = true;
-      this.maintained = false;
+      this.maintained = true;
     });
     this.ws.connect();
     try {

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

@@ -1,4 +1,5 @@
 import React, { createContext, ReactNode, useContext, useEffect } from 'react';
+import { define, observable } from '@tachybase/schema';
 
 import { message, notification } from 'antd';
 import mitt, { Emitter, EventType } from 'mitt';
@@ -54,7 +55,11 @@ export class NoticeManager {
   constructor(private app: Application) {
     this.ws = app.ws;
     this.emitter = mitt();
+    define(this, {
+      currentStatus: observable.ref,
+    });
   }
+  currentStatus = '';
 
   on(data: { type: NoticeType; title?: string; content: string; level: NoticeLevel; eventType?: string; event?: any }) {
     if (data.type === NoticeType.NOTIFICATION) {
@@ -68,6 +73,7 @@ export class NoticeManager {
 
   status(content: string, level: NoticeLevel) {
     // 常驻消息
+    this.currentStatus = content;
   }
 
   toast(content: string, level: NoticeLevel) {

packages/core/client/src/built-in/admin-layout/NoticeArea.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { observer } from '@tachybase/schema';
+
+import { useNoticeManager } from '../../application';
+
+export const NoticeArea = observer(
+  (props: React.HTMLAttributes<HTMLDivElement>) => {
+    const nm = useNoticeManager();
+    return <div {...props}>{nm.manager.currentStatus ? nm.manager.currentStatus : null}</div>;
+  },
+  { displayName: 'NoticeArea' },
+);

packages/core/client/src/built-in/admin-layout/index.tsx

@@ -25,6 +25,7 @@ import {
 } from '../..';
 import { Plugin } from '../../application/Plugin';
 import { VariablesProvider } from '../../variables';
+import { NoticeArea } from './NoticeArea';
 
 const useStyles = createStyles(({ css, token }) => {
   return {
@@ -104,6 +105,10 @@ const useStyles = createStyles(({ css, token }) => {
     editor: css`
       flex: 1 1 auto;
       width: 0;
+      display: flex;
+    `,
+    notice: css`
+      flex: 1;
     `,
     sider: css`
       height: 100%;
@@ -411,6 +416,7 @@ export const InternalAdminLayout = (props: any) => {
               <h1 className={styles.title}>{result?.data?.data?.title}</h1>
             </div>
             <div className={styles.editor}>
+              <NoticeArea className={styles.notice} />
               <SetThemeOfHeaderSubmenu>
                 <MenuEditor sideMenuRef={sideMenuRef} />
               </SetThemeOfHeaderSubmenu>
@@ -472,3 +478,5 @@ export class AdminLayoutPlugin extends Plugin {
     this.app.addComponents({ AdminLayout });
   }
 }
+
+export * from './NoticeArea';

packages/core/client/src/built-in/index.tsx

@@ -3,13 +3,13 @@ import { observer } from '@tachybase/schema';
 import { getSubAppName } from '@tachybase/sdk';
 
 import { DisconnectOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Button, Modal, Result, Spin } from 'antd';
+import { Button, Result, Spin } from 'antd';
 import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useNavigate } from 'react-router-dom';
 
 import { useAPIClient } from '../api-client';
-import { Application, useApp } from '../application';
+import { Application, NoticeLevel, useApp } from '../application';
 import { Plugin } from '../application/Plugin';
 import { BlockSchemaComponentPlugin } from '../block-provider';
 import { CollectionPlugin } from '../collection-manager';
@@ -28,7 +28,7 @@ import { PinnedListPlugin } from './pinned-list';
 import { PMPlugin } from './pm';
 import { SystemSettingsPlugin } from './system-settings';
 
-export { AdminProvider } from './admin-layout';
+export { AdminProvider, NoticeArea } from './admin-layout';
 
 interface AppStatusProps {
   error: Error;
@@ -248,11 +248,9 @@ const AppMaintaining = observer(
 const AppMaintainingDialog = observer(
   ({ app }: AppStatusProps) => {
     const { icon, status, title, subTitle } = getProps(app);
-    return (
-      <Modal open={true} footer={null} closable={false}>
-        <Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
-      </Modal>
-    );
+    const manager = app.noticeManager;
+    manager.status(app.i18n.t(title) + app.i18n.t(subTitle), NoticeLevel.INFO);
+    return null;
   },
   { displayName: 'AppMaintainingDialog' },
 );

packages/plugins/@hera/plugin-core/src/client/pages/AdminLayout.tsx

@@ -5,6 +5,7 @@ import {
   CurrentUser,
   findByUid,
   findMenuItem,
+  NoticeArea,
   PinnedPluginList,
   SchemaComponent,
   useACLRoleContext,
@@ -17,7 +18,7 @@ import {
 } from '@tachybase/client';
 
 import { useSessionStorageState } from 'ahooks';
-import { Alert, App, Layout } from 'antd';
+import { App, Layout } from 'antd';
 import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom';
 
 import { MobileLink } from '../components/system/MobileLink';
@@ -287,8 +288,14 @@ export const InternalAdminLayout = () => {
               className={css`
                 flex: 1 1 auto;
                 width: 0;
+                display: flex;
               `}
             >
+              <NoticeArea
+                className={css`
+                  flex: 1;
+                `}
+              />
               <MenuEditor sideMenuRef={sideMenuRef} />
             </div>
           </div>

packages/plugins/@hera/plugin-core/src/server/plugin.ts

@@ -20,6 +20,7 @@ export class PluginCoreServer extends Plugin {
     });
     this.addFeature(DepartmentsPlugin);
   }
+
   async load() {
     try {
       await Container.get(ConnectionManager).load();
@@ -35,8 +36,5 @@ export class PluginCoreServer extends Plugin {
       console.warn(err);
     }
   }
-  async afterEnable() {}
-  async afterDisable() {}
-  async remove() {}
 }
 export default PluginCoreServer;