feat: support to customize welcome page (#202)

Author: mortalYoung

src/extensions/editor/statusBarView/index.tsx

@@ -46,6 +46,7 @@ export interface IEditor {
      */
     current?: IEditorGroup | null;
     groups?: IEditorGroup[];
+    entry?: React.ReactNode;
 }
 
 export const EDITOR_MENU_CLOSE_TO_RIGHT = 'editor.closeToRight';
@@ -125,12 +126,15 @@ export class EditorGroupModel<E = any, T = any> implements IEditorGroup<E, T> {
 export class EditorModel implements IEditor {
     public current: IEditorGroup | null;
     public groups: IEditorGroup[];
+    public entry: React.ReactNode;
 
     constructor(
         current: IEditorGroup | null = null,
-        groups: IEditorGroup[] = []
+        groups: IEditorGroup[] = [],
+        entry: React.ReactNode
     ) {
         this.current = current;
         this.groups = groups;
+        this.entry = entry;
     }
 }

src/model/workbench/editor.ts

@@ -24,6 +24,10 @@ export interface IEditorService extends Component<IEditor> {
         group: IEditorGroup
     ): IEditorTab<T> | undefined;
     updateTab(tab: IEditorTab, groupId: number): IEditorTab;
+    /**
+     * Specify a entry page for editor
+     */
+    setEntry(component: React.ReactNode): void;
     closeTab(tabId: string, groupId: number): void;
     closeOthers(tab: IEditorTab, groupId: number): void;
     closeToRight(tab: IEditorTab, groupId: number): void;
@@ -68,6 +72,12 @@ export class EditorService
         this.state = container.resolve(EditorModel);
     }
 
+    public setEntry(component: React.ReactNode) {
+        this.setState({
+            entry: component,
+        });
+    }
+
     public getTabById<T>(
         tabId: string,
         group: IEditorGroup

src/services/workbench/editorService.ts

@@ -13,6 +13,7 @@ export function Editor(props: IEditor & IEditorController) {
     const {
         groups = [],
         current,
+        entry = <Welcome />,
         onClickContextMenu,
         onCloseTab,
         onMoveTab,
@@ -73,7 +74,7 @@ export function Editor(props: IEditor & IEditorController) {
 
     return (
         <div className={defaultEditorClassName}>
-            {current ? renderGroups() : <Welcome />}
+            {current ? renderGroups() : entry}
         </div>
     );
 }

src/workbench/editor/editor.tsx

@@ -0,0 +1,35 @@
+.entry {
+    align-items: center;
+    background-color: var(--panel-background);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+
+    * {
+        font-family: monospace;
+    }
+
+    dl {
+        border-collapse: separate;
+        border-spacing: 13px 17px;
+        color: hsla(0, 0%, 100%, 0.6);
+        cursor: default;
+        display: table-row;
+        font-size: 13px;
+        margin: 0;
+
+        dt {
+            display: table-cell;
+            letter-spacing: 0.04em;
+            text-align: right;
+        }
+
+        dd {
+            display: table-cell;
+            margin-left: 12px;
+            text-align: left;
+        }
+    }
+}

stories/extensions/test/entry.scss

@@ -0,0 +1,26 @@
+import React from 'react';
+import './entry.scss';
+
+export const Entry = () => {
+    return (
+        <div className="entry">
+            <h1>molecule</h1>
+            <dl>
+                <dt>显示所有命令</dt>
+                <dd> command + b</dd>
+            </dl>
+            <dl>
+                <dt>打开文件或文件夹</dt>
+                <dd> command + b</dd>
+            </dl>
+            <dl>
+                <dt>打开最近文件</dt>
+                <dd> command + b</dd>
+            </dl>
+            <dl>
+                <dt>新的无标题文件</dt>
+                <dd> command + b</dd>
+            </dl>
+        </div>
+    );
+};

stories/extensions/test/entry.tsx

@@ -9,6 +9,7 @@ import {
 import { IExtension } from 'mo/model';
 
 import TestPane from './testPane';
+import { Entry } from './entry';
 
 export const ExtendTestPane: IExtension = {
     activate() {
@@ -30,6 +31,8 @@ export const ExtendTestPane: IExtension = {
         molecule.activityBar.addBar(newItem);
         molecule.sidebar.addPane(testSidePane);
 
+        molecule.editor.setEntry(<Entry />);
+
         molecule.settings.onChangeConfiguration(async (value) => {
             console.log('onChangeConfiguration:', value);
             molecule.settings.update(value);