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

✨ Added tab type selection

Browse Source
This commit is contained in:
landaiqing
2025-04-25 00:03:06 +08:00
parent 8673b36f98
commit 3483ac4cf6
5 changed files with 54 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/toolbar/index.vue
View File

@@ -26,7 +26,10 @@ const editorStore = useEditorStore();
<input type="checkbox" :checked="editorStore.enableTabIndent" @change="editorStore.toggleTabIndent"/>
<span>Tab</span>
</label>
<span class="tab-size" title="Tab大小">
<span class="tab-type" title="Tab类型切换" @click="editorStore.toggleTabType">
{{ editorStore.tabType === 'spaces' ? '空格' : '制表符' }}
</span>
<span class="tab-size" title="Tab大小" v-if="editorStore.tabType === 'spaces'">
<button class="tab-btn" @click="editorStore.decreaseTabSize" :disabled="editorStore.tabSize <= 2">-</button>
<span>{{ editorStore.tabSize }}</span>
<button class="tab-btn" @click="editorStore.increaseTabSize" :disabled="editorStore.tabSize >= 8">+</button>
@@ -98,6 +101,17 @@ const editorStore = useEditorStore();
cursor: pointer;
}
}
.tab-type {
cursor: pointer;
padding: 0 3px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.05);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.tab-size {
display: flex;