v6ole
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<el-container style="height: 100vh">
|
|
<el-aside width="220px" style="background: #1d1e1f; color: #fff">
|
|
<div class="sidebar-header">
|
|
<h2 style="margin: 0; padding: 20px; font-size: 20px">🐝 LogHive</h2>
|
|
</div>
|
|
<el-menu
|
|
:default-active="route.path"
|
|
router
|
|
background-color="#1d1e1f"
|
|
text-color="#bfcbd9"
|
|
active-text-color="#409eff"
|
|
>
|
|
<el-menu-item index="/">
|
|
<el-icon><DataAnalysis /></el-icon>
|
|
<span>仪表盘</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/logs">
|
|
<el-icon><Search /></el-icon>
|
|
<span>日志检索</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/projects">
|
|
<el-icon><Setting /></el-icon>
|
|
<span>项目管理</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="/alerts">
|
|
<el-icon><WarningFilled /></el-icon>
|
|
<span>告警中心</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
<el-container>
|
|
<el-header style="background: #fff; border-bottom: 1px solid #e4e7ed; display: flex; align-items: center; justify-content: space-between; padding: 0 20px">
|
|
<el-breadcrumb>
|
|
<el-breadcrumb-item :to="{ path: '/' }">LogHive</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-if="route.path === '/logs'">日志检索</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-if="route.path === '/projects'">项目管理</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-if="route.path === '/alerts'">告警中心</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div style="font-size: 14px; color: #909399">
|
|
LogHive v0.1.0
|
|
</div>
|
|
</el-header>
|
|
|
|
<el-main style="background: #f5f7fa">
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
.el-menu {
|
|
border-right: none !important;
|
|
}
|
|
.sidebar-header {
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
</style>
|