whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

style: 优化聊天窗口UI (#1881)

Browse Source
This commit is contained in:
Teo 2025-02-18 11:43:42 +08:00 committed by GitHub
parent f99851fb6b
commit 869e56b53c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/pages/home/Messages/Message.tsx
View File

@ -240,6 +240,7 @@ const MessageContentContainer = styled.div`
justify-content: space-between;
margin-left: 46px;
margin-top: 5px;
overflow-y: auto;
`
const MessageFooter = styled.div`

3
src/renderer/src/pages/home/Messages/MessageGroup.tsx
View File

@ -202,7 +202,7 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
return props.$selected ? 'block' : 'none'
}
if (props.$layout === 'horizontal') {
return 'inline-block'
return 'inline-flex'
}
return 'block'
}};
@ -214,7 +214,6 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
padding: 10px;
border-radius: 6px;
max-height: 600px;
overflow-y: auto;
margin-bottom: 10px;
`
}

10
src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx
View File

@ -41,7 +41,7 @@ const MessageGroupMenuBar: FC<Props> = ({
{['fold', 'vertical', 'horizontal', 'grid'].map((layout) => (
<LayoutOption
key={layout}
active={multiModelMessageStyle === layout}
$active={multiModelMessageStyle === layout}
onClick={() => setMultiModelMessageStyle(layout as MultiModelMessageStyle)}>
{layout === 'fold' ? (
<FolderOutlined />
@ -100,8 +100,8 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
overflow: hidden;
border: 0.5px solid var(--color-border);
height: 40px;
margin-left: ${({ $layout }) => (['horizontal', 'grid'].includes($layout) ? '0' : '40px')};
transition: all 0.3s ease;
background-color: var(--color-background);
`
const LayoutContainer = styled.div`
@ -110,14 +110,14 @@ const LayoutContainer = styled.div`
flex-direction: row;
`
const LayoutOption = styled.div<{ active: boolean }>`
const LayoutOption = styled.div<{ $active: boolean }>`
cursor: pointer;
padding: 2px 10px;
border-radius: 4px;
background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'transparent')};
background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'transparent')};
&:hover {
background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
}
`