feat: add function create

Author: LeezQ

packages/next-web/components/Icon/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function Icon(props: { children: React.ReactNode; onClick: () => void }) {
+  return (
+    <span
+      onClick={props.onClick}
+      className="hover:bg-slate-200 rounded inline-block text-center"
+      style={{ width: 20, height: 20, lineHeight: "18px" }}
+    >
+      {props.children}
+    </span>
+  );
+}

packages/next-web/pages/app/[app_id]/functions/index.module.scss

@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   margin-bottom: 12px;
+  padding: 0 12px;
   justify-content: space-between;
   border-top: 1px solid #eaeaea;
   border-bottom: 1px solid #eaeaea;

packages/next-web/pages/app/[app_id]/functions/index.tsx

@@ -2,7 +2,7 @@
  * cloud functions index page
  ***************************/
 
-import React from "react";
+import React, { useEffect } from "react";
 import { AttachmentIcon } from "@chakra-ui/icons";
 import { Button, HStack } from "@chakra-ui/react";
 import Editor from "@monaco-editor/react";
@@ -23,7 +23,13 @@ import useFunctionStore from "./store";
 import commonStyles from "./index.module.scss";
 
 function FunctionPage() {
-  const store = useFunctionStore((store) => store);
+  const { initFunctionPage, currentFunction } = useFunctionStore((store) => store);
+
+  useEffect(() => {
+    initFunctionPage();
+
+    return () => {};
+  }, [initFunctionPage]);
 
   return (
     <div className="flex h-screen" style={{ marginLeft: SiderBarWidth }}>
@@ -57,7 +63,7 @@ function FunctionPage() {
           </div>
         </div>
         <div className="flex-1">
-          <Editor height="100%" defaultLanguage="javascript" defaultValue={funcString} />
+          <Editor height="100%" defaultLanguage="javascript" value={currentFunction?.code} />
         </div>
         <div style={{ height: 300 }}>
           <DebugPanel />

packages/next-web/pages/app/[app_id]/functions/mods/DebugPannel/index.tsx

@@ -11,7 +11,7 @@ export default function DebugPanel() {
         </HStack>
       </div>
       <div className="flex flex-1">
-        <div style={{ width: 500 }} className="border border-r-indigo-400 ">
+        <div style={{ width: 500 }} className="border-r border-r-slate-300 ">
           <div className="flex p-2">
             <Button size="sm" className="mr-2">
               GET

packages/next-web/pages/app/[app_id]/functions/mods/DependecePanel/AddDepenceModal/index.module.scss

@@ -0,0 +1,61 @@
+import React from "react";
+import { AddIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  Center,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+
+import Icon from "@/components/Icon";
+
+function AddDepenceModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const initialRef = React.useRef(null);
+
+  return (
+    <>
+      <Icon onClick={onOpen}>
+        <AddIcon />
+      </Icon>
+
+      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Create your account</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <FormControl>
+              <FormLabel>First name</FormLabel>
+              <Input ref={initialRef} placeholder="First name" />
+            </FormControl>
+
+            <FormControl mt={4}>
+              <FormLabel>Last name</FormLabel>
+              <Input placeholder="Last name" />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3}>
+              Save
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default AddDepenceModal;

packages/next-web/pages/app/[app_id]/functions/mods/DependecePanel/AddDepenceModal/index.tsx

@@ -6,22 +6,24 @@ import React from "react";
 import { AttachmentIcon, WarningIcon } from "@chakra-ui/icons";
 import { HStack, Input } from "@chakra-ui/react";
 
+import AddDepenceModal from "./AddDepenceModal";
+
 import commonStyles from "../../index.module.scss";
 import styles from "./index.module.scss";
 
 export default function DependecyList() {
   return (
     <div>
       <div className={commonStyles.sectionHeader + " flex justify-between"}>
-        <h4 className="m-2">NPM 依赖</h4>
+        <h4>NPM 依赖</h4>
+        <HStack spacing="2">
+          <AddDepenceModal />
+        </HStack>
       </div>
       <div>
-        <div className="flex items-center m-2 ">
+        {/* <div className="flex items-center m-2 ">
           <Input size="sm" className="mr-2" />
-          <HStack spacing="2">
-            <WarningIcon />
-          </HStack>
-        </div>
+        </div> */}
 
         <ul className={styles.functionList + " mb-4"}>
           <li>

packages/next-web/pages/app/[app_id]/functions/mods/DependecePanel/index.tsx

@@ -16,24 +16,19 @@ import { useQuery } from "@tanstack/react-query";
 import request from "@/utils/request";
 
 import useFunctionStore from "../../store";
-import CreateModal from "../CreateModal";
+
+import CreateModal from "./CreateModal";
 
 import commonStyles from "../../index.module.scss";
 import styles from "./index.module.scss";
 
 export default function FunctionList() {
   const store = useFunctionStore((store) => store);
 
-  const { data } = useQuery(["functions"], () => {
-    return request.get("/api/function_list");
-  });
-
-  console.log(123, data);
-
   return (
     <div>
       <div className={commonStyles.sectionHeader + " flex justify-between"}>
-        <h4 className="m-2">函数列表</h4>
+        <h4>函数列表</h4>
         <HStack spacing="2">
           <SunIcon />
           <CreateModal />
@@ -70,13 +65,13 @@ export default function FunctionList() {
 
       <h5 className="m-2">所有函数</h5>
       <ul className={styles.functionList + " mb-4"}>
-        {(data?.data || []).map((func: any) => {
+        {(store.allFunctionList || []).map((func: any) => {
           return (
             <li
-              className={func.id === store.currentFunction ? styles.active : ""}
+              className={func._id === store.currentFunction?._id ? styles.active : ""}
               key={func._id}
               onClick={() => {
-                store.setCurrentFunction(func._id);
+                store.setCurrentFunction(func);
               }}
             >
               <div>

packages/next-web/pages/app/[app_id]/functions/mods/CreateModal/index.tsx renamed to packages/next-web/pages/app/[app_id]/functions/mods/FunctionPanel/CreateModal/index.tsx

@@ -2,67 +2,57 @@ import create from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
+import request from "@/utils/request";
+
+type TFunction =
+  | {
+      _id: string;
+      name: string;
+      code: string;
+      label: string;
+      hash: string;
+      tags: string[];
+      description: string;
+      enableHTTP: boolean;
+      status: number;
+      triggers: any[];
+      debugParams: string;
+      version: number;
+      created_at: Date;
+      updated_at: Date;
+      created_by: string;
+      appid: string;
+    }
+  | undefined;
+
 type State = {
-  currentFunction: number;
+  currentFunction: TFunction;
   favFunctoinList: any[];
-  allFunctionList: any[];
+  allFunctionList?: any[];
+  initFunctionPage: () => void;
 
-  setCurrentFunction: (currentFunction: number) => void;
+  setCurrentFunction: (currentFunction: TFunction) => void;
 };
 
 const useFunctionStore = create<State>()(
   devtools(
     immer((set) => ({
-      currentFunction: 0,
-      favFunctoinList: [
-        {
-          id: "123",
-          name: "addToto",
-        },
-        {
-          id: "222",
-          name: "antDirt",
-        },
-        {
-          id: "333",
-          name: "getUser",
-        },
-        {
-          id: "444",
-          name: "getQrCode",
-        },
-        {
-          id: "555",
-          name: "getUxserInfo",
-        },
-      ],
+      currentFunction: undefined,
+      favFunctoinList: [],
 
-      allFunctionList: [
-        {
-          id: "123",
-          name: "addToto",
-        },
-        {
-          id: "222",
-          name: "antDirt",
-        },
-        {
-          id: "333",
-          name: "getUser",
-        },
-        {
-          id: "444",
-          name: "getQrCode",
-        },
-        {
-          id: "555",
-          name: "getUxserInfo",
-        },
-      ],
+      allFunctionList: [],
+
+      initFunctionPage: async () => {
+        const res = await request.get("/api/function_list");
+        set((state) => {
+          state.allFunctionList = res.data;
+          state.currentFunction = res.data[0];
+        });
+      },
 
       setCurrentFunction: (currentFunction) =>
         set((state) => {
-          state.currentFunction = currentFunction;
+          state.currentFunction = JSON.parse(JSON.stringify(currentFunction));
           return state;
         }),
     })),