From b0ea73befbf80f37d97103eb75ef162c1b4519f8 Mon Sep 17 00:00:00 2001
From: BenjaminNH <1249376374@qq.com>
Date: Mon, 23 Jun 2025 23:39:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E8=AE=BE=E5=A4=87=E5=88=97=E8=A1=A8=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axios.js           |  32 ++++++++---
 src/pages/user/Reserve.jsx | 109 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 131 insertions(+), 10 deletions(-)

diff --git a/src/api/axios.js b/src/api/axios.js
index 0f72944..f70e190 100644
--- a/src/api/axios.js
+++ b/src/api/axios.js
@@ -1,5 +1,6 @@
 import { message } from "antd";
-import axios, { Axios } from "axios";
+import axios from "axios";
+import { logout } from "../features/auth/authSlice";
 
 const axiosInstance = axios.create({
   baseURL: "http://127.0.0.1:8080",
@@ -17,15 +18,28 @@ axiosInstance.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
-axiosInstance.interceptors.response.use((response) => {
-  const { code, message: msg, data } = response.data;
+axiosInstance.interceptors.response.use(
+  (response) => {
+    const { code, message: msg, data } = response.data;
 
-  if (code === 0) {
-    return data;
-  } else {
-    message.error(msg);
-    return Promise.reject(new Error(msg));
+    if (code === 0) {
+      return data;
+    } else {
+      message.error(msg);
+      return Promise.reject(new Error(msg));
+    }
+  },
+  async (error) => {
+    if (error.response) {
+      const status = error.response.status;
+
+      const { store } = await import("../store");
+      if (status === 403) {
+        message.error("请登录后重试");
+        store.dispatch(logout());
+      }
+    }
   }
-});
+);
 
 export default axiosInstance;
diff --git a/src/pages/user/Reserve.jsx b/src/pages/user/Reserve.jsx
index 1600639..b710004 100644
--- a/src/pages/user/Reserve.jsx
+++ b/src/pages/user/Reserve.jsx
@@ -1,3 +1,110 @@
+import { Input, Space, Table, Tag } from "antd";
+import Column from "antd/es/table/Column";
+import { useEffect, useState } from "react";
+import axiosInstance from "../../api/axios";
+
+const statusColorMap = {
+  空闲: "green",
+  使用中: "red",
+  有预约: "yellow",
+  维修中: "gray",
+};
+
 export default function Reserve() {
-  return <h1>Reserve</h1>;
+  const [name, setName] = useState(null);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+  const [devices, setDevices] = useState([]);
+
+  const fetchData = async (pagination, searchName = name) => {
+    const data = await axiosInstance.get("/device", {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+        name: searchName,
+      },
+    });
+
+    setDevices(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = (pagination) => {
+    fetchData(pagination);
+  };
+
+  const [selectedDevice, setSelectedDevice] = useState(null);
+
+  const handleSearch = (value) => {
+    setName(name);
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    fetchData(newPagination, value);
+  };
+
+  return (
+    <>
+      <Input.Search
+        placeholder="请输入设备名称"
+        enterButton="搜索"
+        onSearch={handleSearch}
+        style={{ width: "200px" }}
+        className="m-4"
+      />
+      <Table
+        dataSource={devices}
+        pagination={pagination}
+        onChange={handlePageChange}
+        rowKey="deviceId"
+      >
+        <Column title="设备名称" key="name" dataIndex="name" />
+        <Column
+          title="使用要求"
+          key="usageRequirement"
+          dataIndex="usageRequirement"
+          ellipsis="true"
+        />
+        <Column title="位置" key="location" dataIndex="location" />
+        <Column
+          title="状态"
+          key="state"
+          dataIndex="state"
+          render={(_, { state }) => (
+            <>
+              <Tag color={statusColorMap[state]} key="state">
+                {state}
+              </Tag>
+            </>
+          )}
+        />
+        <Column
+          title="操作"
+          key="action"
+          render={(_, record) => (
+            <Space size="middle">
+              <a>查看日历</a>
+              <a onClick={() => setSelectedDevice(record)}>预约</a>
+            </Space>
+          )}
+        />
+      </Table>
+      {/* <ReservationModal
+        visiable={!!selectedDevice}
+        device={selectedDevice}
+        onclose={() => setSelectedDevice(null)}
+      /> */}
+    </>
+  );
 }