From 3775562956fe1b4ae73f67b21a49c6c021c88f2b Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Sat, 14 Jun 2025 08:32:40 +0800 Subject: [PATCH] feat(DisplaySettings, MainSidebar, useSettings): implement transparent window feature and update styles - Added functionality to manage transparent window settings in DisplaySettings and MainSidebar components. - Updated useSettings hook to include transparent window state management. - Modified MainSidebar and its styles to support transparency based on user settings. - Removed obsolete opaque window translations from localization files across multiple languages for consistency. --- src/renderer/src/hooks/useSettings.ts | 4 ++++ src/renderer/src/i18n/locales/en-us.json | 1 - src/renderer/src/i18n/locales/ja-jp.json | 1 - src/renderer/src/i18n/locales/ru-ru.json | 1 - src/renderer/src/i18n/locales/zh-cn.json | 1 - src/renderer/src/i18n/locales/zh-tw.json | 1 - src/renderer/src/i18n/translate/el-gr.json | 1 - src/renderer/src/i18n/translate/es-es.json | 1 - src/renderer/src/i18n/translate/fr-fr.json | 1 - src/renderer/src/i18n/translate/pt-pt.json | 1 - .../src/pages/home/MainSidebar/MainSidebar.tsx | 3 ++- .../pages/home/MainSidebar/MainSidebarStyles.tsx | 3 ++- .../settings/DisplaySettings/DisplaySettings.tsx | 13 +++---------- src/renderer/src/store/settings.ts | 10 ++++++++-- 14 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/renderer/src/hooks/useSettings.ts b/src/renderer/src/hooks/useSettings.ts index 9b41888398..b74ba33452 100644 --- a/src/renderer/src/hooks/useSettings.ts +++ b/src/renderer/src/hooks/useSettings.ts @@ -14,6 +14,7 @@ import { setTheme, SettingsState, setTopicPosition, + setTransparentWindow, setTray as _setTray, setTrayOnClose } from '@renderer/store/settings' @@ -86,6 +87,9 @@ export function useSettings() { }, setAssistantIconType(assistantIconType: AssistantIconType) { dispatch(setAssistantIconType(assistantIconType)) + }, + setTransparentWindow(transparentWindow: boolean) { + dispatch(setTransparentWindow(transparentWindow)) } } } diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 3bb2a78449..0f4cc70d3d 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -1730,7 +1730,6 @@ "theme.light": "Light", "theme.title": "Theme", "theme.color_primary": "Primary Color", - "theme.window.style.opaque": "Opaque Window", "theme.window.style.title": "Window Style", "theme.window.style.transparent": "Transparent Window", "title": "Settings", diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index 542fa9bdf6..ebeecfa285 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -1718,7 +1718,6 @@ "theme.light": "ライト", "theme.title": "テーマ", "theme.color_primary": "テーマ色", - "theme.window.style.opaque": "不透明ウィンドウ", "theme.window.style.title": "ウィンドウスタイル", "theme.window.style.transparent": "透明ウィンドウ", "title": "設定", diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 6b0fab3cdb..223e6b04a3 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -1718,7 +1718,6 @@ "theme.light": "Светлая", "theme.title": "Тема", "theme.color_primary": "Цвет темы", - "theme.window.style.opaque": "Непрозрачное окно", "theme.window.style.title": "Стиль окна", "theme.window.style.transparent": "Прозрачное окно", "title": "Настройки", diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 0494e16097..2ec0ae5e56 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -1730,7 +1730,6 @@ "theme.light": "浅色", "theme.title": "主题", "theme.color_primary": "主题颜色", - "theme.window.style.opaque": "不透明窗口", "theme.window.style.title": "窗口样式", "theme.window.style.transparent": "透明窗口", "title": "设置", diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index e7d943eae3..c2d7ae0ca6 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -1721,7 +1721,6 @@ "theme.light": "淺色", "theme.title": "主題", "theme.color_primary": "主題顏色", - "theme.window.style.opaque": "不透明視窗", "theme.window.style.title": "視窗樣式", "theme.window.style.transparent": "透明視窗", "title": "設定", diff --git a/src/renderer/src/i18n/translate/el-gr.json b/src/renderer/src/i18n/translate/el-gr.json index 7d60a58e3f..5812ee4678 100644 --- a/src/renderer/src/i18n/translate/el-gr.json +++ b/src/renderer/src/i18n/translate/el-gr.json @@ -1483,7 +1483,6 @@ "theme.dark": "Σκοτεινό", "theme.light": "Φωτεινό", "theme.title": "Θέμα", - "theme.window.style.opaque": "Μη διαφανή παράθυρα", "theme.window.style.title": "Στυλ παραθύρων", "theme.window.style.transparent": "Διαφανή παράθυρα", "title": "Ρυθμίσεις", diff --git a/src/renderer/src/i18n/translate/es-es.json b/src/renderer/src/i18n/translate/es-es.json index b3083a93ba..ffdb1043cc 100644 --- a/src/renderer/src/i18n/translate/es-es.json +++ b/src/renderer/src/i18n/translate/es-es.json @@ -1482,7 +1482,6 @@ "theme.dark": "Oscuro", "theme.light": "Claro", "theme.title": "Tema", - "theme.window.style.opaque": "Ventana opaca", "theme.window.style.title": "Estilo de ventana", "theme.window.style.transparent": "Ventana transparente", "title": "Configuración", diff --git a/src/renderer/src/i18n/translate/fr-fr.json b/src/renderer/src/i18n/translate/fr-fr.json index 0718050d06..1b878d83f3 100644 --- a/src/renderer/src/i18n/translate/fr-fr.json +++ b/src/renderer/src/i18n/translate/fr-fr.json @@ -1483,7 +1483,6 @@ "theme.dark": "Sombre", "theme.light": "Clair", "theme.title": "Thème", - "theme.window.style.opaque": "Fenêtre opaque", "theme.window.style.title": "Style de fenêtre", "theme.window.style.transparent": "Fenêtre transparente", "title": "Paramètres", diff --git a/src/renderer/src/i18n/translate/pt-pt.json b/src/renderer/src/i18n/translate/pt-pt.json index 146e8d305b..d15c22528a 100644 --- a/src/renderer/src/i18n/translate/pt-pt.json +++ b/src/renderer/src/i18n/translate/pt-pt.json @@ -1484,7 +1484,6 @@ "theme.dark": "Escuro", "theme.light": "Claro", "theme.title": "Tema", - "theme.window.style.opaque": "Janela opaca", "theme.window.style.title": "Estilo de janela", "theme.window.style.transparent": "Janela transparente", "title": "Configurações", diff --git a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx index 984595d206..5e3f313580 100644 --- a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx +++ b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx @@ -59,7 +59,7 @@ const MainSidebar: FC = () => { const navigate = useNavigate() const [tab, setTab] = useState('assistants') const avatar = useAvatar() - const { userName, defaultPaintingProvider } = useSettings() + const { userName, defaultPaintingProvider, transparentWindow } = useSettings() const { t } = useTranslation() const { theme, settedTheme, toggleTheme } = useTheme() const [isAppMenuExpanded, setIsAppMenuExpanded] = useState(false) @@ -167,6 +167,7 @@ const MainSidebar: FC = () => { return ( ` display: flex; flex-direction: column; flex: 1; @@ -53,6 +53,7 @@ export const Container = styled.div` max-width: var(--assistants-width); border-right: 0.5px solid var(--color-border); height: 100vh; + background-color: ${({ transparent }) => (transparent ? 'transparent' : 'var(--color-background)')}; ` export const MainMenu = styled.div` diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx index 56d09bd8dc..74863ec0e7 100644 --- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx +++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx @@ -55,8 +55,8 @@ const ColorCircle = styled.div<{ color: string; isActive?: boolean }>` const DisplaySettings: FC = () => { const { - windowStyle, - setWindowStyle, + transparentWindow, + setTransparentWindow, topicPosition, setTopicPosition, clickAssistantToShowTopic, @@ -77,13 +77,6 @@ const DisplaySettings: FC = () => { const [visibleIcons, setVisibleIcons] = useState(sidebarIcons?.visible || DEFAULT_SIDEBAR_ICONS) const [disabledIcons, setDisabledIcons] = useState(sidebarIcons?.disabled || []) - const handleWindowStyleChange = useCallback( - (checked: boolean) => { - setWindowStyle(checked ? 'transparent' : 'opaque') - }, - [setWindowStyle] - ) - const handleColorPrimaryChange = useCallback( (colorHex: string) => { setUserTheme({ @@ -211,7 +204,7 @@ const DisplaySettings: FC = () => { {t('settings.theme.window.style.transparent')} - + )} diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts index 37f622a88a..9955ed971c 100644 --- a/src/renderer/src/store/settings.ts +++ b/src/renderer/src/store/settings.ts @@ -178,6 +178,7 @@ export interface SettingsState { knowledgeEmbed: boolean } defaultPaintingProvider: PaintingProvider + transparentWindow: boolean } export type MultiModelMessageStyle = 'horizontal' | 'vertical' | 'fold' | 'grid' @@ -316,7 +317,8 @@ export const initialState: SettingsState = { backup: false, knowledgeEmbed: false }, - defaultPaintingProvider: 'aihubmix' + defaultPaintingProvider: 'aihubmix', + transparentWindow: true } const settingsSlice = createSlice({ @@ -665,6 +667,9 @@ const settingsSlice = createSlice({ }, setDefaultPaintingProvider: (state, action: PayloadAction) => { state.defaultPaintingProvider = action.payload + }, + setTransparentWindow: (state, action: PayloadAction) => { + state.transparentWindow = action.payload } } }) @@ -768,7 +773,8 @@ export const { setOpenAISummaryText, setOpenAIServiceTier, setNotificationSettings, - setDefaultPaintingProvider + setDefaultPaintingProvider, + setTransparentWindow } = settingsSlice.actions export default settingsSlice.reducer