ali_ai_learn_web/src/App.vue

<template>
  <div id="app" :class="{'isHomePage': $route.path === '/' || $route.path === '/index',vipHomePage: $route.path === '/member'}">
    <ElConfigProvider :locale="langStore.elLocale">
    <el-container style="min-height: 100vh;">
      <el-header class="box_shadow_card">
        <div class="header-content">
          <div class="logo" @click="$router.push('/')">{{ $t('common.title') }}</div>
          <el-menu :default-active="activeIndex"  ref="el_menu"
          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('/learning-system')">{{ $t('route.learning_system') }}</el-menu-item>
            <el-menu-item index="4" @click=" goLearnNote">{{ $t('common.xuxibiji') }}</el-menu-item>
            <el-menu-item index="5" @click="$router.push('/mibi-shop')">{{ $t('route.mibiShop') }}</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?.userAvatar || appStore.avatarDefault" />
            <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-item @click="toPersonal">{{ $t('personalCenter.personalCenter') }}</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>
      <div class="header-bj" v-if="$route.path === '/member'"></div>
      <el-main class="container">
        <router-view />
      </el-main>
      
      <el-footer>
        <div class="footer-content" >
          <p> 
            <span class="cursor-pointer" @click="router.push({name:'Agreement',query:{type:'service_agreement'}})">{{ $t('agreement.service_agreement') }}</span>
            <span class="gray999"> | </span>
            <span class="cursor-pointer" @click="router.push({name:'Agreement',query:{type:'privacy_policy'}})">{{ $t('agreement.privacy_policy') }}</span> 
            <span class="gray999"> | </span>
            <span @click="openNewTab('https://beian.miit.gov.cn/')" class="cursor-pointer">粤ICP备2025364959号-1</span>
            <span class="gray999"> | </span>
            <span>广州暴米智能科技有限公司</span>
          </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, provide, watch, nextTick } from 'vue'
import LangSwitch from './components/LangSwitch.vue'
import { ElConfigProvider, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { openNewTab, isLogin } from '@/utils/util.js'
// 在Pinia安装后再设置初始语言
import { useLangStore } from '@/pinia/langStore'
import { useAppStore } from '@/pinia/appStore'
const langStore = useLangStore();
const appStore = useAppStore();
$i18n.global.locale.value = langStore.currentLang
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() 
// 动态更新页面标题
langStore.updateDynamicTitle()



const route = useRoute()
const router = useRouter()
const el_menu = ref(null);

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

//监听showLoginDialog变化
watch(() => appStore.showLoginDialog, (newVal, oldVal) => {
  if(newVal){
    openLoginDialog();
  }
})

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

// 打开登录弹框
const openLoginDialog = () => {
  loginDialogRef.value?.open();
}
// 处理登录成功
const handleLoginSuccess = () => {
  console.log('登录成功')
  // 可以在这里处理登录后的逻辑，比如更新用户信息、刷新页面等
}
//
function goMyLearning() {
  router.push('/workflow-trade')
};
const goLearnNote = () => {
  if (!isLogin({ callback: openLoginDialog, t })) {
    el_menu.value.updateActiveIndex (activeIndex.value);
    return; // 如果未登录则不执行跳转，也不激活菜单
  }
  router.push('/learn-note');
}
// 将 activeIndex 改为响应式，并根据当前路由动态计算
const activeIndex = computed(() => {
  console.log('route.path',route.path)
  if (route.path === '/index') return '1'
  if (route.path.startsWith('/workflow-trade')) {
    return '2'
  }
  if (route.path.startsWith('/learning-system')) {
    return '3'
  }
  if (route.path.startsWith('/learn-note')) {
    // 如果用户未登录，不应该显示此菜单为激活状态
    if (!appStore.token) return null; // 或者返回上一个有效菜单
    return '4';
  }
  if (route.path.startsWith('/mibi-shop')) {
    return '5'
  }
  if (route.path.startsWith('/personal-center')) {
    return null
  }
  return null // 默认返回首页
});
// 去个人中心
const toPersonal = () => {
  router.push('/personal-center/wallet')
};

// 处理注销
const handleLogout = () => {
  logout().then(() => {
    appStore.LOGOUT()
    ElMessage.success(t('login.logoutSuccess'))
    router.push('/')
  })
};


provide('openLoginDialog', openLoginDialog);
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  &.isHomePage {
    background: url('@/assets/imgs/bg.png') no-repeat center center fixed;
    background-size: 100% 100%;
  }
  &.vipHomePage {
     background: #FBF4F0;
  }
}
.isHomePage{
  .el-header {
    background: url('@/assets/imgs/bg-header.png') no-repeat;
    background-size: 100% 100%;
  }
}
.vipHomePage {
 
  .el-header {
    background: rgba(255,255,255,0.5);
  }
}

.el-header {
  background: url('@/assets/imgs/bg-header_2.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: 1430px;
    width: 80%;
    min-width: 1430px;
    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;
    }
  }
}
.header-bj {
  top: 0;
  width: 100%;
  height: 463px;
  background: url('/src/assets/imgs/header-bj@2x.png') no-repeat;
  background-size: cover;
  position: fixed;
}

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