352 lines
7.6 KiB
Vue
352 lines
7.6 KiB
Vue
<template>
|
|
<div class="shell" :class="{ 'shell-collapsed': isSidebarCollapsed }">
|
|
<aside class="shell-sidebar">
|
|
<div class="brand-block">
|
|
<div class="brand-mark"></div>
|
|
<div v-if="!isSidebarCollapsed">
|
|
<div class="brand-title">企业缺勤分析台</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-panel">
|
|
<div v-if="!isSidebarCollapsed" class="sidebar-label">导航</div>
|
|
<el-menu :default-active="activeMenu" router class="nav-menu">
|
|
<el-menu-item index="/dashboard">
|
|
<el-icon class="nav-icon"><Grid /></el-icon>
|
|
<span class="nav-label">数据概览</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/analysis">
|
|
<el-icon class="nav-icon"><DataAnalysis /></el-icon>
|
|
<span class="nav-label">影响因素</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/prediction">
|
|
<el-icon class="nav-icon"><TrendCharts /></el-icon>
|
|
<span class="nav-label">缺勤预测</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/clustering">
|
|
<el-icon class="nav-icon"><UserFilled /></el-icon>
|
|
<span class="nav-label">员工画像</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/jdr-analysis">
|
|
<el-icon class="nav-icon"><Reading /></el-icon>
|
|
<span class="nav-label">理论分析</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<div v-if="!isSidebarCollapsed" class="sidebar-note">
|
|
<div class="sidebar-label">系统摘要</div>
|
|
<p>缺勤趋势、风险预测与群体画像。</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="shell-main">
|
|
<header class="topbar">
|
|
<div class="topbar-main">
|
|
<el-button class="collapse-btn" circle @click="isSidebarCollapsed = !isSidebarCollapsed">
|
|
{{ isSidebarCollapsed ? '>' : '<' }}
|
|
</el-button>
|
|
<div>
|
|
<div class="topbar-title">{{ currentMeta.title || '企业缺勤分析台' }}</div>
|
|
<div class="topbar-subtitle">{{ currentMeta.subtitle }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-badges">
|
|
<el-button class="theme-toggle" @click="toggleTheme">
|
|
{{ isDarkMode ? '浅色模式' : '深色模式' }}
|
|
</el-button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="main-content">
|
|
<router-view />
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { DataAnalysis, Grid, TrendCharts, UserFilled, Reading } from '@element-plus/icons-vue'
|
|
|
|
const route = useRoute()
|
|
const activeMenu = computed(() => route.path)
|
|
const isSidebarCollapsed = ref(false)
|
|
const isDarkMode = ref(false)
|
|
|
|
const metaMap = {
|
|
'/dashboard': {
|
|
title: '数据概览',
|
|
subtitle: '缺勤事件总量、趋势与结构分布'
|
|
},
|
|
'/analysis': {
|
|
title: '影响因素',
|
|
subtitle: '关键驱动因素与群体差异'
|
|
},
|
|
'/prediction': {
|
|
title: '缺勤预测',
|
|
subtitle: '缺勤时长、风险等级与模型对比'
|
|
},
|
|
'/clustering': {
|
|
title: '员工画像',
|
|
subtitle: '典型群体划分与画像分析'
|
|
},
|
|
'/jdr-analysis': {
|
|
title: '理论分析',
|
|
subtitle: '工作要求、资源支持与缺勤风险'
|
|
}
|
|
}
|
|
|
|
const currentMeta = computed(() => metaMap[route.path] || { title: '企业缺勤分析台', subtitle: '' })
|
|
|
|
function applyTheme(isDark) {
|
|
const theme = isDark ? 'dark' : 'light'
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
localStorage.setItem('ui-theme', theme)
|
|
}
|
|
|
|
function toggleTheme() {
|
|
isDarkMode.value = !isDarkMode.value
|
|
}
|
|
|
|
onMounted(() => {
|
|
const savedTheme = localStorage.getItem('ui-theme')
|
|
isDarkMode.value = savedTheme === 'dark'
|
|
applyTheme(isDarkMode.value)
|
|
})
|
|
|
|
watch(isDarkMode, value => {
|
|
applyTheme(value)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
transition: grid-template-columns 0.28s ease;
|
|
}
|
|
|
|
.shell.shell-collapsed {
|
|
grid-template-columns: 96px minmax(0, 1fr);
|
|
}
|
|
|
|
.shell-sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
height: 100vh;
|
|
padding: 26px 22px;
|
|
background: var(--sidebar-bg);
|
|
color: var(--sidebar-text);
|
|
transition: padding 0.28s ease;
|
|
border-right: 1px solid var(--sidebar-border);
|
|
}
|
|
|
|
.brand-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #fef3c7, #fdba74);
|
|
color: #7c2d12;
|
|
position: relative;
|
|
}
|
|
|
|
.brand-mark::before,
|
|
.brand-mark::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
background: rgba(124, 45, 18, 0.9);
|
|
}
|
|
|
|
.brand-mark::before {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.brand-mark::after {
|
|
width: 8px;
|
|
height: 8px;
|
|
right: 11px;
|
|
bottom: 11px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--sidebar-text);
|
|
}
|
|
|
|
.sidebar-panel,
|
|
.sidebar-note {
|
|
padding: 18px;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 22px;
|
|
background: var(--sidebar-surface);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.sidebar-label {
|
|
margin-bottom: 14px;
|
|
font-size: 12px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--sidebar-text-subtle);
|
|
}
|
|
|
|
.nav-menu {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.nav-menu .el-menu-item) {
|
|
height: 48px;
|
|
margin-bottom: 8px;
|
|
border-radius: 14px;
|
|
color: var(--sidebar-text);
|
|
background: transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
margin-right: 10px;
|
|
font-size: 17px;
|
|
color: var(--sidebar-text-subtle);
|
|
}
|
|
|
|
.nav-label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(.nav-menu .el-menu-item.is-active) {
|
|
color: var(--sidebar-text);
|
|
background: var(--sidebar-menu-active);
|
|
}
|
|
|
|
:deep(.nav-menu .el-menu-item:hover) {
|
|
color: var(--sidebar-text);
|
|
background: var(--sidebar-menu-hover);
|
|
}
|
|
|
|
.sidebar-note p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: var(--sidebar-text-subtle);
|
|
}
|
|
|
|
.shell-main {
|
|
min-width: 0;
|
|
padding: 24px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.topbar-main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
}
|
|
|
|
.collapse-btn {
|
|
margin-top: 4px;
|
|
border: 1px solid var(--line-soft);
|
|
background: rgba(255, 255, 255, 0.82);
|
|
color: var(--brand-strong);
|
|
}
|
|
|
|
.topbar-title {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.topbar-subtitle {
|
|
margin-top: 8px;
|
|
max-width: 760px;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
.topbar-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
border: 1px solid var(--line-soft);
|
|
background: var(--surface);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.main-content {
|
|
min-width: 0;
|
|
}
|
|
|
|
.shell-collapsed .shell-sidebar {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.shell-collapsed .brand-block {
|
|
justify-content: center;
|
|
}
|
|
|
|
.shell-collapsed .sidebar-panel {
|
|
padding: 14px 10px;
|
|
}
|
|
|
|
.shell-collapsed :deep(.nav-menu .el-menu-item) {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.shell-collapsed .nav-icon {
|
|
margin-right: 0;
|
|
width: 20px;
|
|
}
|
|
|
|
.shell-collapsed .nav-label {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.shell-sidebar {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|