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:
yujiangping
2026-01-14 16:42:32 +08:00
parent fbc1906fa2
commit 830e9dd6f9
2 changed files with 5 additions and 3 deletions

View File

@@ -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>
}

View File

@@ -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>
)