railwaysystem/build_ui/src/views/index.vue

<template>
  <div class="index-container">
    <!-- 正在加载角色信息时的占位保护，杜绝瞬态闪烁 -->
    <div v-if="loadingRoles" v-loading="true" style="height: 300px;" />

    <!-- 1. 管理员优先展示管理端综合驾驶舱 (最高优先级: admin / train_admin) -->
    <div v-else-if="isAdmin" class="app-container home">
      <el-row :gutter="20">
        <el-col :sm="24" :lg="14" style="padding-left: 20px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold; font-size: 16px;">SYFJGYD学员管理系统</span>
            </div>
            <div class="text item" style="margin-bottom: 16px; font-size: 14px; color: #606266; line-height: 1.8;">
              <p>欢迎使用SYFJGYD学员管理系统。本平台提供培训计划编排、学员主档与参训管理、智能排课排程、电子班牌联动、教学设施与实训场地调度，以及全流程多维学习数据分析等核心功能。</p>
            </div>
            <div class="text item" style="margin-bottom: 20px; text-align: center">
              <img src="@/assets/images/version.png" alt="系统架构" style="max-width: 100%; border-radius: 4px;">
            </div>
            <el-divider style="margin: 15px 0;" />
            <div class="text item" style="display: flex; justify-content: space-between; color: #909399; font-size: 13px;">
              <span>系统版本：V1.0</span>
              <span>版权所有：中国科学院沈阳计算技术研究所有限公司</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider />
    </div>

    <!-- 2. 异常检测：同时拥有教师与学员互斥角色，展示受控安全告警 -->
    <div v-else-if="hasRoleConflict" class="app-container">
      <el-result
        icon="warning"
        title="角色互斥冲突告警"
        sub-title="系统检测到您的登录账号同时被分配了【培训教师】与【培训学员】互斥角色，违反业务实名约束。请联系教务管理员核实并调整角色配置。"
      >
        <template slot="extra">
          <el-tag type="danger">train_teacher + train_student 冲突</el-tag>
        </template>
      </el-result>
    </div>

    <!-- 3. 教师身份 (仅 train_teacher) -->
    <teacher-dashboard v-else-if="isTeacherOnly" />

    <!-- 4. 学员身份 (仅 train_student) -->
    <student-dashboard v-else-if="isStudentOnly" />

    <!-- 5. 兜底普通角色/无培训业务角色 -->
    <div v-else class="app-container">
      <el-result
        icon="info"
        title="欢迎登录系统"
        sub-title="当前账号未分配具体教学业务角色，请通过左侧导航菜单开展受限工作或联系管理员授权。"
      />
    </div>
  </div>
</template>

<script>
import TeacherDashboard from '@/views/train/me/teacher/index'
import StudentDashboard from '@/views/train/me/student/index'

export default {
  name: 'Index',
  components: {
    TeacherDashboard,
    StudentDashboard
  },
  data() {
    return {
      version: '3.8.5'
    }
  },
  computed: {
    roles() {
      return this.$store.getters.roles || []
    },
    loadingRoles() {
      return !this.roles || this.roles.length === 0
    },
    isAdmin() {
      return this.roles.includes('admin') || this.roles.includes('train_admin')
    },
    hasTeacher() {
      return this.roles.includes('train_teacher')
    },
    hasStudent() {
      return this.roles.includes('train_student')
    },
    hasRoleConflict() {
      // 非 Admin 且同时包含教师和学员角色时，触发受控互斥拦截
      return !this.isAdmin && this.hasTeacher && this.hasStudent
    },
    isTeacherOnly() {
      return !this.isAdmin && this.hasTeacher && !this.hasStudent
    },
    isStudentOnly() {
      return !this.isAdmin && this.hasStudent && !this.hasTeacher
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>