feat: add welcome page detail

difizen · Dec 5, 2023 · a797a51 · a797a51
1 parent 757f7c3
commit a797a51
Show file tree

Hide file tree

Showing 7 changed files with 894 additions and 6 deletions.
diff --git a/packages/libro-lab/src/common/icon.tsx b/packages/libro-lab/src/common/icon.tsx
diff --git a/packages/libro-lab/src/common/index.less b/packages/libro-lab/src/common/index.less
@@ -2,3 +2,7 @@
   margin-right: 4px;
   animation: loadingCircle 1s infinite linear;
 }
+
+.libro-lab-success {
+  margin-right: 4px;
+}
diff --git a/packages/libro-lab/src/layout/footer/status-footer-view.tsx b/packages/libro-lab/src/layout/footer/status-footer-view.tsx
@@ -1,6 +1,6 @@
 import { BaseView, inject, singleton, useInject, view } from '@difizen/mana-app';
 import * as React from 'react';
-import { Loadding } from '../../common/icon.js';
+import { Loadding, SuccIcon } from '../../common/icon.js';
 
 import { LayoutService } from '../layout-service.js';
 import { LibroLabLayoutSlots } from '../protocol.js';
@@ -14,7 +14,7 @@ const Status: Record<StatusType, StatusItem> = {
   },
   success: {
     label: '启动成功',
-    icon: <Loadding />,
+    icon: <SuccIcon />,
   },
 };
 

diff --git a/packages/libro-lab/src/module.tsx b/packages/libro-lab/src/module.tsx
@@ -21,6 +21,7 @@ import './index.less';
 import { LibroLabHeaderMenuModule } from './menu/module.js';
 import { LibroLabTocModule } from './toc/module.js';
 import { WelcomeView } from './welcome/index.js';
+import { EntryPointView } from './welcome/entry-point-view.js';
 
 export const LibroLabModule = ManaModule.create()
   .register(
@@ -79,6 +80,7 @@ export const LibroLabModule = ManaModule.create()
         order: 'welcome',
       },
     }),
+    EntryPointView,
   )
   .dependOn(
     LibroJupyterModule,

diff --git a/packages/libro-lab/src/welcome/entry-point-view.tsx b/packages/libro-lab/src/welcome/entry-point-view.tsx
@@ -0,0 +1,115 @@
+import { singleton, view } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { Col, Row } from 'antd';
+import { forwardRef } from 'react';
+import {
+  KeybindIcon,
+  MoreIcon,
+  NotebookIcon,
+  PreferenceIcon,
+  PythonIcon,
+  SQLIcon,
+  TerminalIcon,
+} from '../common/icon.js';
+
+import './index.less';
+
+export const EntryPointComponent = forwardRef(function EntryPointComponent() {
+  return (
+    <div className="libro-lab-entry-point">
+      <div className="libro-lab-entry-point-title">请选择你要创建的文件类型：</div>
+      <div className="libro-lab-entry-point-item-title">文件</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
+        >
+          <div className="libro-lab-entry-point-item">
+            <NotebookIcon />
+            <span className="libro-lab-entry-point-item-text">Notebook</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
+        >
+          <div className="libro-lab-entry-point-item">
+            <PythonIcon />
+            <span className="libro-lab-entry-point-item-text">Python</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
+        >
+          <div className="libro-lab-entry-point-item">
+            <SQLIcon />
+            <span className="libro-lab-entry-point-item-text">SQL</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
+        >
+          <div className="libro-lab-entry-point-item">
+            <MoreIcon />
+            <span className="libro-lab-entry-point-item-text">其他</span>
+          </div>
+        </Col>
+      </Row>
+      <div className="libro-lab-entry-point-item-title">其他</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '32px' }}
+        >
+          <div className="libro-lab-entry-point-item">
+            <TerminalIcon />
+            <span className="libro-lab-entry-point-item-text">Terminal</span>
+          </div>
+        </Col>
+      </Row>
+      {/* <div className="libro-lab-entry-point-item-title">最近使用</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+        >
+          <div className="libro-lab-entry-point-item-recent">
+            <span className="libro-lab-entry-point-item-recent-icon">📋 </span>
+            <span className="libro-lab-entry-point-item-recent-text">
+              这是一个文件名
+            </span>
+          </div>
+        </Col>
+      </Row> */}
+      <div className="libro-lab-entry-point-item-title">系统设置</div>
+      <Row>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+        >
+          <div className="libro-lab-entry-point-item-config">
+            <PreferenceIcon></PreferenceIcon>
+            <span className="libro-lab-entry-point-item-config-text">偏好设置</span>
+          </div>
+        </Col>
+        <Col
+          className="gutter-row"
+          style={{ paddingLeft: 'unset', paddingRight: '24px' }}
+        >
+          <div className="libro-lab-entry-point-item-config">
+            <KeybindIcon></KeybindIcon>
+            <span className="libro-lab-entry-point-item-config-text">快捷键设置</span>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+});
+
+@singleton()
+@view('entry-point-view')
+export class EntryPointView extends BaseView {
+  override view = EntryPointComponent;
+}
diff --git a/packages/libro-lab/src/welcome/index.less b/packages/libro-lab/src/welcome/index.less
@@ -1,7 +1,8 @@
 .libro-lab-welcome-page {
   padding: 32px 54px;
-  height: 100%;
+  height: calc(100% - 64px);
   background: white;
+  overflow: auto;
 
   .libro-lab-welcome-page-title {
     /* stylelint-disable-next-line declaration-property-value-disallowed-list */
@@ -19,3 +20,103 @@
     color: rgba(0, 10, 26, 78%);
   }
 }
