fix: tab hidden

src/main/engine.ts

@@ -13,7 +13,7 @@ import { IpcEvents } from '../ipc-events';
  * enginePort 现在存的是完整的 url
  */
 export class TachybaseEngine {
-  private engineStatus = 'stopped';
+  private engineStatus = 'initialization';
   private enginePort = '';
   private child: ChildProcessWithoutNullStreams | null = null;
 

src/renderer/components/commands-runner.tsx

@@ -16,10 +16,19 @@ export const Runner = observer(
   class Runner extends React.Component<RunnerProps> {
     public render() {
       const { engineStatus, engineEnv } = this.props.appState;
-
       const props: ButtonProps = { disabled: false };
 
       switch (engineStatus) {
+        case 'initialization': {
+          props.text = 'Stop';
+          try {
+            window.ElectronFiddle.startEngine(engineEnv);
+          } catch (err) {
+            this.props.appState.pushError(err.message, err);
+          }
+          props.icon = 'stop';
+          break;
+        }
         case 'stopped': {
           props.text = 'Run';
           props.onClick = async () => {

src/renderer/components/commands.tsx

@@ -10,6 +10,7 @@ import { AppState } from '../state';
 
 interface CommandsProps {
   appState: AppState;
+  isTabbingHidden?: boolean;
 }
 
 /**
@@ -20,6 +21,9 @@ export const Commands = observer(
   class Commands extends React.Component<CommandsProps> {
     constructor(props: CommandsProps) {
       super(props);
+      this.state = {
+        isTabbingHidden: true,
+      };
     }
 
     private handleDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -29,53 +33,76 @@ export const Commands = observer(
       }
     };
 
+    componentDidMount() {
+      document.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    private handleKeyDown = (e: KeyboardEvent) => {
+      const isInputFocused = ['INPUT', 'TEXTAREA'].includes(
+        (document.activeElement?.tagName || '').toUpperCase(),
+      );
+
+      if (!isInputFocused && e.shiftKey && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        this.setState((prevState: CommandsProps) => ({
+          isTabbingHidden: !prevState.isTabbingHidden,
+        }));
+      }
+    };
+
     public render() {
       const { appState } = this.props;
       const { isBisectCommandShowing, title, isSettingsShowing } = appState;
-
+      const { isTabbingHidden } = this.state as CommandsProps;
       return (
-        <div
-          className={classNames(
-            'commands',
-            { 'is-mac': window.ElectronFiddle.platform === 'darwin' },
-            { 'tabbing-hidden': isSettingsShowing },
-          )}
-          onDoubleClick={this.handleDoubleClick}
-        >
-          <div>
-            <ControlGroup fill={true} vertical={false}>
-              <Button
-                onClick={() => window.ElectronFiddle.reloadWindows()}
-                icon="repeat"
-                title="Reload Window"
-              />
-              <Button
-                icon="cog"
-                title="Setting"
-                onClick={appState.toggleSettings}
-              />
-            </ControlGroup>
-            <ControlGroup fill={true} vertical={false}>
-              <Runner appState={appState} />
-            </ControlGroup>
-            {isBisectCommandShowing && (
+        !isTabbingHidden && (
+          <div
+            className={classNames(
+              'commands',
+              { 'is-mac': window.ElectronFiddle.platform === 'darwin' },
+              { 'tabbing-hidden': isSettingsShowing },
+            )}
+            onDoubleClick={this.handleDoubleClick}
+          >
+            <div>
               <ControlGroup fill={true} vertical={false}>
-                <BisectHandler appState={appState} />
+                <Button
+                  onClick={() => window.ElectronFiddle.reloadWindows()}
+                  icon="repeat"
+                  title="Reload Window"
+                />
+                <Button
+                  icon="cog"
+                  title="Setting"
+                  onClick={appState.toggleSettings}
+                />
               </ControlGroup>
-            )}
-            <ControlGroup fill={true} vertical={false}>
-              <Button
-                active={appState.isConsoleShowing}
-                icon="console"
-                text="Console"
-                onClick={appState.toggleConsole}
-              />
-            </ControlGroup>
+              <ControlGroup fill={true} vertical={false}>
+                <Runner appState={appState} />
+              </ControlGroup>
+              {isBisectCommandShowing && (
+                <ControlGroup fill={true} vertical={false}>
+                  <BisectHandler appState={appState} />
+                </ControlGroup>
+              )}
+              <ControlGroup fill={true} vertical={false}>
+                <Button
+                  active={appState.isConsoleShowing}
+                  icon="console"
+                  text="Console"
+                  onClick={appState.toggleConsole}
+                />
+              </ControlGroup>
+            </div>
+            {window.ElectronFiddle.platform === 'darwin' ? (
+              <div className="title">{title}</div>
+            ) : undefined}
           </div>
-          {window.ElectronFiddle.platform === 'darwin' ? (
-            <div className="title">{title}</div>
-          ) : undefined}
-        </div>
+        )
       );
     }
   },

src/renderer/state.ts

@@ -174,7 +174,12 @@ export class AppState {
   public isDeletingAll = false;
 
   /// -- Engine --
-  public engineStatus: 'stopped' | 'ready' | 'starting' | 'remote' = 'stopped';
+  public engineStatus:
+    | 'stopped'
+    | 'initialization'
+    | 'ready'
+    | 'starting'
+    | 'remote' = 'stopped';
   public enginePort = '';
   public engineEnv =
     (localStorage.getItem(GlobalSetting.engineEnv) as string) ??