("card");
+ const [joinOpen, setJoinOpen] = useState(false);
// @contract-pending：MSW 兜底
const { data, loading, error } = useStudentCourses({
@@ -60,6 +99,12 @@ export function StudentCoursesListClient(): React.ReactElement {
});
};
+ const handleJoinSuccess = (): void => {
+ setJoinOpen(false);
+ startTransition(() => {
+ router.refresh();
+ });
+ };
const errorNode = error ? (
@@ -86,11 +131,56 @@ export function StudentCoursesListClient(): React.ReactElement {
description={t("description")}
icon={}
filters={
- updateQuery("q", v)}
- />
+ <>
+ updateQuery("q", v)}
+ />
+
+
+
+
+
+
+
}
>
-
+ {viewMode === "card" ? (
+
+ ) : (
+
+ )}
+
);
}
+/**
+ * 学生课程卡片网格（响应式：小屏 1 列，sm 2 列，lg 3 列）。
+ */
+function StudentCoursesCardGrid({
+ items,
+}: {
+ items: StudentCourse[];
+}): React.ReactElement {
+ return (
+
+ {items.map((course) => (
+
+ ))}
+
+ );
+}
+/**
+ * 单个课程卡片。
+ */
+function StudentCourseCard({
+ course,
+}: {
+ course: StudentCourse;
+}): React.ReactElement {
+ const t = useTranslations("studentDomain.courses.list");
+ return (
+
+
+
+
+
+ {course.name}
+
+
+ {typeof course.isActive === "boolean" ? (
+
+ {course.isActive ? t("statusActive") : t("statusInactive")}
+
+ ) : null}
+
+
+
+
+
+ {t("cardTeacher")}
+
+
{course.teacher}
+ {course.teacherEmail ? (
+
+
+
+ ) : null}
+
+ {t("cardSchool")}
+ {course.school}
+
+
+
+ {t("cardHeadTeacher")}
+
+ {course.headTeacher}
+
+
+ {course.grade ? (
+
+
+ {t("cardGrade")}
+
+ {course.grade}
+
+ ) : null}
+ {course.room ? (
+
+
+ {course.room}
+
+ ) : null}
+
+
+
+ {t("viewDetail")}
+
+
+
+
+ );
+}
/**
* 学生课程列表表格（纯展示组件，对齐 §8.2 排版规范）。
*/
@@ -126,6 +323,8 @@ function StudentCoursesTable({
{t("colTeacher")} |
{t("colSchool")} |
{t("colHeadTeacher")} |
+ {t("colRoom")} |
+ {t("colGrade")} |
{t("colActions")} |
@@ -140,11 +339,30 @@ function StudentCoursesTable({
{course.name}
- {course.teacher} |
+
+
+ {course.teacher}
+ {course.teacherEmail ? (
+
+
+
+ ) : null}
+ |
{course.school} |
{course.headTeacher}
|
+
+ {course.room ?? "-"}
+ |
+
+ {course.grade ?? "-"}
+ |
);
}
+/**
+ * 加入班级对话框（邀请码）。
+ * @contract-pending：joinClassByInvitationCode mutation MSW 兜底
+ */
+function JoinClassDialog({
+ open,
+ onOpenChange,
+ onSuccess,
+}: {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ onSuccess: () => void;
+}): React.ReactElement {
+ const t = useTranslations("studentDomain.courses.list");
+ const [code, setCode] = useState("");
+ const [submitting, setSubmitting] = useState(false);
+ const joinClass = useJoinClassByInvitationCode();
+
+ const resetForm = (): void => {
+ setCode("");
+ };
+
+ const handleOpenChange = (next: boolean): void => {
+ if (!next) {
+ resetForm();
+ }
+ onOpenChange(next);
+ };
+
+ const handleSubmit = (e: React.FormEvent): void => {
+ e.preventDefault();
+ const trimmed = code.trim();
+ if (!trimmed) {
+ notify.error(t("joinClassCodeRequired"));
+ return;
+ }
+ if (!INVITE_CODE_PATTERN.test(trimmed)) {
+ notify.error(t("joinClassCodeInvalid"));
+ return;
+ }
+ setSubmitting(true);
+ void (async (): Promise => {
+ try {
+ const result = await joinClass.run({ code: trimmed });
+ if (result.success) {
+ notify.success(t("joinClassSuccess"));
+ resetForm();
+ onSuccess();
+ } else {
+ notify.error(result.message ?? t("joinClassFailed"));
+ }
+ } catch (err) {
+ notify.error(t("joinClassFailed", { message: String(err) }));
+ } finally {
+ setSubmitting(false);
+ }
+ })();
+ };
+ return (
+
+ );
+}
diff --git a/apps/portal-shell/src/features/student/elective/elective-detail-client.tsx b/apps/portal-shell/src/features/student/elective/elective-detail-client.tsx
index fec45a9..c75040d 100644
--- a/apps/portal-shell/src/features/student/elective/elective-detail-client.tsx
+++ b/apps/portal-shell/src/features/student/elective/elective-detail-client.tsx
@@ -1,29 +1,31 @@
"use client";
-// @contract-pending：electiveCourses schema 未实现，全 MSW 兜底
+// @contract-pending: studentElectiveDetail schema not implemented, MSW fallback
/**
- * 学生选课详情页 - 客户端组件（ARCHITECTURE.md §7.3 详情页 / §9.1 / §10 P3）
+ * Student Elective Detail - Client Component (ARCHITECTURE.md §7.3 / §9.1 / §10 P3)
*
- * 数据契约：
- * - electiveCourses(termId) ❌ schema 无此字段 → MSW 兜底（@contract-pending）
- * - 详情复用列表 hook，按 id 客户端过滤（无独立详情 hook）
- * - 契约工单：docs/architecture/issues/contracts/core-edu_contract.md#student-elective
+ * Data contract:
+ * - studentElectiveDetail(id) -> schema missing -> MSW fallback (@contract-pending)
+ * - Contract ticket: docs/architecture/issues/contracts/core-edu_contract.md#student-elective
*
- * 隐私保护：学生视角不展示选课名单（仅展示课程基本信息）。
+ * Three-state spec (§11.3 DoD):
+ * - loading: DetailPageSkeleton
+ * - error: errorNode local fallback + notify.error
+ * - empty: notFound (no matching course)
*
- * 三态规范（§11.3 DoD）：
- * - loading：DetailPageSkeleton
- * - error：errorNode 局部降级
- * - empty：notFound（无匹配课程）
+ * Privacy: student view does not show enrollment list (only course basic info).
*
- * 关联：ARCHITECTURE.md §5.3 / §5.4 / §7.3 / §9.1 / §10 P3 / §11.3 / §11.4
+ * Related: ARCHITECTURE.md §5.3 / §5.4 / §7.3 / §9.1 / §10 P3 / §11.3 / §11.4
*/
import { ArrowLeft, BookOpen } from "lucide-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
+import { useEffect } from "react";
-import { useElectiveCourses } from "@/lib/api";
+import { useStudentElectiveDetail, type ElectiveCourse } from "@/lib/api";
+import { Badge } from "@/shared/components/ui/badge";
+import { Button } from "@/shared/components/ui/button";
import { EmptyState } from "@/shared/components/ui/empty-state";
import {
DetailPageShell,
@@ -31,12 +33,53 @@ import {
DetailSection,
DetailField,
} from "@/shared/components/page-templates";
+import { notify } from "@/shared/lib/notify";
-/** 默认学期（与列表页一致，详情复用列表 hook） */
-const DEFAULT_TERM_ID = "2026-spring";
+/** Status badge variant mapping (@contract-pending, aligned with i18n status* keys) */
+function statusBadgeVariant(
+ status: ElectiveCourse["status"],
+): "default" | "secondary" | "destructive" | "outline" {
+ switch (status) {
+ case "open":
+ return "default";
+ case "draft":
+ return "secondary";
+ case "closed":
+ return "outline";
+ case "cancelled":
+ return "destructive";
+ }
+}
+
+/** Status i18n key mapping */
+function statusI18nKey(status: ElectiveCourse["status"]): string {
+ switch (status) {
+ case "open":
+ return "statusOpen";
+ case "draft":
+ return "statusDraft";
+ case "closed":
+ return "statusClosed";
+ case "cancelled":
+ return "statusCancelled";
+ }
+}
+
+/** Selection mode i18n key mapping */
+function selectionModeI18nKey(mode: ElectiveCourse["selectionMode"]): string {
+ return mode === "fcfs" ? "selectionModeFcfs" : "selectionModeLottery";
+}
+
+/** Format ISO timestamp to locale string (client-only render, no SSR hydration risk) */
+function formatIso(iso: string): string {
+ if (!iso) return "-";
+ const date = new Date(iso);
+ if (Number.isNaN(date.getTime())) return iso;
+ return date.toLocaleString();
+}
/**
- * 选课详情客户端主体。需由 server page 包裹在 中。
+ * Elective detail client body. Must be wrapped in by server page.
*/
export function StudentElectiveDetailClient(): React.ReactElement {
const t = useTranslations("studentDomain.elective.detail");
@@ -44,10 +87,14 @@ export function StudentElectiveDetailClient(): React.ReactElement {
const params = useParams<{ id: string }>();
const courseId = params?.id ?? "";
- // @contract-pending：MSW 兜底（详情复用列表 hook，客户端过滤）
- const { data, loading, error } = useElectiveCourses(DEFAULT_TERM_ID);
+ // @contract-pending: MSW fallback
+ const { data: course, loading, error } = useStudentElectiveDetail(courseId);
- const course = data?.find((c) => c.id === courseId);
+ useEffect(() => {
+ if (error) {
+ notify.error(tCommon("error.loadFailed", { message: String(error) }));
+ }
+ }, [error, tCommon]);
const errorNode = error ? (
@@ -59,36 +106,98 @@ export function StudentElectiveDetailClient(): React.ReactElement {
const emptyNode =
!loading && !error && !course ? (
-
+
) : undefined;
+ const statusBadge = course ? (
+
+ {t(statusI18nKey(course.status))}
+
+ ) : undefined;
+
return (
}
+ actions={statusBadge}
loading={loading}
loadingNode={ }
errorNode={errorNode}
emptyNode={emptyNode}
>
-
-
- {t("backToList")}
-
- {course ? (
-
-
-
-
-
-
-
-
- ) : null}
+
+ {course ? : null}
);
}
+
+/**
+ * Detail body (basic info + description + schedule).
+ */
+function ElectiveDetailBody({
+ course,
+}: {
+ course: ElectiveCourse;
+}): React.ReactElement {
+ const t = useTranslations("studentDomain.elective.detail");
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {course.description ? (
+
+ {course.description}
+
+ ) : (
+ -
+ )}
+
+
+
+
+ {course.schedule}
+
+
+
+ );
+}
diff --git a/apps/portal-shell/src/features/student/elective/elective-list-client.tsx b/apps/portal-shell/src/features/student/elective/elective-list-client.tsx
index 3d668a6..3f80f7e 100644
--- a/apps/portal-shell/src/features/student/elective/elective-list-client.tsx
+++ b/apps/portal-shell/src/features/student/elective/elective-list-client.tsx
@@ -1,19 +1,25 @@
"use client";
-// @contract-pending：electiveCourses schema 未实现，全 MSW 兜底
+// @contract-pending：electiveCourses / studentSelections schema 未实现，全 MSW 兜底
/**
* 学生选课列表页 - 客户端组件（ARCHITECTURE.md §7.3 列表页 / §9.1 / §10 P3）
*
* 数据契约：
* - electiveCourses(termId) ❌ schema 无此字段 → MSW 兜底（@contract-pending）
- * - enrollCourse mutation ❌ schema 无 Mutation 类型 → MSW 兜底
+ * - studentSelections(termId) ❌ schema 无此字段 → MSW 兜底（@contract-pending）
+ * - enrollCourse / dropCourse mutation ❌ schema 无 Mutation 类型 → MSW 兜底
* - 契约工单：docs/architecture/issues/contracts/core-edu_contract.md#student-elective
*
- * URL 状态：?q=（客户端按名称过滤，MSW 不支持服务端过滤）
+ * URL 状态：?q=&status=&mode=（客户端按名称/状态/选课模式过滤）
*
- * 两分区结构：
- * - 我的选课（mock 空态，无独立 hook）
- * - 可选课程（列表表格 + 选课操作）
+ * 两分区结构（Card 网格布局）：
+ * - 我的选课（已选课程 Card 网格 + 退课操作 + 退课确认对话框）
+ * - 可选课程（可选课程 Card 网格 + 选课操作 + 状态/选课模式徽章）
+ *
+ * 筛选器：
+ * - 名称搜索（FilterSearchInput）
+ * - 状态筛选（Select：全部/开放中/已关闭/进行中/已结束）
+ * - 选课模式筛选（Select：全部/先到先得/抽签）
*
* 三态规范（§11.3 DoD）：loading（骨架）/ error（局部降级）/ empty（EmptyState）
*
@@ -22,22 +28,65 @@
import { BookOpen } from "lucide-react";
import Link from "next/link";
import { useSearchParams, useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
import { useTranslations } from "next-intl";
-import { useElectiveCourses, useEnrollCourse, type Course } from "@/lib/api";
+import {
+ useDropCourse,
+ useElectiveCourses,
+ useEnrollCourse,
+ useStudentSelections,
+ type Course,
+} from "@/lib/api";
import { notify } from "@/shared/lib/notify";
import { Button } from "@/shared/components/ui/button";
import { EmptyState } from "@/shared/components/ui/empty-state";
-import { FilterSearchInput } from "@/shared/components/ui/filter-bar";
+import {
+ FilterBar,
+ FilterSearchInput,
+} from "@/shared/components/ui/filter-bar";
+import { Select } from "@/shared/components/ui/select";
+import { Textarea } from "@/shared/components/ui/textarea";
import {
ListPageShell,
ListPageSkeleton,
} from "@/shared/components/page-templates";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/shared/components/ui/alert-dialog";
/** 默认学期（无独立 hook 查询当前学期，前端固定值） */
const DEFAULT_TERM_ID = "2026-spring";
+/** 课程状态枚举（与 Course.status 对齐） */
+type CourseStatus = NonNullable ;
+
+/** 选课模式枚举（与 Course.selectionMode 对齐） */
+type SelectionMode = NonNullable;
+
+/** 状态筛选选项 */
+const STATUS_FILTER_OPTIONS: readonly { value: string; labelKey: string }[] = [
+ { value: "", labelKey: "statusAll" },
+ { value: "open", labelKey: "statusOpen" },
+ { value: "closed", labelKey: "statusClosed" },
+ { value: "in_progress", labelKey: "statusInProgress" },
+ { value: "completed", labelKey: "statusCompleted" },
+] as const;
+
+/** 选课模式筛选选项 */
+const MODE_FILTER_OPTIONS: readonly { value: string; labelKey: string }[] = [
+ { value: "", labelKey: "modeAll" },
+ { value: "fcfs", labelKey: "modeFcfs" },
+ { value: "lottery", labelKey: "modeLottery" },
+] as const;
+
/**
* 选课列表客户端主体。需由 server page 包裹在 中
* （useSearchParams 要求 Suspense 边界，Next.js 15 强制）。
@@ -50,17 +99,46 @@ export function StudentElectiveListClient(): React.ReactElement {
const [, startTransition] = useTransition();
const q = searchParams.get("q") ?? "";
+ const statusFilter = searchParams.get("status") ?? "";
+ const modeFilter = searchParams.get("mode") ?? "";
// @contract-pending：MSW 兜底
- const { data, loading, error } = useElectiveCourses(DEFAULT_TERM_ID);
+ const {
+ data: availableData,
+ loading,
+ error,
+ } = useElectiveCourses(DEFAULT_TERM_ID);
+ const { data: selectionsData, loading: selectionsLoading } =
+ useStudentSelections(DEFAULT_TERM_ID);
const enrollMutation = useEnrollCourse();
+ const dropMutation = useDropCourse();
- const items = data ?? [];
+ // 退课对话框状态
+ const [dropTarget, setDropTarget] = useState(null);
+ const [dropReason, setDropReason] = useState("");
+ const [dropDialogOpen, setDropDialogOpen] = useState(false);
- // 客户端按名称过滤（MSW 不支持服务端过滤）
- const filtered = q
- ? items.filter((c) => c.name.toLowerCase().includes(q.toLowerCase()))
- : items;
+ const availableItems = availableData ?? [];
+ const selectionItems = selectionsData ?? [];
+
+ // 客户端按名称/状态/模式过滤可选课程
+ const filteredAvailable = useMemo(() => {
+ return availableItems.filter((c) => {
+ if (q) {
+ const lower = q.toLowerCase();
+ if (
+ !c.name.toLowerCase().includes(lower) &&
+ !(c.subjectName ?? "").toLowerCase().includes(lower) &&
+ !(c.description ?? "").toLowerCase().includes(lower)
+ ) {
+ return false;
+ }
+ }
+ if (statusFilter && c.status !== statusFilter) return false;
+ if (modeFilter && c.selectionMode !== modeFilter) return false;
+ return true;
+ });
+ }, [availableItems, q, statusFilter, modeFilter]);
const updateQuery = (key: string, value: string): void => {
const params = new URLSearchParams(searchParams.toString());
@@ -85,6 +163,32 @@ export function StudentElectiveListClient(): React.ReactElement {
})();
};
+ const openDropDialog = (course: Course): void => {
+ setDropTarget(course);
+ setDropReason("");
+ setDropDialogOpen(true);
+ };
+
+ const closeDropDialog = (): void => {
+ setDropDialogOpen(false);
+ setDropTarget(null);
+ setDropReason("");
+ };
+
+ const handleConfirmDrop = (): void => {
+ if (!dropTarget) return;
+ const courseId = dropTarget.id;
+ void (async (): Promise => {
+ try {
+ await dropMutation.run(courseId, dropReason.trim() || undefined);
+ notify.success(t("dropSuccess"));
+ closeDropDialog();
+ } catch (err) {
+ notify.error(t("dropError", { message: String(err) }));
+ }
+ })();
+ };
+
const errorNode = error ? (
@@ -94,14 +198,11 @@ export function StudentElectiveListClient(): React.ReactElement {
) : undefined;
- const emptyNode = (
+ const emptyAvailableNode = (
);
@@ -111,55 +212,272 @@ export function StudentElectiveListClient(): React.ReactElement {
description={t("description")}
icon={}
filters={
- updateQuery("q", v)}
- />
+
+ updateQuery("q", v)}
+ />
+
}
- loading={loading}
+ loading={loading && availableItems.length === 0}
loadingNode={}
- empty={filtered.length === 0 && !loading}
- emptyNode={emptyNode}
errorNode={errorNode}
pagination={
{t("mswNotice")}
- {t("total", { count: filtered.length })}
+ {t("total", { count: filteredAvailable.length })}
}
>
-
- {/* 我的选课 - mock 空态（无独立 hook 查询已选课程） */}
-
-
- {t("sectionMySelections")}
-
-
- {t("emptyMySelections")}
-
-
+
+ {/* 我的选课 - Card 网格 */}
+
+
+
+ {t("sectionMySelections")}
+
+
+ {t("total", { count: selectionItems.length })}
+
+
+ {selectionsLoading && selectionItems.length === 0 ? (
+
+ ) : selectionItems.length === 0 ? (
+
+
+ {t("emptyMySelections")}
+
+
- {/* 可选课程 */}
-
-
- {t("sectionAvailableCourses")}
-
-
-
+ {/* 可选课程 - Card 网格 */}
+
+
+
+ {t("sectionAvailableCourses")}
+
+
+ {t("total", { count: filteredAvailable.length })}
+
+
+ {filteredAvailable.length === 0 && !loading ? (
+ emptyAvailableNode
+ ) : (
+
+ )}
+
+
+ {/* 退课确认对话框 */}
+
+
+
+ {t("dropDialogTitle")}
+
+ {t("dropDialogDescription", {
+ courseName: dropTarget?.name ?? "",
+ })}
+
+
+
+
+ |