feat: 更新布局、大屏页面、酸轧报表接口，调整导航栏/侧边栏联动

src/layout/index.vue

@@ -1,121 +1,43 @@
 <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 class="app-wrapper">
+    <sidebar />
+    <div class="main-wrapper">
+      <navbar />
+      <app-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 || [])
+import AppMain from './components/AppMain.vue'
 </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;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
   overflow: hidden;
-  background: #f5f7fa;
 }
 
-.main-container {
-  min-height: 100vh;
-  transition: padding-left 0.28s ease;
-  padding-left: 200px;
+.main-wrapper {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  min-width: 0;
 }
 
-.app-wrapper.sidebar-close {
-  .main-container {
-    padding-left: 54px;
+:deep(.sidebar-container) {
+  flex-shrink: 0;
+  width: 200px;
+  transition: width 0.28s ease;
+
+  &.is-collapse {
+    width: 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>
+</style>