feat(fonts): 外观设置新增界面/等宽字体选择器，含中英繁中文案

Cargo.lock

@@ -1889,6 +1889,28 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
 
+[[package]]
+name = "fontconfig-parser"
+version = "0.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbc773e24e02d4ddd8395fd30dc147524273a83e54e0f312d986ea30de5f5646"
+dependencies = [
+ "roxmltree",
+]
+
+[[package]]
+name = "fontdb"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2660c5e9157bf76d2db1294e4a9feba604ef610819a3b591088d0d8392a3290f"
+dependencies = [
+ "fontconfig-parser",
+ "log",
+ "memmap2",
+ "slotmap",
+ "tinyvec",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -3477,6 +3499,15 @@ version = "2.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf8baf1c55e62ffcace7a9f06f4bd9cd3f0c4beb022d3b367256b91b87513d98"
 
+[[package]]
+name = "memmap2"
+version = "0.9.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d1219ed1b7f229ee7104d281dd01d6802fe28bb6e95d292942c4daacdeb798c0"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "memoffset"
 version = "0.9.1"
@@ -5102,6 +5133,12 @@ dependencies = [
  "windows-sys 0.52.0",
 ]
 
+[[package]]
+name = "roxmltree"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c20b6793b5c2fa6553b250154b78d6d0db37e72700ae35fad9387a46f487c97"
+
 [[package]]
 name = "rsa"
 version = "0.9.10"
@@ -5758,6 +5795,15 @@ version = "0.4.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
 
+[[package]]
+name = "slotmap"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bdd58c3c93c3d278ca835519292445cb4b0d4dc59ccfdf7ceadaab3f8aeb4038"
+dependencies = [
+ "version_check",
+]
+
 [[package]]
 name = "smallvec"
 version = "1.15.2"
@@ -6912,6 +6958,7 @@ dependencies = [
  "either",
  "enumset",
  "flate2",
+ "fontdb",
  "futures",
  "hyper",
  "hyper-util",

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

@@ -22,7 +22,7 @@ import { convertFileSrc } from '@tauri-apps/api/core'
 import { appDataDir, join } from '@tauri-apps/api/path'
 import { open } from '@tauri-apps/plugin-dialog'
 import { exists, mkdir, readFile, remove, writeFile } from '@tauri-apps/plugin-fs'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
@@ -41,6 +41,19 @@ import {
 	parseCustomAccentColor,
 } from '@/store/theme.ts'
 
+import {
+	buildFontFamilyOptions,
+	canonicalFontFamily,
+	DEFAULT_MONO_FONT_STACK,
+	DEFAULT_UI_FONT_STACK,
+	type FontFamilyOption,
+	type FontFamilyOptionOrDivider,
+	optionValueToFontSetting,
+	resolveFontFamily,
+	type SystemFontFamily,
+} from '@/helpers/font-family.ts'
+import { getSystemFontFamilies } from '@/helpers/system-fonts.ts'
+
 import SettingsRow from './SettingsRow.vue'
 import SettingsSection from './SettingsSection.vue'
 
@@ -363,6 +376,63 @@ const messages = defineMessages({
 		defaultMessage:
 			'Hide the downloads button in the sidebar when there are no active download tasks.',
 	},
+	fontsTitle: { id: 'app.appearance-settings.fonts.title', defaultMessage: 'Fonts' },
+	fontsDescription: {
+		id: 'app.appearance-settings.fonts.description',
+		defaultMessage: 'Choose the fonts the launcher interface and its logs are rendered in.',
+	},
+	uiFontTitle: { id: 'app.appearance-settings.fonts.ui-font', defaultMessage: 'Interface font' },
+	uiFontDescription: {
+		id: 'app.appearance-settings.fonts.ui-font-description',
+		defaultMessage:
+			'Used across the launcher interface. Only fonts installed on this system are listed.',
+	},
+	monoFontTitle: {
+		id: 'app.appearance-settings.fonts.mono-font',
+		defaultMessage: 'Monospace font',
+	},
+	monoFontDescription: {
+		id: 'app.appearance-settings.fonts.mono-font-description',
+		defaultMessage: 'Used for logs, the server console, and other monospace content.',
+	},
+	fontDefault: {
+		id: 'app.appearance-settings.fonts.default',
+		defaultMessage: 'Launcher default',
+	},
+	fontMonospace: {
+		id: 'app.appearance-settings.fonts.monospace',
+		defaultMessage: 'Monospace',
+	},
+	fontMissing: {
+		id: 'app.appearance-settings.fonts.missing',
+		defaultMessage: 'Not installed',
+	},
+	fontSearchPlaceholder: {
+		id: 'app.appearance-settings.fonts.search-placeholder',
+		defaultMessage: 'Search installed fonts',
+	},
+	fontNoResults: {
+		id: 'app.appearance-settings.fonts.no-results',
+		defaultMessage: 'No matching fonts',
+	},
+	fontLoadFailed: {
+		id: 'app.appearance-settings.fonts.load-failed',
+		defaultMessage: "Couldn't read the list of installed fonts.",
+	},
+	fontRetry: { id: 'app.appearance-settings.fonts.retry', defaultMessage: 'Retry' },
+	fontReset: {
+		id: 'app.appearance-settings.fonts.reset',
+		defaultMessage: 'Reset',
+	},
+	fontPreviewLabel: { id: 'app.appearance-settings.fonts.preview', defaultMessage: 'Preview' },
+	fontUiPreviewSample: {
+		id: 'app.appearance-settings.fonts.ui-preview-sample',
+		defaultMessage: 'The quick brown fox jumps over the lazy dog.',
+	},
+	fontMonoPreviewSample: {
+		id: 'app.appearance-settings.fonts.mono-preview-sample',
+		defaultMessage: 'const x = () => 0; // monospace',
+	},
 })
 
 const os = ref(await getOS())
@@ -373,6 +443,78 @@ const customBackgroundPreview = computed(() =>
 		: null,
 )
 
+const systemFonts = ref<SystemFontFamily[]>([])
+const systemFontsLoading = ref(true)
+const systemFontsFailed = ref(false)
+
+async function loadSystemFonts() {
+	systemFontsLoading.value = true
+	systemFontsFailed.value = false
+
+	try {
+		systemFonts.value = await getSystemFontFamilies()
+	} catch (error) {
+		systemFontsFailed.value = true
+		console.warn('Failed to read the list of installed fonts', error)
+	} finally {
+		systemFontsLoading.value = false
+	}
+}
+
+function selectedOptionLabel(options: FontFamilyOptionOrDivider[], value: string): string {
+	const option = options.find(
+		(entry): entry is FontFamilyOption => 'value' in entry && entry.value === value,
+	)
+
+	return option?.label ?? ''
+}
+
+const uiFontOptions = computed<FontFamilyOptionOrDivider[]>(() =>
+	buildFontFamilyOptions(systemFonts.value, {
+		defaultLabel: formatMessage(messages.fontDefault),
+		missingLabel: formatMessage(messages.fontMissing),
+		selected: settings.value.ui_font,
+	}),
+)
+
+const monoFontOptions = computed<FontFamilyOptionOrDivider[]>(() =>
+	buildFontFamilyOptions(systemFonts.value, {
+		defaultLabel: formatMessage(messages.fontDefault),
+		missingLabel: formatMessage(messages.fontMissing),
+		monospaceLabel: formatMessage(messages.fontMonospace),
+		selected: settings.value.mono_font,
+		groupMonospaced: true,
+	}),
+)
+
+const uiFontSelection = computed({
+	get: () => canonicalFontFamily(systemFonts.value, settings.value.ui_font),
+	set: (value: string) => {
+		settings.value.ui_font = optionValueToFontSetting(value)
+	},
+})
+
+const monoFontSelection = computed({
+	get: () => canonicalFontFamily(systemFonts.value, settings.value.mono_font),
+	set: (value: string) => {
+		settings.value.mono_font = optionValueToFontSetting(value)
+	},
+})
+
+const uiFontSearchValue = computed(() =>
+	selectedOptionLabel(uiFontOptions.value, uiFontSelection.value),
+)
+const monoFontSearchValue = computed(() =>
+	selectedOptionLabel(monoFontOptions.value, monoFontSelection.value),
+)
+
+const uiFontPreview = computed(() =>
+	resolveFontFamily(settings.value.ui_font, DEFAULT_UI_FONT_STACK),
+)
+const monoFontPreview = computed(() =>
+	resolveFontFamily(settings.value.mono_font, DEFAULT_MONO_FONT_STACK),
+)
+
 function updateUiScale(value: number) {
 	const clamped = Math.min(200, Math.max(50, Math.round(value)))
 	setUiScale(clamped)
@@ -489,6 +631,8 @@ watch(
 			settings.value.transparent_background_blur,
 			settings.value.sidebar_instance_count,
 			settings.value.close_behavior,
+			settings.value.ui_font,
+			settings.value.mono_font,
 		] as const,
 	([
 		path,
@@ -499,6 +643,8 @@ watch(
 		transparentBlur,
 		sidebarInstanceCount,
 		closeBehavior,
+		uiFont,
+		monoFont,
 	]) => {
 		themeStore.customBackgroundPath = path
 		themeStore.customBackgroundBlur = blur
@@ -509,10 +655,19 @@ watch(
 		themeStore.setTransparentBackgroundClass()
 		themeStore.sidebarInstanceCount = sidebarInstanceCount
 		themeStore.closeBehavior = closeBehavior as CloseBehavior
+		themeStore.uiFont = uiFont
+		themeStore.monoFont = monoFont
+		themeStore.setUiFont()
+		themeStore.setMonoFont()
 	},
 	{ immediate: true },
 )
 
+onMounted(() => {
+	if (props.scope === 'interface') {
+		void loadSystemFonts()
+	}
+})
 watch(
 	settings,
 	async () => {
@@ -1148,6 +1303,118 @@ watch(
 			</SettingsRow>
 		</SettingsSection>
 
+		<SettingsSection v-if="props.scope === 'interface'">
+			<template #header>
+				<h2
+					id="settings-target-appearance-fonts"
+					tabindex="-1"
+					class="m-0 text-lg font-semibold text-contrast"
+				>
+					{{ formatMessage(messages.fontsTitle) }}
+				</h2>
+				<p class="m-0 mt-1 text-sm leading-relaxed text-secondary">
+					{{ formatMessage(messages.fontsDescription) }}
+				</p>
+			</template>
+			<SettingsRow stacked>
+				<template #label>
+					<span id="settings-target-appearance-ui-font" tabindex="-1">
+						{{ formatMessage(messages.uiFontTitle) }}
+					</span>
+				</template>
+				<template #description>{{ formatMessage(messages.uiFontDescription) }}</template>
+				<template #control>
+					<div class="flex w-full flex-col gap-3">
+						<div class="flex items-center gap-2">
+							<div class="min-w-0 flex-1">
+								<Combobox
+									v-model="uiFontSelection"
+									:options="uiFontOptions"
+									searchable
+									:search-value="uiFontSearchValue"
+									:search-placeholder="formatMessage(messages.fontSearchPlaceholder)"
+									:no-options-message="formatMessage(messages.fontNoResults)"
+									show-no-options-when-empty
+									:disabled="systemFontsLoading"
+								/>
+							</div>
+							<Button
+								type="quiet"
+								:disabled="settings.ui_font === null"
+								@click="settings.ui_font = null"
+							>
+								{{ formatMessage(messages.fontReset) }}
+							</Button>
+						</div>
+						<div class="flex flex-col gap-1">
+							<span class="text-xs text-secondary">
+								{{ formatMessage(messages.fontPreviewLabel) }}
+							</span>
+							<div
+								class="rounded-[var(--radius-md)] bg-surface-3 px-3 py-2 text-base text-contrast"
+								:style="{ fontFamily: uiFontPreview }"
+							>
+								{{ formatMessage(messages.fontUiPreviewSample) }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</SettingsRow>
+			<SettingsRow stacked>
+				<template #label>
+					<span id="settings-target-appearance-mono-font" tabindex="-1">
+						{{ formatMessage(messages.monoFontTitle) }}
+					</span>
+				</template>
+				<template #description>{{ formatMessage(messages.monoFontDescription) }}</template>
+				<template #control>
+					<div class="flex w-full flex-col gap-3">
+						<div class="flex items-center gap-2">
+							<div class="min-w-0 flex-1">
+								<Combobox
+									v-model="monoFontSelection"
+									:options="monoFontOptions"
+									searchable
+									:search-value="monoFontSearchValue"
+									:search-placeholder="formatMessage(messages.fontSearchPlaceholder)"
+									:no-options-message="formatMessage(messages.fontNoResults)"
+									show-no-options-when-empty
+									:disabled="systemFontsLoading"
+								/>
+							</div>
+							<Button
+								type="quiet"
+								:disabled="settings.mono_font === null"
+								@click="settings.mono_font = null"
+							>
+								{{ formatMessage(messages.fontReset) }}
+							</Button>
+						</div>
+						<div class="flex flex-col gap-1">
+							<span class="text-xs text-secondary">
+								{{ formatMessage(messages.fontPreviewLabel) }}
+							</span>
+							<div
+								class="rounded-[var(--radius-md)] bg-surface-3 px-3 py-2 text-xs text-contrast"
+								:style="{ fontFamily: monoFontPreview }"
+							>
+								{{ formatMessage(messages.fontMonoPreviewSample) }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</SettingsRow>
+			<div
+				v-if="systemFontsFailed"
+				class="flex items-center justify-between gap-3 px-4 pb-4 text-sm text-secondary"
+			>
+				<span>{{ formatMessage(messages.fontLoadFailed) }}</span>
+				<Button type="quiet" @click="loadSystemFonts">
+					{{ formatMessage(messages.fontRetry) }}
+				</Button>
+			</div>
+		</SettingsSection>
+
 		<SettingsSection v-if="props.scope === 'content-downloads'">
 			<SettingsRow>
 				<template #label>

apps/app-frontend/src/locales/en-US/index.json

@@ -419,6 +419,57 @@
   "app.appearance-settings.auto-hide-downloads-button.description": {
     "message": "Hide the downloads button in the sidebar when there are no active download tasks."
   },
+  "app.appearance-settings.fonts.title": {
+    "message": "Fonts"
+  },
+  "app.appearance-settings.fonts.description": {
+    "message": "Choose the fonts the launcher interface and its logs are rendered in."
+  },
+  "app.appearance-settings.fonts.ui-font": {
+    "message": "Interface font"
+  },
+  "app.appearance-settings.fonts.ui-font-description": {
+    "message": "Used across the launcher interface. Only fonts installed on this system are listed."
+  },
+  "app.appearance-settings.fonts.mono-font": {
+    "message": "Monospace font"
+  },
+  "app.appearance-settings.fonts.mono-font-description": {
+    "message": "Used for logs, the server console, and other monospace content."
+  },
+  "app.appearance-settings.fonts.default": {
+    "message": "Launcher default"
+  },
+  "app.appearance-settings.fonts.monospace": {
+    "message": "Monospace"
+  },
+  "app.appearance-settings.fonts.missing": {
+    "message": "Not installed"
+  },
+  "app.appearance-settings.fonts.search-placeholder": {
+    "message": "Search installed fonts"
+  },
+  "app.appearance-settings.fonts.no-results": {
+    "message": "No matching fonts"
+  },
+  "app.appearance-settings.fonts.load-failed": {
+    "message": "Couldn't read the list of installed fonts."
+  },
+  "app.appearance-settings.fonts.retry": {
+    "message": "Retry"
+  },
+  "app.appearance-settings.fonts.reset": {
+    "message": "Reset"
+  },
+  "app.appearance-settings.fonts.preview": {
+    "message": "Preview"
+  },
+  "app.appearance-settings.fonts.ui-preview-sample": {
+    "message": "The quick brown fox jumps over the lazy dog."
+  },
+  "app.appearance-settings.fonts.mono-preview-sample": {
+    "message": "const x = () => 0; // monospace"
+  },
   "app.appearance-settings.auto-hide-downloads-button.title": {
     "message": "Auto-hide downloads button"
   },

apps/app-frontend/src/locales/zh-CN/index.json

@@ -640,6 +640,57 @@
   "app.appearance-settings.auto-hide-downloads-button.description": {
     "message": "没有进行中的下载任务时隐藏侧边栏中的下载按钮，有任务时自动显示。"
   },
+  "app.appearance-settings.fonts.title": {
+    "message": "字体"
+  },
+  "app.appearance-settings.fonts.description": {
+    "message": "选择启动器界面与日志使用的字体。"
+  },
+  "app.appearance-settings.fonts.ui-font": {
+    "message": "界面字体"
+  },
+  "app.appearance-settings.fonts.ui-font-description": {
+    "message": "应用于启动器界面。仅列出系统已安装的字体。"
+  },
+  "app.appearance-settings.fonts.mono-font": {
+    "message": "等宽字体"
+  },
+  "app.appearance-settings.fonts.mono-font-description": {
+    "message": "用于日志、服务器控制台等等宽内容。"
+  },
+  "app.appearance-settings.fonts.default": {
+    "message": "启动器默认"
+  },
+  "app.appearance-settings.fonts.monospace": {
+    "message": "等宽"
+  },
+  "app.appearance-settings.fonts.missing": {
+    "message": "未安装"
+  },
+  "app.appearance-settings.fonts.search-placeholder": {
+    "message": "搜索已安装的字体"
+  },
+  "app.appearance-settings.fonts.no-results": {
+    "message": "没有匹配的字体"
+  },
+  "app.appearance-settings.fonts.load-failed": {
+    "message": "无法读取已安装的字体列表。"
+  },
+  "app.appearance-settings.fonts.retry": {
+    "message": "重试"
+  },
+  "app.appearance-settings.fonts.reset": {
+    "message": "重置"
+  },
+  "app.appearance-settings.fonts.preview": {
+    "message": "预览"
+  },
+  "app.appearance-settings.fonts.ui-preview-sample": {
+    "message": "永和九年，岁在癸丑，暮春之初。"
+  },
+  "app.appearance-settings.fonts.mono-preview-sample": {
+    "message": "const x = () => 0; // 等宽"
+  },
   "app.appearance-settings.auto-hide-downloads-button.title": {
     "message": "自动隐藏下载按钮"
   },

apps/app-frontend/src/locales/zh-TW/index.json

@@ -572,6 +572,57 @@
   "app.appearance-settings.auto-hide-downloads-button.description": {
     "message": "沒有進行中的下載任務時隱藏側邊欄中的下載按鈕，有任務時自動顯示。"
   },
+  "app.appearance-settings.fonts.title": {
+    "message": "字型"
+  },
+  "app.appearance-settings.fonts.description": {
+    "message": "選擇啟動器介面與日誌使用的字型。"
+  },
+  "app.appearance-settings.fonts.ui-font": {
+    "message": "介面字型"
+  },
+  "app.appearance-settings.fonts.ui-font-description": {
+    "message": "套用於啟動器介面。僅列出系統已安裝的字型。"
+  },
+  "app.appearance-settings.fonts.mono-font": {
+    "message": "等寬字型"
+  },
+  "app.appearance-settings.fonts.mono-font-description": {
+    "message": "用於日誌、伺服器主控台等等寬內容。"
+  },
+  "app.appearance-settings.fonts.default": {
+    "message": "啟動器預設"
+  },
+  "app.appearance-settings.fonts.monospace": {
+    "message": "等寬"
+  },
+  "app.appearance-settings.fonts.missing": {
+    "message": "未安裝"
+  },
+  "app.appearance-settings.fonts.search-placeholder": {
+    "message": "搜尋已安裝的字型"
+  },
+  "app.appearance-settings.fonts.no-results": {
+    "message": "沒有符合的字型"
+  },
+  "app.appearance-settings.fonts.load-failed": {
+    "message": "無法讀取已安裝的字型清單。"
+  },
+  "app.appearance-settings.fonts.retry": {
+    "message": "重試"
+  },
+  "app.appearance-settings.fonts.reset": {
+    "message": "重設"
+  },
+  "app.appearance-settings.fonts.preview": {
+    "message": "預覽"
+  },
+  "app.appearance-settings.fonts.ui-preview-sample": {
+    "message": "永和九年，歲在癸丑，暮春之初。"
+  },
+  "app.appearance-settings.fonts.mono-preview-sample": {
+    "message": "const x = () => 0; // 等寬"
+  },
   "app.appearance-settings.auto-hide-downloads-button.title": {
     "message": "自動隱藏下載按鈕"
   },