feat: add initial loading interaction

difizen · Dec 4, 2023 · 26a6ffa · 26a6ffa
1 parent 47e9b5e
commit 26a6ffa
Show file tree

Hide file tree

Showing 15 changed files with 206 additions and 151 deletions.
diff --git a/packages/libro-lab/src/common/icon.tsx b/packages/libro-lab/src/common/icon.tsx
@@ -0,0 +1,170 @@
+export interface IProps {
+  className?: string;
+  width?: string;
+  height?: string;
+}
+export function Logo(props: IProps) {
+  const { className = '' } = props;
+  return (
+    <svg
+      viewBox="0 0 154 116"
+      className={className}
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="画板备份-6" transform="translate(-119.000000, -152.000000)">
+          <g id="Libro-logo" transform="translate(119.000000, 152.000000)">
+            <path
+              d="M128.970588,66 C142.793951,66 154,77.1926795 154,90.9995493 C154,104.806419 142.793951,115.999099 128.970588,115.999099 C128.473758,115.999099 127.980309,115.98464 127.49064,115.956121 L127.697007,115.999674 L80,115.999099 L93.1090651,98.1074032 L108.158627,77.1069733 C112.649045,70.4093826 120.294268,66 128.970588,66 Z"
+              id="形状结合"
+              fill="#155DE2"
+            ></path>
+            <path
+              d="M104.481034,0 L147,0 L147,0 L59.3397468,116 L0,116 L78.0248494,13.1382037 C84.3029962,4.8615911 94.0927023,-5.19712172e-15 104.481034,0 Z"
+              id="矩形"
+              fill="#155DE2"
+            ></path>
+            <path
+              d="M65.667264,51.1430655 C65.667264,84.8453007 91.2203312,112.576275 123.999729,115.999972 L0,115.997535 L75.3014571,17.0042341 C69.1915639,26.9341621 65.667264,38.6268332 65.667264,51.1430655 Z"
+              id="形状结合"
+              fill="#12D8C6"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function TocIcon(props: IProps) {
+  return (
+    <svg
+      width="12px"
+      height="14px"
+      viewBox="0 0 12 14"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>source</title>
+      <g id="代码片段" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          id="1.4编辑状态备份"
+          transform="translate(-14.000000, -215.000000)"
+          fill="currentColor"
+        >
+          <g id="编组-2" transform="translate(0.000000, 56.000000)">
+            <g id="source" transform="translate(14.359615, 159.750439)">
+              <path
+                d="M11.3634429,8.03576964 L9.90082151,8.03576964 L9.90082151,5.91521932 C9.90082151,5.85383497 9.85019231,5.80361141 9.78831217,5.80361141 L6.30052278,5.80361141 L6.30052278,4.46431647 L7.81939881,4.46431647 C7.94315907,4.46431647 8.04441748,4.36386935 8.04441748,4.24110065 L8.04441748,0.223215823 C8.04441748,0.100447121 7.94315907,0 7.81939881,0 L3.76906273,0 C3.64530246,0 3.54404406,0.100447121 3.54404406,0.223215823 L3.54404406,4.24110065 C3.54404406,4.36386935 3.64530246,4.46431647 3.76906273,4.46431647 L5.28793876,4.46431647 L5.28793876,5.80361141 L1.80014937,5.80361141 C1.73826923,5.80361141 1.68764003,5.85383497 1.68764003,5.91521932 L1.68764003,8.03576964 L0.225018671,8.03576964 C0.101258402,8.03576964 0,8.13621676 0,8.25898547 L0,12.2768703 C0,12.399639 0.101258402,12.5000861 0.225018671,12.5000861 L4.27535474,12.5000861 C4.39911501,12.5000861 4.50037341,12.399639 4.50037341,12.2768703 L4.50037341,8.25898547 C4.50037341,8.13621676 4.39911501,8.03576964 4.27535474,8.03576964 L2.70022405,8.03576964 L2.70022405,6.80808261 L8.88823749,6.80808261 L8.88823749,8.03576964 L7.3131068,8.03576964 C7.18934653,8.03576964 7.08808813,8.13621676 7.08808813,8.25898547 L7.08808813,12.2768703 C7.08808813,12.399639 7.18934653,12.5000861 7.3131068,12.5000861 L11.3634429,12.5000861 C11.4872031,12.5000861 11.5884615,12.399639 11.5884615,12.2768703 L11.5884615,8.25898547 C11.5884615,8.13621676 11.4872031,8.03576964 11.3634429,8.03576964 Z"
+                id="Path"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+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>
+  );
+}
+
+export function Loadding(props: IProps) {
+  return (
+    <svg
+      width="14px"
+      height="14px"
+      viewBox="0 0 14 14"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={props.className}
+    >
+      <title>形状结合</title>
+      <g
+        id="整体框架部分"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="1.1容器加载中-关闭提示"
+          transform="translate(-1362.000000, -879.000000)"
+          fill="#1890FF"
+        >
+          <g id="编组-20" transform="translate(0.000000, 872.000000)">
+            <g id="编组-3" transform="translate(1302.000000, 5.000000)">
+              <path
+                d="M67,2 C70.8659932,2 74,5.13400675 74,9 C74,12.6840981 71.1539658,15.7034692 67.5405741,15.9794369 C67.4622857,15.9934347 67.3819096,16 67.3,16 C66.4715729,16 65.8,15.3284271 65.8,14.5 C65.8,13.6715729 66.4715729,13 67.3,13 L67.301026,12.9888432 C69.3695589,12.8349382 71,11.1078741 71,9 C71,6.790861 69.209139,5 67,5 C64.8578046,5 63.1089211,6.68396847 63.0048953,8.80035966 L63,9 C63,9.82842712 62.3284271,10.5 61.5,10.5 C60.6715729,10.5 60,9.82842712 60,9 C60,5.13400675 63.1340068,2 67,2 Z"
+                id="形状结合"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/libro-lab/src/common/index.tsx 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
@@ -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,19 @@ 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.initialWorkspace();
+    });
   }
 
   protected async initialWorkspace() {

diff --git 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<any> = React.forwardRef(

diff --git a/packages/libro-lab/src/layout/brand/logo.tsx b/packages/libro-lab/src/layout/brand/logo.tsx
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
@@ -22,7 +22,7 @@ const CurrentFileFooterComponent = React.forwardRef(function CurrentFileFooterCo
   return (
     <div className="libro-lab-current-file-footer" ref={ref}>
       <span>{`当前文件：${
-        currentFileFooterView.libroNavigatableView?.title.label || ''
+        currentFileFooterView.navigatableView?.title.label || ''
       }`}</span>
     </div>
   );
@@ -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/index.less b/packages/libro-lab/src/layout/index.less
@@ -57,3 +57,8 @@
     }
   }
 }
+
+.libro-lab-loadding {
+  margin-right: 4px;
+  animation: loadingCircle 1s infinite linear;
+}
diff --git a/packages/libro-lab/src/layout/layout-service.ts b/packages/libro-lab/src/layout/layout-service.ts
@@ -23,9 +23,10 @@ export class LayoutService {
     [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
@@ -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(
               <Slot name={LibroLabLayoutSlots.header} />
             </BoxPanel.Pane>
           )}
+          {layoutService.isAreaVisible(LibroLabLayoutSlots.alert) && (
+            <Alert
+              message="服务启动中，请稍后，待容器启动完成后即可编辑文件。"
+              type="info"
+              banner
+              closable
+              icon={<Loadding className="libro-lab-loadding" />}
+            />
+          )}
           {layoutService.isAreaVisible(LibroLabLayoutSlots.container) && (
             <BoxPanel.Pane className="libro-lab-layout-container" flex={1}>
               <Slot name={LibroLabLayoutSlots.container} />

diff --git 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}
           >
             <Slot name={LibroLabLayoutSlots.navigator} />
           </SplitPanel.Pane>

diff --git a/packages/libro-lab/src/layout/protocol.tsx b/packages/libro-lab/src/layout/protocol.tsx
@@ -6,6 +6,7 @@ export const LibroLabLayoutSlots = {
   navigator: 'libro-lab-navigator',
   content: 'libro-lab-content',
   contentBottom: 'libro-lab-content-bottom',
+  alert: 'libro-lab-alert',
 };
 
 export type LibroLabLayoutSlotsType =

diff --git a/packages/libro-lab/src/toc/libro-toc-icons.tsx b/packages/libro-lab/src/toc/libro-toc-icons.tsx