+
+.libro-lab-entry-point-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 24px;
+  height: 100px;
+  width: 100px;
+  background-color: rgba(0, 10, 26, 2%);
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 10, 26, 4%);
+  }
+}
+
+.libro-lab-entry-point-item-text {
+  margin-top: 6px;
+  line-height: 20px;
+  font-size: 14px;
+  color: rgba(0, 10, 26, 68%);
+}
+
+.libro-lab-entry-point-title {
+  font-weight: 500;
+  font-size: 18px;
+  margin-bottom: 12px;
+  color: rgba(0, 10, 26, 89%);
+}
+
+.libro-lab-entry-point-item-title {
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(0, 10, 26, 89%);
+  margin-bottom: 16px;
+}
+
+.libro-lab-entry-point-item-recent {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 52px;
+  width: 180px;
+  border: 1px solid rgba(0, 10, 26, 7%);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: transparent;
+    background-color: rgba(0, 10, 26, 4%);
+  }
+}
+
+.libro-lab-entry-point-item-recent-icon {
+  font-size: 24px;
+}
+
+.libro-lab-entry-point-item-recent-text {
+  margin-left: 8px;
+  color: rgba(0, 10, 26, 89%);
+}
+
+.libro-lab-entry-point-item-config {
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  cursor: pointer;
+  height: 32px;
+  width: 100px;
+  border: 1px solid rgba(0, 0, 0, 15%);
+  border-radius: 6px;
+}
+
+.libro-lab-entry-point-item-config-text {
+  margin-left: 4px;
+  color: rgba(0, 0, 0, 88%);
+  line-height: 22px;
+}
+
+.libro-lab-welcome-page-server-info {
+  height: 80px;
+  width: 400px;
+  background-color: rgba(0, 10, 26, 2%);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  padding: 16px 24px;
+}
+
+.libro-lab-welcome-page-server-info-title {
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(0, 10, 26, 89%);
+}
+
+.libro-lab-welcome-page-server-info-item {
+  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,17 +1,43 @@
-import { singleton, view } from '@difizen/mana-app';
+import { ServerConnection } from '@difizen/libro-jupyter';
+import {
+  inject,
+  singleton,
+  useInject,
+  view,
+  ViewInstance,
+  ViewManager,
+  ViewRender,
+} from '@difizen/mana-app';
 import { BaseView } from '@difizen/mana-app';
 import { forwardRef } from 'react';
 import { WelcomeIcon } from '../common/index.js';
+import { LayoutService } from '../layout/layout-service.js';
+import { EntryPointView } from './entry-point-view.js';
 
 import './index.less';
 
 export const WelcomeComponent = forwardRef(function WelcomeComponent() {
+  const instance = useInject<WelcomeView>(ViewInstance);
+  const layoutService = useInject(LayoutService);
+  const serverConnection = useInject(ServerConnection);
   return (
     <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 className="libro-lab-welcome-page-server-info">
+        <div className="libro-lab-welcome-page-server-info-title">服务连接信息</div>
+        <div className="libro-lab-welcome-page-server-info-item">
+          BaseURL: {`${serverConnection.settings.baseUrl}`}
+        </div>
+        <div className="libro-lab-welcome-page-server-info-item">
+          WsURL: {`${serverConnection.settings.wsUrl}`}
+        </div>
+      </div>
+      {layoutService.serverSatus !== 'loading' && (
+        <ViewRender view={instance.entryPointView}></ViewRender>
+      )}
     </div>
   );
 });
@@ -20,10 +46,21 @@ export const WelcomeComponent = forwardRef(function WelcomeComponent() {
 @view('welcome-view')
 export class WelcomeView extends BaseView {
   override view = WelcomeComponent;
-
-  constructor() {
+  viewManager: ViewManager;
+  entryPointView: EntryPointView;
+  constructor(@inject(ViewManager) viewManager: ViewManager) {
     super();
     this.title.icon = <WelcomeIcon />;
     this.title.label = '欢迎使用';
+    this.viewManager = viewManager;
+    this.viewManager
+      .getOrCreateView(EntryPointView)
+      .then((view) => {
+        this.entryPointView = view;
+        return;
+      })
+      .catch(() => {
+        //
+      });
   }
 }