Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit c06a9fb5 by archer
Options

perf: modal

parent ffdef41b
Showing with 152 additions and 453 deletions
client/public/locales/en/common.json
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
"Warning": "Warning", "Warning": "Warning",
"app": { "app": {
"App Detail": "App Detail", "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 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": { "chat": {
"Confirm to clear history": "Confirm to clear history?", "Confirm to clear history": "Confirm to clear history?",
...@@ -28,5 +28,9 @@ ...@@ -28,5 +28,9 @@
"Datasets": "DataSets", "Datasets": "DataSets",
"Store": "Store", "Store": "Store",
"Tools": "Tools" "Tools": "Tools"
},
"user": {
"Bill Detail": "Bill Detail",
"Pay": "Pay"
} }
} }
client/public/locales/zh/common.json
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
"Warning": "提示", "Warning": "提示",
"app": { "app": {
"App Detail": "应用详情", "App Detail": "应用详情",
"My Apps": "我的应用", "Confirm Del App Tip": "确认删除该应用及其所有聊天记录？",
"Confirm Save App Tip": "保存后将会覆盖高级编排配置，请确保该应用未使用高级编排功能。", "Confirm Save App Tip": "保存后将会覆盖高级编排配置，请确保该应用未使用高级编排功能。",
"Confirm Del App Tip": "确认删除该应用及其所有聊天记录？" "My Apps": "我的应用"
}, },
"chat": { "chat": {
"Confirm to clear history": "确认清空该应用的聊天记录？", "Confirm to clear history": "确认清空该应用的聊天记录？",
...@@ -28,5 +28,9 @@ ...@@ -28,5 +28,9 @@
"Datasets": "知识库", "Datasets": "知识库",
"Store": "应用市场", "Store": "应用市场",
"Tools": "工具" "Tools": "工具"
},
"user": {
"Bill Detail": "账单详情",
"Pay": "充值"
} }
} }
client/src/components/APIKeyModal/index.tsx
...@@ -2,13 +2,9 @@ import React, { useState } from 'react'; ...@@ -2,13 +2,9 @@ import React, { useState } from 'react';
import { import {
Box, Box,
Button, Button,
Modal,
ModalOverlay,
ModalContent,
Flex, Flex,
ModalFooter, ModalFooter,
ModalBody, ModalBody,
ModalCloseButton,
Table, Table,
Thead, Thead,
Tbody, Tbody,
...@@ -26,6 +22,7 @@ import { AddIcon, DeleteIcon } from '@chakra-ui/icons'; ...@@ -26,6 +22,7 @@ import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
import { getErrText, useCopyData } from '@/utils/tools'; import { getErrText, useCopyData } from '@/utils/tools';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import MyIcon from '../Icon'; import MyIcon from '../Icon';
import MyModal from '../MyModal';
const APIKeyModal = ({ onClose }: { onClose: () => void }) => { const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
const { Loading } = useLoading(); const { Loading } = useLoading();
...@@ -60,9 +57,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => { ...@@ -60,9 +57,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
}); });
return ( 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 py={3} px={5}>
<Box fontWeight={'bold'} fontSize={'2xl'}> <Box fontWeight={'bold'} fontSize={'2xl'}>
API 秘钥管理 API 秘钥管理
...@@ -71,7 +66,6 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => { ...@@ -71,7 +66,6 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~ 如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~
</Box> </Box>
</Box> </Box>
<ModalCloseButton />
<ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}> <ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}>
<TableContainer mt={2} position={'relative'}> <TableContainer mt={2} position={'relative'}>
<Table> <Table>
...@@ -121,10 +115,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => { ...@@ -121,10 +115,7 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
</ModalFooter> </ModalFooter>
<Loading loading={isGetting || isCreating || isDeleting} fixed={false} /> <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 py={3} px={5}>
<Box fontWeight={'bold'} fontSize={'2xl'}> <Box fontWeight={'bold'} fontSize={'2xl'}>
新的 API 秘钥 新的 API 秘钥
...@@ -133,15 +124,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => { ...@@ -133,15 +124,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
请保管好你的秘钥，秘钥不会再次展示~ 请保管好你的秘钥，秘钥不会再次展示~
</Box> </Box>
</Box> </Box>
<ModalCloseButton />
<ModalBody> <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> <Box flex={1}>{apiKey}</Box>
<MyIcon name={'copy'} w={'16px'}></MyIcon> <MyIcon name={'copy'} w={'16px'}></MyIcon>
</Flex> </Flex>
...@@ -151,9 +135,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => { ...@@ -151,9 +135,8 @@ const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
好的 好的
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal> </MyModal>
</Modal>
); );
}; };
......
client/src/components/ChatBox/ContextModal.tsx
import React from 'react'; 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 { ChatItemType } from '@/types/chat';
import MyModal from '../MyModal';
const ContextModal = ({ const ContextModal = ({
context = [], context = [],
...@@ -21,17 +13,7 @@ const ContextModal = ({ ...@@ -21,17 +13,7 @@ const ContextModal = ({
const theme = useTheme(); const theme = useTheme();
return ( 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'}> <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} fontSize={'sm'}>
{context.map((item, i) => ( {context.map((item, i) => (
<Box <Box
...@@ -47,9 +29,7 @@ const ContextModal = ({ ...@@ -47,9 +29,7 @@ const ContextModal = ({
</Box> </Box>
))} ))}
</ModalBody> </ModalBody>
</ModalContent> </MyModal>
</Modal>
</>
); );
}; };
......
client/src/components/ChatBox/QuoteModal.tsx
import React, { useCallback, useState } from 'react'; 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 { getKbDataItemById } from '@/api/plugins/kb';
import { useLoading } from '@/hooks/useLoading'; import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { getErrText } from '@/utils/tools'; import { getErrText } from '@/utils/tools';
import { QuoteItemType } from '@/types/chat'; import { QuoteItemType } from '@/types/chat';
import MyIcon from '@/components/Icon';
import InputDataModal from '@/pages/kb/detail/components/InputDataModal';
import MyModal from '../MyModal';
const QuoteModal = ({ const QuoteModal = ({
onUpdateQuote, onUpdateQuote,
...@@ -69,14 +61,7 @@ const QuoteModal = ({ ...@@ -69,14 +61,7 @@ const QuoteModal = ({
return ( 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> <ModalHeader>
知识库引用({rawSearch.length}条) 知识库引用({rawSearch.length}条)
<Box fontSize={'sm'} fontWeight={'normal'}> <Box fontSize={'sm'} fontWeight={'normal'}>
...@@ -128,8 +113,7 @@ const QuoteModal = ({ ...@@ -128,8 +113,7 @@ const QuoteModal = ({
))} ))}
</ModalBody> </ModalBody>
<Loading fixed={false} /> <Loading fixed={false} />
</ModalContent> </MyModal>
</Modal>
{editDataItem && ( {editDataItem && (
<InputDataModal <InputDataModal
onClose={() => setEditDataItem(undefined)} onClose={() => setEditDataItem(undefined)}
......
client/src/components/MyModal/index.tsx
...@@ -5,19 +5,40 @@ import { ...@@ -5,19 +5,40 @@ import {
ModalContent, ModalContent,
ModalHeader, ModalHeader,
ModalCloseButton, ModalCloseButton,
ModalProps ModalContentProps
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { DefaultTFuncReturn } from 'i18next';
interface Props extends ModalProps { interface Props extends ModalContentProps {
showCloseBtn?: boolean; 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 ( return (
<Modal isOpen={isOpen} onClose={onClose} autoFocus={false} {...props}> <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} isCentered={isCentered}>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent
w={w}
minW={['300px', '400px']}
maxW={maxW}
position={'relative'}
overflow={'overlay'}
{...props}
>
{!!title && <ModalHeader>{title}</ModalHeader>} {!!title && <ModalHeader>{title}</ModalHeader>}
{showCloseBtn && <ModalCloseButton />} {showCloseBtn && <ModalCloseButton />}
{children} {children}
......
client/src/components/WxConcat/index.tsx
import React from 'react'; 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 }) => { const WxConcat = ({ onClose }: { onClose: () => void }) => {
return ( return (
<Modal isOpen={true} onClose={onClose}> <MyModal isOpen={true} onClose={onClose} title={'联系方式-wx'}>
<ModalOverlay />
<ModalContent>
<ModalHeader>联系方式-wx</ModalHeader>
<ModalCloseButton />
<ModalBody textAlign={'center'}> <ModalBody textAlign={'center'}>
<Image <Image
style={{ margin: 'auto' }} style={{ margin: 'auto' }}
...@@ -34,8 +20,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => { ...@@ -34,8 +20,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => {
关闭 关闭
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal>
); );
}; };
......
client/src/constants/theme.ts
...@@ -14,15 +14,6 @@ const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } ...@@ -14,15 +14,6 @@ const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle }
const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiStyle } = const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiStyle } =
createMultiStyleConfigHelpers(numberInputAnatomy.keys); createMultiStyleConfigHelpers(numberInputAnatomy.keys);
// modal 弹窗
const ModalTheme = defineMultiStyleConfig({
baseStyle: definePartsStyle({
dialog: {
maxW: '90vw'
}
})
});
// 按键 // 按键
const Button = defineStyleConfig({ const Button = defineStyleConfig({
baseStyle: { baseStyle: {
...@@ -313,7 +304,6 @@ export const theme = extendTheme({ ...@@ -313,7 +304,6 @@ export const theme = extendTheme({
primary2: 'linear-gradient(to bottom right, #2152d9 0%,#3370ff 30%,#4e83fd 80%, #85b1ff 100%)' primary2: 'linear-gradient(to bottom right, #2152d9 0%,#3370ff 30%,#4e83fd 80%, #85b1ff 100%)'
}, },
components: { components: {
Modal: ModalTheme,
Button, Button,
Input, Input,
Textarea, Textarea,
......
client/src/hooks/useEditInfo.tsx
import React, { useCallback, useRef } from 'react'; 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 = ({ export const useEditInfo = ({
title, title,
...@@ -58,11 +48,7 @@ export const useEditInfo = ({ ...@@ -58,11 +48,7 @@ export const useEditInfo = ({
// eslint-disable-next-line react/display-name // eslint-disable-next-line react/display-name
const EditModal = useCallback( const EditModal = useCallback(
() => ( () => (
<Modal isOpen={isOpen} onClose={onClose}> <MyModal isOpen={isOpen} onClose={onClose} title={title}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{title}</ModalHeader>
<ModalCloseButton />
<ModalBody> <ModalBody>
<Input <Input
ref={inputRef} ref={inputRef}
...@@ -78,8 +64,7 @@ export const useEditInfo = ({ ...@@ -78,8 +64,7 @@ export const useEditInfo = ({
</Button> </Button>
<Button onClick={onclickConfirm}>确认</Button> <Button onClick={onclickConfirm}>确认</Button>
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal>
), ),
[isOpen, onClose, onclickConfirm, placeholder, title] [isOpen, onClose, onclickConfirm, placeholder, title]
); );
......
client/src/pages/_app.tsx
...@@ -10,7 +10,7 @@ import NProgress from 'nprogress'; //nprogress module ...@@ -10,7 +10,7 @@ import NProgress from 'nprogress'; //nprogress module
import Router from 'next/router'; import Router from 'next/router';
import { clientInitData, feConfigs } from '@/store/static'; import { clientInitData, feConfigs } from '@/store/static';
import { appWithTranslation, useTranslation } from 'next-i18next'; import { appWithTranslation, useTranslation } from 'next-i18next';
import { getLangStore, setLangStore } from '@/utils/i18n'; import { getLangStore } from '@/utils/i18n';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
...@@ -47,8 +47,6 @@ function App({ Component, pageProps }: AppProps) { ...@@ -47,8 +47,6 @@ function App({ Component, pageProps }: AppProps) {
setGoogleVerKey(googleClientVerKey); setGoogleVerKey(googleClientVerKey);
setBaiduTongji(baiduTongji); setBaiduTongji(baiduTongji);
})(); })();
setLangStore('zh');
}, []); }, []);
useEffect(() => { useEffect(() => {
......
client/src/pages/account/components/BillDetail.tsx
import React from 'react'; import React from 'react';
import { import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody, ModalBody,
Flex, Flex,
Box, Box,
...@@ -19,13 +15,14 @@ import { UserBillType } from '@/types/user'; ...@@ -19,13 +15,14 @@ import { UserBillType } from '@/types/user';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { BillSourceMap } from '@/constants/user'; import { BillSourceMap } from '@/constants/user';
import { formatPrice } from '@/utils/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 BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void }) => {
const { t } = useTranslation();
return ( 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> <ModalBody>
<Flex alignItems={'center'} pb={4}> <Flex alignItems={'center'} pb={4}>
<Box flex={'0 0 80px'}>订单号:</Box> <Box flex={'0 0 80px'}>订单号:</Box>
...@@ -75,8 +72,7 @@ const BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void ...@@ -75,8 +72,7 @@ const BillDetail = ({ bill, onClose }: { bill: UserBillType; onClose: () => void
</TableContainer> </TableContainer>
</Box> </Box>
</ModalBody> </ModalBody>
</ModalContent> </MyModal>
</Modal>
); );
}; };
......
client/src/pages/account/components/Info.tsx
...@@ -121,7 +121,7 @@ const UserInfo = () => { ...@@ -121,7 +121,7 @@ const UserInfo = () => {
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Box flex={'0 0 50px'}>余额:</Box> <Box flex={'0 0 50px'}>余额:</Box>
<Box> <Box>
<strong>{userInfo?.balance}</strong> 元 <strong>{userInfo?.balance.toFixed(3)}</strong> 元
</Box> </Box>
<Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}> <Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
充值 充值
......
client/src/pages/account/components/PayModal.tsx
import React, { useState, useCallback } from 'react'; 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 { getPayCode, checkPayResult } from '@/api/user';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { getErrText } from '@/utils/tools'; import { getErrText } from '@/utils/tools';
import { useTranslation } from 'react-i18next';
import Markdown from '@/components/Markdown'; import Markdown from '@/components/Markdown';
import MyModal from '@/components/MyModal';
const PayModal = ({ onClose }: { onClose: () => void }) => { const PayModal = ({ onClose }: { onClose: () => void }) => {
const router = useRouter(); const router = useRouter();
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [inputVal, setInputVal] = useState<number | ''>(''); const [inputVal, setInputVal] = useState<number | ''>('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
...@@ -71,19 +62,15 @@ const PayModal = ({ onClose }: { onClose: () => void }) => { ...@@ -71,19 +62,15 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
); );
return ( return (
<> <MyModal
<Modal
isOpen={true} isOpen={true}
onClose={() => { onClose={() => {
if (payId) return; if (payId) return;
onClose(); onClose();
}} }}
title={t('user.Pay')}
showCloseBtn={!payId}
> >
<ModalOverlay />
<ModalContent minW={'auto'}>
<ModalHeader>充值</ModalHeader>
{!payId && <ModalCloseButton />}
<ModalBody py={0}> <ModalBody py={0}>
{!payId && ( {!payId && (
<> <>
...@@ -145,9 +132,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => { ...@@ -145,9 +132,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
</> </>
)} )}
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal>
</>
); );
}; };
......
client/src/pages/account/index.tsx
...@@ -33,7 +33,7 @@ enum TabEnum { ...@@ -33,7 +33,7 @@ enum TabEnum {
const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => { const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const tabList = useRef([ const tabList = useRef([
{ icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> }, { 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: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
{ icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> }, { icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
{ icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> } { icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }
......
client/src/pages/app/detail/components/AdEdit/components/Nodes/NodeVariable.tsx
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
import { NodeProps } from 'reactflow'; 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 NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow'; import { FlowModuleItemType } from '@/types/flow';
import Container from '../modules/Container'; import Container from '../modules/Container';
import { SystemInputEnum, VariableInputEnum } from '@/constants/app'; import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
import type { VariableItemType } from '@/types/app'; import type { VariableItemType } from '@/types/app';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import { useForm } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form';
import { customAlphabet } from 'nanoid'; import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6); 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 = { export const defaultVariable: VariableItemType = {
id: nanoid(), id: nanoid(),
key: 'key', key: 'key',
...@@ -58,8 +25,6 @@ export const defaultVariable: VariableItemType = { ...@@ -58,8 +25,6 @@ export const defaultVariable: VariableItemType = {
const NodeUserGuide = ({ const NodeUserGuide = ({
data: { inputs, outputs, onChangeNode, ...props } data: { inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => { }: NodeProps<FlowModuleItemType>) => {
const theme = useTheme();
const variables = useMemo( const variables = useMemo(
() => () =>
(inputs.find((item) => item.key === SystemInputEnum.variables) (inputs.find((item) => item.key === SystemInputEnum.variables)
...@@ -67,25 +32,7 @@ const NodeUserGuide = ({ ...@@ -67,25 +32,7 @@ const NodeUserGuide = ({
[inputs] [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( const updateVariables = useCallback(
(value: VariableItemType[]) => { (value: VariableItemType[]) => {
...@@ -102,9 +49,9 @@ const NodeUserGuide = ({ ...@@ -102,9 +49,9 @@ const NodeUserGuide = ({
const onclickSubmit = useCallback( const onclickSubmit = useCallback(
({ variable }: { variable: VariableItemType }) => { ({ variable }: { variable: VariableItemType }) => {
updateVariables(variables.map((item) => (item.id === variable.id ? variable : item))); updateVariables(variables.map((item) => (item.id === variable.id ? variable : item)));
onClose(); setEditVariable(undefined);
}, },
[onClose, updateVariables, variables] [updateVariables, variables]
); );
return ( return (
...@@ -134,8 +81,7 @@ const NodeUserGuide = ({ ...@@ -134,8 +81,7 @@ const NodeUserGuide = ({
w={'16px'} w={'16px'}
cursor={'pointer'} cursor={'pointer'}
onClick={() => { onClick={() => {
onOpen(); setEditVariable(item);
reset({ variable: item });
}} }}
/> />
<MyIcon <MyIcon
...@@ -159,8 +105,7 @@ const NodeUserGuide = ({ ...@@ -159,8 +105,7 @@ const NodeUserGuide = ({
onClick={() => { onClick={() => {
const newVariable = { ...defaultVariable, id: nanoid() }; const newVariable = { ...defaultVariable, id: nanoid() };
updateVariables(variables.concat(newVariable)); updateVariables(variables.concat(newVariable));
reset({ variable: newVariable }); setEditVariable(newVariable);
onOpen();
}} }}
> >
新增 新增
...@@ -168,133 +113,13 @@ const NodeUserGuide = ({ ...@@ -168,133 +113,13 @@ const NodeUserGuide = ({
</Box> </Box>
</Container> </Container>
</NodeCard> </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 { ...@@ -27,9 +27,9 @@ import {
} from '@/types/flow'; } from '@/types/flow';
import { AppModuleItemType } from '@/types/app'; import { AppModuleItemType } from '@/types/app';
import { customAlphabet } from 'nanoid'; import { customAlphabet } from 'nanoid';
import { putAppById } from '@/api/app';
import { useRequest } from '@/hooks/useRequest'; import { useRequest } from '@/hooks/useRequest';
import type { AppSchema } from '@/types/mongoSchema'; import type { AppSchema } from '@/types/mongoSchema';
import { useUserStore } from '@/store/user';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
...@@ -92,6 +92,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -92,6 +92,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
const theme = useTheme(); const theme = useTheme();
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
const ChatTestRef = useRef<ChatTestComponentRef>(null); const ChatTestRef = useRef<ChatTestComponentRef>(null);
const { updateAppDetail } = useUserStore();
const { x, y, zoom } = useViewport(); const { x, y, zoom } = useViewport();
const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]); const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]);
...@@ -245,7 +246,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -245,7 +246,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
const { mutate: onclickSave, isLoading } = useRequest({ const { mutate: onclickSave, isLoading } = useRequest({
mutationFn: () => { mutationFn: () => {
return putAppById(app._id, { return updateAppDetail(app._id, {
modules: flow2AppModules() modules: flow2AppModules()
}); });
}, },
......
client/src/pages/app/detail/components/BasicEdit/index.tsx
...@@ -460,22 +460,32 @@ const Settings = ({ appId }: { appId: string }) => { ...@@ -460,22 +460,32 @@ const Settings = ({ appId }: { appId: string }) => {
相似度: {getValues('kb.searchSimilarity')}, 单次搜索数量: {getValues('kb.searchLimit')}, 相似度: {getValues('kb.searchSimilarity')}, 单次搜索数量: {getValues('kb.searchLimit')},
空搜索时拒绝回复: {getValues('kb.searchEmptyText') !== '' ? 'true' : 'false'} 空搜索时拒绝回复: {getValues('kb.searchEmptyText') !== '' ? 'true' : 'false'}
</Flex> </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) => ( {selectedKbList.map((item) => (
<MyTooltip key={item._id} label={'查看知识库详情'}>
<Flex <Flex
key={item._id}
alignItems={'center'} alignItems={'center'}
p={2} p={2}
bg={'white'} bg={'white'}
boxShadow={'0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06)'} boxShadow={'0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06)'}
borderRadius={'md'} borderRadius={'md'}
border={theme.borders.base} border={theme.borders.base}
cursor={'pointer'}
onClick={() =>
router.push({
pathname: '/kb/detail',
query: {
kbId: item._id
}
})
}
> >
<Avatar src={item.avatar} w={'18px'} mr={1} /> <Avatar src={item.avatar} w={'18px'} mr={1} />
<Box flex={'1 0 0'} w={0} className={'textEllipsis'} fontSize={'sm'}> <Box flex={'1 0 0'} w={0} className={'textEllipsis'} fontSize={'sm'}>
{item.name} {item.name}
</Box> </Box>
</Flex> </Flex>
</MyTooltip>
))} ))}
</Grid> </Grid>
</Box> </Box>
......
client/src/pages/app/detail/components/InfoModal.tsx
...@@ -6,13 +6,8 @@ import { ...@@ -6,13 +6,8 @@ import {
FormControl, FormControl,
Input, Input,
Textarea, Textarea,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter, ModalFooter,
ModalBody, ModalBody
ModalCloseButton
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { AppSchema } from '@/types/mongoSchema'; import { AppSchema } from '@/types/mongoSchema';
...@@ -23,6 +18,7 @@ import { getErrText } from '@/utils/tools'; ...@@ -23,6 +18,7 @@ import { getErrText } from '@/utils/tools';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import { useRequest } from '@/hooks/useRequest'; import { useRequest } from '@/hooks/useRequest';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import MyModal from '@/components/MyModal';
const InfoModal = ({ const InfoModal = ({
defaultApp, defaultApp,
...@@ -120,11 +116,7 @@ const InfoModal = ({ ...@@ -120,11 +116,7 @@ const InfoModal = ({
); );
return ( return (
<Modal isOpen={true} onClose={onClose}> <MyModal isOpen={true} onClose={onClose} title={'应用信息设置'}>
<ModalOverlay />
<ModalContent maxW={'min(90vw,470px)'}>
<ModalHeader>应用信息设置</ModalHeader>
<ModalCloseButton />
<ModalBody> <ModalBody>
<Box>头像 & 名称</Box> <Box>头像 & 名称</Box>
<Flex mt={2} alignItems={'center'}> <Flex mt={2} alignItems={'center'}>
...@@ -171,10 +163,9 @@ const InfoModal = ({ ...@@ -171,10 +163,9 @@ const InfoModal = ({
保存 保存
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent>
<File onSelect={onSelectFile} /> <File onSelect={onSelectFile} />
</Modal> </MyModal>
); );
}; };
......
client/src/pages/app/detail/components/KBSelectModal.tsx
...@@ -4,13 +4,9 @@ import { ...@@ -4,13 +4,9 @@ import {
Flex, Flex,
Box, Box,
Button, Button,
Modal,
ModalOverlay,
ModalContent,
ModalBody, ModalBody,
ModalHeader, ModalHeader,
ModalFooter, ModalFooter,
ModalCloseButton,
useTheme, useTheme,
Textarea Textarea
} from '@chakra-ui/react'; } from '@chakra-ui/react';
...@@ -22,6 +18,7 @@ import type { SelectedKbType } from '@/types/plugin'; ...@@ -22,6 +18,7 @@ import type { SelectedKbType } from '@/types/plugin';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import MySlider from '@/components/Slider'; import MySlider from '@/components/Slider';
import MyTooltip from '@/components/MyTooltip'; import MyTooltip from '@/components/MyTooltip';
import MyModal from '@/components/MyModal';
export type KbParamsType = { export type KbParamsType = {
searchSimilarity: number; searchSimilarity: number;
...@@ -45,17 +42,15 @@ export const KBSelectModal = ({ ...@@ -45,17 +42,15 @@ export const KBSelectModal = ({
const { isPc } = useGlobalStore(); const { isPc } = useGlobalStore();
return ( return (
<Modal isOpen={true} isCentered={!isPc} onClose={onClose}> <MyModal
<ModalOverlay /> isOpen={true}
<ModalContent isCentered={!isPc}
display={'flex'} maxW={['90vw', '800px']}
flexDirection={'column'}
w={'800px'} w={'800px'}
maxW={'90vw'} onClose={onClose}
h={['90vh', 'auto']}
> >
<Flex flexDirection={'column'} h={['90vh', 'auto']}>
<ModalHeader>关联的知识库({selectedKbList.length})</ModalHeader> <ModalHeader>关联的知识库({selectedKbList.length})</ModalHeader>
<ModalCloseButton />
<ModalBody <ModalBody
flex={['1 0 0', '0 0 auto']} flex={['1 0 0', '0 0 auto']}
maxH={'80vh'} maxH={'80vh'}
...@@ -115,8 +110,8 @@ export const KBSelectModal = ({ ...@@ -115,8 +110,8 @@ export const KBSelectModal = ({
完成 完成
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </Flex>
</Modal> </MyModal>
); );
}; };
...@@ -137,11 +132,8 @@ export const KbParamsModal = ({ ...@@ -137,11 +132,8 @@ export const KbParamsModal = ({
}); });
return ( 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> <ModalBody>
<Box display={['block', 'flex']} pt={3} pb={5}> <Box display={['block', 'flex']} pt={3} pb={5}>
<Box flex={'0 0 100px'} mb={[8, 0]}> <Box flex={'0 0 100px'} mb={[8, 0]}>
...@@ -214,8 +206,8 @@ export const KbParamsModal = ({ ...@@ -214,8 +206,8 @@ export const KbParamsModal = ({
完成 完成
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </Flex>
</Modal> </MyModal>
); );
}; };
......
client/src/pages/app/detail/components/Share.tsx
import React, { useCallback, useState } from 'react'; import React, { useState } from 'react';
import { import {
Flex, Flex,
Box, Box,
...@@ -11,19 +11,9 @@ import { ...@@ -11,19 +11,9 @@ import {
Td, Td,
Tbody, Tbody,
useDisclosure, useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter, ModalFooter,
ModalBody, ModalBody,
ModalCloseButton,
FormControl, FormControl,
Slider,
SliderTrack,
SliderFilledTrack,
SliderThumb,
SliderMark,
Input Input
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { QuestionOutlineIcon } from '@chakra-ui/icons'; import { QuestionOutlineIcon } from '@chakra-ui/icons';
...@@ -36,12 +26,12 @@ import { formatTimeToChatTime, useCopyData, getErrText } from '@/utils/tools'; ...@@ -36,12 +26,12 @@ import { formatTimeToChatTime, useCopyData, getErrText } from '@/utils/tools';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { defaultShareChat } from '@/constants/model'; import { defaultShareChat } from '@/constants/model';
import type { ShareChatEditType } from '@/types/app'; import type { ShareChatEditType } from '@/types/app';
import MyTooltip from '@/components/MyTooltip';
import { useRequest } from '@/hooks/useRequest'; import { useRequest } from '@/hooks/useRequest';
import { formatPrice } from '@/utils/user'; import { formatPrice } from '@/utils/user';
import MyTooltip from '@/components/MyTooltip';
import MyModal from '@/components/MyModal';
const Share = ({ appId }: { appId: string }) => { const Share = ({ appId }: { appId: string }) => {
const { toast } = useToast();
const { Loading, setIsLoading } = useLoading(); const { Loading, setIsLoading } = useLoading();
const { copyData } = useCopyData(); const { copyData } = useCopyData();
const { const {
...@@ -175,11 +165,11 @@ const Share = ({ appId }: { appId: string }) => { ...@@ -175,11 +165,11 @@ const Share = ({ appId }: { appId: string }) => {
</Flex> </Flex>
)} )}
{/* create shareChat modal */} {/* create shareChat modal */}
<Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}> <MyModal
<ModalOverlay /> isOpen={isOpenCreateShareChat}
<ModalContent maxW={'min(90vw,500px)'}> onClose={onCloseCreateShareChat}
<ModalHeader>创建免登录窗口</ModalHeader> title={'创建免登录窗口'}
<ModalCloseButton /> >
<ModalBody> <ModalBody>
<FormControl> <FormControl>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
...@@ -209,8 +199,7 @@ const Share = ({ appId }: { appId: string }) => { ...@@ -209,8 +199,7 @@ const Share = ({ appId }: { appId: string }) => {
确认 确认
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal>
<Loading loading={isFetching} fixed={false} /> <Loading loading={isFetching} fixed={false} />
</Box> </Box>
); );
......
client/src/pages/app/detail/components/VariableEditModal.tsx
...@@ -2,9 +2,6 @@ import React, { useState } from 'react'; ...@@ -2,9 +2,6 @@ import React, { useState } from 'react';
import { import {
Box, Box,
Button, Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader, ModalHeader,
ModalFooter, ModalFooter,
ModalBody, ModalBody,
...@@ -28,6 +25,7 @@ import { useForm } from 'react-hook-form'; ...@@ -28,6 +25,7 @@ import { useForm } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form'; import { useFieldArray } from 'react-hook-form';
import { customAlphabet } from 'nanoid'; import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6); const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
import MyModal from '@/components/MyModal';
const VariableTypeList = [ const VariableTypeList = [
{ label: '文本', icon: 'settingLight', key: VariableInputEnum.input }, { label: '文本', icon: 'settingLight', key: VariableInputEnum.input },
...@@ -67,9 +65,7 @@ const VariableEditModal = ({ ...@@ -67,9 +65,7 @@ const VariableEditModal = ({
}); });
return ( return (
<Modal isOpen={true} onClose={onClose}> <MyModal isOpen={true} onClose={onClose}>
<ModalOverlay />
<ModalContent maxW={'Min(400px,90vw)'}>
<ModalHeader display={'flex'}> <ModalHeader display={'flex'}>
<MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} /> <MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} />
变量设置 变量设置
...@@ -192,8 +188,7 @@ const VariableEditModal = ({ ...@@ -192,8 +188,7 @@ const VariableEditModal = ({
</Button> </Button>
<Button onClick={handleSubmit(onSubmit)}>确认</Button> <Button onClick={handleSubmit(onSubmit)}>确认</Button>
</ModalFooter> </ModalFooter>
</ModalContent> </MyModal>
</Modal>
); );
}; };
......
client/src/pages/app/list/component/CreateModal.tsx
...@@ -3,9 +3,6 @@ import { ...@@ -3,9 +3,6 @@ import {
Box, Box,
Flex, Flex,
Button, Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader, ModalHeader,
ModalFooter, ModalFooter,
ModalBody, ModalBody,
...@@ -26,6 +23,7 @@ import { useGlobalStore } from '@/store/global'; ...@@ -26,6 +23,7 @@ import { useGlobalStore } from '@/store/global';
import { useRequest } from '@/hooks/useRequest'; import { useRequest } from '@/hooks/useRequest';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import MyTooltip from '@/components/MyTooltip'; import MyTooltip from '@/components/MyTooltip';
import MyModal from '@/components/MyModal';
type FormType = { type FormType = {
avatar: string; avatar: string;
...@@ -92,9 +90,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: ( ...@@ -92,9 +90,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
}); });
return ( return (
<Modal isOpen onClose={onClose} isCentered={!isPc}> <MyModal isOpen onClose={onClose} isCentered={!isPc}>
<ModalOverlay />
<ModalContent maxW={'min(700px,90vw)'}>
<ModalHeader fontSize={'2xl'}>创建属于你的 AI 应用</ModalHeader> <ModalHeader fontSize={'2xl'}>创建属于你的 AI 应用</ModalHeader>
<ModalBody> <ModalBody>
<Box color={'myGray.800'} fontWeight={'bold'}> <Box color={'myGray.800'} fontWeight={'bold'}>
...@@ -174,10 +170,9 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: ( ...@@ -174,10 +170,9 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
确认创建 确认创建
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent>
<File onSelect={onSelectFile} /> <File onSelect={onSelectFile} />
</Modal> </MyModal>
); );
}; };
......
client/src/pages/kb/detail/components/InputDataModal.tsx
import React, { useState, useCallback } from 'react'; 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 { useForm } from 'react-hook-form';
import { postKbDataFromList, putKbDataById, delOneKbDataByDataId } from '@/api/plugins/kb'; import { postKbDataFromList, putKbDataById, delOneKbDataByDataId } from '@/api/plugins/kb';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { TrainingModeEnum } from '@/constants/plugin'; import { TrainingModeEnum } from '@/constants/plugin';
import { getErrText } from '@/utils/tools'; import { getErrText } from '@/utils/tools';
import MyIcon from '@/components/Icon';
import { vectorModelList } from '@/store/static'; import { vectorModelList } from '@/store/static';
import MyIcon from '@/components/Icon';
import MyModal from '@/components/MyModal';
export type FormData = { dataId?: string; a: string; q: string }; export type FormData = { dataId?: string; a: string; q: string };
...@@ -133,19 +123,15 @@ const InputDataModal = ({ ...@@ -133,19 +123,15 @@ const InputDataModal = ({
); );
return ( 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'} maxW={'90vw'}
position={'relative'}
> >
<ModalHeader>{defaultValues.dataId ? '变更数据' : '手动导入数据'}</ModalHeader> <Flex display={'flex'} flexDirection={'column'} h={'90vh'}>
<ModalCloseButton />
<Box <Box
display={'flex'} display={'flex'}
flexDirection={['column', 'row']} flexDirection={['column', 'row']}
...@@ -225,8 +211,8 @@ const InputDataModal = ({ ...@@ -225,8 +211,8 @@ const InputDataModal = ({
{defaultValues.dataId ? '确认变更' : '确认导入'} {defaultValues.dataId ? '确认变更' : '确认导入'}
</Button> </Button>
</Flex> </Flex>
</ModalContent> </Flex>
</Modal> </MyModal>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment