perf: app detail

This commit is contained in:
archer 2023-07-25 13:15:41 +08:00
parent 3adb97b396
commit c16e2b8dd6
No known key found for this signature in database
GPG Key ID: 569A5660D2379E28
29 changed files with 39 additions and 19 deletions

View File

@ -90,7 +90,7 @@ const QuoteModal = ({
key={item.id} key={item.id}
flex={'1 0 0'} flex={'1 0 0'}
p={2} p={2}
borderRadius={'sm'} borderRadius={'lg'}
border={theme.borders.base} border={theme.borders.base}
_notLast={{ mb: 2 }} _notLast={{ mb: 2 }}
position={'relative'} position={'relative'}

View File

@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react';
import { ChatModuleEnum } from '@/constants/chat'; import { ChatModuleEnum } from '@/constants/chat';
import { ChatHistoryItemResType, ChatItemType, QuoteItemType } from '@/types/chat'; import { ChatHistoryItemResType, ChatItemType, QuoteItemType } from '@/types/chat';
import { Flex, BoxProps } from '@chakra-ui/react'; import { Flex, BoxProps } from '@chakra-ui/react';
import { updateHistoryQuote } from '@/api/chat';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import Tag from '../Tag'; import Tag from '../Tag';
import MyTooltip from '../MyTooltip'; import MyTooltip from '../MyTooltip';
@ -62,7 +61,7 @@ const ResponseDetailModal = ({
</MyTooltip> </MyTooltip>
)} )}
{completeMessages.length > 0 && ( {completeMessages.length > 0 && (
<MyTooltip label={'点击查看完整对话记录'} forceShow> <MyTooltip label={'点击查看完整对话记录'}>
<Tag <Tag
colorSchema="green" colorSchema="green"
cursor={'pointer'} cursor={'pointer'}

View File

@ -584,6 +584,7 @@ const ChatBox = (
whiteSpace={'pre-wrap'} whiteSpace={'pre-wrap'}
{...MessageCardStyle} {...MessageCardStyle}
bg={'myBlue.300'} bg={'myBlue.300'}
borderRadius={'8px 0 8px 8px'}
> >
<Box as={'p'}>{item.value}</Box> <Box as={'p'}>{item.value}</Box>
</Card> </Card>

View File

@ -293,6 +293,12 @@ export const theme = extendTheme({
md: '1px solid #DAE0E2', md: '1px solid #DAE0E2',
lg: '1px solid #D0E0E2' lg: '1px solid #D0E0E2'
}, },
shadows: {
sm: '0 0 5px rgba(0,0,0,0.1)',
md: '0 0 8px rgba(0,0,0,0.1)',
base: '0 0 10px rgba(0,0,0,0.15)',
lg: '0 0 10px rgba(0,0,0,0.2)'
},
breakpoints: { breakpoints: {
sm: '900px', sm: '900px',
md: '1200px', md: '1200px',

View File

@ -192,7 +192,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
}, [screenWidth]); }, [screenWidth]);
return ( return (
<Box ref={Dom} w={'100%'} flex={'1 0 0'} h={'100%'} minH={'150px'} position={'relative'}> <Box ref={Dom} w={'100%'} flex={'1 0 0'} h={'100%'} position={'relative'}>
<Loading fixed={false} /> <Loading fixed={false} />
</Box> </Box>
); );

View File

@ -13,7 +13,7 @@ import dynamic from 'next/dynamic';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import TotalUsage from './Charts/TotalUsage'; import TotalUsage from './Charts/TotalUsage';
import BasicEdit from './BasicEdit'; import MyTooltip from '@/components/MyTooltip';
const InfoModal = dynamic(() => import('./InfoModal')); const InfoModal = dynamic(() => import('./InfoModal'));
@ -74,7 +74,9 @@ const OverView = ({ appId }: { appId: string }) => {
position={'relative'} position={'relative'}
> >
<Flex alignItems={'center'} py={2}> <Flex alignItems={'center'} py={2}>
<Avatar src={appDetail.avatar} borderRadius={'md'} w={'28px'} /> <MyTooltip label={'选择头像'}>
<Avatar src={appDetail.avatar} borderRadius={'md'} w={'28px'} />
</MyTooltip>
<Box ml={3} fontWeight={'bold'} fontSize={'lg'}> <Box ml={3} fontWeight={'bold'} fontSize={'lg'}>
{appDetail.name} {appDetail.name}
</Box> </Box>
@ -95,7 +97,14 @@ const OverView = ({ appId }: { appId: string }) => {
onClick={openConfirm(handleDelModel)} onClick={openConfirm(handleDelModel)}
/> />
</Flex> </Flex>
<Box className={'textEllipsis3'} py={3} wordBreak={'break-all'} color={'myGray.600'}> <Box
h={'68px'}
flex={1}
my={2}
className={'textEllipsis3'}
wordBreak={'break-all'}
color={'myGray.600'}
>
{appDetail.intro || '快来给应用一个介绍~'} {appDetail.intro || '快来给应用一个介绍~'}
</Box> </Box>
<Flex> <Flex>
@ -138,14 +147,12 @@ const OverView = ({ appId }: { appId: string }) => {
<Box mb={2} fontSize={['md', 'xl']}> <Box mb={2} fontSize={['md', 'xl']}>
14 14
</Box> </Box>
<TotalUsage appId={appId} /> <Box flex={'1 0 0'} boxShadow={theme.shadows.base} borderRadius={'lg'} px={5} py={4}>
<TotalUsage appId={appId} />
</Box>
</Flex> </Flex>
</Grid> </Grid>
<Box flex={'1 0 0'} h={['auto', 0]} mt={4} borderTop={theme.borders.base}>
<BasicEdit appId={appId} />
</Box>
{settingAppInfo && ( {settingAppInfo && (
<InfoModal defaultApp={settingAppInfo} onClose={() => setSettingAppInfo(undefined)} /> <InfoModal defaultApp={settingAppInfo} onClose={() => setSettingAppInfo(undefined)} />
)} )}

View File

@ -15,7 +15,11 @@ import MyIcon from '@/components/Icon';
import PageContainer from '@/components/PageContainer'; import PageContainer from '@/components/PageContainer';
import Loading from '@/components/Loading'; import Loading from '@/components/Loading';
const Edit = dynamic(() => import('./components/Edit'), { const BasicEdit = dynamic(() => import('./components/BasicEdit'), {
ssr: false,
loading: () => <Loading />
});
const AdEdit = dynamic(() => import('./components/AdEdit'), {
ssr: false, ssr: false,
loading: () => <Loading /> loading: () => <Loading />
}); });
@ -28,7 +32,8 @@ const API = dynamic(() => import('./components/API'), {
enum TabEnum { enum TabEnum {
'overview' = 'overview', 'overview' = 'overview',
'settings' = 'settings', 'basicEdit' = 'basicEdit',
'adEdit' = 'adEdit',
'share' = 'share', 'share' = 'share',
'API' = 'API' 'API' = 'API'
} }
@ -54,8 +59,9 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const tabList = useMemo( const tabList = useMemo(
() => [ () => [
{ label: '基础', id: TabEnum.overview, icon: 'overviewLight' }, { label: '概览', id: TabEnum.overview, icon: 'overviewLight' },
{ label: '高级编排', id: TabEnum.settings, icon: 'settingLight' }, { label: '简易编排', id: TabEnum.basicEdit, icon: 'edit' },
{ label: '高级编排', id: TabEnum.adEdit, icon: 'settingLight' },
{ label: '链接分享', id: TabEnum.share, icon: 'shareLight' }, { label: '链接分享', id: TabEnum.share, icon: 'shareLight' },
{ label: 'API访问', id: TabEnum.API, icon: 'apiLight' }, { label: 'API访问', id: TabEnum.API, icon: 'apiLight' },
{ label: '立即对话', id: 'startChat', icon: 'chatLight' } { label: '立即对话', id: 'startChat', icon: 'chatLight' }
@ -169,8 +175,9 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
</Box> </Box>
<Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}> <Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}>
{currentTab === TabEnum.overview && <OverView appId={appId} />} {currentTab === TabEnum.overview && <OverView appId={appId} />}
{currentTab === TabEnum.settings && appDetail && ( {currentTab === TabEnum.basicEdit && <BasicEdit appId={appId} />}
<Edit {currentTab === TabEnum.adEdit && appDetail && (
<AdEdit
app={appDetail} app={appDetail}
fullScreen={true} fullScreen={true}
onFullScreen={() => setCurrentTab(TabEnum.overview)} onFullScreen={() => setCurrentTab(TabEnum.overview)}

View File

@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
px={3} px={3}
borderRadius={'md'} borderRadius={'md'}
_hover={{ bg: 'myGray.200' }} _hover={{ bg: 'myGray.200' }}
onClick={() => router.back()} onClick={() => router.push('/app/list')}
> >
<IconButton <IconButton
mr={3} mr={3}