perf: layout code adjustment

vben
1 parent 4ff6b73c
Showing 22 changed files with 387 additions and 421 deletions
src/layouts/default/LayoutContent.tsx
src/layouts/default/LayoutSideBar.tsx
src/layouts/default/LayoutBreadcrumb.tsx → src/layouts/default/header/LayoutBreadcrumb.tsx
src/layouts/default/LayoutHeader.tsx → src/layouts/default/header/LayoutHeader.tsx
src/layouts/default/actions/LockActionItem.less → src/layouts/default/header/LockActionItem.less
src/layouts/default/actions/LockActionItem.tsx → src/layouts/default/header/LockActionItem.tsx
src/layouts/default/UserDropdown.tsx → src/layouts/default/header/UserDropdown.tsx
src/layouts/default/header/index.less
src/layouts/default/actions/notice/NoticeActionItem.vue → src/layouts/default/header/notice/NoticeActionItem.vue
src/layouts/default/actions/notice/NoticeList.vue → src/layouts/default/header/notice/NoticeList.vue
src/layouts/default/actions/notice/data.ts → src/layouts/default/header/notice/data.ts
src/layouts/default/index.less
src/layouts/default/index.tsx
src/layouts/default/LayoutMenu.tsx → src/layouts/default/menu/LayoutMenu.tsx
src/layouts/default/menu/index.less
src/layouts/default/multitabs/TabContent.tsx
src/layouts/default/multitabs/index.less
src/layouts/default/multitabs/index.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/index.less
-import { defineComponent } from 'vue';
+import { computed, defineComponent, unref } from 'vue';
 import { Layout } from 'ant-design-vue';
+import { FullLoading } from '/@/components/Loading/index';
+
 import { RouterView } from 'vue-router';
 import { ContentEnum } from '/@/enums/appEnum';
