feat: add function panel

packages/next-web/package.json

@@ -13,17 +13,19 @@
     "@chakra-ui/react": "^2.3.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@lingui/cli": "3.14.0",
+    "@lingui/macro": "3.14.0",
+    "@lingui/react": "3.14.0",
     "@monaco-editor/react": "^4.4.6",
     "@tanstack/react-query": "^4.13.0",
     "axios": "^1.1.3",
     "framer-motion": "^6",
+    "immer": "^9.0.16",
     "next": "12.3.1",
-    "@lingui/cli": "3.14.0",
-    "@lingui/macro": "3.14.0",
-    "@lingui/react": "3.14.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.55.0"
+    "sass": "^1.55.0",
+    "zustand": "^4.1.4"
   },
   "devDependencies": {
     "@types/node": "18.11.7",

packages/next-web/pages/app/[id]/functions/[function_id].tsx

@@ -6,15 +6,19 @@ import Editor from "@monaco-editor/react";
 import React from "react";
 import FunctionLayout from "@/components/Layout/Function";
 import SiderBar from "../mods/SiderBar";
-import FunctionList from "./mods/FunctionList";
+import FunctionList from "./mods/FunctionPanel";
 import { AttachmentIcon } from "@chakra-ui/icons";
-import { Button } from "@chakra-ui/react";
+import { Button, HStack } from "@chakra-ui/react";
 
 import funcString from "./mockFuncTextString";
-import DependecyList from "./mods/DependecyList";
+import DependecyList from "./mods/DependecePanel";
 import { SiderBarWith } from "@/constants/index";
+import useFunctionStore from "./store";
+import DebugPanel from "./mods/DebugPannel";
 
 function FunctionPage() {
+  const store = useFunctionStore((store) => store);
+
   return (
     <div className="bg-white">
       <SiderBar />
@@ -24,29 +28,38 @@ function FunctionPage() {
           <DependecyList />
         </div>
         <div className="flex flex-1 flex-col h-screen">
-          <div>
-            <div className="flex justify-between px-4">
-              <div>
+          <div style={{ borderBottom: "1px solid #efefef" }}>
+            <div className="flex justify-between px-2">
+              <HStack spacing="2">
                 <AttachmentIcon />
-                addToto.js
+                <span>addToto.js</span>
                 <span>M</span>
-              </div>
+              </HStack>
 
-              <div>
-                调用地址：https://qcphsd.api.cloudendpoint.cn/deleteCurrentTodo
-                <Button size="sm">发布</Button>
-              </div>
+              <HStack spacing="4">
+                <span>
+                  调用地址：https://qcphsd.api.cloudendpoint.cn/deleteCurrentTodo
+                </span>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    alert("发布");
+                  }}
+                >
+                  发布
+                </Button>
+              </HStack>
             </div>
           </div>
-          <div>
+          <div className="flex-1">
             <Editor
-              height="calc(100vh - 300px)"
+              height="100%"
               defaultLanguage="javascript"
               defaultValue={funcString}
             />
           </div>
-          <div>
-            <div className="bg-slate-100">接口调试</div>
+          <div style={{ height: 300 }}>
+            <DebugPanel />
           </div>
         </div>
       </div>

packages/next-web/pages/app/[id]/functions/mockFuncTextString.tsx

@@ -1,4 +1,5 @@
-export default `import cloud from '@/cloud-sdk'
+export default `
+import cloud from '@/cloud-sdk'
 import * as crypto from 'crypto'
 const db = cloud.database()
 
@@ -122,4 +123,5 @@ function hashPassword(content: string): string {
     .createHash('sha256')
     .update(content)
     .digest('hex')
-}`;
+}
+`;

packages/next-web/pages/app/[id]/functions/mods/CreateModal/index.tsx

@@ -1,19 +1,19 @@
-import React from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import {
+  useDisclosure,
   Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
   FormControl,
   FormLabel,
   Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
   ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
 } from "@chakra-ui/react";
+import React from "react";
 
 function CreateModal() {
   const { isOpen, onOpen, onClose } = useDisclosure();

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

@@ -1,23 +1,26 @@
+import {
+  Button,
+  Select,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
 import React from "react";
-import { Button, HStack, Select, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 export default function DebugPanel() {
   return (
     <div className="h-full flex flex-col">
-      <div className="px-2 bg-slate-100 flex" style={{ height: 30 }}>
-        <HStack spacing="6">
-          <div className="">接口调试</div>
-          <div className="">历史请求</div>
-        </HStack>
+      <div className="px-2 bg-slate-100">
+        <div className="">接口调试</div>
       </div>
       <div className="flex flex-1">
         <div style={{ width: 500 }} className="border border-r-indigo-400 ">
           <div className="flex p-2">
-            <Button size="sm" className="mr-2">
-              GET
-            </Button>
-            <Select size="sm" variant="filled" placeholder="Filled" />
-            <Button size="sm" className="ml-2" colorScheme="brand">
+            <Button className="mr-2">GET</Button>
+            <Select variant="filled" placeholder="Filled" />
+            <Button className="ml-2" colorScheme="brand">
               请求
             </Button>
           </div>

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

@@ -6,7 +6,7 @@
     padding: 2px 8px;
 
     &:hover {
-      background-color: #f2f3f8;
+      background-color: #F2F3F8;
     }
   }
 }

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

@@ -2,12 +2,12 @@
  * cloud functions list sidebar
  ***************************/
 
-import React from "react";
 import { AttachmentIcon, WarningIcon } from "@chakra-ui/icons";
 import { HStack, Input } from "@chakra-ui/react";
+import React from "react";
 
-import commonStyles from "../../index.module.scss";
 import styles from "./index.module.scss";
+import commonStyles from "../../index.module.scss";
 
 export default function DependecyList() {
   return (

packages/next-web/pages/app/[id]/functions/mods/FunctionPanel/index.tsx

@@ -2,22 +2,22 @@
  * cloud functions list sidebar
  ***************************/
 
-import React from "react";
 import {
+  AddIcon,
   AttachmentIcon,
   HamburgerIcon,
   SettingsIcon,
   SunIcon,
   WarningIcon,
 } from "@chakra-ui/icons";
 import { HStack, Input } from "@chakra-ui/react";
+import React from "react";
 
+import styles from "./index.module.scss";
+import commonStyles from "../../index.module.scss";
 import useFunctionStore from "../../store";
 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);
 

packages/next-web/pages/app/[id]/functions/store.ts

@@ -65,8 +65,8 @@ const useFunctionStore = create<State>()(
           state.currentFunction = currentFunction;
           return state;
         }),
-    })),
-  ),
+    }))
+  )
 );
 
 export default useFunctionStore;