diff --git a/src/api/user.ts b/src/api/user.ts
new file mode 100644
index 0000000..2c5e46c
--- /dev/null
+++ b/src/api/user.ts
@@ -0,0 +1,5 @@
+export const queryUserName='/user/${id}';
+export const getUserInfo= '/user/info';
+export const userLogin= '/user/login';
+export const userLogout= '/user/logout';
+export const userRegister= '/user/register';
\ No newline at end of file
diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
new file mode 100644
index 0000000..e954852
--- /dev/null
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useAppSelector } from "../../hooks/store";
+import "./style.css"
+
+const SelfStatus :React.FC = () => {
+
+    const userName = useAppSelector(state => state.user.userName)
+    const role = useAppSelector(state => state.user.role)
+    const uploadTraffic = useAppSelector(state => state.user.uploadTraffic)
+    const downloadTraffic = useAppSelector(state => state.user.downloadTraffic)
+    const downloadPoints = useAppSelector(state => state.user.downloadPoints)
+    const avatar = useAppSelector(state => state.user.avatar)
+    const islogin = useAppSelector(state => state.user.isLogin)
+    return <>
+            <div className="user">
+                <img className="avatar" src={avatar}></img>
+                <p className="userName">{userName},欢迎你</p>
+            </div>
+            <div className="info" >
+                <p className="uploadTraffic">上传量：{uploadTraffic}</p>
+                <p>下载量：{downloadTraffic}</p>
+                <p>下载积分：{downloadPoints}</p>
+            </div>
+
+    </>
+}
+
+export default SelfStatus
diff --git a/src/components/selfStatus/style.css b/src/components/selfStatus/style.css
new file mode 100644
index 0000000..afb50a0
--- /dev/null
+++ b/src/components/selfStatus/style.css
@@ -0,0 +1,19 @@
+
+.user{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
+.user img {
+    width:40%;
+    border-radius: 20px;
+    margin-top: 20px;
+}
+.info p{
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 20px;
+}
+
diff --git a/src/hooks/request.ts b/src/hooks/request.ts
new file mode 100644
index 0000000..8594ac2
--- /dev/null
+++ b/src/hooks/request.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback } from 'react'
+import { data } from 'react-router'
+
+type RequestFunction<T> = () => Promise<T>
+
+interface UseApiResult<T> {
+  data: T | null
+  loading: boolean
+  error: Error | null
+  refresh: () => void
+}
+
+export function useApi<T>(
+    requestFn: RequestFunction<T>,
+    immediate = true
+  ): UseApiResult<T> {
+    const [data, setData] = useState<T | null>(null)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<Error | null>(null)
+  
+    const execute = useCallback(async () => {
+      try {
+        setLoading(true)
+        const result = await requestFn()
+        setData(result)
+        setError(null)
+        return result  // 返回请求结果
+      } catch (err) {
+        setError(err as Error)
+        throw err
+      } finally {
+        setLoading(false)
+      }
+    }, [requestFn])
+  
+    useEffect(() => {
+      if (immediate) {
+        execute()
+      }
+    }, [execute, immediate])
+  
+    return { data, loading, error, refresh: execute }
+  }
\ No newline at end of file
diff --git a/src/hooks/store.ts b/src/hooks/store.ts
new file mode 100644
index 0000000..f9f22a6
--- /dev/null
+++ b/src/hooks/store.ts
@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from '../store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..e66ba06
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import {createRoot} from "react-dom/client"
+import { Provider } from "react-redux";
+import router from "./route";
+import store from "./store/index";
+import { RouterProvider } from "react-router";
+
+const root = createRoot(document.getElementById('root')!)
+root.render(
+    <Provider store={store}>
+        <RouterProvider router={router}/>
+    </Provider>
+)
diff --git a/src/mock/index.ts b/src/mock/index.ts
new file mode 100644
index 0000000..9bb29d3
--- /dev/null
+++ b/src/mock/index.ts
@@ -0,0 +1,21 @@
+import MockAdapter from 'axios-mock-adapter';
+import instance from '@/utils/axios'
+import {setupUserMock}  from './user'
+
+// 创建 Mock 实例
+export const mock = new MockAdapter(instance, { 
+  delayResponse: process.env.NODE_ENV === 'test' ? 0 : 500 
+})
+
+// 聚合所有 Mock 模块
+export function setupMock() {
+  // 开发环境启用 Mock
+  if (process.env.NODE_ENV !== 'development') return
+
+  // 加载各模块 Mock
+  setupUserMock(mock)
+  console.log('Mock 模块已加载')
+}
+
+// 自动执行
+setupMock()
\ No newline at end of file
diff --git a/src/mock/user.d.ts b/src/mock/user.d.ts
new file mode 100644
index 0000000..0f12476
--- /dev/null
+++ b/src/mock/user.d.ts
@@ -0,0 +1,3 @@
+import type MockAdapter from 'axios-mock-adapter';
+
+export declare function setupUserMock(mock: MockAdapter): void;
\ No newline at end of file
diff --git a/src/mock/user.js b/src/mock/user.js
new file mode 100644
index 0000000..2ffb8c7
--- /dev/null
+++ b/src/mock/user.js
@@ -0,0 +1,24 @@
+import Mock from 'mockjs';
+import MockAdapter from 'axios-mock-adapter';
+
+import { userLogin } from '@/api/user'; // Import the API endpoint
+
+/**
+ * 设置用户相关的 Mock 接口
+ * @param {MockAdapter} mock 
+ */
+export function setupUserMock(mock){
+    mock.onPost(userLogin).reply(config => {
+        let data = Mock.mock({
+          "userId": 0,
+          "userName": '',
+          "role": '',
+          "isLogin": false,
+          "uploadTraffic": 0,
+          "downloadTraffic": 0,
+          "downloadPoints": 0,
+          "avatar": ''
+        });
+        return [200, data];
+      });
+}    
diff --git a/src/route/index.tsx b/src/route/index.tsx
new file mode 100644
index 0000000..da0720e
--- /dev/null
+++ b/src/route/index.tsx
@@ -0,0 +1,19 @@
+import { createBrowserRouter } from 'react-router-dom'
+import PrivateRoute from './privateRoute'
+import Login from '../views/login'
+import React from 'react'
+import Forum from '../views/forum'
+
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <Forum /> // 论坛主页面
+    },
+    {
+        path: '/login',
+        element: <Login /> // 登录页作为独立路由
+    }
+]
+)
+
+export default router
\ No newline at end of file
diff --git a/src/route/privateRoute.tsx b/src/route/privateRoute.tsx
new file mode 100644
index 0000000..8391f90
--- /dev/null
+++ b/src/route/privateRoute.tsx
@@ -0,0 +1,22 @@
+import { Navigate, Outlet } from 'react-router-dom'
+import React from 'react'
+
+interface PrivateRouteProps {
+  isAllowed: boolean
+  redirectPath?: string
+  children?: React.ReactNode
+}
+
+const PrivateRoute = ({
+  isAllowed,
+  redirectPath = '/login',
+  children
+}: PrivateRouteProps) => {
+  if (!isAllowed) {
+    return <Navigate to={redirectPath} replace />
+  }
+
+  return children ? children : <Outlet />
+}
+
+export default PrivateRoute
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..5501ef3
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,12 @@
+import {configureStore} from '@reduxjs/toolkit';
+import userReducer from './userReducer';
+const store = configureStore({
+  reducer: {
+    user: userReducer,
+  }
+});
+
+export default store;
+export type RootState = ReturnType<typeof store.getState>
+
+export type AppDispatch = typeof store.dispatch
\ No newline at end of file
diff --git a/src/store/userReducer.ts b/src/store/userReducer.ts
new file mode 100644
index 0000000..f335c25
--- /dev/null
+++ b/src/store/userReducer.ts
@@ -0,0 +1,66 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface UserState {
+    userId: number;
+    userName: string;
+    role: string;
+    isLogin: boolean;
+    uploadTraffic: number;
+    downloadTraffic: number;
+    downloadPoints: number;
+    avatar: string;
+}
+
+const initialState: UserState = {
+    userId: 0,
+    userName: '',
+    role: '',
+    isLogin: false,
+    uploadTraffic: 0,
+    downloadTraffic: 0,
+    downloadPoints: 0,
+    avatar: '',
+};
+
+
+export const userSlice = createSlice({
+    name: 'user',
+    initialState,
+    reducers: {
+        login: (state, action) => {
+                
+            state.userId = action.payload.userId;
+            state.userName = action.payload.userName;
+            state.role = action.payload.role;
+            state.isLogin = true;
+            state.uploadTraffic = action.payload.uploadTraffic;
+            state.downloadTraffic = action.payload.downloadTraffic;
+            state.downloadPoints = action.payload.downloadPoints;
+            state.avatar = action.payload.avatar;
+
+            console.log('userId', state.userId);
+        },
+        logout: (state) => {
+            state.userId = 0;
+            state.userName = '';
+            state.role = '';
+            state.isLogin = false;
+            state.uploadTraffic = 0;
+            state.downloadTraffic = 0;
+            state.downloadPoints = 0;
+            state.avatar = '';
+        },
+        updateTraffic: (state, action) => {
+            state.uploadTraffic = action.payload.uploadTraffic;
+            state.downloadTraffic = action.payload.downloadTraffic;
+            state.downloadPoints = action.payload.downloadPoints;
+        },
+        updateAvatar: (state, action) => {
+            state.avatar = action.payload.avatar;
+        }
+    },
+
+});
+
+export const { login, logout, updateTraffic } = userSlice.actions;
+export default userSlice.reducer;
\ No newline at end of file
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
new file mode 100644
index 0000000..c7639b0
--- /dev/null
+++ b/src/utils/axios.ts
@@ -0,0 +1,44 @@
+import axios from 'axios'
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+
+const instance = axios.create({
+    baseURL: process.env.API_BASE_URL,
+    timeout: 10000,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+  
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (config) => {
+      // 添加认证 token
+      const token = localStorage.getItem('access_token')
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    }
+  )
+  
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response) => {
+      console.log('Response:', response)
+      // 统一处理响应数据格式
+      if (response.status === 200) {
+        return response.data
+      }
+      return Promise.reject(response.data)
+    },
+    (error) => {
+      // 统一错误处理
+      console.error('API Error:', error.response?.status, error.message)
+      return Promise.reject(error)
+    }
+  )
+
+export default instance
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..7701fc0
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,33 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+import instance from './axios'
+
+// 封装基础请求方法
+const request = {
+  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return instance.get(url, config)
+  },
+
+  post<T = any>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<T> {
+    return instance.post(url, data, config)
+  },
+
+  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+    return instance.put(url, data, config)
+  },
+
+  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return instance.delete(url, config)
+  }
+}
+
+// 开发环境启用 Mock
+if (process.env.NODE_ENV === 'development') {
+  require('../mock') // 你的 Mock 配置文件
+}
+
+
+export default request
\ No newline at end of file
diff --git a/src/views/forum/index.tsx b/src/views/forum/index.tsx
new file mode 100644
index 0000000..6090868
--- /dev/null
+++ b/src/views/forum/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Navigate } from "react-router";
+
+export default function Forum() {
+
+
+    return (
+        <div>
+            <h1>Forum</h1>
+            <p>Welcome to the forum!</p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
new file mode 100644
index 0000000..9c1abc2
--- /dev/null
+++ b/src/views/login/index.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { useApi } from '@/hooks/request';
+import request from '@/utils/request';
+import {userLogin} from '@/api/user';
+import { useAppDispatch } from '@/hooks/store';
+
+const Login: React.FC = () => {
+
+    const dispatch = useAppDispatch();
+    const { data, loading, error, refresh } = useApi(() => request.post(userLogin), false);
+
+    const handleLogin = async () => {
+        // 点击时调用 execute 发起请求
+        const res = await refresh();
+        console.log(res);
+        // 请求完成后可以使用返回的数据进行分发
+        dispatch({ type: "user/login", payload: res });
+    };
+    return (
+        <div>
+            <input type='email'></input>
+            <input></input>
+            <button onClick={handleLogin}>Login</button>
+            <button>Register</button>
+        </div>
+    );
+}
+
+export default Login;
\ No newline at end of file