解决框架标黄，头部退出添加，头像添加

electron.vite.config.mjs

@@ -25,6 +25,11 @@ export default defineConfig({
           target: 'http://192.168.2.52:7863',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
+        },
+        '/profile': {
+          // target: 'http://27.128.240.72:7865',
+          target: 'https://cqyy.ysaix.com:7868',
+          changeOrigin: true
         }
       },
     },

src/renderer/src/layout/components/AppMain.vue

@@ -2,13 +2,14 @@
   <section class="app-main">
     <transition mode="out-in" name="fade-transform">
       <keep-alive>
-        <router-view />
+        <div style="height: 100%;"><router-view /></div>
       </keep-alive>
     </transition>
   </section>
 </template>
 
-<script setup></script>
+<script setup>
+</script>
 
 <style lang="scss" scoped>
 .app-main{

src/renderer/src/layout/components/Header.vue

@@ -27,18 +27,35 @@
 
     <div class="right-section flex">
       <div class="header-tool flex">
-        <span @click="minimizeWindow" title="最小化"><i class="iconfont">&#xe650;</i></span>
+        <span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span>
-        <span @click="maximizeWindow" :title="isMaxSize ? '向下还原':'最大化'"><i class="iconfont">{{ isMaxSize ? '&#xe600'
+        <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"
-            :"&#xe695"}}</i></span>
+          ><i class="iconfont">{{ isMaxSize ? '&#xe600' : '&#xe695' }}</i></span
-        <span @click="closeWindow" title="关闭"><i class="iconfont">&#xe608;</i></span>
+        >
+        <span title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span>
       </div>
       <div class="user flex">
-        <el-icon color="#409EFF">
+<!--        <el-icon color="#409EFF">
           <UserFilled />
         </el-icon>
         <div class="user-info flex">
-          <span>{{ userInfo.nickName}}</span>
+          <span>{{ userInfo.nickName }}</span>
           <span>{{ userInfo.postnames }}</span>
+        </div>-->
+        <div class="avatar-container">
+          <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+            <div class="avatar-wrapper">
+              <img :src="userStore.user.avatar" class="user-avatar" style="float: left;" />
+              <div style="margin-top: 18px; font-size: 0.8em;"> {{ userStore.user.nickName }}</div>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>个人中心</el-dropdown-item>
+                <el-dropdown-item divided command="logout">
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
     </div>
@@ -48,16 +65,16 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
 const userInfo = userStore.user
-
+console.log(userInfo)
-const { ipcRenderer } = window.electron||{}
+const { ipcRenderer } = window.electron || {}
-
 const radio1 = ref('resource')
 
 const isMaxSize = ref(false)
-const router = useRouter();
+const router = useRouter()
 
 // 最小化
 const minimizeWindow = () => {
@@ -73,9 +90,38 @@ const closeWindow = () => {
   ipcRenderer.send('close-window')
 }
 
-const changePage = (url)=>{
+const changePage = (url) => {
   router.push(url)
 }
+function handleCommand(command) {
+  switch (command) {
+    case "setLayout":
+      setLayout();
+      break;
+    case "logout":
+      logout();
+      break;
+    default:
+      break;
+  }
+}
+
+function logout() {
+  ElMessageBox.confirm('确认退出系统', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      location.href = '/index#/login';
+    })
+  }).catch(() => { });
+}
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+  emits('setLayout');
+}
 </script>
 
 <style lang="scss" scoped>
@@ -92,39 +138,39 @@ const changePage = (url)=>{
   display: flex;
   align-items: center;
   width: 50%;
-  .change-tab{
+  .change-tab {
     -webkit-app-region: no-drag;
     margin-left: 20px;
 
-    ul{
+    ul {
-      li{
+      li {
         padding: 3px 13px;
         cursor: pointer;
         flex-direction: column;
         border-radius: 8px;
         margin: 0 5px;
-        .text{
+        .text {
           font-size: 13px;
         }
-        .iconfont{
+        .iconfont {
           font-size: 22px;
         }
-        .icon-resource{
+        .icon-resource {
           color: #f99b53;
         }
-        .icon-prepare{
+        .icon-prepare {
           color: #b088e8;
         }
-        .icon-teach{
+        .icon-teach {
           color: #367dea;
         }
-        &:hover{
+        &:hover {
           background: #d3e3fb;
         }
       }
     }
   }
-  ul{
+  ul {
     -webkit-app-region: no-drag;
   }
   .title {
@@ -146,7 +192,7 @@ const changePage = (url)=>{
     span {
       border-radius: 3px;
       cursor: pointer;
-      &:hover{
+      &:hover {
         background-color: #c4c4c4;
       }
       .iconfont {
@@ -155,7 +201,6 @@ const changePage = (url)=>{
     }
   }
   .user {
-
     .user-info {
       padding-right: 5px;
       align-items: center;
@@ -164,4 +209,21 @@ const changePage = (url)=>{
     }
   }
 }
+.avatar-container {
+  -webkit-app-region: no-drag;
+
+  .avatar-wrapper {
+    display: flex;
+
+    .user-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 10px;
+      margin-top: 8px;
+    }
+    .user-avatar:hover {
+      cursor: pointer;
+    }
+  }
+}
 </style>