vitesse-yitisheng-web/src/components/school/Majors.vue

<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>