feat: add monaco editor

labring · Nov 4, 2022 · 16a058f · 16a058f
1 parent 8e034a2
commit 16a058f
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 51 deletions.
diff --git a/packages/next-web/package.json b/packages/next-web/package.json
@@ -10,9 +10,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "^2.3.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@monaco-editor/react": "^4.4.6",
     "@tanstack/react-query": "^4.13.0",
     "axios": "^1.1.3",
     "framer-motion": "^6",

diff --git a/packages/next-web/pages/api/app.ts b/packages/next-web/pages/api/app.ts
@@ -1,8 +1,10 @@
 import { NextApiRequest, NextApiResponse } from "next";
-
 import { JsonResp } from "./response";
 
-export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
+export default async function handler(
+  req: NextApiRequest,
+  resp: NextApiResponse
+) {
   JsonResp(
     {
       created: [
@@ -153,6 +155,6 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
       ],
       joined: [],
     },
-    resp,
+    resp
   );
 }
diff --git a/packages/next-web/pages/api/response.ts b/packages/next-web/pages/api/response.ts
@@ -1,15 +1,15 @@
-import type { NextApiResponse } from "next";
+import type { NextApiResponse } from 'next';
 
 export enum ResCode {
-  "success",
+  'success'
 }
 
 export enum ResStatusCode {
-  "status_200" = 200,
+  'status_200' = 200
 }
 
 export enum ResMessage {
-  "success" = "success",
+  'success' = 'success'
 }
 
 export type Resp = {
@@ -22,7 +22,7 @@ export type Resp = {
 
 const CommonResp = (
   { code, message, data, statusCode }: Resp,
-  resp?: NextApiResponse,
+  resp?: NextApiResponse
 ): Response | void => {
   const resp_status = statusCode ? statusCode : code;
   const resp_data = { code: code, message: message, data: data };
@@ -35,31 +35,31 @@ const CommonResp = (
   return new Response(JSON.stringify(resp_data), {
     status: resp_status,
     headers: {
-      "content-type": "application/json",
-    },
+      'content-type': 'application/json'
+    }
   });
 };
 
 const BadRequestResp = (resp?: NextApiResponse) =>
-  CommonResp({ code: 400, message: "Bad Request Method" }, resp);
+  CommonResp({ code: 400, message: 'Bad Request Method' }, resp);
 const NotFoundResp = (resp?: NextApiResponse) =>
-  CommonResp({ code: 404, message: "Method Not Found" }, resp);
+  CommonResp({ code: 404, message: 'Method Not Found' }, resp);
 const UnprocessableResp = (str: string, resp?: NextApiResponse) =>
-  CommonResp({ code: 404, message: "Not Found: " + str }, resp);
+  CommonResp({ code: 404, message: 'Not Found: ' + str }, resp);
 const MethodNotAllowedResp = (str: string, resp?: NextApiResponse) =>
-  CommonResp({ code: 405, message: "Method Not Allowed: " + str }, resp);
+  CommonResp({ code: 405, message: 'Method Not Allowed: ' + str }, resp);
 const InternalErrorResp = (str: string, resp?: NextApiResponse) =>
-  CommonResp({ code: 500, message: "Internal Server Error: " + str }, resp);
+  CommonResp({ code: 500, message: 'Internal Server Error: ' + str }, resp);
 
 const JsonResp = (data: any, resp?: NextApiResponse) =>
-  CommonResp({ code: 200, message: "ok", data: data, statusCode: 200 }, resp);
+  CommonResp({ code: 200, message: 'ok', data: data, statusCode: 200 }, resp);
 
 export {
   BadRequestResp,
-  CommonResp,
-  InternalErrorResp,
-  JsonResp,
-  MethodNotAllowedResp,
   NotFoundResp,
   UnprocessableResp,
+  MethodNotAllowedResp,
+  InternalErrorResp,
+  CommonResp,
+  JsonResp
 };
diff --git a/packages/next-web/pages/index.tsx b/packages/next-web/pages/index.tsx
@@ -1,22 +1,96 @@
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-import { Button, Input } from "@chakra-ui/react";
+import {
+  Button,
+  Center,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Link,
+  Spinner,
+} from "@chakra-ui/react";
+import { AddIcon, CopyIcon, Search2Icon } from "@chakra-ui/icons";
+
+import Editor from "@monaco-editor/react";
+
 import React from "react";
 import Layout from "../components/Layout";
 import { useTranslation } from "next-i18next";
+import request from "../utils/request";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Index() {
   const { t } = useTranslation("common");
 
+  const appListRes = useQuery(["getAppDetailInfo"], () => {
+    return request.get("/api/app");
+  });
+
   return (
     <Layout>
-      <div className="w-9/12 mt-10 mx-auto">
-        <div className="flex">
+      <div className="w-8/12 mt-10 mx-auto">
+        <div className="flex mb-8">
           <div className="bg-white flex-1 mr-2">
-            <Input placeholder={t("ViewBlog")} />
+            <InputGroup>
+              <InputLeftElement
+                style={{ height: 48 }}
+                pointerEvents="none"
+                children={<Search2Icon color="gray.300" />}
+              />
+              <Input placeholder={t("Search")} size="lg" />
+            </InputGroup>
           </div>
-          <Button>{t("Welcome")}</Button>
+          <Button
+            size={"lg"}
+            style={{ padding: "0 40px" }}
+            leftIcon={<AddIcon />}
+          >
+            {t("NewApp")}
+          </Button>
         </div>
+
+        <Editor
+          height="100px"
+          defaultLanguage="javascript"
+          defaultValue="// some comment"
+        />
+
+        {appListRes.isLoading ? (
+          <Center>
+            <Spinner size="xl" />
+          </Center>
+        ) : (
+          <div>
+            {(appListRes.data?.data?.created || []).map((item: any) => {
+              return (
+                <div
+                  key={item.appid}
+                  className="flex justify-between items-center p-4 bg-white rounded-lg shadow mb-8"
+                >
+                  <div style={{ width: 300 }}>
+                    <Link href="https://chakra-ui.com" isExternal>
+                      <span className="text-base font-semibold">
+                        {item.name}
+                      </span>
+                    </Link>
+
+                    <p>
+                      App ID: {item.appid} <CopyIcon />
+                    </p>
+                  </div>
+                  <div className="flex-1">
+                    <p>规格: {item.spec.name}</p>
+                    <p>创建时间: {item.created_at}</p>
+                  </div>
+                  <div>
+                    <a className="mr-4">开发</a>
+                    <a>配置</a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
       </div>
     </Layout>
   );