feat(web): new ui application page (#614)

labring · Jan 10, 2023 · e4c524a · e4c524a
1 parent a1f67ae
commit e4c524a
Show file tree

Hide file tree

Showing 18 changed files with 371 additions and 193 deletions.
diff --git a/web/public/bg.png b/web/public/bg.png
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -15,7 +15,7 @@
   "CreateTime": "创建时间",
   "Editting...": "已编辑",
   "FunctionPanel": {
-    "Debug": "调试",
+    "Debug": "运行",
     "Deploy": "发布",
     "EmptyText": "请先选择函数"
   },
@@ -39,7 +39,8 @@
     "Dialog": {
       "Confirm": "确定",
       "ConfirmDeploy": "确认发布",
-      "Cancel": "取消"
+      "Cancel": "取消",
+      "AppCreate": "立即创建"
     }
   }
-}
+}
diff --git a/web/src/App.css b/web/src/App.css
@@ -4,7 +4,6 @@
 
 :root {
   --bg-color: #fafafa;
-  font-size: 14px;
 }
 
 /* 设置滚动条的样式 */
@@ -25,14 +24,17 @@
 
 html,
 body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  background-color: var(--bg-color) !important;
   height: 100%;
 }
 
+body {
+  background-color: #eaedef !important;
+  background-image: url("/bg.png") !important;
+  background-repeat: no-repeat !important;
+  background-size: cover !important;
+  font-size: 12px;
+}
+
 a {
   color: inherit;
   text-decoration: none;

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,11 +1,11 @@
 import { BrowserRouter, useRoutes } from "react-router-dom";
 import { ChakraProvider } from "@chakra-ui/react";
-import { extendTheme } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ClickToComponent } from "click-to-react-component";
 
 import "@/utils/i18n";
 
+import theme from "./chakraTheme";
 import routes from "./routes";
 
 import "./App.css";
@@ -15,24 +15,6 @@ function RouteElement() {
   return element;
 }
 
-const Button = {};
-
-const Modal = {
-  defaultProps: {},
-};
-
-const theme = extendTheme({
-  colors: {
-    primary: {
-      500: "#000",
-    },
-  },
-  components: {
-    Button,
-    Modal,
-  },
-});
-
 // Create a client
 const queryClient = new QueryClient({
   defaultOptions: {

diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
@@ -0,0 +1,77 @@
+import { defineStyleConfig, extendTheme } from "@chakra-ui/react";
+
+const Button = defineStyleConfig({
+  // The styles all button have in common
+  baseStyle: {
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    // <-- border radius is same for all variants and sizes
+  },
+  // Two sizes: sm and md
+  sizes: {
+    sm: {
+      fontSize: "sm",
+      px: 2,
+      py: 0,
+      height: "24px",
+    },
+    md: {
+      fontSize: "md",
+      borderRadius: "100px",
+      px: 6,
+      py: 4,
+    },
+  },
+  // Two variants: outline and solid
+  variants: {
+    solid: {
+      bg: "primary.500",
+      color: "white",
+      _hover: {
+        bg: "primary.700",
+      },
+    },
+
+    ghost: {
+      color: "primary.500",
+      borderRadius: 2,
+      _hover: {
+        bg: "primary.500",
+        color: "white",
+        borderRadius: 2,
+      },
+    },
+  },
+  // The default size and variant values
+  defaultProps: {
+    size: "md",
+    variant: "solid",
+  },
+});
+
+const Modal = {
+  defaultProps: {},
+};
+
+const theme = extendTheme({
+  fontSizes: {
+    sm: "12px",
+    md: "14px",
+    base: "14px",
+    lg: "16px",
+    xl: "16px",
+    "2xl": "18px",
+    "3xl": "22px",
+  },
+  colors: {
+    primary: {
+      500: "#00A99D",
+      700: "#04756D",
+    },
+  },
+  components: {
+    Button,
+    Modal,
+  },
+});
+export default theme;
diff --git a/web/src/components/ConfirmButton/index.tsx b/web/src/components/ConfirmButton/index.tsx
@@ -31,7 +31,10 @@ const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: Conf
   return (
     <>
       {React.cloneElement(children, {
-        onClick: onOpen,
+        onClick: (event: any) => {
+          event?.preventDefault();
+          onOpen();
+        },
       })}
 
       <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>

diff --git a/web/src/layouts/Basic.tsx b/web/src/layouts/Basic.tsx
@@ -15,16 +15,16 @@ export default function BasicLayout() {
   return (
     <div>
       <Header size="lg" />
-      <div className="pb-16">
+      <>
         {loading ? (
           <Center style={{ minHeight: 300 }}>
             <Spinner />
           </Center>
         ) : (
           <Outlet />
         )}
-      </div>
-      <div className="text-center bg-white fixed bottom-0 py-4 w-full">
+      </>
+      <div className="text-center fixed -z-10 bottom-0 py-4 w-full">
         Made with <AiFillHeart className="inline text-red-500" />️ by LaF Team
       </div>
     </div>

diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx
@@ -4,6 +4,7 @@
 
 import { BiHelpCircle } from "react-icons/bi";
 import { GrGithub, GrLanguage } from "react-icons/gr";
+import { RiCodeBoxFill } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
 import { HStack } from "@chakra-ui/react";
 
@@ -33,7 +34,7 @@ export default function Header(props: { size: "sm" | "lg" }) {
             navigate("/");
           }}
         >
-          <img src="/logo.png" alt="logo" className="mr-2 rounded-full" width={24} />
+          <RiCodeBoxFill size={32} className="mr-2" />
         </div>
         <span className="mr-4 font-bold text-gray-500 text-lg">{userInfo.username}</span>
       </div>
@@ -55,12 +56,10 @@ export default function Header(props: { size: "sm" | "lg" }) {
       </HStack>
     </div>
   ) : (
-    <div className="flex justify-between p-4 bg-white	border-b">
+    <div className="flex justify-between px-10 py-4">
       <div className="flex items-center">
-        <img src="/logo.png" alt="logo" className="mr-2 rounded-full" width={30} />
-        <span className=" font-bold text-lg">laf 云开发</span>
-        <span className="ml-4 mr-4"> / </span>
-        <span>{userInfo.username}</span>
+        <RiCodeBoxFill size={32} className="mr-2" />
+        <span className="text-2xl font-semibold">LaF</span>
       </div>
 
       <div>

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -47,6 +47,7 @@ export default function DeployButton() {
       methods: store.currentFunction?.methods,
       websocket: store.currentFunction?.websocket,
       name: store.currentFunction?.name,
+      tags: store.currentFunction?.tags,
     });
     if (!res.error) {
       store.setCurrentFunction(res.data);

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx
@@ -45,6 +45,7 @@ const CreateModal = (props: { functionItem?: any }) => {
     websocket: !!functionItem?.websocket,
     methods: functionItem?.methods || ["GET", "POST"],
     code: functionItem?.source.code || defaultString,
+    tags: [],
   };
 
   type FormData = {
@@ -70,6 +71,7 @@ const CreateModal = (props: { functionItem?: any }) => {
   const updateFunctionMutation = useUpdateFunctionMutation();
 
   const onSubmit = async (data: any) => {
+    data.tags = [];
     let res: any = {};
     if (isEdit) {
       res = await updateFunctionMutation.mutateAsync(data);