diff --git a/packages/next-web/package.json b/packages/next-web/package.json
index fb48591d6f..2f9a9c8b55 100644
--- a/packages/next-web/package.json
+++ b/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",
diff --git a/packages/next-web/pages/app/[id]/functions/[function_id].tsx b/packages/next-web/pages/app/[id]/functions/[function_id].tsx
index 9033c6af02..1bca1505f9 100644
--- a/packages/next-web/pages/app/[id]/functions/[function_id].tsx
+++ b/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>
diff --git a/packages/next-web/pages/app/[id]/functions/mockFuncTextString.tsx b/packages/next-web/pages/app/[id]/functions/mockFuncTextString.tsx
index a6d359be9e..a43a5d1159 100644
--- a/packages/next-web/pages/app/[id]/functions/mockFuncTextString.tsx
+++ b/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')
-}`;
+}
+`;
diff --git a/packages/next-web/pages/app/[id]/functions/mods/CreateModal/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/CreateModal/index.tsx
index b7748133d2..e10720e114 100644
--- a/packages/next-web/pages/app/[id]/functions/mods/CreateModal/index.tsx
+++ b/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();
diff --git a/packages/next-web/pages/app/[id]/functions/mods/DebugPannel/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/DebugPannel/index.tsx
index c60688a354..a99b3f97f1 100644
--- a/packages/next-web/pages/app/[id]/functions/mods/DebugPannel/index.tsx
+++ b/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>
diff --git a/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.module.scss b/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.module.scss
index 48e0e34d86..aa848afa2f 100644
--- a/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.module.scss
+++ b/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;
     }
   }
 }
diff --git a/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.tsx
index 29b72d5c32..bc559d3d6f 100644
--- a/packages/next-web/pages/app/[id]/functions/mods/DependecePanel/index.tsx
+++ b/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 (
diff --git a/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.module.scss b/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.module.scss
deleted file mode 100644
index aa848afa2f..0000000000
--- a/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.functionList {
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 2px 8px;
-
-    &:hover {
-      background-color: #F2F3F8;
-    }
-  }
-}
diff --git a/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.tsx
deleted file mode 100644
index f74b36f8c3..0000000000
--- a/packages/next-web/pages/app/[id]/functions/mods/DependecyList/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/****************************
- * cloud functions list sidebar
- ***************************/
-
-import {
-  AddIcon,
-  AttachmentIcon,
-  HamburgerIcon,
-  SettingsIcon,
-  SunIcon,
-  WarningIcon,
-} from "@chakra-ui/icons";
-import { Input } from "@chakra-ui/react";
-import React from "react";
-
-import styles from "./index.module.scss";
-import commonStyles from "../../index.module.scss";
-
-export default function DependecyList() {
-  return (
-    <div>
-      <div className={commonStyles.sectionHeader + " flex justify-between"}>
-        <h4>NPM 依赖</h4>
-      </div>
-      <div className="flex items-center mb-2">
-        <Input />
-        <WarningIcon />
-      </div>
-
-      <ul className={styles.functionList + " mb-4"}>
-        <li>
-          <div>
-            <AttachmentIcon />
-            axios
-          </div>
-          <div className={styles.status}>0.24.0</div>
-        </li>
-      </ul>
-    </div>
-  );
-}
diff --git a/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.module.scss b/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.module.scss
deleted file mode 100644
index aa848afa2f..0000000000
--- a/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.functionList {
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 2px 8px;
-
-    &:hover {
-      background-color: #F2F3F8;
-    }
-  }
-}
diff --git a/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.tsx
deleted file mode 100644
index 0b000062d1..0000000000
--- a/packages/next-web/pages/app/[id]/functions/mods/FunctionList/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/****************************
- * cloud functions list sidebar
- ***************************/
-
-import {
-  AddIcon,
-  AttachmentIcon,
-  HamburgerIcon,
-  SettingsIcon,
-  SunIcon,
-  WarningIcon,
-} from "@chakra-ui/icons";
-import { Input } from "@chakra-ui/react";
-import React from "react";
-
-import styles from "./index.module.scss";
-import commonStyles from "../../index.module.scss";
-
-export default function FunctionList() {
-  return (
-    <div>
-      <div className={commonStyles.sectionHeader + " flex justify-between"}>
-        <h4>函数列表</h4>
-        <div>
-          <SunIcon />
-          <AddIcon />
-          <HamburgerIcon />
-        </div>
-      </div>
-      <div className="flex items-center mb-2">
-        <Input />
-        <WarningIcon />
-        <SettingsIcon />
-      </div>
-
-      <h5>我的收藏</h5>
-      <ul className={styles.functionList + " mb-4"}>
-        <li>
-          <div>
-            <AttachmentIcon />
-            addToto.js
-          </div>
-          <div className={styles.status}>M</div>
-        </li>
-        <li>antDirt.js</li>
-        <li>getUser.js</li>
-        <li>getQrCode.js</li>
-        <li>getUserInfo.js</li>
-        <li>helloWorld.js</li>
-      </ul>
-
-      <h5>所有函数</h5>
-      <ul>
-        <li>addToto.js</li>
-        <li>antDirt.js</li>
-        <li>getUser.js</li>
-        <li>getQrCode.js</li>
-        <li>getUserInfo.js</li>
-        <li>helloWorld.js</li>
-      </ul>
-    </div>
-  );
-}
diff --git a/packages/next-web/pages/app/[id]/functions/mods/FunctionPanel/index.tsx b/packages/next-web/pages/app/[id]/functions/mods/FunctionPanel/index.tsx
index 13d040ee75..eeeee19fa7 100644
--- a/packages/next-web/pages/app/[id]/functions/mods/FunctionPanel/index.tsx
+++ b/packages/next-web/pages/app/[id]/functions/mods/FunctionPanel/index.tsx
@@ -2,8 +2,8 @@
  * cloud functions list sidebar
  ***************************/
 
