From 28c59ea436f586660ec5fec963c956cd4e2e94e4 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 28 Feb 2025 23:05:52 +0800
Subject: [PATCH] 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                                   |  1 +
 src/main/services/WindowService.ts                  |  2 +-
 src/renderer/src/assets/styles/index.scss           |  2 +-
 src/renderer/src/pages/home/Inputbar/Inputbar.tsx   | 13 +++++++------
 src/renderer/src/pages/home/Tabs/AssistantItem.tsx  |  2 ++
 .../settings/DisplaySettings/DisplaySettings.tsx    |  6 +++---
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index d563e19e..a5cda71b 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -34,6 +34,7 @@ if (!app.requestSingleInstanceLock()) {
         windowService.showMainWindow()
       }
     })
+
     registerShortcuts(mainWindow)
 
     registerIpc(mainWindow, app)
diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts
index 414c568d..3750afaa 100644
--- a/src/main/services/WindowService.ts
+++ b/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,
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index f2d5be89..c26a5efa 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/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;
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index d4053a3b..93aca453 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/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 {
diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index 62e39127..1139e91d 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/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`
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 52989df7..b25b3841 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/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') },