1.增加大写提示 2.用户名光标已改成自动聚焦 3.已加回车登陆 4.登陆界面已加关闭和最小化按钮 5.已增加记住用户名、记住密码

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vedio_app",
+  "name": "video_app",
   "version": "0.0.1",
   "author": "liuwei <1097408921@qq.com>",
   "description": "An electron-vue project",

src/renderer/components/Admin.vue

@@ -23,6 +23,7 @@
         <!--最小化和关闭按钮-->
         <div class="mini" @click="miniWindow">－</div>
         <div class="close" @click="closeWindow">×</div>
+        <button @click="logout">退出</button>
     </div>
 </template>
 
@@ -67,6 +68,11 @@
             closeWindow() {
                 require('electron').ipcRenderer.send('window-close')
             },
+
+            // 退出登录
+            logout() {
+                this.$router.replace('/login')
+            }
         },
 
         computed: {

src/renderer/components/Label.vue

@@ -1,5 +1,4 @@
 <!--label标签组件-->
-
 <template>
     <div>
         <div v-for="item in labelJson"

src/renderer/components/Login.vue

@@ -1,6 +1,7 @@
 <!--登录界面-->
 <template>
-    <div class="login" ref="login" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BrackgroupStr.slice(3) : ''}`}">
+    <div class="login" ref="login"
+         :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BrackgroupStr.slice(3) : ''}`}">
         <section class="login-content" :style="{
             width: loginJson[0] ? loginJson[0].Width + 'px' : '',
             height: loginJson[0] ? loginJson[0].Height + 'px' : '',
@@ -13,24 +14,35 @@
             <h2>用户登录</h2>
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="55px" class="login-form">
                 <el-form-item label="账号" prop="username">
-                    <el-input v-model="ruleForm.username" prefix-icon="el-icon-user"></el-input>
+                    <el-input v-model="ruleForm.username" prefix-icon="el-icon-user" autofocus @keyup.enter.native="submitForm('ruleForm')"></el-input>
                 </el-form-item>
                 <el-form-item label="密码" prop="password">
-                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
+                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"
+                              prefix-icon="el-icon-lock" @keyup.20.native="testCapsLock" @keyup.enter.native="submitForm('ruleForm')" show-password></el-input>
                 </el-form-item>
+                <el-checkbox v-model="checked" :checked="checked" class="checkedBox">记住用户名和密码</el-checkbox>
                 <el-form-item>
-                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="submitForm('ruleForm')">提交</el-button>
-                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="resetForm('ruleForm')">重置</el-button>
+                    <el-button type="primary"
+                               :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}"
+                               @click="submitForm('ruleForm')">提交
+                    </el-button>
+                    <el-button type="primary"
+                               :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}"
+                               @click="resetForm('ruleForm')">重置
+                    </el-button>
                 </el-form-item>
             </el-form>
         </section>
+        <!--最小化和关闭按钮-->
+        <div class="mini" @click="miniWindow">－</div>
+        <div class="close" @click="closeWindow">×</div>
     </div>
 </template>
 
 <script>
     import {reqLogin} from "../api"
-    import storageUtils from "../../utils/storageUtils"
     import {getStaticFile} from "../../utils/tools"
+    import storageUtils from "../../utils/storageUtils"
 
     export default {
         data() {
@@ -51,14 +63,17 @@
                 },
                 rules: {
                     username: [
-                        { validator: checkUsername, trigger: 'blur' }
+                        {validator: checkUsername, trigger: 'blur'}
                     ],
                     password: [
-                        { validator: validatePasswrod, trigger: 'blur' }
+                        {validator: validatePasswrod, trigger: 'blur'}
                     ]
                 },
-                loginJson:[],
-                staticUrl:this.$store.state.staticUrl
+                loginJson: [],
+                staticUrl: this.$store.state.staticUrl,
+                flag:false, // 大写开启状态
+                checked:false, // 记住用户名和密码的状态
+                user:storageUtils.getUser(), // 本地存储的用户数据
             }
         },
 
@@ -66,69 +81,139 @@
             this.loginJson = await getStaticFile('EnityLogin.Data')
         },
 
+        mounted() {
+          // 如果status为true，对表单进行赋值
+          if(this.checked){
+              this.ruleForm.username = this.user.name
+              this.ruleForm.password = this.user.password
+          }
+        },
+
         updated() {
             // 添加背景图片
             const backIcon = this.loginJson[0] ? this.loginJson[0].BackIcon : ''
-            this.$refs.login.style.backgroundImage = backIcon ? 'url('+`${this.staticUrl}/Data/${backIcon}`+')' : null
+            this.$refs.login.style.backgroundImage = backIcon ? 'url(' + `${this.staticUrl}/Data/${backIcon}` + ')' : null
         },
 
         methods: {
+            // 提交表单，登录
             async submitForm() {
-                const {username,password} = this.ruleForm
-                if(username === '' || password === ''){
+                const {username, password} = this.ruleForm
+                if (username === '' || password === '') {
                     this.$message.warning('请输入用户名和密码！')
                     return
                 }
-                const userInfo = {name:username,password}
-
+                const userInfo = {name: username, password}
                 // 请求登录
-                const res = await reqLogin(userInfo,'login')
-                if(res.token){
+                const res = await reqLogin(userInfo, 'login')
+                if (res.token) {
                     // 将user保存到vuex的state，同时保存到本地
                     this.$store.dispatch('saveUser', userInfo)
+                    // 保存记住用户名和密码的状态
+                    storageUtils.saveStatus(this.check)
                     // 将token保存到会议存储
                     storageUtils.saveToken(res.token)
                     // 跳转到管理界面
                     this.$router.replace('/admin')
-                }else {
+                } else {
                     this.$message.error('用户名或密码错误！')
                 }
             },
 
+            // 重置表单
             resetForm(formName) {
                 this.$refs[formName].resetFields()
-            }
+            },
+
+            // 监视开启和关闭大写
+            testCapsLock() {
+                this.flag = !this.flag
+                if(this.flag){
+                    this.$message({
+                        message: '大写开启',
+                        type: 'success'
+                    })
+                }else {
+                    this.$message('大写关闭')
+                }
+            },
+
+            // 最小化窗口
+            miniWindow() {
+                require('electron').ipcRenderer.send('window-min')
+            },
+
+            // 关闭窗口
+            closeWindow() {
+                require('electron').ipcRenderer.send('window-close')
+            },
         }
     }
 </script>
 
 <style lang="less">
-    html,body {
-        margin:0;
-        padding:0;
+    html, body {
+        margin: 0;
+        padding: 0;
 
         .login {
-            width:100vw;
+            width: 100vw;
             height: 100vh;
             background-size: 100% 100%;
             position: relative;
 
             .login-content {
                 position: absolute;
+
                 h2 {
                     text-align: center;
-                    font-weight:bold;
+                    font-weight: bold;
                     margin-bottom: 20px;
                 }
+
                 .el-input {
-                    width:90%;
+                    width: 90%;
                 }
+
                 .login-form {
                     .login-form-button {
                         width: 100%;
                     }
+
+                    .checkedBox {
+                        margin:0 0 10px 55px;
+                    }
                 }
             }
+
+            // 最小化和关闭按钮
+            .mini {
+                .miniclose(30px,20px);
+                &:hover {
+                    background-color: #ccc;
+                }
+            }
+            .close {
+                .miniclose(0,28px);
+                &:hover {
+                    background-color: #ccc;
+                }
+            }
+        }
+
+        // 带参数的混合
+        .miniclose(@right,@fontSize) {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            top: 0;
+            right:@right;
+            text-align: center;
+            line-height: 30px;
+            font-size:@fontSize;
+            cursor:default;
+            font-weight: 600;
+            color: #000;
         }
     }
 </style>

src/utils/storageUtils.js

@@ -1,6 +1,7 @@
 /*向local中存储数据的工具模块*/
 const USER_KEY = 'user_key'
 const TOKEN_KEY = 'token_key'
+const USER_STATUS = 'user_status'
 export default {
   /*获取用户*/
   getUser () {
@@ -22,5 +23,17 @@ export default {
 
   getToken() {
     sessionStorage.getItem(TOKEN_KEY)
-  }
+  },
+
+  // 本地存储记住用户名和密码的状态
+  getStatus() {
+    return localStorage.getItem(USER_STATUS)
+  },
+
+  saveStatus(status) {
+    localStorage.setItem(USER_STATUS, status)
+  },
 }
+
+
+