Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-06 21:35:52 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(MessageGroupModelList): Simplify display mode toggle interaction

Browse Source
This commit is contained in:
kangfenmao 2025-03-09 22:08:28 +08:00
parent 2d7b5d9cf5
commit 6c4a19da59
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx
View File

@ -19,22 +19,19 @@ type DisplayMode = 'compact' | 'expanded'
const MessageGroupModelList: FC<MessageGroupModelListProps> = ({ messages, selectedIndex, setSelectedIndex }) => { const MessageGroupModelList: FC<MessageGroupModelListProps> = ({ messages, selectedIndex, setSelectedIndex }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [displayMode, setDisplayMode] = useState<DisplayMode>('expanded') const [displayMode, setDisplayMode] = useState<DisplayMode>('expanded')
const isCompact = displayMode === 'compact'
return ( return (
<ModelsWrapper> <ModelsWrapper>
<DisplayModeToggle displayMode={displayMode}> <DisplayModeToggle displayMode={displayMode} onClick={() => setDisplayMode(isCompact ? 'expanded' : 'compact')}>
<Tooltip <Tooltip
title={ title={
displayMode === 'compact' displayMode === 'compact'
? t('message.message.multi_model_style.fold.expand') ? t(`message.message.multi_model_style.fold.expand`)
: t('message.message.multi_model_style.fold.compress') : t('message.message.multi_model_style.fold.compress')
} }
placement="top"> placement="top">
{displayMode === 'compact' ? ( {displayMode === 'compact' ? <ArrowsAltOutlined /> : <ShrinkOutlined />}
<ArrowsAltOutlined onClick={() => setDisplayMode('expanded')} />
) : (
<ShrinkOutlined onClick={() => setDisplayMode('compact')} />
)}
</Tooltip> </Tooltip>
</DisplayModeToggle> </DisplayModeToggle>
@ -204,7 +201,7 @@ const AvatarWrapper = styled.div<{ isSelected: boolean }>`
` `
border: 2px solid var(--color-primary); border: 2px solid var(--color-primary);
z-index: 2; z-index: 2;
&:hover { &:hover {
/* z-index is applied immediately, not part of the transition */ /* z-index is applied immediately, not part of the transition */
z-index: 10; z-index: 10;