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

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.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 radio1 = ref('resource')
 
 const isMaxSize = ref(false)
-const router = useRouter();
+const router = useRouter()
 
 // 最小化
 const minimizeWindow = () => {
@@ -76,6 +93,35 @@ const closeWindow = () => {
 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>
@@ -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>