初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库
This commit is contained in:
zuqijia
276
src/layout/components/Sidebar/index.vue
Normal file
276
src/layout/components/Sidebar/index.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div :class="['sidebar-container', { 'is-collapse': !sidebar.opened }]">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo-wrapper">
|
||||
<span class="logo-icon">📊</span>
|
||||
<span v-show="sidebar.opened" class="logo-text">数据管理平台</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar class="sidebar-scroll">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="!sidebar.opened"
|
||||
mode="vertical"
|
||||
class="sidebar-menu"
|
||||
router
|
||||
unique-opened
|
||||
>
|
||||
<template v-for="item in menuItems" :key="item.path">
|
||||
<el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
|
||||
<el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
|
||||
<span>{{ item.meta?.title }}</span>
|
||||
</el-menu-item>
|
||||
<el-sub-menu v-else :index="item.path">
|
||||
<template #title>
|
||||
<el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
|
||||
<span>{{ item.meta?.title }}</span>
|
||||
</template>
|
||||
<template v-for="child in item.children" :key="child.path">
|
||||
<el-menu-item v-if="!child.children || child.children.length === 0" :index="child.path">
|
||||
<el-icon :size="12"><component :is="getIcon(child.meta?.icon)" /></el-icon>
|
||||
<span>{{ child.meta?.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { Refresh, FullScreen, User, Search } from '@element-plus/icons-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
|
||||
const sidebar = computed(() => store.state.app.sidebar)
|
||||
const activeMenu = computed(() => route.path)
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
path: '/index',
|
||||
meta: { title: '工作台', icon: 'home' }
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
meta: { title: '数据大屏', icon: 'monitor' },
|
||||
children: [
|
||||
{ path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'chart' } },
|
||||
{ path: '/dashboard/order', meta: { title: '订单大屏', icon: 'chart' } },
|
||||
{ path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'chart' } },
|
||||
{ path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'monitor' } }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/screens',
|
||||
meta: { title: '大屏管理', icon: 'layout' },
|
||||
children: [
|
||||
{ path: '/screens', meta: { title: '大屏列表', icon: 'list' } },
|
||||
{ path: '/screens/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'chart' } }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/reports',
|
||||
meta: { title: '报表管理', icon: 'document' },
|
||||
children: [
|
||||
{ path: '/reports', meta: { title: '报表列表', icon: 'list' } },
|
||||
{ path: '/reports/acid-rolling', meta: { title: '酸轧产出报表', icon: 'chart' } },
|
||||
{ path: '/reports/acid-stop', meta: { title: '酸轧停机报表', icon: 'settings' } }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
meta: { title: '系统管理', icon: 'settings' },
|
||||
children: [
|
||||
{ path: '/system/user', meta: { title: '用户管理', icon: 'user' } },
|
||||
{ path: '/system/role', meta: { title: '角色管理', icon: 'user' } },
|
||||
{ path: '/system/menu', meta: { title: '菜单管理', icon: 'user' } },
|
||||
{ path: '/system/config', meta: { title: '系统配置', icon: 'settings' } }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/data-source',
|
||||
meta: { title: '数据源配置', icon: 'database' }
|
||||
}
|
||||
]
|
||||
|
||||
const iconMap = {
|
||||
'home': Refresh,
|
||||
'monitor': FullScreen,
|
||||
'chart': Refresh,
|
||||
'document': Search,
|
||||
'settings': Refresh,
|
||||
'database': FullScreen,
|
||||
'user': User,
|
||||
'lock': User,
|
||||
'menu': Refresh,
|
||||
'layout': FullScreen,
|
||||
'list': Search
|
||||
}
|
||||
|
||||
const getIcon = (iconName) => {
|
||||
if (!iconName) return Refresh
|
||||
return iconMap[iconName] || Refresh
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-container {
|
||||
width: 200px;
|
||||
background: #333333;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.28s ease;
|
||||
border-right: 1px solid #444444;
|
||||
|
||||
&.is-collapse {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background: #2d2d2d;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #444444;
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.logo-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border: none;
|
||||
background: transparent;
|
||||
height: 100%;
|
||||
padding: 4px 0;
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
color: #999999;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 6px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: #444444 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #4a90d9 !important;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-left: 3px solid #5F7BA0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
color: #999999;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 6px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: #444444 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #4a90d9 !important;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-left: 3px solid #5F7BA0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu .el-menu-item) {
|
||||
padding-left: 40px !important;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
|
||||
&:hover {
|
||||
background: #3a3a3a !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #3d5a7a !important;
|
||||
border-left: 3px solid #5F7BA0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-menu--popup) {
|
||||
background: #3a3a3a !important;
|
||||
border: 1px solid #444444;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
|
||||
.el-menu-item {
|
||||
color: #999999;
|
||||
padding: 0 20px;
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-left: none;
|
||||
|
||||
&:hover {
|
||||
background: #444444 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #4a90d9 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user