添加了postsPanel作为通用帖子显示板,增加了对jest测试的配置,添加了论坛主页,设定了论坛全局框架,设定了论坛基础主题色及主题切换、字号切换逻辑
Change-Id: I9fad0cf577088adb00c9850d405ccd23e6072413
diff --git a/src/store/settingReducer.ts b/src/store/settingReducer.ts
new file mode 100644
index 0000000..ef519b2
--- /dev/null
+++ b/src/store/settingReducer.ts
@@ -0,0 +1,50 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+interface SettingState {
+ theme: string;
+ fontSize: string;
+ showSearch: boolean;
+}
+
+const initialState: SettingState = {
+ theme: localStorage.getItem("theme") || "light",
+ fontSize: localStorage.getItem("font") || "medium",
+ showSearch: false,
+};
+
+const fontSizeMap: Record<string, string> = {
+ small: "12px",
+ medium: "16px",
+ large: "20px",
+};
+document.body.className = initialState.theme; // 设置初始主题
+document.documentElement.style.fontSize = fontSizeMap[initialState.fontSize];
+export const settingSlice = createSlice({
+ name:"setting",
+ initialState,
+ reducers:{
+ toggleSearch: (state) => {
+ state.showSearch = !state.showSearch;
+ },
+ toggleFontSize: (state) => {
+ state.fontSize =
+ state.fontSize === "small"
+ ? "medium"
+ : state.fontSize === "medium"
+ ? "large"
+ : "small";
+ document.documentElement.style.fontSize = fontSizeMap[state.fontSize]; // 切换字体大小
+ localStorage.setItem("font", state.fontSize); // 保存到 localStorage
+ },
+ toggleTheme: (state) => {
+ const nextTheme = state.theme === "light" ? "dark" : "light";
+ state.theme = nextTheme;
+ document.body.className = nextTheme; // 切换 body 类名用于全局主题
+ localStorage.setItem("theme", nextTheme); // 保存到 localStorage
+ console.log("theme:", nextTheme)
+ },
+ },
+})
+
+export default settingSlice.reducer;
+export const { toggleSearch, toggleFontSize, toggleTheme } = settingSlice.actions;
\ No newline at end of file