feat(electron): add persistent UI scale setting

This commit is contained in:
digua committed 2026-09-28 16:59:25 +08:00
1 parent 220f9902be
commit eadadda071
21 files changed
+136 -4

No files matched your search

+22 -1
View File
@@ -4,7 +4,8 @@
import { ipcMain, app, dialog, clipboard, shell, nativeTheme } from 'electron' import { ipcMain, app, dialog, clipboard, shell, nativeTheme } from 'electron'
import * as fs from 'fs/promises' import * as fs from 'fs/promises'
import { loadConfig, setConfigField } from '@openchatlab/config' import { desktopConfigSchema, loadConfig, setConfigField } from '@openchatlab/config'
import { appLogger } from '@openchatlab/node-runtime'
import type { DesktopCloseBehavior } from '@openchatlab/shared-types' import type { DesktopCloseBehavior } from '@openchatlab/shared-types'
import type { IpcContext } from './types' import type { IpcContext } from './types'
import { simulateUpdateDialog, manualCheckForUpdates } from '../update/manager' import { simulateUpdateDialog, manualCheckForUpdates } from '../update/manager'
@@ -224,6 +225,26 @@ export function registerWindowHandlers(ctx: IpcContext): void {
} }
}) })
// ==================== Desktop UI scale ====================
ipcMain.handle('app:getDesktopUiScale', () => loadConfig().desktop.ui_scale)
ipcMain.handle('app:setDesktopUiScale', (_, scale: number) => {
const parsed = desktopConfigSchema.shape.ui_scale.safeParse(scale)
if (typeof scale !== 'number' || !parsed.success) {
return { success: false, error: 'Unsupported desktop UI scale' }
}
try {
setConfigField('desktop.ui_scale', String(parsed.data))
win.webContents.setZoomFactor(parsed.data)
appLogger.info('window', `Desktop UI scale changed to ${parsed.data}`)
return { success: true }
} catch (error) {
appLogger.error('window', 'Failed to change desktop UI scale', error)
return { success: false, error: error instanceof Error ? error.message : String(error) }
}
})
// ==================== Windows 关闭行为 ==================== // ==================== Windows 关闭行为 ====================
ipcMain.handle('app:getDesktopCloseBehavior', () => { ipcMain.handle('app:getDesktopCloseBehavior', () => {
return loadConfig().desktop.close_behavior return loadConfig().desktop.close_behavior
+3
View File
@@ -28,6 +28,7 @@ export async function createMainWindow(paths: MainWindowPaths): Promise<BrowserW
preload: paths.preloadPath, preload: paths.preloadPath,
sandbox: false, sandbox: false,
devTools: true, devTools: true,
zoomFactor: loadConfig().desktop.ui_scale,
}, },
} }
@@ -100,6 +101,8 @@ function handleWindowsClose(win: BrowserWindow): void {
function registerMainWindowEvents(win: BrowserWindow): void { function registerMainWindowEvents(win: BrowserWindow): void {
win.webContents.on('did-finish-load', () => { win.webContents.on('did-finish-load', () => {
// Reapply the preference after navigation, overriding Chromium's per-origin zoom cache.
win.webContents.setZoomFactor(loadConfig().desktop.ui_scale)
setTimeout(() => { setTimeout(() => {
currentMainWindow?.webContents.send('app-started') currentMainWindow?.webContents.send('app-started')
}, 500) }, 500)
+4
View File
@@ -123,5 +123,9 @@ export const extendedApi = {
setDesktopCloseBehavior: (behavior: DesktopCloseBehavior): Promise<{ success: boolean; error?: string }> => { setDesktopCloseBehavior: (behavior: DesktopCloseBehavior): Promise<{ success: boolean; error?: string }> => {
return ipcRenderer.invoke('app:setDesktopCloseBehavior', behavior) return ipcRenderer.invoke('app:setDesktopCloseBehavior', behavior)
}, },
getDesktopUiScale: (): Promise<number> => ipcRenderer.invoke('app:getDesktopUiScale'),
setDesktopUiScale: (scale: number): Promise<{ success: boolean; error?: string }> => {
return ipcRenderer.invoke('app:setDesktopUiScale', scale)
},
}, },
} }
+2
View File
@@ -194,6 +194,8 @@ interface Api {
setOpenAtLogin: (enabled: boolean) => Promise<{ success: boolean; error?: string }> setOpenAtLogin: (enabled: boolean) => Promise<{ success: boolean; error?: string }>
getDesktopCloseBehavior: () => Promise<DesktopCloseBehavior> getDesktopCloseBehavior: () => Promise<DesktopCloseBehavior>
setDesktopCloseBehavior: (behavior: DesktopCloseBehavior) => Promise<{ success: boolean; error?: string }> setDesktopCloseBehavior: (behavior: DesktopCloseBehavior) => Promise<{ success: boolean; error?: string }>
getDesktopUiScale: () => Promise<number>
setDesktopUiScale: (scale: number) => Promise<{ success: boolean; error?: string }>
} }
} }
+1
View File
@@ -48,6 +48,7 @@ export const cliConfigSchema = z.object({
export const desktopConfigSchema = z.object({ export const desktopConfigSchema = z.object({
close_behavior: z.enum(['background', 'quit']).default('background'), close_behavior: z.enum(['background', 'quit']).default('background'),
ui_scale: z.number().min(0.9).max(1.5).default(1),
}) })
export const configSchema = z.object({ export const configSchema = z.object({
@@ -45,6 +45,23 @@ describe('cli config section', () => {
}) })
describe('setConfigField', () => { describe('setConfigField', () => {
it('defaults old desktop configs to 100% and persists UI scale without changing other preferences', () => {
mkdirSync(join(tempHome, '.chatlab'), { recursive: true })
writeFileSync(configToml, '[desktop]\nclose_behavior = "quit"\n[locale]\nlang = "en-US"\n', 'utf-8')
assert.equal(loadConfig().desktop.ui_scale, 1)
setConfigField('desktop.ui_scale', '1.25')
const config = loadConfig()
assert.equal(config.desktop.ui_scale, 1.25)
assert.equal(config.desktop.close_behavior, 'quit')
assert.equal(config.locale.lang, 'en-US')
const saved = readFileSync(configToml, 'utf-8')
assert.throws(() => setConfigField('desktop.ui_scale', '0'))
assert.equal(readFileSync(configToml, 'utf-8'), saved)
})
it('persists the Windows close behavior', () => { it('persists the Windows close behavior', () => {
const result = setConfigField('desktop.close_behavior', 'background') const result = setConfigField('desktop.close_behavior', 'background')
@@ -273,8 +273,8 @@ onUnmounted(() => {
{{ session.name }} {{ session.name }}
</h2> </h2>
<div class="mt-4 flex flex-col gap-5 sm:flex-row sm:items-start sm:gap-24"> <div class="mt-4 flex flex-col gap-5 sm:flex-row sm:flex-wrap sm:items-start sm:gap-x-24">
<div class="min-w-0 flex flex-col gap-2 text-sm font-medium text-gray-500 dark:text-gray-400"> <div class="min-w-0 flex shrink-0 flex-col gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex h-6 w-6 shrink-0 items-center justify-center"> <div class="flex h-6 w-6 shrink-0 items-center justify-center">
<UIcon v-if="session.type === 'group'" name="i-heroicons-user-group" class="h-4 w-4 opacity-70" /> <UIcon v-if="session.type === 'group'" name="i-heroicons-user-group" class="h-4 w-4 opacity-70" />
@@ -4,6 +4,8 @@ import { computed, ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useLayoutStore } from '@/stores/layout' import { useLayoutStore } from '@/stores/layout'
import { useSettingsStore } from '@/stores/settings' import { useSettingsStore } from '@/stores/settings'
import { useToast } from '@/composables/useToast'
import { reportError } from '@/services/log-report'
import { useColorMode } from '@vueuse/core' import { useColorMode } from '@vueuse/core'
import { availableLocales, type LocaleType } from '@/i18n' import { availableLocales, type LocaleType } from '@/i18n'
import NetworkSettingsSection from './NetworkSettingsSection.vue' import NetworkSettingsSection from './NetworkSettingsSection.vue'
@@ -14,6 +16,7 @@ import { INSIGHT_CARD_THEMES, type InsightCardThemeId } from '@/utils/insight-ca
import type { DesktopCloseBehavior } from '@openchatlab/shared-types' import type { DesktopCloseBehavior } from '@openchatlab/shared-types'
const { t } = useI18n() const { t } = useI18n()
const toast = useToast()
withDefaults( withDefaults(
defineProps<{ defineProps<{
@@ -39,6 +42,12 @@ const isWindowsDesktop =
IS_ELECTRON && typeof navigator !== 'undefined' && navigator.platform.toLowerCase().includes('win') IS_ELECTRON && typeof navigator !== 'undefined' && navigator.platform.toLowerCase().includes('win')
const desktopCloseBehavior = ref<DesktopCloseBehavior>('background') const desktopCloseBehavior = ref<DesktopCloseBehavior>('background')
let savedDesktopCloseBehavior: DesktopCloseBehavior = 'background' let savedDesktopCloseBehavior: DesktopCloseBehavior = 'background'
const desktopUiScale = ref(1)
const savingUiScale = ref(false)
const uiScaleOptions = [0.9, 1, 1.1, 1.25, 1.5].map((value) => ({
label: `${Math.round(value * 100)}%`,
value,
}))
onMounted(async () => { onMounted(async () => {
if (!IS_ELECTRON) { if (!IS_ELECTRON) {
@@ -52,6 +61,13 @@ onMounted(async () => {
isPackaged.value = false isPackaged.value = false
} }
try {
desktopUiScale.value = await usePlatformService().getDesktopUiScale()
} catch (error) {
reportError(`Failed to load desktop UI scale: ${error}`, error instanceof Error ? error.stack : undefined)
toast.fail(t('common.loadFailed'))
}
if (isWindowsDesktop) { if (isWindowsDesktop) {
try { try {
savedDesktopCloseBehavior = await usePlatformService().getDesktopCloseBehavior() savedDesktopCloseBehavior = await usePlatformService().getDesktopCloseBehavior()
@@ -84,6 +100,20 @@ async function handleDesktopCloseBehaviorChange(value: string | number) {
} }
} }
async function handleDesktopUiScaleChange(value: number) {
savingUiScale.value = true
try {
const result = await usePlatformService().setDesktopUiScale(value)
if (!result.success) throw new Error(result.error || 'Failed to save desktop UI scale')
desktopUiScale.value = value
} catch (error) {
reportError(`Failed to save desktop UI scale: ${error}`, error instanceof Error ? error.stack : undefined)
toast.fail(t('common.saveFailed'))
} finally {
savingUiScale.value = false
}
}
// Color Mode // Color Mode
const colorMode = useColorMode({ const colorMode = useColorMode({
emitAuto: true, emitAuto: true,
@@ -215,6 +245,22 @@ const desktopCloseBehaviorOptions = computed(() => [
<UTabs v-model="colorMode" size="sm" class="gap-0" :items="colorModeOptions"></UTabs> <UTabs v-model="colorMode" size="sm" class="gap-0" :items="colorModeOptions"></UTabs>
</div> </div>
</div> </div>
<template v-if="IS_ELECTRON">
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<div class="flex items-center justify-between p-4">
<label for="desktop-ui-scale" class="pr-4 text-sm font-medium text-gray-900 dark:text-white">
{{ t('settings.basic.appearance.uiScale') }}
</label>
<USelect
id="desktop-ui-scale"
:model-value="desktopUiScale"
:items="uiScaleOptions"
:disabled="savingUiScale"
class="w-28"
@update:model-value="handleDesktopUiScaleChange"
/>
</div>
</template>
<div class="border-t border-gray-200 dark:border-gray-700"></div> <div class="border-t border-gray-200 dark:border-gray-700"></div>
<div class="flex items-center justify-between p-4"> <div class="flex items-center justify-between p-4">
<div class="flex-1 pr-4"> <div class="flex-1 pr-4">
@@ -38,7 +38,7 @@ const currentTab = computed({
@update:open="emit('update:open', $event)" @update:open="emit('update:open', $event)"
> >
<template #content> <template #content>
<div class="flex h-[100dvh] min-h-0 flex-col overflow-hidden sm:h-[85vh] sm:min-h-[650px]"> <div class="flex h-[100dvh] min-h-0 flex-col overflow-hidden sm:h-[85vh] sm:min-h-[min(650px,calc(100dvh-4rem))]">
<div class="shrink-0 border-b border-gray-200 px-4 pt-4 sm:px-6 sm:pt-5 dark:border-gray-800"> <div class="shrink-0 border-b border-gray-200 px-4 pt-4 sm:px-6 sm:pt-5 dark:border-gray-800">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
+2
View File
@@ -21,6 +21,8 @@
"presentationFallback": "Appearance preferences couldn't be loaded in time. System theme and the built-in language are in use for this session.", "presentationFallback": "Appearance preferences couldn't be loaded in time. System theme and the built-in language are in use for this session.",
"webWasmWorkspaceBusy": "The local workspace is temporarily in use by another tab. Wait a moment and retry.", "webWasmWorkspaceBusy": "The local workspace is temporarily in use by another tab. Wait a moment and retry.",
"loading": "Loading...", "loading": "Loading...",
"loadFailed": "Failed to load",
"saveFailed": "Failed to save",
"initializing": "Initializing...", "initializing": "Initializing...",
"noResults": "No results found", "noResults": "No results found",
"export": "Export", "export": "Export",
+1
View File
@@ -34,6 +34,7 @@
"appearance": { "appearance": {
"title": "Appearance", "title": "Appearance",
"themeMode": "Theme Mode", "themeMode": "Theme Mode",
"uiScale": "UI scale",
"insightCardTheme": "Insight card colors", "insightCardTheme": "Insight card colors",
"insightCardThemeOption": "Color scheme {index}", "insightCardThemeOption": "Color scheme {index}",
"auto": "System", "auto": "System",
+2
View File
@@ -21,6 +21,8 @@
"presentationFallback": "表示設定を時間内に読み込めなかったため、このセッションではシステムテーマと組み込み言語を使用します。", "presentationFallback": "表示設定を時間内に読み込めなかったため、このセッションではシステムテーマと組み込み言語を使用します。",
"webWasmWorkspaceBusy": "ローカルワークスペースは一時的に別のタブで使用されています。しばらく待ってから再試行してください。", "webWasmWorkspaceBusy": "ローカルワークスペースは一時的に別のタブで使用されています。しばらく待ってから再試行してください。",
"loading": "読み込み中...", "loading": "読み込み中...",
"loadFailed": "読み込みに失敗しました",
"saveFailed": "保存に失敗しました",
"initializing": "初期化中...", "initializing": "初期化中...",
"noResults": "結果が見つかりません", "noResults": "結果が見つかりません",
"export": "エクスポート", "export": "エクスポート",
+1
View File
@@ -34,6 +34,7 @@
"appearance": { "appearance": {
"title": "外観設定", "title": "外観設定",
"themeMode": "テーマモード", "themeMode": "テーマモード",
"uiScale": "表示倍率",
"insightCardTheme": "インサイトカードの配色", "insightCardTheme": "インサイトカードの配色",
"insightCardThemeOption": "配色 {index}", "insightCardThemeOption": "配色 {index}",
"auto": "システムに従う", "auto": "システムに従う",
+2
View File
@@ -21,6 +21,8 @@
"presentationFallback": "外观偏好未能及时加载,本次启动已使用系统主题和内置语言。", "presentationFallback": "外观偏好未能及时加载,本次启动已使用系统主题和内置语言。",
"webWasmWorkspaceBusy": "本地工作区暂时正由另一个标签页使用。请稍候后重试。", "webWasmWorkspaceBusy": "本地工作区暂时正由另一个标签页使用。请稍候后重试。",
"loading": "加载中...", "loading": "加载中...",
"loadFailed": "加载失败",
"saveFailed": "保存失败",
"initializing": "初始化中...", "initializing": "初始化中...",
"noResults": "无匹配结果", "noResults": "无匹配结果",
"export": "导出", "export": "导出",
+1
View File
@@ -34,6 +34,7 @@
"appearance": { "appearance": {
"title": "外观设置", "title": "外观设置",
"themeMode": "主题模式", "themeMode": "主题模式",
"uiScale": "界面缩放",
"insightCardTheme": "洞察卡片配色", "insightCardTheme": "洞察卡片配色",
"insightCardThemeOption": "配色 {index}", "insightCardThemeOption": "配色 {index}",
"auto": "跟随系统", "auto": "跟随系统",
+2
View File
@@ -21,6 +21,8 @@
"presentationFallback": "外觀偏好未能及時載入,本次啟動已使用系統主題和內建語言。", "presentationFallback": "外觀偏好未能及時載入,本次啟動已使用系統主題和內建語言。",
"webWasmWorkspaceBusy": "本機工作區暫時正由另一個分頁使用。請稍候後重試。", "webWasmWorkspaceBusy": "本機工作區暫時正由另一個分頁使用。請稍候後重試。",
"loading": "載入中...", "loading": "載入中...",
"loadFailed": "載入失敗",
"saveFailed": "儲存失敗",
"initializing": "初始化中...", "initializing": "初始化中...",
"noResults": "無匹配結果", "noResults": "無匹配結果",
"export": "匯出", "export": "匯出",
+1
View File
@@ -34,6 +34,7 @@
"appearance": { "appearance": {
"title": "外觀設定", "title": "外觀設定",
"themeMode": "主題模式", "themeMode": "主題模式",
"uiScale": "介面縮放",
"insightCardTheme": "洞察卡片配色", "insightCardTheme": "洞察卡片配色",
"insightCardThemeOption": "配色 {index}", "insightCardThemeOption": "配色 {index}",
"auto": "依系統設定", "auto": "依系統設定",
+8
View File
@@ -49,6 +49,14 @@ export class BrowserPlatformAdapter implements PlatformAdapter {
return { success: false, error: 'Desktop close behavior is not available in Web WASM' } return { success: false, error: 'Desktop close behavior is not available in Web WASM' }
} }
async getDesktopUiScale(): Promise<number> {
return 1
}
async setDesktopUiScale(_scale: number): Promise<{ success: boolean; error?: string }> {
return { success: false, error: 'Desktop UI scale is not available in Web WASM' }
}
async getAnalyticsEnabled(): Promise<boolean> { async getAnalyticsEnabled(): Promise<boolean> {
return false return false
} }
+8
View File
@@ -56,6 +56,14 @@ export class CliWebPlatformAdapter implements PlatformAdapter {
return { success: false, error: 'Not available in CLI Web' } return { success: false, error: 'Not available in CLI Web' }
} }
async getDesktopUiScale(): Promise<number> {
return 1
}
async setDesktopUiScale(_scale: number): Promise<{ success: boolean; error?: string }> {
return { success: false, error: 'Not available in CLI Web' }
}
async getAnalyticsEnabled(): Promise<boolean> { async getAnalyticsEnabled(): Promise<boolean> {
try { try {
const resp = await fetchWithAuth('/_web/telemetry/enabled') const resp = await fetchWithAuth('/_web/telemetry/enabled')
+8
View File
@@ -34,6 +34,14 @@ export class ElectronPlatformAdapter implements PlatformAdapter {
return window.api.app.setDesktopCloseBehavior(behavior) return window.api.app.setDesktopCloseBehavior(behavior)
} }
getDesktopUiScale(): Promise<number> {
return window.api.app.getDesktopUiScale()
}
setDesktopUiScale(scale: number): Promise<{ success: boolean; error?: string }> {
return window.api.app.setDesktopUiScale(scale)
}
getAnalyticsEnabled(): Promise<boolean> { getAnalyticsEnabled(): Promise<boolean> {
return window.api.app.getAnalyticsEnabled() return window.api.app.getAnalyticsEnabled()
} }
+2
View File
@@ -48,6 +48,8 @@ export interface PlatformAdapter {
setOpenAtLogin(enabled: boolean): Promise<{ success: boolean; error?: string }> setOpenAtLogin(enabled: boolean): Promise<{ success: boolean; error?: string }>
getDesktopCloseBehavior(): Promise<DesktopCloseBehavior> getDesktopCloseBehavior(): Promise<DesktopCloseBehavior>
setDesktopCloseBehavior(behavior: DesktopCloseBehavior): Promise<{ success: boolean; error?: string }> setDesktopCloseBehavior(behavior: DesktopCloseBehavior): Promise<{ success: boolean; error?: string }>
getDesktopUiScale(): Promise<number>
setDesktopUiScale(scale: number): Promise<{ success: boolean; error?: string }>
getAnalyticsEnabled(): Promise<boolean> getAnalyticsEnabled(): Promise<boolean>
setAnalyticsEnabled(enabled: boolean): Promise<{ success: boolean }> setAnalyticsEnabled(enabled: boolean): Promise<{ success: boolean }>