From 20a4dfad84ebbdc3423c5973766474cdc4b72591 Mon Sep 17 00:00:00 2001
From: wangziqi <wangziqi@gongxue100.com>
Date: Sun, 5 Jul 2026 19:16:02 +0800
Subject: [PATCH] feat: add Class detail page with student roster and teacher
 tabs

---
 apps/admin/src/pages/Classes/detail.tsx | 504 +++++++++++++++++++++++-
 1 file changed, 500 insertions(+), 4 deletions(-)

diff --git a/apps/admin/src/pages/Classes/detail.tsx b/apps/admin/src/pages/Classes/detail.tsx
index e7a12d5..1c5d8ab 100644
--- a/apps/admin/src/pages/Classes/detail.tsx
+++ b/apps/admin/src/pages/Classes/detail.tsx
@@ -1,9 +1,505 @@
-import React from 'react';
-import { Card } from 'antd';
+import React, { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  Card, Tabs, Descriptions, Table, Button, Space, Select, Modal, Tag,
+  Popconfirm, message, Form, Input, DatePicker, InputNumber,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import api from '../../api';
+import PermissionButton from '../../components/PermissionButton';
+
+// ---- Types ----
+
+interface ClassStudent {
+  id: number;
+  studentId: number;
+  studentName: string;
+  studentNo: string;
+  joinDate: string;
+  status: string;
+}
+
+interface ClassTeacher {
+  id: number;
+  userId: number;
+  username: string;
+  roleType: string;
+  subject: string | null;
+}
+
+interface ClassDetail {
+  id: number;
+  name: string;
+  code: string;
+  departmentId: number | null;
+  classType: string;
+  startDate: string | null;
+  endDate: string | null;
+  status: string;
+  maxStudents: number;
+  notes: string | null;
+  studentCount: number;
+  students?: ClassStudent[];
+  teachers?: ClassTeacher[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface StudentItem {
+  id: number;
+  name: string;
+  studentNo?: string;
+}
+
+interface UserItem {
+  id: number;
+  username: string;
+}
+
+// ---- Constants ----
+
+const STATUS_MAP: Record<string, { color: string; text: string }> = {
+  enrolling: { color: 'blue', text: '招生中' },
+  active: { color: 'green', text: '在读' },
+  ended: { color: 'default', text: '结课' },
+  suspended: { color: 'orange', text: '停课' },
+};
+
+const TYPE_MAP: Record<string, string> = {
+  culture: '文化课',
+  professional: '专业课',
+  bootcamp: '集训营',
+  sprint: '冲刺营',
+};
+
+const ROLE_MAP: Record<string, string> = {
+  subject_teacher: '任课老师',
+  head_teacher: '班主任',
+  life_teacher: '生活老师',
+  academic_teacher: '学服老师',
+};
+
+// ---- Component ----
 
-// Placeholder — Task 1.5 will implement the full detail page.
 const ClassDetailPage: React.FC = () => {
-  return <Card>班级详情 — 待实现</Card>;
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [detail, setDetail] = useState<ClassDetail | null>(null);
+  const [students, setStudents] = useState<ClassStudent[]>([]);
+  const [teachers, setTeachers] = useState<ClassTeacher[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [editForm] = Form.useForm();
+  const [editingInfo, setEditingInfo] = useState(false);
+
+  // Student modal state
+  const [studentModalOpen, setStudentModalOpen] = useState(false);
+  const [allStudents, setAllStudents] = useState<StudentItem[]>([]);
+  const [selectedStudentIds, setSelectedStudentIds] = useState<number[]>([]);
+
+  // Teacher modal state
+  const [teacherModalOpen, setTeacherModalOpen] = useState(false);
+  const [allUsers, setAllUsers] = useState<UserItem[]>([]);
+  const [teacherRole, setTeacherRole] = useState('subject_teacher');
+  const [teacherSubject, setTeacherSubject] = useState('');
+  const [teacherUserId, setTeacherUserId] = useState<number>();
+
+  const fetchDetail = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await api.get(`/classes/${id}`) as ClassDetail;
+      setDetail(res);
+      setStudents(res.students || []);
+      setTeachers(res.teachers || []);
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => { fetchDetail(); }, [fetchDetail]);
+
+  const handleSaveInfo = async () => {
+    try {
+      const values = await editForm.validateFields();
+      await api.put(`/classes/${id}`, {
+        name: values.name,
+        code: values.code,
+        classType: values.classType,
+        startDate: values.startDate?.format('YYYY-MM-DD'),
+        endDate: values.endDate?.format('YYYY-MM-DD'),
+        maxStudents: values.maxStudents,
+        status: values.status,
+        notes: values.notes,
+      });
+      setEditingInfo(false);
+      fetchDetail();
+      message.success('已更新');
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '更新失败');
+    }
+  };
+
+  const handleRemoveStudent = async (studentId: number) => {
+    try {
+      await api.delete(`/classes/${id}/students/${studentId}`);
+      fetchDetail();
+      message.success('已移除');
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '移除失败');
+    }
+  };
+
+  const handleAddStudents = async () => {
+    if (!selectedStudentIds.length) return;
+    try {
+      await api.post(`/classes/${id}/students`, { studentIds: selectedStudentIds });
+      setStudentModalOpen(false);
+      setSelectedStudentIds([]);
+      fetchDetail();
+      message.success('已添加');
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '添加失败');
+    }
+  };
+
+  const handleAddTeacher = async () => {
+    if (!teacherUserId) return;
+    try {
+      await api.post(`/classes/${id}/teachers`, {
+        userId: teacherUserId,
+        roleType: teacherRole,
+        subject: teacherSubject || undefined,
+      });
+      setTeacherModalOpen(false);
+      fetchDetail();
+      message.success('已添加');
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '添加失败');
+    }
+  };
+
+  const handleRemoveTeacher = async (userId: number) => {
+    try {
+      await api.delete(`/classes/${id}/teachers/${userId}`);
+      fetchDetail();
+      message.success('已移除');
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '移除失败');
+    }
+  };
+
+  const openStudentModal = async () => {
+    try {
+      const res = await api.get('/students', { params: { includeArchived: 'false' } }) as StudentItem[];
+      setAllStudents(res || []);
+      setSelectedStudentIds([]);
+      setStudentModalOpen(true);
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '加载学员列表失败');
+    }
+  };
+
+  const openTeacherModal = async () => {
+    try {
+      const res = await api.get('/users') as UserItem[];
+      setAllUsers(res || []);
+      setTeacherUserId(undefined);
+      setTeacherRole('subject_teacher');
+      setTeacherSubject('');
+      setTeacherModalOpen(true);
+    } catch (e: unknown) {
+      const err = e as { message?: string };
+      message.error(err?.message || '加载用户列表失败');
+    }
+  };
+
+  if (!detail) return null;
+
+  const studentColumns: ColumnsType<ClassStudent> = [
+    { title: '姓名', dataIndex: 'studentName' },
+    { title: '学号', dataIndex: 'studentNo' },
+    { title: '加入日期', dataIndex: 'joinDate' },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render: (v: string) => (
+        <Tag color={v === 'active' ? 'green' : 'default'}>
+          {v === 'active' ? '在读' : '已离班'}
+        </Tag>
+      ),
+    },
+    {
+      title: '操作',
+      render: (_: unknown, r: ClassStudent) => (
+        <Popconfirm title="确认移除？" onConfirm={() => handleRemoveStudent(r.studentId)}>
+          <Button size="small" danger>移除</Button>
+        </Popconfirm>
+      ),
+    },
+  ];
+
+  const teacherColumns: ColumnsType<ClassTeacher> = [
+    { title: '姓名', dataIndex: 'username' },
+    {
+      title: '角色',
+      dataIndex: 'roleType',
+      render: (v: string) => <Tag>{ROLE_MAP[v] || v}</Tag>,
+    },
+    {
+      title: '科目',
+      dataIndex: 'subject',
+      render: (v: string | null) => v || '-',
+    },
+    {
+      title: '操作',
+      render: (_: unknown, r: ClassTeacher) => (
+        <Popconfirm title="确认移除？" onConfirm={() => handleRemoveTeacher(r.userId)}>
+          <Button size="small" danger>移除</Button>
+        </Popconfirm>
+      ),
+    },
+  ];
+
+  return (
+    <Card
+      title={
+        <Space>
+          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/classes')} />
+          <span>{detail.name} ({detail.code})</span>
+          <Tag color={STATUS_MAP[detail.status]?.color}>{STATUS_MAP[detail.status]?.text}</Tag>
+        </Space>
+      }
+      loading={loading}
+    >
+      <Tabs
+        defaultActiveKey="info"
+        items={[
+          {
+            key: 'info',
+            label: '基本信息',
+            children: (
+              <div>
+                {editingInfo ? (
+                  <Form
+                    form={editForm}
+                    layout="vertical"
+                    initialValues={{
+                      name: detail.name,
+                      code: detail.code,
+                      classType: detail.classType,
+                      startDate: detail.startDate ? dayjs(detail.startDate) : undefined,
+                      endDate: detail.endDate ? dayjs(detail.endDate) : undefined,
+                      maxStudents: detail.maxStudents,
+                      status: detail.status,
+                      notes: detail.notes,
+                    }}
+                  >
+                    <Space wrap>
+                      <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+                        <Input />
+                      </Form.Item>
+                      <Form.Item name="code" label="编码">
+                        <Input />
+                      </Form.Item>
+                      <Form.Item name="classType" label="班型">
+                        <Select
+                          options={Object.entries(TYPE_MAP).map(([k, v]) => ({
+                            value: k,
+                            label: v,
+                          }))}
+                        />
+                      </Form.Item>
+                      <Form.Item name="startDate" label="开班">
+                        <DatePicker />
+                      </Form.Item>
+                      <Form.Item name="endDate" label="结课">
+                        <DatePicker />
+                      </Form.Item>
+                      <Form.Item name="maxStudents" label="人数上限">
+                        <InputNumber min={1} />
+                      </Form.Item>
+                      <Form.Item name="status" label="状态">
+                        <Select
+                          options={Object.entries(STATUS_MAP).map(([k, v]) => ({
+                            value: k,
+                            label: v.text,
+                          }))}
+                        />
+                      </Form.Item>
+                    </Space>
+                    <Form.Item name="notes" label="备注">
+                      <Input.TextArea rows={3} />
+                    </Form.Item>
+                    <Space>
+                      <Button type="primary" onClick={handleSaveInfo}>
+                        保存
+                      </Button>
+                      <Button onClick={() => setEditingInfo(false)}>取消</Button>
+                    </Space>
+                  </Form>
+                ) : (
+                  <div>
+                    <Descriptions column={3} bordered size="small">
+                      <Descriptions.Item label="班型">
+                        {TYPE_MAP[detail.classType]}
+                      </Descriptions.Item>
+                      <Descriptions.Item label="开班日期">
+                        {detail.startDate || '-'}
+                      </Descriptions.Item>
+                      <Descriptions.Item label="结课日期">
+                        {detail.endDate || '-'}
+                      </Descriptions.Item>
+                      <Descriptions.Item label="学员">
+                        {detail.studentCount}/{detail.maxStudents || '-'}
+                      </Descriptions.Item>
+                      <Descriptions.Item label="班主任">
+                        {teachers.find((t) => t.roleType === 'head_teacher')?.username || '-'}
+                      </Descriptions.Item>
+                      <Descriptions.Item label="备注">
+                        {detail.notes || '-'}
+                      </Descriptions.Item>
+                    </Descriptions>
+                    <PermissionButton
+                      permission="class:edit"
+                      style={{ marginTop: 16 }}
+                      onClick={() => {
+                        editForm.setFieldsValue({
+                          name: detail.name,
+                          code: detail.code,
+                          classType: detail.classType,
+                          startDate: detail.startDate ? dayjs(detail.startDate) : undefined,
+                          endDate: detail.endDate ? dayjs(detail.endDate) : undefined,
+                          maxStudents: detail.maxStudents,
+                          status: detail.status,
+                          notes: detail.notes,
+                        });
+                        setEditingInfo(true);
+                      }}
+                    >
+                      编辑
+                    </PermissionButton>
+                  </div>
+                )}
+              </div>
+            ),
+          },
+          {
+            key: 'students',
+            label: `花名册 (${students.filter((s) => s.status === 'active').length})`,
+            children: (
+              <div>
+                <Button
+                  icon={<PlusOutlined />}
+                  type="primary"
+                  onClick={openStudentModal}
+                  style={{ marginBottom: 16 }}
+                >
+                  添加学员
+                </Button>
+                <Table<ClassStudent>
+                  columns={studentColumns}
+                  dataSource={students}
+                  rowKey="id"
+                  pagination={{ pageSize: 20 }}
+                />
+                <Modal
+                  title="添加学员"
+                  open={studentModalOpen}
+                  onOk={handleAddStudents}
+                  onCancel={() => setStudentModalOpen(false)}
+                >
+                  <Select
+                    mode="multiple"
+                    style={{ width: '100%' }}
+                    placeholder="选择学员"
+                    value={selectedStudentIds}
+                    onChange={setSelectedStudentIds}
+                    options={allStudents.map((s) => ({
+                      value: s.id,
+                      label: `${s.name} (${s.studentNo || s.id})`,
+                    }))}
+                    filterOption={(input, option) =>
+                      (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
+                    }
+                  />
+                </Modal>
+              </div>
+            ),
+          },
+          {
+            key: 'teachers',
+            label: `教师 (${teachers.length})`,
+            children: (
+              <div>
+                <Button
+                  icon={<PlusOutlined />}
+                  type="primary"
+                  onClick={openTeacherModal}
+                  style={{ marginBottom: 16 }}
+                >
+                  添加教师
+                </Button>
+                <Table<ClassTeacher>
+                  columns={teacherColumns}
+                  dataSource={teachers}
+                  rowKey="id"
+                  pagination={{ pageSize: 20 }}
+                />
+                <Modal
+                  title="添加教师"
+                  open={teacherModalOpen}
+                  onOk={handleAddTeacher}
+                  onCancel={() => setTeacherModalOpen(false)}
+                >
+                  <Space direction="vertical" style={{ width: '100%' }}>
+                    <Select
+                      style={{ width: '100%' }}
+                      placeholder="选择教师"
+                      value={teacherUserId}
+                      onChange={setTeacherUserId}
+                      options={allUsers.map((u) => ({
+                        value: u.id,
+                        label: u.username,
+                      }))}
+                      filterOption={(input, option) =>
+                        (option?.label as string)?.toLowerCase().includes(input.toLowerCase())
+                      }
+                    />
+                    <Select
+                      style={{ width: '100%' }}
+                      value={teacherRole}
+                      onChange={setTeacherRole}
+                      options={Object.entries(ROLE_MAP).map(([k, v]) => ({
+                        value: k,
+                        label: v,
+                      }))}
+                    />
+                    {teacherRole === 'subject_teacher' && (
+                      <Input
+                        placeholder="任教科目"
+                        value={teacherSubject}
+                        onChange={(e) => setTeacherSubject(e.target.value)}
+                      />
+                    )}
+                  </Space>
+                </Modal>
+              </div>
+            ),
+          },
+        ]}
+      />
+    </Card>
+  );
 };
 
 export default ClassDetailPage;