feat: 中心的空隙以及头部结构

.husky/_/commit-msg

@@ -1,2 +1,4 @@
 #!/usr/bin/env sh
-. "${0%/*}/h"
+. "$(dirname -- "$0")/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/_/pre-commit

@@ -1,2 +1,5 @@
-#!/usr/bin/env sh
+#!/bin/sh
-. "${0%/*}/h"
+
+. "$(dirname "$0")/husky.sh"
+
+npm run lint-staged

src/auto-import.d.ts

@@ -5,67 +5,79 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
+  const EffectScope: (typeof import("vue"))["EffectScope"];
-  const computed: typeof import('vue')['computed']
+  const computed: (typeof import("vue"))["computed"];
-  const createApp: typeof import('vue')['createApp']
+  const createApp: (typeof import("vue"))["createApp"];
-  const customRef: typeof import('vue')['customRef']
+  const customRef: (typeof import("vue"))["customRef"];
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
-  const defineComponent: typeof import('vue')['defineComponent']
+  const defineComponent: (typeof import("vue"))["defineComponent"];
-  const effectScope: typeof import('vue')['effectScope']
+  const effectScope: (typeof import("vue"))["effectScope"];
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
-  const h: typeof import('vue')['h']
+  const h: (typeof import("vue"))["h"];
-  const inject: typeof import('vue')['inject']
+  const inject: (typeof import("vue"))["inject"];
-  const isProxy: typeof import('vue')['isProxy']
+  const isProxy: (typeof import("vue"))["isProxy"];
-  const isReactive: typeof import('vue')['isReactive']
+  const isReactive: (typeof import("vue"))["isReactive"];
-  const isReadonly: typeof import('vue')['isReadonly']
+  const isReadonly: (typeof import("vue"))["isReadonly"];
-  const isRef: typeof import('vue')['isRef']
+  const isRef: (typeof import("vue"))["isRef"];
-  const markRaw: typeof import('vue')['markRaw']
+  const markRaw: (typeof import("vue"))["markRaw"];
-  const nextTick: typeof import('vue')['nextTick']
+  const nextTick: (typeof import("vue"))["nextTick"];
-  const onActivated: typeof import('vue')['onActivated']
+  const onActivated: (typeof import("vue"))["onActivated"];
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
-  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onDeactivated: (typeof import("vue"))["onDeactivated"];
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
-  const onMounted: typeof import('vue')['onMounted']
+  const onMounted: (typeof import("vue"))["onMounted"];
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
-  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUnmounted: (typeof import("vue"))["onUnmounted"];
-  const onUpdated: typeof import('vue')['onUpdated']
+  const onUpdated: (typeof import("vue"))["onUpdated"];
-  const provide: typeof import('vue')['provide']
+  const provide: (typeof import("vue"))["provide"];
-  const reactive: typeof import('vue')['reactive']
+  const reactive: (typeof import("vue"))["reactive"];
-  const readonly: typeof import('vue')['readonly']
+  const readonly: (typeof import("vue"))["readonly"];
-  const ref: typeof import('vue')['ref']
+  const ref: (typeof import("vue"))["ref"];
-  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveComponent: (typeof import("vue"))["resolveComponent"];
-  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReactive: (typeof import("vue"))["shallowReactive"];
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
-  const shallowRef: typeof import('vue')['shallowRef']
+  const shallowRef: (typeof import("vue"))["shallowRef"];
-  const toRaw: typeof import('vue')['toRaw']
+  const toRaw: (typeof import("vue"))["toRaw"];
-  const toRef: typeof import('vue')['toRef']
+  const toRef: (typeof import("vue"))["toRef"];
-  const toRefs: typeof import('vue')['toRefs']
+  const toRefs: (typeof import("vue"))["toRefs"];
-  const toValue: typeof import('vue')['toValue']
+  const toValue: (typeof import("vue"))["toValue"];
-  const triggerRef: typeof import('vue')['triggerRef']
+  const triggerRef: (typeof import("vue"))["triggerRef"];
-  const unref: typeof import('vue')['unref']
+  const unref: (typeof import("vue"))["unref"];
-  const useAttrs: typeof import('vue')['useAttrs']
+  const useAttrs: (typeof import("vue"))["useAttrs"];
-  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssModule: (typeof import("vue"))["useCssModule"];
-  const useCssVars: typeof import('vue')['useCssVars']
+  const useCssVars: (typeof import("vue"))["useCssVars"];
-  const useLink: typeof import('vue-router')['useLink']
+  const useLink: (typeof import("vue-router"))["useLink"];
-  const useRoute: typeof import('vue-router')['useRoute']
+  const useRoute: (typeof import("vue-router"))["useRoute"];
-  const useRouter: typeof import('vue-router')['useRouter']
+  const useRouter: (typeof import("vue-router"))["useRouter"];
-  const useSlots: typeof import('vue')['useSlots']
+  const useSlots: (typeof import("vue"))["useSlots"];
-  const watch: typeof import('vue')['watch']
+  const watch: (typeof import("vue"))["watch"];
-  const watchEffect: typeof import('vue')['watchEffect']
+  const watchEffect: (typeof import("vue"))["watchEffect"];
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type {
-  import('vue')
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+    WritableComputedRef
+  } from "vue";
+  import("vue");
 }

