perf: modal

client/public/locales/en/common.json

@@ -5,9 +5,9 @@
   "Warning": "Warning",
   "app": {
     "App Detail": "App Detail",
-    "My Apps": "My Apps",
+    "Confirm Del App Tip": "Confirm to delete the app and all its chats",
     "Confirm Save App Tip": "After saving, the advanced orchestration configuration will be overwritten. Make sure that the application does not use advanced orchestration.",
-    "Confirm Del App Tip": "Confirm to delete the app and all its chats"
+    "My Apps": "My Apps"
   },
   "chat": {
     "Confirm to clear history": "Confirm to clear history?",
@@ -28,5 +28,9 @@
     "Datasets": "DataSets",
     "Store": "Store",
     "Tools": "Tools"
+  },
+  "user": {
+    "Bill Detail": "Bill Detail",
+    "Pay": "Pay"
   }
 }

client/public/locales/zh/common.json

@@ -5,9 +5,9 @@
   "Warning": "提示",
   "app": {
     "App Detail": "应用详情",
-    "My Apps": "我的应用",
+    "Confirm Del App Tip": "确认删除该应用及其所有聊天记录？",
     "Confirm Save App Tip": "保存后将会覆盖高级编排配置，请确保该应用未使用高级编排功能。",
-    "Confirm Del App Tip": "确认删除该应用及其所有聊天记录？"
+    "My Apps": "我的应用"
   },
   "chat": {
     "Confirm to clear history": "确认清空该应用的聊天记录？",
@@ -28,5 +28,9 @@
     "Datasets": "知识库",
     "Store": "应用市场",
     "Tools": "工具"
+  },
+  "user": {
+    "Bill Detail": "账单详情",
+    "Pay": "充值"
   }
 }

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,9 +57,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
   });
 
   return (
-    <Modal isOpen onClose={onClose}>
+    <MyModal isOpen onClose={onClose} w={'600px'}>
-      <ModalOverlay />
-      <ModalContent w={'600px'} maxW={'90vw'} position={'relative'}>
       <Box py={3} px={5}>
         <Box fontWeight={'bold'} fontSize={'2xl'}>
           API 秘钥管理
@@ -71,7 +66,6 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
           如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~
         </Box>
       </Box>
-        <ModalCloseButton />
       <ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}>
         <TableContainer mt={2} position={'relative'}>
           <Table>
@@ -121,10 +115,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
       </ModalFooter>
 
       <Loading loading={isGetting || isCreating || isDeleting} fixed={false} />
-      </ModalContent>
+      <MyModal isOpen={!!apiKey} w={'400px'} onClose={() => setApiKey('')}>
-      <Modal isOpen={!!apiKey} onClose={() => setApiKey('')}>
-        <ModalOverlay />
-        <ModalContent w={'400px'} maxW={'90vw'}>
         <Box py={3} px={5}>
           <Box fontWeight={'bold'} fontSize={'2xl'}>
             新的 API 秘钥
@@ -133,15 +124,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
             请保管好你的秘钥，秘钥不会再次展示~
           </Box>
         </Box>
-          <ModalCloseButton />
         <ModalBody>
-            <Flex
+          <Flex bg={'myGray.100'} px={3} py={2} cursor={'pointer'} onClick={() => copyData(apiKey)}>
-              bg={'myGray.100'}
-              px={3}
-              py={2}
-              cursor={'pointer'}
-              onClick={() => copyData(apiKey)}
-            >
             <Box flex={1}>{apiKey}</Box>
             <MyIcon name={'copy'} w={'16px'}></MyIcon>
           </Flex>
@@ -151,9 +135,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
             好的
           </Button>
         </ModalFooter>
-        </ModalContent>
+      </MyModal>
-      </Modal>
+    </MyModal>
-    </Modal>
   );
 };
 

client/src/components/ChatBox/ContextModal.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
-import {
+import { ModalBody, Box, useTheme } from '@chakra-ui/react';
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
-  ModalHeader,
-  Box,
-  useTheme
-} from '@chakra-ui/react';
 import { ChatItemType } from '@/types/chat';
