feat: Enhance UI styling and interaction details

- Update window vibrancy to 'sidebar' for better visual effect
- Refine input bar styling with softer background and rounded corners
- Adjust toolbar button sizes and styling
- Modify topic position selection to use Segmented component
- Tweak light theme background opacity

src/main/index.ts

@@ -34,6 +34,7 @@ if (!app.requestSingleInstanceLock()) {
         windowService.showMainWindow()
       }
     })
+
     registerShortcuts(mainWindow)
 
     registerIpc(mainWindow, app)

src/main/services/WindowService.ts

@@ -51,7 +51,7 @@ export class WindowService {
       show: false, // 初始不显示
       autoHideMenuBar: true,
       transparent: isMac,
-      vibrancy: 'under-window',
+      vibrancy: 'sidebar',
       visualEffectState: 'active',
       titleBarStyle: isLinux ? 'default' : 'hidden',
       titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,

src/renderer/src/assets/styles/index.scss

@@ -89,7 +89,7 @@ body[theme-mode='light'] {
   --color-background: var(--color-white);
   --color-background-soft: var(--color-white-soft);
   --color-background-mute: var(--color-white-mute);
-  --color-background-opacity: rgba(255, 255, 255, 0.7);
+  --color-background-opacity: rgba(235, 235, 235, 0.7);
 
   --color-primary: #00b96b;
   --color-primary-soft: #00b96b99;

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -595,7 +595,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
                   icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                   okText={t('chat.input.clear.title')}>
                   <ToolbarButton type="text">
-                    <ClearOutlined />
+                    <ClearOutlined style={{ fontSize: 17 }} />
                   </ToolbarButton>
                 </Popconfirm>
               </Tooltip>
@@ -650,11 +650,12 @@ const Container = styled.div`
 `
 
 const InputBarContainer = styled.div`
-  border: 1px solid var(--color-border);
+  border: 0.5px solid var(--color-border);
   transition: all 0.3s ease;
   position: relative;
-  margin: 0 20px 15px 20px;
-  border-radius: 10px;
+  margin: 15px 20px;
+  border-radius: 15px;
+  background-color: var(--color-background-opacity);
 `
 
 const TextareaStyle: CSSProperties = {
@@ -697,7 +698,7 @@ const ToolbarMenu = styled.div`
 const ToolbarButton = styled(Button)`
   width: 30px;
   height: 30px;
-  font-size: 17px;
+  font-size: 16px;
   border-radius: 50%;
   transition: all 0.3s ease;
   color: var(--color-icon);
@@ -712,7 +713,7 @@ const ToolbarButton = styled(Button)`
     color: var(--color-icon);
   }
   .icon-a-addchat {
-    font-size: 19px;
+    font-size: 18px;
     margin-bottom: -2px;
   }
   &:hover {

src/renderer/src/pages/home/Tabs/AssistantItem.tsx

@@ -176,6 +176,8 @@ const MenuButton = styled.div`
   background-color: var(--color-background);
   right: 9px;
   top: 6px;
+  padding: 0 5px;
+  border: 0.5px solid var(--color-border);
 `
 
 const TopicCount = styled.div`

src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx

@@ -12,7 +12,7 @@ import {
   setSidebarIcons
 } from '@renderer/store/settings'
 import { ThemeMode } from '@renderer/types'
-import { Button, Input, Select, Switch } from 'antd'
+import { Button, Input, Segmented, Select, Switch } from 'antd'
 import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -98,9 +98,9 @@ const DisplaySettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.topic.position')}</SettingRowTitle>
-          <Select
+          <Segmented
             value={topicPosition || 'right'}
-            style={{ width: 120 }}
+            shape="round"
             onChange={setTopicPosition}
             options={[
               { value: 'left', label: t('settings.topic.position.left') },