feat: 整体布局搭建、新增不占为边框css变量

src/components.d.ts

@@ -7,8 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    Aaa: typeof import('./components/aaa.vue')['default']
-    HelloWorld: (typeof import("./components/HelloWorld.vue"))["default"]
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']

src/components/aaa.vue

@@ -1,7 +0,0 @@
-<template>
-  <div><a-button type="primary">Primary</a-button></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

src/layout/LayoutDefaults/index.vue

@@ -2,15 +2,18 @@
   <a-layout class="layout">
     <Aside />
     <a-layout>
-      <a-layout-header>Header</a-layout-header>
-      <a-layout-content>Content</a-layout-content>
+      <Header />
+      <Main />
+      <Footer />
     </a-layout>
-    <a-layout-footer>Footer</a-layout-footer>
   </a-layout>
 </template>
 
 <script setup lang="ts">
 import Aside from "@/layout/components/Aside/index.vue";
+import Header from "@/layout/components/Header/index.vue";
+import Main from "@/layout/components/Main/index.vue";
+import Footer from "@/layout/components/Footer/index.vue";
 defineOptions({ name: "LayoutDefaults" });
 </script>
 

src/layout/components/Aside/index.vue

@@ -34,7 +34,7 @@ const onCollapse = (type: boolean) => {
 .aside {
   height: 100vh;
 }
-
+// 头部
 .logo_head {
   height: 60px;
   display: flex;
@@ -53,10 +53,11 @@ const onCollapse = (type: boolean) => {
 
 .layout_side {
   height: calc(100% - 60px);
+  .scrollbar {
+    height: 100%;
+  }
 }
-.scrollbar {
-  height: 100%;
-}
+// 修改左侧滚动条宽度
 :deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
   width: 4px;
   margin-left: 8px;

src/layout/components/Footer/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <a-layout-footer class="footer">
+    <div class="footer_title">dc admin by 兔子先森</div>
+  </a-layout-footer>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.footer {
+  height: 40px;
+  box-sizing: border-box;
+  border-top: $border-1 solid $color-border-1;
+  display: flex;
+  align-items: center;
+}
+.footer_title {
+  text-align: center;
+  margin: 0 auto;
+  color: $color-text-4;
+}
+</style>

src/layout/components/Header/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <div>头部header</div>
+  <a-layout-header class="header">Header</a-layout-header>
 </template>
 
 <script setup lang="ts"></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header {
+  height: 60px;
+  box-sizing: border-box;
+  border-bottom: $border-1 solid $color-border-1;
+}
+</style>

src/layout/components/Main/index.vue

@@ -1,7 +1,12 @@
 <template>
-  <div>主渲染窗口</div>
+  <a-layout-content class="content">Content</a-layout-content>
 </template>
 
 <script setup lang="ts"></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  box-shadow: $border-no-1;
+}
+</style>

src/style/variable.scss

@@ -9,6 +9,14 @@ $border-1: 1px; // 常规
 $border-2: 2px; // 较粗
 $border-3: 3px; // 粗
 
+// 默认不占位边框
+$border-no-1: inset 0 0 0 1px red;
+$border-no-2: inset 0 0 0 1px cyan;
+$border-no-3: inset 0 0 0 1px blue;
+$border-no-4: inset 0 0 0 1px gold;
+$border-no-5: inset 0 0 0 1px violet;
+$border-no-6: inset 0 0 0 1px green;
+
 // 设置全局主题色：https://arco.design/vue/docs/token
 $color-primary: rgb(var(--primary-6)); // 主题色
 $color-success: rgb(var(--success-6)); // 成功色