feat: 界面缩放改用后端持久化 + 原生 webview zoom

apps/app-frontend/src/App.vue

@@ -142,7 +142,7 @@ import {
 	isNetworkMetered,
 	setRestartAfterPendingUpdate,
 } from '@/helpers/utils.js'
-import { installUiScale } from '@/helpers/ui-scale'
+import { installUiScale, setUiScale } from '@/helpers/ui-scale'
 import { start_join_server, start_join_singleplayer_world } from '@/helpers/worlds.ts'
 import i18n, { resolveInitialLocale } from '@/i18n.config'
 import {
@@ -1091,6 +1091,7 @@ async function setupApp() {
 		close_behavior,
 		developer_mode,
 		feature_flags,
+		ui_scale,
 	} = initialSettings
 
 	// Initialize locale from saved settings
@@ -1121,6 +1122,7 @@ async function setupApp() {
 	nativeDecorations.value = native_decorations
 	if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations)
 
+	setUiScale(ui_scale)
 	themeStore.setThemeState(theme)
 	await initializeSystemAccentColor()
 	themeStore.setAccentColor(accent_color)

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -373,6 +373,12 @@ const customBackgroundPreview = computed(() =>
 		: null,
 )
 
+function updateUiScale(value: number) {
+	const clamped = Math.min(200, Math.max(50, Math.round(value)))
+	setUiScale(clamped)
+	settings.value.ui_scale = clamped
+}
+
 const accentColorOptions: Array<{
 	value: AccentColor
 	color: string
@@ -1050,7 +1056,7 @@ watch(
 										? 'border-brand bg-brand-highlight text-brand'
 										: 'border-surface-4 bg-surface-3 text-secondary hover:border-surface-5 hover:text-contrast'
 								"
-								@click="setUiScale(preset)"
+								@click="updateUiScale(preset)"
 							>
 								{{ preset }}%
 							</button>
@@ -1062,7 +1068,7 @@ watch(
 							:max="200"
 							:step="5"
 							unit="%"
-							@update:model-value="(value) => setUiScale(Number(value))"
+							@update:model-value="(value) => updateUiScale(Number(value))"
 						/>
 					</div>
 				</template>

apps/app-frontend/src/helpers/settings.ts

@@ -172,6 +172,7 @@ export type AppSettings = {
 	home_layout: HomeLayout
 	minimal_home_instance_id: string | null
 	close_behavior: 'ask' | 'close' | 'lightweight'
+	ui_scale: number
 	home_widgets: HomeDashboardConfig | null
 	terracotta_public_nodes: string[]
 
@@ -213,6 +214,7 @@ type LegacyMirrorSettings = {
 
 function normalizeDownloadSettings(settings: AppSettings & LegacyMirrorSettings): AppSettings {
 	settings.close_behavior ??= 'ask'
+	settings.ui_scale ??= 100
 	const hasLegacySettings =
 		typeof settings.use_minecraft_mirror === 'boolean' &&
 		typeof settings.use_modrinth_mirror === 'boolean' &&

apps/app-frontend/src/helpers/ui-scale.ts

@@ -1,10 +1,11 @@
+import { invoke } from '@tauri-apps/api/core'
 import { ref, watch } from 'vue'
 
 /**
  * 启动器界面缩放（百分比）。
- * 这是纯本地的显示偏好，用 localStorage 保存即可，无需写入后端设置数据库。
+ * 通过 Tauri 原生 webview zoom（Rust 侧 set_zoom）应用，
+ * 缩放值持久化到后端设置数据库（settings.ui_scale）。
  */
-const UI_SCALE_STORAGE_KEY = 'starlight-ui-scale'
 const MIN_UI_SCALE = 50
 const MAX_UI_SCALE = 200
 const DEFAULT_UI_SCALE = 100
@@ -15,18 +16,7 @@ function clampUiScale(value: number): number {
 	return Math.min(MAX_UI_SCALE, Math.max(MIN_UI_SCALE, Math.round(value)))
 }
 
-/** 从 localStorage 读取已保存的缩放值。 */
-function readStoredUiScale(): number {
-	try {
-		const raw = localStorage.getItem(UI_SCALE_STORAGE_KEY)
-		if (raw === null) return DEFAULT_UI_SCALE
-		return clampUiScale(Number(raw))
-	} catch {
-		return DEFAULT_UI_SCALE
-	}
-}
-
-export const uiScale = ref(readStoredUiScale())
+export const uiScale = ref(DEFAULT_UI_SCALE)
 
 export function setUiScale(value: number): void {
 	uiScale.value = clampUiScale(value)
@@ -38,23 +28,27 @@ export function resetUiScale(): void {
 
 export { DEFAULT_UI_SCALE, MAX_UI_SCALE, MIN_UI_SCALE }
 
-/** 把缩放应用到文档根节点，并在变化时持久化。 */
-export function installUiScale(): void {
-	const apply = (value: number) => {
-		const factor = String(value / 100)
-		const root = document.documentElement
-		root.style.setProperty('--ui-scale', factor)
-		// 用 CSS zoom 整体缩放界面（含内嵌网页），在 WebView2/WebKit 上最可靠。
-		root.style.setProperty('zoom', factor)
+/**
+ * 把缩放值应用到原生 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)
 	}
+}
 
-	apply(uiScale.value)
+/**
+ * 初始化缩放：应用当前值，并在变化时同步到原生 webview。
+ * 初值由调用方（App 初始化流程）在读取后端设置后通过 setUiScale 覆盖。
+ */
+export function installUiScale(): void {
+	void applyUiScale(uiScale.value)
 	watch(uiScale, (value) => {
-		apply(value)
-		try {
-			localStorage.setItem(UI_SCALE_STORAGE_KEY, String(value))
-		} catch (error) {
-			console.warn('保存界面缩放失败', error)
-		}
+		void applyUiScale(value)
 	})
 }