From d99c4204d7523501c2ce46cec05a72c38a153922 Mon Sep 17 00:00:00 2001
From: zhouwentao <zwt13703@gmail.com>
Date: Sun, 1 Feb 2026 14:34:27 +0800
Subject: [PATCH 1/2] feat:agentation plugin

---
 src/components.d.ts                           |   5 +
 src/components/school/AdmissionPrediction.vue | 267 ++++++++++
 src/components/school/EnrollmentPlan.vue      | 189 +++++++
 src/components/school/HistoricalScores.vue    | 154 ++++++
 src/components/school/Majors.vue              | 352 +++++++++++++
 src/components/school/SchoolOverview.vue      | 488 ++++++++++++++++++
 src/pages/school/[schoolCode].vue             | 368 +++++--------
 7 files changed, 1583 insertions(+), 240 deletions(-)
 create mode 100644 src/components/school/AdmissionPrediction.vue
 create mode 100644 src/components/school/EnrollmentPlan.vue
 create mode 100644 src/components/school/HistoricalScores.vue
 create mode 100644 src/components/school/Majors.vue
 create mode 100644 src/components/school/SchoolOverview.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 91be82a..1d52cfa 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -8,14 +8,19 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AdmissionPrediction: typeof import('./components/school/AdmissionPrediction.vue')['default']
     BackToTop: typeof import('./components/BackToTop.vue')['default']
     copy: typeof import('./components/ScoreForm copy.vue')['default']
     DictDemo: typeof import('./components/DictDemo.vue')['default']
+    EnrollmentPlan: typeof import('./components/school/EnrollmentPlan.vue')['default']
     FilterBar: typeof import('./components/FilterBar.vue')['default']
+    HistoricalScores: typeof import('./components/school/HistoricalScores.vue')['default']
     LoginForm: typeof import('./components/LoginForm.vue')['default']
+    Majors: typeof import('./components/school/Majors.vue')['default']
     README: typeof import('./components/README.md')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SchoolOverview: typeof import('./components/school/SchoolOverview.vue')['default']
     ScoreDictForm: typeof import('./components/ScoreDictForm.vue')['default']
     ScoreForm: typeof import('./components/ScoreForm.vue')['default']
     TheCounter: typeof import('./components/TheCounter.vue')['default']
