ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-29 01:40:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 发送区域样式

Browse Source
This commit is contained in:
archer
2023-04-03 17:28:35 +08:00
parent 042b0c535a
commit becee69d6a
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/_app.tsx
View File

@@ -1,4 +1,5 @@
import type { AppProps, NextWebVitalsMetric } from 'next/app'; import { useEffect } from 'react';
import type { AppProps } from 'next/app';
import Script from 'next/script'; import Script from 'next/script';
import Head from 'next/head'; import Head from 'next/head';
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'; import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
@@ -9,6 +10,7 @@ import NProgress from 'nprogress'; //nprogress module
import Router from 'next/router'; import Router from 'next/router';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
import '../styles/reset.scss'; import '../styles/reset.scss';
import { useToast } from '@/hooks/useToast';
//Binding events. //Binding events.
Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeStart', () => NProgress.start());
@@ -27,6 +29,17 @@ const queryClient = new QueryClient({
}); });
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
const { toast } = useToast();
// 校验是否支持 click 事件
useEffect(() => {
if (typeof document.createElement('div').click !== 'function') {
toast({
title: '你的浏览器版本过低',
status: 'warning'
});
}
}, [toast]);
return ( return (
<> <>
<Head> <Head>

33
src/pages/chat/index.tsx
View File

@@ -192,11 +192,18 @@ const Chat = ({ chatId }: { chatId: string }) => {
* 发送一个内容 * 发送一个内容
*/ */
const sendPrompt = useCallback(async () => { const sendPrompt = useCallback(async () => {
if (isChatting) {
toast({
title: '正在聊天中...请等待结束',
status: 'warning'
});
return;
}
const storeInput = inputVal; const storeInput = inputVal;
// 去除空行 // 去除空行
const val = inputVal.trim().replace(/\n\s*/g, '\n'); const val = inputVal.trim().replace(/\n\s*/g, '\n');
if (!chatData?.modelId || !val || isChatting) { if (!chatData?.modelId || !val) {
toast({ toast({
title: '内容为空', title: '内容为空',
status: 'warning' status: 'warning'
@@ -455,7 +462,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
{/* 发送区 */} {/* 发送区 */}
<Box m={media('20px auto', '0 auto')} w={'100%'} maxW={media('min(750px, 100%)', 'auto')}> <Box m={media('20px auto', '0 auto')} w={'100%'} maxW={media('min(750px, 100%)', 'auto')}>
<Box <Box
py={5} py={'18px'}
position={'relative'} position={'relative'}
boxShadow={`0 0 15px rgba(0,0,0,0.1)`} boxShadow={`0 0 15px rgba(0,0,0,0.1)`}
border={media('1px solid', '0')} border={media('1px solid', '0')}
@@ -474,7 +481,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
}} }}
placeholder="提问" placeholder="提问"
resize={'none'} resize={'none'}
defaultValue={inputVal} value={inputVal}
rows={1} rows={1}
height={'22px'} height={'22px'}
lineHeight={'22px'} lineHeight={'22px'}
@@ -509,26 +516,24 @@ const Chat = ({ chatId }: { chatId: string }) => {
w={'30px'} w={'30px'}
position={'absolute'} position={'absolute'}
right={['12px', '20px']} right={['12px', '20px']}
bottom={3} bottom={'15px'}
onClick={sendPrompt} onClick={sendPrompt}
> >
{isChatting ? ( {isChatting ? (
<Image <Image
style={{ transform: 'translateY(4px)' }} style={{ transform: 'translateY(4px)' }}
src={'/icon/chatting.svg'} src={'/icon/chatting.svg'}
width={30} fill
height={30}
alt={''} alt={''}
/> />
) : ( ) : (
<Box cursor={'pointer'}> <Icon
<Icon name={'chatSend'}
name={'chatSend'} width={['18px', '20px']}
width={'20px'} height={['18px', '20px']}
height={'20px'} cursor={'pointer'}
fill={useColorModeValue('#718096', 'white')} fill={useColorModeValue('#718096', 'white')}
></Icon> ></Icon>
</Box>
)} )}
</Flex> </Flex>
</Box> </Box>