mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 21:13:50 +00:00
perf: app detail
This commit is contained in:
@@ -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'}
|
||||
|
@@ -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'}
|
||||
|
@@ -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>
|
||||
|
@@ -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',
|
||||
|
@@ -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>
|
||||
);
|
||||
|
@@ -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)} />
|
||||
)}
|
||||
|
@@ -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)}
|
||||
|
@@ -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}
|
||||
|
Reference in New Issue
Block a user