perf: modal

client/src/components/ChatBox/ContextModal.tsx

@@ -13,7 +13,14 @@ const ContextModal = ({
   const theme = useTheme();
 
   return (
-    <MyModal isOpen={true} onClose={onClose} title={`完整对话记录(${context.length}条)`} h={'80vh'}>
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      title={`完整对话记录(${context.length}条)`}
+      minW={['90vw', '600px']}
+      h={['90vh', '80vh']}
+      isCentered
+    >
       <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
         {context.map((item, i) => (
           <Box

client/src/components/ChatBox/QuoteModal.tsx

@@ -61,13 +61,21 @@ const QuoteModal = ({
 
   return (
     <>
-      <MyModal isOpen={true} onClose={onClose} h={'80vh'}>
-        <ModalHeader>
-          知识库引用({rawSearch.length}条)
-          <Box fontSize={'sm'} fontWeight={'normal'}>
-            注意: 修改知识库内容成功后，此处不会显示变更情况。点击编辑后，会显示知识库最新的内容。
-          </Box>
-        </ModalHeader>
+      <MyModal
+        isOpen={true}
+        onClose={onClose}
+        h={['90vh', '80vh']}
+        isCentered
+        minW={['90vw', '600px']}
+        title={
+          <>
+            知识库引用({rawSearch.length}条)
+            <Box fontSize={['xs', 'sm']} fontWeight={'normal'}>
+              注意: 修改知识库内容成功后，此处不会显示变更情况。点击编辑后，会显示知识库最新的内容。
+            </Box>
+          </>
+        }
+      >
         <ModalCloseButton />
         <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
           {rawSearch.map((item) => (

client/src/components/MyModal/index.tsx

@@ -5,9 +5,9 @@ import {
   ModalContent,
   ModalHeader,
   ModalCloseButton,
-  ModalContentProps
+  ModalContentProps,
+  Box
 } from '@chakra-ui/react';
-import { DefaultTFuncReturn } from 'i18next';
 
 interface Props extends ModalContentProps {
   showCloseBtn?: boolean;
@@ -32,16 +32,20 @@ const MyModal = ({
     <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} isCentered={isCentered}>
       <ModalOverlay />
       <ModalContent
+        display={'flex'}
+        flexDirection={'column'}
         w={w}
-        minW={['300px', '400px']}
+        minW={['90vw', '400px']}
         maxW={maxW}
         position={'relative'}
-        overflow={'overlay'}
+        maxH={'90vh'}
         {...props}
       >
         {!!title && <ModalHeader>{title}</ModalHeader>}
-        {showCloseBtn && <ModalCloseButton />}
-        {children}
+        <Box overflow={'overlay'}>
+          {showCloseBtn && <ModalCloseButton />}
+          {children}
+        </Box>
       </ModalContent>
     </Modal>
   );