From d36cdaca88811d97032a8d0f8504d081a2b36732 Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Tue, 14 Jul 2026 15:39:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

布局组件：
- layouts/DefaultLayout.vue，默认布局组合

Layout 组件：
- components/Layout/AppHeader.vue，顶部导航栏（品牌、环境标签、搜索、用户信息）
- components/Layout/AppSidebar.vue，侧边菜单栏（导航菜单项）
- components/Layout/AppMain.vue，主内容区容器

布局结构：顶栏 + 侧边栏 + 内容区（CSS Grid）
---
 frontend/src/components/Layout/AppHeader.vue  | 140 ++++++++++++++++
 frontend/src/components/Layout/AppMain.vue    |  15 ++
 frontend/src/components/Layout/AppSidebar.vue | 149 ++++++++++++++++++
 frontend/src/layouts/DefaultLayout.vue        |  22 +++
 4 files changed, 326 insertions(+)
 create mode 100644 frontend/src/components/Layout/AppHeader.vue
 create mode 100644 frontend/src/components/Layout/AppMain.vue
 create mode 100644 frontend/src/components/Layout/AppSidebar.vue
 create mode 100644 frontend/src/layouts/DefaultLayout.vue

diff --git a/frontend/src/components/Layout/AppHeader.vue b/frontend/src/components/Layout/AppHeader.vue
new file mode 100644
index 0000000..0b9b8df
--- /dev/null
+++ b/frontend/src/components/Layout/AppHeader.vue
@@ -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>
diff --git a/frontend/src/components/Layout/AppMain.vue b/frontend/src/components/Layout/AppMain.vue
new file mode 100644
index 0000000..2627672
--- /dev/null
+++ b/frontend/src/components/Layout/AppMain.vue
@@ -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>
diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue
new file mode 100644
index 0000000..298e2fd
--- /dev/null
+++ b/frontend/src/components/Layout/AppSidebar.vue
@@ -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">机房 &amp; 网络</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>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..aba2fbf
--- /dev/null
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -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>