labring · maslow · Jan 18, 2023 · Jan 18, 2023
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -168,5 +168,6 @@
   "Total": "总数",
   "Page": "页",
   "NoData": "当前无数据",
-  "Logout": "退出登录"
-}
+  "Logout": "退出登录",
+  "SaveAndRestart": "保存并重启"
+}
diff --git a/web/public/logo.png b/web/public/logo.png
diff --git a/web/src/apis/typing.d.ts b/web/src/apis/typing.d.ts
@@ -220,3 +220,25 @@ export interface TLogItem {
   data: string;
   created_at: string;
 }
+
+// user data
+export interface TUserInfo {
+  id: string;
+  username: string;
+  email: any;
+  phone: any;
+  createdAt: string;
+  updatedAt: string;
+  profile: TProfile;
+}
+
+export interface TProfile {
+  id: string;
+  uid: string;
+  openid: string;
+  from: string;
+  avatar: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/web/src/chakraTheme.ts b/web/src/chakraTheme.ts
@@ -63,40 +63,41 @@ const Button = defineStyleConfig({
   },
 
   variants: {
-    plain: {
-      bg: "gray.200",
-      color: "gray.500",
-      _hover: {
-        bg: "gray.300",
-      },
-    },
-
-    solid: {
+    primary: {
       bg: "primary.500",
       color: "white",
       _hover: {
         bg: "primary.700",
       },
     },
 
-    ghost: {
+    secondary: {
       color: "primary.500",
-      borderRadius: 2,
+      bg: "primary.100",
+      _hover: {
+        bg: "primary.200",
+      },
+    },
+
+    plain: {
+      bg: "gray.200",
+      color: "gray.500",
       _hover: {
-        bg: "primary.500",
-        color: "white",
-        borderRadius: 2,
+        bg: "gray.300",
       },
     },
 
-    grayGhost: {
-      color: "#000",
+    text: {
+      color: "primary.500",
+      _hover: {
+        bg: "primary.100",
+      },
     },
   },
   // The default size and variant values
   defaultProps: {
     size: "md",
-    variant: "solid",
+    variant: "primary",
   },
 });
 

diff --git a/web/src/components/EditableTable/index.tsx b/web/src/components/EditableTable/index.tsx
@@ -133,7 +133,6 @@ const EditableTable = function (props: {
       <Button
         leftIcon={<AddIcon />}
         style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
-        size="m"
         px="6"
         className="h-10"
         onClick={handleAdd}

diff --git a/web/src/components/Panel/index.module.scss b/web/src/components/Panel/index.module.scss
@@ -1,22 +1,21 @@
 .sectionHeader {
-  min-height: 36px;
+  min-height: 50px;
   display: flex;
   align-items: center;
 
   h4 {
-    padding-left: 16px;
+    padding-left: 14px;
     font-weight: 500;
     font-size: 14px;
     position: relative;
 
     &::before {
       content: " ";
-      height: 10px;
+      height: 15px;
       position: absolute;
       left: 0;
-      top: 2px;
+      top: 3px;
       width: 3px;
-      height: 16px;
       background: #00a99d;
       border-radius: 24px;
     }

diff --git a/web/src/layouts/Header/UserSetting/index.tsx b/web/src/layouts/Header/UserSetting/index.tsx
@@ -1,15 +1,22 @@
-import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { Avatar, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import SettingModal from "@/pages/app/setting";
 import PATList from "@/pages/app/setting/PATList";
-export default function UserSetting(props: { avatar: string; width: number }) {
+export default function UserSetting(props: { name: string; avatar?: string; width: string }) {
   return (
     <Menu>
       <MenuButton>
-        <img src={props.avatar} className="rounded-full" width={props.width} alt="avatar" />
+        <Avatar
+          size="sm"
+          name={props.name}
+          bgColor="green.500"
+          color="white"
+          boxShadow="base"
+          boxSize={props.width}
+        />
       </MenuButton>
-      <MenuList minW={24}>
+      <MenuList minW={"150px"}>
         <SettingModal
           headerTitle={t("SettingPanel.UserSetting")}
           tabMatch={[

diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx
@@ -2,8 +2,6 @@
  * laf website header nav
  ***************************/
 
-import { RiCodeBoxFill } from "react-icons/ri";
-
 import UserSetting from "./UserSetting";
 
 import useGlobalStore from "@/pages/globalStore";
@@ -12,14 +10,19 @@ export default function Header(props: { size: "sm" | "lg" }) {
   const { userInfo } = useGlobalStore((state) => state);
 
   return (
-    <div className="flex justify-between px-10 py-4">
+    <div className="flex justify-between px-10 py-4 h-[60px]">
       <div className="flex items-center">
-        <RiCodeBoxFill size={32} className="mr-2" color="green" />
-        <span className="text-2xl font-semibold">LaF</span>
+        <img src="/logo.png" alt="logo" width={30} />
       </div>
 
       <div>
-        {userInfo.profile ? <UserSetting avatar={userInfo.profile?.avatar} width={30} /> : null}
+        {userInfo?.profile ? (
+          <UserSetting
+            name={userInfo?.profile?.name}
+            avatar={userInfo?.profile?.avatar}
+            width={"30px"}
+          />
+        ) : null}
       </div>
     </div>
   );

diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -21,37 +21,6 @@ export default function CollectionDataList() {
       ) : (
         <DataPanel />
       )}
-      {/* <Tabs className="h-full">
-        <TabList>
-          <Tab>数据管理</Tab>
-          <Tab>索引管理</Tab>
-          <Tab>集合结构</Tab>
-        </TabList>
-        <TabPanels className="h-full">
-          <TabPanel
-            className="overflow-hidden relative !pt-1"
-            style={{ height: "calc(100% - 55px)" }}
-          >
-            {store.currentDB === undefined ? (
-              <div className="h-full flex items-center  justify-center">
-                <CreateCollectionModal>
-                  <Button size="lg" variant="ghost" leftIcon={<AddIcon />}>
-                    {t("CollectionPanel.AddCollection")}
-                  </Button>
-                </CreateCollectionModal>
-              </div>
-            ) : (
-              <DataPanel />
-            )}
-          </TabPanel>
-          <TabPanel>
-            <IndexPanel />
-          </TabPanel>
-          <TabPanel className="overflow-hidden relative" style={{ height: "calc(100% - 35px)" }}>
-            <ColPanel />
-          </TabPanel>
-        </TabPanels>
-      </Tabs > */}
     </>
   );
 }
diff --git a/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/addIndexModal/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/addIndexModal/index.tsx
@@ -66,7 +66,7 @@ function AddIndexModal() {
             </FormControl>
           </ModalBody>
           <ModalFooter className="mt-20">
-            <Button colorScheme="blue" mr={3} onClick={onClose}>
+            <Button mr={3} onClick={onClose}>
               {t("Cancel")}
             </Button>
             <Button variant="ghost">{t("Confirm")}</Button>

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -10,6 +10,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  Tooltip,
 } from "@chakra-ui/react";
 import axios from "axios";
 import { t } from "i18next";
@@ -51,7 +52,7 @@ export default function DebugPanel() {
   const [bodyParams, setBodyParams] = useState({});
   const [headerParams, setHeaderParams] = useState([]);
 
-  useHotKey(
+  const { displayName } = useHotKey(
     DEFAULT_SHORTCUTS.send_request,
     () => {
       runningCode();
@@ -85,7 +86,7 @@ export default function DebugPanel() {
           data: bodyParams,
           headers: Object.assign(mapValues(keyBy(headerParams, "name"), "value"), {
             "x-laf-debug-token": `${globalStore.currentApp?.function_debug_token}`,
-            "x-laf-func-data": _funcData,
+            "x-laf-func-data": encodeURIComponent(_funcData),
           }),
         });
 
@@ -105,7 +106,7 @@ export default function DebugPanel() {
       <Row>
         <Panel className="flex-1">
           <Tabs width="100%" colorScheme={"green"} display="flex" flexDirection={"column"} h="full">
-            <TabList>
+            <TabList h={"50px"}>
               <Tab px="0">
                 <span className="text-black font-semibold">
                   {t("FunctionPanel.InterfaceDebug")}
@@ -136,16 +137,17 @@ export default function DebugPanel() {
                         );
                       })}
                     </Select>
-                    <Button
-                      disabled={getFunctionUrl() === ""}
-                      className="ml-2"
-                      onClick={() => runningCode()}
-                      bg="#E0F6F4"
-                      color="primary.500"
-                      isLoading={isLoading}
-                    >
-                      {t("FunctionPanel.Debug")}
-                    </Button>
+                    <Tooltip label={`快捷键: ${displayName.toUpperCase()}`}>
+                      <Button
+                        variant={"secondary"}
+                        disabled={getFunctionUrl() === ""}
+                        className="ml-2"
+                        onClick={() => runningCode()}
+                        isLoading={isLoading}
+                      >
+                        {t("FunctionPanel.Debug")}
+                      </Button>
+                    </Tooltip>
                   </div>
                   <div>
                     <Tabs p="0" variant="soft-rounded" colorScheme={"gray"} size={"sm"}>

diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -325,12 +325,11 @@ const AddDependenceModal = () => {
             )}
 
             <Button
-              colorScheme="blue"
               onClick={() => {
                 submitDependence();
               }}
             >
-              {t("Confirm")}
+              {t("SaveAndRestart")}
             </Button>
           </ModalFooter>
         </ModalContent>

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -30,7 +30,7 @@ export default function DeployButton() {
 
   const updateFunctionMutation = useUpdateFunctionMutation();
 
-  const { displayName } = useHotKey(
+  useHotKey(
     DEFAULT_SHORTCUTS.deploy,
     async () => {
       onOpen();
@@ -61,14 +61,13 @@ export default function DeployButton() {
   return (
     <>
       <Button
-        px={8}
+        variant="text"
         disabled={store.getFunctionUrl() === ""}
-        colorScheme="blue"
         onClick={() => {
           onOpen();
         }}
       >
-        {t("FunctionPanel.Deploy")} ({displayName.toUpperCase()})
+        {t("FunctionPanel.Deploy")}
       </Button>
 
       {isOpen ? (
@@ -85,11 +84,11 @@ export default function DeployButton() {
             </ModalBody>
 
             <ModalFooter>
-              <Button mr={3} onClick={onClose}>
-                {t(" Cancel")}
+              <Button variant="ghost" mr={3} onClick={onClose}>
+                {t("Cancel")}
               </Button>
               <Button
-                colorScheme={"blue"}
+                variant="primary"
                 onClick={() => {
                   deploy();
                 }}

diff --git a/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx b/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx
@@ -0,0 +1,39 @@
+import { BiMessageSquareDetail } from "react-icons/bi";
+import { Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal } from "@chakra-ui/react";
+
+import FileTypeIcon from "@/components/FileTypeIcon";
+import IconWrap from "@/components/IconWrap";
+import { formatDate } from "@/utils/format";
+
+import useFunctionStore from "../../store";
+
+const FunctionDetailPopOver = () => {
+  const { currentFunction } = useFunctionStore();
+  return (
+    <Popover trigger="hover" placement="bottom-start" isLazy>
+      <IconWrap>
+        <PopoverTrigger>
+          <span>
+            <BiMessageSquareDetail />
+          </span>
+        </PopoverTrigger>
+      </IconWrap>
+      <Portal>
+        <PopoverContent width={"400px"}>
+          <PopoverBody px="6" py="4">
+            <h2 className="text-2xl mb-1">
+              <span className="align-middle">{currentFunction.name}</span>{" "}
+              <FileTypeIcon type="ts" />
+            </h2>
+            <div className="text-second">
+              <span>更新于 {formatDate(currentFunction.updatedAt)}</span>
+              <p className="mt-2">{currentFunction.desc}</p>
+            </div>
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  );
+};
+
+export default FunctionDetailPopOver;