src/components.d.ts

@@ -5,10 +5,10 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
-    RouterView: typeof import('vue-router')['RouterView']
+    RouterView: (typeof import("vue-router"))["RouterView"];
-    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
   }
 }

src/layout/components/Aside/index.vue

@@ -6,7 +6,7 @@
     </div>
     <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
       <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
-        <a-menu show-collapse-button @collapse="onCollapse">
+        <a-menu show-collapse-button breakpoint="xl" @collapse="onCollapse">
           <a-menu-item key="0_0_0" data-obj="1">Menu 1</a-menu-item>
           <a-sub-menu :key="item" v-for="item in 20">
             <template #icon><icon-apps></icon-apps></template>
@@ -41,7 +41,7 @@ const onCollapse = (type: boolean) => {
   justify-content: space-around;
   align-items: center;
   box-sizing: border-box;
-  border-bottom: $border-1 solid $color-border-1;
+  border-right: $border-1 solid $color-border-2;
   .logo {
     width: 30px;
   }
@@ -62,4 +62,9 @@ const onCollapse = (type: boolean) => {
   width: 4px;
   margin-left: 8px;
 }
+// 去掉右侧阴影并替换为边线
+:deep(.arco-layout-sider-light) {
+  box-shadow: unset;
+  border-right: $border-1 solid $color-border-2;
+}
 </style>

src/layout/components/Footer/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-footer class="footer">
-    <div class="footer_title">dc-admin by 兔子先森</div>
+    <div class="footer_title">DC-Admin by 兔子先森</div>
   </a-layout-footer>
 </template>
 
@@ -10,7 +10,7 @@
 .footer {
   height: 30px;
   box-sizing: border-box;
-  border-top: $border-1 solid $color-border-1;
+  border-top: $border-1 solid $color-border-2;
   display: flex;
   align-items: center;
 }

src/layout/components/Header/index.vue

@@ -1,13 +1,113 @@
 <template>
-  <a-layout-header class="header">Header</a-layout-header>
+  <a-layout-header class="header">
+    <div class="header_crumb">
+      <div class="menu_fold"><icon-menu-fold style="font-size: 18px; stroke-width: 3" /></div>
+      <div class="breadcrumb">
+        <a-space direction="vertical">
+          <a-breadcrumb>
+            <a-breadcrumb-item>
+              <icon-home />
+              首页
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>
+              <icon-at />
+              常用组件
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>
+              <icon-at />
+              文件上传
+            </a-breadcrumb-item>
+          </a-breadcrumb>
+        </a-space>
+      </div>
+    </div>
+    <div class="header_setting">
+      <a-tooltip content="语言">
+        <div>
+          <icon-language />
+        </div>
+      </a-tooltip>
+      <a-tooltip content="切换黑夜模式">
+        <div>
+          <icon-sun-fill />
+        </div>
+      </a-tooltip>
+      <a-tooltip content="通知">
+        <div>
+          <icon-notification />
+        </div>
+      </a-tooltip>
+      <a-tooltip content="全屏">
+        <div>
+          <icon-fullscreen />
+        </div>
+      </a-tooltip>
+      <a-tooltip content="系统设置">
+        <div>
+          <icon-settings />
+        </div>
+      </a-tooltip>
+      <a-tooltip content="主题设置">
+        <div>
+          <icon-skin />
+        </div>
+      </a-tooltip>
+      <div class="my_image"><a-image width="32" :src="Tom" /></div>
+    </div>
+  </a-layout-header>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Tom from "@/assets/img/tom.jpg";
+</script>
 
 <style lang="scss" scoped>
 .header {
   height: 60px;
+  padding: 0 $padding;
   box-sizing: border-box;
-  border-bottom: $border-1 solid $color-border-1;
+  border-bottom: $border-1 solid $color-border-2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .header_crumb {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .menu_fold {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+    .breadcrumb {
+      margin-left: $margin;
+    }
+  }
+  .header_setting {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    > div {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      box-sizing: border-box;
+      // border: $border-1 solid $color-border-1;
+      margin-left: $margin;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+    > div:hover {
+      background: $color-fill-1;
+    }
+    .my_image {
+      width: 32px;
+      height: 32px;
+      overflow: hidden;
+    }
+  }
 }
 </style>

src/layout/components/Main/index.vue

@@ -1,19 +1,31 @@
 <template>
   <a-layout-content class="content">
+    <Tabs />
     <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
-      <div style="height: 2000px; background: #eee"></div>
+      <div class="main">
+        <div class="main_box"></div>
+      </div>
     </a-scrollbar>
   </a-layout-content>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Tabs from "@/layout/components/Tabs/index.vue";
+</script>
 
 <style lang="scss" scoped>
 .content {
   height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
 }
 .scrollbar {
-  height: 100%;
+  height: calc(100% - 40px);
+}
+.main {
+  padding: $padding;
+  .main_box {
+    height: 1000px;
+    background: #eee;
+  }
 }
 // 修改左侧滚动条宽度
 :deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {

src/layout/components/Tabs/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <div>tabs栏</div>
+  <div class="tabs">tabs栏</div>
 </template>
 
 <script setup lang="ts"></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.tabs {
+  height: 40px;
+  box-sizing: border-box;
+  border-bottom: $border-1 solid $color-border-2;
+}
+</style>

src/style/global-theme.scss

@@ -5,20 +5,32 @@ $padding: 16px; // 盒子和内容的间距
 $radius-box: 2px; // 边框圆角
 
 // 边框宽度
-$border-1: 1px; // 常规
+$border-1: 1px; // 常规-主要
 $border-2: 2px; // 较粗
 $border-3: 3px; // 粗
 
+// 边框色
+$color-border-1: var(--color-border-1); // 浅色
+$color-border-2: var(--color-border-2); // 常规-主要边框色
+$color-border-3: var(--color-border-3); // 深/悬浮
+$color-border-4: var(--color-border-4); // 重/按钮描边
+
 // 默认不占位边框
-$border-no-1: inset 0 0 0 1px red;
+$shadow-border-1: inset 0 0 0 1px red;
-$border-no-2: inset 0 0 0 1px cyan;
+$shadow-border-2: inset 0 0 0 1px cyan;
-$border-no-3: inset 0 0 0 1px blue;
+$shadow-border-3: inset 0 0 0 1px blue;
-$border-no-4: inset 0 0 0 1px gold;
+$shadow-border-4: inset 0 0 0 1px gold;
-$border-no-5: inset 0 0 0 1px violet;
+$shadow-border-5: inset 0 0 0 1px violet;
-$border-no-6: inset 0 0 0 1px green;
+$shadow-border-6: inset 0 0 0 1px green;
+
+// 填充色
+$color-fill-1: #eeeeee; // 常规填充色/白底悬浮
+$color-fill-2: #d1d1d1; // 深/灰底悬浮
+$color-fill-3: #b6b6b6; // 重/特殊场景
+$color-fill-4: #9b9b9b; // 浅/禁用
 
 // 设置全局主题色：https://arco.design/vue/docs/token
-$color-primary: rgb(var(--primary-6)); // 主题色
+$color-primary: rgb(var(--primary-6)); // 主题色-主要
 $color-success: rgb(var(--success-6)); // 成功色
 $color-warning: rgb(var(--warning-6)); // 警示色
 $color-danger: rgb(var(--danger-6)); // 错误色
@@ -30,12 +42,6 @@ $color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
 $color-text-3: var(--color-text-3); // 次要信息 二级字体色
 $color-text-4: var(--color-text-4); // 置灰信息
 
-// 边框色
-$color-border-1: var(--color-border-1); // 浅色-主要边框色
-$color-border-2: var(--color-border-2); // 一般
-$color-border-3: var(--color-border-3); // 深/悬浮
-$color-border-4: var(--color-border-4); // 重/按钮描边
-
 // 背景色
 $color-bg-1: var(--color-bg-1); // 整体背景色
 $color-bg-2: var(--color-bg-2); // 一级容器背景
@@ -51,7 +57,7 @@ $shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
 // 常规大小为字体对应的首选项
 // 字体大小
 $font-size-body-3: 14px; // 默认大小-正文-常规
-$font-size-body-2: 13px; // 默认的小号字体
+$font-size-body-2: 13px; // 小号字体
 $font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
 // 标题
 $font-size-title-1: 16px; // h3-标题-小