feat: 主题优化

src/App.vue

 <template>
     <a-config-provider :locale="localeVal">
-        <a-spin :loading="loading" :tip="loadText" class="w-full h-full">
+        <a-spin :loading="showLoading" :tip="loadText" class="w-full h-full">
             <router-view />
         </a-spin>
         <global-setting />
@@ -12,15 +12,15 @@ import enUS from '@arco-design/web-vue/es/locale/lang/en-us'
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn'
 import GlobalSetting from '@/components/global-setting/index.vue'
 import useLocale from '@/hooks/locale'
-import useAppStore from '@/store/app/index'
+import useAppStore from '@/store/app/'
 import { activedTheme } from '../project.ui.config'
 import config from '../project.app.config'
 import useUserStore from '@/store/user'
 import { wsShouldOpen } from 'AnyR/states/coreState'
 import { storeToRefs } from 'pinia'
-import {userStates} from "AnyR/states/wsStates";
+import { userStates } from 'AnyR/states/wsStates'
 
-const { loading, loadText } = storeToRefs(useAppStore())
+const { showLoading, loadText } = storeToRefs(useAppStore())
 
 const { changeTheme } = useAppStore()
 // 国际化
@@ -35,20 +35,18 @@ const localeVal = computed(() => {
             return zhCN
     }
 })
-
+//切换主题色
 const userStore = useUserStore()
