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>

src/App.vue

@@ -1,19 +1,22 @@
 <template>
   <div id="app" style="background-color:#0e2e87" v-if="$route.meta.bigScreen">
     <router-view />
+    <global-loading ref="globalLoading" />
   </div>
   <div id="app" v-else>
     <router-view :key="language"/>
     <theme-picker />
+    <global-loading ref="globalLoading" />
   </div>
 </template>
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
+import GlobalLoading from '@/components/GlobalLoading'
 
 export default {
   name: "App",
-  components: { ThemePicker },
+  components: { ThemePicker, GlobalLoading },
   metaInfo() {
     return {
       title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
@@ -26,9 +29,14 @@ export default {
     language(){
       return this.$store.state.settings.language
     }
+  },
+  mounted() {
+    // 将loading方法挂载到全局，方便在任何组件中调用
+    this.$root.$loading = this.$refs.globalLoading
   }
 };
 </script>
+
 <style scoped>
 #app .theme-picker {
   display: none;

src/api/login.js

@@ -186,3 +186,24 @@ export function changeLanguage(lang) {
         },
     });
 }
+export function logincas (data) {
+  return request({
+    url: '/logincas',
+    headers: {
+      isToken: false,
+    },
+    method: 'post',
+    data
+  })
+}
+
+export function outlogcas (data) {
+  return request({
+    url: '/outlogcas',
+    headers: {
+      isToken: false,
+    },
+    method: 'post',
+    data
+  })
+}

src/components/GlobalLoading/index.vue

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

src/layout/components/Navbar.vue

@@ -39,6 +39,7 @@ import TopNav from '@/components/TopNav';
 import Hamburger from '@/components/Hamburger';
 import SizeSelect from '@/components/SizeSelect';
 import langSelect from '@/layout/components/langSelect';
+import {outlogcas} from "@/api/login";
 
 export default {
     components: {
@@ -71,19 +72,44 @@ export default {
         toggleSideBar() {
             this.$store.dispatch('app/toggleSideBar');
         },
-        async logout() {
+      async logout() {
-            this.$confirm(this.$t('login.989807-31'), this.$t('login.989807-32'), {
+  try {
-                confirmButtonText: this.$t('confirm'),
+    await this.$confirm(this.$t('login.989807-31'), this.$t('login.989807-32'), {
-                cancelButtonText: this.$t('cancel'),
+      confirmButtonText: this.$t('confirm'),
-                type: 'warning',
+      cancelButtonText: this.$t('cancel'),
-            })
+      type: 'warning',
-                .then(() => {
+    });
-                    this.$store.dispatch('LogOut').then(() => {
+    
-                        location.href = '/index';
+    // 先调用 CAS 退出接口
-                    });
+    await this.outlogincasapi();
-                })
+    
-                .catch(() => {});
+    // 再执行 Store 退出
-        },
+    await this.$store.dispatch('LogOut');
+    
+    // 清理本地存储
+    sessionStorage.clear();
+    localStorage.clear();
+     localStorage.setItem('is_logging_out', 'true');
+    // 跳转
+    // location.href = '/index';
+     // window.location.href = 'http://192.168.1.241/login?redirect=/lig/oauth2/oauth2/application&appid=330b4ecb60c9a6802b957fe1e5a5ecd3&url=http%3A%2F%2F192.168.1.241%3A9000%2Flogin'+(this.redirect?'&ssUrl='+this.redirect:'');
+     window.location.href = 'http://localhost:81/login?redirect=/lig/oauth2/oauth2/application&appid=330b4ecb60c9a6802b957fe1e5a5ecd3&url=http%3A%2F%2Flocalhost%3A80%2Flogin'+(this.redirect?'&ssUrl='+this.redirect:'');
+             
+    
+  } catch (error) {
+    // 用户取消或出错时的处理
+    console.log('退出取消或失败', error);
+  }
+},
+  async outlogincasapi() {
+      const obj = {
+        loginName: "admin",
+        password: "demo",
+        verifyCode: "",
+      };
+      const { code, data } = await outlogcas(obj);
+    },
+
     },
 };
 </script>

src/main.js

@@ -47,6 +47,7 @@ import 'video.js/dist/video-js.css';
 import BaiduMap from 'vue-baidu-map'; // 百度地图
 
 import Contextmenu from 'vue-contextmenujs';
+import GlobalLoading from '@/components/GlobalLoading';
 Vue.use(Contextmenu);
 
 import ItemWrap from './views/bigScreen/components/item-wrap/item-wrap.vue';
@@ -98,6 +99,7 @@ Vue.component('ImageUpload', ImageUpload);
 Vue.component('ImagePreview', ImagePreview);
 Vue.component('DictTag', DictTag);
 Vue.component('MonacoEditor', MonacoEditor);
+Vue.component('GlobalLoading', GlobalLoading);
 Vue.use(plugins);
 Vue.use(directive);
 Vue.use(VueMeta);

src/utils/auth.js

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
 const UserId = 'userId'
-
+const AccessUserKey = 'AJReportUser'
 export function getToken() {
   return Cookies.get(TokenKey)
 }
@@ -26,3 +26,16 @@ export function setUserId(userId) {
 export function removeUserId() {
   return Cookies.remove(UserId)
 }
+
+
+export function setAccessUser(accessUser) {
+   if(typeof(accessUser) == "undefined" || accessUser== null){
+    return;
+  }
+
+  let val = accessUser;
+  if(typeof(accessUser) == "object"){
+    val = JSON.stringify(accessUser);
+  }
+  return localStorage.setItem(AccessUserKey, val)
+}