-import React from "react";
 import {
+  AddIcon,
   AttachmentIcon,
   HamburgerIcon,
   SettingsIcon,
@@ -11,13 +11,13 @@ import {
   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);
 
diff --git a/packages/next-web/pages/app/[id]/functions/store.ts b/packages/next-web/pages/app/[id]/functions/store.ts
index 08a3e1d497..9d7d51b1bd 100644
--- a/packages/next-web/pages/app/[id]/functions/store.ts
+++ b/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;
diff --git a/packages/next-web/pnpm-lock.yaml b/packages/next-web/pnpm-lock.yaml
index 1458c84378..cab3452454 100644
--- a/packages/next-web/pnpm-lock.yaml
+++ b/packages/next-web/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   eslint: 8.26.0
   eslint-config-next: 12.3.1
   framer-motion: ^6
+  immer: ^9.0.16
   next: 12.3.1
   postcss: ^8.4.18
   react: 18.2.0
@@ -25,6 +26,7 @@ specifiers:
   sass: ^1.55.0
   tailwindcss: ^3.2.1
   typescript: 4.8.4
+  zustand: ^4.1.4
 
 dependencies:
   '@chakra-ui/icons': 2.0.11_react@18.2.0
@@ -38,10 +40,12 @@ dependencies:
   '@tanstack/react-query': 4.14.1_biqbaboplfbrettd7655fr4n2y
   axios: 1.1.3
   framer-motion: 6.5.1_biqbaboplfbrettd7655fr4n2y
+  immer: 9.0.16
   next: 12.3.1_2mygebwfgdyopr3fy2qddu2eli
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   sass: 1.55.0
+  zustand: 4.1.4_immer@9.0.16+react@18.2.0
 
 devDependencies:
   '@types/node': 18.11.7
@@ -3174,6 +3178,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immer/9.0.16:
+    resolution: {integrity: sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==}
+    dev: false
+
   /immutable/4.1.0:
     resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==}
     dev: false
@@ -4706,3 +4714,20 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zustand/4.1.4_immer@9.0.16+react@18.2.0:
+    resolution: {integrity: sha512-k2jVOlWo8p4R83mQ+/uyB8ILPO2PCJOf+QVjcL+1PbMCk1w5OoPYpAIxy9zd93FSfmJqoH6lGdwzzjwqJIRU5A==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      immer: 9.0.16
+      react: 18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
+    dev: false