doc gpt V0.2

src/hooks/useConfirm.tsx

@@ -0,0 +1,61 @@
+import { useState, useRef } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button
+} from '@chakra-ui/react';
+
+export const useConfirm = ({ title = '提示', content }: { title?: string; content: string }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef(null);
+  const confirmCb = useRef<any>();
+  const cancelCb = useRef<any>();
+
+  return {
+    openConfirm: (confirm?: any, cancel?: any) => {
+      onOpen();
+      confirmCb.current = confirm;
+      cancelCb.current = cancel;
+    },
+    ConfirmChild: () => (
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              {title}
+            </AlertDialogHeader>
+
+            <AlertDialogBody>{content}</AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                colorScheme={'gray'}
+                onClick={() => {
+                  onClose();
+                  typeof cancelCb.current === 'function' && cancelCb.current();
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                colorScheme="blue"
+                ml={3}
+                onClick={() => {
+                  onClose();
+                  typeof confirmCb.current === 'function' && confirmCb.current();
+                }}
+              >
+                确认
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    )
+  };
+};

src/hooks/useLoading.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { Spinner, Flex } from '@chakra-ui/react';
+
+export const useLoading = (props?: { defaultLoading: boolean }) => {
+  const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
+
+  const Loading = ({
+    loading,
+    fixed = true
+  }: {
+    loading?: boolean;
+    fixed?: boolean;
+  }): JSX.Element | null => {
+    return isLoading || loading ? (
+      <Flex
+        position={fixed ? 'fixed' : 'absolute'}
+        zIndex={100}
+        backgroundColor={'rgba(255,255,255,0.5)'}
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        alignItems={'center'}
+        justifyContent={'center'}
+      >
+        <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+      </Flex>
+    ) : null;
+  };
+
+  return {
+    isLoading,
+    setIsLoading,
+    Loading
+  };
+};

src/hooks/useScreen.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useMediaQuery } from '@chakra-ui/react';
+
+export function useScreen() {
+  const [isPc] = useMediaQuery('(min-width: 900px)', {
+    ssr: true,
+    fallback: false
+  });
+
+  return {
+    isPc,
+    mediaLgMd: useMemo(() => (isPc ? 'lg' : 'md'), [isPc]),
+    mediaMdSm: useMemo(() => (isPc ? 'md' : 'sm'), [isPc]),
+    media: (pc: number | string, phone: number | string) => (isPc ? pc : phone)
+  };
+}

src/hooks/useSendCode.ts

@@ -0,0 +1,65 @@
+import { useState, useMemo, useCallback } from 'react';
+import { sendCodeToEmail } from '@/api/user';
+import { EmailTypeEnum } from '@/constants/common';
+import { useToast } from '@chakra-ui/react';
+let timer: any;
+
+export const useSendCode = () => {
+  const toast = useToast({
+    position: 'top',
+    duration: 2000
+  });
+  const [codeSending, setCodeSending] = useState(false);
+  const [codeCountDown, setCodeCountDown] = useState(0);
+  const sendCodeText = useMemo(() => {
+    if (codeCountDown >= 10) {
+      return `${codeCountDown}s后重新获取`;
+    }
+    if (codeCountDown > 0) {
+      return `0${codeCountDown}s后重新获取`;
+    }
+    return '获取验证码';
+  }, [codeCountDown]);
+
+  const sendCode = useCallback(
+    async ({ email, type }: { email: string; type: `${EmailTypeEnum}` }) => {
+      setCodeSending(true);
+      try {
+        await sendCodeToEmail({
+          email,
+          type
+        });
+        setCodeCountDown(60);
+        timer = setInterval(() => {
+          setCodeCountDown((val) => {
+            if (val <= 0) {
+              clearInterval(timer);
+            }
+            return val - 1;
+          });
+        }, 1000);
+        toast({
+          title: '验证码已发送',
+          status: 'success',
+          position: 'top'
+        });
+      } catch (error) {
+        typeof error === 'string' &&
+          toast({
+            title: error,
+            status: 'error',
+            position: 'top'
+          });
+      }
+      setCodeSending(false);
+    },
+    [toast]
+  );
+
+  return {
+    codeSending,
+    sendCode,
+    sendCodeText,
+    codeCountDown
+  };
+};

src/hooks/useToast.ts

@@ -0,0 +1,13 @@
+import { useToast as uToast, UseToastOptions } from '@chakra-ui/react';
+
+export const useToast = (props?: UseToastOptions) => {
+  const toast = uToast({
+    position: 'top',
+    duration: 2000,
+    ...props
+  });
+
+  return {
+    toast
+  };
+};