From 020fb943ac182e9a34b8ade66013ef0050320578 Mon Sep 17 00:00:00 2001 From: sunshinesmilelk <1176136681@qq.com> Date: Mon, 4 Dec 2023 20:47:24 +0800 Subject: [PATCH] feat: add initial loading interaction --- packages/libro-lab/src/common/icon.tsx | 165 ++++++++++++++++++ packages/libro-lab/src/common/index.less | 4 + packages/libro-lab/src/common/index.tsx | 1 + packages/libro-lab/src/lab-app.ts | 14 +- packages/libro-lab/src/layout/brand/index.tsx | 2 +- packages/libro-lab/src/layout/brand/logo.tsx | 39 ----- .../footer/current-file-footer-view.tsx | 9 +- .../libro-lab/src/layout/footer/index.less | 17 +- .../src/layout/footer/status-footer-view.tsx | 45 +++++ .../libro-lab/src/layout/layout-service.ts | 7 +- packages/libro-lab/src/layout/layout.tsx | 11 ++ packages/libro-lab/src/layout/main.tsx | 2 +- packages/libro-lab/src/layout/module.ts | 6 + packages/libro-lab/src/layout/protocol.tsx | 8 + .../libro-lab/src/toc/libro-toc-icons.tsx | 35 ---- .../src/toc/libro-toc-panel-view.tsx | 2 +- packages/libro-lab/src/welcome/index.tsx | 3 +- .../libro-lab/src/welcome/welcome-icon.tsx | 64 ------- 18 files changed, 275 insertions(+), 159 deletions(-) create mode 100644 packages/libro-lab/src/common/icon.tsx create mode 100644 packages/libro-lab/src/common/index.less create mode 100644 packages/libro-lab/src/common/index.tsx delete mode 100644 packages/libro-lab/src/layout/brand/logo.tsx create mode 100644 packages/libro-lab/src/layout/footer/status-footer-view.tsx delete mode 100644 packages/libro-lab/src/toc/libro-toc-icons.tsx delete mode 100644 packages/libro-lab/src/welcome/welcome-icon.tsx diff --git a/packages/libro-lab/src/common/icon.tsx b/packages/libro-lab/src/common/icon.tsx new file mode 100644 index 00000000..0b96fdf6 --- /dev/null +++ b/packages/libro-lab/src/common/icon.tsx @@ -0,0 +1,165 @@ +import './index.less'; +export interface IProps { + className?: string; + width?: string; + height?: string; +} +export function Logo(props: IProps) { + const { className = '' } = props; + return ( + + + + + + + + ); +} + +export function TocIcon(props: IProps) { + return ( + + source + + + + + + + + + + + ); +} + +export function WelcomeIcon(props: IProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export function Loadding(props: IProps) { + return ( + + 形状结合 + + + + + + + + + + + ); +} diff --git a/packages/libro-lab/src/common/index.less b/packages/libro-lab/src/common/index.less new file mode 100644 index 00000000..249554bb --- /dev/null +++ b/packages/libro-lab/src/common/index.less @@ -0,0 +1,4 @@ +.libro-lab-loadding { + margin-right: 4px; + animation: loadingCircle 1s infinite linear; +} diff --git a/packages/libro-lab/src/common/index.tsx b/packages/libro-lab/src/common/index.tsx new file mode 100644 index 00000000..769f66ea --- /dev/null +++ b/packages/libro-lab/src/common/index.tsx @@ -0,0 +1 @@ +export * from './icon.js'; diff --git a/packages/libro-lab/src/lab-app.ts b/packages/libro-lab/src/lab-app.ts index 9d4a2b44..6a9d4a67 100644 --- a/packages/libro-lab/src/lab-app.ts +++ b/packages/libro-lab/src/lab-app.ts @@ -2,6 +2,7 @@ import { LibroService, ServerConnection, LibroJupyterConfiguration, + ServerManager, } from '@difizen/libro-jupyter'; import type { FileTreeView } from '@difizen/mana-app'; import { @@ -16,6 +17,7 @@ import { } from '@difizen/mana-app'; import { LibroLabLayoutSlots } from './layout/index.js'; +import { LayoutService } from './layout/layout-service.js'; @singleton({ contrib: ApplicationContribution }) export class LibroLabApp implements ApplicationContribution { @@ -24,13 +26,23 @@ export class LibroLabApp implements ApplicationContribution { @inject(SlotViewManager) slotViewManager: SlotViewManager; @inject(ViewManager) viewManager: ViewManager; @inject(ConfigurationService) configurationService: ConfigurationService; + @inject(ServerManager) serverManager: ServerManager; + @inject(LayoutService) layoutService: LayoutService; async onStart() { this.configurationService.set( LibroJupyterConfiguration['OpenSlot'], LibroLabLayoutSlots.content, ); - await this.initialWorkspace(); + this.serverManager.ready + .then(() => { + this.layoutService.setAreaVisible(LibroLabLayoutSlots.navigator, true); + this.layoutService.setAreaVisible(LibroLabLayoutSlots.alert, false); + this.layoutService.serverSatus = 'success'; + this.initialWorkspace(); + return; + }) + .catch(); } protected async initialWorkspace() { diff --git a/packages/libro-lab/src/layout/brand/index.tsx b/packages/libro-lab/src/layout/brand/index.tsx index 395a0572..23cc7139 100644 --- a/packages/libro-lab/src/layout/brand/index.tsx +++ b/packages/libro-lab/src/layout/brand/index.tsx @@ -1,7 +1,7 @@ import { BaseView, view, singleton } from '@difizen/mana-app'; import * as React from 'react'; +import { Logo } from '../../common/index.js'; -import { Logo } from './logo.js'; import './index.less'; export const Brand: React.ForwardRefExoticComponent = React.forwardRef( diff --git a/packages/libro-lab/src/layout/brand/logo.tsx b/packages/libro-lab/src/layout/brand/logo.tsx deleted file mode 100644 index 2fc6ff5f..00000000 --- a/packages/libro-lab/src/layout/brand/logo.tsx +++ /dev/null @@ -1,39 +0,0 @@ -export interface IProps { - className?: string; - width?: string; - height?: string; -} -export function Logo(props: IProps) { - const { className = '' } = props; - return ( - - - - - - - - ); -} diff --git a/packages/libro-lab/src/layout/footer/current-file-footer-view.tsx b/packages/libro-lab/src/layout/footer/current-file-footer-view.tsx index 285de16b..ca2181c9 100644 --- a/packages/libro-lab/src/layout/footer/current-file-footer-view.tsx +++ b/packages/libro-lab/src/layout/footer/current-file-footer-view.tsx @@ -22,7 +22,7 @@ const CurrentFileFooterComponent = React.forwardRef(function CurrentFileFooterCo return (
{`当前文件：${ - currentFileFooterView.libroNavigatableView?.title.label || '' + currentFileFooterView.navigatableView?.title.label || '' }`}
); @@ -34,11 +34,8 @@ export class LibroLabCurrentFileFooterView extends BaseView { override view = CurrentFileFooterComponent; @inject(LayoutService) protected layoutService: LayoutService; - get libroNavigatableView() { + get navigatableView() { const contentView = this.layoutService.getActiveView(LibroLabLayoutSlots.content); - if (contentView instanceof LibroNavigatableView) { - return contentView; - } - return undefined; + return contentView; } } diff --git a/packages/libro-lab/src/layout/footer/index.less b/packages/libro-lab/src/layout/footer/index.less index 1861f1da..eaa5b4c4 100644 --- a/packages/libro-lab/src/layout/footer/index.less +++ b/packages/libro-lab/src/layout/footer/index.less @@ -1,17 +1,20 @@ .libro-lab-footer { - .libro-lab-footer-left { + .libro-lab-footer-left, + .libro-lab-footer-right { padding: 0 24px; } } -.libro-lab-current-file-footer { +.libro-lab-current-file-footer, +.libro-lab-status-footer { height: 100%; display: flex; align-items: center; + font-weight: 400; + font-size: 12px; + color: rgba(0, 10, 26, 68%); +} - span { - font-weight: 400; - font-size: 12px; - color: rgba(0, 10, 26, 68%); - } +.libro-lab-status-footer { + justify-content: end; } diff --git a/packages/libro-lab/src/layout/footer/status-footer-view.tsx b/packages/libro-lab/src/layout/footer/status-footer-view.tsx new file mode 100644 index 00000000..f9195aa8 --- /dev/null +++ b/packages/libro-lab/src/layout/footer/status-footer-view.tsx @@ -0,0 +1,45 @@ +import { BaseView, inject, singleton, useInject, view } from '@difizen/mana-app'; +import * as React from 'react'; +import { Loadding } from '../../common/icon.js'; + +import { LayoutService } from '../layout-service.js'; +import { LibroLabLayoutSlots } from '../protocol.js'; +import type { StatusItem, StatusType } from '../protocol.js'; +import './index.less'; + +const Status: Record = { + loading: { + label: '启动中', + icon: , + }, + success: { + label: '启动成功', + icon: , + }, +}; + +const StatusFooterComponent = React.forwardRef(function CurrentFileFooterComponent( + _props, + ref: React.ForwardedRef, +) { + const layoutService = useInject(LayoutService); + return ( +
+ 服务状态： + {Status[layoutService.serverSatus].icon} + {Status[layoutService.serverSatus].label} +
+ ); +}); + +@singleton() +@view('libro-lab-status-footer-view') +export class LibroLabStatusFooterView extends BaseView { + override view = StatusFooterComponent; + @inject(LayoutService) protected layoutService: LayoutService; + + get navigatableView() { + const contentView = this.layoutService.getActiveView(LibroLabLayoutSlots.content); + return contentView; + } +} diff --git a/packages/libro-lab/src/layout/layout-service.ts b/packages/libro-lab/src/layout/layout-service.ts index 544c9acf..b1d0fd10 100644 --- a/packages/libro-lab/src/layout/layout-service.ts +++ b/packages/libro-lab/src/layout/layout-service.ts @@ -8,7 +8,7 @@ import { SlotViewManager, } from '@difizen/mana-app'; -import type { LibroLabLayoutSlotsType } from './protocol.js'; +import type { LibroLabLayoutSlotsType, StatusType } from './protocol.js'; import { LibroLabLayoutSlots } from './protocol.js'; export type VisibilityMap = Record; @@ -17,15 +17,18 @@ export type VisibilityMap = Record; export class LayoutService { @inject(SlotViewManager) protected readonly slotViewManager: SlotViewManager; + @prop() + serverSatus: StatusType = 'loading'; @prop() protected visibilityMap: VisibilityMap = { [LibroLabLayoutSlots.header]: true, [LibroLabLayoutSlots.container]: true, [LibroLabLayoutSlots.main]: true, [LibroLabLayoutSlots.footer]: true, - [LibroLabLayoutSlots.navigator]: true, + [LibroLabLayoutSlots.navigator]: false, [LibroLabLayoutSlots.content]: true, [LibroLabLayoutSlots.contentBottom]: false, + [LibroLabLayoutSlots.alert]: true, }; isAreaVisible(slot: LibroLabLayoutSlotsType): boolean { diff --git a/packages/libro-lab/src/layout/layout.tsx b/packages/libro-lab/src/layout/layout.tsx index e15518a3..e2238fce 100644 --- a/packages/libro-lab/src/layout/layout.tsx +++ b/packages/libro-lab/src/layout/layout.tsx @@ -1,7 +1,9 @@ import { singleton, Slot, useInject, view } from '@difizen/mana-app'; import { BaseView } from '@difizen/mana-app'; import { BoxPanel } from '@difizen/mana-react'; +import { Alert } from 'antd'; import { forwardRef } from 'react'; +import { Loadding } from '../common/icon.js'; import './index.less'; import { LayoutService } from './layout-service.js'; @@ -19,6 +21,15 @@ export const LibroLabLayoutContainerComponent = forwardRef( )} + {layoutService.isAreaVisible(LibroLabLayoutSlots.alert) && ( + } + /> + )} {layoutService.isAreaVisible(LibroLabLayoutSlots.container) && ( diff --git a/packages/libro-lab/src/layout/main.tsx b/packages/libro-lab/src/layout/main.tsx index 63d79c76..56044cad 100644 --- a/packages/libro-lab/src/layout/main.tsx +++ b/packages/libro-lab/src/layout/main.tsx @@ -1,6 +1,7 @@ import { singleton, Slot, useInject, view } from '@difizen/mana-app'; import { BaseView } from '@difizen/mana-app'; import { SplitPanel } from '@difizen/mana-react'; +import { Alert } from 'antd'; import { forwardRef } from 'react'; import './index.less'; @@ -18,7 +19,6 @@ export const LibroLabLayoutMainComponent = forwardRef( id="libro-lab-content-layout-left" className="libro-lab-content-layout-left" defaultSize={300} - minResize={160} > diff --git a/packages/libro-lab/src/layout/module.ts b/packages/libro-lab/src/layout/module.ts index 5c2a4ff3..b3696c76 100644 --- a/packages/libro-lab/src/layout/module.ts +++ b/packages/libro-lab/src/layout/module.ts @@ -11,6 +11,7 @@ import { LibroLabLayoutContainerView } from './container.js'; import { EditorTabView } from './editor-tab-view.js'; import { LibroLabCurrentFileFooterView } from './footer/current-file-footer-view.js'; import { FooterArea, LibroLabLayoutFooterView } from './footer/footer-view.js'; +import { LibroLabStatusFooterView } from './footer/status-footer-view.js'; import { LayoutService } from './layout-service.js'; import { LibroLabLayoutView } from './layout.js'; import { LibroLabLayoutMainView } from './main.js'; @@ -59,4 +60,9 @@ export const LibroLabLayoutModule = ManaModule.create('LibroLabLayoutModule').re slot: FooterArea.left, view: LibroLabCurrentFileFooterView, }), + LibroLabStatusFooterView, + createSlotPreference({ + slot: FooterArea.right, + view: LibroLabStatusFooterView, + }), ); diff --git a/packages/libro-lab/src/layout/protocol.tsx b/packages/libro-lab/src/layout/protocol.tsx index d6c408b7..92c65db6 100644 --- a/packages/libro-lab/src/layout/protocol.tsx +++ b/packages/libro-lab/src/layout/protocol.tsx @@ -6,7 +6,15 @@ export const LibroLabLayoutSlots = { navigator: 'libro-lab-navigator', content: 'libro-lab-content', contentBottom: 'libro-lab-content-bottom', + alert: 'libro-lab-alert', }; +export type StatusType = 'loading' | 'success'; + +export interface StatusItem { + label: string; + icon: JSX.Element; +} + export type LibroLabLayoutSlotsType = (typeof LibroLabLayoutSlots)[keyof typeof LibroLabLayoutSlots]; diff --git a/packages/libro-lab/src/toc/libro-toc-icons.tsx b/packages/libro-lab/src/toc/libro-toc-icons.tsx deleted file mode 100644 index 2e2e1772..00000000 --- a/packages/libro-lab/src/toc/libro-toc-icons.tsx +++ /dev/null @@ -1,35 +0,0 @@ -export interface IProps { - className?: string; - width?: string; - height?: string; -} -export function TocIcon(props: IProps) { - return ( - - source - - - - - - - - - - - ); -} diff --git a/packages/libro-lab/src/toc/libro-toc-panel-view.tsx b/packages/libro-lab/src/toc/libro-toc-panel-view.tsx index 7ea4bbe7..b2af4774 100644 --- a/packages/libro-lab/src/toc/libro-toc-panel-view.tsx +++ b/packages/libro-lab/src/toc/libro-toc-panel-view.tsx @@ -12,11 +12,11 @@ import { ViewRender, } from '@difizen/mana-app'; import { Empty } from 'antd'; +import { TocIcon } from '../common/index.js'; import { LayoutService } from '../layout/layout-service.js'; import { LibroLabLayoutSlots } from '../layout/protocol.js'; -import { TocIcon } from './libro-toc-icons.js'; import './index.less'; const TocViewRender: React.FC = () => { diff --git a/packages/libro-lab/src/welcome/index.tsx b/packages/libro-lab/src/welcome/index.tsx index efe3f4ea..b3c9525e 100644 --- a/packages/libro-lab/src/welcome/index.tsx +++ b/packages/libro-lab/src/welcome/index.tsx @@ -1,8 +1,7 @@ import { singleton, view } from '@difizen/mana-app'; import { BaseView } from '@difizen/mana-app'; import { forwardRef } from 'react'; - -import { WelcomeIcon } from './welcome-icon.js'; +import { WelcomeIcon } from '../common/index.js'; import './index.less'; diff --git a/packages/libro-lab/src/welcome/welcome-icon.tsx b/packages/libro-lab/src/welcome/welcome-icon.tsx deleted file mode 100644 index 347e3dce..00000000 --- a/packages/libro-lab/src/welcome/welcome-icon.tsx +++ /dev/null @@ -1,64 +0,0 @@ -export interface IProps { - className?: string; -} -export function WelcomeIcon(props: IProps) { - return ( - - - - - - - - - - - - - - - - - - ); -}