fix(CodeBlock): incorrect behavior of message in multiple models (#4328)
* 修复多模型对比时的复制按钮sticky行为,并添加注释 * 同时修复横向滚动条消失的问题 * 增加布局判断
This commit is contained in:
parent
b53dbcbb30
commit
5cdf4eff77
@ -262,7 +262,6 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: ${({ $layout }) => ($layout === 'horizontal' ? '16px' : '0')};
|
gap: ${({ $layout }) => ($layout === 'horizontal' ? '16px' : '0')};
|
||||||
overflow-y: auto;
|
|
||||||
grid-template-columns: repeat(
|
grid-template-columns: repeat(
|
||||||
${({ $layout, $count }) => (['fold', 'vertical'].includes($layout) ? 1 : $count)},
|
${({ $layout, $count }) => (['fold', 'vertical'].includes($layout) ? 1 : $count)},
|
||||||
minmax(550px, 1fr)
|
minmax(550px, 1fr)
|
||||||
@ -286,7 +285,13 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
|
|||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
`}
|
`}
|
||||||
overflow-y: visible;
|
${({ $layout }) => {
|
||||||
|
return $layout === 'horizontal'
|
||||||
|
? css`
|
||||||
|
overflow-y: auto;
|
||||||
|
`
|
||||||
|
: 'overflow-y: visible;'
|
||||||
|
}}
|
||||||
`
|
`
|
||||||
|
|
||||||
interface MessageWrapperProps {
|
interface MessageWrapperProps {
|
||||||
@ -325,17 +330,20 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
|
|||||||
}}
|
}}
|
||||||
|
|
||||||
${({ $layout, $isInPopover, $isGrouped }) => {
|
${({ $layout, $isInPopover, $isGrouped }) => {
|
||||||
|
// 如果布局是grid,并且是组消息,则设置最大高度和溢出行为(卡片不可滚动,点击展开后可滚动)
|
||||||
|
// 如果布局是horizontal,则设置溢出行为(卡片可滚动)
|
||||||
|
// 如果布局是fold、vertical,高度不限制,与正常消息流布局一致,则设置卡片不可滚动(visible)
|
||||||
return $layout === 'grid' && $isGrouped
|
return $layout === 'grid' && $isGrouped
|
||||||
? css`
|
? css`
|
||||||
max-height: ${$isInPopover ? '50vh' : '300px'};
|
max-height: ${$isInPopover ? '50vh' : '300px'};
|
||||||
overflow-y: ${$isInPopover ? 'visible' : 'hidden'};
|
overflow-y: ${$isInPopover ? 'auto' : 'hidden'};
|
||||||
border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'};
|
border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'};
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
`
|
`
|
||||||
: css`
|
: css`
|
||||||
overflow-y: visible;
|
overflow-y: ${$layout === 'horizontal' ? 'auto' : 'visible'};
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
`
|
`
|
||||||
}}
|
}}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user