@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/pages/index.tsx

@@ -0,0 +1,450 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { lazy } from '@loadable/component';
+import { useOT } from '~/hooks';
+// import * as ot from 'ot';
+import styled from '@emotion/styled';
+// import { animated, useSpring } from 'react-spring';
+import Terminal from '~/components/Terminal';
+import Tabs from '~/components/Tabs';
+import create from 'zustand';
+import { css } from '@emotion/css';
+import { Avatar } from '~/components';
+import Skeleton from '~/components/Skeleton';
+import { oTStore } from '~/stores';
+// import { FileTree } from '~/components/FileTree';
+import Console from '~/components/Console';
+import ToolBar from '~/components/ToolBar';
+// import { TreeItemIndex } from 'react-complex-tree/lib/esm/types';
+import OutputBrowser from '~/components/OutputBrowser';
+import { ITerminalOptions } from 'xterm';
+import { replay } from '~/helpers/collections/replay';
+import LiveContent from '~/components/LiveContent';
+import { userListStore, userStore } from '~/stores/oTStore';
+
+export enum LanguageIcon {
+  js = 'javascript',
+  ts = 'typescript',
+  typescript = 'typescript',
+  tsx = 'typescript',
+  python = 'python',
+  json = 'json',
+  ruby = 'ruby',
+  rb = 'ruby',
+  java = 'java',
+  md = 'markdown',
+  erb = 'erb',
+  css = 'css',
+  ru = 'ruby',
+  ejs = 'html',
+  html = 'html',
+}
+const useIndexState = create<{
+  isFolded: boolean;
+  setFold: (arg: boolean) => void;
+}>((set) => ({
+  isFolded: false,
+  setFold: (arg) => set({ isFolded: arg }),
+}));
+
+const LazyEditorComponent = lazy(
+  async () => (await import('../components/Editor')).Editor,
+);
+const LazyTreeComponent = lazy(
+  async () => (await import('../components/FileTree')).FileTree,
+);
+
+/*! purgecss start ignore */
+
+const MainLayout = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #202327;
+  .lan-iconfont {
+    font-size: 40px;
+  }
+  .replay-button {
+    margin-left: 20px;
+    box-shadow: 0 0 5px aliceblue;
+    padding: 7px;
+    border-radius: 5px;
+    font-size: 12px;
+    background: #fff;
+    color: #000;
+    transition: 0.2s all;
+    &:active {
+      box-shadow: 0 0 0 aliceblue;
+      margin-right: 8px;
+      margin-top: 5px;
+    }
+  }
+`;
+/*! purgecss end ignore */
+
+const PreviewWrapper = styled.div`
+  height: 40vh;
+  color: #333333;
+  background-color: #eaeaea;
+`;
+
+const TermWrapper = styled.div`
+  height: calc(100% - 40vh - 51px);
+  width: 100%;
+`;
+
+const HeaderLayout = styled.header`
+  width: 100%;
+`;
+
+const ContainerLayout = styled.div`
+  height: calc(100% - 4.625rem);
+  section {
+    height: calc(100% - 0.625rem);
+  }
+`;
+
+const IDELayout = styled.div`
+  height: 100%;
+`;
+
+const RunnerLayout = styled.section`
+  background: #202327;
+  width: 500px;
+`;
+
+const Index = (props) => {
+  const tabItems = [
+    {
+      eventKey: 'console',
+      itemName: 'Console',
+    },
+    {
+      eventKey: 'shell',
+      itemName: 'Shell',
+    },
+  ];
+  const defaultOptions: ITerminalOptions = {
+    convertEol: true,
+    fontSize: 12,
+    fontFamily: 'Monaco, Menlo, monospace',
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorWidth: 1,
+    cursorStyle: 'block',
+    rightClickSelectsWord: true,
+    theme: {
+      background: '#1E1E1E',
+    },
+  };
+
+  // console.log(props);
+  const isFolded = useIndexState.getState().isFolded;
+  const playgroundInfo = oTStore((state) => state.playgroundInfo);
+
+  const [active, setActive] = useState('shell');
+  const [url, setUrl] = useState(playgroundInfo.url);
+  const { socket } = useOT.getState();
+  let terminalTabsTimer = 1;
+  const [consoleComp, setConsoleComp] = useState(<></>);
+  useEffect(() => {
+    if (terminalTabsTimer && active === 'console') {
+      terminalTabsTimer--;
+      setConsoleComp(<Console options={defaultOptions} fitHook={isFolded} />);
+    }
+  }, [active]);
+
+  useEffect(() => {
+    props.replay && replay();
+  }, [props.replay]);
+
+  useEffect(() => {
+    setUrl(playgroundInfo.url);
+  }, [playgroundInfo]);
+  useEffect(() => {
+    props.playgroundId &&
+      socket?.emit(
+        'playgroundInfo',
+        JSON.stringify({
+          messageId: '1',
+          playgroundId: props.playgroundId,
+        }),
+      );
+    // temp code
+  }, [props.playgroundId]);
+  // useEffect(() => {
+  //   // fetch('http://smb.dev.paas.dao42.com:9998/PaaS/users')
+  //   // fetch('/paas/users')
+  //   //   .then((d) => d.json())
+  //   //   .then((d) => {
+  //   //     console.log(d);
+  //   //   });
+  // }, [props.users]);
+
+  return (
+    <>
+      <MainLayout className="flex flex-col">
+        {/* 头部 */}
+        <HeaderComponent />
+        {/* 内容区 */}
+        <ContainerLayout className="flex flex-1 mt-2.5 flex-row">
+          {/* 左侧栏 */}
+
+          <section className="flex flex-row">
+            <SliderComponent />
+            <TreeComponent />
+            {/* 文件树 */}
+          </section>
+          {/* 编辑器与终端 */}
+          <section className="bg-codezone-black rounded-sm mx-3.5 flex-1 flex flex-col">
+            <IDELayout>
+              {/* <Skeleton count={10} /> */}
+              <Suspense fallback={<Skeleton count={10} />}>
+                <LazyEditorComponent />
+              </Suspense>
+            </IDELayout>
+          </section>
+
+          {/* 运行框 */}
+          <RunnerLayout
+            // className={`rounded-sm mr-2.5  ${!isFolded ? 'max-w-5/12' : 'w-0'}`}
+            className={`rounded-sm mr-2.5`}
+          >
+            {/* <PreviewWrapper className="mb-2.5 relative">
+              <OutputBrowser url={url} />
+            </PreviewWrapper> */}
+
+            <Tabs
+              className="mb-1"
+              appearance="tabs"
+              activeKey={active}
+              onSelect={setActive}
+              tabItems={tabItems}
+            />
+            <Suspense fallback={<Skeleton />}>
+              <TermWrapper>
+                <div
+                  key="console"
+                  className=""
+                  style={{
+                    display: active === 'console' ? 'block' : 'none',
+                    height: '100%',
+                    width: '100%',
+                  }}
+                >
+                  {consoleComp}
+                </div>
+                <div
+                  key="terminal"
+                  style={{
+                    display: active === 'console' ? 'none' : 'block',
+                    height: '100%',
+                    width: '100%',
+                  }}
+                >
+                  <Terminal options={defaultOptions} fitHook={isFolded} />
+                </div>
+              </TermWrapper>
+            </Suspense>
+          </RunnerLayout>
+        </ContainerLayout>
+      </MainLayout>
+    </>
+  );
+};
+
+const HeaderComponent = () => {
+  // const { userList } = userListStore.getState();
+  const userList = userListStore((state) => state.userList);
+  const appStatus = oTStore((state) => state.appStatus);
+  const globalData = oTStore((state) => state.globalData);
+  const { setAppStatus } = oTStore.getState();
+  const user = userStore.getState().userInfo;
+  // const [isRecording, setIsRecording] = useState<boolean>(false);
+  // console.log(userList);
+  return userList ? (
+    <HeaderLayout className="relative bg-codezone-black h-16 flex px-9 flex-shrink-0 justify-between">
+      <div className="flex">
+        <Avatar
+          user={user}
+          onClick={() => {
+            const minePage = window.open(
+              '//github.com/login/oauth/authorize?client_id=7333fa72cf5753ba016e&redirect_uri=http://localhost:3000/auth/github',
+              'targetWindow',
+              `toolbar=no,
+              location=no,
+              status=no,
+              menubar=no,
+              scrollbars=yes,
+              resizable=yes,
+              width=500,
+              height=500`,
+            );
+            minePage.addEventListener(
+              'load',
+              () => {
+                minePage.close();
+              },
+              false,
+            );
+          }}
+        />
+        {/* playgroundInfo */}
+        <div className="flex" style={{ color: '#fff', marginLeft: 20 }}>
+          <span className="self-center">{user.name}</span>
+          <i className="self-center" style={{ margin: '0 10px' }} />
+          <i
+            className={`self-center
+
+              devicon-${oTStore
+                .getState()
+                .playgroundInfo?.language?.toLowerCase()}-plain
+            lan-iconfont
+            colored`}
+          />
+
+          {/* <span className="self-center mr-2.5">{'{ playground_info }'}</span> */}
+          {/* <span className="self-center mr-2.5">{'{ playground_info }'}</span> */}
+          <ToolBar />
+          {!globalData.isRecording ? (
+            <button
+              className="replay-button self-center"
+              style={{
+                color: appStatus === 'replay' ? 'rgb(48, 89, 182)' : '#000',
+              }}
+              onClick={() => {
+                if (appStatus !== 'replay') {
+                  replay();
+                }
+
+                if (appStatus === 'replay') {
+                  replay('pause');
+                }
+              }}
+            >
+              {appStatus === 'replay'
+                ? '暂停播放'
+                : appStatus === 'pause'
+                ? '继续播放'
+                : '播放'}
+            </button>
+          ) : null}
+
+          {appStatus === 'replay' ? (
+            <button
+              className="replay-button self-center"
+              onClick={() => {
+                replay('stop');
+              }}
+            >
+              {appStatus === 'replay' ? '停止播放' : null}
+            </button>
+          ) : null}
+
+          {appStatus !== 'replay' ? (
+            <button
+              className="replay-button self-center"
+              // style={{
+              //   color: appStatus === 'replay' ? 'rgb(48, 89, 182)' : '#000',
+              // }}
+              onClick={() => {
+                if (!globalData.isRecording) {
+                  oTStore.getState().setGlobalData({
+                    isRecording: true,
+                  });
+                  useOT.getState().socket.emit('globalData', {
+                    isRecording: true,
+                  });
+                  return;
+                }
+                // oTStore.getState().setGlobalData({
+                //   isRecording: false,
+                // });
+                // useOT.getState().socket.emit('globalData', {
+                //   isRecording: false,
+                // });
+              }}
+            >
+              {globalData.isRecording ? '重新录制' : '开始录制'}
+            </button>
+          ) : null}
+
+          {globalData.isRecording ? (
+            <button
+              className="replay-button self-center"
+              onClick={() => {
+                oTStore.getState().setGlobalData({
+                  isRecording: false,
+                });
+                useOT.getState().socket.emit('globalData', {
+                  isRecording: false,
+                });
+                setAppStatus('code');
+                // replay('stop');
+              }}
+            >
+              停止录制
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <LiveContent />
+
+      <div className="items-center flex relative">
+        {userListStore.getState().userList.map((item, index) => {
+          return (
+            <div className="-ml-2.5 z-0 avatar-hover" key={index}>
+              <Avatar user={item} />
+            </div>
+          );
+        })}
+      </div>
+    </HeaderLayout>
+  ) : null;
+};
+
+const SliderComponent = () => {
+  const setFold = useIndexState((state) => state.setFold);
+  const isFolded = useIndexState((state) => state.isFolded);
+
+  return (
+    <section className="bg-codezone-black rounded-sm w-14 ml-2.5 flex flex-col pt-5 flex-shrink-0">
+      <i
+        onClick={() => setFold(!isFolded)}
+        className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 snippets"
+      />
+      {/* <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 Field-time"></i>
+      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 CodeSandbox"></i>
+      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 database"></i>
+      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 cloud-upload"></i>
+      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 setting"></i> */}
+    </section>
+  );
+};
+
+const TreeComponent = () => {
+  const isFolded = useIndexState.getState().isFolded;
+  return (
+    <section
+      className={`bg-codezone-black rounded-sm ml-2.5 transition-all flex-shrink-0 min-w-52 ${
+        !isFolded ? 'visible' : 'invisible'
+      } ${!isFolded ? 'w-52' : 'w-0'}`}
+      // } ${!isFolded ? 'w-52' : 'w-0'}`}
+    >
+      <header
+        className={css`
+          margin: 15px;
+          color: #fff;
+          visibility: ${!isFolded ? 'visible' : 'hidden'};
+        `}
+      >
+        文件
+      </header>
+      <div style={{ height: 'calc(100% - 52px)' }}>
+        <Suspense fallback={<Skeleton count={5} />}>
+          <LazyTreeComponent />
+        </Suspense>
+      </div>
+    </section>
+  );
+};
+export default Index;

