landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

🎨 Change configuration structure

Browse Source
This commit is contained in:
landaiqing
2025-06-03 00:19:16 +08:00
parent 77bd15bed7
commit 81868e8d37
12 changed files with 525 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/views/editor/Editor.vue
View File

@@ -53,17 +53,17 @@ const createEditor = async () => {
// 获取Tab相关扩展
const tabExtensions = getTabExtensions(
configStore.config.tabSize,
configStore.config.enableTabIndent,
configStore.config.tabType
configStore.config.editing.tabSize,
configStore.config.editing.enableTabIndent,
configStore.config.editing.tabType
);
// 创建字体扩展
const fontExtension = createFontExtensionFromBackend({
fontFamily: configStore.config.fontFamily,
fontSize: configStore.config.fontSize,
lineHeight: configStore.config.lineHeight,
fontWeight: configStore.config.fontWeight
fontFamily: configStore.config.editing.fontFamily,
fontSize: configStore.config.editing.fontSize,
lineHeight: configStore.config.editing.lineHeight,
fontWeight: configStore.config.editing.fontWeight
});
// 创建统计信息更新扩展
@@ -148,9 +148,9 @@ const reconfigureTabSettings = () => {
if (!editorStore.editorView) return;
updateTabConfig(
editorStore.editorView as EditorView,
configStore.config.tabSize,
configStore.config.enableTabIndent,
configStore.config.tabType
configStore.config.editing.tabSize,
configStore.config.editing.enableTabIndent,
configStore.config.editing.tabType
);
};
@@ -158,33 +158,33 @@ const reconfigureTabSettings = () => {
const reconfigureFontSettings = () => {
if (!editorStore.editorView) return;
updateFontConfig(editorStore.editorView as EditorView, {
fontFamily: configStore.config.fontFamily,
fontSize: configStore.config.fontSize,
lineHeight: configStore.config.lineHeight,
fontWeight: configStore.config.fontWeight
fontFamily: configStore.config.editing.fontFamily,
fontSize: configStore.config.editing.fontSize,
lineHeight: configStore.config.editing.lineHeight,
fontWeight: configStore.config.editing.fontWeight
});
};
// 监听Tab设置变化
watch(() => configStore.config.tabSize, reconfigureTabSettings);
watch(() => configStore.config.enableTabIndent, reconfigureTabSettings);
watch(() => configStore.config.tabType, reconfigureTabSettings);
watch([
() => configStore.config.editing.tabSize,
() => configStore.config.editing.enableTabIndent,
() => configStore.config.editing.tabType,
], () => {
reconfigureTabSettings();
});
// 监听字体大小变化
watch(() => configStore.config.fontSize, () => {
watch([
() => configStore.config.editing.fontFamily,
() => configStore.config.editing.fontSize,
() => configStore.config.editing.lineHeight,
() => configStore.config.editing.fontWeight,
], () => {
reconfigureFontSettings();
editorStore.applyFontSize();
});
// 监听字体族变化
watch(() => configStore.config.fontFamily, reconfigureFontSettings);
// 监听字体粗细变化
watch(() => configStore.config.fontWeight, reconfigureFontSettings);
// 监听行高变化
watch(() => configStore.config.lineHeight, reconfigureFontSettings);
onMounted(() => {
// 创建编辑器
createEditor();

2
frontend/src/views/settings/pages/AppearancePage.vue
View File

@@ -47,7 +47,7 @@ const selectTheme = (themeId: string) => {
<div class="settings-page">
<SettingSection :title="t('settings.language')">
<SettingItem :title="t('settings.language')" :description="t('settings.restartRequired')">
<select class="select-input" :value="configStore.config.language" @change="updateLanguage">
<select class="select-input" :value="configStore.config.appearance.language" @change="updateLanguage">
<option v-for="option in languageOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>

30
frontend/src/views/settings/pages/EditingPage.vue
View File

@@ -22,7 +22,7 @@ onMounted(async () => {
// 字体选择选项
const fontFamilyOptions = FONT_OPTIONS;
const currentFontFamily = computed(() => configStore.config.fontFamily);
const currentFontFamily = computed(() => configStore.config.editing.fontFamily);
// 字体选择
const handleFontFamilyChange = async (event: Event) => {
@@ -60,7 +60,7 @@ const handleFontWeightChange = async (event: Event) => {
// 行高控制
const increaseLineHeight = async () => {
const newLineHeight = Math.min(3.0, configStore.config.lineHeight + 0.1);
const newLineHeight = Math.min(3.0, configStore.config.editing.lineHeight + 0.1);
await safeCall(
() => configStore.setLineHeight(Math.round(newLineHeight * 10) / 10),
'config.lineHeightIncreaseFailed'
@@ -68,7 +68,7 @@ const increaseLineHeight = async () => {
};
const decreaseLineHeight = async () => {
const newLineHeight = Math.max(1.0, configStore.config.lineHeight - 0.1);
const newLineHeight = Math.max(1.0, configStore.config.editing.lineHeight - 0.1);
await safeCall(
() => configStore.setLineHeight(Math.round(newLineHeight * 10) / 10),
'config.lineHeightDecreaseFailed'
@@ -92,7 +92,7 @@ const decreaseFontSize = async () => {
// Tab类型切换
const tabTypeText = computed(() => {
return configStore.config.tabType === TabType.TabTypeSpaces
return configStore.config.editing.tabType === TabType.TabTypeSpaces
? t('settings.spaces')
: t('settings.tabs');
});
@@ -156,7 +156,7 @@ const handleToggleTabType = async () => {
>
<div class="number-control">
<button @click="decreaseFontSize" class="control-button">-</button>
<span>{{ configStore.config.fontSize }}px</span>
<span>{{ configStore.config.editing.fontSize }}px</span>
<button @click="increaseFontSize" class="control-button">+</button>
</div>
</SettingItem>
@@ -167,7 +167,7 @@ const handleToggleTabType = async () => {
>
<select
class="font-weight-select"
:value="configStore.config.fontWeight"
:value="configStore.config.editing.fontWeight"
@change="handleFontWeightChange"
>
<option
@@ -186,16 +186,16 @@ const handleToggleTabType = async () => {
>
<div class="number-control">
<button @click="decreaseLineHeight" class="control-button">-</button>
<span>{{ configStore.config.lineHeight.toFixed(1) }}</span>
<span>{{ configStore.config.editing.lineHeight.toFixed(1) }}</span>
<button @click="increaseLineHeight" class="control-button">+</button>
</div>
</SettingItem>
<div class="font-preview" :style="{
fontSize: `${configStore.config.fontSize}px`,
fontFamily: configStore.config.fontFamily,
fontWeight: configStore.config.fontWeight,
lineHeight: configStore.config.lineHeight
fontSize: `${configStore.config.editing.fontSize}px`,
fontFamily: configStore.config.editing.fontFamily,
fontWeight: configStore.config.editing.fontWeight,
lineHeight: configStore.config.editing.lineHeight
}">
<div class="preview-label">字体预览</div>
<div class="preview-text">
@@ -210,9 +210,9 @@ const handleToggleTabType = async () => {
<SettingSection :title="t('settings.tabSettings')">
<SettingItem :title="t('settings.tabSize')">
<div class="number-control">
<button @click="decreaseTabSize" class="control-button" :disabled="configStore.config.tabSize <= configStore.tabSize.min">-</button>
<span>{{ configStore.config.tabSize }}</span>
<button @click="increaseTabSize" class="control-button" :disabled="configStore.config.tabSize >= configStore.tabSize.max">+</button>
<button @click="decreaseTabSize" class="control-button" :disabled="configStore.config.editing.tabSize <= configStore.tabSize.min">-</button>
<span>{{ configStore.config.editing.tabSize }}</span>
<button @click="increaseTabSize" class="control-button" :disabled="configStore.config.editing.tabSize >= configStore.tabSize.max">+</button>
</div>
</SettingItem>
@@ -224,7 +224,7 @@ const handleToggleTabType = async () => {
<SettingItem :title="t('settings.enableTabIndent')">
<ToggleSwitch
v-model="configStore.config.enableTabIndent"
v-model="configStore.config.editing.enableTabIndent"
@update:modelValue="handleToggleTabIndent"
/>
</SettingItem>

10
frontend/src/views/settings/pages/GeneralPage.vue
View File

@@ -52,7 +52,7 @@ const resetSettings = async () => {
<div class="settings-page">
<SettingSection :title="t('settings.globalHotkey')">
<SettingItem :title="t('settings.enableGlobalHotkey')">
<ToggleSwitch v-model="configStore.config.alwaysOnTop" /> <!-- 此处使用alwaysOnTop作为示例 -->
<ToggleSwitch v-model="configStore.config.general.alwaysOnTop" /> <!-- 此处使用alwaysOnTop作为示例 -->
</SettingItem>
<div class="hotkey-selector">
@@ -87,19 +87,19 @@ const resetSettings = async () => {
<SettingSection :title="t('settings.window')">
<SettingItem :title="t('settings.showInSystemTray')">
<ToggleSwitch v-model="configStore.config.alwaysOnTop" /> <!-- 需要后端实现 -->
<ToggleSwitch v-model="configStore.config.general.alwaysOnTop" /> <!-- 需要后端实现 -->
</SettingItem>
<SettingItem :title="t('settings.alwaysOnTop')">
<ToggleSwitch v-model="configStore.config.alwaysOnTop" @update:modelValue="configStore.toggleAlwaysOnTop" />
<ToggleSwitch v-model="configStore.config.general.alwaysOnTop" @update:modelValue="configStore.toggleAlwaysOnTop" />
</SettingItem>
</SettingSection>
<SettingSection :title="t('settings.bufferFiles')">
<SettingItem :title="t('settings.useCustomLocation')">
<ToggleSwitch v-model="configStore.config.alwaysOnTop" /> <!-- 需要后端实现 -->
<ToggleSwitch v-model="configStore.config.general.alwaysOnTop" /> <!-- 需要后端实现 -->
</SettingItem>
<div class="directory-selector">
<div class="path-display">{{ configStore.config.alwaysOnTop ? 'C:/Custom/Path' : 'Default Location' }}</div>
<div class="path-display">{{ configStore.config.general.alwaysOnTop ? 'C:/Custom/Path' : 'Default Location' }}</div>
<button class="select-button">{{ t('settings.selectDirectory') }}</button>
</div>
</SettingSection>