Files
Starlight_Lancher/apps/app-frontend/src/helpers/ui-scale.ts
T
AxTps 34cf186c33
Axolotl desktop CI / guardrails (push) Has been cancelled
Axolotl desktop CI / desktop (macos-latest) (push) Has been cancelled
Axolotl desktop CI / desktop (ubuntu-latest) (push) Has been cancelled
Axolotl desktop CI / desktop (windows-latest) (push) Has been cancelled
Axolotl desktop CI / website (push) Has been cancelled
Repository checks / typos (push) Has been cancelled
Repository checks / tombi (push) Has been cancelled
Rust checks / shear (push) Has been cancelled
Sync source to CNB / Sync Git ref (push) Has been cancelled
feat: 界面缩放改用后端持久化 + 原生 webview zoom
2026-10-01 16:21:30 +08:00

54 lines
1.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { invoke } from '@tauri-apps/api/core'
import { ref, watch } from 'vue'
/**
* 启动器界面缩放(百分比)。
* 通过 Tauri 原生 webview zoom(Rust 侧 set_zoom)应用,
* 缩放值持久化到后端设置数据库(settings.ui_scale)。
*/
const MIN_UI_SCALE = 50
const MAX_UI_SCALE = 200
const DEFAULT_UI_SCALE = 100
/** 把缩放值限制在允许范围内。 */
function clampUiScale(value: number): number {
if (!Number.isFinite(value)) return DEFAULT_UI_SCALE
return Math.min(MAX_UI_SCALE, Math.max(MIN_UI_SCALE, Math.round(value)))
}
export const uiScale = ref(DEFAULT_UI_SCALE)
export function setUiScale(value: number): void {
uiScale.value = clampUiScale(value)
}
export function resetUiScale(): void {
setUiScale(DEFAULT_UI_SCALE)
}
export { DEFAULT_UI_SCALE, MAX_UI_SCALE, MIN_UI_SCALE }
/**
* 把缩放值应用到原生 webview。
* 同时保留 --ui-scale CSS 变量,供依赖它的样式/锚点使用。
*/
async function applyUiScale(value: number): Promise<void> {
const factor = value / 100
document.documentElement.style.setProperty('--ui-scale', String(factor))
try {
await invoke('plugin:settings|set_ui_scale', { factor })
} catch (error) {
console.warn('应用界面缩放失败', error)
}
}
/**
* 初始化缩放:应用当前值,并在变化时同步到原生 webview。
* 初值由调用方(App 初始化流程)在读取后端设置后通过 setUiScale 覆盖。
*/
export function installUiScale(): void {
void applyUiScale(uiScale.value)
watch(uiScale, (value) => {
void applyUiScale(value)
})
}