🎨 Refactor code structure
This commit is contained in:
106
frontend/src/stores/configStore.ts
Normal file
106
frontend/src/stores/configStore.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { EditorConfig, TabType } from '@/types/config';
|
||||
|
||||
// 字体大小范围
|
||||
const MIN_FONT_SIZE = 12;
|
||||
const MAX_FONT_SIZE = 28;
|
||||
const DEFAULT_FONT_SIZE = 13;
|
||||
|
||||
// Tab设置
|
||||
const DEFAULT_TAB_SIZE = 4;
|
||||
const MIN_TAB_SIZE = 2;
|
||||
const MAX_TAB_SIZE = 8;
|
||||
|
||||
export const useConfigStore = defineStore('config', () => {
|
||||
// 配置状态
|
||||
const config = ref<EditorConfig>({
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
encoding: 'UTF-8',
|
||||
enableTabIndent: true,
|
||||
tabSize: DEFAULT_TAB_SIZE,
|
||||
tabType: 'spaces'
|
||||
});
|
||||
|
||||
// 字体缩放
|
||||
function increaseFontSize() {
|
||||
if (config.value.fontSize < MAX_FONT_SIZE) {
|
||||
config.value.fontSize += 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 字体缩小
|
||||
function decreaseFontSize() {
|
||||
if (config.value.fontSize > MIN_FONT_SIZE) {
|
||||
config.value.fontSize -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置字体大小
|
||||
function resetFontSize() {
|
||||
config.value.fontSize = DEFAULT_FONT_SIZE;
|
||||
}
|
||||
|
||||
// 设置编码
|
||||
function setEncoding(newEncoding: string) {
|
||||
config.value.encoding = newEncoding;
|
||||
}
|
||||
|
||||
// Tab相关方法
|
||||
function toggleTabIndent() {
|
||||
config.value.enableTabIndent = !config.value.enableTabIndent;
|
||||
}
|
||||
|
||||
// 增加Tab大小
|
||||
function increaseTabSize() {
|
||||
if (config.value.tabSize < MAX_TAB_SIZE) {
|
||||
config.value.tabSize += 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 减少Tab大小
|
||||
function decreaseTabSize() {
|
||||
if (config.value.tabSize > MIN_TAB_SIZE) {
|
||||
config.value.tabSize -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换Tab类型（空格或制表符）
|
||||
function toggleTabType() {
|
||||
config.value.tabType = config.value.tabType === 'spaces' ? 'tab' : 'spaces';
|
||||
}
|
||||
|
||||
// 设置按钮操作
|
||||
function openSettings() {
|
||||
console.log('打开设置面板');
|
||||
// 此处可以实现设置面板的逻辑
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
config,
|
||||
|
||||
// 常量
|
||||
MIN_FONT_SIZE,
|
||||
MAX_FONT_SIZE,
|
||||
DEFAULT_FONT_SIZE,
|
||||
MIN_TAB_SIZE,
|
||||
MAX_TAB_SIZE,
|
||||
|
||||
// 方法
|
||||
setEncoding,
|
||||
openSettings,
|
||||
increaseFontSize,
|
||||
decreaseFontSize,
|
||||
resetFontSize,
|
||||
toggleTabIndent,
|
||||
increaseTabSize,
|
||||
decreaseTabSize,
|
||||
toggleTabType
|
||||
};
|
||||
}, {
|
||||
persist: {
|
||||
key: 'editor-config',
|
||||
storage: localStorage
|
||||
}
|
||||
});
|
||||
@@ -1,143 +0,0 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import {ref} from 'vue';
|
||||
import {DocumentStats} from '@/types/editor';
|
||||
import {EditorView} from '@codemirror/view';
|
||||
|
||||
// 字体大小范围
|
||||
const MIN_FONT_SIZE = 12;
|
||||
const MAX_FONT_SIZE = 28;
|
||||
const DEFAULT_FONT_SIZE = 13;
|
||||
|
||||
// Tab设置
|
||||
const DEFAULT_TAB_SIZE = 4;
|
||||
const MIN_TAB_SIZE = 2;
|
||||
const MAX_TAB_SIZE = 8;
|
||||
|
||||
// Tab类型
|
||||
export type TabType = 'spaces' | 'tab';
|
||||
|
||||
export const useEditorStore = defineStore('editor', () => {
|
||||
// 状态
|
||||
const documentStats = ref<DocumentStats>({
|
||||
lines: 0,
|
||||
characters: 0,
|
||||
selectedCharacters: 0
|
||||
});
|
||||
// 编码
|
||||
const encoding = ref('UTF-8');
|
||||
// 编辑器视图
|
||||
const editorView = ref<EditorView | null>(null);
|
||||
// 字体大小
|
||||
const fontSize = ref(DEFAULT_FONT_SIZE);
|
||||
// Tab键设置
|
||||
const enableTabIndent = ref(true);
|
||||
// Tab键大小
|
||||
const tabSize = ref(DEFAULT_TAB_SIZE);
|
||||
// Tab类型：空格或制表符
|
||||
const tabType = ref<TabType>('spaces');
|
||||
|
||||
// 方法
|
||||
function setEditorView(view: EditorView | null) {
|
||||
editorView.value = view;
|
||||
}
|
||||
|
||||
// 更新文档统计信息
|
||||
function updateDocumentStats(stats: DocumentStats) {
|
||||
documentStats.value = stats;
|
||||
}
|
||||
|
||||
// 设置编码
|
||||
function setEncoding(newEncoding: string) {
|
||||
encoding.value = newEncoding;
|
||||
}
|
||||
|
||||
// 字体缩放
|
||||
function increaseFontSize() {
|
||||
if (fontSize.value < MAX_FONT_SIZE) {
|
||||
fontSize.value += 1;
|
||||
applyFontSize();
|
||||
}
|
||||
}
|
||||
|
||||
// 字体缩放
|
||||
function decreaseFontSize() {
|
||||
if (fontSize.value > MIN_FONT_SIZE) {
|
||||
fontSize.value -= 1;
|
||||
applyFontSize();
|
||||
}
|
||||
}
|
||||
|
||||
// 重置字体大小
|
||||
function resetFontSize() {
|
||||
fontSize.value = DEFAULT_FONT_SIZE;
|
||||
applyFontSize();
|
||||
}
|
||||
|
||||
// 应用字体大小
|
||||
function applyFontSize() {
|
||||
if (!editorView.value) return;
|
||||
// 更新编辑器的字体大小
|
||||
const editorDOM = editorView.value.dom;
|
||||
if (editorDOM) {
|
||||
editorDOM.style.fontSize = `${fontSize.value}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab相关方法
|
||||
function toggleTabIndent() {
|
||||
enableTabIndent.value = !enableTabIndent.value;
|
||||
}
|
||||
// 增加Tab大小
|
||||
function increaseTabSize() {
|
||||
if (tabSize.value < MAX_TAB_SIZE) {
|
||||
tabSize.value += 1;
|
||||
}
|
||||
}
|
||||
// 减少Tab大小
|
||||
function decreaseTabSize() {
|
||||
if (tabSize.value > MIN_TAB_SIZE) {
|
||||
tabSize.value -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换Tab类型（空格或制表符）
|
||||
function toggleTabType() {
|
||||
tabType.value = tabType.value === 'spaces' ? 'tab' : 'spaces';
|
||||
}
|
||||
|
||||
// 设置按钮操作
|
||||
function openSettings() {
|
||||
console.log('打开设置面板');
|
||||
// 此处可以实现设置面板的逻辑
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
documentStats,
|
||||
encoding,
|
||||
editorView,
|
||||
fontSize,
|
||||
enableTabIndent,
|
||||
tabSize,
|
||||
tabType,
|
||||
|
||||
// 方法
|
||||
setEditorView,
|
||||
updateDocumentStats,
|
||||
setEncoding,
|
||||
openSettings,
|
||||
increaseFontSize,
|
||||
decreaseFontSize,
|
||||
resetFontSize,
|
||||
toggleTabIndent,
|
||||
increaseTabSize,
|
||||
decreaseTabSize,
|
||||
toggleTabType
|
||||
};
|
||||
}, {
|
||||
persist: {
|
||||
key: 'editor',
|
||||
storage: localStorage,
|
||||
pick: ['fontSize', 'encoding', 'enableTabIndent', 'tabSize', 'tabType']
|
||||
}
|
||||
});
|
||||
53
frontend/src/stores/editorStore.ts
Normal file
53
frontend/src/stores/editorStore.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import {ref} from 'vue';
|
||||
import {DocumentStats} from '@/types/editor';
|
||||
import {EditorView} from '@codemirror/view';
|
||||
import {useConfigStore} from './configStore';
|
||||
|
||||
export const useEditorStore = defineStore('editor', () => {
|
||||
// 引用配置store
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 状态
|
||||
const documentStats = ref<DocumentStats>({
|
||||
lines: 0,
|
||||
characters: 0,
|
||||
selectedCharacters: 0
|
||||
});
|
||||
// 编辑器视图
|
||||
const editorView = ref<EditorView | null>(null);
|
||||
|
||||
// 方法
|
||||
function setEditorView(view: EditorView | null) {
|
||||
editorView.value = view;
|
||||
}
|
||||
|
||||
// 更新文档统计信息
|
||||
function updateDocumentStats(stats: DocumentStats) {
|
||||
documentStats.value = stats;
|
||||
}
|
||||
|
||||
// 应用字体大小
|
||||
function applyFontSize() {
|
||||
if (!editorView.value) return;
|
||||
// 更新编辑器的字体大小
|
||||
const editorDOM = editorView.value.dom;
|
||||
if (editorDOM) {
|
||||
editorDOM.style.fontSize = `${configStore.config.fontSize}px`;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
documentStats,
|
||||
editorView,
|
||||
|
||||
// 配置引用
|
||||
config: configStore.config,
|
||||
|
||||
// 方法
|
||||
setEditorView,
|
||||
updateDocumentStats,
|
||||
applyFontSize
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user