feat: fix the problem in the Operator Market frontend pages

frontend/src/store/hooks.ts

@@ -1,6 +1,6 @@
-import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
-import type { RootState, AppDispatch } from './index';
-
-// 类型化的 hooks
-export const useAppDispatch = () => useDispatch<AppDispatch>();
+import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './index';
+
+// 类型化的 hooks
+export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/store/index.ts

@@ -1,15 +1,15 @@
-import { configureStore } from "@reduxjs/toolkit";
-import authSlice from "./slices/authSlice";
-import settingsSlice from "./slices/settingsSlice";
-
-// 创建 Store
-export const store = configureStore({
-  reducer: {
-    auth: authSlice,
-    settings: settingsSlice,
-  },
-});
-
-// 导出类型
-export type RootState = ReturnType<typeof store.getState>;
+import { configureStore } from "@reduxjs/toolkit";
+import authSlice from "./slices/authSlice";
+import settingsSlice from "./slices/settingsSlice";
+
+// 创建 Store
+export const store = configureStore({
+  reducer: {
+    auth: authSlice,
+    settings: settingsSlice,
+  },
+});
+
+// 导出类型
+export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

frontend/src/store/slices/authSlice.ts

@@ -1,75 +1,75 @@
-// store/slices/authSlice.js
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-
-// 异步 thunk
-export const loginUser = createAsyncThunk(
-  'auth/login',
-  async (credentials, { rejectWithValue }) => {
-    try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(credentials),
-      });
-
-      if (!response.ok) {
-        throw new Error('Login failed');
-      }
-
-      const data = await response.json();
-      return data;
-    } catch (error) {
-      return rejectWithValue(error.message);
-    }
-  }
-);
-
-const authSlice = createSlice({
-  name: 'auth',
-  initialState: {
-    user: null,
-    token: localStorage.getItem('token'),
-    isAuthenticated: false,
-    loading: false,
-    error: null,
-  },
-  reducers: {
-    logout: (state) => {
-      state.user = null;
-      state.token = null;
-      state.isAuthenticated = false;
-      localStorage.removeItem('token');
-    },
-    clearError: (state) => {
-      state.error = null;
-    },
-    setToken: (state, action) => {
-      state.token = action.payload;
-      localStorage.setItem('token', action.payload);
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(loginUser.pending, (state) => {
-        state.loading = true;
-        state.error = null;
-      })
-      .addCase(loginUser.fulfilled, (state, action) => {
-        state.loading = false;
-        state.user = action.payload.user;
-        state.token = action.payload.token;
-        state.isAuthenticated = true;
-        localStorage.setItem('token', action.payload.token);
-      })
-      .addCase(loginUser.rejected, (state, action) => {
-        state.loading = false;
-        state.error = action.payload;
-        state.isAuthenticated = false;
-      });
-  },
-});
-
-export const { logout, clearError, setToken } = authSlice.actions;
+// store/slices/authSlice.js
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+// 异步 thunk
+export const loginUser = createAsyncThunk(
+  'auth/login',
+  async (credentials, { rejectWithValue }) => {
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(credentials),
+      });
+
+      if (!response.ok) {
+        throw new Error('Login failed');
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: {
+    user: null,
+    token: localStorage.getItem('token'),
+    isAuthenticated: false,
+    loading: false,
+    error: null,
+  },
+  reducers: {
+    logout: (state) => {
+      state.user = null;
+      state.token = null;
+      state.isAuthenticated = false;
+      localStorage.removeItem('token');
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    setToken: (state, action) => {
+      state.token = action.payload;
+      localStorage.setItem('token', action.payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(loginUser.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(loginUser.fulfilled, (state, action) => {
+        state.loading = false;
+        state.user = action.payload.user;
+        state.token = action.payload.token;
+        state.isAuthenticated = true;
+        localStorage.setItem('token', action.payload.token);
+      })
+      .addCase(loginUser.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload;
+        state.isAuthenticated = false;
+      });
+  },
+});
+
+export const { logout, clearError, setToken } = authSlice.actions;
 export default authSlice.reducer;

frontend/src/store/slices/settingsSlice.ts

@@ -1,23 +1,23 @@
-// Settings Slice
-import { createSlice } from '@reduxjs/toolkit';
-
-const settingsSlice = createSlice({
-  name: "settings",
-  initialState: {
-    visible: false,
-  },
-  reducers: {
-    showSettings: (state) => {
-      state.visible = true;
-    },
-    hideSettings: (state) => {
-      state.visible = false;
-    },
-    toggleSettings: (state) => {
-      state.visible = !state.visible;
-    },
-  },
-});
-
-export const { showSettings, hideSettings, toggleSettings } = settingsSlice.actions;
-export default settingsSlice.reducer;
+// Settings Slice
+import { createSlice } from '@reduxjs/toolkit';
+
+const settingsSlice = createSlice({
+  name: "settings",
+  initialState: {
+    visible: false,
+  },
+  reducers: {
+    showSettings: (state) => {
+      state.visible = true;
+    },
+    hideSettings: (state) => {
+      state.visible = false;
+    },
+    toggleSettings: (state) => {
+      state.visible = !state.visible;
+    },
+  },
+});
+
+export const { showSettings, hideSettings, toggleSettings } = settingsSlice.actions;
+export default settingsSlice.reducer;