<script setup lang="ts">
import { ConfigProvider } from 'ant-design-vue'
import PageLoading from "@/components/page-loading/index.vue";
import { useUserStore } from "@/service/user-store.ts";
import Login from "@/components/login/index.vue";

// 登录相关
const store = useUserStore()

const themeConfig = {
    token: { colorPrimary: '#2EC7A5', },
}
</script>

<template>
    <div class="app-container">
        <PageLoading :class="{ hideLoading: store.userInit }" />
        <Login v-if="store.userInit && (!store.userInfo || store.userInfo.id < 1)" />
        <template v-if="store.userInit">
            <ConfigProvider :theme="themeConfig">
                <router-view />
            </ConfigProvider>
        </template>
    </div>
</template>

<style scoped lang="scss">
.hideLoading {
    background: rgba(255, 255, 255, 0);
    pointer-events: none;
    opacity: 0;
}

.app-header {
    display: flex;
    align-items: center;
    border-bottom: solid 1px #dcdee2;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    padding: 0 50px;
    justify-content: space-between;
}

.app-menu {
    .ivu-menu {
        &:after {
            display: none;
        }
    }
}

.app-content {
    padding: 20px 50px;
}


body {
    background: #fff;
    color: #000;
}

.logo {
    height: 34px;
    will-change: filter;
    transition: filter 300ms;
}
</style>
