diff --git a/.husky/_/.gitignore b/.husky/_/.gitignore
index e69de29..f59ec20 100644
--- a/.husky/_/.gitignore
+++ b/.husky/_/.gitignore
@@ -0,0 +1 @@
+*
\ No newline at end of file
diff --git a/.husky/_/commit-msg b/.husky/_/commit-msg
index 94647a4..21c69a4 100644
--- a/.husky/_/commit-msg
+++ b/.husky/_/commit-msg
@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/husky.sh"
-
-npx --no-install commitlint --edit $1
\ No newline at end of file
+. "${0%/*}/h"
\ No newline at end of file
diff --git a/.husky/_/pre-commit b/.husky/_/pre-commit
index 3cd913c..21c69a4 100644
--- a/.husky/_/pre-commit
+++ b/.husky/_/pre-commit
@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname "$0")/husky.sh"
-
-npm run lint-staged
\ No newline at end of file
+. "${0%/*}/h"
\ No newline at end of file
diff --git a/src/assets/img/logo.jpg b/src/assets/img/logo.jpg
new file mode 100644
index 0000000..221d87f
Binary files /dev/null and b/src/assets/img/logo.jpg differ
diff --git a/src/auto-import.d.ts b/src/auto-import.d.ts
index 714a6ac..65b02fd 100644
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@@ -5,79 +5,67 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: (typeof import("vue"))["EffectScope"];
-  const computed: (typeof import("vue"))["computed"];
-  const createApp: (typeof import("vue"))["createApp"];
-  const customRef: (typeof import("vue"))["customRef"];
-  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
-  const defineComponent: (typeof import("vue"))["defineComponent"];
-  const effectScope: (typeof import("vue"))["effectScope"];
-  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
-  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
-  const h: (typeof import("vue"))["h"];
-  const inject: (typeof import("vue"))["inject"];
-  const isProxy: (typeof import("vue"))["isProxy"];
-  const isReactive: (typeof import("vue"))["isReactive"];
-  const isReadonly: (typeof import("vue"))["isReadonly"];
-  const isRef: (typeof import("vue"))["isRef"];
-  const markRaw: (typeof import("vue"))["markRaw"];
-  const nextTick: (typeof import("vue"))["nextTick"];
-  const onActivated: (typeof import("vue"))["onActivated"];
-  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
-  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
-  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
-  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
-  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
-  const onDeactivated: (typeof import("vue"))["onDeactivated"];
-  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
-  const onMounted: (typeof import("vue"))["onMounted"];
-  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
-  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
-  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
-  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
-  const onUnmounted: (typeof import("vue"))["onUnmounted"];
-  const onUpdated: (typeof import("vue"))["onUpdated"];
-  const provide: (typeof import("vue"))["provide"];
-  const reactive: (typeof import("vue"))["reactive"];
-  const readonly: (typeof import("vue"))["readonly"];
-  const ref: (typeof import("vue"))["ref"];
-  const resolveComponent: (typeof import("vue"))["resolveComponent"];
-  const shallowReactive: (typeof import("vue"))["shallowReactive"];
-  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
-  const shallowRef: (typeof import("vue"))["shallowRef"];
-  const toRaw: (typeof import("vue"))["toRaw"];
-  const toRef: (typeof import("vue"))["toRef"];
-  const toRefs: (typeof import("vue"))["toRefs"];
-  const toValue: (typeof import("vue"))["toValue"];
-  const triggerRef: (typeof import("vue"))["triggerRef"];
-  const unref: (typeof import("vue"))["unref"];
-  const useAttrs: (typeof import("vue"))["useAttrs"];
-  const useCssModule: (typeof import("vue"))["useCssModule"];
-  const useCssVars: (typeof import("vue"))["useCssVars"];
-  const useLink: (typeof import("vue-router"))["useLink"];
-  const useRoute: (typeof import("vue-router"))["useRoute"];
-  const useRouter: (typeof import("vue-router"))["useRouter"];
-  const useSlots: (typeof import("vue"))["useSlots"];
-  const watch: (typeof import("vue"))["watch"];
-  const watchEffect: (typeof import("vue"))["watchEffect"];
-  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
-  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  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";
-  import("vue");
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index bb20fe5..1810d29 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,12 +5,12 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+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"];
+    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/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index e8542f4..a8b8402 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -1,25 +1,76 @@
 <template>
