feat(web): finish application page

web/components/ConfirmButton/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Box,
+  Button,
+  useDisclosure,
+} from "@chakra-ui/react";
+
+interface ConfirmButtonProps {
+  onSuccessAction: () => void;
+  headerText: string;
+  bodyText: string;
+
+  children: React.ReactNode;
+}
+
+const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: ConfirmButtonProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = React.useRef<any>();
+
+  const onSubmit = () => {
+    onSuccessAction();
+    onClose();
+  };
+
+  return (
+    <>
+      {React.cloneElement(children as React.ReactElement, {
+        onClick: onOpen,
+      })}
+
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay />
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {headerText}
+          </AlertDialogHeader>
+          <AlertDialogBody>
+            <Box>{bodyText}</Box>
+          </AlertDialogBody>
+
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={onClose} className="mr-3">
+              Cancel
+            </Button>
+            <Button colorScheme={"red"} onClick={onSubmit}>
+              删除
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+export default ConfirmButton;

web/components/Header/index.tsx

@@ -2,19 +2,22 @@
  * laf website header nav
  ***************************/
 
-import React from "react";
+import React, { useEffect } from "react";
 import { BiHelpCircle } from "react-icons/bi";
 import { GiDragonfly } from "react-icons/gi";
 import { GrGithub, GrLanguage } from "react-icons/gr";
 import { HStack, Tag, TagLabel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import useGlobalStore from "pages/app_store";
 
 import { SmallNavHeight } from "@/constants/index";
 
 export default function Header(props: { size: "sm" | "lg" }) {
   const { size } = props;
   const router = useRouter();
 
+  const { userInfo } = useGlobalStore((state) => state);
+
   return size === "sm" ? (
     <div
       className="flex justify-between items-center bg-white px-5 border-b"
@@ -29,7 +32,7 @@ export default function Header(props: { size: "sm" | "lg" }) {
         >
           <GiDragonfly color="white" fontSize={22} />
         </div>
-        <span className="mr-4 font-bold text-lg">Allence</span>
+        <span className="mr-4 font-bold text-lg">{userInfo.username}</span>
         <Tag size="sm" borderRadius="full" variant="solid" colorScheme="green">
           <TagLabel>Free</TagLabel>
         </Tag>
@@ -39,12 +42,7 @@ export default function Header(props: { size: "sm" | "lg" }) {
         <GrLanguage fontSize={16} />
         <BiHelpCircle fontSize={20} />
         <GrGithub fontSize={18} />
-        <img
-          src="https://avatars.githubusercontent.com/u/972813?s=40&v=4"
-          className="rounded-full"
-          width={20}
-          alt="avatar"
-        />
+        <img src={userInfo.profile?.avatar} className="rounded-full" width={20} alt="avatar" />
       </HStack>
     </div>
   ) : (
@@ -53,16 +51,11 @@ export default function Header(props: { size: "sm" | "lg" }) {
         <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>LeezQ</span>
+        <span>{userInfo.username}</span>
       </div>
 
       <div>
-        <img
-          src="https://avatars.githubusercontent.com/u/972813?s=40&v=4"
-          className="rounded-full"
-          width={30}
-          alt="avatar"
-        />
+        <img src={userInfo.profile?.avatar} className="rounded-full" width={30} alt="avatar" />
       </div>
     </div>
   );

web/components/Layout/Basic.tsx

@@ -1,18 +1,19 @@
 import React, { ReactNode, useEffect } from "react";
+import { Spinner } from "@chakra-ui/react";
 import useGlobalStore from "pages/app_store";
 
 import Header from "@/components/Header";
 
 export default function BasicLayout(props: { children: ReactNode }) {
-  const { init } = useGlobalStore((state) => state);
+  const { init, loading } = useGlobalStore((state) => state);
   useEffect(() => {
     init();
   }, [init]);
 
   return (
     <div>
       <Header size="lg" />
-      {props.children}
+      {loading ? <Spinner /> : props.children}
     </div>
   );
 }

web/components/Layout/Function.tsx

@@ -1,10 +1,17 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
+import { Spinner } from "@chakra-ui/react";
+import useGlobalStore from "pages/app_store";
 
 import { SmallNavHeight } from "@/constants/index";
 
 import Header from "../Header";
 
 export default function FunctionLayout(props: { children: ReactNode }) {
+  const { init, loading } = useGlobalStore((state) => state);
+  useEffect(() => {
+    init();
+  }, [init]);
+
   return (
     <div>
       <Header size="sm" />
@@ -16,7 +23,7 @@ export default function FunctionLayout(props: { children: ReactNode }) {
           position: "relative",
         }}
       >
-        {props.children}
+        {loading ? <Spinner /> : props.children}
       </div>
     </div>
   );

web/constants/index.ts

@@ -7,3 +7,6 @@ export const Pages = {
   database: "database",
   logs: "logs",
 };
+
+// key of laf app display name
+export const APP_DISPLAY_NAME_KEY = "laf.dev/display.name";

web/pages/app/[app_id]/index.tsx

@@ -15,10 +15,28 @@ function AppDetail() {
     <>
       <SiderBar pageId={pageId} setPageId={(pageId: string) => setPageId(pageId)} />
       <div className="h-full" style={{ marginLeft: SiderBarWidth }}>
-        {pageId === Pages.function ? <FunctionPage key={Pages.function} /> : null}
-        {pageId === Pages.database ? <DatabasePage key={Pages.database} /> : null}
-        {pageId === Pages.storage ? <StoragePage key={Pages.storage} /> : null}
-        {pageId === Pages.logs ? <LogsPage key={Pages.logs} /> : null}
+        {[
+          {
+            pageId: Pages.function,
+            component: FunctionPage,
+          },
+          {
+            pageId: Pages.database,
+            component: DatabasePage,
+          },
+          {
+            pageId: Pages.storage,
+            component: StoragePage,
+          },
+          {
+            pageId: Pages.logs,
+            component: LogsPage,
+          },
+        ].map((item) => (
+          <div key={item.pageId} className={pageId === item.pageId ? "block h-full" : "hidden"}>
+            {item.pageId === pageId ? <item.component /> : null}
+          </div>
+        ))}
       </div>
     </>
   );

web/pages/app/[app_id]/logs/index.tsx

@@ -106,11 +106,6 @@ export default function LogsPage() {
               </Thead>
 
               <Tbody className="relative">
-                {logListQuery.isFetching ? (
-                  <Center className="absolute w-full bg-white opacity-50">
-                    <Spinner />
-                  </Center>
-                ) : null}
                 {logListQuery.data?.data?.list.map((item: any, index: number) => {
                   return (
                     <Tr key={item._id} _hover={{ bgColor: "#efefef" }}>

web/pages/app_store.ts

@@ -6,16 +6,31 @@ import { immer } from "zustand/middleware/immer";
 
 type State = {
   userInfo: any;
+  loading: boolean;
   init(): void;
 };
 
 const useGlobalStore = create<State>()(
   devtools(
-    immer((set) => ({
+    immer((set, get) => ({
       userInfo: {},
 
+      loading: false,
+
       init: async () => {
+        const userInfo = get().userInfo;
+        if (userInfo.id) {
+          return;
+        }
+        set((state) => {
+          state.loading = true;
+        });
         const res = await AppControllerGetProfile({});
+
+        set((state) => {
+          state.userInfo = res.data;
+          state.loading = false;
+        });
       },
 
       login: async () => {