feat: fold sliderbar

This commit is contained in:
archer
2023-05-12 23:18:14 +08:00
parent 4e0c876154
commit 651eb1bf6b
2 changed files with 57 additions and 11 deletions

View File

@@ -221,8 +221,8 @@ export const theme = extendTheme({
sm: '900px',
md: '1200px',
lg: '1500px',
xl: '1800',
'2xl': '2100'
xl: '1800px',
'2xl': '2100px'
},
components: {
Modal: ModalTheme,

View File

@@ -98,6 +98,7 @@ const Chat = ({
top: number;
message: ChatSiteItemType;
}>();
const [foldSliderBar, setFoldSlideBar] = useState(false);
const {
lastChatModelId,
@@ -636,14 +637,57 @@ const Chat = ({
flexDirection={['column', 'row']}
backgroundColor={useColorModeValue('#fdfdfd', '')}
>
{/* pc always show history. phone is only show when modelId is present */}
{/* pc always show history. */}
{(isPc || !modelId) && (
<Box flex={[1, '0 0 250px']} w={['100%', 0]} h={'100%'}>
<History
onclickDelHistory={onclickDelHistory}
onclickExportChat={onclickExportChat}
isPcDevice={isPcDevice}
/>
<Box
position={'relative'}
flex={foldSliderBar ? '0 0 0' : [1, '0 0 250px', '0 0 280px', '0 0 310px', '0 0 340px']}
w={['100%', 0]}
h={'100%'}
zIndex={1}
transition={'0.2s'}
_hover={{
'& > div': { visibility: 'visible', opacity: 1 }
}}
>
<Flex
position={'absolute'}
right={0}
top={'50%'}
transform={'translate(50%,-50%)'}
alignItems={'center'}
justifyContent={'flex-end'}
pr={1}
w={'36px'}
h={'50px'}
borderRadius={'10px'}
bg={'rgba(0,0,0,0.5)'}
cursor={'pointer'}
transition={'0.2s'}
{...(foldSliderBar
? {
opacity: 0.6
}
: {
visibility: 'hidden',
opacity: 0
})}
onClick={() => setFoldSlideBar(!foldSliderBar)}
>
<MyIcon
name={'back'}
transform={foldSliderBar ? 'rotate(180deg)' : ''}
w={'14px'}
color={'white'}
/>
</Flex>
<Box position={'relative'} h={'100%'} bg={'white'} overflow={'hidden'}>
<History
onclickDelHistory={onclickDelHistory}
onclickExportChat={onclickExportChat}
isPcDevice={isPcDevice}
/>
</Box>
</Box>
)}
@@ -656,6 +700,7 @@ const Chat = ({
flex={'1 0 0'}
flexDirection={'column'}
>
{/* chat header */}
<Flex
alignItems={'center'}
justifyContent={'space-between'}
@@ -722,10 +767,11 @@ const Chat = ({
<Box w={'16px'} h={'16px'} />
)}
</Flex>
{/* chat content box */}
<Box ref={ChatBox} pb={[4, 0]} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'}>
<Box id={'history'} maxW={['auto', '800px', '1000px']} m={'auto'}>
<Box id={'history'}>
{chatData.history.map((item, index) => (
<Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 4]}>
<Flex key={item._id} alignItems={'flex-start'} py={2} px={[2, 6, 8]}>
{item.obj === 'Human' && <Box flex={1} />}
{/* avatar */}
<Menu autoSelect={false} isLazy>