From a3f920c3aa61a1bbbdf042163ea194f092ae466d Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 11 Mar 2026 12:12:18 +0800
Subject: [PATCH] feat: 退出登录
---
applications/drone-command/src/page/lock/index.vue | 197 ++++++++++++++++++++++++------------------------
1 files changed, 99 insertions(+), 98 deletions(-)
diff --git a/applications/drone-command/src/page/lock/index.vue b/applications/drone-command/src/page/lock/index.vue
index d797a84..ecd193f 100644
--- a/applications/drone-command/src/page/lock/index.vue
+++ b/applications/drone-command/src/page/lock/index.vue
@@ -1,109 +1,110 @@
<template>
- <div class="login-container" @keyup.enter="handleLogin">
- <div class="login-time">
- {{ time }}
- </div>
- <div class="login-weaper">
- <div class="login-left animate__animated animate__fadeInLeft">
- <img class="img" src="/img/logo.png" alt="" />
- <p class="title">{{ $t('login.info') }}</p>
- </div>
- <div class="login-border animate__animated animate__fadeInRight">
- <div class="login-main">
- <div class="lock-form animate__animated animate__bounceInDown">
- <div class="animate__animated" :class="{ shake: passwdError, animate__bounceOut: pass }">
- <h3 style="color: #333">{{ userInfo.username }}</h3>
- <el-input placeholder="请输入登录密码" type="password" class="input-with-select animated" v-model="passwd"
- @keyup.enter="handleLogin">
- <template #append>
- <i class="icon-bofangqi-suoping" @click="handleLogin"></i>
-
- <i class="icon-tuichu" @click="handleLogout"></i>
- </template>
- </el-input>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="login-container" @keyup.enter="handleLogin">
+ <div class="login-time">
+ {{ time }}
+ </div>
+ <div class="login-weaper">
+ <div class="login-left animate__animated animate__fadeInLeft">
+ <img class="img" src="/img/logo.png" alt="" />
+ <p class="title">{{ $t('login.info') }}</p>
+ </div>
+ <div class="login-border animate__animated animate__fadeInRight">
+ <div class="login-main">
+ <div class="lock-form animate__animated animate__bounceInDown">
+ <div class="animate__animated" :class="{ shake: passwdError, animate__bounceOut: pass }">
+ <h3 style="color: #333">{{ userInfo.username }}</h3>
+ <el-input
+ placeholder="请输入登录密码"
+ type="password"
+ class="input-with-select animated"
+ v-model="passwd"
+ @keyup.enter="handleLogin"
+ >
+ <template #append>
+ <i class="icon-bofangqi-suoping" @click="handleLogin"></i>
+
+ <i class="icon-tuichu" @click="handleLogout"></i>
+ </template>
+ </el-input>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { removeRefreshToken, removeToken } from '@/utils/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
+import { logOutFun } from '@/utils/util'
export default {
- name: 'lock',
- data () {
- return {
- time: '',
- timeTimer: null,
- passwd: '',
- passwdError: false,
- pass: false,
- }
- },
- created () {
- this.getTime()
- if (this.timeTimer) clearInterval(this.timeTimer)
- this.timeTimer = setInterval(() => {
- this.getTime()
- }, 1000)
- },
- beforeDestroy () {
- if (this.timeTimer) {
- clearInterval(this.timeTimer)
- this.timeTimer = null
- }
- },
- mounted () { },
- computed: {
- ...mapGetters(['userInfo', 'tag', 'lockPasswd']),
- },
- props: [],
- methods: {
- getTime () {
- this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss')
- },
- handleLogout () {
- ElMessageBox.confirm(`是否退出系统, 是否继续?`, '提示', {
- type: 'warning',
- customClass: 'command-page-view-message-box',
- confirmButtonClass: 'command-message-box-confirm',
- cancelButtonClass: 'command-message-box-cancel',
- }).then(() => {
- this.$store.dispatch('LogOut').then(() => {
- // 清除token信息
- removeToken()
- removeRefreshToken()
- this.$router.push({ path: '/login' })
- })
- })
- },
- handleLogin () {
- if (this.passwd !== this.lockPasswd) {
- this.passwd = ''
- this.$message({
- message: '解锁密码错误,请重新输入',
- type: 'error',
- })
- this.passwdError = true
- setTimeout(() => {
- this.passwdError = false
- }, 1000)
- return
- }
- this.pass = true
- setTimeout(() => {
- this.$store.commit('CLEAR_LOCK')
- this.$router.push({
- path: this.tag.path,
- })
- }, 1000)
- },
- },
- components: {},
+ name: 'lock',
+ data() {
+ return {
+ time: '',
+ timeTimer: null,
+ passwd: '',
+ passwdError: false,
+ pass: false,
+ }
+ },
+ created() {
+ this.getTime()
+ if (this.timeTimer) clearInterval(this.timeTimer)
+ this.timeTimer = setInterval(() => {
+ this.getTime()
+ }, 1000)
+ },
+ beforeDestroy() {
+ if (this.timeTimer) {
+ clearInterval(this.timeTimer)
+ this.timeTimer = null
+ }
+ },
+ mounted() {},
+ computed: {
+ ...mapGetters(['userInfo', 'tag', 'lockPasswd']),
+ },
+ props: [],
+ methods: {
+ getTime() {
+ this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss')
+ },
+ handleLogout() {
+ ElMessageBox.confirm(`是否退出系统, 是否继续?`, '提示', {
+ type: 'warning',
+ customClass: 'command-page-view-message-box',
+ confirmButtonClass: 'command-message-box-confirm',
+ cancelButtonClass: 'command-message-box-cancel',
+ }).then(() => {
+ logOutFun()
+ })
+ },
+ handleLogin() {
+ if (this.passwd !== this.lockPasswd) {
+ this.passwd = ''
+ this.$message({
+ message: '解锁密码错误,请重新输入',
+ type: 'error',
+ })
+ this.passwdError = true
+ setTimeout(() => {
+ this.passwdError = false
+ }, 1000)
+ return
+ }
+ this.pass = true
+ setTimeout(() => {
+ this.$store.commit('CLEAR_LOCK')
+ this.$router.push({
+ path: this.tag.path,
+ })
+ }, 1000)
+ },
+ },
+ components: {},
}
</script>
--
Gitblit v1.9.3