feat(frontend): 添加页面布局组件
布局组件： - layouts/DefaultLayout.vue，默认布局组合 Layout 组件： - components/Layout/AppHeader.vue，顶部导航栏（品牌、环境标签、搜索、用户信息） - components/Layout/AppSidebar.vue，侧边菜单栏（导航菜单项） - components/Layout/AppMain.vue，主内容区容器 布局结构：顶栏 + 侧边栏 + 内容区（CSS Grid）
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<div class="mark">xi</div>
|
||||
xinfra <span class="sub">统一基础设施平台</span>
|
||||
</div>
|
||||
<span class="env-pill">● 生产环境</span>
|
||||
<div class="spacer"></div>
|
||||
<div class="search-box">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索集群 / 节点 / 服务实例
|
||||
<kbd>⌘K</kbd>
|
||||
</div>
|
||||
<div class="identity">
|
||||
<div class="avatar">{{ userInitial }}</div>
|
||||
<div>
|
||||
<div>{{ user?.display_name || '未登录' }}</div>
|
||||
<div class="ldap-tag">LDAP · {{ user?.business_line || '' }}业务线</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const user = computed(() => authStore.user)
|
||||
const userInitial = computed(() => {
|
||||
return user.value?.display_name?.charAt(0) || 'U'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
grid-column: 1/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18px 0 16px;
|
||||
background: var(--bg-panel);
|
||||
border-bottom: 1px solid var(--line);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.brand .mark {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(135deg, var(--accent), #1C8F69);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #08140F;
|
||||
}
|
||||
|
||||
.brand .sub {
|
||||
color: var(--text-dim);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.env-pill {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent-dim);
|
||||
background: #0F261D;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: var(--bg-panel-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12.5px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.search-box kbd {
|
||||
margin-left: auto;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
background: #262C38;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
.identity .avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #2A3142;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-hi);
|
||||
}
|
||||
|
||||
.identity .ldap-tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<main class="main">
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main {
|
||||
overflow-y: auto;
|
||||
padding: 22px 26px 60px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">概览</div>
|
||||
<router-link to="/dashboard" class="nav-item" active-class="active">
|
||||
<span class="ic">▣</span>资源大盘
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">机房 & 网络</div>
|
||||
<router-link to="/resource/status" class="nav-item" active-class="active">
|
||||
<span class="ic">⬡</span>资源状态看板
|
||||
</router-link>
|
||||
<router-link to="/cluster" class="nav-item" active-class="active">
|
||||
<span class="ic">◆</span>集群 / 节点<span class="badge">7</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">资源管理</div>
|
||||
<router-link to="/resource/mgmt" class="nav-item" active-class="active">
|
||||
<span class="ic">▥</span>资源管理<span class="badge">CMDB</span>
|
||||
</router-link>
|
||||
<router-link to="/service/mgmt" class="nav-item" active-class="active">
|
||||
<span class="ic">◈</span>服务管理<span class="badge">Consul</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">服务交付</div>
|
||||
<router-link to="/service/catalog" class="nav-item" active-class="active">
|
||||
<span class="ic">▤</span>基础服务目录
|
||||
</router-link>
|
||||
<router-link to="/tasks" class="nav-item" active-class="active">
|
||||
<span class="ic">▧</span>任务中心<span class="badge">2</span>
|
||||
</router-link>
|
||||
<router-link to="/config" class="nav-item" active-class="active">
|
||||
<span class="ic">⚙</span>配置中心管理<span class="badge">Apollo</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">可观测性</div>
|
||||
<router-link to="/monitor" class="nav-item" active-class="active">
|
||||
<span class="ic">◎</span>监控 / 日志 / 告警
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">统一入口</div>
|
||||
<router-link to="/subsystem" class="nav-item" active-class="active">
|
||||
<span class="ic">↗</span>子系统导航
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-label">审计</div>
|
||||
<router-link to="/audit/login" class="nav-item" active-class="active">
|
||||
<span class="ic">📋</span>登录审计
|
||||
</router-link>
|
||||
<router-link to="/audit/ops" class="nav-item" active-class="active">
|
||||
<span class="ic">📝</span>运维操作审计
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="sidebar-foot">
|
||||
xinfra v3 一期 · 七机房容器化<br>RKE2 · Calico BGP · Ceph · LAS<br>AWS TGW + WireGuard · LDAP 认证
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
background: var(--bg-panel);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 14px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 10.5px;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-mid);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item .ic {
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg-panel-2);
|
||||
color: var(--text-hi);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: #13261F;
|
||||
color: var(--accent);
|
||||
border-color: var(--accent-dim);
|
||||
}
|
||||
|
||||
.nav-item .badge {
|
||||
margin-left: auto;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
background: #262C38;
|
||||
color: var(--text-dim);
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-item.active .badge {
|
||||
background: var(--accent-dim);
|
||||
color: #CFFCE9;
|
||||
}
|
||||
|
||||
.sidebar-foot {
|
||||
margin-top: auto;
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="shell">
|
||||
<AppHeader />
|
||||
<AppSidebar />
|
||||
<AppMain />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppHeader from '@/components/Layout/AppHeader.vue'
|
||||
import AppSidebar from '@/components/Layout/AppSidebar.vue'
|
||||
import AppMain from '@/components/Layout/AppMain.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: 226px 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user