perf: app detail
This commit is contained in:
parent
3adb97b396
commit
c16e2b8dd6
@ -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'}
|
||||||
|
|||||||
@ -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'}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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)} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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)}
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user