159 lines
2.7 KiB
Vue
159 lines
2.7 KiB
Vue
<script setup>
|
||
import zhCN from "ant-design-vue/es/locale/zh_CN";
|
||
import { useUserStore } from "@/store/user";
|
||
import { ref } from "vue";
|
||
|
||
const locale = zhCN;
|
||
const userStore = useUserStore();
|
||
const isInitialized = ref(false);
|
||
|
||
userStore.init().then(() => {
|
||
isInitialized.value = true;
|
||
userStore.initTokenExpirationListener();
|
||
if (userStore.isLoggedIn) {
|
||
userStore.getUserProfile();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<a-spin :spinning="!isInitialized">
|
||
<a-config-provider :locale="locale" v-if="isInitialized">
|
||
<router-view></router-view>
|
||
</a-config-provider>
|
||
<div v-else class="loading-container"></div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<style>
|
||
/* 全局样式和响应式基础设置 */
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||
Arial, "Noto Sans", sans-serif;
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
/* 设置根元素字体大小，便于使用rem单位 */
|
||
html {
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 移动端适配 - 根据屏幕宽度调整基础字体大小 */
|
||
@media screen and (max-width: 768px) {
|
||
html {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 576px) {
|
||
html {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
#app {
|
||
width: 100%;
|
||
height: 100%;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
/* 禁止移动端在页面边界和弹窗容器上的上下回弹 */
|
||
.layout,
|
||
.layout-content,
|
||
.content,
|
||
.ant-modal-wrap,
|
||
.ant-modal-content,
|
||
.ant-modal-body,
|
||
.ant-drawer-content-wrapper,
|
||
.ant-drawer-content,
|
||
.ant-drawer-body {
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
/* 让所有滚动条美观 */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 12px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
/* 特定区域隐藏滚动条 */
|
||
.hide-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* 响应式工具类 */
|
||
.hidden-xs {
|
||
display: block;
|
||
}
|
||
|
||
.visible-xs {
|
||
display: none;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.hidden-xs {
|
||
display: none !important;
|
||
}
|
||
|
||
.visible-xs {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
/* Ant Design 表格响应式调整 */
|
||
@media screen and (max-width: 768px) {
|
||
.ant-table {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.ant-table-thead > tr > th,
|
||
.ant-table-tbody > tr > td {
|
||
white-space: nowrap;
|
||
padding: 8px;
|
||
}
|
||
|
||
/* 表单在移动端的调整 */
|
||
.ant-form-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.ant-form-item-label {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.loading-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #999;
|
||
}
|
||
</style>
|