feat(app): 添加全局加载组件和CAS单点登录功能
- 在App.vue中引入GlobalLoading组件并挂载到全局 - 新增src/components/GlobalLoading/index.vue组件文件 - 在auth.js中添加AccessUserKey常量和相关存储方法 - 在login.js中添加logincas和outlogcas接口函数 - 在main.js中注册GlobalLoading全局组件 - 修改Navbar.vue实现CAS登出逻辑和跳转处理 - 增加sessionStorage和localStorage清理机制 Signed-off-by: NewName <1048783178@qq.com>
This commit is contained in:
83
src/components/GlobalLoading/index.vue
Normal file
83
src/components/GlobalLoading/index.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div v-if="visible" class="global-loading">
|
||||
<div class="loading-mask">
|
||||
<div class="loading-content">
|
||||
<div class="loading-spinner"></div>
|
||||
<p class="loading-text">{{ text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GlobalLoading',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
text: '加载中...'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(text = '加载中...') {
|
||||
this.text = text
|
||||
this.visible = true
|
||||
},
|
||||
hide() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.global-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: white;
|
||||
padding: 20px 30px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto 10px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #0f73ee;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user