+import MyModal from '../MyModal';
 
 const ContextModal = ({
   context = [],
@@ -21,17 +13,7 @@ const ContextModal = ({
   const theme = useTheme();
 
   return (
-    <>
+    <MyModal isOpen={true} onClose={onClose} title={`完整对话记录(${context.length}条)`} h={'80vh'}>
-      <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
@@ -47,9 +29,7 @@ const ContextModal = ({
           </Box>
         ))}
       </ModalBody>
-        </ModalContent>
+    </MyModal>
-      </Modal>
-    </>
   );
 };
 

client/src/components/ChatBox/QuoteModal.tsx

@@ -1,21 +1,13 @@
 import React, { useCallback, useState } from 'react';
-import {
+import { ModalBody, ModalCloseButton, ModalHeader, Box, useTheme } from '@chakra-ui/react';
-  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 { 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,14 +61,7 @@ const QuoteModal = ({
 
   return (
     <>
-      <Modal isOpen={true} onClose={onClose}>
+      <MyModal isOpen={true} onClose={onClose} h={'80vh'}>
-        <ModalOverlay />
-        <ModalContent
-          position={'relative'}
-          maxW={'min(90vw, 700px)'}
-          h={'80vh'}
-          overflow={'overlay'}
-        >
         <ModalHeader>
           知识库引用({rawSearch.length}条)
           <Box fontSize={'sm'} fontWeight={'normal'}>
@@ -128,8 +113,7 @@ const QuoteModal = ({
           ))}
         </ModalBody>
         <Loading fixed={false} />
-        </ModalContent>
+      </MyModal>
-      </Modal>
       {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,24 +1,10 @@
 import React from 'react';
-import {
+import { Button, ModalFooter, ModalBody, Image } from '@chakra-ui/react';
-  Box,
+import MyModal from '../MyModal';
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Image
-} from '@chakra-ui/react';
 
 const WxConcat = ({ onClose }: { onClose: () => void }) => {
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <MyModal isOpen={true} onClose={onClose} title={'联系方式-wx'}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>联系方式-wx</ModalHeader>
-        <ModalCloseButton />
       <ModalBody textAlign={'center'}>
         <Image
           style={{ margin: 'auto' }}
@@ -34,8 +20,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => {
           关闭
         </Button>
       </ModalFooter>
-      </ModalContent>
+    </MyModal>
-    </Modal>
   );
 };
 

client/src/constants/theme.ts

@@ -14,15 +14,6 @@ const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle }
 const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiStyle } =
   createMultiStyleConfigHelpers(numberInputAnatomy.keys);
 
-// modal 弹窗
-const ModalTheme = defineMultiStyleConfig({
-  baseStyle: definePartsStyle({
-    dialog: {
-      maxW: '90vw'
-    }
-  })
-});
-
 // 按键
 const Button = defineStyleConfig({
   baseStyle: {
@@ -313,7 +304,6 @@ export const theme = extendTheme({
     primary2: 'linear-gradient(to bottom right, #2152d9 0%,#3370ff 30%,#4e83fd 80%, #85b1ff 100%)'
   },
   components: {
-    Modal: ModalTheme,
     Button,
     Input,
     Textarea,

client/src/hooks/useEditInfo.tsx

@@ -1,16 +1,6 @@
 import React, { useCallback, useRef } from 'react';
-import {
+import { ModalFooter, ModalBody, Input, useDisclosure, Button } from '@chakra-ui/react';
-  Modal,
+import MyModal from '@/components/MyModal';
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Input,
-  useDisclosure,
-  Button
-} from '@chakra-ui/react';
 
 export const useEditInfo = ({
   title,
@@ -58,11 +48,7 @@ export const useEditInfo = ({
   // eslint-disable-next-line react/display-name
   const EditModal = useCallback(
     () => (
-      <Modal isOpen={isOpen} onClose={onClose}>
+      <MyModal isOpen={isOpen} onClose={onClose} title={title}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{title}</ModalHeader>
-          <ModalCloseButton />
         <ModalBody>
           <Input
             ref={inputRef}
@@ -78,8 +64,7 @@ export const useEditInfo = ({
           </Button>
           <Button onClick={onclickConfirm}>确认</Button>
         </ModalFooter>
-        </ModalContent>
+      </MyModal>
-      </Modal>
     ),
     [isOpen, onClose, onclickConfirm, placeholder, title]
   );

client/src/pages/_app.tsx

@@ -10,7 +10,7 @@ import NProgress from 'nprogress'; //nprogress module
 import Router from 'next/router';
 import { clientInitData, feConfigs } from '@/store/static';
 import { appWithTranslation, useTranslation } from 'next-i18next';
-import { getLangStore, setLangStore } from '@/utils/i18n';
+import { getLangStore } from '@/utils/i18n';
 import { useRouter } from 'next/router';
 
 import 'nprogress/nprogress.css';
@@ -47,8 +47,6 @@ function App({ Component, pageProps }: AppProps) {
       setGoogleVerKey(googleClientVerKey);
       setBaiduTongji(baiduTongji);
     })();
-
-    setLangStore('zh');
   }, []);
 
   useEffect(() => {

client/src/pages/account/components/BillDetail.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
 import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
   ModalBody,
   Flex,
   Box,
@@ -19,13 +15,14 @@ import { UserBillType } from '@/types/user';
 import dayjs from 'dayjs';
 import { BillSourceMap } from '@/constants/user';
 import { formatPrice } from '@/utils/user';
+import MyModal from '@/components/MyModal';
+import { useTranslation } from 'react-i18next';
 
 const BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void }) => {
+  const { t } = useTranslation();
+
   return (
-    <Modal isOpen={true} onClose={onClose} isCentered>
+    <MyModal isOpen={true} onClose={onClose} title={t('user.Bill Detail')}>
-      <ModalOverlay />
-      <ModalContent minW={'min(90vw,600px)'}>
-        <ModalHeader>账单详情</ModalHeader>
       <ModalBody>
         <Flex alignItems={'center'} pb={4}>
           <Box flex={'0 0 80px'}>订单号:</Box>
@@ -75,8 +72,7 @@ const BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void
           </TableContainer>
         </Box>
       </ModalBody>
-      </ModalContent>
+    </MyModal>
-    </Modal>
   );
 };
 

client/src/pages/account/components/Info.tsx

@@ -121,7 +121,7 @@ const UserInfo = () => {
           <Flex alignItems={'center'}>
             <Box flex={'0 0 50px'}>余额:</Box>
             <Box>
-              <strong>{userInfo?.balance}</strong> 元
+              <strong>{userInfo?.balance.toFixed(3)}</strong> 元
             </Box>
             <Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
               充值

client/src/pages/account/components/PayModal.tsx

@@ -1,26 +1,17 @@
 import React, { useState, useCallback } from 'react';
-import {
+import { ModalFooter, ModalBody, Button, Input, Box, Grid } from '@chakra-ui/react';
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Button,
-  Input,
-  Box,
-  Grid
-} from '@chakra-ui/react';
 import { getPayCode, checkPayResult } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { getErrText } from '@/utils/tools';
+import { useTranslation } from 'react-i18next';
 import Markdown from '@/components/Markdown';
+import MyModal from '@/components/MyModal';
 
 const PayModal = ({ onClose }: { onClose: () => void }) => {
   const router = useRouter();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [inputVal, setInputVal] = useState<number | ''>('');
   const [loading, setLoading] = useState(false);
@@ -71,19 +62,15 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
   );
 
   return (
-    <>
+    <MyModal
-      <Modal
       isOpen={true}
       onClose={() => {
         if (payId) return;
         onClose();
       }}
+      title={t('user.Pay')}
+      showCloseBtn={!payId}
     >
-        <ModalOverlay />
-        <ModalContent minW={'auto'}>
-          <ModalHeader>充值</ModalHeader>
-          {!payId && <ModalCloseButton />}
-
       <ModalBody py={0}>
         {!payId && (
           <>
@@ -145,9 +132,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
           </>
         )}
       </ModalFooter>
-        </ModalContent>
+    </MyModal>
-      </Modal>
-    </>
   );
 };
 

client/src/pages/account/index.tsx

@@ -33,7 +33,7 @@ enum TabEnum {
 const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   const tabList = useRef([
     { icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> },
-    { icon: 'billRecordLight', label: '消费记录', id: TabEnum.bill, Component: <BillTable /> },
+    { icon: 'billRecordLight', label: '使用记录', id: TabEnum.bill, Component: <BillTable /> },
     { icon: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
     { icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
     { icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }

client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeVariable.tsx

@@ -1,50 +1,17 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { NodeProps } from 'reactflow';
-import {
+import { Box, Button, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
-  Box,
+import { AddIcon } from '@chakra-ui/icons';
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
-  Flex,
-  Switch,
-  Input,
-  useDisclosure,
-  useTheme,
-  Grid,
-  FormControl
-} from '@chakra-ui/react';
-import { AddIcon, SmallAddIcon } from '@chakra-ui/icons';
 import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
 import Container from '../modules/Container';
 import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
 import type { VariableItemType } from '@/types/app';
 import MyIcon from '@/components/Icon';
-import { useForm } from 'react-hook-form';
-import { useFieldArray } from 'react-hook-form';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
+import VariableEditModal from '../../../VariableEditModal';
 
-const VariableTypeList = [
-  { label: '文本', icon: 'settingLight', key: VariableInputEnum.input },
-  { label: '下拉单选', icon: 'settingLight', key: VariableInputEnum.select }
-];
 export const defaultVariable: VariableItemType = {
   id: nanoid(),
   key: 'key',
@@ -58,8 +25,6 @@ export const defaultVariable: VariableItemType = {
 const NodeUserGuide = ({
   data: { inputs, outputs, onChangeNode, ...props }
 }: NodeProps<FlowModuleItemType>) => {
-  const theme = useTheme();
-
   const variables = useMemo(
     () =>
       (inputs.find((item) => item.key === SystemInputEnum.variables)
@@ -67,25 +32,7 @@ const NodeUserGuide = ({
     [inputs]
   );
 
-  const [refresh, setRefresh] = useState(false);
+  const [editVariable, setEditVariable] = useState<VariableItemType>();
-  const { isOpen, onClose, onOpen } = useDisclosure();
-
-  const { reset, getValues, setValue, register, control, handleSubmit } = useForm<{
-    variable: VariableItemType;
-  }>({
-    defaultValues: {
-      variable: defaultVariable
-    }
-  });
-
-  const {
-    fields: selectEnums,
-    append: appendEnums,
-    remove: removeEnums
-  } = useFieldArray({
-    control,
-    name: 'variable.enums'
-  });
 
   const updateVariables = useCallback(
     (value: VariableItemType[]) => {
@@ -102,9 +49,9 @@ const NodeUserGuide = ({
   const onclickSubmit = useCallback(
     ({ variable }: { variable: VariableItemType }) => {
       updateVariables(variables.map((item) => (item.id === variable.id ? variable : item)));
-      onClose();
+      setEditVariable(undefined);
     },
-    [onClose, updateVariables, variables]
+    [updateVariables, variables]
   );
 
   return (
@@ -134,8 +81,7 @@ const NodeUserGuide = ({
                         w={'16px'}
                         cursor={'pointer'}
                         onClick={() => {
-                          onOpen();
+                          setEditVariable(item);
-                          reset({ variable: item });
                         }}
                       />
                       <MyIcon
@@ -159,8 +105,7 @@ const NodeUserGuide = ({
               onClick={() => {
                 const newVariable = { ...defaultVariable, id: nanoid() };
                 updateVariables(variables.concat(newVariable));
-                reset({ variable: newVariable });
+                setEditVariable(newVariable);
-                onOpen();
               }}
             >
               新增
@@ -168,133 +113,13 @@ const NodeUserGuide = ({
           </Box>
         </Container>
       </NodeCard>
-      <Modal isOpen={isOpen} onClose={() => {}}>
+      {!!editVariable && (
-        <ModalOverlay />
+        <VariableEditModal
-        <ModalContent maxW={'Min(400px,90vw)'}>
+          defaultVariable={editVariable}
-          <ModalHeader display={'flex'}>
+          onClose={() => setEditVariable(undefined)}
-            <MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} />
+          onSubmit={onclickSubmit}
-            变量设置
-          </ModalHeader>
-          <ModalBody>
-            <Flex alignItems={'center'}>
-              <Box w={'70px'}>必填</Box>
-              <Switch {...register('variable.required')} />
-            </Flex>
-            <Flex mt={5} alignItems={'center'}>
-              <Box w={'80px'}>变量名</Box>
-              <Input {...register('variable.label', { required: '变量名不能为空' })} />
-            </Flex>
-            <Flex mt={5} alignItems={'center'}>
-              <Box w={'80px'}>变量 key</Box>
-              <Input {...register('variable.key', { required: '变量 key 不能为空' })} />
-            </Flex>
-
-            <Box mt={5} mb={2}>
-              字段类型
-            </Box>
-            <Grid gridTemplateColumns={'repeat(2,130px)'} gridGap={4}>
-              {VariableTypeList.map((item) => (
-                <Flex
-                  key={item.key}
-                  px={4}
-                  py={1}
-                  border={theme.borders.base}
-                  borderRadius={'md'}
-                  cursor={'pointer'}
-                  {...(item.key === getValues('variable.type')
-                    ? {
-                        bg: 'myWhite.600'
-                      }
-                    : {
-                        _hover: {
-                          boxShadow: 'md'
-                        },
-                        onClick: () => {
-                          setValue('variable.type', item.key);
-                          setRefresh(!refresh);
-                        }
-                      })}
-                >
-                  <MyIcon name={item.icon as any} w={'16px'} />
-                  <Box ml={3}>{item.label}</Box>
-                </Flex>
-              ))}
-            </Grid>
-
-            {getValues('variable.type') === VariableInputEnum.input && (
-              <>
-                <Box mt={5} mb={2}>
-                  最大长度
-                </Box>
-                <Box>
-                  <NumberInput max={100} min={1} step={1} position={'relative'}>
-                    <NumberInputField
-                      {...register('variable.maxLen', {
-                        min: 1,
-                        max: 100,
-                        valueAsNumber: true
-                      })}
-                      max={100}
         />
-                    <NumberInputStepper>
-                      <NumberIncrementStepper />
-                      <NumberDecrementStepper />
-                    </NumberInputStepper>
-                  </NumberInput>
-                </Box>
-              </>
       )}
-
-            {getValues('variable.type') === VariableInputEnum.select && (
-              <>
-                <Box mt={5} mb={2}>
-                  选项
-                </Box>
-                <Box>
-                  {selectEnums.map((item, i) => (
-                    <Flex key={item.id} mb={2} alignItems={'center'}>
-                      <FormControl>
-                        <Input
-                          {...register(`variable.enums.${i}.value`, {
-                            required: '选项内容不能为空'
-                          })}
-                        />
-                      </FormControl>
-                      <MyIcon
-                        ml={3}
-                        name={'delete'}
-                        w={'16px'}
-                        cursor={'pointer'}
-                        p={2}
-                        borderRadius={'lg'}
-                        _hover={{ bg: 'red.100' }}
-                        onClick={() => removeEnums(i)}
-                      />
-                    </Flex>
-                  ))}
-                </Box>
-                <Button
-                  variant={'solid'}
-                  w={'100%'}
-                  textAlign={'left'}
-                  leftIcon={<SmallAddIcon />}
-                  bg={'myGray.100 !important'}
-                  onClick={() => appendEnums({ value: '' })}
-                >
-                  添加选项
-                </Button>
-              </>
-            )}
-          </ModalBody>
-
-          <ModalFooter>
-            <Button variant={'base'} mr={3} onClick={onClose}>
-              取消
-            </Button>
-            <Button onClick={handleSubmit(onclickSubmit)}>确认</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
     </>
   );
 };

client/src/pages/app/detail/components/AdEdit/index.tsx

@@ -27,9 +27,9 @@ import {
 } from '@/types/flow';
 import { AppModuleItemType } from '@/types/app';
 import { customAlphabet } from 'nanoid';
-import { putAppById } from '@/api/app';
 import { useRequest } from '@/hooks/useRequest';
 import type { AppSchema } from '@/types/mongoSchema';
+import { useUserStore } from '@/store/user';
 import dynamic from 'next/dynamic';
 
 import MyIcon from '@/components/Icon';
@@ -92,6 +92,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
   const theme = useTheme();
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const ChatTestRef = useRef<ChatTestComponentRef>(null);
+  const { updateAppDetail } = useUserStore();
   const { x, y, zoom } = useViewport();
   const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -245,7 +246,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
 
   const { mutate: onclickSave, isLoading } = useRequest({
     mutationFn: () => {
-      return putAppById(app._id, {
+      return updateAppDetail(app._id, {
         modules: flow2AppModules()
       });
     },

client/src/pages/app/detail/components/BasicEdit/index.tsx

@@ -460,22 +460,32 @@ const Settings = ({ appId }: { appId: string }) => {
           相似度: {getValues('kb.searchSimilarity')}, 单次搜索数量: {getValues('kb.searchLimit')},
           空搜索时拒绝回复: {getValues('kb.searchEmptyText') !== '' ? 'true' : 'false'}
         </Flex>
-        <Grid templateColumns={['1fr', 'repeat(2,1fr)']} my={2} gridGap={[2, 4]}>
+        <Grid templateColumns={['repeat(2,1fr)', 'repeat(3,1fr)']} my={2} gridGap={[2, 4]}>
           {selectedKbList.map((item) => (
+            <MyTooltip key={item._id} label={'查看知识库详情'}>
               <Flex
-              key={item._id}
                 alignItems={'center'}
                 p={2}
                 bg={'white'}
                 boxShadow={'0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06)'}
                 borderRadius={'md'}
                 border={theme.borders.base}
+                cursor={'pointer'}
+                onClick={() =>
+                  router.push({
+                    pathname: '/kb/detail',
+                    query: {
+                      kbId: item._id
+                    }
+                  })
+                }
               >
                 <Avatar src={item.avatar} w={'18px'} mr={1} />
                 <Box flex={'1 0 0'} w={0} className={'textEllipsis'} fontSize={'sm'}>
                   {item.name}
                 </Box>
               </Flex>
+            </MyTooltip>
           ))}
         </Grid>
       </Box>

client/src/pages/app/detail/components/InfoModal.tsx

@@ -6,13 +6,8 @@ import {
   FormControl,
   Input,
   Textarea,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
   ModalFooter,
-  ModalBody,
+  ModalBody
-  ModalCloseButton
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { AppSchema } from '@/types/mongoSchema';
@@ -23,6 +18,7 @@ import { getErrText } from '@/utils/tools';
 import { useUserStore } from '@/store/user';
 import { useRequest } from '@/hooks/useRequest';
 import Avatar from '@/components/Avatar';
+import MyModal from '@/components/MyModal';
 
 const InfoModal = ({
   defaultApp,
@@ -120,11 +116,7 @@ const InfoModal = ({
   );
 
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <MyModal isOpen={true} onClose={onClose} title={'应用信息设置'}>
-      <ModalOverlay />
-      <ModalContent maxW={'min(90vw,470px)'}>
-        <ModalHeader>应用信息设置</ModalHeader>
-        <ModalCloseButton />
       <ModalBody>
         <Box>头像 & 名称</Box>
         <Flex mt={2} alignItems={'center'}>
@@ -171,10 +163,9 @@ const InfoModal = ({
           保存
         </Button>
       </ModalFooter>
-      </ModalContent>
 
       <File onSelect={onSelectFile} />
-    </Modal>
+    </MyModal>
   );
 };
 

client/src/pages/app/detail/components/KBSelectModal.tsx

@@ -4,13 +4,9 @@ import {
   Flex,
   Box,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
   ModalBody,
   ModalHeader,
   ModalFooter,
-  ModalCloseButton,
   useTheme,
   Textarea
 } from '@chakra-ui/react';
@@ -22,6 +18,7 @@ import type { SelectedKbType } from '@/types/plugin';
 import { useGlobalStore } from '@/store/global';
 import MySlider from '@/components/Slider';
 import MyTooltip from '@/components/MyTooltip';
+import MyModal from '@/components/MyModal';
 
 export type KbParamsType = {
   searchSimilarity: number;
@@ -45,17 +42,15 @@ export const KBSelectModal = ({
   const { isPc } = useGlobalStore();
 
   return (
-    <Modal isOpen={true} isCentered={!isPc} onClose={onClose}>
+    <MyModal
-      <ModalOverlay />
+      isOpen={true}
-      <ModalContent
+      isCentered={!isPc}
-        display={'flex'}
+      maxW={['90vw', '800px']}
-        flexDirection={'column'}
       w={'800px'}
-        maxW={'90vw'}
+      onClose={onClose}
-        h={['90vh', 'auto']}
     >
+      <Flex flexDirection={'column'} h={['90vh', 'auto']}>
         <ModalHeader>关联的知识库({selectedKbList.length})</ModalHeader>
-        <ModalCloseButton />
         <ModalBody
           flex={['1 0 0', '0 0 auto']}
           maxH={'80vh'}
@@ -115,8 +110,8 @@ export const KBSelectModal = ({
             完成
           </Button>
         </ModalFooter>
-      </ModalContent>
+      </Flex>
-    </Modal>
+    </MyModal>
   );
 };
 
@@ -137,11 +132,8 @@ export const KbParamsModal = ({
   });
 
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <MyModal isOpen={true} onClose={onClose} title={'搜索参数调整'}>
-      <ModalOverlay />
+      <Flex flexDirection={'column'}>
-      <ModalContent display={'flex'} flexDirection={'column'} w={'600px'} maxW={'90vw'}>
-        <ModalHeader>搜索参数调整</ModalHeader>
-        <ModalCloseButton />
         <ModalBody>
           <Box display={['block', 'flex']} pt={3} pb={5}>
             <Box flex={'0 0 100px'} mb={[8, 0]}>
@@ -214,8 +206,8 @@ export const KbParamsModal = ({
             完成
           </Button>
         </ModalFooter>
-      </ModalContent>
+      </Flex>
-    </Modal>
+    </MyModal>
   );
 };
 

client/src/pages/app/detail/components/Share.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Flex,
   Box,
@@ -11,19 +11,9 @@ import {
   Td,
   Tbody,
   useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
   ModalFooter,
   ModalBody,
-  ModalCloseButton,
   FormControl,
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderMark,
   Input
 } from '@chakra-ui/react';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
@@ -36,12 +26,12 @@ import { formatTimeToChatTime, useCopyData, getErrText } from '@/utils/tools';
 import { useForm } from 'react-hook-form';
 import { defaultShareChat } from '@/constants/model';
 import type { ShareChatEditType } from '@/types/app';
-import MyTooltip from '@/components/MyTooltip';
 import { useRequest } from '@/hooks/useRequest';
 import { formatPrice } from '@/utils/user';
+import MyTooltip from '@/components/MyTooltip';
+import MyModal from '@/components/MyModal';
 
 const Share = ({ appId }: { appId: string }) => {
-  const { toast } = useToast();
   const { Loading, setIsLoading } = useLoading();
   const { copyData } = useCopyData();
   const {
@@ -175,11 +165,11 @@ const Share = ({ appId }: { appId: string }) => {
         </Flex>
       )}
       {/* create shareChat modal */}
-      <Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}>
+      <MyModal
-        <ModalOverlay />
+        isOpen={isOpenCreateShareChat}
-        <ModalContent maxW={'min(90vw,500px)'}>
+        onClose={onCloseCreateShareChat}
-          <ModalHeader>创建免登录窗口</ModalHeader>
+        title={'创建免登录窗口'}
-          <ModalCloseButton />
+      >
         <ModalBody>
           <FormControl>
             <Flex alignItems={'center'}>
@@ -209,8 +199,7 @@ const Share = ({ appId }: { appId: string }) => {
             确认
           </Button>
         </ModalFooter>
-        </ModalContent>
+      </MyModal>
-      </Modal>
       <Loading loading={isFetching} fixed={false} />
     </Box>
   );

client/src/pages/app/detail/components/VariableEditModal.tsx

@@ -2,9 +2,6 @@ import React, { useState } from 'react';
 import {
   Box,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
   ModalHeader,
   ModalFooter,
   ModalBody,
@@ -28,6 +25,7 @@ import { useForm } from 'react-hook-form';
 import { useFieldArray } from 'react-hook-form';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
+import MyModal from '@/components/MyModal';
 
 const VariableTypeList = [
   { label: '文本', icon: 'settingLight', key: VariableInputEnum.input },
@@ -67,9 +65,7 @@ const VariableEditModal = ({
   });
 
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <MyModal isOpen={true} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent maxW={'Min(400px,90vw)'}>
       <ModalHeader display={'flex'}>
         <MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} />
         变量设置
@@ -192,8 +188,7 @@ const VariableEditModal = ({
         </Button>
         <Button onClick={handleSubmit(onSubmit)}>确认</Button>
       </ModalFooter>
-      </ModalContent>
+    </MyModal>
-    </Modal>
   );
 };
 

client/src/pages/app/list/component/CreateModal.tsx

@@ -3,9 +3,6 @@ import {
   Box,
   Flex,
   Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
   ModalHeader,
   ModalFooter,
   ModalBody,
@@ -26,6 +23,7 @@ import { useGlobalStore } from '@/store/global';
 import { useRequest } from '@/hooks/useRequest';
 import Avatar from '@/components/Avatar';
 import MyTooltip from '@/components/MyTooltip';
+import MyModal from '@/components/MyModal';
 
 type FormType = {
   avatar: string;
@@ -92,9 +90,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
   });
 
   return (
-    <Modal isOpen onClose={onClose} isCentered={!isPc}>
+    <MyModal isOpen onClose={onClose} isCentered={!isPc}>
-      <ModalOverlay />
-      <ModalContent maxW={'min(700px,90vw)'}>
       <ModalHeader fontSize={'2xl'}>创建属于你的 AI 应用</ModalHeader>
       <ModalBody>
         <Box color={'myGray.800'} fontWeight={'bold'}>
@@ -174,10 +170,9 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
           确认创建
         </Button>
       </ModalFooter>
-      </ModalContent>
 
       <File onSelect={onSelectFile} />
-    </Modal>
+    </MyModal>
   );
 };
 

client/src/pages/kb/detail/components/InputDataModal.tsx

@@ -1,23 +1,13 @@
 import React, { useState, useCallback } from 'react';
-import {
+import { Box, Flex, Button, Textarea, IconButton } from '@chakra-ui/react';
-  Box,
-  Flex,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  Textarea,
-  IconButton
-} from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { postKbDataFromList, putKbDataById, delOneKbDataByDataId } from '@/api/plugins/kb';
 import { useToast } from '@/hooks/useToast';
 import { TrainingModeEnum } from '@/constants/plugin';
 import { getErrText } from '@/utils/tools';
-import MyIcon from '@/components/Icon';
 import { vectorModelList } from '@/store/static';
+import MyIcon from '@/components/Icon';
+import MyModal from '@/components/MyModal';
 
 export type FormData = { dataId?: string; a: string; q: string };
 
@@ -133,19 +123,15 @@ const InputDataModal = ({
   );
 
   return (
-    <Modal isOpen={true} onClose={onClose} isCentered>
+    <MyModal
-      <ModalOverlay />
+      isOpen={true}
-      <ModalContent
+      onClose={onClose}
-        m={0}
+      isCentered
-        display={'flex'}
+      title={defaultValues.dataId ? '变更数据' : '手动导入数据'}
-        flexDirection={'column'}
+      w={'90vw'}
-        h={'90vh'}
       maxW={'90vw'}
-        position={'relative'}
     >
-        <ModalHeader>{defaultValues.dataId ? '变更数据' : '手动导入数据'}</ModalHeader>
+      <Flex display={'flex'} flexDirection={'column'} h={'90vh'}>
-        <ModalCloseButton />
-
         <Box
           display={'flex'}
           flexDirection={['column', 'row']}
@@ -225,8 +211,8 @@ const InputDataModal = ({
             {defaultValues.dataId ? '确认变更' : '确认导入'}
           </Button>
         </Flex>
-      </ModalContent>
+      </Flex>
-    </Modal>
+    </MyModal>
   );
 };