feat: 🎸 重构layout

src/components/Echart/index.vue

@@ -55,9 +55,7 @@ export default defineComponent({
 
     onMounted(() => {
       // 设置异步，不然图例一开始的宽度不正确。
-      setTimeout(() => {
-        initChart()
-      }, 10)
+      initChart()
       __resizeHandler = debounce(() => {
         if (chart) {
           chart.resize()

src/components/Hamburger/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div>
+  <div @click="toggleCollapsed(!collapsed)">
     <svg
       :class="{'is-active': !collapsed}"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
-      @click="toggleCollapsed(!collapsed)"
     >
       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>

src/components/Logo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link :class="['app-logo', 'app-logo-' + theme]" to="/">
+  <router-link class="app-logo" to="/">
     <img :src="require('@/assets/img/logo.png')">
     <div v-if="show" class="sidebar-title">{{ title }}</div>
   </router-link>
@@ -15,10 +15,6 @@ export default defineComponent({
     collapsed: {
       type: Boolean as PropType<boolean>,
       required: true
-    },
-    theme: {
-      type: String as PropType<'light' | 'dark'>,
-      default: 'dark'
     }
   },
   setup(props) {
@@ -47,31 +43,23 @@ export default defineComponent({
 .app-logo {
   display: flex;
   align-items: center;
-  padding-left: 18px;
   cursor: pointer;
   height: @topSilderHeight;
   width: 100%;
+  background-color: @menuBg;
   img {
     width: 37px;
     height: 37px;
+    margin-left: 14px;
   }
   .sidebar-title {
     font-size: 14px;
     font-weight: 700;
     transition: .5s;
     margin-left: 12px;
   }
-}
-.app-logo-dark {
-  background-color: @menuBg;
   .sidebar-title {
     color: #fff;
   }
 }
-.app-logo-light {
-  background-color: #fff;
-  .sidebar-title {
-    color: #000;
-  }
-}
 </style>

src/components/Screenfull/index.vue

@@ -1,12 +1,9 @@
 <template>
-  <a-tooltip placement="bottom">
-    <template #title>
-      <span>{{ isFullscreen ? '退出全屏' : '全屏' }}</span>
-    </template>
-    <div style="height: 100%;">
-      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
+  <el-tooltip placement="bottom" :content="isFullscreen ? '退出全屏' : '全屏'">
+    <div style="height: 100%;" class="screenfull-svg" @click="click">
+      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" />
     </div>
-  </a-tooltip>
+  </el-tooltip>
 </template>
 
 <script lang="ts">

src/components/ScrollPane/index.vue

@@ -1,25 +1,20 @@
 <template>
-  <scrollbar
+  <el-scrollbar
     ref="scrollContainer"
-    :show-x="false"
     class="scroll-container"
     @wheel="handleScroll"
   >
     <slot />
-  </scrollbar>
+  </el-scrollbar>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, unref, nextTick } from 'vue'
-import Scrollbar from '_c/Scrollbar/index.vue'
 import { useScrollTo } from '@/hooks/useScrollTo'
 const tagAndTagSpacing = 4 // tagAndTagSpacing
 
 export default defineComponent({
   name: 'ScrollPane',
-  components: {
-    Scrollbar
-  },
   setup() {
     const scrollContainer = ref<HTMLElement | null>(null)
 
@@ -112,11 +107,5 @@ export default defineComponent({
   position: relative;
   overflow: hidden;
   width: 100%;
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    // .el-scrollbar__wrap {
-    //   height: 49px;
-    // }
 }
 </style>