AIClass/src/views/ManagementInterface.vue

<template>
  <div class="home-container">
    <div class="box-1">
      <div class="inner-box left-box">
        <div class="app-header">
          <img :src="LogoImage" alt="Logo" class="app-logo" />
          <span>{{ platformTitle }}</span>
        </div>
      </div>
      <div class="inner-box right-box">
        <div class="top-right-box">
          <UserInfoPopover />
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="inner-content">
        <div 
          class="small-box" 
          v-if="hasAiCoursePermission"
          @click="navigateToHome(aiCourseRoutes.home)" 
          :style="{ backgroundImage: `url(${enlightenment})` }"
        >
          <div class="box-logout-btn">AI启蒙课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
        </div>
        <div 
          class="small-box" 
          v-if="hasHomePermission"
          @click="navigateToHome(homeRoutes.home)" 
          :style="{ backgroundImage: `url(${programming})` }"
        >
          <div class="box-logout-btn" >AI通识课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
        </div>
        <div 
          class="small-box" 
          v-if="hasBlocklyPermission"
          @click="navigateToHome(blocklyRoutes.home)" 
          :style="{ backgroundImage: `url(${general})` }"
        >
          <div class="box-logout-btn">AI编程课<el-icon class="arrow-icon"><DArrowRight /></el-icon></div>
        </div>
      </div>
      
      <!-- <div class="home-buttons">
        <el-button 
          v-if="hasHomePermission" 
          type="primary" 
          @click="navigateToHome(homeRoutes.home)"
          class="home-button"
        >
          通识课首页
        </el-button>
        <el-button 
          v-if="hasBlocklyPermission" 
          type="success" 
          @click="navigateToHome(blocklyRoutes.home)"
          class="home-button"
        >
          Blockly编程课首页
        </el-button>
        <el-button 
          v-if="hasAiCoursePermission" 
          type="warning" 
          @click="navigateToHome(aiCourseRoutes.home)"
          class="home-button"
        >
          AI实验课首页
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import UserInfoPopover from '@/components/user/UserInfoPopover.vue'
import { homeRoutes, blocklyRoutes, aiCourseRoutes, managementRoutes } from '@/router'
import { CONFIG } from '@/utils/roleUtils.js'
import { Message } from '@/utils/message/Message.js'
import { DArrowRight } from '@element-plus/icons-vue'

// 背景图
// Logo
import LogoImage from '@/assets/images/logo.png'
// 启蒙课
import enlightenment from '@/assets/manage/enlightenment.png'
// 编程课
import programming from '@/assets/manage/programming02.png'
// 通识课
import general from '@/assets/manage/general02.png'

// 平台标题响应式变量
const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
// 获取当前路由对象
const router = useRouter()

// 计算用户权限
const hasHomePermission = computed(() => {
  const roleRouteStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_KEY)
  const roleRouteSet = roleRouteStr ? JSON.parse(roleRouteStr) : []
  return roleRouteSet.includes(homeRoutes.role)
})

const hasBlocklyPermission = computed(() => {
  const roleRouteStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_KEY)
  const roleRouteSet = roleRouteStr ? JSON.parse(roleRouteStr) : []
  return roleRouteSet.includes(blocklyRoutes.role)
})

const hasAiCoursePermission = computed(() => {
  // const roleRouteStr = localStorage.getItem(CONFIG.USER_ROLE_ROUTE_KEY)
  // const roleRouteSet = roleRouteStr ? JSON.parse(roleRouteStr) : []
  // return roleRouteSet.includes(aiCourseRoutes.role)
  return false
 })

// 更新平台标题
const updatePlatformTitle = () => {
  platformTitle.value = localStorage.getItem('tenantName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT
}

// 导航到对应首页
const navigateToHome = (path) => {
  router.push(path)
}

onMounted(() => {
  // 初始化平台标题
  updatePlatformTitle()
  // storage事件监听器，监听其他标签页对localStorage的修改
  window.addEventListener('storage', (e) => {
    if (e.key === 'tenantName') {
      updatePlatformTitle()
    }
  })
})
// 全局:更新租户名称
window.updateTenantName = (newName) => {
  localStorage.setItem('tenantName', newName)
  updatePlatformTitle()
}

</script>

<style scoped lang="scss">
@use 'sass:math';

@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('@/assets/manage/manageBG.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inner-content{
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: rpx(30);
}

.small-box {
  width: rpx(180);
  height: rpx(230);
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box; // 确保背景图从边框开始显示
  background-clip: padding-box; // 确保背景图不会延伸到边框外
  border-radius: rpx(25);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  .box-logout-btn {
    position: absolute;
    bottom: rpx(0);
    right: rpx(0);
    padding: rpx(2) rpx(15);
    background: linear-gradient(
      to right,
      #face03,
      #fd9f1b
    );
    border-top-left-radius: rpx(20);
    border-bottom-right-radius: rpx(15);
    color: white;
    font-size: rpx(12);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: rpx(3);

    .arrow-icon {
      font-size: rpx(14);
    }
  }
}

.main-content h2 {
  color: white;
  font-size: rpx(24);
  margin-bottom: rpx(60);
  text-align: center;
}

.home-buttons {
  display: flex;
  flex-direction: column;
  gap: rpx(20);
  width: 100%;
  max-width: rpx(400);
}

.home-button {
  width: 100%;
  height: rpx(60);
  font-size: rpx(18);
  border-radius: rpx(8);
}

@media (min-width: 768px) {
  .home-buttons {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .home-button {
    width: rpx(200);
    margin: 0 rpx(10);
  }
}

.box-1 {
  width: 100%;
  min-height: rpx(50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  font-size: rpx(16);
}

.inner-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: rpx(16);
}

.left-box {
  position: relative;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  flex: 1;
  padding-left: rpx(30);
  cursor: pointer;
}

.app-header {
  width: 100%;
  height: rpx(30);
  display: flex;
  align-items: center;
  gap: rpx(5);
}

.app-logo {
  width: rpx(20);
  height: rpx(20);
  object-fit: contain;
}

.app-header span {
  color: white;
  font-size: rpx(11);
  letter-spacing: rpx(1);
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: rpx(10);
  max-width: rpx(200);
  white-space: normal;
  line-height: rpx(16);
  text-align: left;
}

.right-box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: rpx(60);
}

.top-right-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}
</style>


<style lang="scss">
/* 只消除非user-name-box的小三角 */
.no-arrow-dropdown .el-popper__arrow{
  display: none;
}
.el-popper.is-light,
.el-dropdown__popper.el-popper{
  background: transparent;
  border: none;
  box-shadow: none;
}
.el-dropdown__popper{
  --el-dropdown-menuItem-hover-color: none;
}
/* 移除用户名下拉菜单的焦点边框 */
.user-name-box:focus,
.user-name-box:focus-within,
.user-name-box:hover{
  outline: none;
  box-shadow: none;
}
/* 确保Element Plus下拉菜单触发元素没有焦点边框 */
.el-dropdown .el-dropdown__trigger:focus{
  outline: none;
  box-shadow: none;
}
</style>