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