完善生产查询与登录权限配置
This commit is contained in:
@@ -5,9 +5,17 @@
|
||||
</el-header>
|
||||
<el-scrollbar :style="calcHeight(60)" class="main-scrollbar" ref="mainScrollbarRef">
|
||||
<div class="layout-main">
|
||||
<div class="layout-content">
|
||||
<div v-if="memberStore.token || !configStore.siteSetting.require_login" class="layout-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-else class="auth-required">
|
||||
<div class="auth-required-card">
|
||||
<Icon icon="ant-design:lock-outlined" size="34" color="var(--el-color-primary)" />
|
||||
<h2>请先登录</h2>
|
||||
<p>登录后才能访问 Web 端页面和生产运营数据。</p>
|
||||
<el-button type="primary" @click="memberStore.logOpen">立即登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<layout-footer />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@@ -19,10 +27,13 @@ import { useTemplateRef, watch, provide, onMounted } from 'vue';
|
||||
import layoutHeader from "./components/header.vue";
|
||||
import layoutFooter from "./components/footer.vue";
|
||||
import { useMemberStore } from '@/stores/member';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { Icon } from '~/components/icon';
|
||||
|
||||
const route = useRoute();
|
||||
const mainScrollbarRef = useTemplateRef('mainScrollbarRef');
|
||||
const memberStore = useMemberStore();
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// 计算滚动区域高度
|
||||
const calcHeight = (headerHeight: number) => {
|
||||
@@ -162,6 +173,41 @@ provide('mainScrollbarRef', mainScrollbarRef);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.auth-required {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--content-min-height, 500px);
|
||||
padding: 32px 20px;
|
||||
background: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.auth-required-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: min(420px, 100%);
|
||||
padding: 42px 28px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 16px;
|
||||
background: var(--el-bg-color);
|
||||
box-shadow: 0 8px 28px rgb(31 56 88 / 8%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-required-card h2 {
|
||||
margin: 18px 0 8px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.auth-required-card p {
|
||||
margin: 0 0 24px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 页面特定样式 */
|
||||
.page-index {
|
||||
.layout-content {
|
||||
@@ -248,4 +294,4 @@ provide('mainScrollbarRef', mainScrollbarRef);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user