diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx index a802475079..71b9a21274 100644 --- a/src/renderer/src/pages/home/Tabs/index.tsx +++ b/src/renderer/src/pages/home/Tabs/index.tsx @@ -7,7 +7,7 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import { Assistant, Topic } from '@renderer/types' import { uuid } from '@renderer/utils' import { Segmented as AntSegmented, SegmentedProps } from 'antd' -import { FC, useEffect, useState } from 'react' +import { FC, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -33,6 +33,10 @@ const HomeTabs: FC = ({ activeAssistant, activeTopic, setActiveAssistant, const { topicPosition } = useSettings() const { defaultAssistant } = useDefaultAssistant() const { toggleShowTopics } = useShowTopics() + const [width, setWidth] = useState(260) // 减小初始宽度 + const isResizing = useRef(false) + const startX = useRef(0) + const startWidth = useRef(0) const { t } = useTranslation() @@ -63,6 +67,27 @@ const HomeTabs: FC = ({ activeAssistant, activeTopic, setActiveAssistant, setActiveAssistant(assistant) } + const startResizing = (e: React.MouseEvent) => { + isResizing.current = true + startX.current = e.clientX + startWidth.current = width + document.addEventListener('mousemove', handleMouseMove) + document.addEventListener('mouseup', stopResizing) + } + + const handleMouseMove = (e: MouseEvent) => { + if (!isResizing.current) return + const delta = position === 'left' ? e.clientX - startX.current : startX.current - e.clientX + const newWidth = Math.min(Math.max(startWidth.current + delta, 180), 400) // 调整最小和最大宽度 + setWidth(newWidth) + } + + const stopResizing = () => { + isResizing.current = false + document.removeEventListener('mousemove', handleMouseMove) + document.removeEventListener('mouseup', stopResizing) + } + useEffect(() => { const unsubscribes = [ EventEmitter.on(EVENT_NAMES.SHOW_ASSISTANTS, (): any => { @@ -94,15 +119,15 @@ const HomeTabs: FC = ({ activeAssistant, activeTopic, setActiveAssistant, }, [position, tab, topicPosition]) return ( - + {showTab && ( = ({ activeAssistant, activeTopic, setActiveAssistant, )} {tab === 'settings' && } + ) } @@ -146,11 +175,10 @@ const HomeTabs: FC = ({ activeAssistant, activeTopic, setActiveAssistant, const Container = styled.div` display: flex; flex-direction: column; - max-width: var(--assistants-width); - min-width: var(--assistants-width); height: calc(100vh - var(--navbar-height)); background-color: var(--color-background); overflow: hidden; + position: relative; .collapsed { width: 0; border-left: none; @@ -165,12 +193,24 @@ const TabContent = styled.div` overflow-x: hidden; ` +const ResizeHandle = styled.div` + position: absolute; + top: 0; + width: 4px; + height: 100%; + cursor: col-resize; + background: transparent; + &:hover { + background: var(--color-border); + } +` + const Segmented = styled(AntSegmented)` .ant-segmented-item { overflow: hidden; transition: none !important; - height: 34px; - line-height: 34px; + height: 32px; // 减小高度 + line-height: 32px; background-color: transparent; user-select: none; } @@ -184,11 +224,11 @@ const Segmented = styled(AntSegmented)` display: flex; flex-direction: row; justify-content: center; - font-size: 13px; + font-size: 12px; // 减小字体大小 height: 100%; } .iconfont { - font-size: 13px; + font-size: 12px; margin-left: -2px; } .anticon-setting {