feat(lab): add welcome page

difizen · Dec 1, 2023 · 881a8bc · 881a8bc
1 parent 1fe91ef
commit 881a8bc
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 17 deletions.
diff --git 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
@@ -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<void> {
+    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
@@ -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
@@ -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
@@ -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 (
-    <a
-      href="https://github.com/difizen/libro"
-      target="_blank"
-      rel="noreferrer"
-      style={{ fontSize: 24 }}
-    >
-      <GithubFilled />
-    </a>
+    <div className="libro-lab-welcome-page">
+      <div className="libro-lab-welcome-page-title">欢迎使用 Notebook 工作台 🎉🎉</div>
+      <div className="libro-lab-welcome-page-title-tip">
+        👋 你好，服务正在加载中，请稍后开启你的研发之旅吧～
+      </div>
+    </div>
   );
 });
 
 @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 = <WelcomeIcon />;
+    this.title.label = '欢迎使用';
   }
 }
diff --git a/packages/libro-lab/src/welcome/welcome-icon.tsx b/packages/libro-lab/src/welcome/welcome-icon.tsx
@@ -0,0 +1,64 @@
+export interface IProps {
+  className?: string;
+}
+export function WelcomeIcon(props: IProps) {
+  return (
+    <svg
+      width="12px"
+      height="12px"
+      viewBox="0 0 12 12"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={props.className}
+    >
+      <g id="整体框架部分" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          id="1.2容器加载完成"
+          transform="translate(-270.000000, -66.000000)"
+          fillRule="nonzero"
+        >
+          <g id="编组-17" transform="translate(262.000000, 56.000000)">
+            <g id="setting-fill" transform="translate(8.000000, 10.000000)">
+              <rect
+                id="矩形"
+                fill="#000000"
+                opacity="0"
+                x="0"
+                y="0"
+                width="12"
+                height="11.7"
+              ></rect>
+              <g id="sql" transform="translate(1.000000, 1.000000)">
+                <rect
+                  id="矩形"
+                  fill="#000000"
+                  opacity="0"
+                  x="0"
+                  y="0"
+                  width="10"
+                  height="10"
+                ></rect>
+                <path
+                  d="M0.33,6.17 C0.33,7 2.42,7.67 5,7.67 C7.57,7.67 9.66,7 9.67,6.17 L9.67,4.98 C8.71,5.67 6.85,6 5,6 C3.15,6 1.29,5.67 0.33,4.97 L0.33,6.17 Z"
+                  id="路径"
+                  fill="#FAAD14"
+                ></path>
+                <path
+                  d="M9.67,7.3 C8.71,8 6.85,8.33 5,8.33 C3.15,8.33 1.29,8 0.33,7.3 L0.33,8.66 C0.59,9.42 2.6,10 5,10 C7.4,10 9.41,9.42 9.67,8.67 L9.67,7.3 L9.67,7.3 Z M0.33,3.83 C0.33,4.66 2.42,5.33 5,5.33 C7.57,5.33 9.66,4.66 9.67,3.83 L9.67,2.64 C8.71,3.34 6.85,3.67 5,3.67 C3.15,3.67 1.29,3.34 0.33,2.64 L0.33,3.83 Z"
+                  id="形状"
+                  fill="#FAAD14"
+                ></path>
+                <path
+                  d="M0.33,1.5 C0.33,2.32842712 2.42083022,3 5,3 C7.57916978,3 9.67,2.32842712 9.67,1.5 C9.67,0.671572875 7.57916978,0 5,0 C2.42083022,0 0.33,0.671572875 0.33,1.5 Z"
+                  id="路径"
+                  fill="#FAAD14"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}