From 58072128f0741ecc4f918564512ec1e4ee3e9edb Mon Sep 17 00:00:00 2001
From: hxp0618 <1169924772@qq.com>
Date: Tue, 7 Jan 2025 13:43:07 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AF=B9=E8=AF=9D=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=E6=94=AF=E6=8C=81=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=B0=83=E6=95=B4=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/pages/home/Tabs/index.tsx | 62 ++++++++++++++++++----
 1 file changed, 51 insertions(+), 11 deletions(-)

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<Props> = ({ 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<Props> = ({ 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<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
   }, [position, tab, topicPosition])
 
   return (
-    <Container style={border} className="home-tabs">
+    <Container style={{ ...border, width: `${width}px` }} className="home-tabs">
       {showTab && (
         <Segmented
           value={tab}
           style={{
             borderRadius: 0,
-            padding: '10px 0',
-            margin: '0 10px',
-            paddingBottom: 10,
+            padding: '8px 0', // 减小内边距
+            margin: '0 8px', // 减小外边距
+            paddingBottom: 8,
             borderBottom: '0.5px solid var(--color-border)',
             gap: 2
           }}
@@ -139,6 +164,10 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
         )}
         {tab === 'settings' && <Settings assistant={activeAssistant} />}
       </TabContent>
+      <ResizeHandle
+        onMouseDown={startResizing}
+        style={{ left: position === 'left' ? 'auto' : 0, right: position === 'left' ? 0 : 'auto' }}
+      />
     </Container>
   )
 }
@@ -146,11 +175,10 @@ const HomeTabs: FC<Props> = ({ 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 {