feat: 班级小助手 阶段1-3（monorepo + 后端 REST/Socket.IO + Web 管理端）

packages/web-admin/src/views/ClassesView.vue

@@ -0,0 +1,385 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
+import {
+  SOCKET_EVENTS,
+  formatDate,
+  type ClassDetailDto,
+  type ClassDto,
+  type CourseDto,
+  type StudentDto,
+  type UserDto,
+} from '@classhelper/shared';
+import { classApi, courseApi, teacherApi } from '@/api';
+import { useRealtimeStore } from '@/stores/realtime';
+
+const realtime = useRealtimeStore();
+
+const loading = ref(false);
+const classes = ref<ClassDto[]>([]);
+const keyword = ref('');
+
+async function loadClasses(): Promise<void> {
+  loading.value = true;
+  try {
+    classes.value = await classApi.list(keyword.value ? { keyword: keyword.value } : undefined);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/* ------------------------------------------------------------ 新建 / 编辑班级 */
+
+const formVisible = ref(false);
+const formRef = ref<FormInstance>();
+const editingId = ref<string | null>(null);
+const form = reactive({ name: '', grade: '' });
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
+  grade: [{ required: true, message: '请输入年级', trigger: 'blur' }],
+};
+
+function openCreate(): void {
+  editingId.value = null;
+  form.name = '';
+  form.grade = '';
+  formVisible.value = true;
+}
+
+function openEdit(row: ClassDto): void {
+  editingId.value = row.id;
+  form.name = row.name;
+  form.grade = row.grade;
+  formVisible.value = true;
+}
+
+async function submitForm(): Promise<void> {
+  const valid = await formRef.value?.validate().catch(() => false);
+  if (!valid) return;
+
+  if (editingId.value) {
+    await classApi.update(editingId.value, { name: form.name, grade: form.grade });
+    ElMessage.success('班级已更新');
+  } else {
+    await classApi.create({ name: form.name, grade: form.grade });
+    ElMessage.success('班级创建成功');
+  }
+  formVisible.value = false;
+  await loadClasses();
+}
+
+async function removeClass(row: ClassDto): Promise<void> {
+  await ElMessageBox.confirm(
+    `删除「${row.name}」将同时删除其课表、作业、通知与成绩，确认继续？`,
+    '危险操作',
+    { type: 'warning', confirmButtonText: '确认删除' },
+  );
+  await classApi.remove(row.id);
+  ElMessage.success('班级已删除');
+  await loadClasses();
+}
+
+/* ------------------------------------------------------------ 班级详情抽屉 */
+
+const detailVisible = ref(false);
+const detailLoading = ref(false);
+const detail = ref<ClassDetailDto | null>(null);
+const activeTab = ref('students');
+
+async function openDetail(row: ClassDto): Promise<void> {
+  detailVisible.value = true;
+  detailLoading.value = true;
+  activeTab.value = 'students';
+  try {
+    detail.value = await classApi.detail(row.id);
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+async function refreshDetail(): Promise<void> {
+  if (!detail.value) return;
+  detailLoading.value = true;
+  try {
+    detail.value = await classApi.detail(detail.value.id);
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+/* ------------------------------------------------------------ 学生 */
+
+const studentFormVisible = ref(false);
+const studentForm = reactive({ username: '', name: '', password: '' });
+const studentRules: FormRules = {
+  username: [{ required: true, message: '请输入学号/用户名', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+};
+
+async function addStudent(): Promise<void> {
+  if (!detail.value) return;
+  if (!studentForm.username.trim() || !studentForm.name.trim()) {
+    ElMessage.warning('请填写用户名和姓名');
+    return;
+  }
+  const created = await classApi.addStudent(detail.value.id, {
+    username: studentForm.username.trim(),
+    name: studentForm.name.trim(),
+    ...(studentForm.password ? { password: studentForm.password } : {}),
+  });
+  ElMessage.success(`已加入学生：${created.name}`);
+  studentFormVisible.value = false;
+  studentForm.username = '';
+  studentForm.name = '';
+  studentForm.password = '';
+  await refreshDetail();
+  await loadClasses();
+}
+
+async function removeStudent(row: StudentDto): Promise<void> {
+  if (!detail.value) return;
+  await ElMessageBox.confirm(`将「${row.name}」移出本班级？`, '确认', { type: 'warning' });
+  await classApi.removeStudent(detail.value.id, row.id);
+  ElMessage.success('已移出班级');
+  await refreshDetail();
+  await loadClasses();
+}
+
+/* ------------------------------------------------------------ 课程 */
+
+const courseForm = reactive({ name: '' });
+
+async function addCourse(): Promise<void> {
+  if (!detail.value || !courseForm.name.trim()) {
+    ElMessage.warning('请输入课程名称');
+    return;
+  }
+  await courseApi.create({ name: courseForm.name.trim(), classId: detail.value.id });
+  ElMessage.success('课程已添加');
+  courseForm.name = '';
+  await refreshDetail();
+}
+
+async function removeCourse(row: CourseDto): Promise<void> {
+  await ElMessageBox.confirm(`删除课程「${row.name}」？相关课表与作业关联会被清除。`, '确认', {
+    type: 'warning',
+  });
+  await courseApi.remove(row.id);
+  ElMessage.success('课程已删除');
+  await refreshDetail();
+}
+
+/* ------------------------------------------------------------ 协作教师 */
+
+const teachers = ref<UserDto[]>([]);
+const selectedTeacherId = ref<string>('');
+
+async function loadTeachers(): Promise<void> {
+  teachers.value = await teacherApi.list();
+}
+
+async function assignTeacher(): Promise<void> {
+  if (!detail.value || !selectedTeacherId.value) {
+    ElMessage.warning('请选择教师');
+    return;
+  }
+  await classApi.assignTeacher(detail.value.id, selectedTeacherId.value);
+  ElMessage.success('教师已分配');
+  selectedTeacherId.value = '';
+  await refreshDetail();
+}
+
+async function removeTeacher(teacherId: string): Promise<void> {
+  if (!detail.value) return;
+  await classApi.removeTeacher(detail.value.id, teacherId);
+  ElMessage.success('已取消分配');
+  await refreshDetail();
+}
+
+/* ------------------------------------------------------------ 实时刷新 */
+
+function onClassChanged(): void {
+  void loadClasses();
+  if (detailVisible.value) void refreshDetail();
+}
+
+onMounted(async () => {
+  await Promise.all([loadClasses(), loadTeachers()]);
+  realtime.on(SOCKET_EVENTS.classUpdated, onClassChanged);
+  realtime.on(SOCKET_EVENTS.notificationNew, onClassChanged);
+  realtime.on(SOCKET_EVENTS.homeworkNew, onClassChanged);
+});
+
+onUnmounted(() => {
+  realtime.off(SOCKET_EVENTS.classUpdated, onClassChanged);
+  realtime.off(SOCKET_EVENTS.notificationNew, onClassChanged);
+  realtime.off(SOCKET_EVENTS.homeworkNew, onClassChanged);
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">班级管理</h2>
+        <p class="page-subtitle">教师只能看到并管理自己创建或被分配的班级</p>
+      </div>
+      <div class="toolbar">
+        <el-input
+          v-model="keyword"
+          placeholder="搜索班级名称 / 年级"
+          clearable
+          style="width: 220px"
+          @keyup.enter="loadClasses"
+          @clear="loadClasses"
+        />
+        <el-button :icon="'Search'" @click="loadClasses">查询</el-button>
+        <el-button type="primary" :icon="'Plus'" @click="openCreate">新建班级</el-button>
+      </div>
+    </div>
+
+    <el-card shadow="never">
+      <el-table v-loading="loading" :data="classes" empty-text="暂无班级，点击右上角新建">
+        <el-table-column prop="name" label="班级" min-width="140" />
+        <el-table-column prop="grade" label="年级" width="100" />
+        <el-table-column label="班主任" width="140">
+          <template #default="{ row }">{{ row.teacher?.name ?? '-' }}</template>
+        </el-table-column>
+        <el-table-column label="学生" width="80">
+          <template #default="{ row }">{{ row.studentCount ?? 0 }}</template>
+        </el-table-column>
+        <el-table-column label="课程" width="80">
+          <template #default="{ row }">{{ row.courseCount ?? 0 }}</template>
+        </el-table-column>
+        <el-table-column label="作业" width="80">
+          <template #default="{ row }">{{ row.homeworkCount ?? 0 }}</template>
+        </el-table-column>
+        <el-table-column label="通知" width="80">
+          <template #default="{ row }">{{ row.notificationCount ?? 0 }}</template>
+        </el-table-column>
+        <el-table-column label="创建时间" width="170">
+          <template #default="{ row }">{{ formatDate(row.createdAt, true) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="230" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+            <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
+            <el-button link type="danger" @click="removeClass(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 新建 / 编辑 -->
+    <el-dialog v-model="formVisible" :title="editingId ? '编辑班级' : '新建班级'" width="420px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="班级名称" prop="name">
+          <el-input v-model="form.name" placeholder="例如 高一(1)班" />
+        </el-form-item>
+        <el-form-item label="年级" prop="grade">
+          <el-input v-model="form.grade" placeholder="例如 高一" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="formVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 班级详情 -->
+    <el-drawer v-model="detailVisible" size="60%" :title="detail ? `${detail.name} · 详情` : '班级详情'">
+      <div v-loading="detailLoading">
+        <el-descriptions v-if="detail" :column="3" border size="small">
+          <el-descriptions-item label="年级">{{ detail.grade }}</el-descriptions-item>
+          <el-descriptions-item label="班主任">{{ detail.teacher?.name ?? '-' }}</el-descriptions-item>
+          <el-descriptions-item label="学生数">{{ detail.students.length }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-tabs v-model="activeTab" class="mt-12">
+          <el-tab-pane label="学生名单" name="students">
+            <div class="toolbar mt-12">
+              <el-button type="primary" size="small" :icon="'Plus'" @click="studentFormVisible = true">
+                添加学生
+              </el-button>
+              <span class="text-muted">共 {{ detail?.students.length ?? 0 }} 人</span>
+            </div>
+            <el-table :data="detail?.students ?? []" size="small" class="mt-12" empty-text="暂无学生">
+              <el-table-column prop="username" label="用户名" width="140" />
+              <el-table-column prop="name" label="姓名" width="120" />
+              <el-table-column label="加入时间" width="180">
+                <template #default="{ row }">{{ formatDate(row.createdAt, true) }}</template>
+              </el-table-column>
+              <el-table-column label="操作" width="90">
+                <template #default="{ row }">
+                  <el-button link type="danger" @click="removeStudent(row)">移出</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+
+          <el-tab-pane label="课程" name="courses">
+            <el-table :data="detail?.courses ?? []" size="small" class="mt-12" empty-text="暂无课程">
+              <el-table-column prop="name" label="课程" min-width="140" />
+              <el-table-column label="任课教师" width="140">
+                <template #default="{ row }">{{ row.teacher?.name ?? '-' }}</template>
+              </el-table-column>
+              <el-table-column label="操作" width="90">
+                <template #default="{ row }">
+                  <el-button link type="danger" @click="removeCourse(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-input
+              v-model="courseForm.name"
+              placeholder="输入课程名称后回车快速添加"
+              class="mt-12"
+              @keyup.enter="addCourse"
+            />
+          </el-tab-pane>
+
+          <el-tab-pane label="协作教师" name="teachers">
+            <el-table :data="detail?.teachers ?? []" size="small" class="mt-12" empty-text="暂无协作教师">
+              <el-table-column prop="name" label="姓名" width="140" />
+              <el-table-column prop="username" label="用户名" width="140" />
+              <el-table-column label="操作" width="110">
+                <template #default="{ row }">
+                  <el-button link type="danger" @click="removeTeacher(row.id)">取消分配</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="toolbar mt-12">
+              <el-select v-model="selectedTeacherId" placeholder="选择教师" style="width: 220px" filterable>
+                <el-option
+                  v-for="item in teachers"
+                  :key="item.id"
+                  :label="`${item.name}（${item.username}）`"
+                  :value="item.id"
+                />
+              </el-select>
+              <el-button type="primary" @click="assignTeacher">分配</el-button>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-drawer>
+
+    <!-- 添加学生 -->
+    <el-dialog v-model="studentFormVisible" title="添加学生到本班" width="440px">
+      <el-form :model="studentForm" :rules="studentRules" label-width="90px">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="studentForm.username" placeholder="学号或登录名，已存在则直接转入本班" />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="studentForm.name" />
+        </el-form-item>
+        <el-form-item label="初始密码">
+          <el-input v-model="studentForm.password" placeholder="留空则使用默认密码" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="studentFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="addStudent">确认添加</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>