window-tools

This commit is contained in:
lyc 2024-07-22 11:24:36 +08:00
parent 8ed27fc925
commit de1e0c5a2e
3 changed files with 67 additions and 46 deletions

View File

@ -0,0 +1,61 @@
<template>
<div class="header-tool flex">
<span title="最小化" @click="minimizeWindow"><i class="iconfont icon-zuixiaohua"></i></span>
<span v-if="isHasMax" :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow">
<i class="iconfont" :class="isMaxSize ? 'icon-zuidahua' : 'icon-window-max_line'"></i></span>
<span class="close" title="关闭" @click="closeWindow"><i class="iconfont icon-close"></i></span>
</div>
</template>
<script setup>
import { ref } from 'vue'
const { ipcRenderer } = window.electron || {}
const props = defineProps({
isHasMax: {
type: Boolean,
default: true
}
})
const isMaxSize = ref(false)
//
const minimizeWindow = () => {
ipcRenderer?.send('minimize-window')
}
//
const maximizeWindow = () => {
ipcRenderer?.send('maximize-window')
isMaxSize.value = !isMaxSize.value
}
//
const closeWindow = () => {
ipcRenderer?.send('close-window')
}
</script>
<style lang="scss" scoped>
.header-tool {
-webkit-app-region: no-drag;
span {
border-radius: 3px;
cursor: pointer;
padding: 2px 10px;
&:hover {
background-color: #c4c4c4;
}
}
.close {
&:hover {
background-color: #fb4a3e;
.iconfont {
color: #fff;
}
}
}
}
</style>

View File

@ -14,12 +14,7 @@
</div> </div>
<div class="right-section flex"> <div class="right-section flex">
<div class="header-tool flex"> <WindowTools/>
<span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span>
<span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"><i class="iconfont">{{ isMaxSize ? '&#xe600' :
'&#xe695' }}</i></span>
<span class="close" title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span>
</div>
<div class="user flex"> <div class="user flex">
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
@ -46,11 +41,11 @@
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import WindowTools from '@/components/window-tools/index.vue'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
const { ipcRenderer } = window.electron || {}
const isMaxSize = ref(false)
const router = useRouter() const router = useRouter()
const currentRoute = ref('') const currentRoute = ref('')
@ -81,19 +76,6 @@ watch(
{ immediate: true } { immediate: true }
) )
//
const minimizeWindow = () => {
ipcRenderer.send('minimize-window')
}
//
const maximizeWindow = () => {
ipcRenderer?.send('maximize-window')
isMaxSize.value = !isMaxSize.value
}
//
const closeWindow = () => {
ipcRenderer.send('close-window')
}
const changePage = (url) => { const changePage = (url) => {
router.push(url) router.push(url)
@ -118,11 +100,9 @@ function logout() {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
userStore.logOut().then(() => { userStore.logOut().then(() => {
// location.href = '/index#/login';
router.replace('/login') router.replace('/login')
}).catch(()=>{ }).catch(()=>{
router.replace('/login') router.replace('/login')
// location.href = '/index#/login';
}) })
}).catch(() => { }); }).catch(() => { });
} }
@ -213,25 +193,6 @@ watch(()=> userStore.avatar,() => {
padding-bottom: 5px; padding-bottom: 5px;
flex-direction: column; flex-direction: column;
.header-tool {
-webkit-app-region: no-drag;
span {
border-radius: 3px;
cursor: pointer;
padding: 2px 10px;
&:hover {
background-color: #c4c4c4;
}
}
.close{
&:hover{
background-color: #fb4a3e;
.iconfont{
color: #fff;
}
}
}
}
.user { .user {
.user-info { .user-info {

View File

@ -7,10 +7,7 @@
<img class="welcome-img" :src="leftBg2" /> <img class="welcome-img" :src="leftBg2" />
</div> </div>
<div class="box-item login"> <div class="box-item login">
<div class="header-tool flex"> <WindowTools :isHasMax="false"/>
<span @click="minimizeWindow" title="最小化"><i class="iconfont">&#xe650;</i></span>
<span @click="closeWindow" title="关闭"><i class="iconfont">&#xe608;</i></span>
</div>
<div class="login-title">账号登录</div> <div class="login-title">账号登录</div>
<el-form ref="formRef" class="login-form" :model="loginForm" :rules="rules" size="large"> <el-form ref="formRef" class="login-form" :model="loginForm" :rules="rules" size="large">
<el-form-item prop="username"> <el-form-item prop="username">
@ -44,8 +41,10 @@ import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import leftBg2 from '@/assets/images/login/left-bg2.png' import leftBg2 from '@/assets/images/login/left-bg2.png'
import WindowTools from '@/components/window-tools/index.vue'
import SelectSubject from '@/components/select-subject/index.vue' import SelectSubject from '@/components/select-subject/index.vue'
const { ipcRenderer } = window.electron || {} const { ipcRenderer } = window.electron || {}
const formRef = ref() const formRef = ref()
const userStore = useUserStore() const userStore = useUserStore()