feat(web): fix hotKey bug & hidden some buttons (#602)

labring · Jan 4, 2023 · f0bcbe6 · f0bcbe6
1 parent a75a61f
commit f0bcbe6
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 72 deletions.
diff --git a/web/src/hooks/useHotKey.ts b/web/src/hooks/useHotKey.ts
@@ -1,19 +1,37 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
+import { formatHotKeyModifier } from "@/utils/format";
 function useHotKey(
-  keyMap: string,
+  keyMap: string[],
   trigger: () => void,
   config: {
     enabled?: boolean;
   } = {
     enabled: true,
   },
 ) {
+  const pressKey = useRef<any>(null);
+  const timeout = useRef<any>(null);
+
   const handleKeyDown = useCallback(
     (event: any) => {
-      if (event.key === keyMap && (event.ctrlKey || event.metaKey)) {
+      if (event.repeat) {
+        return;
+      }
+      if (keyMap.indexOf(event.key) > -1 && (event.ctrlKey || event.metaKey)) {
         event.preventDefault();
-        trigger();
+        pressKey.current = event.key;
+        if (timeout.current === null) {
+          timeout.current = setTimeout(() => {
+            // trigger the event if there is no change within 100ms
+            if (pressKey.current === event.key) {
+              trigger();
+            }
+            clearTimeout(timeout.current);
+            timeout.current = null;
+            pressKey.current = null;
+          }, 100);
+        }
       }
     },
     [keyMap, trigger],
@@ -31,7 +49,15 @@ function useHotKey(
     };
   }, [config?.enabled, handleKeyDown]);
 
-  return "⌘" + keyMap;
+  // return shortcut key text ,if keyMap has more than two items will format [../..]
+  const res = `${formatHotKeyModifier()} + 
+      ${
+        keyMap.length > 1
+          ? "[" + keyMap.map((item) => item.toUpperCase()).join("/") + "]"
+          : keyMap[0].toUpperCase()
+      }`;
+
+  return res;
 }
 
 export default useHotKey;
diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -8,8 +8,8 @@ import { t } from "i18next";
 import FunctionEditor from "@/components/Editor/FunctionEditor";
 import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 import PanelHeader from "@/components/Panel/Header";
-import { Pages } from "@/constants";
 
+// import { Pages } from "@/constants";
 import LeftPanel from "../mods/LeftPanel";
 import RightPanel from "../mods/RightPanel";
 
@@ -22,25 +22,25 @@ import FunctionPanel from "./mods/FunctionPanel";
 import useFunctionStore from "./store";
 
 import useFunctionCache from "@/hooks/useFuncitonCache";
-import useHotKey from "@/hooks/useHotKey";
-import useGlobalStore from "@/pages/globalStore";
+// import useHotKey from "@/hooks/useHotKey";
+// import useGlobalStore from "@/pages/globalStore";
 
 function FunctionPage() {
-  const globalStore = useGlobalStore((state) => state);
+  // const globalStore = useGlobalStore((state) => state);
   const store = useFunctionStore((store) => store);
   const { currentFunction, updateFunctionCode } = store;
 
   const functionCache = useFunctionCache();
 
-  useHotKey(
-    "s",
-    async () => {
-      // showInfo("已开启自动保存");
-    },
-    {
-      enabled: globalStore.currentPageId === Pages.function,
-    },
-  );
+  // useHotKey(
+  //   "s",
+  //   async () => {
+  //     // showInfo("已开启自动保存");
+  //   },
+  //   {
+  //     enabled: globalStore.currentPageId === Pages.function,
+  //   },
+  // );
 
   return (
     <>

diff --git a/web/src/pages/app/functions/mods/DebugPannel/index.tsx b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
@@ -4,8 +4,6 @@ import {
   Button,
   Center,
   Input,
-  InputGroup,
-  InputRightElement,
   Select,
   Spinner,
   Tab,
@@ -21,6 +19,7 @@ import CopyText from "@/components/CopyText";
 import JsonEditor from "@/components/Editor/JsonEditor";
 import PanelHeader from "@/components/Panel/Header";
 import { Pages } from "@/constants";
+import { formatHotKeyModifier } from "@/utils/format";
 
 import { useCompileMutation } from "../../service";
 import useFunctionStore from "../../store";
@@ -47,17 +46,7 @@ export default function DebugPanel() {
   const [params, setParams] = useState(JSON.stringify({ name: "test" }, null, 2));
 
   useHotKey(
-    "r",
-    () => {
-      runningCode();
-    },
-    {
-      enabled: globalStore.currentPageId === Pages.function,
-    },
-  );
-
-  useHotKey(
-    "s",
+    ["r", "s"],
     () => {
       runningCode();
     },
@@ -108,7 +97,7 @@ export default function DebugPanel() {
       <Tabs width="100%">
         <TabList>
           <Tab>接口调试</Tab>
-          <Tab>历史请求</Tab>
+          {/* <Tab>历史请求</Tab> */}
         </TabList>
 
         <TabPanels h="full">
@@ -133,12 +122,9 @@ export default function DebugPanel() {
                       );
                     })}
                   </Select>
-                  <InputGroup className="ml-2">
+                  <CopyText className="ml-2" text={getFunctionDebugUrl()}>
                     <Input size="sm" readOnly rounded={4} value={getFunctionDebugUrl()} />
-                    <InputRightElement>
-                      <CopyText text={getFunctionDebugUrl()} className="mb-2" />
-                    </InputRightElement>
-                  </InputGroup>
+                  </CopyText>
                   <Button
                     style={{ borderRadius: 2 }}
                     size="sm"
@@ -149,7 +135,7 @@ export default function DebugPanel() {
                     colorScheme="green"
                     isLoading={isLoading}
                   >
-                    {t("FunctionPanel.Debug")} (⌘ + R)
+                    {t("FunctionPanel.Debug")} ({formatHotKeyModifier()}+R)
                   </Button>
                 </div>
                 <div className="mx-2 pb-2 mb-2">调用参数:</div>
@@ -179,7 +165,7 @@ export default function DebugPanel() {
               </div>
             </div>
           </TabPanel>
-          <TabPanel padding={0}>to be continued...</TabPanel>
+          {/* <TabPanel padding={0}>to be continued...</TabPanel> */}
         </TabPanels>
       </Tabs>
     </div>

diff --git a/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx
@@ -49,15 +49,17 @@ const AddDepenceModal = () => {
   const [packageList, setPackageList] = useState<TDependenceItem[]>([]);
   const { isOpen, onOpen, onClose } = useDisclosure();
   usePackageQuery((data) => {
-    const newList = (data || []).map((item: any) => {
-      return {
-        package: {
-          name: item.name,
-          version: item.spec,
-        },
-        versions: [],
-      };
-    });
+    const newList = (data || [])
+      .filter((item: any) => !item.builtin)
+      .map((item: any) => {
+        return {
+          package: {
+            name: item.name,
+            version: item.spec,
+          },
+          versions: [],
+        };
+      });
     setPackageList(newList);
   });
 
@@ -91,7 +93,7 @@ const AddDepenceModal = () => {
       setIsShowChecked(false);
       setName(val);
     }, 1000),
-    [],
+    [setIsShowChecked, setName],
   );
 
   const initModal = () => {

diff --git a/web/src/pages/app/functions/mods/DependecePanel/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/index.tsx
@@ -32,24 +32,31 @@ export default function DependecyList() {
               >
                 <div>
                   <FileTypeIcon type={FileType.npm} />
-                  <span className="ml-2 w-40 inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
-                    {packageItem?.name}
-                  </span>
+                  <Tooltip
+                    label={packageItem?.builtin ? "内置依赖，不可更改" : null}
+                    placement="top"
+                  >
+                    <span className="ml-2 w-40 inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
+                      {packageItem?.name}
+                    </span>
+                  </Tooltip>
                 </div>
                 <div className="text-slate-500 ">
                   <span className="w-20 inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
                     {packageItem?.spec}
                   </span>
-                  <span className="ml-5 hidden group-hover:inline-block">
-                    <Tooltip label={t("Delete").toString()} placement="top">
-                      <CloseIcon
-                        fontSize={10}
-                        onClick={() => {
-                          delPackageMutation.mutate({ name: packageItem?.name });
-                        }}
-                      />
-                    </Tooltip>
-                  </span>
+                  {!packageItem?.builtin ? (
+                    <span className="ml-5 hidden group-hover:inline-block">
+                      <Tooltip label={t("Delete").toString()} placement="top">
+                        <CloseIcon
+                          fontSize={10}
+                          onClick={() => {
+                            delPackageMutation.mutate({ name: packageItem?.name });
+                          }}
+                        />
+                      </Tooltip>
+                    </span>
+                  ) : null}
                 </div>
               </SectionList.Item>
             );

diff --git a/web/src/pages/app/functions/mods/DependecePanel/service.ts b/web/src/pages/app/functions/mods/DependecePanel/service.ts
@@ -20,6 +20,7 @@ export type TDependenceItem = {
 export type TPackage = {
   name: string;
   spec: string;
+  builtin?: boolean;
 };
 
 const queryKeys = {

diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx
@@ -31,8 +31,8 @@ export default function DeployButton() {
 
   const updateFunctionMutation = useUpdateFunctionMutation();
 
-  useHotKey(
-    "p",
+  const hotKeyP = useHotKey(
+    ["p"],
     async () => {
       onOpen();
     },
@@ -70,7 +70,7 @@ export default function DeployButton() {
           onOpen();
         }}
       >
-        {t("FunctionPanel.Deploy")} (⌘ + P)
+        {t("FunctionPanel.Deploy")} ({hotKeyP})
       </Button>
 
       <Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered>

diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx
@@ -21,6 +21,7 @@ export default function FileList() {
   const { getList, getFileUrl, deleteFile } = useAwsS3();
   const { currentStorage, prefix, setPrefix } = useStorageStore();
   const bucketName = currentStorage?.metadata.name;
+  // const bucketType = currentStorage?.spec.policy;
 
   const query = useQuery(
     ["fileList", bucketName],
@@ -32,15 +33,16 @@ export default function FileList() {
 
   useEffect(() => {
     query.refetch();
-  }, [bucketName, prefix]);
+  }, [bucketName, prefix, query]);
 
   const viewAppFile = (file: TFile) => {
     if (file.Prefix) {
       changeDirectory(file);
       return;
     }
-
-    window.open(getFileUrl(bucketName!, file.Key), "_blank");
+    // const fileUrl = bucketType === 'private' ? getFileUrl(bucketName!, file.Key) : `http://${bucketName}.oss.dev.laf.run/${file.Key}`;
+    const fileUrl = getFileUrl(bucketName!, file.Key);
+    window.open(fileUrl, "_blank");
   };
 
   const changeDirectory = (file: TFile) => {
@@ -59,7 +61,7 @@ export default function FileList() {
         <HStack spacing={12}>
           <span>容量： {currentStorage?.spec.storage} </span>
           <span>已用： {currentStorage?.status?.capacity?.storage} </span>
-          <span>文件数： {currentStorage?.status?.capacity?.objectCount} </span>
+          {/* <span>文件数： {currentStorage?.status?.capacity?.objectCount} </span> */}
         </HStack>
       </PanelHeader>
       <div className="px-2 pb-20 h-full overflow-auto">
@@ -98,12 +100,12 @@ export default function FileList() {
                           }}
                         >
                           {file.Prefix ? (
-                            <a
+                            <span
                               className="cursor-pointer text-blue-700 underline"
                               onClick={() => changeDirectory(file)}
                             >
                               {dirName[dirName.length - 2]}
-                            </a>
+                            </span>
                           ) : (
                             fileName[fileName.length - 1]
                           )}
@@ -114,7 +116,12 @@ export default function FileList() {
                           {file.LastModified ? formatDate(file.LastModified) : "--"}
                         </Td>
                         <Td isNumeric className="flex justify-end">
-                          <IconWrap onClick={() => viewAppFile(file)}>
+                          <IconWrap
+                            placement="left"
+                            // tooltip={bucketType === 'private' && file.Key ? '临时链接,有效期15分钟' : undefined}
+                            tooltip="临时链接,有效期15分钟"
+                            onClick={() => viewAppFile(file)}
+                          >
                             <ViewIcon fontSize={12} />
                           </IconWrap>
                           {!file.Prefix ? (

diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
@@ -21,3 +21,8 @@ export function formatCapacity(capacity: string) {
   const num = capacity.split("Gi")[0];
   return parseInt(num, 10);
 }
+
+export function formatHotKeyModifier() {
+  const isWin = /windows/i.test(navigator.userAgent.toLowerCase());
+  return isWin ? "Ctrl" : "⌘";
+}