window-tools

src/renderer/src/components/window-tools/index.vue

@@ -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>

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

@@ -14,12 +14,7 @@
     </div>
 
     <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="avatar-container">
           <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
@@ -46,11 +41,11 @@
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
+import WindowTools from '@/components/window-tools/index.vue'
 import useUserStore from '@/store/modules/user'
 
+
 const userStore = useUserStore()
-const { ipcRenderer } = window.electron || {}
-const isMaxSize = ref(false)
 const router = useRouter()
 const currentRoute = ref('')
 
@@ -81,19 +76,6 @@ watch(
   { 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) => {
   router.push(url)
@@ -118,11 +100,9 @@ function logout() {
     type: 'warning'
   }).then(() => {
     userStore.logOut().then(() => {
-      // location.href = '/index#/login';
       router.replace('/login')
     }).catch(()=>{
       router.replace('/login')
-      // location.href = '/index#/login';
     })
   }).catch(() => { });
 }
@@ -213,25 +193,6 @@ watch(()=> userStore.avatar,() => {
   padding-bottom: 5px;
   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-info {

src/renderer/src/views/login/index.vue

@@ -7,10 +7,7 @@
       <img class="welcome-img" :src="leftBg2" />
     </div>
     <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>
       <el-form ref="formRef" class="login-form" :model="loginForm" :rules="rules" size="large">
         <el-form-item prop="username">
@@ -44,8 +41,10 @@ import Cookies from 'js-cookie'
 import { encrypt, decrypt } from '@/utils/jsencrypt'
 import useUserStore from '@/store/modules/user'
 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'
 
+
 const { ipcRenderer } = window.electron || {}
 const formRef = ref()
 const userStore = useUserStore()