修改代码

.env.development

@@ -1 +1,2 @@
-VITE_SERVER_URL=http://172.20.105.85:9001
+# VITE_SERVER_URL=http://172.20.105.85:9001
+VITE_SERVER_URL=http://teffwu.natappfree.cc

src/pages/user/user.jsx

@@ -1,57 +1,101 @@
-import {Table, Button, Input} from 'antd';
-import {useState, useEffect} from 'react'
+import { Table, Button, Input } from "antd";
+import { useState, useEffect } from "react";
 import ModalHooks from "./components/modal.jsx";
-import './user.scss'
-import axios from '@/utils/axios.js'
+import "./user.scss";
+import axios from "@/utils/axios.js";
 
-const {Column} = Table;
+const { Column } = Table;
 
 export default function User() {
-    const [inputVal, setInputVal] = useState('')
-    // 页面数据
-    const [data,setData] = useState([])
-    // 是否展示弹框
-    const [isModalOpen, setIsModalOpen] = useState(false);
+  const [inputVal, setInputVal] = useState("");
+  // 页面数据
+  const [data, setData] = useState([]);
+  // 是否展示弹框
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [row, setRow] = useState({});
 
-    // 新增用户页面
-    function addUser() {
-        setIsModalOpen(true)
-    }
+  // 新增用户页面
+  function addUser() {
+    setRow([]);
+    setIsModalOpen(true);
+  }
 
-    // 关闭页面
-    function closeModal() {
-        setIsModalOpen(false)
-    }
+  // 关闭页面
+  function closeModal() {
+    setIsModalOpen(false);
+  }
+  // 点击修改的回调
+  function modify(data) {
+    setRow(data);
+    setIsModalOpen(true);
+  }
+  // 获取数据
+  async function getData() {
+    let { data } = await axios.get("/sys/select");
+    setData(data);
+  }
 
-    async function getData() {
-        let {data} = await axios.get('/sys/select')
-        setData(data)
-    }
-
-    useEffect(() => {
-        getData()
-    }, [])
-    return (
-        <div className="user">
-            <div className="top">
-                <div className="input">
-                    <Input value={inputVal} onChange={(e) => setInputVal(e.target.value)}/> <Button
-                    type="primary">搜索</Button>
-                </div>
-                <div className="button">
-                    <Button type="primary" onClick={addUser}>添加用户</Button>
-                </div>
-            </div>
-            <Table dataSource={data} pagination={{position: ['bottomRight']}} bordered={true} rowKey="id">
-                <Column title="用户名" dataIndex="account" key="id"/>
-                <Column title="姓名" dataIndex="name" key="id"/>
-                <Column title="手机号" dataIndex="phone" key="id"/>
-                <Column title="类型" dataIndex="type" key="id" render={(type)=>(<>
-                <span>{type===0?'管理员':"游客"}</span>
-                </>)}></Column>
-                <Column title="备注" dataIndex="remark" key="id"/>
-            </Table>
-            <ModalHooks isModalOpen={isModalOpen} closeModal={closeModal}></ModalHooks>
+  useEffect(() => {
+    getData();
+  }, []);
+  return (
+    <div className="user">
+      <div className="top">
+        <div className="input">
+          <Input
+            value={inputVal}
+            onChange={(e) => setInputVal(e.target.value)}
+          />{" "}
+          <Button type="primary">搜索</Button>
         </div>
-    );
+        <div className="button">
+          <Button type="primary" onClick={addUser}>
+            添加用户
+          </Button>
+        </div>
+      </div>
+      <Table
+        dataSource={data}
+        pagination={{ position: ["bottomRight"] }}
+        bordered={true}
+        rowKey="id"
+      >
+        <Column title="用户名" dataIndex="account" key="id" width="200px" />
+        <Column title="姓名" dataIndex="name" key="id" />
+        <Column title="手机号" dataIndex="phone" key="id" />
+        <Column
+          title="类型"
+          dataIndex="type"
+          key="id"
+          render={(type) => (
+            <>
+              <span>{type === 0 ? "管理员" : "游客"}</span>
+            </>
+          )}
+        ></Column>
+        <Column title="备注" dataIndex="remark" key="id" />
+        <Column
+          title="操作"
+          width="170px"
+          dataIndex="id"
+          key="id"
+          render={(text, record) => (
+            <div className="btn">
+              <Button type="primary" onClick={() => modify(record)}>
+                修改
+              </Button>
+              <Button type="primary" danger>
+                删除
+              </Button>
+            </div>
+          )}
+        />
+      </Table>
+      <ModalHooks
+        isModalOpen={isModalOpen}
+        closeModal={closeModal}
+        row={row}
+      ></ModalHooks>
+    </div>
+  );
 }

src/pages/user/user.scss

@@ -12,6 +12,10 @@
       }
     }
   }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
 
 }
 #basic{

src/utils/axios.js

@@ -7,7 +7,7 @@ axios.interceptors.request.use(
             const headers = config.headers
             let satoken=JSON.parse(user)?.satoken || ''
             if(!satoken){
-                window.location.href = '/login.html'
+                window.location.href = '/login'
             }
             headers.satoken = satoken
         }