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

feat(ProviderSettings): 添加Splitter组件实现左右面板布局

Browse Source 
移除固定的最小宽度限制，使用Splitter组件实现可调整的左右面板布局
This commit is contained in:
icarus 2025-08-09 10:59:42 +08:00
parent f005afb71c
commit c76c2a62cf
1 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/renderer/src/pages/settings/ProviderSettings/index.tsx
View File

@ -15,7 +15,7 @@ import {
matchKeywordsInProvider, matchKeywordsInProvider,
uuid uuid
} from '@renderer/utils' } from '@renderer/utils'
import { Avatar, Button, Card, Dropdown, Input, MenuProps, Tag } from 'antd' import { Avatar, Button, Card, Dropdown, Input, MenuProps, Splitter, Tag } from 'antd'
import { Eye, EyeOff, GripVertical, PlusIcon, Search, UserPen } from 'lucide-react' import { Eye, EyeOff, GripVertical, PlusIcon, Search, UserPen } from 'lucide-react'
import { FC, startTransition, useCallback, useEffect, useState } from 'react' import { FC, startTransition, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -455,70 +455,77 @@ const ProvidersList: FC = () => {
return ( return (
<Container className="selectable"> <Container className="selectable">
<ProviderListContainer> <Splitter>
<AddButtonWrapper> <Splitter.Panel min={250}>
<Input <ProviderListContainer>
type="text" <AddButtonWrapper>
placeholder={t('settings.provider.search')} <Input
value={searchText} type="text"
style={{ borderRadius: 'var(--list-item-border-radius)', height: 35 }} placeholder={t('settings.provider.search')}
suffix={<Search size={14} />} value={searchText}
onChange={(e) => setSearchText(e.target.value)} style={{ borderRadius: 'var(--list-item-border-radius)', height: 35 }}
onKeyDown={(e) => { suffix={<Search size={14} />}
if (e.key === 'Escape') { onChange={(e) => setSearchText(e.target.value)}
setSearchText('') onKeyDown={(e) => {
} if (e.key === 'Escape') {
}} setSearchText('')
allowClear }
disabled={dragging} }}
/> allowClear
</AddButtonWrapper> disabled={dragging}
<DraggableVirtualList />
list={filteredProviders} </AddButtonWrapper>
onDragStart={handleDragStart} <DraggableVirtualList
onDragEnd={handleDragEnd} list={filteredProviders}
estimateSize={useCallback(() => 40, [])} onDragStart={handleDragStart}
itemKey={itemKey} onDragEnd={handleDragEnd}
overscan={3} estimateSize={useCallback(() => 40, [])}
style={{ itemKey={itemKey}
height: `calc(100% - 2 * ${BUTTON_WRAPPER_HEIGHT}px)` overscan={3}
}} style={{
scrollerStyle={{ height: `calc(100% - 2 * ${BUTTON_WRAPPER_HEIGHT}px)`
padding: 8, }}
paddingRight: 5 scrollerStyle={{
}} padding: 8,
itemContainerStyle={{ paddingBottom: 5 }}> paddingRight: 5
{(provider) => ( }}
<Dropdown menu={{ items: getDropdownMenus(provider) }} trigger={['contextMenu']}> itemContainerStyle={{ paddingBottom: 5 }}>
<ProviderListItem {(provider) => (
key={provider.id} <Dropdown menu={{ items: getDropdownMenus(provider) }} trigger={['contextMenu']}>
className={provider.id === selectedProvider?.id ? 'active' : ''} <ProviderListItem
onClick={() => setSelectedProvider(provider)}> key={provider.id}
<DragHandle> className={provider.id === selectedProvider?.id ? 'active' : ''}
<GripVertical size={12} /> onClick={() => setSelectedProvider(provider)}>
</DragHandle> <DragHandle>
{getProviderAvatar(provider)} <GripVertical size={12} />
<ProviderItemName className="text-nowrap">{getFancyProviderName(provider)}</ProviderItemName> </DragHandle>
{provider.enabled && ( {getProviderAvatar(provider)}
<Tag color="green" style={{ marginLeft: 'auto', marginRight: 0, borderRadius: 16 }}> <ProviderItemName className="text-nowrap">{getFancyProviderName(provider)}</ProviderItemName>
ON {provider.enabled && (
</Tag> <Tag color="green" style={{ marginLeft: 'auto', marginRight: 0, borderRadius: 16 }}>
)} ON
</ProviderListItem> </Tag>
</Dropdown> )}
)} </ProviderListItem>
</DraggableVirtualList> </Dropdown>
<AddButtonWrapper> )}
<Button </DraggableVirtualList>
style={{ width: '100%', borderRadius: 'var(--list-item-border-radius)' }} <AddButtonWrapper>
icon={<PlusIcon size={16} />} <Button
onClick={onAddProvider} style={{ width: '100%', borderRadius: 'var(--list-item-border-radius)' }}
disabled={dragging}> icon={<PlusIcon size={16} />}
{t('button.add')} onClick={onAddProvider}
</Button> disabled={dragging}>
</AddButtonWrapper> {t('button.add')}
</ProviderListContainer> </Button>
<ProviderSetting providerId={selectedProvider.id} key={selectedProvider.id} /> </AddButtonWrapper>
</ProviderListContainer>
</Splitter.Panel>
<Splitter.Panel min={'50%'}>
<ProviderSetting providerId={selectedProvider.id} key={selectedProvider.id} />
</Splitter.Panel>
</Splitter>
</Container> </Container>
) )
} }
@ -533,7 +540,6 @@ const Container = styled.div`
const ProviderListContainer = styled.div` const ProviderListContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: calc(var(--settings-width) + 10px);
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
border-right: 0.5px solid var(--color-border); border-right: 0.5px solid var(--color-border);
` `