chore: detail optimization

src/components/CountTo/src/index.vue

@@ -5,7 +5,6 @@
 </template>
 <script lang="ts">
   import { defineComponent, reactive, computed, watch, onMounted, unref, toRef } from 'vue';
-
   import { countToProps } from './props';
   import { useRaf } from '/@/hooks/event/useRaf';
   import { isNumber } from '/@/utils/is';
@@ -37,12 +36,14 @@
         remaining: null,
         rAF: null,
       });
+
       onMounted(() => {
         if (props.autoplay) {
           start();
         }
         emit('mounted');
       });
+
       const getCountDown = computed(() => {
         return props.startVal > props.endVal;
       });
@@ -61,6 +62,7 @@
         state.paused = false;
         state.rAF = requestAnimationFrame(count);
       }
+
       function pauseResume() {
         if (state.paused) {
           resume();
@@ -70,6 +72,7 @@
           state.paused = true;
         }
       }
+
       function pause() {
         cancelAnimationFrame(state.rAF);
       }

src/components/Menu/src/BasicMenu.tsx

@@ -7,7 +7,7 @@ import { Menu } from 'ant-design-vue';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { menuStore } from '/@/store/modules/menu';
 import { getSlot } from '/@/utils/helper/tsxHelper';
-import { ScrollContainer } from '/@/components/Container/index';
+// import { ScrollContainer } from '/@/components/Container/index';
 import SearchInput from './SearchInput.vue';
 import './index.less';
 import { menuHasChildren } from './helper';
@@ -67,6 +67,7 @@ export default defineComponent({
       return {
         height: `calc(100% - ${offset}px)`,
         position: 'relative',
+        overflow: 'auto',
       };
     });
 
@@ -246,8 +247,9 @@ export default defineComponent({
             onClick={handleInputClick}
             collapsed={getCollapsedState}
           />
-          <section style={unref(getMenuWrapStyle)}>
-            <ScrollContainer>{() => renderMenu()}</ScrollContainer>
+          <section style={unref(getMenuWrapStyle)} class="basic-menu__wrap">
+            {renderMenu()}
+            {/* <ScrollContainer>{() => renderMenu()}</ScrollContainer> */}
           </section>
         </section>
       );

src/components/Menu/src/index.less

@@ -14,6 +14,30 @@
 }
 
 .basic-menu {
+  &__wrap {
+    /* 滚动槽 */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    // TODO 滚动条样式-待修改
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0);
+    }
+
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: @border-color-dark;
+    }
+  }
+
   .ant-menu-submenu:first-of-type {
     margin-top: 4px;
   }
@@ -95,14 +119,14 @@
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
           background: @top-menu-active-bg-color;
-          border-radius: 6px 6px 0 0;
+          // border-radius: 6px 6px 0 0;
         }
 
         .basic-menu-item__level1 {
           &.ant-menu-item-selected,
           &.ant-menu-submenu-selected {
             background: @top-menu-active-bg-color;
-            border-radius: 6px 6px 0 0;
+            // border-radius: 6px 6px 0 0;
           }
         }
 
@@ -148,6 +172,10 @@
     }
 
     .basic-menu-item__level1 {
+      > .ant-menu-sub > li {
+        background-color: @sub-menu-item-dark-bg-color;
+      }
+
       margin-bottom: 0;
 
       &.top-active-menu {
@@ -179,7 +207,7 @@
 
     .ant-menu-submenu-title {
       height: @app-menu-item-height;
-      margin: 0;
+      // margin: 0;
       line-height: @app-menu-item-height;
     }
   }