feat(store): 重构编辑器配置状态管理并添加持久化支持- 重构 useEditorConfigStore以支持完整的编辑器配置状态管理

- 添加 setConfig 方法以更新配置
- 实现配置的本地存储持久化
- 更新 EditorConfigPanel 组件以使用新的状态管理逻辑
This commit is contained in:
fly6516 2025-05-17 09:49:18 +08:00
parent b36c4af282
commit 96694604ec
2 changed files with 34 additions and 7 deletions

View File

@ -1,19 +1,21 @@
import React from 'react'; "use client"
import { useState } from 'react';
import { useEditorConfigStore } from '@/lib/store'; import { useEditorConfigStore } from '@/lib/store';
export const EditorConfigPanel = () => { export function EditorConfigPanel() {
const { config, updateConfig } = useEditorConfigStore(); const { config, setConfig } = useEditorConfigStore();
const handleFontFamilyChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFontFamilyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
updateConfig({ fontFamily: e.target.value }); setConfig({ fontFamily: e.target.value });
}; };
const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
updateConfig({ fontSize: parseInt(e.target.value) }); setConfig({ fontSize: parseInt(e.target.value) });
}; };
const handleLineHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleLineHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
updateConfig({ lineHeight: parseInt(e.target.value) }); setConfig({ lineHeight: parseInt(e.target.value) });
}; };
const handleReset = () => { const handleReset = () => {

View File

@ -35,3 +35,28 @@ export const useEditorConfigStore = create<EditorConfigState>((set) => {
}), }),
}; };
}); });
export interface EditorConfigState {
config: any;
setConfig: (config: any) => void;
}
export const useEditorConfigStore = create<EditorConfigState>((set) => {
// 从localStorage读取保存的配置
let savedConfig = null;
if (typeof window !== 'undefined') {
savedConfig = localStorage.getItem('editorConfig');
}
const parsedConfig = savedConfig ? JSON.parse(savedConfig) : {};
return {
config: parsedConfig,
setConfig: (config) => {
if (typeof window !== 'undefined') {
localStorage.setItem('editorConfig', JSON.stringify(config));
}
set({ config });
}
};
});