fix: 修复编辑器字体大小保存失效的问题

This commit is contained in:
Baobhan Sith
2025-05-24 00:19:50 +08:00
parent 5f7c757249
commit 0f17d51441
3 changed files with 76 additions and 26 deletions
@@ -18,7 +18,7 @@ const sessionStore = useSessionStore(); // +++ 实例化会话 Store +++
const settingsStore = useSettingsStore(); // +++ 实例化设置 Store +++ const settingsStore = useSettingsStore(); // +++ 实例化设置 Store +++
const appearanceStore = useAppearanceStore(); // +++ 实例化外观 Store +++ const appearanceStore = useAppearanceStore(); // +++ 实例化外观 Store +++
const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); // +++ 获取共享设置 +++ const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); // +++ 获取共享设置 +++
const { currentEditorFontFamily } = storeToRefs(appearanceStore); // +++ 获取编辑器字体家族设置 +++ const { currentEditorFontFamily, currentEditorFontSize } = storeToRefs(appearanceStore);
// --- Props --- // --- Props ---
const props = defineProps({ const props = defineProps({
@@ -214,6 +214,11 @@ const handleEditorScroll = ({ scrollTop, scrollLeft }: { scrollTop: number; scro
} }
}; };
// +++ 处理编辑器字体大小更新事件 +++
const handleEditorFontSizeUpdate = (newSize: number) => {
appearanceStore.setEditorFontSize(newSize);
};
// 注意:关闭/最小化按钮现在应该在 WorkspaceView 控制 Pane,而不是这里 // 注意:关闭/最小化按钮现在应该在 WorkspaceView 控制 Pane,而不是这里
// const handleCloseContainer = () => { ... }; // const handleCloseContainer = () => { ... };
@@ -350,9 +355,11 @@ const handleKeyDown = (event: KeyboardEvent) => {
v-model="localEditorContent" v-model="localEditorContent"
:language="currentTabLanguage" :language="currentTabLanguage"
:font-family="currentEditorFontFamily" :font-family="currentEditorFontFamily"
:font-size="currentEditorFontSize"
theme="vs-dark" theme="vs-dark"
class="editor-instance" class="editor-instance"
@request-save="handleSaveRequest" @request-save="handleSaveRequest"
@update:fontSize="handleEditorFontSizeUpdate"
:initialScrollTop="activeTab?.scrollTop ?? 0" :initialScrollTop="activeTab?.scrollTop ?? 0"
:initialScrollLeft="activeTab?.scrollLeft ?? 0" :initialScrollLeft="activeTab?.scrollLeft ?? 0"
@update:scrollPosition="handleEditorScroll" @update:scrollPosition="handleEditorScroll"
@@ -7,12 +7,14 @@ import FileEditorTabs from './FileEditorTabs.vue';
import { useFileEditorStore, type FileTab } from '../stores/fileEditor.store'; import { useFileEditorStore, type FileTab } from '../stores/fileEditor.store';
import { useSettingsStore } from '../stores/settings.store'; import { useSettingsStore } from '../stores/settings.store';
import { useSessionStore } from '../stores/session.store'; import { useSessionStore } from '../stores/session.store';
import { useAppearanceStore } from '../stores/appearance.store';
const { t } = useI18n(); const { t } = useI18n();
const fileEditorStore = useFileEditorStore(); const fileEditorStore = useFileEditorStore();
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const sessionStore = useSessionStore(); const sessionStore = useSessionStore();
const appearanceStore = useAppearanceStore();
// --- 本地状态控制弹窗显示 --- // --- 本地状态控制弹窗显示 ---
const isVisible = ref(false); const isVisible = ref(false);
@@ -34,6 +36,9 @@ const {
// 设置 Store (用于判断模式) // 设置 Store (用于判断模式)
const { showPopupFileEditorBoolean, shareFileEditorTabsBoolean } = storeToRefs(settingsStore); const { showPopupFileEditorBoolean, shareFileEditorTabsBoolean } = storeToRefs(settingsStore);
// 从 Appearance Store 获取编辑器字体大小
const { currentEditorFontSize } = storeToRefs(appearanceStore);
// --- 从 Store 获取方法 --- // --- 从 Store 获取方法 ---
// 全局 Store Actions (用于共享模式) // 全局 Store Actions (用于共享模式)
const { const {
@@ -412,6 +417,11 @@ const handleEditorScroll = ({ scrollTop, scrollLeft }: { scrollTop: number; scro
} }
}; };
// +++ 处理编辑器字体大小更新事件 +++
const handleEditorFontSizeUpdate = (newSize: number) => {
appearanceStore.setEditorFontSize(newSize);
};
// 关闭弹窗 (保持不变) // 关闭弹窗 (保持不变)
const handleCloseContainer = () => { const handleCloseContainer = () => {
// 关闭前不再检查本地修改状态,因为没有本地状态了 // 关闭前不再检查本地修改状态,因为没有本地状态了
@@ -572,7 +582,9 @@ onBeforeUnmount(() => {
:language="currentTabLanguage" :language="currentTabLanguage"
theme="vs-dark" theme="vs-dark"
class="editor-instance" class="editor-instance"
:font-size="currentEditorFontSize"
@request-save="handleSaveRequest" @request-save="handleSaveRequest"
@update:fontSize="handleEditorFontSizeUpdate"
:initialScrollTop="activeTab?.scrollTop ?? 0" :initialScrollTop="activeTab?.scrollTop ?? 0"
:initialScrollLeft="activeTab?.scrollLeft ?? 0" :initialScrollLeft="activeTab?.scrollLeft ?? 0"
@update:scrollPosition="handleEditorScroll" @update:scrollPosition="handleEditorScroll"
@@ -3,10 +3,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, defineExpose } from 'vue'; import { ref, onMounted, onBeforeUnmount, watch, defineExpose, defineProps, defineEmits } from 'vue';
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
const localFontSize = ref(14); // 本地字体大小状态,默认 14 const FONT_SIZE_STORAGE_KEY = 'monacoEditorFontSize'; // localStorage key
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@@ -29,6 +29,10 @@ const props = defineProps({
type: String, type: String,
default: 'Consolas, "Courier New", monospace', default: 'Consolas, "Courier New", monospace',
}, },
fontSize: { // 新增 prop
type: Number,
default: 14, // 默认字体大小
},
initialScrollTop: { initialScrollTop: {
type: Number, type: Number,
default: 0, default: 0,
@@ -39,20 +43,40 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition']); const emit = defineEmits(['update:modelValue', 'request-save', 'update:scrollPosition', 'update:fontSize']); // 添加 'update:fontSize'
const editorContainer = ref<HTMLElement | null>(null); const editorContainer = ref<HTMLElement | null>(null);
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null; let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
// 用于驱动编辑器实例的 ref,并与 localStorage 和 props.fontSize 同步
const internalEditorFontSize = ref(props.fontSize);
onMounted(() => { onMounted(() => {
// 优先使用 props.fontSize 初始化 internalEditorFontSize
internalEditorFontSize.value = props.fontSize;
// 检查 localStorage 中是否有用户通过滚轮操作留下的偏好
const storedUserPreference = localStorage.getItem(FONT_SIZE_STORAGE_KEY);
if (storedUserPreference) {
const parsedSize = parseInt(storedUserPreference, 10);
if (!isNaN(parsedSize) && parsedSize >= 8 && parsedSize <= 40) {
// 如果 localStorage 的值与当前的 internalEditorFontSize (来自 prop) 不同,
// 表明用户可能通过滚轮调整过,此时以 localStorage 为准,并通知更新全局状态
if (parsedSize !== internalEditorFontSize.value) {
emit('update:fontSize', parsedSize);
}
internalEditorFontSize.value = parsedSize;
}
}
if (editorContainer.value) { if (editorContainer.value) {
editorInstance = monaco.editor.create(editorContainer.value, { editorInstance = monaco.editor.create(editorContainer.value, {
value: props.modelValue, value: props.modelValue,
language: props.language, language: props.language,
theme: props.theme, theme: props.theme,
fontSize: localFontSize.value, fontSize: internalEditorFontSize.value, // 使用 internalEditorFontSize
fontFamily: props.fontFamily, // 使用 prop 的字体家族 fontFamily: props.fontFamily, // 使用 prop 的字体家族
automaticLayout: true, automaticLayout: true,
readOnly: props.readOnly, readOnly: props.readOnly,
@@ -140,34 +164,32 @@ onMounted(() => {
// --- 添加带防抖的鼠标滚轮缩放功能 --- // --- 添加带防抖的鼠标滚轮缩放功能 ---
const editorDomNode = editorInstance?.getDomNode(); const editorDomNode = editorInstance?.getDomNode();
if (editorDomNode) { if (editorDomNode && editorInstance) {
console.log('[MonacoEditor] Adding wheel event listener with debounce.'); // console.log('[MonacoEditor] Adding wheel event listener.');
editorDomNode.addEventListener('wheel', (event: WheelEvent) => { editorDomNode.addEventListener('wheel', (event: WheelEvent) => {
if (event.ctrlKey) { if (event.ctrlKey && editorInstance) {
event.preventDefault(); event.preventDefault();
const currentSizeOpt = editorInstance.getOption(monaco.editor.EditorOption.fontSize);
const currentSize = typeof currentSizeOpt === 'number' ? currentSizeOpt : internalEditorFontSize.value;
const currentSize = localFontSize.value; // 使用本地状态
let newSize: number; let newSize: number;
if (event.deltaY < 0) { if (event.deltaY < 0) {
newSize = Math.min(currentSize + 1, 40); newSize = Math.min(currentSize + 1, 40); // 字体上限 40
} else { } else {
newSize = Math.max(currentSize - 1, 8); newSize = Math.max(currentSize - 1, 8); // 字体下限 8
} }
// Update visual font size and local state immediately if (newSize !== currentSize) {
if (editorInstance && newSize !== currentSize) { // console.log(`[MonacoEditor] Updating font size to: ${newSize}`);
console.log(`[MonacoEditor] Updating local font size to: ${newSize}`); editorInstance.updateOptions({ fontSize: newSize });
localFontSize.value = newSize; // 更新本地状态 localStorage.setItem(FONT_SIZE_STORAGE_KEY, newSize.toString());
editorInstance.updateOptions({ fontSize: newSize }); // 更新编辑器视觉效果 internalEditorFontSize.value = newSize; // 更新 internal ref
emit('update:fontSize', newSize); // 发出事件以更新 store
// --- 移除触发防抖保存的逻辑 ---
// debouncedSetEditorFontSize(newSize);
} }
} }
}, { passive: false }); }, { passive: false });
} else { } else {
console.error('[MonacoEditor] editorDomNode is null, cannot add wheel listener.'); // console.error('[MonacoEditor] editorDomNode or editorInstance is null, cannot add wheel listener.');
} }
@@ -219,11 +241,20 @@ watch(() => props.readOnly, (newReadOnly) => {
watch(() => props.fontFamily, (newFontFamily) => { watch(() => props.fontFamily, (newFontFamily) => {
if (editorInstance) { if (editorInstance) {
editorInstance.updateOptions({ fontFamily: newFontFamily }); editorInstance.updateOptions({ fontFamily: newFontFamily });
};
});
// 监听来自父组件 (全局设置) 的 fontSize 变化
watch(() => props.fontSize, (newGlobalSize) => {
// 只有当全局设置的 fontSize (通过 prop) 改变时,并且与 internalEditorFontSize (编辑器当前实际或本地调整后) 不同时才更新
if (editorInstance && newGlobalSize !== internalEditorFontSize.value) {
// console.log(`[MonacoEditor] Global font size changed to: ${newGlobalSize}, updating editor.`);
editorInstance.updateOptions({ fontSize: newGlobalSize });
localStorage.setItem(FONT_SIZE_STORAGE_KEY, newGlobalSize.toString()); // 保持 localStorage 同步
internalEditorFontSize.value = newGlobalSize;
} }
}); });
// --- 移除对全局字体大小的监听 ---
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (editorInstance) { if (editorInstance) {
editorInstance.dispose(); editorInstance.dispose();