From a7aed926cbd91edcc19fb1a9039bd837570ef055 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Thu, 29 May 2025 15:28:28 +0800 Subject: [PATCH] feat(DisplaySettings): add theme color presets and zoom settings - Introduced a new color selection feature in DisplaySettings, allowing users to choose from predefined theme color presets. - Added a dedicated section for zoom settings in the DisplaySettings component, enhancing user customization options. - Updated localization files to include new zoom settings titles in multiple languages. --- src/renderer/src/config/constant.ts | 15 +++ src/renderer/src/hooks/useUserTheme.ts | 1 + src/renderer/src/i18n/locales/en-us.json | 9 +- 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 + .../DisplaySettings/DisplaySettings.tsx | 101 +++++++++++++----- src/renderer/src/store/index.ts | 2 +- 13 files changed, 103 insertions(+), 33 deletions(-) diff --git a/src/renderer/src/config/constant.ts b/src/renderer/src/config/constant.ts index 6e1021bd43..05f9bfbc19 100644 --- a/src/renderer/src/config/constant.ts +++ b/src/renderer/src/config/constant.ts @@ -15,3 +15,18 @@ export const TOKENFLUX_HOST = 'https://tokenflux.ai' // Messages loading configuration export const INITIAL_MESSAGES_COUNT = 20 export const LOAD_MORE_COUNT = 20 + +export const DEFAULT_COLOR_PRIMARY = '#00b96b' +export const THEME_COLOR_PRESETS = [ + DEFAULT_COLOR_PRIMARY, + '#FF5470', // Coral Pink + '#14B8A6', // Teal + '#6366F1', // Indigo + '#8B5CF6', // Purple + '#EC4899', // Pink + '#3B82F6', // Blue + '#F59E0B', // Amber + '#6D28D9', // Violet + '#0EA5E9', // Sky Blue + '#0284C7' // Light Blue +] diff --git a/src/renderer/src/hooks/useUserTheme.ts b/src/renderer/src/hooks/useUserTheme.ts index 42ba13dd8f..815903da73 100644 --- a/src/renderer/src/hooks/useUserTheme.ts +++ b/src/renderer/src/hooks/useUserTheme.ts @@ -4,6 +4,7 @@ import Color from 'color' export default function useUserTheme() { const userTheme = useAppSelector((state) => state.settings.userTheme) + const dispatch = useAppDispatch() const initUserTheme = (theme: UserTheme = userTheme) => { diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 3c0f143fd1..a025bf5728 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -262,7 +262,7 @@ "settings.show_line_numbers": "Show line numbers in code", "settings.temperature": "Temperature", "settings.temperature.tip": "Higher values make the model more creative and unpredictable, while lower values make it more deterministic and precise.", - "settings.thought_auto_collapse": "Automatically Collapse Thought Content", + "settings.thought_auto_collapse": "Collapse Thought Content", "settings.thought_auto_collapse.tip": "Automatically collapse thought content after thinking ends", "settings.top_p": "Top-P", "settings.top_p.tip": "Default value is 1, the smaller the value, the less variety in the answers, the easier to understand, the larger the value, the larger the range of the AI's vocabulary, the more diverse", @@ -657,7 +657,7 @@ "message.code_style": "Code style", "message.delete.content": "Are you sure you want to delete this message?", "message.delete.title": "Delete Message", - "message.multi_model_style": "Multi-model response style", + "message.multi_model_style": "Group style", "message.multi_model_style.fold": "Fold view", "message.multi_model_style.fold.compress": "Switch to compact layout", "message.multi_model_style.fold.expand": "Switch to expanded layout", @@ -1265,6 +1265,7 @@ "display.sidebar.translate.icon": "Show Translate icon", "display.sidebar.visible": "Show icons", "display.title": "Display Settings", + "display.zoom.title": "Zoom Settings", "display.topic.title": "Topic Settings", "miniapps": { "title": "Mini Apps Settings", @@ -1500,14 +1501,14 @@ "messages.input.send_shortcuts": "Send shortcuts", "messages.input.show_estimated_tokens": "Show estimated tokens", "messages.input.title": "Input Settings", - "messages.input.enable_quick_triggers": "Enable '/' and '@' triggers", + "messages.input.enable_quick_triggers": "Enable / and @ triggers", "messages.input.enable_delete_model": "Enable the backspace key to delete models/attachments.", "messages.markdown_rendering_input_message": "Markdown render input message", "messages.math_engine": "Math engine", "messages.math_engine.none": "None", "messages.metrics": "{{time_first_token_millsec}}ms to first token | {{token_speed}} tok/sec", "messages.model.title": "Model Settings", - "messages.navigation": "Message Navigation", + "messages.navigation": "Navigation bar", "messages.navigation.anchor": "Message Anchor", "messages.navigation.buttons": "Navigation Buttons", "messages.navigation.none": "None", diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index 88d6d25923..a17a4551a4 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -1263,6 +1263,7 @@ "display.sidebar.translate.icon": "翻訳のアイコンを表示", "display.sidebar.visible": "アイコンを表示", "display.title": "表示設定", + "display.zoom.title": "ズーム設定", "display.topic.title": "トピック設定", "miniapps": { "title": "ミニアプリ設定", diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 3a19d0bd72..7581cef4e8 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -1264,6 +1264,7 @@ "display.sidebar.translate.icon": "Показывать иконку перевода", "display.sidebar.visible": "Показывать иконки", "display.title": "Настройки отображения", + "display.zoom.title": "Настройки масштаба", "display.topic.title": "Настройки топиков", "miniapps": { "title": "Настройки мини-приложений", diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 75c110da68..625d99d603 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -1265,6 +1265,7 @@ "display.sidebar.translate.icon": "显示翻译图标", "display.sidebar.visible": "显示的图标", "display.title": "显示设置", + "display.zoom.title": "缩放设置", "display.topic.title": "话题设置", "miniapps": { "title": "小程序设置", diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index 8f52eb4878..7a9d9ab0e9 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -1265,6 +1265,7 @@ "display.sidebar.translate.icon": "顯示翻譯圖示", "display.sidebar.visible": "顯示的圖示", "display.title": "顯示設定", + "display.zoom.title": "縮放設定", "display.topic.title": "話題設定", "miniapps": { "title": "小程式設置", diff --git a/src/renderer/src/i18n/translate/el-gr.json b/src/renderer/src/i18n/translate/el-gr.json index 8b40be0373..6324944902 100644 --- a/src/renderer/src/i18n/translate/el-gr.json +++ b/src/renderer/src/i18n/translate/el-gr.json @@ -1140,6 +1140,7 @@ "display.sidebar.translate.icon": "Εμφάνιση εικονιδίου μετάφρασης", "display.sidebar.visible": "Εμφανιζόμενα εικονίδια", "display.title": "Ρυθμίσεις εμφάνισης", + "display.zoom.title": "Ρυθμίσεις κλίμακας", "display.topic.title": "Ρυθμίσεις Θεμάτων", "font_size.title": "Μέγεθος γραμμάτων των μηνυμάτων", "general": "Γενικές ρυθμίσεις", diff --git a/src/renderer/src/i18n/translate/es-es.json b/src/renderer/src/i18n/translate/es-es.json index e152caad12..201945e2f5 100644 --- a/src/renderer/src/i18n/translate/es-es.json +++ b/src/renderer/src/i18n/translate/es-es.json @@ -1139,6 +1139,7 @@ "display.sidebar.translate.icon": "Mostrar icono de traducción", "display.sidebar.visible": "Iconos visibles", "display.title": "Configuración de visualización", + "display.zoom.title": "Configuración de zoom", "display.topic.title": "Configuración de tema", "font_size.title": "Tamaño de fuente de mensajes", "general": "Configuración general", diff --git a/src/renderer/src/i18n/translate/fr-fr.json b/src/renderer/src/i18n/translate/fr-fr.json index c076e8e8fb..3ae3ff0a97 100644 --- a/src/renderer/src/i18n/translate/fr-fr.json +++ b/src/renderer/src/i18n/translate/fr-fr.json @@ -1140,6 +1140,7 @@ "display.sidebar.translate.icon": "Afficher l'icône de traduction", "display.sidebar.visible": "Icônes affichées", "display.title": "Paramètres d'affichage", + "display.zoom.title": "Paramètres de zoom", "display.topic.title": "Paramètres de sujet", "font_size.title": "Taille de police des messages", "general": "Paramètres généraux", diff --git a/src/renderer/src/i18n/translate/pt-pt.json b/src/renderer/src/i18n/translate/pt-pt.json index 7374dd774c..f59ce49ddd 100644 --- a/src/renderer/src/i18n/translate/pt-pt.json +++ b/src/renderer/src/i18n/translate/pt-pt.json @@ -1142,6 +1142,7 @@ "display.sidebar.translate.icon": "Mostrar ícone de tradução", "display.sidebar.visible": "Ícones visíveis", "display.title": "Configurações de exibição", + "display.zoom.title": "Configurações de zoom", "display.topic.title": "Configurações de tópico", "font_size.title": "Tamanho da fonte da mensagem", "general": "Configurações gerais", diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx index 3de36804a2..f56b42b973 100644 --- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx +++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx @@ -1,5 +1,6 @@ import { SyncOutlined } from '@ant-design/icons' -import { isMac } from '@renderer/config/constant' +import { HStack } from '@renderer/components/Layout' +import { isMac, 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' @@ -15,15 +16,42 @@ import { setSidebarIcons } from '@renderer/store/settings' import { ThemeMode } from '@renderer/types' -import { Minus, Plus, RotateCcw } from 'lucide-react' import { Button, ColorPicker, Input, Segmented, Switch } from 'antd' -import { FC, useCallback, useMemo, useState, useEffect } from 'react' +import { Minus, Plus, RotateCcw } from 'lucide-react' +import { FC, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..' import SidebarIconsManager from './SidebarIconsManager' +const ColorCircleWrapper = styled.div` + width: 24px; + height: 24px; + position: relative; + display: flex; + align-items: center; + justify-content: center; +` + +const ColorCircle = styled.div<{ color: string; isActive?: boolean }>` + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: ${(props) => props.color}; + cursor: pointer; + transform: translate(-50%, -50%); + border: 2px solid ${(props) => (props.isActive ? 'var(--color-border)' : 'transparent')}; + transition: opacity 0.2s; + + &:hover { + opacity: 0.8; + } +` + const DisplaySettings: FC = () => { const { setTheme, @@ -149,6 +177,48 @@ const DisplaySettings: FC = () => { + + {t('settings.theme.color_primary')} + + + {THEME_COLOR_PRESETS.map((color) => ( + + handleColorPrimaryChange(color)} + /> + + ))} + + handleColorPrimaryChange(color.toHexString())} + showText + style={{ width: '110px' }} + presets={[ + { + label: 'Presets', + colors: THEME_COLOR_PRESETS + } + ]} + /> + + + {isMac && ( + <> + + + {t('settings.theme.window.style.transparent')} + + + + )} + + + {t('settings.display.zoom.title')} + {t('settings.zoom.title')} @@ -162,31 +232,6 @@ const DisplaySettings: FC = () => { /> - - - {t('settings.theme.color_primary')} - handleColorPrimaryChange(color.toHexString())} - showText - presets={[ - { - label: 'Presets', - colors: ['#007BFF', '#F74F9E', '#FF5257', '#F7821B', '#FFC600', '#62BA46', '#000000'] - } - ]} - /> - - {isMac && ( - <> - - - {t('settings.theme.window.style.transparent')} - - - - )} {t('settings.display.topic.title')} diff --git a/src/renderer/src/store/index.ts b/src/renderer/src/store/index.ts index 63303d0c1c..2d910c6f2a 100644 --- a/src/renderer/src/store/index.ts +++ b/src/renderer/src/store/index.ts @@ -50,7 +50,7 @@ const persistedReducer = persistReducer( { key: 'cherry-studio', storage, - version: 107, + version: 109, blacklist: ['runtime', 'messages', 'messageBlocks'], migrate },