education/frontend/src/layout/components/SemesterBar.vue

<template>
  <div class="semester-bar">
    <!-- 左：当前学期信息 -->
    <div class="semester-bar__item semester-bar__current">
      <i class="el-icon-date" />
      <span class="label">当前学期</span>
      <span class="value">{{ currentSemesterName }}</span>
      <span v-if="currentSemesterDate" class="date">{{ currentSemesterDate }}</span>
    </div>

    <span class="semester-bar__divider" />

    <!-- 中：今日日期 -->
    <div class="semester-bar__item semester-bar__date">
      <i class="el-icon-time" />
      <span class="value">{{ todayText }}</span>
      <span class="week">{{ weekText }}</span>
    </div>

    </div>
</template>

<script>
import { listSemester } from '@/api/teachBusiness/semester'

export default {
  name: 'SemesterBar',
  data() {
    return {
      // 当前选中的学期对象
      activeSemester: null,
      today: new Date()
    }
  },
  computed: {
    currentSemesterName() {
      return this.getSemesterName(this.activeSemester ? this.activeSemester.nd : '')
    },
    currentSemesterDate() {
      const item = this.activeSemester
      if (!item) return ''
      const start = this.formatDate(item.kxrq)
      const end = this.formatDate(item.jsrq)
      if (!start && !end) return ''
      return `${start || '?'} ~ ${end || '?'}`
    },
    todayText() {
      const d = this.today
      const pad = n => (n < 10 ? '0' + n : '' + n)
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
    },
    weekText() {
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      return weeks[this.today.getDay()]
    }
  },
  created() {
    this.getSemesterList()
  },
  methods: {
    /** 加载当前学期（dqxq=true），无当前学期则取第一条 */
    getSemesterList() {
      listSemester({ pageNum: 1, pageSize: 100 }).then(response => {
        const data = response.data || {}
        const list = data.records || []
        const current = list.find(i => i.dqxq)
        this.activeSemester = current || (list[0] ? list[0] : null)
      }).catch(() => {
        this.activeSemester = null
      })
    },
    /** 格式化后端 LocalDateTime（2026-02-23T00:00:00 -> 2026-02-23） */
    formatDate(value) {
      if (!value) return ''
      return String(value).slice(0, 10)
    },
    /** 学期代号 -> 学期名称（如 202601 -> 2026年春季学期） */
    getSemesterName(nd) {
      if (!nd) return ''
      const s = String(nd)
      const xn = s.slice(0, 4)
      const xq = s.slice(4)
      const map = { '01': '春季学期', '02': '夏季学期', '03': '秋季学期' }
      return xn + '年' + (map[xq] || '第' + xq + '学期')
    }
  }
}
</script>

<style scoped lang="scss">
.semester-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  user-select: none;

  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-sizing: border-box;

    i {
      color: #fff;
      margin-right: 7px;
      font-size: 15px;
      display: flex;
      align-items: center;
      height: 100%;
    }

    .label,
    .value,
    .week,
    .date {
      display: flex;
      align-items: center;
      height: 100%;
      white-space: nowrap;
    }

    .label {
      color: rgba(255, 255, 255, 0.75);
      margin-right: 6px;
    }

    .value {
      font-weight: 600;
      color: #fff;
    }

    .date {
      margin-left: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.5px;
      padding-left: 10px;
      border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .week {
      margin-left: 8px;
      color: rgba(255, 255, 255, 0.75);
    }
  }

  &__current {
    margin-right: 0;
  }

  &__date {
    margin-right: 0;
  }

  /* 胶囊式布局后不再需要分隔线 */
  &__divider {
    display: none;
  }
}
</style>