feat(projects): 布局调整

.cz-config.js

@@ -34,27 +34,6 @@ module.exports = {
     }
   }),
 
-  // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。
-  // allowCustomScopes: true,
-
-  // allowTicketNumber: false,
-  // isTicketNumberRequired: false,
-  // ticketNumberPrefix: 'TICKET-',
-  // ticketNumberRegExp: '\\d{1,5}',
-
-
-  // 针对每一个 type 去定义对应的 scopes，例如 fix
-  /*
-  scopeOverrides: {
-    fix: [
-      { name: 'merge' },
-      { name: 'style' },
-      { name: 'e2eTest' },
-      { name: 'unitTest' }
-    ]
-  },
-  */
-
   // 交互提示信息
   messages: {
     type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',

package.json

@@ -20,7 +20,6 @@
     "dayjs": "^1.10.6",
     "form-data": "^4.0.0",
     "naive-ui": "^2.16.6",
-    "nprogress": "^0.2.0",
     "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
     "smoothscroll-polyfill": "^0.4.4",

pnpm-lock.yaml

@@ -32,7 +32,6 @@ specifiers:
   husky: ^7.0.2
   lint-staged: ^11.1.2
   naive-ui: ^2.16.6
-  nprogress: ^0.2.0
   patch-package: ^6.4.7
   pinia: ^2.0.0-rc.4
   postinstall-postinstall: ^2.1.0
@@ -59,7 +58,6 @@ dependencies:
   dayjs: registry.nlark.com/dayjs/1.10.6
   form-data: 4.0.0
   naive-ui: registry.nlark.com/naive-ui/2.16.6_vue@3.2.4
-  nprogress: 0.2.0
   pinia: registry.nlark.com/pinia/2.0.0-rc.4_typescript@4.3.5+vue@3.2.4
   qs: 6.10.1
   smoothscroll-polyfill: registry.nlark.com/smoothscroll-polyfill/0.4.4
@@ -1296,10 +1294,6 @@ packages:
       path-key: 3.1.1
     dev: true
 
-  /nprogress/0.2.0:
-    resolution: {integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E=, tarball: nprogress/download/nprogress-0.2.0.tgz}
-    dev: false
-
   /object-assign/4.1.1:
     resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=, tarball: object-assign/download/object-assign-4.1.1.tgz}
     engines: {node: '>=0.10.0'}

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);
-  }
-}