update: function editor ui

web/src/App.css

@@ -33,12 +33,13 @@ body {
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center !important;
+  font-variant-numeric: lining-nums;
   font-size: 12px;
 }
 
 [data-theme="light"] body {
-  background-color: #f1f3f5 !important;
-  background-image: url("/bg.png") !important;
+  background-color: #eef0f2 !important;
+  /* background-image: url("/bg.png") !important; */
 }
 
 [data-theme="dark"] ::-webkit-scrollbar-thumb {

web/src/components/CommonIcon/index.tsx

@@ -3,7 +3,7 @@ import { createIcon } from "@chakra-ui/react";
 
 export const MoreIcon = createIcon({
   displayName: "MoreIcon",
-  viewBox: "0 0 4 16",
+  viewBox: "0 0 4 20",
   d: "M2 16C1.45 16 0.979334 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14C0 13.45 0.196 12.979 0.588 12.587C0.979334 12.1957 1.45 12 2 12C2.55 12 3.021 12.1957 3.413 12.587C3.80433 12.979 4 13.45 4 14C4 14.55 3.80433 15.021 3.413 15.413C3.021 15.8043 2.55 16 2 16ZM2 10C1.45 10 0.979334 9.804 0.588 9.412C0.196 9.02067 0 8.55 0 8C0 7.45 0.196 6.979 0.588 6.587C0.979334 6.19567 1.45 6 2 6C2.55 6 3.021 6.19567 3.413 6.587C3.80433 6.979 4 7.45 4 8C4 8.55 3.80433 9.02067 3.413 9.412C3.021 9.804 2.55 10 2 10ZM2 4C1.45 4 0.979334 3.804 0.588 3.412C0.196 3.02067 0 2.55 0 2C0 1.45 0.196 0.979333 0.588 0.588C0.979334 0.196 1.45 0 2 0C2.55 0 3.021 0.196 3.413 0.588C3.80433 0.979333 4 1.45 4 2C4 2.55 3.80433 3.02067 3.413 3.412C3.021 3.804 2.55 4 2 4Z",
 });
 

web/src/components/Content/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Content(props: { children: React.ReactNode }) {
-  return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>;
+  return <div className="flex flex-1 flex-col space-y-1 overflow-hidden">{props.children}</div>;
 }

web/src/components/Editor/FunctionEditor.tsx

@@ -37,7 +37,7 @@ monaco?.editor.defineTheme("lafEditorTheme", {
   inherit: true,
   rules: [
     {
-      foreground: "#0066ff",
+      foreground: "#008189",
       token: "keyword",
     },
   ],
@@ -159,7 +159,7 @@ function FunctionEditor(props: {
         formatOnPaste: true,
         overviewRulerLanes: 0,
         lineNumbersMinChars: 4,
-        fontSize: 14,
+        fontSize: 13,
         theme: colorMode === COLOR_MODE.dark ? "lafEditorThemeDark" : "lafEditorTheme",
         scrollBeyondLastLine: false,
       });

web/src/components/FileTypeIcon/index.tsx

@@ -75,7 +75,7 @@ export default function FileTypeIcon(props: { type: string; className?: string }
 
     case FileType.ts:
       return (
-        <Icon viewBox="0 0 14 15" fontSize={14} className="align-middle">
+        <Icon viewBox="0 0 14 15" fontSize={10} className="align-middle">
           <rect y="0.5" width="14" height="14" rx="2" fill="#EBF7FD" />
           <path
             d="M1.3196 5.59553V4.45455H6.69531V5.59553H4.69141V11H3.32351V5.59553H1.3196ZM11.1314 6.337C11.1058 6.07919 10.9961 5.87891 10.8022 5.73615C10.6083 5.59339 10.3452 5.52202 10.0128 5.52202C9.78693 5.52202 9.59624 5.55398 9.4407 5.6179C9.28516 5.67969 9.16584 5.76598 9.08274 5.87678C9.00178 5.98757 8.96129 6.11328 8.96129 6.25391C8.95703 6.37109 8.98153 6.47337 9.0348 6.56072C9.0902 6.64808 9.16584 6.72372 9.26172 6.78764C9.3576 6.84943 9.46839 6.90376 9.59411 6.95064C9.71982 6.99538 9.85405 7.03374 9.9968 7.0657L10.5849 7.20632C10.8704 7.27024 11.1325 7.35547 11.3711 7.462C11.6097 7.56854 11.8164 7.69957 11.9911 7.85511C12.1658 8.01065 12.3011 8.19389 12.397 8.40483C12.495 8.61577 12.5451 8.8576 12.5472 9.13033C12.5451 9.53089 12.4428 9.8782 12.2404 10.1722C12.0401 10.4641 11.7504 10.6911 11.3711 10.853C10.994 11.0128 10.5391 11.0927 10.0064 11.0927C9.47798 11.0927 9.01776 11.0117 8.62571 10.8498C8.2358 10.6879 7.93111 10.4482 7.71165 10.1307C7.49432 9.81108 7.38033 9.41584 7.36967 8.94496H8.70881C8.72372 9.16442 8.78658 9.34766 8.89737 9.49467C9.0103 9.63956 9.16051 9.74929 9.34801 9.82386C9.53764 9.89631 9.75178 9.93253 9.99041 9.93253C10.2248 9.93253 10.4283 9.89844 10.6009 9.83026C10.7756 9.76207 10.9109 9.66726 11.0067 9.54581C11.1026 9.42436 11.1506 9.2848 11.1506 9.12713C11.1506 8.98011 11.1069 8.85653 11.0195 8.75639C10.9343 8.65625 10.8086 8.57102 10.6424 8.50071C10.4783 8.4304 10.277 8.36648 10.0384 8.30895L9.32564 8.12997C8.77379 7.99574 8.33807 7.78587 8.01847 7.50036C7.69886 7.21484 7.54013 6.83026 7.54226 6.34659C7.54013 5.95028 7.6456 5.60405 7.85866 5.30788C8.07386 5.01172 8.36896 4.78054 8.74396 4.61435C9.11896 4.44815 9.5451 4.36506 10.0224 4.36506C10.5082 4.36506 10.9322 4.44815 11.2944 4.61435C11.6587 4.78054 11.9421 5.01172 12.1445 5.30788C12.3469 5.60405 12.4513 5.94709 12.4577 6.337H11.1314Z"

web/src/components/Grid/index.tsx

@@ -11,12 +11,15 @@ const Row = forwardRef(
       className?: string;
       style?: React.CSSProperties;
       children: React.ReactNode;
+      id?: string;
     },
     ref: any,
   ) => {
-    const { className, style } = props;
+    const { className, style, id } = props;
+
     return (
       <div
+        id={id}
         ref={ref}
         className={clsx(
           "flex w-full overflow-hidden",

web/src/components/Panel/Header.tsx

@@ -1,21 +1,70 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
 import { HStack } from "@chakra-ui/react";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
 
+import useCustomSettingStore, { page } from "@/pages/customSetting";
+
 const PanelHeader: React.FC<{
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   actions?: React.ReactNode[];
   title?: React.ReactNode | string;
+  pageId?: page;
+  panelId?: string;
 }> = (props) => {
-  const { title, actions, children, style = {}, className } = props;
+  const { title, actions, children, style = {}, className, pageId, panelId } = props;
+  const store = useCustomSettingStore();
+
+  const [isUp, setIsUp] = React.useState(false);
+
+  useEffect(() => {
+    if (!pageId || !panelId) return;
+    const { id = "", style } = store.getLayoutInfo(pageId, panelId);
+    if (!id) return;
+
+    if (style.height < 36) {
+      setIsUp(false);
+    } else {
+      setIsUp(true);
+    }
+  }, [pageId, panelId, store]);
+
+  const _defaultActions = [
+    <div
+      key="zoomIn"
+      className="cursor-pointer"
+      onClick={() => {
+        if (!pageId || !panelId) return;
+        const { id = "", style } = store.getLayoutInfo(pageId, panelId);
+
+        const element = document.getElementById(id);
+        if (element !== null) {
+          // get element height
+          const currentHeight = element.style.height;
+          if (currentHeight === "32px") {
+            const height = element.getAttribute("data-height");
+            element.style.height = height || "100px";
+            setIsUp(true);
+          } else {
+            setIsUp(false);
+            element.setAttribute("data-height", style.height + "px");
+            element.style.height = "32px";
+          }
+        }
+      }}
+    >
+      {isUp ? <ChevronDownIcon fontSize={16} /> : <ChevronUpIcon fontSize={16} />}
+    </div>,
+  ];
+
   return title ? (
     <div className={styles.sectionHeader + " flex justify-between"}>
       <h4>{title}</h4>
-      <HStack spacing="2">{actions}</HStack>
+      <HStack spacing="2">{actions ? actions : _defaultActions}</HStack>
     </div>
   ) : (
     <div style={style} className={clsx(styles.sectionHeader + " flex justify-between", className)}>

web/src/components/Panel/index.module.scss

@@ -1,17 +1,18 @@
 .sectionHeader {
-  min-height: 50px;
+  min-height: 32px;
+  max-height: 32px;
   display: flex;
   align-items: center;
 
   h4 {
-    padding-left: 14px;
+    padding-left: 10px;
     font-weight: 500;
-    font-size: 14px;
+    font-size: 12px;
     position: relative;
 
     &::before {
       content: " ";
-      height: 15px;
+      height: 12px;
       position: absolute;
       left: 0;
       top: 3px;

web/src/components/Panel/index.tsx

@@ -17,7 +17,7 @@ const Panel = (props: {
       style={style}
       bg={bg}
       onClick={onClick}
-      className={clsx("flex w-full flex-col rounded px-4", className)}
+      className={clsx("flex w-full flex-col rounded px-3", className)}
     >
       {props.children}
     </Box>

web/src/components/Resize/index.tsx

@@ -15,10 +15,8 @@ export default function Resize(props: {
 }) {
   const { type, pageId, panelId, reverse, containerRef } = props;
   const store = useCustomSettingStore();
-  const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } = store.getLayoutInfo(
-    pageId,
-    panelId,
-  );
+  const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } =
+    store.getLayoutInfoStyle(pageId, panelId);
   const { isDragging, position, separatorProps } = useResizable({
     axis: type,
     initial: type === "x" ? width : height,
@@ -32,6 +30,7 @@ export default function Resize(props: {
       width: position,
       height: position,
     };
+
     store.setLayoutInfo(pageId, panelId, newPosition);
   }, [position, pageId, panelId, store]);
   const borderColor = useColorModeValue("slate.300", "lafDark.300");
@@ -41,14 +40,15 @@ export default function Resize(props: {
       {display === "none" ? null : (
         <div
           className={
-            type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize"
+            type === "x" ? "group h-full w-1 cursor-col-resize" : "h-1 w-full cursor-row-resize"
           }
           {...separatorProps}
         >
           <Center className="relative h-full w-full">
             {type === "x" && width <= 20 ? (
               <div
                 className={clsx(
+                  "z-50",
                   reverse ? "rounded-l-lg" : "rounded-r-lg",
                   "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
                 )}

web/src/components/SectionList/index.module.scss

@@ -4,11 +4,10 @@
   li {
     cursor: pointer;
     display: flex;
-    height: 40px;
-    border-radius: 8px;
+    height: 28px;
     align-items: center;
     justify-content: space-between;
-    padding: 2px 12px;
+    padding: 0px 12px;
     margin-bottom: 2px;
 
     span {

web/src/components/SectionList/index.tsx

@@ -9,10 +9,7 @@ function SectionList(props: {
   className?: string;
 }) {
   return (
-    <ul
-      className={styles.sectionList + " mb-4 text-grayIron-600 " + props.className}
-      style={props.style || {}}
-    >
+    <ul className={styles.sectionList + " mb-4 " + props.className} style={props.style || {}}>
       {props.children}
     </ul>
   );

web/src/constants/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-export const SideBarWidth = 64;
+export const SideBarWidth = 52;
 export const SmallNavHeight = 42;
 
 export const VITE_SERVER_BASE_URL = import.meta.env.VITE_SERVER_BASE_URL || "";

web/src/hooks/useResizable.ts

@@ -61,16 +61,20 @@ const useResizable = ({
             return reverse ? left + width - x : x - left;
           }
           return reverse ? document.body.offsetWidth - x : x;
+        } else {
+          const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+          if (containerRef?.current) {
+            const containerNode = containerRef.current;
+            const { top, height } = containerNode.getBoundingClientRect();
+            return reverse ? top + height - y : y - top;
+          }
+          return reverse ? document.body.offsetHeight - y : y;
         }
-        const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
-        if (containerRef?.current) {
-          const containerNode = containerRef.current;
-          const { top, height } = containerNode.getBoundingClientRect();
-          return reverse ? top + height - y : y - top;
-        }
-        return reverse ? document.body.offsetHeight - y : y;
       })();
-      if (min < currentPosition && currentPosition < max) {
+
+      if (currentPosition <= 4) return setPosition(4);
+
+      if (min <= currentPosition && currentPosition <= max) {
         setPosition(currentPosition);
       }
     },

web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx

@@ -144,7 +144,7 @@ export default function DataPanel() {
 
   return (
     <>
-      <Panel.Header className="h-[40px] w-full flex-shrink-0">
+      <Panel.Header className="my-1 w-full flex-shrink-0">
         <div className="flex items-center">
           <AddDataModal
             schema={currentData.data ? currentData.data : {}}

web/src/pages/app/functions/mods/ConsolePanel/index.tsx

@@ -31,7 +31,7 @@ function ConsolePanel() {
 
   return (
     <Panel className="flex-1">
-      <Panel.Header title="Console"></Panel.Header>
+      <Panel.Header title="Console" pageId="functionPage" panelId="ConsolePanel"></Panel.Header>
       <div
         className="text-sm relative flex flex-col overflow-y-auto px-2 font-mono"
         style={{ height: "100%" }}

web/src/pages/app/functions/mods/DebugPanel/index.tsx

@@ -132,8 +132,15 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
   return (
     <>
       <Panel className="min-w-[200px] flex-grow overflow-hidden !px-0">
-        <Tabs width="100%" colorScheme={"primary"} display="flex" flexDirection={"column"} h="full">
-          <TabList>
+        <Tabs
+          width="100%"
+          colorScheme={"primary"}
+          display="flex"
+          flexDirection={"column"}
+          h="full"
+          size={"sm"}
+        >
+          <TabList h={"32px"}>
             <Tab px="4">
               <span
                 className={clsx("font-semibold", {
@@ -154,7 +161,16 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
                 {t("HomePage.NavBar.docs")}
               </span>
             </Tab> */}
-            <Tab>Laf Pilot</Tab>
+            <Tab>
+              <span
+                className={clsx("font-semibold", {
+                  "text-black": !darkMode,
+                  "text-white": darkMode,
+                })}
+              >
+                Laf Pilot
+              </span>
+            </Tab>
           </TabList>
 
           <TabPanels flex={1} className="overflow-hidden">
@@ -169,9 +185,9 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
                 <div className="flex flex-none items-center px-2 py-4">
                   <span className="mr-3 whitespace-nowrap">{t("FunctionPanel.Methods")}</span>
                   <Select
-                    width="150px"
+                    width="100px"
                     variant="filled"
-                    size="sm"
+                    size="xs"
                     value={runningMethod}
                     disabled={getFunctionUrl() === "" || !currentFunction.methods?.length}
                     onChange={(e) => {
@@ -189,6 +205,7 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
                   <Tooltip label={`快捷键: ${displayName.toUpperCase()}`}>
                     <Button
                       variant={"secondary"}
+                      size={"xs"}
                       disabled={getFunctionUrl() === ""}
                       className="ml-2"
                       onClick={() => runningCode()}
@@ -277,7 +294,11 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
               />
               <Row {...functionPageConfig.RunningPanel} className="flex-1">
                 <Panel className="min-w-[200px]">
-                  <Panel.Header title={t("FunctionPanel.DebugResult")} />
+                  <Panel.Header
+                    title={t("FunctionPanel.DebugResult")}
+                    pageId="functionPage"
+                    panelId="RunningPanel"
+                  />
                   <div className="relative flex-1 overflow-auto">
                     {isLoading ? (
                       <div className="absolute left-0 right-0">

web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx

@@ -212,7 +212,7 @@ const AddDependenceModal = () => {
                   </Box>
                 </Checkbox>
               )}
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-1">
                 {clickItem.package === packageItem.package.name && clickItem.loading ? (
                   <Spinner size="xs" color="primary.500" />
                 ) : null}