From c6ae59b4a236e9d9d0201951714450bc2ce658fe Mon Sep 17 00:00:00 2001 From: sunshinesmilelk Date: Thu, 30 Nov 2023 14:57:13 +0800 Subject: [PATCH] feat(lab): add welcome page --- packages/libro-lab/src/layout/index.less | 5 +- .../libro-lab/src/layout/layout-service.ts | 7 ++ packages/libro-lab/src/module.tsx | 11 ++++ packages/libro-lab/src/welcome/index.less | 21 ++++++ packages/libro-lab/src/welcome/index.tsx | 31 +++++---- .../libro-lab/src/welcome/welcome-icon.tsx | 64 +++++++++++++++++++ 6 files changed, 122 insertions(+), 17 deletions(-) create mode 100644 packages/libro-lab/src/welcome/index.less create mode 100644 packages/libro-lab/src/welcome/welcome-icon.tsx diff --git a/packages/libro-lab/src/layout/index.less b/packages/libro-lab/src/layout/index.less index 45313d2a..cbc686ad 100644 --- a/packages/libro-lab/src/layout/index.less +++ b/packages/libro-lab/src/layout/index.less @@ -20,9 +20,8 @@ &-footer { height: 28px; min-height: 28px; - background-image: linear-gradient(270deg, #c8c8cd 0%, #fff 100%); - opacity: 0.12; - box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 50%); + background-image: linear-gradient(270deg, #fafafa 0%, #fff 100%); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 12%); } .mana-header { diff --git a/packages/libro-lab/src/layout/layout-service.ts b/packages/libro-lab/src/layout/layout-service.ts index 28debf7a..544c9acf 100644 --- a/packages/libro-lab/src/layout/layout-service.ts +++ b/packages/libro-lab/src/layout/layout-service.ts @@ -1,3 +1,4 @@ +import type { SlotView, View, ViewOpenHandlerOptions } from '@difizen/mana-app'; import { DefaultSlotView, inject, @@ -35,6 +36,12 @@ export class LayoutService { this.visibilityMap[slot] = visible; } + async addView(view: View, option?: ViewOpenHandlerOptions): Promise { + const { slot = LibroLabLayoutSlots.main, ...viewOpenOption } = option || {}; + const slotView = this.slotViewManager.getSlotView(slot) as SlotView; + await slotView.addView(view, viewOpenOption); + } + getActiveView(slot: LibroLabLayoutSlotsType) { if (this.isAreaVisible(slot)) { const slotView = this.slotViewManager.getSlotView(slot); diff --git a/packages/libro-lab/src/module.tsx b/packages/libro-lab/src/module.tsx index 2dee737e..e4241136 100644 --- a/packages/libro-lab/src/module.tsx +++ b/packages/libro-lab/src/module.tsx @@ -20,6 +20,7 @@ import { import './index.less'; import { LibroLabHeaderMenuModule } from './menu/module.js'; import { LibroLabTocModule } from './toc/module.js'; +import { WelcomeView } from './welcome/index.js'; export const LibroLabModule = ManaModule.create() .register( @@ -68,6 +69,16 @@ export const LibroLabModule = ManaModule.create() order: 'file-tree', }, }), + WelcomeView, + createViewPreference({ + view: WelcomeView, + slot: LibroLabLayoutSlots.content, + autoCreate: true, + openOptions: { + reveal: true, + order: 'welcome', + }, + }), ) .dependOn( LibroJupyterModule, diff --git a/packages/libro-lab/src/welcome/index.less b/packages/libro-lab/src/welcome/index.less new file mode 100644 index 00000000..8d698503 --- /dev/null +++ b/packages/libro-lab/src/welcome/index.less @@ -0,0 +1,21 @@ +.libro-lab-welcome-page { + padding: 32px 54px; + height: 100%; + background: white; + + .libro-lab-welcome-page-title { + /* stylelint-disable-next-line declaration-property-value-disallowed-list */ + font-family: PingFangSC; + font-weight: 600; + font-size: 40px; + color: #000a1a; + letter-spacing: 0; + line-height: 56px; + } + + .libro-lab-welcome-page-title-tip { + margin: 16px 0 30px; + font-size: 16px; + color: rgba(0, 10, 26, 78%); + } +} diff --git a/packages/libro-lab/src/welcome/index.tsx b/packages/libro-lab/src/welcome/index.tsx index 67b23761..efe3f4ea 100644 --- a/packages/libro-lab/src/welcome/index.tsx +++ b/packages/libro-lab/src/welcome/index.tsx @@ -1,27 +1,30 @@ -import { GithubFilled } from '@ant-design/icons'; import { singleton, view } from '@difizen/mana-app'; import { BaseView } from '@difizen/mana-app'; import { forwardRef } from 'react'; -export const GithubLinkComponent = forwardRef(function GithubLinkComponent() { +import { WelcomeIcon } from './welcome-icon.js'; + +import './index.less'; + +export const WelcomeComponent = forwardRef(function WelcomeComponent() { return ( - - - +
+
欢迎使用 Notebook 工作台 🎉🎉
+
+ 👋 你好，服务正在加载中，请稍后开启你的研发之旅吧～ +
+
); }); @singleton() -@view('github-link') -export class GithubLinkView extends BaseView { - override view = GithubLinkComponent; - link = ''; +@view('welcome-view') +export class WelcomeView extends BaseView { + override view = WelcomeComponent; + constructor() { super(); + this.title.icon = ; + this.title.label = '欢迎使用'; } } diff --git a/packages/libro-lab/src/welcome/welcome-icon.tsx b/packages/libro-lab/src/welcome/welcome-icon.tsx new file mode 100644 index 00000000..347e3dce --- /dev/null +++ b/packages/libro-lab/src/welcome/welcome-icon.tsx @@ -0,0 +1,64 @@ +export interface IProps { + className?: string; +} +export function WelcomeIcon(props: IProps) { + return ( + + + + + + + + + + + + + + + + + + ); +}