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

This commit is contained in:
朱浩 2024-07-09 17:47:58 +08:00
parent f5d94a710c
commit 300e9130aa
3 changed files with 93 additions and 25 deletions

View File

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

View File

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

View File

@ -27,18 +27,35 @@
<div class="right-section flex"> <div class="right-section flex">
<div class="header-tool 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>
<div class="user flex"> <div class="user flex">
<el-icon color="#409EFF"> <!-- <el-icon color="#409EFF">
<UserFilled /> <UserFilled />
</el-icon> </el-icon>
<div class="user-info flex"> <div class="user-info flex">
<span>{{ userInfo.nickName }}</span> <span>{{ userInfo.nickName }}</span>
<span>{{ userInfo.postnames }}</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> </div>
</div> </div>
@ -48,16 +65,16 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
const userInfo = userStore.user const userInfo = userStore.user
console.log(userInfo)
const { ipcRenderer } = window.electron || {} const { ipcRenderer } = window.electron || {}
const radio1 = ref('resource') const radio1 = ref('resource')
const isMaxSize = ref(false) const isMaxSize = ref(false)
const router = useRouter(); const router = useRouter()
// //
const minimizeWindow = () => { const minimizeWindow = () => {
@ -76,6 +93,35 @@ const closeWindow = () => {
const changePage = (url) => { const changePage = (url) => {
router.push(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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -155,7 +201,6 @@ const changePage = (url)=>{
} }
} }
.user { .user {
.user-info { .user-info {
padding-right: 5px; padding-right: 5px;
align-items: center; 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> </style>