fix: 修复编辑器字体大小保存失效的问题
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user