Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-01 17:59:09 +08:00
Code Issues Actions 3 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 4c6cc4140c
commit 59cbb894ea
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; justify-content: space-between;
margin-left: 46px; margin-left: 46px;
margin-top: 5px; margin-top: 5px;
overflow-y: auto;
` `
const MessageFooter = styled.div` 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' return props.$selected ? 'block' : 'none'
} }
if (props.$layout === 'horizontal') { if (props.$layout === 'horizontal') {
return 'inline-block' return 'inline-flex'
} }
return 'block' return 'block'
}}; }};
@ -214,7 +214,6 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px;
max-height: 600px; max-height: 600px;
overflow-y: auto;
margin-bottom: 10px; 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) => ( {['fold', 'vertical', 'horizontal', 'grid'].map((layout) => (
<LayoutOption <LayoutOption
key={layout} key={layout}
active={multiModelMessageStyle === layout} $active={multiModelMessageStyle === layout}
onClick={() => setMultiModelMessageStyle(layout as MultiModelMessageStyle)}> onClick={() => setMultiModelMessageStyle(layout as MultiModelMessageStyle)}>
{layout === 'fold' ? ( {layout === 'fold' ? (
<FolderOutlined /> <FolderOutlined />
@ -100,8 +100,8 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
overflow: hidden; overflow: hidden;
border: 0.5px solid var(--color-border); border: 0.5px solid var(--color-border);
height: 40px; height: 40px;
margin-left: ${({ $layout }) => (['horizontal', 'grid'].includes($layout) ? '0' : '40px')};
transition: all 0.3s ease; transition: all 0.3s ease;
background-color: var(--color-background);
` `
const LayoutContainer = styled.div` const LayoutContainer = styled.div`
@ -110,14 +110,14 @@ const LayoutContainer = styled.div`
flex-direction: row; flex-direction: row;
` `
const LayoutOption = styled.div<{ active: boolean }>` const LayoutOption = styled.div<{ $active: boolean }>`
cursor: pointer; cursor: pointer;
padding: 2px 10px; padding: 2px 10px;
border-radius: 4px; border-radius: 4px;
background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'transparent')}; background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'transparent')};
&:hover { &:hover {
background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'var(--color-hover)')}; background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
} }
` `