style(chat): improve chat layout spacing and empty state styling
- Add top margin (rb:mt-2) to bottom label in ChatContent for better spacing - Wrap Chat component in centered container with max-width (760px) and top padding - Replace AnalysisEmptyIcon with BgImg in empty state for improved visual consistency - Add size prop [320,180] to Empty component for proper empty state dimensions - Adjust contentClassName spacing for better layout alignment - Improves overall chat interface visual hierarchy and spacing consistency
This commit is contained in:
@@ -68,7 +68,7 @@ const ChatContent: FC<ChatContentProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
{/* 底部标签(如时间戳、用户名等) */}
|
{/* 底部标签(如时间戳、用户名等) */}
|
||||||
{labelPosition === 'bottom' &&
|
{labelPosition === 'bottom' &&
|
||||||
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
|
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular rb:mt-2">
|
||||||
{labelFormat(item)}
|
{labelFormat(item)}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -254,9 +254,10 @@ const Conversation: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rb:relative rb:h-screen rb:px-4 rb:flex-[1_1_auto]">
|
<div className="rb:relative rb:h-screen rb:px-4 rb:flex-[1_1_auto]">
|
||||||
|
<div className='rb:w-[760px] rb:h-screen rb:mx-auto rb:pt-10'>
|
||||||
<Chat
|
<Chat
|
||||||
empty={<Empty url={AnalysisEmptyIcon} className="rb:h-full" subTitle={t('memoryConversation.emptyDesc')} />}
|
empty={<Empty url={BgImg} className="rb:h-full" size={[320,180]} subTitle={t('memoryConversation.emptyDesc')} />}
|
||||||
contentClassName="rb:h-[calc(100%-152px)]"
|
contentClassName="rb:h-[calc(100%-152px)] "
|
||||||
data={chatList}
|
data={chatList}
|
||||||
streamLoading={streamLoading}
|
streamLoading={streamLoading}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
@@ -285,6 +286,7 @@ const Conversation: FC = () => {
|
|||||||
</Flex>
|
</Flex>
|
||||||
</Form>
|
</Form>
|
||||||
</Chat>
|
</Chat>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Flex>
|
</Flex>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user