初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库

src/layout/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :class="['app-wrapper', { 'sidebar-close': !sidebar.opened }]">
+    <Sidebar />
+    <div class="main-container">
+      <Navbar />
+      <TagsView />
+      <Breadcrumb />
+      <main class="app-main">
+        <transition name="fade-transform" mode="out-in">
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="cachedViews">
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+          </router-view>
+        </transition>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import Sidebar from './components/Sidebar/index.vue'
+import Navbar from './components/Navbar/index.vue'
+import Breadcrumb from './components/Breadcrumb/index.vue'
+import TagsView from './components/TagsView/index.vue'
+
+const route = useRoute()
+const store = useStore()
+
+const sidebar = computed(() => store.state.app.sidebar)
+const cachedViews = computed(() => store.state.tagsView?.cachedViews || [])
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app-wrapper {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background: #f5f7fa;
+}
+
+.main-container {
+  min-height: 100vh;
+  transition: padding-left 0.28s ease;
+  padding-left: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-wrapper.sidebar-close {
+  .main-container {
+    padding-left: 54px;
+  }
+}
+
+.app-main {
+  flex: 1;
+  padding: 20px;
+  min-height: calc(100vh - 180px);
+  background: #f5f7fa;
+}
+
+.app-container {
+  padding: 20px;
+  min-height: calc(100vh - 230px);
+}
+
+.components-container {
+  margin: 30px 50px;
+}
+
+.pagination-container {
+  margin-top: 30px;
+  text-align: right;
+}
+
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+@media screen and (max-width: 768px) {
+  .main-container {
+    padding-left: 0;
+  }
+
+  .app-wrapper.sidebar-close .main-container {
+    padding-left: 0;
+  }
+
+  .app-wrapper.sidebar-opened .main-container {
+    padding-left: 200px;
+  }
+}
+</style>