diff --git a/src/components/school/AdmissionPrediction.vue b/src/components/school/AdmissionPrediction.vue
new file mode 100644
index 0000000..27f02ed
--- /dev/null
+++ b/src/components/school/AdmissionPrediction.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface PredictionResult {
+  probability: number
+  riskLevel: 'low' | 'medium' | 'high'
+  suggestedScore: number
+  advice: string
+}
+
+const score = ref('')
+const province = ref('山东')
+const category = ref('理科')
+
+const provinces = ['山东', '北京', '上海', '江苏', '浙江', '广东', '四川']
+const categories = ['理科', '文科', '综合']
+
+const isCalculating = ref(false)
+const predictionResult = ref<PredictionResult | null>(null)
+
+const calculatePrediction = () => {
+  if (!score.value) {
+    return
+  }
+
+  isCalculating.value = true
+  predictionResult.value = null
+
+  // 模拟计算延迟
+  setTimeout(() => {
+    const scoreNum = Number.parseInt(score.value, 10)
+    let probability = 0
+    let riskLevel: 'low' | 'medium' | 'high' = 'high'
+    let suggestedScore = 0
+    let advice = ''
+
+    // 根据分数计算录取概率（模拟）
+    if (province.value === '山东' && category.value === '理科') {
+      if (scoreNum >= 620) {
+        probability = 95
+        riskLevel = 'low'
+        suggestedScore = 600
+        advice = '您的分数远超我校录取分数线，录取概率极高，建议报考我校王牌专业。'
+      }
+      else if (scoreNum >= 590) {
+        probability = 80
+        riskLevel = 'low'
+        suggestedScore = 580
+        advice = '您的分数高于我校录取分数线，录取概率较大，建议报考热门专业。'
+      }
+      else if (scoreNum >= 560) {
+        probability = 60
+        riskLevel = 'medium'
+        suggestedScore = 550
+        advice = '您的分数接近我校录取分数线，建议冲刺热门专业，稳妥选择普通专业。'
+      }
+      else if (scoreNum >= 540) {
+        probability = 30
+        riskLevel = 'high'
+        suggestedScore = 530
+        advice = '您的分数低于我校录取分数线，建议谨慎报考，可考虑其他院校。'
+      }
+      else {
+        probability = 10
+        riskLevel = 'high'
+        suggestedScore = 520
+        advice = '您的分数偏低，录取概率较低，建议考虑其他院校或专业。'
+      }
+    }
+    else {
+      // 其他省份的模拟数据
+      if (scoreNum >= 600) {
+        probability = 90
+        riskLevel = 'low'
+        suggestedScore = 580
+        advice = '您的分数优势明显，录取概率很高。'
+      }
+      else if (scoreNum >= 570) {
+        probability = 70
+        riskLevel = 'medium'
+        suggestedScore = 550
+        advice = '您的分数有一定竞争力，建议合理填报志愿。'
+      }
+      else {
+        probability = 40
+        riskLevel = 'high'
+        suggestedScore = 530
+        advice = '您的分数竞争力一般，建议谨慎选择。'
+      }
+    }
+
+    predictionResult.value = {
+      probability,
+      riskLevel,
+      suggestedScore,
+      advice,
+    }
+    isCalculating.value = false
+  }, 1000)
+}
+
+const getRiskLevelText = (level: string) => {
+  const map: Record<string, string> = {
+    low: '低风险',
+    medium: '中等风险',
+    high: '高风险',
+  }
+  return map[level] || level
+}
+
+const getRiskLevelColor = (level: string) => {
+  const map: Record<string, string> = {
+    low: 'text-green-600 dark:text-green-400',
+    medium: 'text-yellow-600 dark:text-yellow-400',
+    high: 'text-red-600 dark:text-red-400',
+  }
+  return map[level] || ''
+}
+
+const getRiskLevelBg = (level: string) => {
+  const map: Record<string, string> = {
+    low: 'bg-green-100 dark:bg-green-900/30',
+    medium: 'bg-yellow-100 dark:bg-yellow-900/30',
+    high: 'bg-red-100 dark:bg-red-900/30',
+  }
+  return map[level] || ''
+}
+</script>
+
+<template>
+  <div class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+        录取预测
+      </h2>
+    </div>
+
+    <!-- 输入区域 -->
+    <div class="mb-5 space-y-4 rounded-lg border border-gray-200 p-4 dark:border-slate-700">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <!-- 分数输入 -->
+        <div>
+          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            高考分数
+          </label>
+          <input
+            v-model="score"
+            type="number"
+            placeholder="请输入分数"
+            class="w-full rounded border border-gray-200 bg-white px-4 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+          >
+        </div>
+
+        <!-- 省份选择 -->
+        <div>
+          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            报考省份
+          </label>
+          <select
+            v-model="province"
+            class="w-full rounded border border-gray-200 bg-white px-4 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+          >
+            <option v-for="prov in provinces" :key="prov" :value="prov">
+              {{ prov }}
+            </option>
+          </select>
+        </div>
+
+        <!-- 科类选择 -->
+        <div>
+          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            科类
+          </label>
+          <select
+            v-model="category"
+            class="w-full rounded border border-gray-200 bg-white px-4 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+          >
+            <option v-for="cat in categories" :key="cat" :value="cat">
+              {{ cat }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <!-- 计算按钮 -->
+      <button
+        :disabled="!score || isCalculating"
+        class="w-full rounded bg-orange-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-orange-600 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-slate-600"
+        @click="calculatePrediction"
+      >
+        <span v-if="isCalculating">计算中...</span>
+        <span v-else>开始预测</span>
+      </button>
+    </div>
+
+    <!-- 预测结果 -->
+    <div v-if="predictionResult" class="space-y-4">
+      <!-- 概率展示 -->
+      <div class="rounded-lg border border-gray-200 p-5 dark:border-slate-700">
+        <h3 class="mb-4 text-base font-bold text-gray-900 dark:text-white">
+          预测结果
+        </h3>
+
+        <div class="mb-4 flex items-center gap-4">
+          <div class="flex-1">
+            <div class="mb-2 flex items-center justify-between text-sm">
+              <span class="text-gray-600 dark:text-gray-400">录取概率</span>
+              <span class="text-2xl font-bold text-orange-600 dark:text-orange-400">
+                {{ predictionResult.probability }}%
+              </span>
+            </div>
+            <div class="h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-slate-700">
+              <div
+                class="h-full rounded-full bg-gradient-to-r from-orange-400 to-orange-600 transition-all duration-1000"
+                :style="{ width: `${predictionResult.probability}%` }"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 风险等级 -->
+        <div class="flex items-center justify-between rounded-lg p-3" :class="getRiskLevelBg(predictionResult.riskLevel)">
+          <span class="text-sm text-gray-600 dark:text-gray-400">风险等级</span>
+          <span class="text-base font-bold" :class="getRiskLevelColor(predictionResult.riskLevel)">
+            {{ getRiskLevelText(predictionResult.riskLevel) }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 建议分数 -->
+      <div class="rounded-lg bg-blue-50 p-4 dark:bg-slate-700/30">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-sm text-gray-600 dark:text-gray-400">建议分数线</span>
+          <span class="text-xl font-bold text-blue-600 dark:text-blue-400">
+            {{ predictionResult.suggestedScore }}分
+          </span>
+        </div>
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          基于历史数据分析的建议录取分数线，仅供参考
+        </p>
+      </div>
+
+      <!-- 报考建议 -->
+      <div class="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
+        <h4 class="mb-2 flex items-center gap-2 text-sm font-bold text-orange-800 dark:text-orange-300">
+          💡 报考建议
+        </h4>
+        <p class="text-sm text-gray-700 leading-relaxed dark:text-gray-300">
+          {{ predictionResult.advice }}
+        </p>
+      </div>
+    </div>
+
+    <!-- 说明 -->
+    <div class="mt-4 rounded-lg bg-gray-50 p-4 text-xs text-gray-600 dark:bg-slate-700/30 dark:text-gray-300">
+      <p class="mb-1 font-bold">
+        ⚠️ 免责声明：
+      </p>
+      <ul class="list-inside list-disc space-y-1">
+        <li>本预测结果基于历史数据模型计算，仅供参考，不代表实际录取结果</li>
+        <li>实际录取分数受当年试题难度、报考人数、招生计划等多种因素影响</li>
+        <li>建议结合多种因素综合考虑，理性填报志愿</li>
+        <li>最终录取结果以各省教育考试院公布为准</li>
+      </ul>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/school/EnrollmentPlan.vue b/src/components/school/EnrollmentPlan.vue
new file mode 100644
index 0000000..7e39f7d
--- /dev/null
+++ b/src/components/school/EnrollmentPlan.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface PlanData {
+  year: number
+  province: string
+  category: string
+  totalQuota: number
+  majors: {
+    name: string
+    quota: number
+    category: string
+  }[]
+}
+
+const selectedYear = ref(2024)
+const selectedProvince = ref('山东')
+const selectedCategory = ref('理科')
+
+const years = [2024, 2023, 2022]
+const provinces = ['山东', '北京', '上海', '江苏', '浙江']
+const categories = ['理科', '文科', '综合']
+
+const planData: PlanData[] = [
+  {
+    year: 2024,
+    province: '山东',
+    category: '理科',
+    totalQuota: 800,
+    majors: [
+      { name: '石油工程', quota: 120, category: '本科' },
+      { name: '地质学', quota: 80, category: '本科' },
+      { name: '化学工程与工艺', quota: 100, category: '本科' },
+      { name: '机械设计制造及其自动化', quota: 90, category: '本科' },
+      { name: '计算机科学与技术', quota: 70, category: '本科' },
+      { name: '土木工程', quota: 85, category: '本科' },
+      { name: '油气储运工程', quota: 75, category: '本科' },
+      { name: '应用化学', quota: 60, category: '本科' },
+      { name: '勘查技术与工程', quota: 65, category: '本科' },
+      { name: '安全工程', quota: 55, category: '本科' },
+    ],
+  },
+  {
+    year: 2024,
+    province: '山东',
+    category: '文科',
+    totalQuota: 200,
+    majors: [
+      { name: '英语', quota: 50, category: '本科' },
+      { name: '工商管理', quota: 60, category: '本科' },
+      { name: '会计学', quota: 55, category: '本科' },
+      { name: '市场营销', quota: 35, category: '本科' },
+    ],
+  },
+  {
+    year: 2023,
+    province: '山东',
+    category: '理科',
+    totalQuota: 750,
+    majors: [
+      { name: '石油工程', quota: 115, category: '本科' },
+      { name: '地质学', quota: 75, category: '本科' },
+      { name: '化学工程与工艺', quota: 95, category: '本科' },
+      { name: '机械设计制造及其自动化', quota: 85, category: '本科' },
+      { name: '计算机科学与技术', quota: 65, category: '本科' },
+    ],
+  },
+]
+
+const filteredPlan = computed(() => {
+  return planData.find(
+    item =>
+      item.year === selectedYear.value &&
+      item.province === selectedProvince.value &&
+      item.category === selectedCategory.value,
+  )
+})
+</script>
+
+<template>
+  <div class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+        招生计划
+      </h2>
+    </div>
+
+    <!-- 筛选条件 -->
+    <div class="mb-5 flex flex-wrap gap-3">
+      <select
+        v-model="selectedYear"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="year in years" :key="year" :value="year">
+          {{ year }}年
+        </option>
+      </select>
+      <select
+        v-model="selectedProvince"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="province in provinces" :key="province" :value="province">
+          {{ province }}
+        </option>
+      </select>
+      <select
+        v-model="selectedCategory"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="category in categories" :key="category" :value="category">
+          {{ category }}
+        </option>
+      </select>
+    </div>
+
+    <!-- 总计划数 -->
+    <div v-if="filteredPlan" class="mb-5 rounded-lg bg-blue-50 p-4 dark:bg-slate-700/30">
+      <div class="flex items-center justify-between">
+        <span class="text-sm text-gray-600 dark:text-gray-300">
+          {{ selectedYear }}年 {{ selectedProvince }} {{ selectedCategory }}总计划：
+        </span>
+        <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">
+          {{ filteredPlan.totalQuota }}
+        </span>
+      </div>
+    </div>
+
+    <!-- 专业列表 -->
+    <div v-if="filteredPlan && filteredPlan.majors.length > 0" class="overflow-x-auto">
+      <table class="w-full text-left text-sm">
+        <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-slate-700 dark:text-gray-400">
+          <tr>
+            <th class="w-10 px-4 py-3 text-center">
+              序号
+            </th>
+            <th class="px-4 py-3">
+              专业名称
+            </th>
+            <th class="w-24 px-4 py-3 text-center">
+              学历层次
+            </th>
+            <th class="w-24 px-4 py-3 text-center">
+              计划数
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
+          <tr
+            v-for="(major, idx) in filteredPlan.majors"
+            :key="idx"
+            class="hover:bg-gray-50 dark:hover:bg-slate-700/50"
+          >
+            <td class="px-4 py-3 text-center text-gray-600 dark:text-gray-400">
+              {{ idx + 1 }}
+            </td>
+            <td class="px-4 py-3 text-gray-900 font-medium dark:text-white">
+              {{ major.name }}
+            </td>
+            <td class="px-4 py-3 text-center">
+              <span class="rounded bg-gray-100 px-2 py-1 text-xs dark:bg-slate-600 dark:text-gray-300">
+                {{ major.category }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-center text-orange-600 font-medium dark:text-orange-400">
+              {{ major.quota }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 数据为空提示 -->
+    <div v-else class="py-8 text-center text-gray-500 dark:text-gray-400">
+      暂无数据
+    </div>
+
+    <!-- 说明 -->
+    <div class="mt-4 rounded-lg bg-orange-50 p-4 text-xs text-gray-600 dark:bg-slate-700/30 dark:text-gray-300">
+      <p class="mb-1 font-bold">
+        💡 数据说明：
+      </p>
+      <ul class="list-inside list-disc space-y-1">
+        <li>招生计划数以各省教育考试院公布为准</li>
+        <li>实际录取人数可能根据生源情况调整</li>
+        <li>建议关注官方渠道获取最新招生信息</li>
+      </ul>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/school/HistoricalScores.vue b/src/components/school/HistoricalScores.vue
new file mode 100644
index 0000000..f40c7ca
--- /dev/null
+++ b/src/components/school/HistoricalScores.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface ScoreData {
+  year: number
+  province: string
+  category: string
+  minScore: number
+  avgScore: number
+  maxScore: number
+  rank: number
+}
+
+const selectedYear = ref(2024)
+const selectedProvince = ref('山东')
+const selectedCategory = ref('理科')
+
+const years = [2024, 2023, 2022, 2021, 2020]
+const provinces = ['山东', '北京', '上海', '江苏', '浙江', '广东', '四川']
+const categories = ['理科', '文科', '综合']
+
+const scoreData: ScoreData[] = [
+  { year: 2024, province: '山东', category: '理科', minScore: 580, avgScore: 600, maxScore: 620, rank: 15000 },
+  { year: 2024, province: '山东', category: '文科', minScore: 560, avgScore: 580, maxScore: 600, rank: 8000 },
+  { year: 2023, province: '山东', category: '理科', minScore: 575, avgScore: 595, maxScore: 615, rank: 16000 },
+  { year: 2023, province: '山东', category: '文科', minScore: 555, avgScore: 575, maxScore: 595, rank: 8500 },
+  { year: 2022, province: '山东', category: '理科', minScore: 570, avgScore: 590, maxScore: 610, rank: 17000 },
+  { year: 2022, province: '山东', category: '文科', minScore: 550, avgScore: 570, maxScore: 590, rank: 9000 },
+]
+
+const filteredScores = computed(() => {
+  return scoreData.filter(
+    item =>
+      item.year === selectedYear.value &&
+      item.province === selectedProvince.value &&
+      item.category === selectedCategory.value,
+  )
+})
+</script>
+
+<template>
+  <div class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+        历年分数
+      </h2>
+    </div>
+
+    <!-- 筛选条件 -->
+    <div class="mb-5 flex flex-wrap gap-3">
+      <select
+        v-model="selectedYear"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="year in years" :key="year" :value="year">
+          {{ year }}年
+        </option>
+      </select>
+      <select
+        v-model="selectedProvince"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="province in provinces" :key="province" :value="province">
+          {{ province }}
+        </option>
+      </select>
+      <select
+        v-model="selectedCategory"
+        class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+      >
+        <option v-for="category in categories" :key="category" :value="category">
+          {{ category }}
+        </option>
+      </select>
+    </div>
+
+    <!-- 分数表格 -->
+    <div class="overflow-x-auto">
+      <table class="w-full text-left text-sm">
+        <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-slate-700 dark:text-gray-400">
+          <tr>
+            <th class="px-4 py-3">
+              年份
+            </th>
+            <th class="px-4 py-3">
+              省份
+            </th>
+            <th class="px-4 py-3">
+              科类
+            </th>
+            <th class="px-4 py-3">
+              最低分
+            </th>
+            <th class="px-4 py-3">
+              平均分
+            </th>
+            <th class="px-4 py-3">
+              最高分
+            </th>
+            <th class="px-4 py-3">
+              省排位
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
+          <tr
+            v-for="(item, idx) in filteredScores"
+            :key="idx"
+            class="hover:bg-gray-50 dark:hover:bg-slate-700/50"
+          >
+            <td class="px-4 py-3 text-gray-900 dark:text-white">
+              {{ item.year }}
+            </td>
+            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
+              {{ item.province }}
+            </td>
+            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
+              {{ item.category }}
+            </td>
+            <td class="px-4 py-3 text-orange-600 font-medium dark:text-orange-400">
+              {{ item.minScore }}
+            </td>
+            <td class="px-4 py-3 text-gray-900 dark:text-white">
+              {{ item.avgScore }}
+            </td>
+            <td class="px-4 py-3 text-gray-900 dark:text-white">
+              {{ item.maxScore }}
+            </td>
+            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
+              {{ item.rank.toLocaleString() }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 数据为空提示 -->
+    <div v-if="filteredScores.length === 0" class="py-8 text-center text-gray-500 dark:text-gray-400">
+      暂无数据
+    </div>
+
+    <!-- 图表说明 -->
+    <div class="mt-4 rounded-lg bg-orange-50 p-4 text-xs text-gray-600 dark:bg-slate-700/30 dark:text-gray-300">
+      <p class="mb-1 font-bold">
+        💡 数据说明：
+      </p>
+      <ul class="list-inside list-disc space-y-1">
+        <li>数据来源于官方招生办，仅供参考</li>
+        <li>点击年份可查看不同年份的录取数据</li>
+        <li>建议结合省排位进行志愿填报</li>
+      </ul>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/school/Majors.vue b/src/components/school/Majors.vue
new file mode 100644
index 0000000..72cb2de
--- /dev/null
+++ b/src/components/school/Majors.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface MajorInfo {
+  college: string
+  majors: {
+    name: string
+    degree: string
+    duration: number
+    category: string
+    description: string
+    tags: string[]
+  }[]
+}
+
+const searchKeyword = ref('')
+const selectedCollege = ref('全部')
+const selectedCategory = ref('全部')
+
+const colleges = ['全部', '地球科学与技术学院', '石油工程学院', '化学化工学院', '机电工程学院', '储运与建筑工程学院']
+const categories = ['全部', '工学', '理学', '管理学', '文学']
+
+const majorsData: MajorInfo[] = [
+  {
+    college: '地球科学与技术学院',
+    majors: [
+      {
+        name: '勘查技术与工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备地质学、地球物理学等方面的基本理论和基本知识，能在资源勘查、工程勘察等部门从事勘查、设计、施工、管理等方面工作的高级工程技术人才。',
+        tags: ['国家级特色专业', '双一流学科'],
+      },
+      {
+        name: '地质学',
+        degree: '理学学士',
+        duration: 4,
+        category: '理学',
+        description: '培养具备地质学基本理论、基本知识，掌握地质调查、矿产资源勘查、地质工程设计等基本技能的专门人才。',
+        tags: ['省级重点学科'],
+      },
+      {
+        name: '资源勘查工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备扎实的地质学基础，掌握矿产资源勘查与评价的基本方法和技能，能在资源勘查、开发等领域从事技术和管理工作的复合型人才。',
+        tags: ['国家特色专业'],
+      },
+      {
+        name: '地球物理学',
+        degree: '理学学士',
+        duration: 4,
+        category: '理学',
+        description: '培养具备地球物理学的基础理论和基本技能，能在地球物理勘查、地震监测、工程物探等领域从事技术工作的专门人才。',
+        tags: ['省级特色专业'],
+      },
+    ],
+  },
+  {
+    college: '石油工程学院',
+    majors: [
+      {
+        name: '海洋油气工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备海洋油气工程领域的专业知识，能在海洋油气田开发、海洋工程设计等方面工作的高级工程技术人才。',
+        tags: ['新兴专业', '国家战略专业'],
+      },
+      {
+        name: '石油工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备石油工程领域的基本理论和专业知识，能在油气田开发、钻井工程、采油工程等领域从事技术和管理工作的复合型人才。',
+        tags: ['国家级特色专业', '双一流学科'],
+      },
+      {
+        name: '碳储科学与工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备碳捕集、利用与封存(CCUS)领域的专业知识，能在碳减排、碳交易、碳中和等领域工作的创新型工程技术人才。',
+        tags: ['新兴专业', '绿色低碳'],
+      },
+    ],
+  },
+  {
+    college: '化学化工学院',
+    majors: [
+      {
+        name: '化学',
+        degree: '理学学士',
+        duration: 4,
+        category: '理学',
+        description: '培养具备化学的基本理论、基本知识和基本技能，能在化学及相关领域从事科研、教学、技术等工作的高级专门人才。',
+        tags: ['省级重点学科'],
+      },
+      {
+        name: '化学工程与工艺',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备化学工程与工艺方面的基本理论和基本知识，能在化工、炼油、冶金、能源等部门从事工程设计、技术开发、生产管理等工作的高级工程技术人才。',
+        tags: ['国家级特色专业'],
+      },
+      {
+        name: '应用化学',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备应用化学方面的基本理论和基本知识，能在化工、材料、医药、环保等领域从事技术开发、生产管理等工作的高级工程技术人才。',
+        tags: ['省级特色专业'],
+      },
+      {
+        name: '环境工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备环境工程领域的基本理论和专业知识，能在环境污染防治、环境监测、环境规划等领域从事技术和管理工作的复合型人才。',
+        tags: ['绿色低碳', '新兴专业'],
+      },
+      {
+        name: '能源化学工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备能源化学工程领域的专业知识，能在新能源、清洁能源、能源转化等领域从事技术开发和工程设计工作的高级工程技术人才。',
+        tags: ['新兴专业', '国家战略专业'],
+      },
+    ],
+  },
+  {
+    college: '机电工程学院',
+    majors: [
+      {
+        name: '安全工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备安全工程领域的专业知识，能在安全监察、安全管理、安全评价、安全设计等领域从事技术和管理工作的复合型人才。',
+        tags: ['国家级特色专业'],
+      },
+      {
+        name: '工业设计',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备工业设计的基本理论和基本技能，能在产品造型设计、视觉传达设计、环境设计等领域从事设计工作的复合型人才。',
+        tags: ['省级特色专业'],
+      },
+      {
+        name: '智能制造工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备智能制造领域的基本理论和专业知识，能在智能制造系统设计、智能装备开发、工业互联网等领域从事技术工作的复合型人才。',
+        tags: ['新兴专业', '国家战略专业'],
+      },
+      {
+        name: '机械设计制造及其自动化',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备机械设计制造及其自动化方面的基本理论和基本知识，能在机械制造、自动化控制等领域从事设计、制造、运行管理等工作的高级工程技术人才。',
+        tags: ['国家级特色专业'],
+      },
+    ],
+  },
+  {
+    college: '储运与建筑工程学院',
+    majors: [
+      {
+        name: '土木工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备土木工程领域的基本理论和专业知识，能在房屋建筑、地下建筑、桥梁隧道等领域从事设计、施工、管理等工作的高级工程技术人才。',
+        tags: ['省级特色专业'],
+      },
+      {
+        name: '工程力学',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备工程力学的基本理论和基本技能，能在工程结构分析、强度计算、优化设计等领域从事技术工作的专门人才。',
+        tags: ['省级重点学科'],
+      },
+      {
+        name: '建筑环境与能源应用工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备建筑环境与能源应用工程领域的专业知识，能在暖通空调、燃气供应、建筑节能等领域从事设计、施工、管理等工作的高级工程技术人才。',
+        tags: ['省级特色专业', '绿色低碳'],
+      },
+      {
+        name: '油气储运工程',
+        degree: '工学学士',
+        duration: 4,
+        category: '工学',
+        description: '培养具备油气储运工程方面的基本理论和基本知识，能在油气储存、运输、配送等领域从事设计、施工、管理等工作的高级工程技术人才。',
+        tags: ['国家级特色专业', '双一流学科'],
+      },
+    ],
+  },
+]
+
+const filteredMajors = computed(() => {
+  let result = majorsData
+
+  // 按学院筛选
+  if (selectedCollege.value !== '全部') {
+    result = result.filter(item => item.college === selectedCollege.value)
+  }
+
+  // 展开所有专业
+  let allMajors: { college: string, major: any }[] = []
+  result.forEach(item => {
+    item.majors.forEach(major => {
+      allMajors.push({ college: item.college, major })
+    })
+  })
+
+  // 按类别筛选
+  if (selectedCategory.value !== '全部') {
+    allMajors = allMajors.filter(item => item.major.category === selectedCategory.value)
+  }
+
+  // 按关键词搜索
+  if (searchKeyword.value) {
+    const keyword = searchKeyword.value.toLowerCase()
+    allMajors = allMajors.filter(item =>
+      item.major.name.toLowerCase().includes(keyword) ||
+      item.major.description.toLowerCase().includes(keyword),
+    )
+  }
+
+  return allMajors
+})
+</script>
+
+<template>
+  <div class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+        开设专业
+      </h2>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="mb-5 space-y-3">
+      <!-- 搜索框 -->
+      <div class="relative">
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="搜索专业名称或描述..."
+          class="w-full rounded border border-gray-200 bg-white px-4 py-2 pl-10 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+        >
+        <span class="absolute left-3 top-2.5 text-gray-400">🔍</span>
+      </div>
+
+      <!-- 筛选条件 -->
+      <div class="flex flex-wrap gap-3">
+        <select
+          v-model="selectedCollege"
+          class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+        >
+          <option v-for="college in colleges" :key="college" :value="college">
+            {{ college }}
+          </option>
+        </select>
+        <select
+          v-model="selectedCategory"
+          class="rounded border border-gray-200 bg-white px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white"
+        >
+          <option v-for="category in categories" :key="category" :value="category">
+            {{ category }}
+          </option>
+        </select>
+        <div class="ml-auto text-sm text-gray-500 dark:text-gray-400">
+          共找到 <span class="font-bold text-orange-600 dark:text-orange-400">{{ filteredMajors.length }}</span> 个专业
+        </div>
+      </div>
+    </div>
+
+    <!-- 专业列表 -->
+    <div v-if="filteredMajors.length > 0" class="space-y-4">
+      <div
+        v-for="(item, idx) in filteredMajors"
+        :key="idx"
+        class="overflow-hidden rounded-lg border border-gray-200 dark:border-slate-700"
+      >
+        <div class="bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 dark:bg-slate-700 dark:text-gray-200">
+          {{ item.college }}
+        </div>
+        <div class="p-4">
+          <div class="mb-2 flex items-start justify-between">
+            <h3 class="text-base font-bold text-gray-900 dark:text-white">
+              {{ item.major.name }}
+            </h3>
+            <span class="flex-shrink-0 rounded bg-blue-100 px-2 py-1 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+              {{ item.major.degree }}
+            </span>
+          </div>
+          <div class="mb-3 flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <span>学制：{{ item.major.duration }}年</span>
+            <span>类别：{{ item.major.category }}</span>
+          </div>
+          <p class="mb-3 text-sm text-gray-600 leading-relaxed dark:text-gray-300">
+            {{ item.major.description }}
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <span
+              v-for="(tag, tagIdx) in item.major.tags"
+              :key="tagIdx"
+              class="rounded bg-orange-100 px-2 py-0.5 text-xs text-orange-700 dark:bg-orange-900/30 dark:text-orange-300"
+            >
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 数据为空提示 -->
+    <div v-else class="py-12 text-center text-gray-500 dark:text-gray-400">
+      <div class="mb-2 text-4xl">
+        📚
+      </div>
+      <p>未找到符合条件的专业</p>
+      <p class="text-xs">
+        请尝试调整筛选条件或搜索关键词
+      </p>
+    </div>
+
+    <!-- 说明 -->
+    <div class="mt-4 rounded-lg bg-orange-50 p-4 text-xs text-gray-600 dark:bg-slate-700/30 dark:text-gray-300">
+      <p class="mb-1 font-bold">
+        💡 专业说明：
+      </p>
+      <ul class="list-inside list-disc space-y-1">
+        <li>专业设置以教育部最新公布为准</li>
+        <li>点击专业标签可查看详细信息</li>
+        <li>建议结合个人兴趣和就业前景选择专业</li>
+      </ul>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/school/SchoolOverview.vue b/src/components/school/SchoolOverview.vue
new file mode 100644
index 0000000..91eb268
--- /dev/null
+++ b/src/components/school/SchoolOverview.vue
@@ -0,0 +1,488 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Ranking {
+  label: string
+  value: number
+  trend?: 'up' | 'down' | 'flat'
+}
+
+interface Major {
+  college: string
+  majors: string[]
+}
+
+interface CampusFacility {
+  name: string
+  icon: string
+  images: string[]
+  info: string
+}
+
+const activeLocationTab = ref('唐岛湾校区')
+const selectedCampus = ref('唐岛湾校区')
+const showDetailModal = ref(false)
+
+const campusOptions = ['唐岛湾校区', '东营科教园区', '古镇口校区']
+
+const rankings: Ranking[] = [
+  { label: '软科综合', value: 67 },
+  { label: '校友会综合', value: 80 },
+  { label: 'US世界', value: 500 },
+  { label: '人气值排名', value: 70 },
+]
+
+const departments: Major[] = [
+  { college: '地球科学与技术学院', majors: ['勘查技术与工程', '地质学', '资源勘查工程', '地球物理学'] },
+  { college: '石油工程学院', majors: ['海洋油气工程', '石油工程', '碳储科学与工程'] },
+  { college: '化学化工学院', majors: ['化学', '化学工程与工艺', '应用化学', '环境工程', '能源化学工程'] },
+  { college: '机电工程学院', majors: ['安全工程', '工业设计', '智能制造工程', '机械设计制造及其自动化'] },
+  { college: '储运与建筑工程学院', majors: ['土木工程', '工程力学', '建筑环境与能源应用工程', '油气储运工程'] },
+]
+
+const campusFacilities = ref<CampusFacility[]>([
+  {
+    name: '唐岛湾校区',
+    icon: '🏫',
+    images: [
+      'https://images.unsplash.com/photo-1562774053-701939374585?w=400&h=300&fit=crop',
+      'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=400&h=300&fit=crop',
+    ],
+    info: '位于青岛市黄岛区，占地面积3000亩，拥有现代化的教学设施和优美的校园环境。',
+  },
+  {
+    name: '东营科教园区',
+    icon: '🏛️',
+    images: [
+      'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&h=300&fit=crop',
+      'https://images.unsplash.com/photo-1591380542610-f6263b6884b3?w=400&h=300&fit=crop',
+    ],
+    info: '位于东营市，是学校的发源地，历史悠久，承载着学校的传统与精神。',
+  },
+  {
+    name: '古镇口校区',
+    icon: '🏢',
+    images: [
+      'https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&h=300&fit=crop',
+      'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&h=300&fit=crop',
+    ],
+    info: '位于青岛西海岸新区，重点发展海洋科学与工程技术等新兴学科。',
+  },
+])
+
+const sceneryImages = [
+  'https://images.unsplash.com/photo-1562774053-701939374585?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1591380542610-f6263b6884b3?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=400&h=300&fit=crop',
+]
+
+const locationInfo = computed(() => {
+  return activeLocationTab.value === '唐岛湾校区'
+    ? { address: '山东省青岛市黄岛区长江西路66号', details: '附近3km内分布着 58个餐饮场所...' }
+    : { address: '山东省东营市...', details: '老校区历史悠久...' }
+})
+
+const currentCampusFacilities = computed(() => {
+  return campusFacilities.value.find(c => c.name === selectedCampus.value)
+})
+</script>
+
+<template>
+  <div class="space-y-5">
+    <!-- 1. 基本信息模块 -->
+    <section class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+          基本信息
+        </h2>
+        <button
+          class="text-xs text-gray-500 hover:text-orange-500"
+          @click="showDetailModal = true"
+        >
+          [详情]
+        </button>
+      </div>
+
+      <p class="mb-5 text-sm text-gray-600 leading-relaxed dark:text-gray-300">
+        中国石油大学（华东）是教育部直属全国重点大学，是国家"211工程"重点建设和开展"985工程优势学科创新平台"建设并建有研究生院的高校之一。学校是教育部和五大能源企业集团公司、教育部和山东省人民政府共建的高校...
+      </p>
+
+      <!-- 排名与数据 -->
+      <div class="mb-5 rounded-lg bg-orange-50 p-5 dark:bg-slate-700/50">
+        <div class="grid grid-cols-2 gap-4 text-center md:grid-cols-4">
+          <div v-for="(rank, idx) in rankings" :key="idx" class="border-r border-orange-200 last:border-0 dark:border-slate-600">
+            <div class="text-xl text-orange-600 font-bold dark:text-orange-400">
+              {{ rank.value }}
+            </div>
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {{ rank.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 地理位置 & 地图 -->
+      <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-slate-700">
+        <div class="flex border-b border-gray-200 bg-gray-50 dark:border-slate-700 dark:bg-slate-700">
+          <button
+            v-for="tab in ['唐岛湾校区', '东营科教园区', '古镇口校区']" :key="tab"
+            class="px-4 py-2 text-sm transition-colors"
+            :class="activeLocationTab === tab ? 'bg-white dark:bg-slate-800 text-orange-500 border-t-2 border-orange-500' : 'text-gray-600 dark:text-gray-400'"
+            @click="activeLocationTab = tab"
+          >
+            {{ tab }}
+          </button>
+        </div>
+        <div class="h-64 flex flex-col md:flex-row">
+          <!-- 模拟地图 -->
+          <div class="group relative w-full flex items-center justify-center bg-blue-50 md:w-1/2 dark:bg-slate-900">
+            <span class="text-4xl text-blue-300">MAP</span>
+            <div class="absolute inset-0 bg-black/5 transition dark:bg-white/5 group-hover:bg-transparent" />
+            <div class="absolute bottom-2 right-2 rounded bg-white px-2 py-1 text-xs shadow dark:bg-slate-700">
+              地图详情 >
+            </div>
+          </div>
+          <!-- 地址详情 -->
+          <div class="w-full flex flex-col justify-center p-4 md:w-1/2">
+            <h4 class="mb-2 flex items-center gap-2 text-gray-800 font-bold dark:text-white">
+              📍 {{ activeLocationTab }}
+            </h4>
+            <p class="mb-3 text-sm text-orange-500">
+              {{ locationInfo.address }}
+            </p>
+            <p class="text-xs text-gray-500 leading-relaxed dark:text-gray-400">
+              {{ locationInfo.details }}
+            </p>
+            <div class="mt-4 flex gap-4 text-center">
+              <div>
+                <div class="text-sm font-bold dark:text-white">
+                  58
+                </div><div class="text-xs text-gray-400">
+                  餐饮场所
+                </div>
+              </div>
+              <div>
+                <div class="text-sm font-bold dark:text-white">
+                  27
+                </div><div class="text-xs text-gray-400">
+                  酒店
+                </div>
+              </div>
+              <div>
+                <div class="text-sm font-bold dark:text-white">
+                  7
+                </div><div class="text-xs text-gray-400">
+                  购物中心
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 2. 院系设置模块 -->
+    <section class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+          院系设置
+        </h2>
+      </div>
+
+      <div class="overflow-x-auto">
+        <table class="w-full text-left text-sm">
+          <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-slate-700 dark:text-gray-400">
+            <tr>
+              <th class="w-1/4 px-4 py-2.5">
+                学院
+              </th>
+              <th class="px-4 py-2.5">
+                专业
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
+            <tr v-for="(dept, idx) in departments" :key="idx" class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
+              <td class="px-4 py-2.5 text-gray-900 font-medium dark:text-white">
+                {{ dept.college }}
+              </td>
+              <td class="px-4 py-2.5 text-gray-600 dark:text-gray-300">
+                <div class="flex flex-wrap gap-2">
+                  <span v-for="major in dept.majors" :key="major" class="rounded bg-gray-100 px-2 py-0.5 text-xs dark:bg-slate-600">
+                    {{ major }} <span class="ml-1 text-gray-300">本科</span>
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页模拟 -->
+      <div class="mt-4 flex justify-center gap-2 text-xs text-gray-500">
+        <button class="px-2 py-1 hover:text-orange-500">
+          首页
+        </button>
+        <button class="px-2 py-1 hover:text-orange-500">
+          上一页
+        </button>
+        <button class="h-6 w-6 flex items-center justify-center rounded-full bg-orange-500 text-white">
+          1
+        </button>
+        <button class="h-6 w-6 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
+          2
+        </button>
+        <button class="px-2 py-1 hover:text-orange-500">
+          下一页
+        </button>
+      </div>
+    </section>
+
+    <!-- 3. 校园风光 -->
+    <section class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+          校园风光
+        </h2>
+        <a href="#" class="text-xs text-orange-500">更多 ></a>
+      </div>
+      <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <div v-for="(img, i) in sceneryImages" :key="i" class="group relative h-40 cursor-pointer overflow-hidden rounded-lg">
+          <img :src="img" class="h-full w-full transform object-cover transition group-hover:scale-110" alt="scenery">
+          <div class="absolute inset-0 bg-black/10 transition group-hover:bg-black/0" />
+        </div>
+      </div>
+    </section>
+
+    <!-- 4. 校园配置 & 奖学金 (两列并排) -->
+    <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+      <!-- 校园配置 -->
+      <section class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+        <div class="mb-3 flex items-center justify-between">
+          <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+            校园配置
+          </h2>
+          <!-- 地区下拉切换 -->
+          <select
+            v-model="selectedCampus"
+            class="rounded border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300"
+          >
+            <option v-for="campus in campusOptions" :key="campus" :value="campus">
+              {{ campus }}
+            </option>
+          </select>
+        </div>
+
+        <!-- 校区信息 -->
+        <div v-if="currentCampusFacilities" class="mb-4 rounded-lg bg-gray-50 p-3 dark:bg-slate-700/30">
+          <p class="text-sm text-gray-600 dark:text-gray-300">
+            {{ currentCampusFacilities.info }}
+          </p>
+        </div>
+
+        <!-- 基础设施 -->
+        <div class="mb-4 grid grid-cols-3 gap-3">
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">🛏️</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">4人/间</span>
+          </div>
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">🍚</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">5个食堂</span>
+          </div>
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">🪑</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">上床下桌</span>
+          </div>
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">🚿</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">独立卫浴</span>
+          </div>
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">❄️</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">有空调</span>
+          </div>
+          <div class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
+            <span class="mb-1 text-2xl">🏊</span>
+            <span class="text-xs text-gray-600 dark:text-gray-300">有游泳馆</span>
+          </div>
+        </div>
+
+        <!-- 校区图片 -->
+        <div v-if="currentCampusFacilities" class="flex gap-3 overflow-x-auto pb-2">
+          <div
+            v-for="(img, idx) in currentCampusFacilities.images"
+            :key="idx"
+            class="h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg bg-gray-200 dark:bg-slate-700"
+          >
+            <img :src="img" class="h-full w-full object-cover" alt="校园图片">
+          </div>
+        </div>
+      </section>
+
+      <!-- 奖学金设置 -->
+      <section class="rounded-lg bg-white p-5 shadow-sm dark:bg-slate-800">
+        <div class="mb-3 flex items-center justify-between">
+          <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
+            奖学金设置
+          </h2>
+          <span class="text-xs text-gray-400">更新: 2024-06-18</span>
+        </div>
+        <div class="custom-scrollbar h-48 overflow-y-auto pr-2 text-sm text-gray-600 space-y-4 dark:text-gray-300">
+          <div>
+            <h4 class="mb-1 text-gray-800 font-bold dark:text-gray-200">
+              奖学金设置
+            </h4>
+            <p class="text-xs leading-relaxed">
+              目前学校已经建立起以各类奖学金、助学金、助学贷款、勤工助学、困难补助为主体的多元化资助体系。
+            </p>
+          </div>
+          <div>
+            <h4 class="mb-1 text-gray-800 font-bold dark:text-gray-200">
+              困难资助办法
+            </h4>
+            <p class="text-xs leading-relaxed">
+              家庭经济特别困难的新生如暂时筹集不齐学费和住宿费，可在报到当天，通过学校开设的"绿色通道"办理入学手续。
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- 详情模态框 -->
+    <Teleport to="body">
+      <Transition name="modal">
+        <div
+          v-if="showDetailModal"
+          class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+          @click.self="showDetailModal = false"
+        >
+          <div class="max-h-[80vh] w-full max-w-3xl overflow-y-auto rounded-lg bg-white p-6 shadow-xl dark:bg-slate-800">
+            <div class="mb-4 flex items-center justify-between">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+                学校详细信息
+              </h3>
+              <button
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                @click="showDetailModal = false"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div class="space-y-4 text-sm text-gray-600 dark:text-gray-300">
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  学校简介
+                </h4>
+                <p class="leading-relaxed">
+                  中国石油大学（华东）是教育部直属全国重点大学，是国家"211工程"重点建设和开展"985工程优势学科创新平台"建设并建有研究生院的高校之一。学校是教育部和五大能源企业集团公司、教育部和山东省人民政府共建的高校，是石油石化行业高层次人才培养的重要基地，被誉为"石油科技人才的摇篮"。
+                </p>
+              </div>
+
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  历史沿革
+                </h4>
+                <p class="leading-relaxed">
+                  学校始建于1953年，历经北京石油学院、华东石油学院、石油大学（华东）三个发展阶段。2000年，经教育部批准，石油大学（华东）开始独立办学。2005年，学校更名为中国石油大学（华东）。2017年，学校进入国家"双一流"建设高校行列。
+                </p>
+              </div>
+
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  学科建设
+                </h4>
+                <ul class="list-inside list-disc space-y-1">
+                  <li>博士学位授权一级学科：16个</li>
+                  <li>硕士学位授权一级学科：33个</li>
+                  <li>国家重点学科：5个</li>
+                  <li>国家重点（培育）学科：2个</li>
+                  <li>博士后流动站：11个</li>
+                </ul>
+              </div>
+
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  师资力量
+                </h4>
+                <p class="leading-relaxed">
+                  学校现有教职工3100余人，其中专任教师2000余人，教授、副教授1100余人。拥有两院院士8人（含双聘），国家杰出青年科学基金获得者、"长江学者奖励计划"特聘教授、国家"万人计划"领军人才等国家级人才70余人。
+                </p>
+              </div>
+
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  办学条件
+                </h4>
+                <ul class="list-inside list-disc space-y-1">
+                  <li>占地面积：5000余亩</li>
+                  <li>建筑面积：140余万平方米</li>
+                  <li>图书馆藏书：320余万册</li>
+                  <li>教学科研仪器设备总值：15亿元</li>
+                </ul>
+              </div>
+
+              <div>
+                <h4 class="mb-2 font-bold text-gray-900 dark:text-white">
+                  就业情况
+                </h4>
+                <p class="leading-relaxed">
+                  学校毕业生就业率始终保持90%以上，石油石化相关专业毕业生就业率达到98%以上。毕业生主要就业于中石油、中石化、中海油等国有大型企业，以及各类民营企业和科研院所。
+                </p>
+              </div>
+            </div>
+
+            <div class="mt-6 flex justify-end">
+              <button
+                class="rounded bg-orange-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600"
+                @click="showDetailModal = false"
+              >
+                关闭
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* 模态框动画 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .bg-white,
+.modal-leave-active .bg-white {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from .bg-white,
+.modal-leave-to .bg-white {
+  transform: scale(0.9);
+}
+
+/* 自定义滚动条样式 */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 2px;
+}
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #475569;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/school/[schoolCode].vue b/src/pages/school/[schoolCode].vue
index 758e399..c546b6b 100644
--- a/src/pages/school/[schoolCode].vue
+++ b/src/pages/school/[schoolCode].vue
@@ -1,13 +1,14 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+
+// 导入子组件
+import SchoolOverview from '~/components/school/SchoolOverview.vue'
+import HistoricalScores from '~/components/school/HistoricalScores.vue'
+import EnrollmentPlan from '~/components/school/EnrollmentPlan.vue'
+import Majors from '~/components/school/Majors.vue'
+import AdmissionPrediction from '~/components/school/AdmissionPrediction.vue'
 
 // --- 类型定义 ---
-// interface StatItem {
-//   label: string;
-//   value: string | number;
-//   icon?: string;
-// }
-
 interface Ranking {
   label: string
   value: number
@@ -24,6 +25,17 @@ const route = useRoute('/school/[schoolCode]')
 const schoolCode = ref('')
 
 const activeLocationTab = ref('唐岛湾校区')
+const activeNavTab = ref('学校概况')
+
+// 轮播图相关
+const currentSlide = ref(0)
+const carouselInterval = ref<number | null>(null)
+const bannerImages = [
+  'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1200&h=400&fit=crop',
+  'https://images.unsplash.com/photo-1562774053-701939374585?w=1200&h=400&fit=crop',
+  'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=1200&h=400&fit=crop',
+  'https://images.unsplash.com/photo-1591380542610-f6263b6884b3?w=1200&h=400&fit=crop',
+]
 
 // 基础信息数据
 // const stats: StatItem[] = [
@@ -61,13 +73,12 @@ const facilities = [
   { name: '有游泳馆', icon: '🏊' },
 ]
 
-// 模拟图片 (使用占位符)
-const bgHeader = 'https://via.placeholder.com/1200x300/e6f2ff/0056b3?text=University+Header'
+// 校园风光图片
 const sceneryImages = [
-  'https://via.placeholder.com/300x200/ffedcc/e67e22?text=Scenery+1',
-  'https://via.placeholder.com/300x200/d4edda/155724?text=Scenery+2',
-  'https://via.placeholder.com/300x200/f8d7da/721c24?text=Scenery+3',
-  'https://via.placeholder.com/300x200/cce5ff/004085?text=Scenery+4',
+  'https://images.unsplash.com/photo-1564981797816-1043664bf78d?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?w=400&h=300&fit=crop',
+  'https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&h=300&fit=crop',
 ]
 
 // 校区地址数据
@@ -77,6 +88,38 @@ const locationInfo = computed(() => {
     : { address: '山东省东营市...', details: '老校区历史悠久...' }
 })
 
+// 轮播图函数
+const nextSlide = () => {
+  currentSlide.value = (currentSlide.value + 1) % bannerImages.length
+}
+
+const prevSlide = () => {
+  currentSlide.value = (currentSlide.value - 1 + bannerImages.length) % bannerImages.length
+}
+
+const goToSlide = (index: number) => {
+  currentSlide.value = index
+}
+
+const startCarousel = () => {
+  carouselInterval.value = window.setInterval(nextSlide, 4000)
+}
+
+const stopCarousel = () => {
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value)
+    carouselInterval.value = null
+  }
+}
+
+onMounted(() => {
+  startCarousel()
+})
+
+onUnmounted(() => {
+  stopCarousel()
+})
+
 watchEffect(() => {
   schoolCode.value = route.params.schoolCode
 })
@@ -113,21 +156,78 @@ useHead({
 
         <!-- 导航菜单 -->
         <nav class="scrollbar-hide flex overflow-x-auto pb-2 text-sm text-gray-500 font-medium space-x-8 sm:pb-0 dark:text-gray-400">
-          <a href="#" class="whitespace-nowrap border-b-2 border-orange-500 pb-3 text-orange-600 dark:text-orange-400">学校概况</a>
-          <a href="#" class="whitespace-nowrap pb-3 hover:text-gray-700 dark:hover:text-gray-200">历年分数</a>
-          <a href="#" class="whitespace-nowrap pb-3 hover:text-gray-700 dark:hover:text-gray-200">招生计划</a>
-          <a href="#" class="whitespace-nowrap pb-3 hover:text-gray-700 dark:hover:text-gray-200">开设专业</a>
-          <a href="#" class="whitespace-nowrap pb-3 hover:text-gray-700 dark:hover:text-gray-200">录取预测</a>
+          <button
+            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
+            :class="activeNavTab === '学校概况' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
+            @click="activeNavTab = '学校概况'"
+          >
+            学校概况
+          </button>
+          <button
+            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
+            :class="activeNavTab === '历年分数' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
+            @click="activeNavTab = '历年分数'"
+          >
+            历年分数
+          </button>
+          <button
+            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
+            :class="activeNavTab === '招生计划' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
+            @click="activeNavTab = '招生计划'"
+          >
+            招生计划
+          </button>
+          <button
+            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
+            :class="activeNavTab === '开设专业' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
+            @click="activeNavTab = '开设专业'"
+          >
+            开设专业
+          </button>
+          <button
+            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
+            :class="activeNavTab === '录取预测' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
+            @click="activeNavTab = '录取预测'"
+          >
+            录取预测
+          </button>
         </nav>
       </div>
     </header>
 
     <!-- 主要内容区域 -->
-    <main class="mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6">
+    <!-- mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6 -->
+    <main class="mx-auto max-w-7xl">
       <!-- 顶部 Banner 信息卡片 -->
       <div class="mb-6 overflow-hidden rounded-lg bg-white shadow dark:bg-slate-800">
-        <!-- Banner 图片 -->
-        <div class="relative h-48 bg-cover bg-center md:h-64" :style="{ backgroundImage: `url(${bgHeader})` }">
+        <!-- 轮播图 -->
+        <div class="relative h-48 bg-cover bg-center md:h-64" :style="{ backgroundImage: `url(${bannerImages[currentSlide]})` }">
+          <!-- 左右切换按钮 -->
+          <button
+            class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
+            @click="prevSlide"
+          >
+            ◀
+          </button>
+          <button
+            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
+            @click="nextSlide"
+          >
+            ▶
+          </button>
+
+          <!-- 轮播指示器 -->
+          <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
+            <button
+              v-for="(img, index) in bannerImages"
+              :key="index"
+              class="h-2 w-2 rounded-full transition-all"
+              :class="currentSlide === index ? 'w-8 bg-white' : 'bg-white/50'"
+              @click="goToSlide(index)"
+            />
+          </div>
+
+          <!-- 右上角按钮 -->
           <div class="absolute bottom-4 right-4 flex gap-2">
             <button class="rounded bg-black/50 px-3 py-1 text-sm text-white backdrop-blur-sm hover:bg-black/70">
               📺 视频
@@ -212,225 +312,13 @@ useHead({
       <div class="grid grid-cols-1 gap-6 lg:grid-cols-4">
         <!-- 左侧/主体内容 (占3份宽度) -->
         <div class="lg:col-span-3 space-y-6">
-          <!-- 1. 基本信息模块 -->
-          <section class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
-            <div class="mb-4 flex items-center justify-between">
-              <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
-                基本信息
-              </h2>
-              <a href="#" class="text-xs text-gray-500 hover:text-orange-500">[详情]</a>
-            </div>
-
-            <p class="mb-6 text-sm text-gray-600 leading-relaxed dark:text-gray-300">
-              中国石油大学（华东）是教育部直属全国重点大学，是国家“211工程”重点建设和开展“985工程优势学科创新平台”建设并建有研究生院的高校之一。学校是教育部和五大能源企业集团公司、教育部和山东省人民政府共建的高校...
-            </p>
-
-            <!-- 排名与数据 -->
-            <div class="mb-6 rounded-lg bg-orange-50 p-4 dark:bg-slate-700/50">
-              <div class="grid grid-cols-2 gap-4 text-center md:grid-cols-4">
-                <div v-for="(rank, idx) in rankings" :key="idx" class="border-r border-orange-200 last:border-0 dark:border-slate-600">
-                  <div class="text-xl text-orange-600 font-bold dark:text-orange-400">
-                    {{ rank.value }}
-                  </div>
-                  <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                    {{ rank.label }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 地理位置 & 地图 -->
-            <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-slate-700">
-              <div class="flex border-b border-gray-200 bg-gray-50 dark:border-slate-700 dark:bg-slate-700">
-                <button
-                  v-for="tab in ['唐岛湾校区', '东营科教园区', '古镇口校区']" :key="tab"
-                  class="px-4 py-2 text-sm transition-colors"
-                  :class="activeLocationTab === tab ? 'bg-white dark:bg-slate-800 text-orange-500 border-t-2 border-orange-500' : 'text-gray-600 dark:text-gray-400'"
-                  @click="activeLocationTab = tab"
-                >
-                  {{ tab }}
-                </button>
-              </div>
-              <div class="h-64 flex flex-col md:flex-row">
-                <!-- 模拟地图 -->
-                <div class="group relative w-full flex items-center justify-center bg-blue-50 md:w-1/2 dark:bg-slate-900">
-                  <span class="text-4xl text-blue-300">MAP</span>
-                  <div class="absolute inset-0 bg-black/5 transition dark:bg-white/5 group-hover:bg-transparent" />
-                  <div class="absolute bottom-2 right-2 rounded bg-white px-2 py-1 text-xs shadow dark:bg-slate-700">
-                    地图详情 >
-                  </div>
-                </div>
-                <!-- 地址详情 -->
-                <div class="w-full flex flex-col justify-center p-4 md:w-1/2">
-                  <h4 class="mb-2 flex items-center gap-2 text-gray-800 font-bold dark:text-white">
-                    📍 {{ activeLocationTab }}
-                  </h4>
-                  <p class="mb-3 text-sm text-orange-500">
-                    {{ locationInfo.address }}
-                  </p>
-                  <p class="text-xs text-gray-500 leading-relaxed dark:text-gray-400">
-                    {{ locationInfo.details }}
-                  </p>
-                  <div class="mt-4 flex gap-4 text-center">
-                    <div>
-                      <div class="text-sm font-bold dark:text-white">
-                        58
-                      </div><div class="text-xs text-gray-400">
-                        餐饮场所
-                      </div>
-                    </div>
-                    <div>
-                      <div class="text-sm font-bold dark:text-white">
-                        27
-                      </div><div class="text-xs text-gray-400">
-                        酒店
-                      </div>
-                    </div>
-                    <div>
-                      <div class="text-sm font-bold dark:text-white">
-                        7
-                      </div><div class="text-xs text-gray-400">
-                        购物中心
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <!-- 2. 院系设置模块 -->
-          <section class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
-            <div class="mb-4 flex items-center justify-between">
-              <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
-                院系设置
-              </h2>
-            </div>
-
-            <div class="overflow-x-auto">
-              <table class="w-full text-left text-sm">
-                <thead class="bg-gray-50 text-xs text-gray-500 dark:bg-slate-700 dark:text-gray-400">
-                  <tr>
-                    <th class="w-1/4 px-4 py-3">
-                      学院
-                    </th>
-                    <th class="px-4 py-3">
-                      专业
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
-                  <tr v-for="(dept, idx) in departments" :key="idx" class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
-                    <td class="px-4 py-3 text-gray-900 font-medium dark:text-white">
-                      {{ dept.college }}
-                    </td>
-                    <td class="px-4 py-3 text-gray-600 dark:text-gray-300">
-                      <div class="flex flex-wrap gap-2">
-                        <span v-for="major in dept.majors" :key="major" class="rounded bg-gray-100 px-2 py-0.5 text-xs dark:bg-slate-600">
-                          {{ major }} <span class="ml-1 text-gray-300">本科</span>
-                        </span>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-
-            <!-- 分页模拟 -->
-            <div class="mt-4 flex justify-center gap-2 text-xs text-gray-500">
-              <button class="px-2 py-1 hover:text-orange-500">
-                首页
-              </button>
-              <button class="px-2 py-1 hover:text-orange-500">
-                上一页
-              </button>
-              <button class="h-6 w-6 flex items-center justify-center rounded-full bg-orange-500 text-white">
-                1
-              </button>
-              <button class="h-6 w-6 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
-                2
-              </button>
-              <button class="px-2 py-1 hover:text-orange-500">
-                下一页
-              </button>
-            </div>
-          </section>
-
-          <!-- 3. 校园风光 -->
-          <section class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
-            <div class="mb-4 flex items-center justify-between">
-              <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
-                校园风光
-              </h2>
-              <a href="#" class="text-xs text-orange-500">更多 ></a>
-            </div>
-            <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
-              <div v-for="(img, i) in sceneryImages" :key="i" class="group relative h-32 cursor-pointer overflow-hidden rounded-lg">
-                <img :src="img" class="h-full w-full transform object-cover transition group-hover:scale-110" alt="scenery">
-                <div class="absolute inset-0 bg-black/10 transition group-hover:bg-black/0" />
-              </div>
-            </div>
-          </section>
-
-          <!-- 4. 校园配置 & 奖学金 (两列并排) -->
-          <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-            <!-- 校园配置 -->
-            <section class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
-              <div class="mb-4 flex items-center justify-between">
-                <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
-                  校园配置
-                </h2>
-                <!-- 简单下拉模拟 -->
-                <span class="cursor-pointer rounded bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-slate-700">唐岛湾校区 ▾</span>
-              </div>
-
-              <div class="grid grid-cols-3 mb-4 gap-4">
-                <div v-for="item in facilities" :key="item.name" class="flex flex-col items-center rounded bg-gray-50 p-2 dark:bg-slate-700/30">
-                  <span class="mb-1 text-2xl">{{ item.icon }}</span>
-                  <span class="text-xs text-gray-600 dark:text-gray-300">{{ item.name }}</span>
-                </div>
-              </div>
-
-              <div class="flex gap-2 overflow-x-auto pb-2">
-                <div class="h-24 w-24 flex flex-shrink-0 items-center justify-center rounded bg-gray-200 text-xs text-gray-400 dark:bg-slate-700">
-                  食堂图片
-                </div>
-                <div class="h-24 w-24 flex flex-shrink-0 items-center justify-center rounded bg-gray-200 text-xs text-gray-400 dark:bg-slate-700">
-                  宿舍图片
-                </div>
-              </div>
-            </section>
-
-            <!-- 奖学金设置 -->
-            <section class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
-              <div class="mb-4 flex items-center justify-between">
-                <h2 class="border-l-4 border-orange-500 pl-3 text-lg text-gray-900 font-bold dark:text-white">
-                  奖学金设置
-                </h2>
-                <span class="text-xs text-gray-400">更新: 2024-06-18</span>
-              </div>
-              <div class="custom-scrollbar h-48 overflow-y-auto pr-2 text-sm text-gray-600 space-y-4 dark:text-gray-300">
-                <div>
-                  <h4 class="mb-1 text-gray-800 font-bold dark:text-gray-200">
-                    奖学金设置
-                  </h4>
-                  <p class="text-xs leading-relaxed">
-                    目前学校已经建立起以各类奖学金、助学金、助学贷款、勤工助学、困难补助为主体的多元化资助体系。
-                  </p>
-                </div>
-                <div>
-                  <h4 class="mb-1 text-gray-800 font-bold dark:text-gray-200">
-                    困难资助办法
-                  </h4>
-                  <p class="text-xs leading-relaxed">
-                    家庭经济特别困难的新生如暂时筹集不齐学费和住宿费，可在报到当天，通过学校开设的“绿色通道”办理入学手续。
-                  </p>
-                </div>
-              </div>
-            </section>
-          </div>
+          <!-- 子页面组件 -->
+          <SchoolOverview v-show="activeNavTab === '学校概况'" />
+          <HistoricalScores v-show="activeNavTab === '历年分数'" />
+          <EnrollmentPlan v-show="activeNavTab === '招生计划'" />
+          <Majors v-show="activeNavTab === '开设专业'" />
+          <AdmissionPrediction v-show="activeNavTab === '录取预测'" />
         </div>
-
         <!-- 右侧侧边栏 (保留男女比例，其他已移除) -->
         <div class="hidden lg:col-span-1 lg:block space-y-6">
           <!-- 男女比例 -->

From 6ab4146b7ce020812d507bf454b923fd197dac87 Mon Sep 17 00:00:00 2001
From: zhouwentao <zwt13703@gmail.com>
Date: Sat, 7 Feb 2026 15:44:04 +0800
Subject: [PATCH 2/2] feat:agentation plugin

---
 package.json                        |   6 +
 pnpm-lock.yaml                      | 377 +++++++++++++++++++++++++++-
 src/App.vue                         |   3 +
 src/components.d.ts                 |   2 +-
 src/components/AgentationBridge.vue |  32 +++
 vite.config.ts                      |   3 +
 6 files changed, 413 insertions(+), 10 deletions(-)
 create mode 100644 src/components/AgentationBridge.vue

diff --git a/package.json b/package.json
index 00bea82..2c8f6bd 100644
--- a/package.json
+++ b/package.json
@@ -21,10 +21,13 @@
     "@unhead/vue": "catalog:frontend",
     "@unocss/reset": "catalog:frontend",
     "@vueuse/core": "catalog:frontend",
+    "agentation": "^2.2.0",
     "axios": "^1.13.2",
     "crypto-js": "^4.2.0",
     "nprogress": "catalog:frontend",
     "pinia": "catalog:frontend",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "vue": "catalog:frontend",
     "vue-i18n": "catalog:frontend",
     "vue-router": "catalog:frontend"
@@ -38,7 +41,10 @@
     "@types/crypto-js": "^4.2.2",
     "@types/markdown-it-link-attributes": "catalog:types",
     "@types/nprogress": "catalog:types",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@unocss/eslint-config": "catalog:build",
+    "@vitejs/plugin-react": "^5.1.3",
     "@vitejs/plugin-vue": "catalog:build",
     "@vue-macros/volar": "catalog:dev",
     "@vue/test-utils": "catalog:dev",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ad8b96..bb614de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -177,6 +177,9 @@ importers:
       '@vueuse/core':
         specifier: catalog:frontend
         version: 13.0.0(vue@3.5.13(typescript@5.8.2))
+      agentation:
+        specifier: ^2.2.0
+        version: 2.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       axios:
         specifier: ^1.13.2
         version: 1.13.2
@@ -189,6 +192,12 @@ importers:
       pinia:
         specifier: catalog:frontend
         version: 3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
       vue:
         specifier: catalog:frontend
         version: 3.5.13(typescript@5.8.2)
@@ -223,9 +232,18 @@ importers:
       '@types/nprogress':
         specifier: catalog:types
         version: 0.2.3
+      '@types/react':
+        specifier: ^19.2.13
+        version: 19.2.13
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.13)
       '@unocss/eslint-config':
         specifier: catalog:build
         version: 66.1.0-beta.7(eslint@9.23.0(jiti@1.21.7))(typescript@5.8.2)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.3
+        version: 5.1.3(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
       '@vitejs/plugin-vue':
         specifier: catalog:build
         version: 5.2.3(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
@@ -309,7 +327,7 @@ importers:
         version: 19.1.2(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.2)))
       unplugin-vue-components:
         specifier: catalog:build
-        version: 28.4.1(@babel/parser@7.27.0)(vue@3.5.13(typescript@5.8.2))
+        version: 28.4.1(@babel/parser@7.29.0)(vue@3.5.13(typescript@5.8.2))
       unplugin-vue-macros:
         specifier: catalog:build
         version: 2.14.5(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.2)))(esbuild@0.25.1)(rollup@4.37.0)(typescript@5.8.2)(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
@@ -330,7 +348,7 @@ importers:
         version: 11.0.0(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
       vite-plugin-pwa:
         specifier: catalog:build
-        version: 0.21.2(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.1.1)(workbox-window@7.1.0)
+        version: 0.21.2(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
       vite-plugin-vue-devtools:
         specifier: catalog:build
         version: 7.7.2(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
@@ -439,18 +457,34 @@ packages:
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.25.2':
     resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/core@7.25.2':
     resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/generator@7.25.0':
     resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.24.7':
     resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
     engines: {node: '>=6.9.0'}
@@ -463,6 +497,10 @@ packages:
     resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-create-class-features-plugin@7.24.7':
     resolution: {integrity: sha512-kTkaDl7c9vO80zeX1rJxnuRpEsD5tA81yh11X1gQo+PhSti3JS+7qeZo9U4RHobKRiFPKaGK3svUAeb8D0Q7eg==}
     engines: {node: '>=6.9.0'}
@@ -488,6 +526,10 @@ packages:
     resolution: {integrity: sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-hoist-variables@7.22.5':
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
@@ -500,12 +542,22 @@ packages:
     resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.25.2':
     resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-optimise-call-expression@7.24.7':
     resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
     engines: {node: '>=6.9.0'}
@@ -514,6 +566,10 @@ packages:
     resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.18.9':
     resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
     engines: {node: '>=6.9.0'}
@@ -542,14 +598,26 @@ packages:
     resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.25.9':
     resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.24.8':
     resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-wrap-function@7.20.5':
     resolution: {integrity: sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==}
     engines: {node: '>=6.9.0'}
@@ -558,11 +626,20 @@ packages:
     resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.27.0':
     resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6':
     resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
     engines: {node: '>=6.9.0'}
@@ -932,6 +1009,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-regenerator@7.21.5':
     resolution: {integrity: sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==}
     engines: {node: '>=6.9.0'}
@@ -1014,14 +1103,26 @@ packages:
     resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.25.3':
     resolution: {integrity: sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.27.0':
     resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
   '@clack/core@0.4.1':
     resolution: {integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==}
 
@@ -1542,10 +1643,16 @@ packages:
       vue-i18n:
         optional: true
 
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
   '@jridgewell/gen-mapping@0.3.5':
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.0':
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
@@ -1563,6 +1670,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
   '@mdit-vue/plugin-component@2.1.3':
     resolution: {integrity: sha512-9AG17beCgpEw/4ldo/M6Y/1Rh4E1bqMmr/rCkWKmCAxy9tJz3lzY7HQJanyHMJufwsb3WL5Lp7Om/aPcQTZ9SA==}
 
@@ -1660,6 +1770,9 @@ packages:
     resolution: {integrity: sha512-sx8J1O/+j2lqs8MvsEz6rs/6UAUpCb4fu7C6EqtMqzbS3CmqLkTDTOMK+DrWukvyUuHzl8DhMjfNJzQDTqfGJg==}
     engines: {node: '>=20.18.0'}
 
+  '@rolldown/pluginutils@1.0.0-rc.2':
+    resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
+
   '@rollup/plugin-babel@5.3.1':
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -1871,6 +1984,18 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/crypto-js@4.2.2':
     resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
 
@@ -1925,6 +2050,14 @@ packages:
   '@types/nprogress@0.2.3':
     resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
 
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.13':
+    resolution: {integrity: sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -2229,6 +2362,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vitejs/plugin-react@5.1.3':
+    resolution: {integrity: sha512-NVUnA6gQCl8jfoYqKqQU5Clv0aPw14KkZYCsX6T9Lfu9slI0LOU10OTwFHS/WmptsMMpshNd/1tuWsHQ2Uk+cg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^6.2.3
+
   '@vitejs/plugin-vue@5.2.3':
     resolution: {integrity: sha512-IYSLEQj4LgZZuoVpdSUCw3dIynTWQgPlaRP6iAvMle4My0HdYwr5g5wQAfwOeHQBmYwEkqF70nRpSilr6PoUDg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2594,6 +2733,17 @@ packages:
     resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
 
+  agentation@2.2.0:
+    resolution: {integrity: sha512-DIkXtC/XpOdAK/X1qYZMYocSjfU7EKe5bYG5DyxEr2wIuSxEVi2edSQsIWbB+k/S3yvAnnCfpuTkHh8LOvYxgQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   aggregate-error@3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
@@ -3115,6 +3265,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
   cypress-vite@1.6.0:
     resolution: {integrity: sha512-6oZPDvHgLEZjuFgoejtRuyph369zbVn7fjh4hzhMar3XvKT5YhTEoA+KixksMuxNEaLn9uqA4HJVz6l7BybwBQ==}
     peerDependencies:
@@ -5308,6 +5461,19 @@ packages:
     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
     engines: {node: '>= 0.8'}
 
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
@@ -5487,6 +5653,9 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
@@ -6689,8 +6858,16 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.25.2': {}
 
+  '@babel/compat-data@7.29.0': {}
+
   '@babel/core@7.25.2':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -6711,6 +6888,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.0(supports-color@8.1.1)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/generator@7.25.0':
     dependencies:
       '@babel/types': 7.27.0
@@ -6718,6 +6915,14 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
 
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
   '@babel/helper-annotate-as-pure@7.24.7':
     dependencies:
       '@babel/types': 7.27.0
@@ -6734,6 +6939,14 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.0
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
   '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -6777,6 +6990,8 @@ snapshots:
       '@babel/template': 7.25.0
       '@babel/types': 7.27.0
 
+  '@babel/helper-globals@7.28.0': {}
+
   '@babel/helper-hoist-variables@7.22.5':
     dependencies:
       '@babel/types': 7.27.0
@@ -6795,6 +7010,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -6805,12 +7027,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-optimise-call-expression@7.24.7':
     dependencies:
       '@babel/types': 7.27.0
 
   '@babel/helper-plugin-utils@7.24.8': {}
 
+  '@babel/helper-plugin-utils@7.28.6': {}
+
   '@babel/helper-remap-async-to-generator@7.18.9(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -6850,10 +7083,16 @@ snapshots:
 
   '@babel/helper-string-parser@7.25.9': {}
 
+  '@babel/helper-string-parser@7.27.1': {}
+
   '@babel/helper-validator-identifier@7.25.9': {}
 
+  '@babel/helper-validator-identifier@7.28.5': {}
+
   '@babel/helper-validator-option@7.24.8': {}
 
+  '@babel/helper-validator-option@7.27.1': {}
+
   '@babel/helper-wrap-function@7.20.5':
     dependencies:
       '@babel/helper-function-name': 7.24.7
@@ -6868,10 +7107,19 @@ snapshots:
       '@babel/template': 7.25.0
       '@babel/types': 7.27.0
 
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
   '@babel/parser@7.27.0':
     dependencies:
       '@babel/types': 7.27.0
 
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -7261,6 +7509,16 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.8
 
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-transform-regenerator@7.21.5(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -7424,6 +7682,12 @@ snapshots:
       '@babel/parser': 7.27.0
       '@babel/types': 7.27.0
 
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
   '@babel/traverse@7.25.3':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -7436,11 +7700,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.0(supports-color@8.1.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.27.0':
     dependencies:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
   '@clack/core@0.4.1':
     dependencies:
       picocolors: 1.1.1
@@ -7856,12 +8137,22 @@ snapshots:
       vue: 3.5.13(typescript@5.8.2)
       vue-i18n: 11.1.2(vue@3.5.13(typescript@5.8.2))
 
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.0': {}
 
   '@jridgewell/set-array@1.2.1': {}
@@ -7878,6 +8169,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   '@mdit-vue/plugin-component@2.1.3':
     dependencies:
       '@types/markdown-it': 14.1.2
@@ -7956,12 +8252,16 @@ snapshots:
     dependencies:
       quansync: 0.2.10
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(rollup@2.79.1)':
+  '@rolldown/pluginutils@1.0.0-rc.2': {}
+
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.1)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
       '@rollup/pluginutils': 3.1.0(rollup@2.79.1)
       rollup: 2.79.1
+    optionalDependencies:
+      '@types/babel__core': 7.20.5
     transitivePeerDependencies:
       - supports-color
 
@@ -8143,6 +8443,27 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.27.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.27.0
+      '@babel/types': 7.27.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
   '@types/crypto-js@4.2.2': {}
 
   '@types/debug@4.1.12':
@@ -8194,6 +8515,14 @@ snapshots:
 
   '@types/nprogress@0.2.3': {}
 
+  '@types/react-dom@19.2.3(@types/react@19.2.13)':
+    dependencies:
+      '@types/react': 19.2.13
+
+  '@types/react@19.2.13':
+    dependencies:
+      csstype: 3.2.3
+
   '@types/resolve@1.20.2': {}
 
   '@types/sinonjs__fake-timers@8.1.1': {}
@@ -8594,6 +8923,18 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.3.2':
     optional: true
 
+  '@vitejs/plugin-react@5.1.3(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-vue@5.2.3(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       vite: 6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0)
@@ -9113,6 +9454,11 @@ snapshots:
 
   agent-base@7.1.3: {}
 
+  agentation@2.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   aggregate-error@3.1.0:
     dependencies:
       clean-stack: 2.2.0
@@ -9654,6 +10000,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  csstype@3.2.3: {}
+
   cypress-vite@1.6.0(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0)):
     dependencies:
       chokidar: 3.6.0
@@ -12273,6 +12621,15 @@ snapshots:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-refresh@0.18.0: {}
+
+  react@19.2.4: {}
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
@@ -12496,6 +12853,8 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
+  scheduler@0.27.0: {}
+
   scslre@0.3.0:
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -13247,7 +13606,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@28.4.1(@babel/parser@7.27.0)(vue@3.5.13(typescript@5.8.2)):
+  unplugin-vue-components@28.4.1(@babel/parser@7.29.0)(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@8.1.1)
@@ -13259,7 +13618,7 @@ snapshots:
       unplugin-utils: 0.2.4
       vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
@@ -13477,13 +13836,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@0.21.2(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.1.1)(workbox-window@7.1.0):
+  vite-plugin-pwa@0.21.2(vite@6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0):
     dependencies:
       debug: 4.4.0(supports-color@8.1.1)
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.12
       vite: 6.2.3(@types/node@20.2.3)(jiti@1.21.7)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0)
-      workbox-build: 7.1.1
+      workbox-build: 7.1.1(@types/babel__core@7.20.5)
       workbox-window: 7.1.0
     transitivePeerDependencies:
       - supports-color
@@ -13744,13 +14103,13 @@ snapshots:
     dependencies:
       workbox-core: 7.1.0
 
-  workbox-build@7.1.1:
+  workbox-build@7.1.1(@types/babel__core@7.20.5):
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.21.5(@babel/core@7.25.2)
       '@babel/runtime': 7.21.5
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(rollup@2.79.1)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@2.79.1)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.1)
diff --git a/src/App.vue b/src/App.vue
index e50bea7..648c602 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import AgentationBridge from './components/AgentationBridge.vue'
+
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
@@ -26,4 +28,5 @@ useHead({
 
 <template>
   <RouterView />
+  <AgentationBridge />
 </template>
diff --git a/src/components.d.ts b/src/components.d.ts
index 1d52cfa..e873273 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,8 +9,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AdmissionPrediction: typeof import('./components/school/AdmissionPrediction.vue')['default']
+    AgentationBridge: typeof import('./components/AgentationBridge.vue')['default']
     BackToTop: typeof import('./components/BackToTop.vue')['default']
-    copy: typeof import('./components/ScoreForm copy.vue')['default']
     DictDemo: typeof import('./components/DictDemo.vue')['default']
     EnrollmentPlan: typeof import('./components/school/EnrollmentPlan.vue')['default']
     FilterBar: typeof import('./components/FilterBar.vue')['default']
diff --git a/src/components/AgentationBridge.vue b/src/components/AgentationBridge.vue
new file mode 100644
index 0000000..f2b8dcd
--- /dev/null
+++ b/src/components/AgentationBridge.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Root } from 'react-dom/client'
+
+const isDev = import.meta.env.DEV
+
+const containerRef = ref<HTMLDivElement | null>(null)
+let reactRoot: Root | null = null
+
+onMounted(async () => {
+  if (!isDev || !containerRef.value)
+    return
+
+  const [{ createElement }, { createRoot }, { Agentation }] = await Promise.all([
+    import('react'),
+    import('react-dom/client'),
+    import('agentation'),
+  ])
+
+  const root = createRoot(containerRef.value)
+  root.render(createElement(Agentation))
+  reactRoot = root
+})
+
+onBeforeUnmount(() => {
+  reactRoot?.unmount()
+  reactRoot = null
+})
+</script>
+
+<template>
+  <div v-if="isDev" ref="containerRef" />
+</template>
diff --git a/vite.config.ts b/vite.config.ts
index f030195..30586c7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,7 @@ import path from 'node:path'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import Shiki from '@shikijs/markdown-it'
 import { unheadVueComposablesImports } from '@unhead/vue'
+import React from '@vitejs/plugin-react'
 import Vue from '@vitejs/plugin-vue'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
@@ -52,6 +53,8 @@ export default defineConfig(({ mode }) => {
         },
       }),
 
+      React(),
+
       // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
       Layouts(),