init

src/layout/components/Main/index.ts

@@ -0,0 +1,3 @@
+import MainView from './index.vue';
+
+export { MainView };

src/layout/components/Main/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <transition name="zoom-fade" mode="out-in" appear>
+        <keep-alive>
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
+    </template>
+  </RouterView>
+</template>
+
+<script lang="ts" setup>
+import { defineProps} from 'vue'
+const props = defineProps(['notNeedKey', 'animate'])
+</script>

src/layout/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <MainView />
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useLoadingBar } from 'naive-ui'
+import { MainView } from '@/layout/components/Main/index'
+const collapsed = ref<boolean>(false)
+
+const watchWidth = () => {
+  const Width = document.body.clientWidth
+  if (Width <= 950) {
+    collapsed.value = true
+  } else collapsed.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('resize', watchWidth)
+  //挂载在 window 方便与在js中使用
+  window['$loading'] = useLoadingBar()
+  window['$loading'].finish()
+})
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+
+  &-default-background {
+    background: #f5f7f9;
+  }
+
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    position: relative;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-sider-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .ant-layout {
+    overflow: hidden;
+  }
+
+  .layout-right-fix {
+    overflow-x: hidden;
+    padding-left: 200px;
+    min-height: 100vh;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-content {
+    flex: auto;
+    min-height: 100vh;
+  }
+
+  .n-layout-header.n-layout-header--absolute-positioned {
+    z-index: 11;
+  }
+
+  .n-layout-footer {
+    background: none;
+  }
+}
+
+.layout-content-main {
+  margin: 0 10px 10px;
+  position: relative;
+  padding-top: 64px;
+}
+
+.layout-content-main-fix {
+  padding-top: 64px;
+}
+
+.fluid-header {
+  padding-top: 0px;
+}
+
+.main-view-fix {
+  padding-top: 44px;
+}
+
+.noMultiTabs {
+  padding-top: 0;
+}
+</style>

src/layout/parentLayout.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>