perf: modal

client/src/components/APIKeyModal/index.tsx

@@ -2,13 +2,9 @@ import React, { useState } from 'react';
 import {
   Box,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
   Flex,
   ModalFooter,
   ModalBody,
-  ModalCloseButton,
   Table,
   Thead,
   Tbody,
@@ -26,6 +22,7 @@ import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
 import { getErrText, useCopyData } from '@/utils/tools';
 import { useToast } from '@/hooks/useToast';
 import MyIcon from '../Icon';
+import MyModal from '../MyModal';
 
 const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
   const { Loading } = useLoading();
@@ -60,100 +57,86 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
   });
 
   return (
-    <Modal isOpen onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent w={'600px'} maxW={'90vw'} position={'relative'}>
+    <MyModal isOpen onClose={onClose} w={'600px'}>
+      <Box py={3} px={5}>
+        <Box fontWeight={'bold'} fontSize={'2xl'}>
+          API 秘钥管理
+        </Box>
+        <Box fontSize={'sm'} color={'myGray.600'}>
+          如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~
+        </Box>
+      </Box>
+      <ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}>
+        <TableContainer mt={2} position={'relative'}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>Api Key</Th>
+                <Th>创建时间</Th>
+                <Th>最后一次使用时间</Th>
+                <Th />
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {apiKeys.map(({ id, apiKey, createTime, lastUsedTime }) => (
+                <Tr key={id}>
+                  <Td>{apiKey}</Td>
+                  <Td>{dayjs(createTime).format('YYYY/MM/DD HH:mm:ss')}</Td>
+                  <Td>
+                    {lastUsedTime
+                      ? dayjs(lastUsedTime).format('YYYY/MM/DD HH:mm:ss')
+                      : '没有使用过'}
+                  </Td>
+                  <Td>
+                    <IconButton
+                      icon={<DeleteIcon />}
+                      size={'xs'}
+                      aria-label={'delete'}
+                      variant={'base'}
+                      colorScheme={'gray'}
+                      onClick={() => onclickRemove(id)}
+                    />
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          variant="base"
+          leftIcon={<AddIcon color={'myGray.600'} fontSize={'sm'} />}
+          onClick={() => onclickCreateApiKey()}
+        >
+          新建秘钥
+        </Button>
+      </ModalFooter>
+
+      <Loading loading={isGetting || isCreating || isDeleting} fixed={false} />
+      <MyModal isOpen={!!apiKey} w={'400px'} onClose={() => setApiKey('')}>
         <Box py={3} px={5}>
           <Box fontWeight={'bold'} fontSize={'2xl'}>
-            API 秘钥管理
+            新的 API 秘钥
           </Box>
           <Box fontSize={'sm'} color={'myGray.600'}>
-            如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~
+            请保管好你的秘钥，秘钥不会再次展示~
           </Box>
         </Box>
-        <ModalCloseButton />
-        <ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}>
-          <TableContainer mt={2} position={'relative'}>
-            <Table>
-              <Thead>
-                <Tr>
-                  <Th>Api Key</Th>
-                  <Th>创建时间</Th>
-                  <Th>最后一次使用时间</Th>
-                  <Th />
-                </Tr>
-              </Thead>
-              <Tbody fontSize={'sm'}>
-                {apiKeys.map(({ id, apiKey, createTime, lastUsedTime }) => (
-                  <Tr key={id}>
-                    <Td>{apiKey}</Td>
-                    <Td>{dayjs(createTime).format('YYYY/MM/DD HH:mm:ss')}</Td>
-                    <Td>
-                      {lastUsedTime
-                        ? dayjs(lastUsedTime).format('YYYY/MM/DD HH:mm:ss')
-                        : '没有使用过'}
-                    </Td>
-                    <Td>
-                      <IconButton
-                        icon={<DeleteIcon />}
-                        size={'xs'}
-                        aria-label={'delete'}
-                        variant={'base'}
-                        colorScheme={'gray'}
-                        onClick={() => onclickRemove(id)}
-                      />
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </TableContainer>
+        <ModalBody>
+          <Flex bg={'myGray.100'} px={3} py={2} cursor={'pointer'} onClick={() => copyData(apiKey)}>
+            <Box flex={1}>{apiKey}</Box>
+            <MyIcon name={'copy'} w={'16px'}></MyIcon>
+          </Flex>
         </ModalBody>
-
         <ModalFooter>
-          <Button
-            variant="base"
-            leftIcon={<AddIcon color={'myGray.600'} fontSize={'sm'} />}
-            onClick={() => onclickCreateApiKey()}
-          >
-            新建秘钥
+          <Button variant="base" onClick={() => setApiKey('')}>
+            好的
           </Button>
         </ModalFooter>
-
-        <Loading loading={isGetting || isCreating || isDeleting} fixed={false} />
-      </ModalContent>
-      <Modal isOpen={!!apiKey} onClose={() => setApiKey('')}>
-        <ModalOverlay />
-        <ModalContent w={'400px'} maxW={'90vw'}>
-          <Box py={3} px={5}>
-            <Box fontWeight={'bold'} fontSize={'2xl'}>
-              新的 API 秘钥
-            </Box>
-            <Box fontSize={'sm'} color={'myGray.600'}>
-              请保管好你的秘钥，秘钥不会再次展示~
-            </Box>
-          </Box>
-          <ModalCloseButton />
-          <ModalBody>
-            <Flex
-              bg={'myGray.100'}
-              px={3}
-              py={2}
-              cursor={'pointer'}
-              onClick={() => copyData(apiKey)}
-            >
-              <Box flex={1}>{apiKey}</Box>
-              <MyIcon name={'copy'} w={'16px'}></MyIcon>
-            </Flex>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant="base" onClick={() => setApiKey('')}>
-              好的
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Modal>
+      </MyModal>
+    </MyModal>
   );
 };
 

client/src/components/ChatBox/ContextModal.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  ModalHeader,
-  Box,
-  useTheme
-} from '@chakra-ui/react';
+import { ModalBody, Box, useTheme } from '@chakra-ui/react';
 import { ChatItemType } from '@/types/chat';
+import MyModal from '../MyModal';
 
 const ContextModal = ({
   context = [],
@@ -21,35 +13,23 @@ const ContextModal = ({
   const theme = useTheme();
 
   return (
-    <>
-      <Modal isOpen={true} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          position={'relative'}
-          maxW={'min(90vw, 700px)'}
-          h={'80vh'}
-          overflow={'overlay'}
-        >
-          <ModalHeader>完整对话记录({context.length}条)</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
-            {context.map((item, i) => (
-              <Box
-                key={i}
-                p={2}
-                borderRadius={'lg'}
-                border={theme.borders.base}
-                _notLast={{ mb: 2 }}
-                position={'relative'}
-              >
-                <Box fontWeight={'bold'}>{item.obj}</Box>
-                <Box>{item.value}</Box>
-              </Box>
-            ))}
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
+    <MyModal isOpen={true} onClose={onClose} title={`完整对话记录(${context.length}条)`} h={'80vh'}>
+      <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
+        {context.map((item, i) => (
+          <Box
+            key={i}
+            p={2}
+            borderRadius={'lg'}
+            border={theme.borders.base}
+            _notLast={{ mb: 2 }}
+            position={'relative'}
+          >
+            <Box fontWeight={'bold'}>{item.obj}</Box>
+            <Box>{item.value}</Box>
+          </Box>
+        ))}
+      </ModalBody>
+    </MyModal>
   );
 };
 

client/src/components/ChatBox/QuoteModal.tsx

@@ -1,21 +1,13 @@
 import React, { useCallback, useState } from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  ModalHeader,
-  Box,
-  useTheme
-} from '@chakra-ui/react';
-import MyIcon from '@/components/Icon';
-import InputDataModal from '@/pages/kb/detail/components/InputDataModal';
+import { ModalBody, ModalCloseButton, ModalHeader, Box, useTheme } from '@chakra-ui/react';
 import { getKbDataItemById } from '@/api/plugins/kb';
 import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
 import { getErrText } from '@/utils/tools';
 import { QuoteItemType } from '@/types/chat';
+import MyIcon from '@/components/Icon';
+import InputDataModal from '@/pages/kb/detail/components/InputDataModal';
+import MyModal from '../MyModal';
 
 const QuoteModal = ({
   onUpdateQuote,
@@ -69,67 +61,59 @@ const QuoteModal = ({
 
   return (
     <>
-      <Modal isOpen={true} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          position={'relative'}
-          maxW={'min(90vw, 700px)'}
-          h={'80vh'}
-          overflow={'overlay'}
-        >
-          <ModalHeader>
-            知识库引用({rawSearch.length}条)
-            <Box fontSize={'sm'} fontWeight={'normal'}>
-              注意: 修改知识库内容成功后，此处不会显示变更情况。点击编辑后，会显示知识库最新的内容。
-            </Box>
-          </ModalHeader>
-          <ModalCloseButton />
-          <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
-            {rawSearch.map((item) => (
+      <MyModal isOpen={true} onClose={onClose} h={'80vh'}>
+        <ModalHeader>
+          知识库引用({rawSearch.length}条)
+          <Box fontSize={'sm'} fontWeight={'normal'}>
+            注意: 修改知识库内容成功后，此处不会显示变更情况。点击编辑后，会显示知识库最新的内容。
+          </Box>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
+          {rawSearch.map((item) => (
+            <Box
+              key={item.id}
+              flex={'1 0 0'}
+              p={2}
+              borderRadius={'lg'}
+              border={theme.borders.base}
+              _notLast={{ mb: 2 }}
+              position={'relative'}
+              _hover={{ '& .edit': { display: 'flex' } }}
+            >
+              {item.source && <Box color={'myGray.600'}>({item.source})</Box>}
+              <Box>{item.q}</Box>
+              <Box>{item.a}</Box>
               <Box
-                key={item.id}
-                flex={'1 0 0'}
-                p={2}
-                borderRadius={'lg'}
-                border={theme.borders.base}
-                _notLast={{ mb: 2 }}
-                position={'relative'}
-                _hover={{ '& .edit': { display: 'flex' } }}
+                className="edit"
+                display={'none'}
+                position={'absolute'}
+                right={0}
+                top={0}
+                bottom={0}
+                w={'40px'}
+                bg={'rgba(255,255,255,0.9)'}
+                alignItems={'center'}
+                justifyContent={'center'}
+                boxShadow={'-10px 0 10px rgba(255,255,255,1)'}
               >
-                {item.source && <Box color={'myGray.600'}>({item.source})</Box>}
-                <Box>{item.q}</Box>
-                <Box>{item.a}</Box>
-                <Box
-                  className="edit"
-                  display={'none'}
-                  position={'absolute'}
-                  right={0}
-                  top={0}
-                  bottom={0}
-                  w={'40px'}
-                  bg={'rgba(255,255,255,0.9)'}
-                  alignItems={'center'}
-                  justifyContent={'center'}
-                  boxShadow={'-10px 0 10px rgba(255,255,255,1)'}
-                >
-                  <MyIcon
-                    name={'edit'}
-                    w={'18px'}
-                    h={'18px'}
-                    cursor={'pointer'}
-                    color={'myGray.600'}
-                    _hover={{
-                      color: 'myBlue.700'
-                    }}
-                    onClick={() => onclickEdit(item)}
-                  />
-                </Box>
+                <MyIcon
+                  name={'edit'}
+                  w={'18px'}
+                  h={'18px'}
+                  cursor={'pointer'}
+                  color={'myGray.600'}
+                  _hover={{
+                    color: 'myBlue.700'
+                  }}
+                  onClick={() => onclickEdit(item)}
+                />
               </Box>
-            ))}
-          </ModalBody>
-          <Loading fixed={false} />
-        </ModalContent>
-      </Modal>
+            </Box>
+          ))}
+        </ModalBody>
+        <Loading fixed={false} />
+      </MyModal>
       {editDataItem && (
         <InputDataModal
           onClose={() => setEditDataItem(undefined)}

client/src/components/MyModal/index.tsx

@@ -5,19 +5,40 @@ import {
   ModalContent,
   ModalHeader,
   ModalCloseButton,
-  ModalProps
+  ModalContentProps
 } from '@chakra-ui/react';
+import { DefaultTFuncReturn } from 'i18next';
 
-interface Props extends ModalProps {
+interface Props extends ModalContentProps {
   showCloseBtn?: boolean;
-  title?: string;
+  title?: any;
+  isCentered?: boolean;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-const MyModal = ({ isOpen, onClose, title, children, showCloseBtn = true, ...props }: Props) => {
+const MyModal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  showCloseBtn = true,
+  isCentered,
+  w = 'auto',
+  maxW = ['90vw', '600px'],
+  ...props
+}: Props) => {
   return (
-    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} {...props}>
+    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} isCentered={isCentered}>
       <ModalOverlay />
-      <ModalContent>
+      <ModalContent
+        w={w}
+        minW={['300px', '400px']}
+        maxW={maxW}
+        position={'relative'}
+        overflow={'overlay'}
+        {...props}
+      >
         {!!title && <ModalHeader>{title}</ModalHeader>}
         {showCloseBtn && <ModalCloseButton />}
         {children}

client/src/components/WxConcat/index.tsx

@@ -1,41 +1,26 @@
 import React from 'react';
-import {
-  Box,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Image
-} from '@chakra-ui/react';
+import { Button, ModalFooter, ModalBody, Image } from '@chakra-ui/react';
+import MyModal from '../MyModal';
 
 const WxConcat = ({ onClose }: { onClose: () => void }) => {
   return (
-    <Modal isOpen={true} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>联系方式-wx</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody textAlign={'center'}>
-          <Image
-            style={{ margin: 'auto' }}
-            src={'https://otnvvf-imgs.oss.laf.run/wx300.jpg'}
-            width={'200px'}
-            height={'200px'}
-            alt=""
-          />
-        </ModalBody>
+    <MyModal isOpen={true} onClose={onClose} title={'联系方式-wx'}>
+      <ModalBody textAlign={'center'}>
+        <Image
+          style={{ margin: 'auto' }}
+          src={'https://otnvvf-imgs.oss.laf.run/wx300.jpg'}
+          width={'200px'}
+          height={'200px'}
+          alt=""
+        />
+      </ModalBody>
 
-        <ModalFooter>
-          <Button variant={'base'} onClick={onClose}>
-            关闭
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+      <ModalFooter>
+        <Button variant={'base'} onClick={onClose}>
+          关闭
+        </Button>
+      </ModalFooter>
+    </MyModal>
   );
 };