@@ -7,14 +9,24 @@ import { appStore } from &#39;/@/store/modules/app&#39;;
 export default defineComponent({
   name: 'DefaultLayoutContent',
   setup() {
+    const getProjectConfigRef = computed(() => {
+      return appStore.getProjectConfig;
+    });
+
     return () => {
-      const { getProjectConfig } = appStore;
-      const { contentMode } = getProjectConfig;
+      const { contentMode, openPageLoading } = unref(getProjectConfigRef);
+      const { getPageLoading } = appStore;
+
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
-        <Layout.Content class={`layout-content ${wrapClass} `}>
-          {() => <RouterView />}
-        </Layout.Content>
+        <div class={[`default-layout__main`]}>
+          {openPageLoading && (
+            <FullLoading class={[`default-layout__loading`, !getPageLoading && 'hidden']} />
+          )}
+          <Layout.Content class={`layout-content ${wrapClass} `}>
+            {() => <RouterView />}
+          </Layout.Content>
+        </div>
       );
     };
   },
@@ -2,13 +2,15 @@ import { computed, defineComponent, nextTick, onMounted, ref, unref } from &#39;vue&#39;
 import { Layout } from 'ant-design-vue';
 import LayoutTrigger from './LayoutTrigger';
-import { menuStore } from '/@/store/modules/menu';
+import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
+import { menuStore } from '/@/store/modules/menu';
 import { appStore } from '/@/store/modules/app';
+
 import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+
 import { useDebounce } from '/@/hooks/core/useDebounce';
-import LayoutMenu from './LayoutMenu';
 export default defineComponent({
   name: 'DefaultLayoutSideBar',
@@ -111,13 +113,6 @@ export default defineComponent({
       brokenRef.value = broken;
     }
-    onMounted(() => {
-      nextTick(() => {
-        const [exec] = useDebounce(changeWrapWidth, 20);
-        exec();
-      });
-    });
-
     const getDragBarStyle = computed(() => {
       if (menuStore.getCollapsedState) {
         return { left: `${unref(getMiniWidth)}px` };
@@ -136,6 +131,13 @@ export default defineComponent({
       return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
     });
+    onMounted(() => {
+      nextTick(() => {
+        const [exec] = useDebounce(changeWrapWidth, 20);
+        exec();
+      });
+    });
+
     function handleSiderClick(e: ChangeEvent) {
       if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
 import { defineComponent, unref, computed, ref } from 'vue';
 import { Layout, Tooltip, Badge } from 'ant-design-vue';
-import Logo from '/@/layouts/Logo.vue';
+import Logo from '/@/layouts/logo/index.vue';
 import UserDropdown from './UserDropdown';
-import LayoutMenu from './LayoutMenu';
+import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
 import LayoutBreadcrumb from './LayoutBreadcrumb';
-import LockAction from './actions/LockActionItem';
-import LayoutTrigger from './LayoutTrigger';
-import NoticeAction from './actions/notice/NoticeActionItem.vue';
+import LockAction from './LockActionItem';
+import LayoutTrigger from '../LayoutTrigger';
+import NoticeAction from './notice/NoticeActionItem.vue';
 import {
   RedoOutlined,
   FullscreenExitOutlined,
@@ -28,6 +28,8 @@ import { errorStore } from &#39;/@/store/modules/error&#39;;
 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { GITHUB_URL } from '/@/settings/siteSetting';
+
+import './index.less';
 export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {
@@ -39,8 +39,7 @@ export default defineComponent({
     function handleMenuClick(e: any) {
       if (e.key === 'loginOut') {
         handleLoginOut();
-      }
-      if (e.key === 'doc') {
+      } else if (e.key === 'doc') {
         openDoc();
       }
     }
+@import (reference) '../../../design/index.less';
+
+.layout-header {
+  display: flex;
+  height: @header-height;
+  padding: 0 20px 0 0;
+  line-height: @header-height;
+  color: @white;
+  background: @white;
+  align-items: center;
+  justify-content: space-between;
+
+  &__left {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+
+    .layout-trigger {
+      padding: 4px 10px 0 16px;
+      cursor: pointer;
+
+      .anticon {
+        font-size: 17px;
+      }
+
+      &.light {
+        &:hover {
+          background: @header-light-bg-hover-color;
+        }
+
+        svg {
+          fill: #000;
+        }
+      }
+
+      &.dark {
+        &:hover {
+          background: @header-dark-bg-hover-color;
+        }
+      }
+    }
+
+    .layout-breadcrumb {
+      padding: 0 8px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  &__header--light {
+    background: @white;
+    border-bottom: 1px solid @header-light-bottom-border-color;
+
+    .layout-header__menu {
+      height: calc(@header-height - 1px);
+
+      .ant-menu-submenu {
+        height: @header-height;
+        line-height: @header-height;
+      }
+    }
+
+    .layout-header__logo {
+      height: @header-height;
+      color: @text-color-base;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+        margin-right: 6px;
+      }
+
+      &:hover {
+        background: @header-light-bg-hover-color;
+      }
+    }
+
+    .layout-header__action {
+      &-item {
+        &:hover {
+          background: @header-light-bg-hover-color;
+        }
+      }
+
+      &-icon {
+        color: @text-color-base;
+      }
+    }
+
+    .layout-header__user-dropdown {
+      &:hover {
+        background: @header-light-bg-hover-color;
+      }
+    }
+
+    .user-dropdown {
+      &__name {
+        color: @text-color-base;
+      }
+
+      &__desc {
+        color: @header-light-desc-color;
+      }
+    }
+  }
+
+  &__header--dark {
+    background: @header-dark-bg-color;
+
+    .layout-header__action {
+      &-item {
+        &:hover {
+          background: @header-dark-bg-hover-color;
+        }
+      }
+    }
+
+    .layout-header__logo {
+      height: @header-height;
+
+      img {
+        width: @logo-width;
+        height: @logo-width;
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background: @header-dark-bg-hover-color;
+      }
+    }
+
+    .layout-header__user-dropdown {
+      &:hover {
+        background: @header-dark-bg-hover-color;
+      }
+    }
+
+    .breadcrumb {
+      &__item:last-child .breadcrumb__inner,
+      &__item:last-child &__inner a,
+      &__item:last-child &__inner a:hover,
+      &__item:last-child &__inner:hover {
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        cursor: text;
+      }
+
+      &__inner,
+      &__separator {
+        color: @white;
+      }
+    }
+  }
+
+  &__logo {
+    padding: 0 10px;
+  }
+
+  &__bread {
+    display: none;
+    flex: 1;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      display: flex;
+      height: @header-height;
+      padding: 0 2px;
+      font-size: 1.2em;
+      cursor: pointer;
+      align-items: center;
+    }
+
+    &-icon {
+      padding: 0 8px;
+    }
+  }
+
+  &__menu {
+    margin-left: 20px;
+    overflow: hidden;
+    align-items: center;
+  }
+
+  &__user-dropdown {
+    height: @header-height;
+    padding: 0 0 0 10px;
+  }
+
+  .user-dropdown {
+    display: flex;
+    padding-right: 10px;
+    font-size: 12px;
+    cursor: pointer;
+    align-items: center;
+
+    img {
+      width: 26px;
+      height: 26px;
+      margin-right: 12px;
+    }
+
+    &__header {
+      border-radius: 50%;
+    }
+  }
+}
@@ -30,7 +30,6 @@
   .layout-content {
     position: relative;
-    // height: 100%;
     &.fixed {
       width: 1200px;
@@ -38,30 +37,6 @@
     }
   }
-  .layout-menu {
-    &__logo {
-      height: @header-height;
-      padding: 10px 4px 10px 10px;
-
-      img {
-        width: @logo-width;
-        height: @logo-width;
-      }
-
-      &.light {
-        .logo-title {
-          color: @text-color-base;
-        }
-      }
-
-      &.dark {
-        .logo-title {
-          color: @white;
-        }
-      }
-    }
-  }
-
   .layout-sidebar {
     background-size: 100% 100%;
@@ -99,312 +74,6 @@
       }
     }
   }
-
-  &__tabs {
-    z-index: 10;
-    height: @multiple-height;
-    padding: 0;
-    line-height: @multiple-height;
-    background: @border-color-shallow-light;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.setting-drawer {
-  .ant-drawer-body {
-    padding-top: 0;
-    background: @white;
-  }
-
-  &__footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &__cell-item {
-    display: flex;
-    justify-content: space-between;
-    margin: 16px 0;
-  }
-
-  &__theme-item {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 16px 0;
-
-    span {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      margin-top: 10px;
-      margin-right: 10px;
-      cursor: pointer;
-      border-radius: 4px;
-
-      svg {
-        display: none;
-      }
-
-      &.active {
-        svg {
-          display: inline-block;
-          margin-left: 4px;
-          font-size: 0.8em;
-          fill: @white;
-        }
-      }
-    }
-  }
-
-  &__siderbar {
-    display: flex;
-
-    > div {
-      position: relative;
-
-      .check-icon {
-        position: absolute;
-        top: 40%;
-        left: 40%;
-        display: none;
-        color: @primary-color;
-
-        &.active {
-          display: inline-block;
-        }
-      }
-    }
-
-    img {
-      margin-right: 10px;
-      cursor: pointer;
-    }
-  }
-}
-
-.ant-layout-header:not(.default-layout__tabs) {
-  height: @header-height;
-  line-height: @header-height;
-}
-
-.ant-layout-header.default-layout__tabs {
-  height: @multiple-height + 2;
-  line-height: @multiple-height + 2;
-  background: @white;
-}
-
-.layout-header {
-  display: flex;
-  height: @header-height;
-  padding: 0 20px 0 0;
-  color: @white;
-  background: @white;
-  align-items: center;
-  justify-content: space-between;
-
-  &__content {
-    flex-grow: 1;
-    display: flex;
-    // justify-content: center;
-    align-items: center;
-  }
-
-  &__header--light {
-    background: @white;
-    border-bottom: 1px solid @header-light-bottom-border-color;
-
-    .layout-header__menu {
-      height: calc(@header-height - 1px);
-
-      .ant-menu-submenu {
-        height: @header-height;
-        line-height: @header-height;
-      }
-    }
-
-    .layout-header__logo {
-      height: @header-height;
-      color: @text-color-base;
-
-      img {
-        width: @logo-width;
-        height: @logo-width;
-        margin-right: 6px;
-      }
-
-      &:hover {
-        background: @header-light-bg-hover-color;
-      }
-    }
-
-    .layout-header__action {
-      &-item {
-        &:hover {
-          background: @header-light-bg-hover-color;
-        }
-      }
-
-      &-icon {
-        color: @text-color-base;
-      }
-    }
-
-    .layout-header__user-dropdown {
-      &:hover {
-        background: @header-light-bg-hover-color;
-      }
-    }
-
-    .user-dropdown {
-      &__name {
-        color: @text-color-base;
-      }
-
-      &__desc {
-        color: @header-light-desc-color;
-      }
-    }
-  }
-
-  &__header--dark {
-    background: @header-dark-bg-color;
-
-    .layout-header__action {
-      &-item {
-        &:hover {
-          background: @header-dark-bg-hover-color;
-        }
-      }
-    }
-
-    .layout-header__logo {
-      height: @header-height;
-
-      img {
-        width: @logo-width;
-        height: @logo-width;
-        margin-right: 10px;
-      }
-
-      &:hover {
-        background: @header-dark-bg-hover-color;
-      }
-    }
-
-    .layout-header__user-dropdown {
-      &:hover {
-        background: @header-dark-bg-hover-color;
-      }
-    }
-
-    .breadcrumb {
-      &__item:last-child .breadcrumb__inner,
-      &__item:last-child &__inner a,
-      &__item:last-child &__inner a:hover,
-      &__item:last-child &__inner:hover {
-        font-weight: 400;
-        color: rgba(255, 255, 255, 0.6);
-        cursor: text;
-      }
-
-      &__inner,
-      &__separator {
-        color: @white;
-      }
-    }
-  }
-
-  &__logo {
-    padding: 0 10px;
-  }
-
-  &__bread {
-    flex: 1;
-    display: none;
-  }
-
-  &__action {
-    display: flex;
-    align-items: center;
-
-    &-item {
-      display: flex;
-      align-items: center;
-      height: @header-height;
-      padding: 0 2px;
-      font-size: 1.2em;
-      cursor: pointer;
-    }
-
-    &-icon {
-      padding: 0 8px;
-    }
-  }
-
-  &__menu {
-    margin-left: 20px;
-    overflow: hidden;
-    align-items: center;
-  }
-
-  &__user-dropdown {
-    height: @header-height;
-    padding: 0 0 0 10px;
-  }
-}
-
-.user-dropdown {
-  display: flex;
-  padding-right: 10px;
-  font-size: 12px;
-  cursor: pointer;
-  align-items: center;
-
-  img {
-    width: 26px;
-    height: 26px;
-    margin-right: 12px;
-  }
-
-  &__header {
-    border-radius: 50%;
-  }
-}
-
-.layout-header__left {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-
-  .layout-trigger {
-    padding: 4px 10px 0 16px;
-    cursor: pointer;
-
-    .anticon {
-      font-size: 17px;
-    }
-
-    &.light {
-      &:hover {
-        background: @header-light-bg-hover-color;
-      }
-
-      svg {
-        fill: #000;
-      }
-    }
-
-    &.dark {
-      &:hover {
-        background: @header-dark-bg-hover-color;
-      }
-    }
-  }
-
-  .layout-breadcrumb {
-    padding: 0 8px;
-  }
 }
 .ant-layout-sider-trigger {
 import { defineComponent, unref, computed } from 'vue';
 import { Layout, BackTop } from 'ant-design-vue';
-import LayoutHeader from './LayoutHeader';
+import LayoutHeader from './header/LayoutHeader';
 import { appStore } from '/@/store/modules/app';
 import LayoutContent from './LayoutContent';
 import LayoutSideBar from './LayoutSideBar';
 import SettingBtn from './setting/index.vue';
 import MultipleTabs from './multitabs/index';
-import { FullLoading } from '/@/components/Loading/index';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 import { useFullContent } from '/@/hooks/web/useFullContent';
@@ -63,9 +62,8 @@ export default defineComponent({
     }
     return () => {
-      const { getPageLoading, getLockInfo } = appStore;
+      const { getLockInfo } = appStore;
       const {
-        openPageLoading,
         useOpenBackTop,
         showSettingButton,
         multiTabsSetting: { show: showTabs },
@@ -84,14 +82,17 @@ export default defineComponent({
         <Layout class="default-layout relative">
           {() => (
             <>
+              {/* lock page */}
               {isLock && <LockPage />}
+              {/* back top */}
+              {useOpenBackTop && <BackTop target={getTarget} />}
+              {/* open setting drawer */}
+              {showSettingButton && <SettingBtn />}
               {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && (
                 <LayoutHeader />
               )}
-              {showSettingButton && <SettingBtn />}
-
               <Layout>
                 {() => (
                   <>
@@ -103,22 +104,9 @@ export default defineComponent({
                             !unref(isShowMixHeaderRef) &&
                             unref(showHeaderRef) && <LayoutHeader />}
-                          {showTabs && !unref(getFullContent) && (
-                            <Layout.Header class={`default-layout__tabs`}>
-                              {() => <MultipleTabs />}
-                            </Layout.Header>
-                          )}
-
-                          {useOpenBackTop && <BackTop target={getTarget} />}
-
-                          <div class={[`default-layout__main`, fixedHeaderCls]}>
-                            {openPageLoading && (
-                              <FullLoading
-                                class={[`default-layout__loading`, !getPageLoading && 'hidden']}
-                              />
-                            )}
-                            <LayoutContent />
-                          </div>
+                          {showTabs && !unref(getFullContent) && <MultipleTabs />}
+
+                          <LayoutContent class={fixedHeaderCls} />
                         </>
                       )}
                     </Layout>
@@ -3,7 +3,7 @@ import type { Menu } from &#39;/@/router/types&#39;;
 import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue';
 import { BasicMenu } from '/@/components/Menu/index';
-import Logo from '/@/layouts/Logo.vue';
+import Logo from '/@/layouts/logo/index.vue';
 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
@@ -22,10 +22,8 @@ import {
 import { useRouter } from 'vue-router';
 import { useThrottle } from '/@/hooks/core/useThrottle';
 import { permissionStore } from '/@/store/modules/permission';
-// import { useTabs } from '/@/hooks/web/useTabs';
-// import { PageEnum } from '/@/enums/pageEnum';
-// import
+import './index.less';
 export default defineComponent({
   name: 'DefaultLayoutMenu',
   props: {
+@import (reference) '../../../design/index.less';
+
+.layout-menu {
+  &__logo {
+    height: @header-height;
+    padding: 10px 4px 10px 10px;
+
+    img {
+      width: @logo-width;
+      height: @logo-width;
+    }
+
+    &.light {
+      .logo-title {
+        color: @text-color-base;
+      }
+    }
+
+    &.dark {
+      .logo-title {
+        color: @white;
+      }
+    }
+  }
+}
-import { TabItem, tabStore } from '/@/store/modules/tab';
+import { defineComponent, unref, computed } from 'vue';
+
 import type { PropType } from 'vue';
+
+import { TabItem, tabStore } from '/@/store/modules/tab';
 import { getScaleAction, TabContentProps } from './tab.data';
-import { defineComponent, unref, computed } from 'vue';
 import { Dropdown } from '/@/components/Dropdown/index';
 import Icon from '/@/components/Icon/index';
 import { RightOutlined } from '@ant-design/icons-vue';
 @import (reference) '../../../design/index.less';
 .multiple-tabs {
+  z-index: 10;
+  height: @multiple-height+2;
+  padding: 0 0 2px 0;
+  line-height: @multiple-height+2;
+  background: @white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+
   .ant-tabs-small {
     height: @multiple-height;
   }
@@ -63,8 +70,8 @@
         }
         svg {
-          fill: @white;
           width: 0.7em;
+          fill: @white;
         }
       }
     }
@@ -34,20 +34,7 @@ export default defineComponent({
     let isAddAffix = false;
     const go = useGo();
     const { currentRoute } = useRouter();
-    const {
-      // addTab,
-      activeKeyRef,
-    } = useTabs();
-    // onMounted(() => {
-    // const route = unref(currentRoute);
-    // addTab(unref(currentRoute).path as PageEnum, false, {
-    //   query: route.query,
-    //   params: route.params,
-    // });
-    // });
-
-    // 当前激活tab
-    // const activeKeyRef = ref<string>('');
+    const { activeKeyRef } = useTabs();
     // 当前tab列表
     const getTabsState = computed(() => {
@@ -67,21 +54,9 @@ export default defineComponent({
         if (activeKeyRef.value !== (fullPath || rPath)) {
           activeKeyRef.value = fullPath || rPath;
         }
-        // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
-        // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
         tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
-
-        // const { affix } = currentRoute.value.meta || {};
-        // if (affix) return;
-        // const hasInTab = tabStore.getTabsState.some(
-        //   (item) => item.fullPath === currentRoute.value.fullPath
-        // );
-        // if (!hasInTab) {
-        //   tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
-        // }
       },
       {
-        // flush: 'post',
         immediate: true,
       }
     );
@@ -226,7 +226,13 @@ export default defineComponent({
           def: collapsedShowTitle,
           disabled: !unref(getShowMenuRef) || !collapsed,
         }),
-
+        renderSwitchItem('固定header', {
+          handler: (e) => {
+            baseHandler(HandlerEnum.HEADER_FIXED, e);
+          },
+          def: fixed,
+          disabled: !unref(getShowHeaderRef),
+        }),
         renderSelectItem('顶部菜单布局', {
           handler: (e) => {
             baseHandler(HandlerEnum.MENU_TOP_ALIGN, e);
@@ -242,13 +248,7 @@ export default defineComponent({
           def: trigger,
           options: menuTriggerOptions,
         }),
-        renderSwitchItem('固定header', {
-          handler: (e) => {
-            baseHandler(HandlerEnum.HEADER_FIXED, e);
-          },
-          def: fixed,
-          disabled: !unref(getShowHeaderRef),
-        }),
+
         renderSelectItem('内容区域宽度', {
           handler: (e) => {
             baseHandler(HandlerEnum.CONTENT_MODE, e);
+.setting-drawer {
+  .ant-drawer-body {
+    padding-top: 0;
+    background: @white;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__cell-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+
+  &__theme-item {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 16px 0;
+
+    span {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-top: 10px;
+      margin-right: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      svg {
+        display: none;
+      }
+
+      &.active {
+        svg {
+          display: inline-block;
+          margin-left: 4px;
+          font-size: 0.8em;
+          fill: @white;
+        }
+      }
+    }
+  }
+
+  &__siderbar {
+    display: flex;
+
+    > div {
+      position: relative;
+
+      .check-icon {
+        position: absolute;
+        top: 40%;
+        left: 40%;
+        display: none;
+        color: @primary-color;
+
+        &.active {
+          display: inline-block;
+        }
+      }
+    }
+
+    img {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+}
@@ -23,8 +23,9 @@
     },
   });
 </script>
-<style lang="less" scoped>
+<style lang="less">
   @import (reference) '../../../design/index.less';
+  @import './index.less';
   .setting-button {
     position: absolute;
@@ -12,10 +12,10 @@
   import { useGo } from '/@/hooks/web/usePage';
   import { PageEnum } from '/@/enums/pageEnum';
-  import { MenuTypeEnum } from '../enums/menuEnum';
+  import { MenuTypeEnum } from '/@/enums/menuEnum';
-  import { menuStore } from '../store/modules/menu';
-  import { appStore } from '../store/modules/app';
+  import { menuStore } from '/@/store/modules/menu';
+  import { appStore } from '/@/store/modules/app';
   export default defineComponent({
     name: 'Logo',
@@ -72,7 +72,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @import (reference) '../design/index.less';
+  @import (reference) '../../design/index.less';
   .app-logo {
     display: flex;