perf: modal

2025-07-27 08:25:07 +00:00 · 2023-07-26 16:01:21 +08:00
parent ffdef41bf2
commit c06a9fb52b
23 changed files with 696 additions and 997 deletions
--- a/client/public/locales/en/common.json
+++ b/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"
  }
 }
--- a/client/public/locales/zh/common.json
+++ b/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": "充值"
  }
 }
--- a/client/src/components/APIKeyModal/index.tsx
+++ b/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}>
-      <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 秘钥管理
@@ -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>
-      <Modal isOpen={!!apiKey} onClose={() => setApiKey('')}>
-        <ModalOverlay />
-        <ModalContent w={'400px'} maxW={'90vw'}>
+      <MyModal isOpen={!!apiKey} w={'400px'} onClose={() => setApiKey('')}>
        <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
-              bg={'myGray.100'}
-              px={3}
-              py={2}
-              cursor={'pointer'}
-              onClick={() => copyData(apiKey)}
-            >
+          <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>
@@ -151,9 +135,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
            好的
          </Button>
        </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Modal>
+      </MyModal>
+    </MyModal>
  );
 };

--- a/client/src/components/ChatBox/ContextModal.tsx
+++ b/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,17 +13,7 @@ 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 />
+    <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
@@ -47,9 +29,7 @@ const ContextModal = ({
          </Box>
        ))}
      </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
+    </MyModal>
  );
 };

--- a/client/src/components/ChatBox/QuoteModal.tsx
+++ b/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,14 +61,7 @@ const QuoteModal = ({

  return (
    <>
-      <Modal isOpen={true} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent
-          position={'relative'}
-          maxW={'min(90vw, 700px)'}
-          h={'80vh'}
-          overflow={'overlay'}
-        >
+      <MyModal isOpen={true} onClose={onClose} h={'80vh'}>
        <ModalHeader>
          知识库引用({rawSearch.length}条)
          <Box fontSize={'sm'} fontWeight={'normal'}>
@@ -128,8 +113,7 @@ const QuoteModal = ({
          ))}
        </ModalBody>
        <Loading fixed={false} />
-        </ModalContent>
-      </Modal>
+      </MyModal>
      {editDataItem && (
        <InputDataModal
          onClose={() => setEditDataItem(undefined)}
--- a/client/src/components/MyModal/index.tsx
+++ b/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}
--- a/client/src/components/WxConcat/index.tsx
+++ b/client/src/components/WxConcat/index.tsx
@@ -1,24 +1,10 @@
 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 />
+    <MyModal isOpen={true} onClose={onClose} title={'联系方式-wx'}>
      <ModalBody textAlign={'center'}>
        <Image
          style={{ margin: 'auto' }}
@@ -34,8 +20,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => {
          关闭
        </Button>
      </ModalFooter>
-      </ModalContent>
-    </Modal>
+    </MyModal>
  );
 };

--- a/client/src/constants/theme.ts
+++ b/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,
--- a/client/src/hooks/useEditInfo.tsx
+++ b/client/src/hooks/useEditInfo.tsx
@@ -1,16 +1,6 @@
 import React, { useCallback, useRef } from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Input,
-  useDisclosure,
-  Button
-} from '@chakra-ui/react';
+import { ModalFooter, ModalBody, Input, useDisclosure, Button } from '@chakra-ui/react';
+import MyModal from '@/components/MyModal';

 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}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{title}</ModalHeader>
-          <ModalCloseButton />
+      <MyModal isOpen={isOpen} onClose={onClose} title={title}>
        <ModalBody>
          <Input
            ref={inputRef}
@@ -78,8 +64,7 @@ export const useEditInfo = ({
          </Button>
          <Button onClick={onclickConfirm}>确认</Button>
        </ModalFooter>
-        </ModalContent>
-      </Modal>
+      </MyModal>
    ),
    [isOpen, onClose, onclickConfirm, placeholder, title]
  );
--- a/client/src/pages/_app.tsx
+++ b/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(() => {
--- a/client/src/pages/account/components/BillDetail.tsx
+++ b/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>
-      <ModalOverlay />
-      <ModalContent minW={'min(90vw,600px)'}>
-        <ModalHeader>账单详情</ModalHeader>
+    <MyModal isOpen={true} onClose={onClose} title={t('user.Bill Detail')}>
      <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>
-    </Modal>
+    </MyModal>
  );
 };

--- a/client/src/pages/account/components/Info.tsx
+++ b/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}>
              充值
--- a/client/src/pages/account/components/PayModal.tsx
+++ b/client/src/pages/account/components/PayModal.tsx
@@ -1,26 +1,17 @@
 import React, { useState, useCallback } from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  Button,
-  Input,
-  Box,
-  Grid
-} from '@chakra-ui/react';
+import { ModalFooter, ModalBody, 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 (
-    <>
-      <Modal
+    <MyModal
      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>
-      </Modal>
-    </>
+    </MyModal>
  );
 };

--- a/client/src/pages/account/index.tsx
+++ b/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: () => <></> }
--- a/client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeVariable.tsx
+++ b/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 {
-  Box,
-  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 { Box, Button, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
+import { AddIcon } 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 { 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 [editVariable, setEditVariable] = useState<VariableItemType>();

  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();
-                          reset({ variable: item });
+                          setEditVariable(item);
                        }}
                      />
                      <MyIcon
@@ -159,8 +105,7 @@ const NodeUserGuide = ({
              onClick={() => {
                const newVariable = { ...defaultVariable, id: nanoid() };
                updateVariables(variables.concat(newVariable));
-                reset({ variable: newVariable });
-                onOpen();
+                setEditVariable(newVariable);
              }}
            >
              新增
@@ -168,133 +113,13 @@ const NodeUserGuide = ({
          </Box>
        </Container>
      </NodeCard>
-      <Modal isOpen={isOpen} onClose={() => {}}>
-        <ModalOverlay />
-        <ModalContent maxW={'Min(400px,90vw)'}>
-          <ModalHeader display={'flex'}>
-            <MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} />
-            变量设置
-          </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}
+      {!!editVariable && (
+        <VariableEditModal
+          defaultVariable={editVariable}
+          onClose={() => setEditVariable(undefined)}
+          onSubmit={onclickSubmit}
        />
-                    <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>
    </>
  );
 };
--- a/client/src/pages/app/detail/components/AdEdit/index.tsx
+++ b/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()
      });
    },
