update：更新样式

src/layout/index-view-layout-left/index-view-layout-left.scss

@@ -3,32 +3,57 @@
     font-size: var(--app-font-size);
     line-height: var(--app-line-height);
     color: var(--app-color-black);
+
     .index-view-sider {
         flex: none !important;
         max-width: none !important;
         transition: none 0s ease 0s;
-        background-color: var(--app-color-white);
+        background-color: #001529;
+        color: var(--app-color-white);
 
         .index-view-sider__top {
-            font-size: 21px;
-            font-weight: 700;
             height: 64px;
             display: flex;
             justify-content: center;
             align-items: center;
+
+            .app-icon {
+                width: 37px;
+                height: 37px;
+            }
+
+            .app-caption {
+                font-size: 21px;
+                font-weight: 700;
+                margin-left: 10px;
+                color: var(--app-color-white);
+            }
         }
 
         .app-menu {
-            height: calc(100% - 64px);
+            height: calc(100% - 164px);
             overflow-y: auto;
             overflow-x: hidden;
         }
+
+        .index-view-sider__bottom {
+            .collapse-icon {
+                font-size: 20px;
+                color: var(--app-color-white);
+                margin-left: 15px;
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--app-color-blue);
+                }
+            }
+        }
     }
 
     .index-view-split {
         position: absolute;
-        left: 195px;
-        width: 5px;
+        left: 204px;
+        width: 4px;
         height: 100%;
         cursor: w-resize;
     }
@@ -38,8 +63,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background-color: var(--app-color-white);
-        color: var(--app-color-black);
+        background-color: #001529;
+        color: var(--app-color-white);
 
         .index-view-header__left {
             display: flex;

src/layout/index-view-layout-left/index-view-layout-left.vue

 <template>
     <layout class="index-view-layout index-view-layout--left" id="movebox">
-        <sider class="index-view-sider" :width="collapseChange ? 64 : 200" hide-trigger id="left_move">
+        <sider class="index-view-sider" :width="collapseChange ? 64 : 208" hide-trigger id="left_move">
             <div class="index-view-sider__top">
                 <slot name="siderTop" />
             </div>
             <slot name="siderContent" />
+            <div class="index-view-sider__bottom">
+                <slot name="siderBottom" />
+            </div>
         </sider>
         <div v-show="!collapseChange" class="index-view-split" id="move_axis"></div>
         <layout id="right_move">

src/layout/index-view-layout-top/index-view-layout-top.scss

@@ -2,6 +2,7 @@
     font-size: var(--app-font-size);
     line-height: var(--app-line-height);
     color: var(--app-color-black);
+
     .index-view-header {
         height: 64px;
         display: flex;
@@ -9,25 +10,30 @@
         align-items: center;
         background-color: var(--app-color-black);
         color: var(--app-color-white);
+
         .index-view-header__left {
             font-size: 21px;
             font-weight: 700;
             margin-left: 50px;
+
             .app-caption {
                 color: var(--app-color-white);
             }
+
             .app-icon {
-                width: 36px;
+                width: 37px;
                 height: 37px;
                 margin-right: 6px;
             }
         }
+
         .index-view-header__right {
             display: flex;
             align-items: center;
             margin-right: 38px;
         }
     }
+
     .index-view-content {
         height: calc(100% - 64px);
         overflow: auto;
@@ -35,13 +41,16 @@
         background-color: var(--app-color-gray-400);
         display: flex;
         flex-direction: column;
+
         >.view-container {
             flex-grow: 1;
+
             +.copyright-notice {
                 position: relative;
             }
         }
     }
+
     .copyright-notice {
         height: 100px;
         width: 100%;
@@ -49,6 +58,7 @@
         flex-shrink: 0;
         position: absolute;
         bottom: 0px;
+
         .notice {
             padding-top: 10px;
             color: var(--app-color-gray-200);

src/styles/element/menu.scss

 .el-menu--horizontal {
     display: flex;
-    .el-menu-item, .el-submenu__title {
+
+    .el-menu-item,
+    .el-submenu__title {
         background-color: var(--app-color-black) !important;
         color: var(--app-color-white) !important;
-        &:hover, &.is-active {
+
+        &:hover,
+        &.is-active {
             background: #202027 !important;
         }
     }
+
     >.el-menu-item {
         height: 64px;
+
         &.is-active {
             background: #202027 !important;
             border-bottom: 4px solid var(--app-color-yellow);
             border-bottom-color: var(--app-color-yellow) !important;
         }
     }
+
     >.el-submenu {
         .el-submenu__title {
             height: 64px;
         }
-        &.is-active, &.is-opened {
+
+        &.is-active,
+        &.is-opened {
             .el-submenu__title {
                 border-bottom: 4px solid var(--app-color-yellow);
                 border-bottom-color: var(--app-color-yellow) !important;
             }
         }
     }
+
     .el-submenu__icon-arrow {
         display: none;
     }
+
     &.app-popper-menu {
         .el-menu--popup {
             padding: 0;
-            .el-menu-item, .el-submenu__title {
+
+            .el-menu-item,
+            .el-submenu__title {
                 height: 40px;
                 padding: 0 12px;
                 border-bottom: 1px solid var(--app-color-gray-250);
@@ -42,22 +55,32 @@
     }
 }
 
-.el-menu--vertical {
-    .el-menu-item, .el-submenu__title {
-        height: 57px;
-        color: var(--app-color-gray-100) !important;
-        &:hover, &.is-active {
-            color: var(--app-color-blue) !important;
-        }
-        &.is-active {
-            border-left: 4px solid var(--app-color-blue);
-            background-color: var(--app-color-white) !important;
+.el-menu {
+    border-right: none;
+    background-color: #001529;
+
+    .el-menu--vertical {
+
+        .el-menu-item,
+        .el-submenu__title {
+            color: var(--app-color-white) !important;
+
+            .fa,
+            .el-submenu__icon-arrow {
+                color: var(--app-color-white) !important;
+            }
+
+            &:hover,
+            &.is-active {
+                background-color: var(--app-color-blue);
+            }
         }
-    }
-    .el-submenu {
-        &.is-active {
-            >.el-submenu__title {
-                color: var(--app-color-blue) !important;
+
+        .el-submenu {
+            &.is-active {
+                >.el-submenu__title {
+                    background-color: var(--app-color-blue);
+                }
             }
         }
     }