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>
|
||||
{/* 底部标签(如时间戳、用户名等) */}
|
||||
{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)}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -254,9 +254,10 @@ const Conversation: FC = () => {
|
||||
</div>
|
||||
|
||||
<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
|
||||
empty={<Empty url={AnalysisEmptyIcon} className="rb:h-full" subTitle={t('memoryConversation.emptyDesc')} />}
|
||||
contentClassName="rb:h-[calc(100%-152px)]"
|
||||
empty={<Empty url={BgImg} className="rb:h-full" size={[320,180]} subTitle={t('memoryConversation.emptyDesc')} />}
|
||||
contentClassName="rb:h-[calc(100%-152px)] "
|
||||
data={chatList}
|
||||
streamLoading={streamLoading}
|
||||
loading={loading}
|
||||
@@ -285,6 +286,7 @@ const Conversation: FC = () => {
|
||||
</Flex>
|
||||
</Form>
|
||||
</Chat>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user