feat(编辑能力): 修复字体诊断与加载问题

assets/webui/ofdgo.css

@@ -89,8 +89,8 @@ a:focus-visible {
 	display: flex;
 	max-height: 40dvh;
 	overflow: auto;
-	gap: 12px;
-	padding: 8px 12px 6px;
+	gap: 8px;
+	padding: 8px 10px 6px;
 	border-bottom: 1px solid var(--line);
 	background: var(--panel);
 	font-size: 14px;
@@ -105,18 +105,15 @@ a:focus-visible {
 	flex: 0 0 auto;
 	grid-template-columns: repeat(3, max-content);
 	grid-template-rows: repeat(2, 28px) 16px;
-	column-gap: 6px;
+	column-gap: 4px;
 	row-gap: 4px;
-	padding-right: 12px;
+	padding-right: 8px;
 	border-right: 1px solid var(--line);
 }
 
 .editor-file,
 .editor-erase,
-.editor-paragraph,
-.editor-image,
-.editor-group:has(#textFont),
-.editor-group:has(#shapeFill) {
+.editor-image {
 	grid-template-columns: repeat(2, max-content);
 }
 
@@ -192,14 +189,19 @@ a:focus-visible {
 }
 
 .editor-group:has(#textFont) {
-	grid-template-columns: 100px 54px;
+	grid-template-columns: 102px 54px;
 }
 
 .editor-paragraph {
-	width: 218px;
+	width: 194px;
 	grid-template-columns: 54px minmax(0, 1fr);
 }
 
+.editor-group:has(#shapeFill) {
+	width: 180px;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .editor-file #saveButton {
 	grid-row: 1 / 3;
 	height: 100%;
@@ -308,6 +310,10 @@ a:focus-visible {
 	justify-content: space-between;
 }
 
+.shape-paint .color-input {
+	width: 32px;
+}
+
 .shape-paint,
 .shape-paint label {
 	display: flex;
@@ -322,6 +328,7 @@ a:focus-visible {
 }
 
 .editor-group:last-child {
+	padding-right: 0;
 	border-right: 0;
 }
 

assets/webui/ofdgo.js

@@ -53,6 +53,7 @@ const state = {
 	navigationScroll: new Map(),
 	fontSyncPending: false,
 	fontCatalogLoading: false,
+	fontFacesLoading: false,
 	fontRenderPending: false,
 	fontSyncing: false,
 	doc: null,
@@ -1001,23 +1002,40 @@ function editorFonts(item) {
 }
 
 async function loadEditorFonts() {
-	const local = fontManager.canReadLocal() && !fontManager.catalogLoaded && fontManager.permission !== "denied";
-	if (state.fontCatalogLoading || !local && !fontManager.userFonts.some(font => font.enabled && !font.faces)) return;
-	state.fontCatalogLoading = true;
-	try {
-		if (local) {
-			try { await fontManager.queryLocal(); }
-			catch (err) { setStatus(err?.name === "NotAllowedError" ? "字体尚未授权" : String(err.message || err)); }
-		}
-		await fontManager.loadFaces(data => callWASM("ofdgoFontFaces", data));
-		const open = fontPicker.open;
-		const selected = state.textFonts[Number(fontPicker.value)];
-		const query = el.textFont.value === (selected?.fullName || selected?.name || "") ? "" : el.textFont.value;
-		updateTextFonts(canvasEditor.selected, true);
-		if (open && !el.textFont.disabled) { if (query) el.textFont.value = query; fontPicker.show(query); }
-	} finally {
-		state.fontCatalogLoading = false;
+	const tasks = [];
+	if (!state.fontCatalogLoading && fontManager.canReadLocal() && !fontManager.catalogLoaded && fontManager.permission !== "denied") {
+		state.fontCatalogLoading = true;
+		tasks.push((async () => {
+			try {
+				await fontManager.queryLocal();
+				refreshEditorFonts();
+			} catch (err) {
+				setStatus(err?.name === "NotAllowedError" ? "字体尚未授权" : String(err.message || err));
+			} finally {
+				state.fontCatalogLoading = false;
+			}
+		})());
 	}
+	if (!state.fontFacesLoading && fontManager.userFonts.some(font => font.enabled && !font.faces)) {
+		state.fontFacesLoading = true;
+		tasks.push((async () => {
+			try {
+				await fontManager.loadFaces(data => callWASM("ofdgoFontFaces", data));
+				refreshEditorFonts();
+			} finally {
+				state.fontFacesLoading = false;
+			}
+		})());
+	}
+	await Promise.all(tasks);
+}
+
+function refreshEditorFonts() {
+	const open = fontPicker.open;
+	const selected = state.textFonts[Number(fontPicker.value)];
+	const query = el.textFont.value === (selected?.fullName || selected?.name || "") ? "" : el.textFont.value;
+	updateTextFonts(canvasEditor.selected, true);
+	if (open && !el.textFont.disabled) { if (query) el.textFont.value = query; fontPicker.show(query, false); }
 }
 
 async function readTextFont(font) {
@@ -4139,6 +4157,10 @@ function fontResult(font) {
 	if (font.matched) {
 		parts.push(font.embedded || font.status === "embedded" ? `内嵌 ${font.matched}` : `匹配 ${font.matched}`);
 	}
+	if (font.matchedFace?.fullName) {
+		parts.push(font.matchedFace.fullName);
+		if (font.matchedFace.index > 0) parts.push(`索引 ${font.matchedFace.index}`);
+	}
 	if (font.detail) {
 		parts.push(font.detail);
 	}

assets/webui/ofdgo_font.js

@@ -55,7 +55,7 @@ export class FontPicker {
 		return font.embedded ? "内嵌" : font.file || ["stored", "upload"].includes(font.source) ? "上传" : "系统";
 	}
 
-	show(query = "") {
+	show(query = "", load = true) {
 		if (this.input.disabled) return;
 		const normalize = value => value.normalize("NFKC").toLocaleLowerCase().replace(/\s+/g, " ").trim();
 		const terms = normalize(query).split(" ").filter(Boolean);
@@ -95,7 +95,7 @@ export class FontPicker {
 		this.position();
 		const selected = this.matches.findIndex(({ font, index }) => !font.disabled && String(index) === this.value);
 		this.activate(selected < 0 ? this.matches.findIndex(({ font }) => !font.disabled) : selected);
-		this.onOpen?.();
+		if (load) this.onOpen?.();
 	}
 
 	position() {
@@ -316,8 +316,9 @@ export class FontManager {
 	}
 
 	async loadFaces(inspect) {
-		for (const file of this.userFonts) {
-			if (!file.enabled || file.faces) continue;
+		while (true) {
+			const file = this.userFonts.find(font => font.enabled && !font.faces);
+			if (!file) return;
 			try { file.faces = await inspect(await this.read(file)); }
 			catch { file.faces = []; }
 		}