Merge remote-tracking branch 'origin/wanzi' into muzi

src/components/HomePage.vue

@@ -32,13 +32,6 @@
             @click="router.push('/programming')"
             >AI编程课</el-button
           >
-          <!-- <el-button
-            round
-            class="top-right-btn"
-            :class="{ 'is-active': selectedButton === 'AI通识课' }"
-            @click="selectedButton = 'AI通识课'"
-            >AI通识课</el-button
-          > -->
           <el-button
             round
             class="top-right-btn"
@@ -59,6 +52,10 @@
             "
             >AI艺术课</el-button
           >
+          <!-- 用户名显示 -->
+          <div class="user-name-box">
+            {{ userName }}
+          </div>
           <!-- 退出登录 -->
           <el-button round class="logout-box-btn" @click="LogoutClick()">
             <img :src="logoutIcon" alt="Logout" />
@@ -83,7 +80,6 @@
         <span>AI实验室</span>
       </div>
       <div class="right-box-in-box2">
-        <!-- @click="goToEvaluation" -->
         <div
           class="top-sub-box"
           :style="{ backgroundImage: `url(${indexImages[2]})` }"
@@ -124,10 +120,16 @@ import { Message } from '@/utils/message/Message.js'
 
 // 平台标题响应式变量
 const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
+// 用户名响应式变量
+const userName = ref('')
 // 更新平台标题
 const updatePlatformTitle = () => {
   platformTitle.value = localStorage.getItem('tenantName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT
 }
+// 更新用户名
+const updateUserName = () => {
+  userName.value = localStorage.getItem('userName')
+}
 
 // 获取当前路由对象
 const router = useRouter()
@@ -244,11 +246,16 @@ onMounted(() => {
   fetchCtTypes()
   // 初始化平台标题
   updatePlatformTitle()
+  // 初始化用户名
+  updateUserName()
   // storage事件监听器，监听其他标签页对localStorage的修改
   window.addEventListener('storage', (e) => {
     if (e.key === 'tenantName') {
       updatePlatformTitle()
     }
+    if (e.key === 'userName') {
+      updateUserName()
+    }
   })
 })
 // 全局:更新租户名称
@@ -281,6 +288,21 @@ window.updateTenantName = (newName) => {
 .logout-box-btn img {
   width: rpx(10);
 }
+// 用户名显示
+.user-name-box {
+  width: auto;
+  height: rpx(15);
+  margin: rpx(10) rpx(-10) 0 0;
+  color: white;
+  font-size: rpx(8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: rpx(15);
+  padding: rpx(0) rpx(10);
+  min-width: rpx(20);
+}
 .home-container {
   position: fixed;
   top: 0;

src/router/index.js

@@ -1,6 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import App from '../App.vue'
-// import HomePage from '../components/HomePage.vue'
 
 const routes = [
 
@@ -115,7 +114,7 @@ const routes = [
   },
 ]
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes
 })
 export default router

src/views/programming/ProgrammingGame.vue

@@ -18,7 +18,17 @@
           </div>
         </div>
         <div class="top-right-box">
-          <div class="top-right-inner-box"></div>
+          <div class="top-right-inner-box">
+            <!-- 用户名显示 -->
+            <div class="user-name-box">
+              {{ userName }}
+            </div>
+            <!-- 退出登录 -->
+            <el-button round class="logout-box-btn" @click="LogoutClick()">
+              <img :src="logoutIcon" alt="Logout" />
+              退出登录
+            </el-button>
+          </div>
         </div>
       </div>
 
@@ -67,7 +77,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, onMounted } from 'vue'
 // 返回图标
 import { ArrowLeftBold } from '@element-plus/icons-vue';
 // 导入路由
@@ -78,6 +88,12 @@ import { getThemeList } from '@/api/programming/index.js'
 import leftbtn from '@/assets/programming/leftbtn.png'
 import rightbtn from '@/assets/programming/rightbtn.png'
 
+// 退出登录图标
+import logoutIcon from '@/assets/icon/logout.png'
+// 退出登录
+import { logout } from '@/api/login/login.js'
+import { Message } from '@/utils/message/Message.js'
+
 
 // 创建路由实例
 const router = useRouter()
@@ -87,6 +103,12 @@ const activeButton = ref(0)
 const circleButtons = reactive([])
 // 定义课程类别数据
 const courseCategories = reactive([])
+// 用户名响应式变量
+const userName = ref('')
+// 更新用户名
+const updateUserName = () => {
+  userName.value = localStorage.getItem('userName')
+}
 
 // 获取主题列表
 getThemeList().then(res => {
@@ -200,6 +222,41 @@ const goToHomePage = () => {
   })
 }
 
+// 退出登录
+const LogoutClick = async () => {
+  try {
+    // 调用logout API 退出登录
+     const logoutRes = await logout()
+     console.log('退出登录:', logoutRes);
+    // 清空 token 和登录状态
+    localStorage.removeItem('token')
+    localStorage.removeItem('isLoggedIn')
+    localStorage.removeItem('maxCourseSections')
+
+    // 跳转到登录页面
+    router.push({ path: '/login' })
+  } catch (error) {
+    console.error('退出登录失败:', error)
+    // API调用失败，也清空本地存储
+    localStorage.removeItem('token')
+    localStorage.removeItem('isLoggedIn')
+    localStorage.removeItem('maxCourseSections')
+    Message().notifyError('退出登录失败，请重试', true)
+    router.push({ path: '/login' })
+  }
+}
+
+onMounted(() => {
+  // 初始化用户名
+  updateUserName()
+  // storage事件监听器，监听其他标签页对localStorage的修改
+  window.addEventListener('storage', (e) => {
+    if (e.key === 'userName') {
+      updateUserName()
+    }
+  })
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -289,6 +346,44 @@ const goToHomePage = () => {
     cursor: pointer;
   }
 }
+
+.top-right-inner-box{
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: flex-end; /* 水平靠右对齐 */
+  padding-right: rpx(20);
+}
+
+.user-name-box {
+  width: auto;
+  height: rpx(15);
+  margin: rpx(10) rpx(-10) 0 0;
+  color: white;
+  font-size: rpx(8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: rpx(15);
+  padding: rpx(0) rpx(10);
+  min-width: rpx(20);
+  cursor: pointer;
+}
+
+.logout-box-btn {
+  width: rpx(65);
+  height: rpx(15);
+  margin: rpx(10) rpx(10) 0 0;
+  background-color: transparent;
+  color: white;
+  border: none;
+  font-size: rpx(7);
+  outline: none;
+}
+
+.logout-box-btn img {
+  width: rpx(10);
+}
   
 .middle-wrapper {
   height: 75%;