dashboard/src/App.vue

<template>
  <div class="app-container">
    <!-- 登录页面 -->
    <Login v-if="!isLoggedIn" @login-success="loginSuccess" />

    <!-- 显示Token测试页面的按钮 -->
<!--    <div v-if="isLoggedIn" class="token-test-button">-->
<!--      <el-button type="info" size="small" @click="toggleTokenTest">-->
<!--        {{ showTokenTest ? '关闭测试工具' : '打开Token测试工具' }}-->
<!--      </el-button>-->
<!--    </div>-->

    <!-- Token测试工具 -->
    <TokenTest v-if="isLoggedIn && showTokenTest" />

    <!-- 主仪表盘 -->
    <Dashboard v-if="isLoggedIn && currentPage === 'dashboard' && !showTokenTest"
               @navigate="changePage" 
               @logout="handleLogout" />

    <!-- 科研成果详情页 -->
    <ResearchDetail v-if="isLoggedIn && currentPage === 'research' && !showTokenTest"
                    @back-to-dashboard="backToDashboard"
                    @logout="handleLogout" />

    <!-- 教师科研人才页面 -->
    <TalentDetail v-if="isLoggedIn && currentPage === 'talent' && !showTokenTest"
                  @back-to-dashboard="backToDashboard"
                  @navigate="changePage"
                  @logout="handleLogout" />

    <!-- 工程研究中心页面 -->
    <LabDetail v-if="isLoggedIn && currentPage === 'lab' && !showTokenTest"
               @back-to-dashboard="backToDashboard" 
               @navigate="changePage"
               @logout="handleLogout" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import Login from './components/login.vue'
import Dashboard from './components/Dashboard.vue'
import ResearchDetail from './components/ResearchDetail.vue'
import TalentDetail from './components/TalentDetail.vue'
import LabDetail from './components/LabDetail.vue'
import TokenTest from './components/TokenTest.vue'
import axios from 'axios'
import { getApiBaseUrl } from './config'

// 登录状态
const isLoggedIn = ref(true)

// 当前显示的页面
const currentPage = ref('dashboard')

// 是否显示Token测试工具
const showTokenTest = ref(false)

// 页面加载时检查登录状态
onMounted(() => {
  const token = localStorage.getItem('token')
  const loginStatus = localStorage.getItem('isLoggedIn')
  if (token && loginStatus === 'true') {
    isLoggedIn.value = true
  }
})

// 登录成功
const loginSuccess = () => {
  isLoggedIn.value = true
}

// 切换页面
const changePage = (page) => {
  currentPage.value = page
}

// 返回仪表盘
const backToDashboard = () => {
  currentPage.value = 'dashboard'
}

// 切换Token测试工具显示
const toggleTokenTest = () => {
  showTokenTest.value = !showTokenTest.value
}

// 处理登出
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '退出提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'custom-message-box',
      confirmButtonClass: 'custom-confirm-button',
      cancelButtonClass: 'custom-cancel-button',
    }
  ).then(async () => {
    try {
      // 获取token
      const token = localStorage.getItem('token')
      if (token) {
        // 调用清空数据API
        // await axios.post(
        //   `${getApiBaseUrl()}/api/clear-all-data`,
        //   {},
        //   {
        //     headers: {
        //       'Authorization': `Bearer ${token}`
        //     }
        //   }
        // )
      }
    } catch (error) {
      console.error('清空数据失败:', error)
    } finally {
      // 无论清空数据成功或失败，都清除登录信息
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      localStorage.removeItem('isLoggedIn')
      isLoggedIn.value = false
      currentPage.value = 'dashboard'
      showTokenTest.value = false
    }
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
  background-color: #0c1633;
  color: white;
}

.app-container {
  width: 100%;
  min-height: 100vh;
}

.token-test-button {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

/* 自定义确认框样式 */
.custom-message-box {
  background-color: #0c1633;
  border: 1px solid #1d3160;
  color: white;
}

.custom-message-box .el-message-box__title {
  color: white;
}

.custom-message-box .el-message-box__content {
  color: #c0c5d6;
}

.custom-confirm-button {
  background-color: #1989fa;
  border-color: #1989fa;
  color: white;
}

.custom-cancel-button {
  background-color: transparent;
  border-color: #3a5794;
  color: #c0c5d6;
}
</style>