feat(projects): 布局调整

src/layouts/BasicContent.vue

@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <router-view />
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>

src/layouts/BasicLayout.vue

@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <router-view />
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>

src/layouts/BasicLayout/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <n-layout has-sider>
+    <n-layout-sider />
+    <n-layout>
+      <n-layout-header></n-layout-header>
+      <n-layout-content>
+        <router-view />
+      </n-layout-content>
+      <n-layout-footer></n-layout-footer>
+    </n-layout>
+  </n-layout>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/layouts/index.ts

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

src/plugins/index.ts

@@ -1,5 +1,4 @@
 import setupSmoothScroll from './smooth-scroll';
 import setupNaive from './naive';
-import NProgress from './nprogress';
 
-export { setupSmoothScroll, setupNaive, NProgress };
+export { setupSmoothScroll, setupNaive };

src/plugins/naive.ts

@@ -1,9 +1,30 @@
-import { create, NSpace, NButton, NDatePicker, NInput } from 'naive-ui';
+import {
+  create,
+  NLayout,
+  NLayoutSider,
+  NLayoutHeader,
+  NLayoutContent,
+  NLayoutFooter,
+  NSpace,
+  NButton,
+  NDatePicker,
+  NInput
+} from 'naive-ui';
 import type { App } from 'vue';
 
 export default function setupNaive(app: App) {
   const naive = create({
-    components: [NSpace, NButton, NDatePicker, NInput]
+    components: [
+      NLayout,
+      NLayoutSider,
+      NLayoutHeader,
+      NLayoutContent,
+      NLayoutFooter,
+      NSpace,
+      NButton,
+      NDatePicker,
+      NInput
+    ]
   });
   app.use(naive);
 }

src/plugins/nprogress.ts

@@ -1,10 +0,0 @@
-import NProgress from 'nprogress'; // 顶部进度条
-import '../styles/css/nprogress.css';
-
-NProgress.configure({
-  easing: 'ease',
-  speed: 500,
-  trickleSpeed: 200,
-  showSpinner: false
-});
-export default NProgress;

src/styles/css/nprogress.css

@@ -1,60 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-#nprogress .bar {
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-	background: #29d;
-}
-/* Fancy blur effect */
-#nprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0px;
-  width: 100px;
-  height: 100%;
-  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
-  opacity: 1;
-  transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-  position: fixed;
-	top: 15px;
-  right: 15px;
-	display: block;
-  z-index: 1031;
-}
-
-#nprogress .spinner-icon {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-  border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
-  border-radius: 50%;
-  animation: nprogress-spinner 400ms linear infinite;
-}
-.nprogress-custom-parent {
-  position: relative;
-	overflow: hidden;
-}
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}