From 268cfce39d632d81bf026e419717147afb355aea Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 2 Apr 2024 21:00:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E6=90=AD=E5=BB=BA=E3=80=81=E6=96=B0=E5=A2=9E=E4=B8=8D=E5=8D=A0?=
 =?UTF-8?q?=E4=B8=BA=E8=BE=B9=E6=A1=86css=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                    |  2 --
 src/components/aaa.vue                 |  7 -------
 src/layout/LayoutDefaults/index.vue    |  9 ++++++---
 src/layout/components/Aside/index.vue  |  9 +++++----
 src/layout/components/Footer/index.vue | 22 ++++++++++++++++++++++
 src/layout/components/Header/index.vue | 10 ++++++++--
 src/layout/components/Main/index.vue   |  9 +++++++--
 src/style/variable.scss                |  8 ++++++++
 8 files changed, 56 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/aaa.vue
 create mode 100644 src/layout/components/Footer/index.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 1810d29..fa3e33e 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/components/aaa.vue b/src/components/aaa.vue
deleted file mode 100644
index 919bff7..0000000
--- a/src/components/aaa.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div><a-button type="primary">Primary</a-button></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/src/layout/LayoutDefaults/index.vue b/src/layout/LayoutDefaults/index.vue
index 0699cc9..cdc1245 100644
--- a/src/layout/LayoutDefaults/index.vue
+++ b/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>
 
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index 7ac247d..88d9671 100644
--- a/src/layout/components/Aside/index.vue
+++ b/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;
diff --git a/src/layout/components/Footer/index.vue b/src/layout/components/Footer/index.vue
new file mode 100644
index 0000000..55380fc
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 05a31f1..8d69bbe 100644
--- a/src/layout/components/Header/index.vue
+++ b/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>
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index 7966f57..ce8ef45 100644
--- a/src/layout/components/Main/index.vue
+++ b/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>
diff --git a/src/style/variable.scss b/src/style/variable.scss
index 996e332..1e40a9f 100644
--- a/src/style/variable.scss
+++ b/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)); // 成功色