github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2026-07-17 01:58:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize: optimize collapse panel button

Browse Source
This commit is contained in:
alan.cl
2026-03-11 15:46:23 +08:00
parent 2f4d8774f7
commit f9311c8459
2 changed files with 13 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/new-components/chat/content/ManusRightPanel.tsx
View File

@@ -1598,16 +1598,7 @@ const ManusRightPanel: React.FC<ManusRightPanelProps> = ({
return (
<div className='relative flex flex-col h-full bg-[#f8f9fc] dark:bg-[#0d0e11]'>
{onCollapse && (
<Tooltip title={t('collapse_panel')} placement='left'>
<button
onClick={() => onCollapse()}
className='absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-6 h-12 flex items-center justify-center bg-white dark:bg-[#1a1b1e] border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-md transition-all text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
>
<LeftOutlined style={{ fontSize: 10 }} />
</button>
</Tooltip>
)}
{/* Collapse button is rendered by the parent layout to avoid overflow clipping */}
{/* Terminal Header */}
<div className='flex items-center justify-between px-5 py-3 bg-white dark:bg-[#111217] border-b border-gray-200 dark:border-gray-800'>

26
web/pages/index.tsx
View File

@@ -31,6 +31,7 @@ import {
FileOutlined,
FilePptOutlined,
FileTextOutlined,
LeftOutlined,
PaperClipOutlined,
PieChartOutlined,
PlusOutlined,
@@ -2718,20 +2719,17 @@ const Playground: NextPage = () => {
</div>
</div>
{rightPanelCollapsed && (
<div className='absolute right-0 top-1/2 -translate-y-1/2 z-10'>
<Tooltip title={t('expand_panel')}>
<Button
type='text'
shape='circle'
size='small'
icon={<RightOutlined />}
onClick={() => setRightPanelCollapsed(false)}
className='text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a1b1e]'
/>
</Tooltip>
</div>
)}
</div>
{/* Panel toggle handle — placed between panels to avoid overflow clipping */}
<div className='relative z-20 flex-shrink-0'>
<Tooltip title={rightPanelCollapsed ? t('expand_panel') : t('collapse_panel')} placement='left'>
<button
onClick={() => setRightPanelCollapsed(prev => !prev)}
className='absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-8 flex items-center justify-center bg-white dark:bg-[#1a1b1e] border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:w-5 hover:shadow-md transition-all duration-200 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
>
{rightPanelCollapsed ? <LeftOutlined style={{ fontSize: 10 }} /> : <RightOutlined style={{ fontSize: 10 }} />}
</button>
</Tooltip>
</div>
<div
className={`${rightPanelCollapsed ? 'w-0 min-w-0 overflow-hidden opacity-0' : 'flex-[3] min-w-0 overflow-hidden'} bg-[#f8f8fb] dark:bg-[#0f1114] flex flex-col transition-all duration-300`}