-  <a-layout-sider :width="220">
-    <div class="logo_head"></div>
+  <a-layout-sider collapsible breakpoint="xl" @collapse="onCollapse">
+    <div class="logo_head">
+      <img :src="Logo" class="logo" />
+      <span class="logo_title" v-if="!collapse">dc admin</span>
+    </div>
     <a-scrollbar outer-class="aside_scroll">
-      <div class="aside_menu"></div>
+      <a-menu :default-open-keys="['0']" :default-selected-keys="['0_2']" breakpoint="xl" :collapsed="collapse">
+        <a-sub-menu key="0">
+          <template #icon><icon-apps></icon-apps></template>
+          <template #title>Navigation 1</template>
+          <a-menu-item key="0_0">Menu 1</a-menu-item>
+          <a-menu-item key="0_1">Menu 2</a-menu-item>
+          <a-menu-item key="0_2">Menu 3</a-menu-item>
+          <a-menu-item key="0_3">Menu 4</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="1">
+          <template #icon><icon-bug></icon-bug></template>
+          <template #title>Navigation 2</template>
+          <a-menu-item key="1_0">Menu 1</a-menu-item>
+          <a-menu-item key="1_1">Menu 2</a-menu-item>
+          <a-menu-item key="1_2">Menu 3</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu key="2">
+          <template #icon><icon-bulb></icon-bulb></template>
+          <template #title>Navigation 3</template>
+          <a-menu-item key="2_0">Menu 1</a-menu-item>
+          <a-menu-item key="2_1">Menu 2</a-menu-item>
+          <a-sub-menu key="2_2" title="Navigation 4">
+            <a-menu-item key="2_2_0">Menu 1</a-menu-item>
+            <a-menu-item key="2_2_1">Menu 2</a-menu-item>
+          </a-sub-menu>
+        </a-sub-menu>
+      </a-menu>
     </a-scrollbar>
   </a-layout-sider>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Logo from "@/assets/img/logo.jpg";
+import { Message } from "@arco-design/web-vue";
+
+const collapse = ref<boolean>(false);
+const onCollapse = (val: boolean, type: string) => {
+  console.log("收缩", val, type);
+  collapse.value = val;
+  const content = type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
+  Message.info({
+    content,
+    duration: 2000
+  });
+};
+</script>
 
 <style lang="scss" scoped>
 .logo_head {
   height: 60px;
   box-shadow: inset 0 0 0 1px red;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .logo {
+    width: 50px;
+  }
+  .logo_title {
+    font-weight: bold;
+    font-size: $font-size-title-2;
+  }
 }
 
 .aside_scroll {
-  height: 100%;
+  width: 100%;
+  height: calc(100% - 60px);
   box-shadow: inset 0 0 0 1px black;
-  .aside_menu {
-    box-shadow: inset 0 0 0 1px cyan;
-  }
 }
 </style>
diff --git a/src/style/variable.scss b/src/style/variable.scss
index c6e0c93..996e332 100644
--- a/src/style/variable.scss
+++ b/src/style/variable.scss
@@ -40,15 +40,16 @@ $shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1
 $shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
 $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-标题-小
-$font-size-title-2: 20px; // h2-标题-中
+$font-size-title-2: 20px; // 常规-h2-标题-中
 $font-size-title-3: 24px; // h1-标题-大
 // 运营标题
 $font-size-display-1: 36px; // 运营标题-小
-$font-size-display-2: 48px; // 运营标题-中
+$font-size-display-2: 48px; // 常规-运营标题-中
 $font-size-display-3: 56px; // 运营标题-大