--- description: 创建新的前端页面的标准流程 --- # 添加前端页面 Skill 本文档描述如何为本项目添加一个新的前端页面。 ## 步骤概览 1. 创建页面组件文件 2. 添加路由配置 3. 添加菜单入口 4. 实现页面功能 ## 详细步骤 ### 1. 创建页面组件在 `frontend\/src\/pages\/` 下适当位置创建： ``` frontend\/src\/pages\/ ├── Admin\/ # 管理员页面 ├── Teacher\/ # 教师页面 ├── Exam\/ # 考试相关 ├── Attendance\/ # 考勤相关 ├── WrongAnswer\/ # 错题分析 ├── DataScreen\/ # 数据大屏 └── YourModule\/ # 新模块 └── YourPage.tsx ``` ### 2. 页面组件模板 ```tsx import React, { useState, useEffect, useCallback } from 'react' import { Card, Table, Button, Space, message, Modal, Form, Input, Select, Tag, Popconfirm, Row, Col } from 'antd' import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design\/icons' import axios from 'axios' const { Option } = Select interface YourDataType { id: number name: string status: string created_at: string } const YourPage: React.FC = () => { const [loading, setLoading] = useState(false) const [data, setData] = useState([]) const [modalVisible, setModalVisible] = useState(false) const [editingItem, setEditingItem] = useState(null) const [form] = Form.useForm() \/\/ 获取数据 const fetchData = useCallback(async () => { setLoading(true) try { const token = localStorage.getItem('token') const response = await axios.get('\/api\/your-module\/list', { headers: { Authorization: `Bearer ${token}` } }) setData(response.data.data || []) } catch (error) { message.error('获取数据失败') } finally { setLoading(false) } }, []) useEffect(() => { fetchData() }, [fetchData]) \/\/ 提交表单 const handleSubmit = async () => { try { const values = await form.validateFields() const token = localStorage.getItem('token') if (editingItem) { await axios.put(`\/api\/your-module\/${editingItem.id}`, values, { headers: { Authorization: `Bearer ${token}` } }) message.success('更新成功') } else { await axios.post('\/api\/your-module\/create', values, { headers: { Authorization: `Bearer ${token}` } }) message.success('创建成功') } setModalVisible(false) setEditingItem(null) form.resetFields() fetchData() } catch (error: any) { message.error('操作失败: ' + (error.response?.data?.detail || error.message)) } } \/\/ 删除 const handleDelete = async (id: number) => { try { const token = localStorage.getItem('token') await axios.delete(`\/api\/your-module\/${id}`, { headers: { Authorization: `Bearer ${token}` } }) message.success('删除成功') fetchData() } catch (error) { message.error('删除失败') } } \/\/ 表格列定义 const columns = [ { title: 'ID', dataIndex: 'id', key: 'id', width: 80 }, { title: '名称', dataIndex: 'name', key: 'name' }, { title: '状态', dataIndex: 'status', key: 'status', render: (status: string) => ( {status === 'active' ? '启用' : '禁用'} <\/Tag> ) }, { title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 }, { title: '操作', key: 'action', width: 150, render: (_: any, record: YourDataType) => (