-onMounted(() => {
+onBeforeMount(() => {
     if (userStore.token) {
         changeTheme(activedTheme.value)
     }
 })
-
 watch(activedTheme, (newVal) => {
     changeTheme(newVal)
 })
 
 const router = useRouter()
-
 // @ts-ignore
 //全局前置守卫
 router.beforeEach(async (to, from, next) => {

src/api/alova-instance.ts

@@ -7,6 +7,7 @@ import { createAlovaMockAdapter } from '@alova/mock'
 import mock from './mock'
 import useUserStore from '@/store/user'
 import { Message } from '@arco-design/web-vue'
+import useAppStore from '@/store/app/'
 
 // 创建模拟请求适配器
 const mockAdapter = createAlovaMockAdapter([mock], {
@@ -27,6 +28,15 @@ export const alova = createAlova({
 
     // 请求拦截器
     beforeRequest(method) {
+        //开启加载动画
+        const appStore = useAppStore()
+        const loading = method.meta?.loading
+        if (loading || loading === '') {
+            if (typeof loading === 'string' && loading !== '') {
+                appStore.loadText = loading
+            }
+            appStore.count++
+        }
         // 设置请求头application/json;charset=UTF-8
         method.config.headers = {
             'Content-Type': 'application/x-www-form-urlencoded'
@@ -52,17 +62,14 @@ export const alova = createAlova({
             }
             const json = await response.json()
             if ([402].includes(json.code)) {
+                //接口异常
                 Message.error(json.message)
                 const userStore = useUserStore()
                 userStore.handleLogOut()
                 return Promise.reject(new Error(json.message))
             } else {
-                if (json.code === 200) {
-                    return json['data']
-                } else {
                 return json
             }
-            }
         },
         // 请求错误时将会进入该拦截器
         onError(error) {
@@ -73,6 +80,13 @@ export const alova = createAlova({
         onComplete: async () => {
             // 处理响应完成后的逻辑
             // console.log("执行完成");
+            //关闭加载动画
+            const appStore = useAppStore()
+            appStore.count--
+            if (appStore.count <= 0) {
+                appStore.count = 0
+                appStore.loadText = '加载中...'
+            }
         }
     }
 })

src/components/global-model/index.vue

 <template>
-    <a-modal v-bind="$attrs">
+    <a-modal v-bind="$attrs" :unmount-on-close="true">
         <template #title>
             <slot name="title"></slot>
         </template>

src/constants/common/user.ts

+export const videoGroup = {
+    0: '专家',
+    1: '维修人'
+}

src/store/app/index.ts

@@ -7,12 +7,21 @@ const useAppStore = defineStore('app', {
     state: (): AppState => {
         return {
             theme: 'light',
-            loading: false,
+            count: 0,
             loadText: '加载中...'
         }
     },
 
-    getters: {},
+    getters: {
+        //是否展示全屏加载
+        showLoading(state) {
+            if (state.count > 0) {
+                return true
+            } else {
+                return false
+            }
+        }
+    },
 
     actions: {
         changeTheme(themeName: string) {

src/store/app/types.ts

 export interface AppState {
     theme: string
-    loading: boolean
+    count: number
     loadText: string
 }

src/store/user/index.ts

 import { defineStore } from 'pinia'
 import type { UserState, UserInfo } from './types'
 import useAppStore from '@/store/app/index'
-import { activedTheme } from '../../../project.ui.config'
 import { wsShouldOpen } from 'AnyR/states/coreState.js'
 
 const useContactsStore = defineStore('user', {
@@ -31,9 +30,6 @@ const useContactsStore = defineStore('user', {
             this.router.push('/').then(function () {
                 wsShouldOpen.value = true
             })
-            //初始化主题色
-            const { changeTheme } = useAppStore()
-            changeTheme(activedTheme.value)
         },
         //退出登录
         handleLogOut() {
@@ -49,8 +45,6 @@ const useContactsStore = defineStore('user', {
                 autoRecord: false
             }
             wsShouldOpen.value = false
-            const { changeTheme } = useAppStore()
-            changeTheme('light')
             this.router.replace('/login')
         }
     },

src/store/user/types.ts

@@ -5,7 +5,7 @@ export interface UserInfo {
     status: number
     token: string
     tokenHead: string
-    videoGroup: number
+    videoGroup: 0 | 1
     autoRecord: boolean
 }
 

src/views/layout/gHeader.vue

@@ -18,7 +18,7 @@
                     <global-avatar :avatar-size="32" :icon-size="16"></global-avatar>
                     <div class="mx-2">
                         <p class="mb-1 inline-block text-theme-text1">{{ userStore.user_info.username }}</p>
-                        <p class="text-theme-text3">{{ userStore.user_info.videoGroup == 0 ? '专家' : '维修人' }}</p>
+                        <p class="text-theme-text3">{{ videoGroup[userStore.user_info.videoGroup] }}</p>
                     </div>
                     <global-icon :icon="idDown ? 'up-circle' : 'down-circle'" :size="14"></global-icon>
                 </div>
@@ -35,6 +35,7 @@ import logo from '@/assets/images/header/logo.png'
 import useLocale from '@/hooks/locale'
 import { activedTheme } from '../../../project.ui.config'
 import useUserStore from '@/store/user'
+import { videoGroup } from '@/constants/common/user'
 
 const { changeLocale } = useLocale()
 //切换语言

src/views/layout/index.vue

@@ -24,6 +24,8 @@ import GAside from './gAside.vue'
 import ContactsWait from '@/views/remote/contacts/contactsWait.vue'
 import { storeToRefs } from 'pinia'
 import useContactsStore from '@/store/contacts/'
+import useAppStore from '@/store/app'
+import { activedTheme } from '../../../project.ui.config'
 
 //显示通话等待
 const contactsStore = useContactsStore()
@@ -33,5 +35,14 @@ const route = useRoute()
 const getShowMenu = computed(() => {
     return !route.meta?.hideInMenu
 })
+//初始化主题色
+const { changeTheme } = useAppStore()
+onBeforeMount(() => {
+    changeTheme(activedTheme.value)
+})
+//退出登录
+onBeforeUnmount(() => {
+    changeTheme('light')
+})
 </script>
 <style lang="less" scoped></style>

src/views/login/index.vue

 <template>
-    <a-spin class="w-full h-full flex justify-center items-center bg-primary" :loading="loading" tip="登录中...">
+    <div class="w-full h-full flex justify-center items-center bg-primary">
         <div class="w-[400px] py-4 px-8 bg-white shadow-xl rounded-3xl" @keyup.enter="handleLogin">
             <div class="flex justify-center my-8"><a-image :src="logo" :preview="false" fit="fill" /></div>
             <h3 class="font-bold text-xl">登录</h3>
@@ -21,7 +21,7 @@
                 </a-form-item>
             </a-form>
         </div>
-    </a-spin>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -54,9 +54,17 @@ const {
     loading,
     send: sendLogin,
     onSuccess: loginSuccess
-} = useRequest(() => alova.Post<any>('/admin/login', loginForm), {
+} = useRequest(
+    () =>
+        alova.Post<any>('/admin/login', loginForm, {
+            meta: {
+                loading: '登陆中...'
+            }
+        }),
+    {
         immediate: false
-})
+    }
+)
 const handleLogin = async () => {
     loginFormRef.value?.validate(async (errors: Record<string, ValidatedError>) => {
         if (!errors && !loading.value) {
@@ -64,17 +72,16 @@ const handleLogin = async () => {
         }
     })
 }
-loginSuccess((respond) => {
-    const res = respond.data
-    if (res.code == 500) {
-        Notification.error({
-            content: res.message
-        })
-    } else {
-        userStore.setUserInfo(res)
+loginSuccess(({ data: res }) => {
+    if (res.code == 200) {
+        userStore.setUserInfo(res.data)
         Notification.success({
             content: '登录成功'
         })
+    } else {
+        Notification.error({
+            content: res.message
+        })
     }
 })
 //获取验证码

src/views/remote/contacts/contactsInfo.vue

@@ -36,6 +36,7 @@ import { alova } from '@/api/alova-instance'
 import type { UserItemDto } from '@/store/contacts/types'
 import useContactsStore from '@/store/contacts/index'
 import { useRequest } from 'alova'
+import { videoGroup } from '@/constants/common/user'
 
 interface Props {
     showGroup?: boolean
@@ -47,21 +48,22 @@ const ps = withDefaults(defineProps<Props>(), {
 const getShowGroup = computed(() => {
     return ps.showGroup ? 'block' : 'none'
 })
-//联系人列表
-const videoGroup: { [key in UserItemDto['videoGroup']]: string } = {
-    0: '专家',
-    1: '维修人'
-}
 const {
     loading,
     data: userList,
     onSuccess
 } = useRequest(
     () =>
-        alova.Post<UserItemDto[]>('/admin/getUserListVideo', {
+        alova.Post(
+            '/admin/getUserListVideo',
+            {
                 pageIndex: 1,
                 pageSize: 99999
-        }),
+            },
+            {
+                transformData: (res: any) => res.data as UserItemDto[]
+            }
+        ),
     {
         immediate: true
     }

src/views/remote/contacts/multiCallModel.vue

@@ -20,6 +20,7 @@ import useContactsStore from '@/store/contacts/index'
 import { UserItemDto } from '@/store/contacts/types'
 import contactsListChoose from './contactsListChoose.vue'
 import { cloneDeep } from 'lodash'
+import { videoGroup } from '@/constants/common/user'
 
 //选中的联系人数组id
 const chooseUsers = ref([])
@@ -28,11 +29,6 @@ const open = () => {
     showModel.value = true
     chooseUsers.value = []
 }
-//联系人列表
-const videoGroup: { [key in UserItemDto['videoGroup']]: string } = {
-    0: '专家',
-    1: '维修人'
-}
 //当前联系人
 const { userList } = storeToRefs(useContactsStore())
 //获取联系人分组