ali_ai_learn_web/src/App.vue

<template>
  <div id="app">
    <ElConfigProvider :locale="langStore.elLocale">
    <el-container style="min-height: 100vh;">
      <el-header>
        <div class="header-content">
          <div class="logo" @click="$router.push('/')">{{ $t('common.title') }}</div>
          <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" class="meauList">
            <el-menu-item index="1" @click="$router.push('/')">AI{{ $t('common.gongzuoliu') }}</el-menu-item>
            <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
            <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
            <el-menu-item index="3" @click="$router.push('/my-learning')">学习教程系统</el-menu-item>
            <el-menu-item index="4" @click="$router.push('/my-learning')">学习笔记</el-menu-item>
            <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
          </el-menu>
          <div class="header-right">
            <el-avatar :size="32" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
            <el-dropdown v-if="appStore.token">
              <span class="el-dropdown-link">
                {{ appStore.userInfo?.nickName || '用户' }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">{{ $t('common.logout') }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 打开登录弹框 -->
            <el-button type="text" @click="openLoginDialog" v-if="!appStore.token">{{ $t('common.login') }}</el-button>  
            <LangSwitch />
          </div>
        </div>
      </el-header>
      <!-- 固定头部占位 -->
      <div style="height: 60px;"></div>
      <el-main class="container">
        <router-view />
      </el-main>
      
      <el-footer>
        <div class="footer-content">
          <p>服务协议隐私政策浙ICP备2024141841号-6浙公网安备 33011002018505 号</p>
        </div>
      </el-footer>
    </el-container>
    <!-- 登录弹框组件 -->
    <LoginDialog ref="loginDialogRef" @login-success="handleLoginSuccess" />
    </ElConfigProvider>
  </div>
</template>

<script setup>
import { logout } from '@/api/auth.js'
import LoginDialog from './components/LoginDialog.vue'
import { computed,ref,onMounted } from 'vue'
import LangSwitch from './components/LangSwitch.vue'
import { ElConfigProvider, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
// 在Pinia安装后再设置初始语言
import { useLangStore } from '@/pinia/langStore'
import { useAppStore } from '@/pinia/appStore'
const langStore = useLangStore();
const appStore = useAppStore();
$i18n.global.locale.value = langStore.currentLang
// 动态更新页面标题
langStore.updateDynamicTitle()

const route = useRoute()
const router = useRouter()

// 登录弹框引用
const loginDialogRef = ref(null)

onMounted(() => {
  appStore.USERINFO()
})

// 打开登录弹框
const openLoginDialog = () => {
  loginDialogRef.value?.open()
}
// 处理登录成功
const handleLoginSuccess = () => {
  console.log('登录成功')
  // 可以在这里处理登录后的逻辑，比如更新用户信息、刷新页面等
}
//
function goMyLearning() {
  router.push('/my-learning')
};
// 将 activeIndex 改为响应式，并根据当前路由动态计算
const activeIndex = computed(() => {
  console.log(route)
  if (route.path === '/') return '1'
  if (route.path.startsWith('/my-learning')) {
    return '2'
  }
  return '1' // 默认返回首页
});
// 处理注销
const handleLogout = () => {
  logout().then(() => {
    appStore.LOGOUT()
    ElMessage.success('注销成功')
    router.push('/')
  })
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header {
  // background-color: rgba(255, 255, 255, 0.5);
  background: url('@/assets/imgs/bg-header.png') no-repeat;
  background-size: 100% 100%;
  color: #333;
  line-height: 60px;
  // border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  
  .header-content {
    max-width: 1520px;
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .logo {
      min-width: 220px;
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
    }
    .meauList{
      &.el-menu{
        background-color: transparent;
      }
      .el-menu--horizontal.el-menu{
        border-bottom: none;
      }
      .el-menu-item{
        font-size: 16px;
      }
    }
    
    .header-right {
      margin-right: 30px;
      display: flex;
      align-items: center; /* 垂直居中 */
      gap: 10px;
    }
  }
}

.el-footer {
  color: #666;
  text-align: center;
  padding: 20px 0;
  
  .footer-content {
    font-size: 14px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.el-main {
  padding: 0;
}
</style>