预演

web/src/layouts/AdminLayout.vue

@@ -205,6 +205,10 @@ const navigationGroups = computed<NavigationGroup[]>(() => [
     key: 'graduation',
     label: '毕业管理',
     items: [
+      ...whenVisible(
+        isStudent.value,
+        { path: '/academic-planning', label: '学业规划与毕业模拟' },
+      ),
       ...whenVisible(
         hasAnyRole(['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Student']),
         { path: '/graduation-audits', label: isStudent.value ? '毕业资格' : '毕业审核' },

web/src/router/index.ts

@@ -118,6 +118,12 @@ const router = createRouter({
           component: () => import('../views/StudentCurriculumView.vue'),
           meta: { roles: ['Student'] },
         },
+        {
+          path: 'academic-planning',
+          name: 'academic-planning',
+          component: () => import('../views/AcademicPlanningView.vue'),
+          meta: { roles: ['Student'] },
+        },
         {
           path: 'teaching-tasks',
           name: 'teaching-tasks',

web/src/views/AcademicPlanningView.vue

@@ -0,0 +1,815 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Delete, MagicStick, Refresh, Search } from '@element-plus/icons-vue'
+import http, { apiErrorMessage } from '../api/http'
+
+interface PlanningTerm {
+  semester: number
+  label: string
+  isBeyondStandard: boolean
+  courseIds: string[]
+}
+
+const loading = ref(false)
+const simulationLoading = ref(false)
+const initialized = ref(false)
+const payload = ref<any>(null)
+const simulation = ref<any>(null)
+const terms = ref<PlanningTerm[]>([])
+const keyword = ref('')
+const moduleFilter = ref('')
+let simulationTimer: ReturnType<typeof setTimeout> | undefined
+
+const courses = computed<any[]>(() => payload.value?.courses ?? [])
+const baseline = computed(() => payload.value?.baseline ?? {})
+const projected = computed(() => simulation.value?.projected ?? {
+  earnedCredits: baseline.value.earnedCredits ?? 0,
+  planCompletedCredits: baseline.value.planCompletedCredits ?? 0,
+  creditGap: baseline.value.creditGap ?? 0,
+  completionRate: baseline.value.completionRate ?? 0,
+  requirementCount: baseline.value.requirementCount ?? 0,
+  passedRequirementCount: baseline.value.passedRequirementCount ?? 0,
+  missingRequirements: baseline.value.missingRequirements ?? [],
+  graduationConclusion: 'Ineligible',
+  estimatedGraduationTerm: '等待模拟',
+  isBeyondStandard: false,
+})
+const modules = computed(() =>
+  [...new Map(courses.value.map((course) =>
+    [course.moduleCode, { code: course.moduleCode, name: course.moduleName }],
+  )).values()],
+)
+const assigned = computed(() => {
+  const result = new Map<string, number>()
+  for (const term of terms.value) {
+    for (const courseId of term.courseIds) result.set(courseId, term.semester)
+  }
+  return result
+})
+const remainingCourses = computed(() => {
+  const normalized = keyword.value.trim().toLowerCase()
+  return courses.value.filter((course) => {
+    if (['Completed', 'InProgress', 'Retaking'].includes(course.status)) return false
+    if (moduleFilter.value && course.moduleCode !== moduleFilter.value) return false
+    return !normalized ||
+      `${course.courseCode} ${course.courseName} ${course.moduleName}`
+        .toLowerCase()
+        .includes(normalized)
+  })
+})
+const plannedCourseCount = computed(() =>
+  terms.value.reduce((count, term) => count + term.courseIds.length, 0),
+)
+const plannedCredits = computed(() =>
+  courses.value
+    .filter((course) => assigned.value.has(course.courseId))
+    .reduce((sum, course) => sum + Number(course.credits), 0),
+)
+const conflictCourseIds = computed(() =>
+  new Set<string>((simulation.value?.conflicts ?? []).map((item: any) => item.courseId)),
+)
+const termSummaryMap = computed(() =>
+  new Map<number, any>((simulation.value?.termSummaries ?? [])
+    .map((item: any) => [item.semester, item])),
+)
+
+function courseById(courseId: string) {
+  return courses.value.find((course) => course.courseId === courseId)
+}
+
+function typeLabel(type: string) {
+  return type === 'Required' ? '指定必修' : '组内选修'
+}
+
+function setCourseSemester(courseId: string, semester?: number) {
+  for (const term of terms.value) {
+    term.courseIds = term.courseIds.filter((id) => id !== courseId)
+  }
+  if (semester) {
+    const target = terms.value.find((term) => term.semester === semester)
+    if (target) target.courseIds.push(courseId)
+  }
+}
+
+function removeCourse(courseId: string) {
+  setCourseSemester(courseId)
+}
+
+function applySuggestion() {
+  const target = terms.value.find(
+    (term) => term.semester === payload.value?.plan?.nextSemester,
+  )
+  if (!target) return
+  const ids = (payload.value?.nextSemesterSuggestion ?? [])
+    .map((course: any) => course.courseId)
+    .filter((courseId: string) => !assigned.value.has(courseId))
+  target.courseIds.push(...ids)
+  ElMessage.success(`已把 ${ids.length} 门建议课程安排到下一学期`)
+}
+
+function clearPlan() {
+  for (const term of terms.value) term.courseIds = []
+}
+
+async function simulate() {
+  simulationLoading.value = true
+  try {
+    simulation.value = (await http.post('/student/academic-planning/simulate', {
+      terms: terms.value.map((term) => ({
+        semester: term.semester,
+        courseIds: term.courseIds,
+      })),
+    })).data
+  } catch (error) {
+    ElMessage.error(apiErrorMessage(error))
+  } finally {
+    simulationLoading.value = false
+  }
+}
+
+function scheduleSimulation() {
+  if (!initialized.value) return
+  if (simulationTimer) clearTimeout(simulationTimer)
+  simulationTimer = setTimeout(simulate, 180)
+}
+
+async function load() {
+  loading.value = true
+  initialized.value = false
+  try {
+    payload.value = (await http.get('/student/academic-planning')).data
+    terms.value = payload.value.terms.map((term: any) => ({
+      ...term,
+      courseIds: [],
+    }))
+    initialized.value = true
+    await simulate()
+  } catch (error) {
+    ElMessage.error(apiErrorMessage(error))
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(terms, scheduleSimulation, { deep: true })
+onMounted(load)
+onBeforeUnmount(() => {
+  if (simulationTimer) clearTimeout(simulationTimer)
+})
+</script>
+
+<template>
+  <div class="page-stack academic-planning-page" v-loading="loading">
+    <section class="page-intro">
+      <div>
+        <span class="section-kicker">DEGREE FLIGHT PLAN</span>
+        <h2>学业规划与毕业模拟</h2>
+        <p>把未来课程排进学期航线，实时检查培养方案完成度、先修顺序与毕业时间。</p>
+      </div>
+      <div class="page-actions">
+        <el-button :icon="Refresh" @click="load">重置数据</el-button>
+        <el-button
+          type="primary"
+          :icon="MagicStick"
+          :disabled="!payload?.nextSemesterSuggestion?.length"
+          @click="applySuggestion"
+        >
+          采用下学期建议
+        </el-button>
+      </div>
+    </section>
+
+    <template v-if="payload">
+      <section class="planning-cockpit">
+        <div class="student-call-sign">
+          <span>{{ payload.student.enrollmentYear }} 级 · {{ payload.student.collegeName }}</span>
+          <h3>{{ payload.student.name }}的毕业航线</h3>
+          <p>{{ payload.student.studentNumber }} · {{ payload.student.majorName }} · {{ payload.plan.name }} {{ payload.plan.version }}</p>
+        </div>
+        <div class="completion-dial" aria-label="模拟培养方案完成度">
+          <span>方案完成度</span>
+          <b>{{ projected.completionRate }}<small>%</small></b>
+          <i><em :style="{ width: `${projected.completionRate}%` }" /></i>
+        </div>
+        <div class="arrival-board">
+          <span>预计毕业</span>
+          <b>{{ projected.estimatedGraduationTerm }}</b>
+          <small :class="{ delayed: projected.isBeyondStandard }">
+            {{ projected.isBeyondStandard ? '超过标准学制' : '标准学制内' }}
+          </small>
+        </div>
+      </section>
+
+      <section class="planning-metrics" aria-label="毕业模拟摘要">
+        <div>
+          <span>已获 / 预计学分</span>
+          <b>{{ baseline.earnedCredits }} <small>→</small> {{ projected.earnedCredits }}</b>
+        </div>
+        <div :class="{ alert: projected.creditGap > 0 }">
+          <span>毕业学分缺口</span>
+          <b>{{ projected.creditGap }}<small> 学分</small></b>
+        </div>
+        <div>
+          <span>培养要求</span>
+          <b>{{ projected.passedRequirementCount }}<small> / {{ projected.requirementCount }} 项</small></b>
+        </div>
+        <div>
+          <span>本次模拟</span>
+          <b>{{ plannedCourseCount }}<small> 门 · {{ plannedCredits }} 学分</small></b>
+        </div>
+      </section>
+
+      <section class="next-term-brief">
+        <header>
+          <span>NEXT TERM ADVICE</span>
+          <h3>下一学期建议</h3>
+          <p>{{ payload.terms[0]?.label }}</p>
+        </header>
+        <div v-if="payload.nextSemesterSuggestion.length" class="suggestion-list">
+          <article
+            v-for="course in payload.nextSemesterSuggestion"
+            :key="course.courseId"
+          >
+            <div>
+              <span>{{ course.courseCode }} · {{ typeLabel(course.type) }}</span>
+              <b>{{ course.courseName }}</b>
+            </div>
+            <small>{{ course.credits }} 学分</small>
+            <p>{{ course.reason }}</p>
+          </article>
+        </div>
+        <p v-else class="no-suggestion">
+          结合当前在读课程、先修条件和培养方案建议学期，下一学期暂无需要额外安排的课程；仍可在下方课程清单模拟其他路径。
+        </p>
+      </section>
+
+      <section
+        v-if="payload.latestGraduationAudit"
+        class="official-audit-strip"
+      >
+        <div>
+          <span>最近正式毕业审核</span>
+          <b>{{ payload.latestGraduationAudit.batchName }}</b>
+          <small>{{ payload.latestGraduationAudit.publishedAt?.slice(0, 10) }}</small>
+        </div>
+        <p>
+          正式结果：{{ payload.latestGraduationAudit.conclusion === 'Eligible' ? '符合毕业条件' : '暂不符合毕业条件' }}
+          · 已认定 {{ payload.latestGraduationAudit.earnedCredits }} 学分
+        </p>
+        <em>模拟不会更改正式审核结果</em>
+      </section>
+
+      <section
+        v-if="simulation?.conflicts?.length || simulation?.warnings?.length"
+        class="planning-alerts"
+      >
+        <article v-for="item in simulation.conflicts" :key="`${item.type}-${item.courseId}-${item.prerequisiteCourseId}`">
+          <span>先修冲突</span>
+          <p>{{ item.message }}</p>
+        </article>
+        <article v-for="(item, index) in simulation.warnings" :key="`${item.type}-${index}`" class="warning">
+          <span>安排提示</span>
+          <p>{{ item.message }}</p>
+        </article>
+      </section>
+
+      <section class="planner-workspace">
+        <aside class="course-pool">
+          <header>
+            <div>
+              <span>COURSE MANIFEST</span>
+              <h3>待规划课程</h3>
+            </div>
+            <b>{{ remainingCourses.length }}</b>
+          </header>
+          <div class="pool-filters">
+            <el-input
+              v-model="keyword"
+              :prefix-icon="Search"
+              clearable
+              placeholder="搜索课程"
+            />
+            <el-select v-model="moduleFilter" clearable placeholder="全部培养模块">
+              <el-option
+                v-for="module in modules"
+                :key="module.code"
+                :label="module.name"
+                :value="module.code"
+              />
+            </el-select>
+          </div>
+          <div class="pool-list">
+            <article
+              v-for="course in remainingCourses"
+              :key="course.courseId"
+              :class="{
+                assigned: assigned.has(course.courseId),
+                conflicted: conflictCourseIds.has(course.courseId),
+              }"
+            >
+              <div class="course-manifest-line">
+                <span>{{ course.courseCode }} · {{ course.moduleName }}</span>
+                <i>{{ course.credits }} 学分</i>
+              </div>
+              <h4>{{ course.courseName }}</h4>
+              <div class="course-flags">
+                <span>{{ typeLabel(course.type) }}</span>
+                <span>建议第 {{ course.recommendedSemester }} 学期</span>
+                <span v-if="course.status === 'Failed'" class="failed">有未通过记录</span>
+              </div>
+              <p v-if="course.prerequisites.length">
+                先修：
+                <template v-for="(item, index) in course.prerequisites" :key="item.courseId">
+                  <b :class="{ ready: item.isCompleted || item.isInProgress }">{{ item.courseName }}</b>{{ Number(index) < course.prerequisites.length - 1 ? '、' : '' }}
+                </template>
+              </p>
+              <el-select
+                :model-value="assigned.get(course.courseId)"
+                clearable
+                placeholder="安排到学期"
+                @change="setCourseSemester(course.courseId, $event)"
+              >
+                <el-option
+                  v-for="term in terms"
+                  :key="term.semester"
+                  :label="`第 ${term.semester} 学期 · ${term.label}`"
+                  :value="term.semester"
+                />
+              </el-select>
+            </article>
+            <el-empty v-if="!remainingCourses.length" description="没有符合条件的待规划课程" />
+          </div>
+        </aside>
+
+        <main class="semester-runway" v-loading="simulationLoading">
+          <header>
+            <div>
+              <span>SEMESTER RUNWAY</span>
+              <h3>未来学期航线</h3>
+              <p>课程必须在其先修课程之后；单学期超过 30 学分会标记负荷风险。</p>
+            </div>
+            <el-button text :icon="Delete" @click="clearPlan">清空安排</el-button>
+          </header>
+
+          <div class="runway-line">
+            <article
+              v-for="term in terms"
+              :key="term.semester"
+              class="semester-stop"
+              :class="{ beyond: term.isBeyondStandard }"
+            >
+              <div class="semester-marker">
+                <i>{{ term.semester }}</i>
+                <span>{{ term.isBeyondStandard ? '延长学期' : `第 ${term.semester} 学期` }}</span>
+              </div>
+              <div class="semester-sheet">
+                <header>
+                  <div>
+                    <span>{{ term.label }}</span>
+                    <h4>{{ term.semester === payload.plan.nextSemester ? '下一学期' : `未来第 ${term.semester - payload.plan.currentSemester} 学期` }}</h4>
+                  </div>
+                  <b>
+                    {{ termSummaryMap.get(term.semester)?.credits ?? 0 }}
+                    <small>学分</small>
+                  </b>
+                </header>
+                <div v-if="term.courseIds.length" class="scheduled-courses">
+                  <article
+                    v-for="courseId in term.courseIds"
+                    :key="courseId"
+                    :class="{ conflicted: conflictCourseIds.has(courseId) }"
+                  >
+                    <div>
+                      <span>{{ courseById(courseId)?.courseCode }} · {{ typeLabel(courseById(courseId)?.type) }}</span>
+                      <b>{{ courseById(courseId)?.courseName }}</b>
+                    </div>
+                    <small>{{ courseById(courseId)?.credits }} 学分</small>
+                    <el-button
+                      text
+                      type="danger"
+                      aria-label="移除课程"
+                      @click="removeCourse(courseId)"
+                    >×</el-button>
+                  </article>
+                </div>
+                <p v-else class="empty-semester">尚未安排课程，可从左侧课程清单选择学期。</p>
+              </div>
+            </article>
+            <div class="graduation-gate" :class="{ ready: projected.graduationConclusion === 'Eligible' }">
+              <span>GRADUATION GATE</span>
+              <b>{{ projected.graduationConclusion === 'Eligible' ? '模拟达到毕业条件' : '仍有培养要求未完成' }}</b>
+              <p>{{ projected.estimatedGraduationTerm }}</p>
+            </div>
+          </div>
+        </main>
+      </section>
+
+      <section class="planning-closeout">
+        <div>
+          <span>剩余培养要求</span>
+          <h3>{{ projected.missingRequirements?.length ? `还需完成 ${projected.missingRequirements.length} 项` : '培养要求已覆盖' }}</h3>
+        </div>
+        <div class="missing-requirements">
+          <span v-for="item in projected.missingRequirements" :key="item">{{ item }}</span>
+          <em v-if="!projected.missingRequirements?.length">本次模拟已覆盖全部指定课程和课程组要求</em>
+        </div>
+        <ul>
+          <li v-for="item in payload.assumptions" :key="item">{{ item }}</li>
+        </ul>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.planning-cockpit {
+  min-height: 154px;
+  display: grid;
+  grid-template-columns: minmax(300px, 1.2fr) minmax(230px, .7fr) minmax(280px, .9fr);
+  color: white;
+  border: 1px solid #15275b;
+  background:
+    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
+    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
+    linear-gradient(112deg, #142557, #253e78 63%, #0c6f70);
+  background-size: 26px 26px, 26px 26px, auto;
+}
+.student-call-sign,
+.completion-dial,
+.arrival-board { padding: 26px 28px; }
+.student-call-sign > span,
+.completion-dial > span,
+.arrival-board > span,
+.course-pool header span,
+.semester-runway > header span {
+  color: #69d8c7;
+  font: 700 9px/1.2 Consolas, monospace;
+  letter-spacing: .12em;
+}
+.student-call-sign h3 {
+  margin: 10px 0 7px;
+  font-family: "STZhongsong", "Songti SC", serif;
+  font-size: 25px;
+  letter-spacing: .04em;
+}
+.student-call-sign p { margin: 0; color: #c8d1e6; font-size: 10px; }
+.completion-dial,
+.arrival-board {
+  border-left: 1px solid rgba(255,255,255,.16);
+}
+.completion-dial b {
+  display: block;
+  margin: 12px 0 11px;
+  font: 700 34px/1 Consolas, monospace;
+}
+.completion-dial b small { font-size: 13px; }
+.completion-dial i {
+  display: block;
+  height: 6px;
+  background: rgba(255,255,255,.17);
+}
+.completion-dial em {
+  display: block;
+  height: 100%;
+  background: #5fe0c8;
+  transition: width .2s ease;
+}
+.arrival-board b {
+  display: block;
+  margin: 14px 0 10px;
+  font-family: "STZhongsong", "Songti SC", serif;
+  font-size: 16px;
+  line-height: 1.45;
+}
+.arrival-board small {
+  padding-left: 8px;
+  color: #76e1cf;
+  border-left: 3px solid #5fe0c8;
+  font-size: 10px;
+}
+.arrival-board small.delayed { color: #ffd48a; border-color: #e8a840; }
+.planning-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border: 1px solid var(--line);
+  background: white;
+}
+.planning-metrics > div {
+  min-height: 80px;
+  padding: 15px 19px;
+  display: grid;
+  align-content: center;
+  border-right: 1px solid var(--line);
+  box-shadow: inset 0 3px #23827a;
+}
+.planning-metrics > div:last-child { border-right: 0; }
+.planning-metrics > div.alert { box-shadow: inset 0 3px #bd5a4f; }
+.planning-metrics span { color: var(--muted); font-size: 9px; }
+.planning-metrics b {
+  margin-top: 8px;
+  color: var(--ink);
+  font: 700 21px/1 Consolas, monospace;
+}
+.planning-metrics small { color: var(--muted); font-size: 9px; }
+.next-term-brief {
+  min-height: 74px;
+  padding: 13px 16px;
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 18px;
+  align-items: center;
+  border: 1px solid #cfd8e5;
+  background: #f7f9fc;
+}
+.next-term-brief > header span {
+  color: var(--teal);
+  font: 700 9px/1.2 Consolas, monospace;
+  letter-spacing: .1em;
+}
+.next-term-brief > header h3 { margin: 5px 0 3px; font-size: 14px; }
+.next-term-brief > header p,
+.no-suggestion { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
+.suggestion-list { display: flex; flex-wrap: wrap; gap: 7px; }
+.suggestion-list article {
+  min-width: 220px;
+  padding: 9px 11px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px 12px;
+  border-left: 3px solid #168377;
+  background: white;
+}
+.suggestion-list span { color: var(--teal); font-size: 8px; }
+.suggestion-list b { display: block; margin-top: 3px; font-size: 10px; }
+.suggestion-list small { color: var(--indigo); font: 700 10px/1.2 Consolas, monospace; }
+.suggestion-list p {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: var(--muted);
+  font-size: 8px;
+}
+.official-audit-strip {
+  min-height: 58px;
+  padding: 10px 16px;
+  display: grid;
+  grid-template-columns: minmax(220px, .8fr) 1fr auto;
+  gap: 22px;
+  align-items: center;
+  border: 1px solid #cdd6e5;
+  background: #f5f8fc;
+}
+.official-audit-strip div { display: grid; gap: 3px; }
+.official-audit-strip span { color: var(--teal); font-size: 9px; font-weight: 700; }
+.official-audit-strip b { font-size: 11px; }
+.official-audit-strip small,
+.official-audit-strip p { margin: 0; color: var(--muted); font-size: 9px; }
+.official-audit-strip em {
+  padding: 5px 8px;
+  color: #52617a;
+  border: 1px solid #cdd5e1;
+  font-size: 9px;
+  font-style: normal;
+}
+.planning-alerts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.planning-alerts article {
+  min-height: 55px;
+  padding: 10px 13px;
+  display: grid;
+  grid-template-columns: 74px 1fr;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid #e2b9b5;
+  background: #fff7f6;
+}
+.planning-alerts article.warning { border-color: #e4cca0; background: #fffaf0; }
+.planning-alerts span { color: #a4423b; font-size: 9px; font-weight: 700; }
+.planning-alerts .warning span { color: #9b6417; }
+.planning-alerts p { margin: 0; color: #5d4b4b; font-size: 10px; line-height: 1.5; }
+.planner-workspace {
+  display: grid;
+  grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+.course-pool,
+.semester-runway {
+  border: 1px solid var(--line);
+  background: white;
+}
+.course-pool {
+  position: sticky;
+  top: 14px;
+}
+.course-pool > header,
+.semester-runway > header {
+  min-height: 72px;
+  padding: 15px 17px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--line);
+  background: #f7f9fc;
+}
+.course-pool h3,
+.semester-runway h3 { margin: 5px 0 0; font-size: 15px; }
+.course-pool > header b {
+  color: var(--indigo);
+  font: 700 25px/1 Consolas, monospace;
+}
+.pool-filters {
+  padding: 11px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  border-bottom: 1px solid var(--line);
+}
+.pool-list {
+  max-height: 680px;
+  overflow: auto;
+}
+.pool-list > article {
+  padding: 14px;
+  border-bottom: 1px solid #e8ebf0;
+  box-shadow: inset 3px 0 #8d97aa;
+  transition: background .15s ease, box-shadow .15s ease;
+}
+.pool-list > article.assigned { background: #f1f8f7; box-shadow: inset 3px 0 #0d8175; }
+.pool-list > article.conflicted { background: #fff6f5; box-shadow: inset 3px 0 #b64b43; }
+.course-manifest-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.course-manifest-line span { color: var(--teal); font: 700 9px/1.2 Consolas, monospace; }
+.course-manifest-line i { color: var(--muted); font-size: 9px; font-style: normal; }
+.pool-list h4 { margin: 7px 0; font-size: 13px; }
+.course-flags { display: flex; flex-wrap: wrap; gap: 5px; }
+.course-flags span {
+  padding: 3px 5px;
+  color: #58657a;
+  background: #edf0f4;
+  font-size: 8px;
+}
+.course-flags span.failed { color: #a43f3b; background: #faeae8; }
+.pool-list article > p { margin: 8px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
+.pool-list article > p b { color: #a4423b; font-weight: 600; }
+.pool-list article > p b.ready { color: #0b796f; }
+.pool-list .el-select { width: 100%; margin-top: 9px; }
+.semester-runway > header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
+.runway-line {
+  position: relative;
+  padding: 18px 18px 22px 82px;
+}
+.runway-line::before {
+  position: absolute;
+  top: 31px;
+  bottom: 64px;
+  left: 43px;
+  width: 2px;
+  content: "";
+  background: linear-gradient(#233b77, #0d8275 76%, #d0d6df);
+}
+.semester-stop {
+  position: relative;
+  min-height: 116px;
+  margin-bottom: 13px;
+}
+.semester-marker {
+  position: absolute;
+  top: 15px;
+  left: -67px;
+  width: 52px;
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+}
+.semester-marker i {
+  width: 31px;
+  height: 31px;
+  display: grid;
+  place-items: center;
+  color: white;
+  border: 4px solid white;
+  outline: 1px solid #263c78;
+  background: #263c78;
+  font: 700 11px/1 Consolas, monospace;
+  font-style: normal;
+}
+.semester-marker span { color: var(--muted); font-size: 8px; text-align: center; }
+.semester-stop.beyond .semester-marker i { outline-color: #a7752a; background: #a7752a; }
+.semester-sheet { border: 1px solid #dce1e9; }
+.semester-sheet > header {
+  min-height: 61px;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f8f9fb;
+  border-bottom: 1px solid #e1e5eb;
+}
+.semester-sheet header span { color: var(--teal); font-size: 9px; }
+.semester-sheet header h4 { margin: 4px 0 0; font-size: 13px; }
+.semester-sheet header > b { color: var(--indigo); font: 700 18px/1 Consolas, monospace; }
+.semester-sheet header > b small { color: var(--muted); font-size: 8px; }
+.scheduled-courses {
+  padding: 9px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+}
+.scheduled-courses article {
+  min-height: 58px;
+  padding: 9px 8px 9px 11px;
+  display: grid;
+  grid-template-columns: 1fr auto 25px;
+  gap: 8px;
+  align-items: center;
+  border-left: 3px solid #0c8275;
+  background: #f1f8f7;
+}
+.scheduled-courses article.conflicted { border-color: #b64b43; background: #fff1ef; }
+.scheduled-courses span { color: var(--muted); font-size: 8px; }
+.scheduled-courses b { display: block; margin-top: 4px; font-size: 10px; }
+.scheduled-courses small { color: var(--muted); font-size: 8px; }
+.empty-semester { margin: 0; padding: 18px 14px; color: #9199a8; font-size: 9px; }
+.graduation-gate {
+  min-height: 76px;
+  padding: 14px 18px;
+  display: grid;
+  grid-template-columns: 145px 1fr auto;
+  gap: 16px;
+  align-items: center;
+  color: #5d6676;
+  border: 1px dashed #aeb6c3;
+  background: #f7f8fa;
+}
+.graduation-gate.ready {
+  color: #075f59;
+  border-color: #2b9187;
+  background: #edf8f6;
+}
+.graduation-gate span { font: 700 9px/1.2 Consolas, monospace; letter-spacing: .1em; }
+.graduation-gate b { font-size: 13px; }
+.graduation-gate p { margin: 0; font-size: 9px; }
+.planning-closeout {
+  padding: 19px;
+  display: grid;
+  grid-template-columns: 190px 1fr minmax(260px, .7fr);
+  gap: 20px;
+  align-items: start;
+  border: 1px solid var(--line);
+  background: white;
+}
+.planning-closeout > div:first-child span { color: var(--teal); font-size: 9px; font-weight: 700; }
+.planning-closeout h3 { margin: 7px 0 0; font-size: 15px; }
+.missing-requirements { display: flex; flex-wrap: wrap; gap: 6px; }
+.missing-requirements span {
+  padding: 5px 7px;
+  color: #705829;
+  border: 1px solid #ead6aa;
+  background: #fff9ed;
+  font-size: 9px;
+}
+.missing-requirements em { color: #0d766d; font-size: 10px; font-style: normal; }
+.planning-closeout ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 1.7; }
+
+@media (max-width: 1050px) {
+  .planning-cockpit { grid-template-columns: 1.2fr .8fr; }
+  .arrival-board { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
+  .planner-workspace { grid-template-columns: 300px minmax(0, 1fr); }
+  .scheduled-courses { grid-template-columns: 1fr; }
+  .planning-closeout { grid-template-columns: 170px 1fr; }
+  .planning-closeout ul { grid-column: 1 / -1; }
+}
+
+@media (max-width: 760px) {
+  .planning-cockpit { grid-template-columns: 1fr; }
+  .completion-dial,
+  .arrival-board { border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
+  .planning-metrics { grid-template-columns: 1fr 1fr; }
+  .planning-metrics > div:nth-child(2) { border-right: 0; }
+  .planning-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
+  .official-audit-strip { grid-template-columns: 1fr; gap: 7px; }
+  .official-audit-strip em { width: max-content; }
+  .planning-alerts { grid-template-columns: 1fr; }
+  .next-term-brief { grid-template-columns: 1fr; gap: 8px; }
+  .planner-workspace { grid-template-columns: 1fr; }
+  .course-pool { position: static; }
+  .pool-list { max-height: 460px; }
+  .runway-line { padding-left: 64px; }
+  .runway-line::before { left: 31px; }
+  .semester-marker { left: -55px; }
+  .graduation-gate { grid-template-columns: 1fr; gap: 6px; }
+  .planning-closeout { grid-template-columns: 1fr; }
+  .planning-closeout ul { grid-column: auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .completion-dial em,
+  .pool-list > article { transition: none; }
+}
+</style>

web/src/views/CoursesView.vue

@@ -11,6 +11,7 @@ const rows = ref<any[]>([])
 const total = ref(0)
 const colleges = ref<any[]>([])
 const categories = ref<any[]>([])
+const courseOptions = ref<any[]>([])
 const dialogVisible = ref(false)
 const editingId = ref('')
 const importing = ref(false)
@@ -61,6 +62,9 @@ const maintenanceScope = computed(() =>
     ? `${formColleges.value[0]?.name ?? '所属学院'} · 专业课与实践课`
     : '全校课程 · 全性质',
 )
+const prerequisiteOptions = computed(() =>
+  courseOptions.value.filter((item) => item.id !== editingId.value),
+)
 
 function canManageRow(row: any) {
   return row.canManage === true
@@ -81,6 +85,7 @@ function resetForm(row?: any) {
     nature: isCollegeAdmin.value ? 'MajorRequired' : 'GeneralRequired',
     assessmentMethod: 'Examination',
     description: '',
+    prerequisiteCourseIds: [],
     isEnabled: true,
     sortOrder: 0,
   }, row ?? {})
@@ -168,6 +173,7 @@ async function handleImport(event: Event) {
     )
     query.page = 1
     await load()
+    courseOptions.value = (await http.get('/courses/options')).data
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -203,6 +209,7 @@ async function save() {
     ElMessage.success(editingId.value ? '课程已更新' : '课程已加入课程库')
     dialogVisible.value = false
     await load()
+    courseOptions.value = (await http.get('/courses/options')).data
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   }
@@ -224,12 +231,14 @@ async function remove(row: any) {
 }
 
 onMounted(async () => {
-  const [collegeRes, categoryRes] = await Promise.all([
+  const [collegeRes, categoryRes, courseRes] = await Promise.all([
     http.get('/base-data/colleges'),
     http.get('/base-data/course-categories'),
+    http.get('/courses/options'),
   ])
   colleges.value = collegeRes.data
   categories.value = categoryRes.data
+  courseOptions.value = courseRes.data
   await load()
 })
 </script>
@@ -331,6 +340,14 @@ onMounted(async () => {
         <el-table-column label="考核" width="80">
           <template #default="{ row }">{{ assessmentLabels[row.assessmentMethod] }}</template>
         </el-table-column>
+        <el-table-column label="先修课程" min-width="180">
+          <template #default="{ row }">
+            <span v-if="row.prerequisites?.length" class="prerequisite-list">
+              {{ row.prerequisites.map((item: any) => item.code).join('、') }}
+            </span>
+            <span v-else>—</span>
+          </template>
+        </el-table-column>
         <el-table-column label="状态" width="85">
           <template #default="{ row }">
             <span class="table-status" :class="{ off: !row.isEnabled }">{{ row.isEnabled ? '启用' : '停用' }}</span>
@@ -407,6 +424,24 @@ onMounted(async () => {
           <el-form-item label="讲授学时"><el-input-number v-model="form.lectureHours" :min="0" /></el-form-item>
           <el-form-item label="实践学时"><el-input-number v-model="form.practiceHours" :min="0" /></el-form-item>
         </div>
+        <el-form-item label="先修课程">
+          <el-select
+            v-model="form.prerequisiteCourseIds"
+            multiple
+            filterable
+            collapse-tags
+            collapse-tags-tooltip
+            placeholder="选择修读本课程前必须通过的课程"
+          >
+            <el-option
+              v-for="item in prerequisiteOptions"
+              :key="item.id"
+              :label="`${item.code} · ${item.name}`"
+              :value="item.id"
+            />
+          </el-select>
+          <span class="field-hint">学生规划时会检查这些课程是否已经通过，或安排在更早的模拟学期。</span>
+        </el-form-item>
         <el-form-item label="课程简介"><el-input v-model="form.description" type="textarea" :rows="3" /></el-form-item>
         <div class="form-grid compact">
           <el-form-item label="排序"><el-input-number v-model="form.sortOrder" :min="0" /></el-form-item>

web/src/views/StudentCurriculumView.vue

@@ -88,7 +88,10 @@ onMounted(load)
         <h2>我的培养方案</h2>
         <p>按培养方案核对已完成、在读、重修与尚未通过的课程。</p>
       </div>
-      <el-button :icon="Refresh" @click="load">刷新进度</el-button>
+      <div class="page-actions">
+        <el-button @click="$router.push('/academic-planning')">学业规划与毕业模拟</el-button>
+        <el-button :icon="Refresh" @click="load">刷新进度</el-button>
+      </div>
     </section>
 
     <section v-if="student" class="student-plan-head">