diff --git a/web/src/hooks/useHotKey.ts b/web/src/hooks/useHotKey.ts index 10b7390880..b2c7f971ac 100644 --- a/web/src/hooks/useHotKey.ts +++ b/web/src/hooks/useHotKey.ts @@ -1,7 +1,8 @@ -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; @@ -9,11 +10,28 @@ function useHotKey( enabled: true, }, ) { + const pressKey = useRef(null); + const timeout = useRef(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 index 74e9753823..56ab3c8e27 100644 --- 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 index afaf9cd1d2..e3ef0c24bb 100644 --- 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() { 接口调试 - 历史请求 + {/* 历史请求 */} @@ -133,12 +122,9 @@ export default function DebugPanel() { ); })} - + - - - - +
调用参数:
@@ -179,7 +165,7 @@ export default function DebugPanel() { - to be continued... + {/* to be continued... */}
diff --git a/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx b/web/src/pages/app/functions/mods/DependecePanel/AddDepenceModal/index.tsx index 368e056891..d0814da6d3 100644 --- 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([]); 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 index d6468819b6..ec2a74580b 100644 --- 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() { >
- - {packageItem?.name} - + + + {packageItem?.name} + +
{packageItem?.spec} - - - { - delPackageMutation.mutate({ name: packageItem?.name }); - }} - /> - - + {!packageItem?.builtin ? ( + + + { + delPackageMutation.mutate({ name: packageItem?.name }); + }} + /> + + + ) : null}
); diff --git a/web/src/pages/app/functions/mods/DependecePanel/service.ts b/web/src/pages/app/functions/mods/DependecePanel/service.ts index 01adcb57b4..f634a5ce5e 100644 --- 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 index 66cfa5e6d7..55272bce53 100644 --- 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}) diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx index 1b5539b015..df26177b79 100644 --- 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() { 容量: {currentStorage?.spec.storage} 已用: {currentStorage?.status?.capacity?.storage} - 文件数: {currentStorage?.status?.capacity?.objectCount} + {/* 文件数: {currentStorage?.status?.capacity?.objectCount} */}
@@ -98,12 +100,12 @@ export default function FileList() { }} > {file.Prefix ? ( - changeDirectory(file)} > {dirName[dirName.length - 2]} - + ) : ( fileName[fileName.length - 1] )} @@ -114,7 +116,12 @@ export default function FileList() { {file.LastModified ? formatDate(file.LastModified) : "--"} - viewAppFile(file)}> + viewAppFile(file)} + > {!file.Prefix ? ( diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts index 45e50836b9..aee7ce6b58 100644 --- 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" : "⌘"; +}