perf: app detail

This commit is contained in:
archer
2023-07-25 13:15:41 +08:00
parent 3adb97b396
commit c16e2b8dd6
29 changed files with 39 additions and 19 deletions

View File

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

View File

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

View File

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

View File

@@ -293,6 +293,12 @@ export const theme = extendTheme({
md: '1px solid #DAE0E2',
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: {
sm: '900px',
md: '1200px',

View File

@@ -192,7 +192,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
}, [screenWidth]);
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} />
</Box>
);

View File

@@ -13,7 +13,7 @@ import dynamic from 'next/dynamic';
import Avatar from '@/components/Avatar';
import MyIcon from '@/components/Icon';
import TotalUsage from './Charts/TotalUsage';
import BasicEdit from './BasicEdit';
import MyTooltip from '@/components/MyTooltip';
const InfoModal = dynamic(() => import('./InfoModal'));
@@ -74,7 +74,9 @@ const OverView = ({ appId }: { appId: string }) => {
position={'relative'}
>
<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'}>
{appDetail.name}
</Box>
@@ -95,7 +97,14 @@ const OverView = ({ appId }: { appId: string }) => {
onClick={openConfirm(handleDelModel)}
/>
</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 || '快来给应用一个介绍~'}
</Box>
<Flex>
@@ -138,14 +147,12 @@ const OverView = ({ appId }: { appId: string }) => {
<Box mb={2} fontSize={['md', 'xl']}>
14
</Box>
<TotalUsage appId={appId} />
<Box flex={'1 0 0'} boxShadow={theme.shadows.base} borderRadius={'lg'} px={5} py={4}>
<TotalUsage appId={appId} />
</Box>
</Flex>
</Grid>
<Box flex={'1 0 0'} h={['auto', 0]} mt={4} borderTop={theme.borders.base}>
<BasicEdit appId={appId} />
</Box>
{settingAppInfo && (
<InfoModal defaultApp={settingAppInfo} onClose={() => setSettingAppInfo(undefined)} />
)}

View File

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

View File

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