--- a/client/src/pages/app/detail/components/BasicEdit/index.tsx
+++ b/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>
--- a/client/src/pages/app/detail/components/InfoModal.tsx
+++ b/client/src/pages/app/detail/components/InfoModal.tsx
@@ -6,13 +6,8 @@ import {
  FormControl,
  Input,
  Textarea,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
  ModalFooter,
-  ModalBody,
-  ModalCloseButton
+  ModalBody
 } 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}>
-      <ModalOverlay />
-      <ModalContent maxW={'min(90vw,470px)'}>
-        <ModalHeader>应用信息设置</ModalHeader>
-        <ModalCloseButton />
+    <MyModal isOpen={true} onClose={onClose} title={'应用信息设置'}>
      <ModalBody>
        <Box>头像 & 名称</Box>
        <Flex mt={2} alignItems={'center'}>
@@ -171,10 +163,9 @@ const InfoModal = ({
          保存
        </Button>
      </ModalFooter>
-      </ModalContent>

      <File onSelect={onSelectFile} />
-    </Modal>
+    </MyModal>
  );
 };

--- a/client/src/pages/app/detail/components/KBSelectModal.tsx
+++ b/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}>
-      <ModalOverlay />
-      <ModalContent
-        display={'flex'}
-        flexDirection={'column'}
+    <MyModal
+      isOpen={true}
+      isCentered={!isPc}
+      maxW={['90vw', '800px']}
      w={'800px'}
-        maxW={'90vw'}
-        h={['90vh', 'auto']}
+      onClose={onClose}
    >
+      <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>
-    </Modal>
+      </Flex>
+    </MyModal>
  );
 };

@@ -137,11 +132,8 @@ export const KbParamsModal = ({
  });

  return (
-    <Modal isOpen={true} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent display={'flex'} flexDirection={'column'} w={'600px'} maxW={'90vw'}>
-        <ModalHeader>搜索参数调整</ModalHeader>
-        <ModalCloseButton />
+    <MyModal isOpen={true} onClose={onClose} title={'搜索参数调整'}>
+      <Flex flexDirection={'column'}>
        <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>
-    </Modal>
+      </Flex>
+    </MyModal>
  );
 };

--- a/client/src/pages/app/detail/components/Share.tsx
+++ b/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}>
-        <ModalOverlay />
-        <ModalContent maxW={'min(90vw,500px)'}>
-          <ModalHeader>创建免登录窗口</ModalHeader>
-          <ModalCloseButton />
+      <MyModal
+        isOpen={isOpenCreateShareChat}
+        onClose={onCloseCreateShareChat}
+        title={'创建免登录窗口'}
+      >
        <ModalBody>
          <FormControl>
            <Flex alignItems={'center'}>
@@ -209,8 +199,7 @@ const Share = ({ appId }: { appId: string }) => {
            确认
          </Button>
        </ModalFooter>
-        </ModalContent>
-      </Modal>
+      </MyModal>
      <Loading loading={isFetching} fixed={false} />
    </Box>
  );
--- a/client/src/pages/app/detail/components/VariableEditModal.tsx
+++ b/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}>
-      <ModalOverlay />
-      <ModalContent maxW={'Min(400px,90vw)'}>
+    <MyModal isOpen={true} onClose={onClose}>
      <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>
-    </Modal>
+    </MyModal>
  );
 };

--- a/client/src/pages/app/list/component/CreateModal.tsx
+++ b/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}>
-      <ModalOverlay />
-      <ModalContent maxW={'min(700px,90vw)'}>
+    <MyModal isOpen onClose={onClose} isCentered={!isPc}>
      <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>
  );
 };

--- a/client/src/pages/kb/detail/components/InputDataModal.tsx
+++ b/client/src/pages/kb/detail/components/InputDataModal.tsx
@@ -1,23 +1,13 @@
 import React, { useState, useCallback } from 'react';
-import {
-  Box,
-  Flex,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  Textarea,
-  IconButton
-} from '@chakra-ui/react';
+import { Box, Flex, Button, 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>
-      <ModalOverlay />
-      <ModalContent
-        m={0}
-        display={'flex'}
-        flexDirection={'column'}
-        h={'90vh'}
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      isCentered
+      title={defaultValues.dataId ? '变更数据' : '手动导入数据'}
+      w={'90vw'}
      maxW={'90vw'}
-        position={'relative'}
    >
-        <ModalHeader>{defaultValues.dataId ? '变更数据' : '手动导入数据'}</ModalHeader>
-        <ModalCloseButton />
-
+      <Flex display={'flex'} flexDirection={'column'} h={'90vh'}>
        <Box
          display={'flex'}
          flexDirection={['column', 'row']}
@@ -225,8 +211,8 @@ const InputDataModal = ({
            {defaultValues.dataId ? '确认变更' : '确认导入'}
          </Button>
        </Flex>
-      </ModalContent>
-    </Modal>
+      </Flex>
+    </MyModal>
  );
 };