feat: 注册限流配置

feat: 页面加载动画
feat: md样式优化
feat: 移动端全屏覆盖

src/pages/chat/index.tsx

@@ -18,10 +18,12 @@ import { useQuery } from '@tanstack/react-query';
 import { useLoading } from '@/hooks/useLoading';
 import { OpenAiModelEnum } from '@/constants/model';
 
+const textareaMinH = '22px';
+
 const Chat = () => {
   const { toast } = useToast();
   const router = useRouter();
-  const { media } = useScreen();
+  const { isPc, media } = useScreen();
   const { chatId, windowId } = router.query as { chatId: string; windowId?: string };
   const ChatBox = useRef<HTMLDivElement>(null);
   const TextareaDom = useRef<HTMLTextAreaElement>(null);
@@ -32,7 +34,7 @@ const Chat = () => {
 
   const isChatting = useMemo(() => chatList[chatList.length - 1]?.status === 'loading', [chatList]);
   const lastWordHuman = useMemo(() => chatList[chatList.length - 1]?.obj === 'Human', [chatList]);
-  const { Loading } = useLoading();
+  const { Loading, setIsLoading } = useLoading({ defaultLoading: true });
 
   // 滚动到底部
   const scrollToBottom = useCallback(() => {
@@ -47,28 +49,36 @@ const Chat = () => {
   }, []);
 
   // 初始化聊天框
-  useQuery([chatId, windowId], () => (chatId ? getInitChatSiteInfo(chatId, windowId) : null), {
-    cacheTime: 5 * 60 * 1000,
-    onSuccess(res) {
-      if (!res) return;
-      router.replace(`/chat?chatId=${chatId}&windowId=${res.windowId}`);
+  const { isInitialLoading } = useQuery(
+    [chatId, windowId],
+    () => (chatId ? getInitChatSiteInfo(chatId, windowId) : null),
+    {
+      cacheTime: 5 * 60 * 1000,
+      onSuccess(res) {
+        if (!res) return;
+        router.replace(`/chat?chatId=${chatId}&windowId=${res.windowId}`);
 
-      setChatSiteData(res.chatSite);
-      setChatList(
-        res.history.map((item) => ({
-          ...item,
-          status: 'finish'
-        }))
-      );
-      scrollToBottom();
-    },
-    onError() {
-      toast({
-        title: '初始化异常',
-        status: 'error'
-      });
+        setChatSiteData(res.chatSite);
+        setChatList(
+          res.history.map((item) => ({
+            ...item,
+            status: 'finish'
+          }))
+        );
+        scrollToBottom();
+        setIsLoading(false);
+      },
+      onError() {
+        toast({
+          title: '初始化异常,请刷新',
+          status: 'error',
+          isClosable: true,
+          duration: 5000
+        });
+        setIsLoading(false);
+      }
     }
-  });
+  );
 
   // gpt3 方法
   const gpt3ChatPrompt = useCallback(
@@ -179,8 +189,9 @@ const Chat = () => {
     setTimeout(() => {
       scrollToBottom();
 
+      /* 回到最小高度 */
       if (TextareaDom.current) {
-        TextareaDom.current.style.height = 22 + 'px';
+        TextareaDom.current.style.height = textareaMinH;
       }
     }, 100);
 
@@ -242,7 +253,7 @@ const Chat = () => {
   }, [chatList, windowId]);
 
   return (
-    <Flex h={'100vh'} flexDirection={'column'} overflowY={'hidden'}>
+    <Flex height={'100%'} flexDirection={'column'}>
       {/* 头部 */}
       <Flex
         px={4}
@@ -258,7 +269,6 @@ const Chat = () => {
           <Icon name={'icon-zhongzhi'} width={20} height={20} color={'#718096'}></Icon>
         </Box>
         {/* 滚动到底部按键 */}
-        {/* 滚动到底部 */}
         {ChatBox.current && ChatBox.current.scrollHeight > 2 * ChatBox.current.clientHeight && (
           <Box ml={10} cursor={'pointer'} onClick={scrollToBottom}>
             <Icon
@@ -302,8 +312,9 @@ const Chat = () => {
       <Box
         m={media('20px auto', '0 auto')}
         w={media('100vw', '100%')}
-        maxW={'800px'}
+        maxW={media('800px', 'auto')}
         boxShadow={'0 -14px 30px rgba(255,255,255,0.6)'}
+        borderTop={media('none', '1px solid rgba(0,0,0,0.1)')}
       >
         {lastWordHuman ? (
           <Box textAlign={'center'}>
@@ -349,12 +360,12 @@ const Chat = () => {
               onChange={(e) => {
                 const textarea = e.target;
                 setInputVal(textarea.value);
-
-                textarea.style.height = textarea.value.split('\n').length * 22 + 'px';
+                textarea.style.height = textareaMinH;
+                textarea.style.height = `${textarea.scrollHeight}px`;
               }}
               onKeyDown={(e) => {
                 // 触发快捷发送
-                if (e.keyCode === 13 && !e.shiftKey) {
+                if (isPc && e.keyCode === 13 && !e.shiftKey) {
                   sendPrompt();
                   e.preventDefault();
                 }
@@ -382,7 +393,7 @@ const Chat = () => {
           </Box>
         )}
       </Box>
-      <Loading loading={!chatSiteData} />
+      <Loading />
     </Flex>
   );
 };