package/src/public/dev.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DaoPaaS</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
+
+</head>
+<body>
+    <main>
+        <div class="edit-container"></div>
+    </main>
+    <script>
+      window.onload = () => {
+        var qs = new URLSearchParams(document.location.search.substring(1));
+        window.daopaas = new DaoPaaS({
+          ticket: qs.get('ticket'),
+          playgroundId: qs.get('playgroundId'),
+          userId: qs.get('userId'),
+          tenantId: qs.get('tenantId'),
+          username: qs.get('username')
+        });
+        daopaas.Page({
+            container: document.querySelector('main'),
+                // props: {
+                //     playgroundId: search,
+                // }
+            }
+        )
+      }
+    </script>
+</body>
+</html>

package/src/public/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DaoPaaS</title>
+    <style>
+        main {
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .edit-container {
+            height: 100%;
+        }
+    </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
+</head>
+<body>
+    <main>
+        <div class="edit-container"></div>
+    </main>
+    <script src="/dist/daoPaaS.js"></script>
+    <script>
+      window.onload = () => {
+        var qs = new URLSearchParams(document.location.search.substring(1));
+        window.daopaas = new DaoPaaS({
+          ticket: qs.get('ticket'),
+          playgroundId: qs.get('playgroundId'),
+          userId: qs.get('userId'),
+          tenantId: qs.get('tenantId'),
+          username: qs.get('username')
+        });
+        daopaas.Page({
+            container: document.querySelector('main'),
+                // props: {
+                //     playgroundId: search,
+                // }
+            }
+        )
+      }
+    </script>
+</body>
+</html>

package/src/public/sdkserver.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DaoPaaS</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
+
+</head>
+<body>
+    <main></main>
+    <script>
+      window.onload = () => {
+        var qs = new URLSearchParams(document.location.search.substring(1));
+        console.log(DaoPaaS);
+        var daopaas = new DaoPaaS({
+          ticket: qs.get('ticket'),
+          playgroundId: qs.get('playgroundId'),
+          userId: qs.get('userId'),
+          tenantId: qs.get('tenantId'),
+          username: qs.get('username')
+        });
+        daopaas.Page({
+            container: document.querySelector('main'),
+                // props: {
+                //     playgroundId: search,
+                // }
+            }
+        )
+      }
+
+    </script>
+</body>
+</html>

package/src/stores/index.tsx

@@ -0,0 +1 @@
+export { oTStore } from './oTStore';