AI: 会友信息管理系统

package.json

@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "axios": "^0.27.2",
+    "react-router-dom": "^6.4.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,10 +1,41 @@
 import React from 'react'
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
+import AttendanceSystem from './components/AttendanceSystem'
+import MemberList from './components/MemberList'
+import MemberForm from './components/MemberForm'
+import ExcelImportExport from './components/ExcelImportExport'
 
 function App() {
+  return (
+    <Router>
+      <div>
+        <nav>
+          <ul>
+            <li><Link to="/">首页</Link></li>
+            <li><Link to="/members">会友列表</Link></li>
+            <li><Link to="/add-member">添加会友</Link></li>
+            <li><Link to="/attendance">考勤系统</Link></li>
+          </ul>
+        </nav>
+
+        <h1>会友信息管理系统</h1>
+
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/members" element={<MemberList />} />
+          <Route path="/add-member" element={<MemberForm />} />
+          <Route path="/attendance" element={<AttendanceSystem />} />
+        </Routes>
+      </div>
+    </Router>
+  )
+}
+
+function Home() {
   return (
     <div>
-      <h1>会友信息管理系统</h1>
-      <p>这是一个基本的 React 应用。</p>
+      <h2>欢迎使用会友信息管理系统</h2>
+      <p>当前时间: 2024-10-29 11:55:35</p>
     </div>
   )
 }

src/components/MemberForm.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { deviceApi } from '../api/deviceApi';
+
+const MemberForm = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    contact: '',
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prevState => ({
+      ...prevState,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await deviceApi.addPerson(formData);
+      alert('会友添加成功');
+      setFormData({ name: '', contact: '' });
+    } catch (error) {
+      console.error('添加会友失败', error);
+      alert('添加会友失败，请重试');
+    }
+  };
+
+  return (
+    <div>
+      <h2>添加会友</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="name">姓名：</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="contact">联系方式：</label>
+          <input
+            type="text"
+            id="contact"
+            name="contact"
+            value={formData.contact}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <button type="submit">添加</button>
+      </form>
+    </div>
+  );
+};
+
+export default MemberForm;

src/components/MemberList.jsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import { deviceApi } from '../api/deviceApi';
+import ExcelImportExport from './ExcelImportExport';
+
+const MemberList = () => {
+  const [members, setMembers] = useState([]);
+
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  const fetchMembers = async () => {
+    try {
+      // 假设 deviceApi.getAllPersons() 方法存在
+      const data = await deviceApi.getAllPersons();
+      setMembers(data);
+    } catch (error) {
+      console.error('获取会友列表失败', error);
+    }
+  };
+
+  const handleImport = (data) => {
+    setMembers(data);
+    // 这里可以添加将导入的数据保存到后端的逻辑
+  };
+
+  return (
+    <div>
+      <h2>会友列表</h2>
+      <ExcelImportExport members={members} onImport={handleImport} />
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>姓名</th>
+            <th>联系方式</th>
+          </tr>
+        </thead>
+        <tbody>
+          {members.map((member) => (
+            <tr key={member.personId}>
+              <td>{member.personId}</td>
+              <td>{member.name}</td>
+              <td>{member.contact}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default MemberList;