From 20a572aa468692833f16cfe06bc67c4a9c53a3bb Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Sat, 14 Jun 2025 14:49:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(styles,=20useAppInit,=20DisplaySettings):?=
 =?UTF-8?q?=20=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA=E6=A0=8F=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E5=92=8C=E5=88=97=E8=A1=A8=E9=A1=B9=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E9=80=8F=E6=98=8E=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 color.scss 中添加 Windows 版本的导航栏背景色。
- 修改 useAppInit 钩子以支持 Windows 和 Mac 的背景色设置。
- 更新 MainSidebar 的悬停样式以使用新的背景色。
- 在 DisplaySettings 中简化透明窗口设置的显示逻辑。
---
 src/renderer/src/assets/styles/color.scss      | 18 +++++++++++++-----
 src/renderer/src/hooks/useAppInit.ts           |  7 ++++++-
 .../src/pages/home/MainSidebar/MainSidebar.tsx |  2 +-
 .../DisplaySettings/DisplaySettings.tsx        | 16 ++++++----------
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index 829c58c146..2e90b5a1aa 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -54,6 +54,7 @@
   --color-background-highlight-accent: rgba(255, 150, 50, 0.9);
 
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
+  --navbar-background-win: rgba(20, 20, 20, 0.75);
   --navbar-background: #1f1f1f;
 
   --navbar-height: 42px;
@@ -121,8 +122,8 @@
   --color-reference-text: #000000;
   --color-reference-background: #f1f7ff;
 
-  --color-list-item: rgba(255, 255, 255, 0.9);
-  --color-list-item-hover: rgba(255, 255, 255, 0.5);
+  --color-list-item: rgba(0, 0, 0, 0.05);
+  --color-list-item-hover: rgba(0, 0, 0, 0.03);
 
   --modal-background: var(--color-white);
 
@@ -131,6 +132,7 @@
   --color-background-highlight-accent: rgba(255, 150, 50, 0.5);
 
   --navbar-background-mac: rgba(255, 255, 255, 0.55);
+  --navbar-background-win: rgba(255, 255, 255, 0.75);
   --navbar-background: rgba(244, 244, 244);
 
   --chat-background: transparent;
@@ -141,7 +143,13 @@
   --border-width: 0.5px;
 }
 
-[transparent-window='false'] {
-  --color-list-item: var(--color-background-mute);
-  --color-list-item-hover: var(--color-background-soft);
+[transparent-window='true'] {
+  &[theme-mode='light'] {
+    --color-list-item: rgba(255, 255, 255, 0.8);
+    --color-list-item-hover: rgba(255, 255, 255, 0.4);
+  }
+  &[theme-mode='dark'] {
+    --color-list-item: rgba(255, 255, 255, 0.1);
+    --color-list-item-hover: rgba(255, 255, 255, 0.05);
+  }
 }
diff --git a/src/renderer/src/hooks/useAppInit.ts b/src/renderer/src/hooks/useAppInit.ts
index d068197f91..3eea2e73c6 100644
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -1,3 +1,4 @@
+import { isMac } from '@renderer/config/constant'
 import { isLocalAi } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import db from '@renderer/databases'
@@ -67,7 +68,11 @@ export function useAppInit() {
       return
     }
 
-    window.root.style.background = !minappShow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+    window.root.style.background = !minappShow
+      ? isMac
+        ? 'var(--navbar-background-mac)'
+        : 'var(--navbar-background-win)'
+      : 'var(--color-background)'
   }, [minappShow, theme])
 
   useEffect(() => {
diff --git a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
index 5e3f313580..93782fa5db 100644
--- a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
+++ b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
@@ -355,7 +355,7 @@ const Icon = styled.div<{ theme: string }>`
     height: 34px;
   }
   &:hover {
-    background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
+    background-color: var(--color-background-mute);
     opacity: 0.8;
     cursor: pointer;
     .icon {
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 74863ec0e7..ae57225b77 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -1,7 +1,7 @@
 import { SyncOutlined } from '@ant-design/icons'
 import CodeEditor from '@renderer/components/CodeEditor'
 import { HStack } from '@renderer/components/Layout'
-import { isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
+import { THEME_COLOR_PRESETS } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import useUserTheme from '@renderer/hooks/useUserTheme'
@@ -199,15 +199,11 @@ const DisplaySettings: FC = () => {
             />
           </HStack>
         </SettingRow>
-        {isMac && (
-          <>
-            <SettingDivider />
-            <SettingRow>
-              <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
-              <Switch checked={transparentWindow} onChange={setTransparentWindow} />
-            </SettingRow>
-          </>
-        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
+          <Switch checked={transparentWindow} onChange={setTransparentWindow} />
+        </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.display.zoom.title')}</SettingTitle>