From 9bc19cf3b0da342f1bfb55cb7fe440b0a64099f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E5=89=91=E5=87=9B?= <2993354@qq.com>
Date: Wed, 17 Jun 2026 17:39:38 +0800
Subject: [PATCH] fix: apply editor font to document preview

---
 .../src/components/document/DocumentBrowser.vue | 12 ++++++++++--
 apps/desktop/src/lib/documentViewerFontStyle.ts | 11 +++++++++++
 .../app-tests/documentViewerFontStyle.test.ts   | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 apps/desktop/src/lib/documentViewerFontStyle.ts
 create mode 100644 packages/app-tests/documentViewerFontStyle.test.ts

diff --git a/apps/desktop/src/components/document/DocumentBrowser.vue b/apps/desktop/src/components/document/DocumentBrowser.vue
index 5cbb861a62..fcdc063f4e 100644
--- a/apps/desktop/src/components/document/DocumentBrowser.vue
+++ b/apps/desktop/src/components/document/DocumentBrowser.vue
@@ -14,6 +14,7 @@ import DataGrid from "@/components/grid/DataGrid.vue";
 import QueryLoadingState from "@/components/common/QueryLoadingState.vue";
 import * as api from "@/lib/api";
 import { clampSearchSplitWidth } from "@/lib/dataGridSearchSplit";
+import { documentViewerFontStyle } from "@/lib/documentViewerFontStyle";
 import { buildDocumentFilterCondition, combineDocumentFilterConditions, currentDocumentFilterJson, defaultDocumentFilterRule, documentFilterModeNeedsValue, documentFilterModeOptions, documentStoreProviderFor, type DocumentFilterMode, type DocumentFilterRule } from "@/lib/documentStoreProvider";
 import { normalizeResultPageSize } from "@/lib/paginationPageSize";
 import { useSettingsStore } from "@/stores/settingsStore";
@@ -73,6 +74,7 @@ const tableFindPaneStyle = computed(() => {
   if (tableFindPaneWidth.value == null) return {};
   return { flex: `0 0 ${tableFindPaneWidth.value}px` };
 });
+const documentFontStyle = computed(() => documentViewerFontStyle(settingsStore.editorSettings));
 const documentStoreLabels = computed(() => ({
   documentsLabel: documentStoreProvider.value.documentsLabel({ total: total.value, t }),
   queryPreview: documentQueryPreview.value,
@@ -1108,7 +1110,7 @@ function resetTableSearchSplitWidth() {
             </div>
 
             <div v-if="isEditing" class="flex-1 overflow-auto bg-muted/10">
-              <div class="json-edit min-w-fit p-5 font-mono text-[13px] leading-6" :style="{ '--mongo-key-width': editKeyWidth }">
+              <div class="json-edit min-w-fit p-5" :style="{ ...documentFontStyle, '--mongo-key-width': editKeyWidth }">
                 <div class="json-edit-brace">{</div>
 
                 <JsonEditNode v-for="(field, idx) in editFields" :key="field.key" :node="field" parent-kind="root" :removable="!field.readonlyValue" @remove="requestRemoveField(idx)" />
@@ -1120,7 +1122,7 @@ function resetTableSearchSplitWidth() {
             </div>
 
             <div v-else class="flex-1 overflow-auto bg-muted/10">
-              <pre class="json-viewer min-w-fit p-5 font-mono text-[13px] leading-6" v-html="highlightedJson(editJson)" />
+              <pre class="json-viewer min-w-fit p-5" :style="documentFontStyle" v-html="highlightedJson(editJson)" />
             </div>
           </template>
           <div v-else class="h-full flex items-center justify-center text-muted-foreground text-sm">
@@ -1137,12 +1139,18 @@ function resetTableSearchSplitWidth() {
 
 <style scoped>
 .json-viewer {
+  font-family: var(--dbx-editor-font-family);
+  font-size: var(--dbx-editor-font-size);
+  line-height: 1.6;
   tab-size: 2;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
 .json-edit {
+  font-family: var(--dbx-editor-font-family);
+  font-size: var(--dbx-editor-font-size);
+  line-height: 1.6;
   tab-size: 2;
   color: var(--foreground);
   white-space: pre-wrap;
diff --git a/apps/desktop/src/lib/documentViewerFontStyle.ts b/apps/desktop/src/lib/documentViewerFontStyle.ts
new file mode 100644
index 0000000000..fb09333bf0
--- /dev/null
+++ b/apps/desktop/src/lib/documentViewerFontStyle.ts
@@ -0,0 +1,11 @@
+import { EDITOR_FONT_FAMILY_CSS_VAR, EDITOR_FONT_SIZE_CSS_VAR } from "@/lib/editorThemes";
+import type { EditorSettings } from "@/stores/settingsStore";
+
+export type DocumentViewerFontSettings = Pick<EditorSettings, "fontFamily" | "fontSize">;
+
+export function documentViewerFontStyle(settings: DocumentViewerFontSettings): Record<string, string> {
+  return {
+    [EDITOR_FONT_FAMILY_CSS_VAR]: settings.fontFamily,
+    [EDITOR_FONT_SIZE_CSS_VAR]: `${settings.fontSize}px`,
+  };
+}
diff --git a/packages/app-tests/documentViewerFontStyle.test.ts b/packages/app-tests/documentViewerFontStyle.test.ts
new file mode 100644
index 0000000000..dcb180214e
--- /dev/null
+++ b/packages/app-tests/documentViewerFontStyle.test.ts
@@ -0,0 +1,17 @@
+import { strict as assert } from "node:assert";
+import { test } from "vitest";
+import { EDITOR_FONT_FAMILY_CSS_VAR, EDITOR_FONT_SIZE_CSS_VAR } from "../../apps/desktop/src/lib/editorThemes.ts";
+import { documentViewerFontStyle } from "../../apps/desktop/src/lib/documentViewerFontStyle.ts";
+
+test("document viewer font style follows editor font settings", () => {
+  assert.deepEqual(
+    documentViewerFontStyle({
+      fontFamily: "'Cascadia Code', monospace",
+      fontSize: 16,
+    }),
+    {
+      [EDITOR_FONT_FAMILY_CSS_VAR]: "'Cascadia Code', monospace",
+      [EDITOR_FONT_SIZE_CSS_VAR]: "16px",
+    },
+  );
+});