更新V3.13.0版本:【新增】顶部菜单模式;【优化】因kaptcha有漏洞，弃用;【优化】三级等保默认值

smart-admin-web-javascript/src/layout/components/header-user-space/header-setting.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <a-drawer :title="$t('setting.title')" placement="right" :open="visible" @close="close">
+  <a-drawer :title="$t('setting.title')" placement="right" :width="410" :open="visible" @close="close">
     <a-form layout="horizontal" :label-col="{ span: 8 }">
       <a-form-item label="语言/Language">
         <a-select v-model:value="formState.language" @change="changeLanguage" style="width: 120px">

smart-admin-web-javascript/src/layout/components/top-expand-menu/index.vue

@@ -0,0 +1,72 @@
+<!--
+  * 展开菜单
+  * 
+  * @Author:    1024创新实验室-主任：卓大 
+  * @Date:      2022-09-06 20:29:12 
+  * @Wechat:    zhuda1024 
+  * @Email:     lab1024@163.com 
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
+-->
+<template>
+  <div class="menu-container">
+    <!-- 顶部导航：取自菜单管理中第一级菜单，建议一级菜单都设为目录 -->
+    <TopMenu ref="topMenuRef" :collapsed="collapsed" class="top-menu" />
+    <!-- 左侧导航：通过在一级菜单下建立页面或目录实现菜单分组 -->
+    <RecursionMenu :collapsed="collapsed" ref="recursionMenuRef" class="recursion-menu" />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import RecursionMenu from './recursion-menu.vue';
+import TopMenu from './top-menu.vue';
+import { useUserStore } from '/@/store/modules/system/user';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+  collapsed: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+// 选中的顶级菜单
+const topMenuRef = ref();
+// 二级菜单引用
+const recursionMenuRef = ref();
+
+let currentRoute = useRoute();
+
+
+// 根据路由更新菜单展开和选中状态
+function updateSelectKeyAndOpenKey() {
+  // 第一步，根据路由 更新选中 顶级菜单
+  let parentList = useUserStore().menuParentIdListMap.get(currentRoute.name) || [];
+  console.log('parentList', parentList)
+  if (parentList.length === 0) {
+    topMenuRef.value.updateSelectKey(currentRoute.name);
+    return;
+  }
+  topMenuRef.value.updateSelectKey(parentList[0].name);
+
+  //第二步，根据路由 更新 二级菜单的selectKey和openKey
+  recursionMenuRef.value.updateSelectKeyAndOpenKey(parentList, currentRoute.name);
+}
+
+onMounted(updateSelectKeyAndOpenKey);
+
+//监听路由的变化，进行更新菜单展开项目
+watch(currentRoute, () => {
+  updateSelectKeyAndOpenKey();
+});
+</script>
+<style scoped lang="less">
+.menu-container {
+  height: 100%;
+  position: relative;
+}
+</style>

smart-admin-web-javascript/src/layout/components/top-expand-menu/recursion-menu.vue

@@ -0,0 +1,168 @@
+<!--
+  * 递归菜单
+  * 
+  * @Author:    1024创新实验室-主任：卓大 
+  * @Date:      2022-09-06 20:29:12 
+  * @Wechat:    zhuda1024 
+  * @Email:     lab1024@163.com 
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
+-->
+<template>
+  <div class="recursion-container" v-show="topMenu.children && topMenu.children.length > 0">
+    <!-- 顶部logo区域 -->
+    <div class="logo" @click="onGoHome" :style="sideMenuWidth" v-if="!collapsed">
+      <img class="logo-img" :src="logoImg" />
+      <div class="title smart-logo title-light" v-if="isLight">{{ websiteName }}</div>
+      <div class="title smart-logo title-dark" v-if="!isLight">{{ websiteName }}</div>
+    </div>
+    <div class="min-logo" @click="onGoHome" v-if="collapsed">
+      <img class="logo-img" :src="logoImg" />
+    </div>
+    <!-- 次级菜单展示 -->
+    <a-menu :selectedKeys="selectedKeys" :theme="theme" :openKeys="openKeys" mode="inline">
+      <template v-for="item in topMenu.children" :key="item.menuId">
+        <template v-if="item.visibleFlag">
+          <template v-if="$lodash.isEmpty(item.children)">
+            <a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
+              <template #icon v-if="item.icon">
+                <component :is="$antIcons[item.icon]" />
+              </template>
+              {{ item.menuName }}
+            </a-menu-item>
+          </template>
+          <template v-else>
+            <SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
+          </template>
+        </template>
+      </template>
+    </a-menu>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue';
+import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+import SubMenu from './sub-menu.vue';
+import { router } from '/@/router';
+import _ from 'lodash';
+import menuEmitter from './top-expand-menu-mitt';
+import { useAppConfigStore } from '/@/store/modules/system/app-config';
+import { useUserStore } from '/@/store/modules/system/user';
+import logoImg from '/@/assets/images/logo/smart-admin-logo.png';
+
+const websiteName = computed(() => useAppConfigStore().websiteName);
+const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
+
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 选中的顶级菜单
+let topMenu = ref({});
+menuEmitter.on('selectTopMenu', onSelectTopMenu);
+
+// 监听选中顶级菜单事件
+function onSelectTopMenu(selectedTopMenu) {
+  topMenu.value = selectedTopMenu;
+  if (selectedTopMenu.children && selectedTopMenu.children.length > 0) {
+    openKeys.value = _.map(selectedTopMenu.children, 'menuId').map((e) => e.toString());
+  } else {
+    openKeys.value = [];
+  }
+  selectedKeys.value = [];
+}
+
+//展开的菜单
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+
+function updateSelectKeyAndOpenKey(parentList, currentSelectKey) {
+  if (!parentList) {
+    return;
+  }
+  //获取需要展开的menu key集合
+  openKeys.value = _.map(parentList, 'name');
+  selectedKeys.value = [currentSelectKey];
+}
+
+// 页面跳转
+function turnToPage(route) {
+  useUserStore().deleteKeepAliveIncludes(route.menuId.toString());
+  router.push({ name: route.menuId.toString() });
+}
+
+function onGoHome() {
+  router.push({ name: HOME_PAGE_NAME });
+}
+
+defineExpose({ updateSelectKeyAndOpenKey });
+
+const isLight = computed(() => useAppConfigStore().$state.sideMenuTheme === 'light');
+const color = computed(() => {
+  let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
+  return {
+    background: isLight ? '#FFFFFF' : '#001529',
+  };
+});
+</script>
+<style scoped lang="less">
+.recursion-container {
+  height: 100%;
+  background-color: v-bind('color.background');
+}
+
+  .min-logo {
+    height: @header-user-height;
+    line-height: @header-user-height;
+    padding: 0px 15px 0px 15px;
+    // background-color: v-bind('color.background');
+
+    width: 80px;
+    z-index: 21;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .logo-img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+.top-menu {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: @header-user-height;
+  font-size: 16px;
+  color: #515a6e;
+  border-bottom: 1px solid #f3f3f3;
+  border-right: 1px solid #f3f3f3;
+}
+.logo {
+  height: @header-user-height;
+  line-height: @header-user-height;
+  padding: 0px 15px 0px 15px;
+  width: 100%;
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .logo-img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+    color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+  }
+}
+</style>

smart-admin-web-javascript/src/layout/components/top-expand-menu/sub-menu.vue

@@ -0,0 +1,46 @@
+<!--
+  * 第二列菜单区域
+  * 
+  * @Author:    1024创新实验室-主任：卓大 
+  * @Date:      2022-09-06 20:29:12 
+  * @Wechat:    zhuda1024 
+  * @Email:     lab1024@163.com 
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
+-->
+<template>
+  <a-sub-menu :key="props.menuInfo.menuId.toString()">
+    <template #icon>
+      <component :is="$antIcons[props.menuInfo.icon]" />
+    </template>
+    <template #title>{{ props.menuInfo.menuName }}</template>
+    <template v-for="item in props.menuInfo.children" :key="item.menuId">
+      <template v-if="item.visibleFlag">
+        <template v-if="!item.children">
+          <a-menu-item :key="item.menuId.toString()" @click="turnToPage(item)">
+            <template #icon>
+              <component :is="$antIcons[item.icon]" />
+            </template>
+            {{ item.menuName }}
+          </a-menu-item>
+        </template>
+        <template v-else>
+          <SubMenu :menu-info="item" :key="item.menuId" @turnToPage="turnToPage" />
+        </template>
+      </template>
+    </template>
+  </a-sub-menu>
+</template>
+<script setup>
+  let props = defineProps({
+    menuInfo: Object,
+  });
+  const emits = defineEmits(['turnToPage']);
+  const turnToPage = (route) => {
+    emits('turnToPage', route);
+  };
+</script>
+<style scoped lang="less">
+  ::v-deep(.ant-menu-item-selected) {
+    border-right: 3px !important;
+  }
+</style>

smart-admin-web-javascript/src/layout/components/top-expand-menu/top-expand-menu-mitt.js

@@ -0,0 +1,11 @@
+/*
+ * 展开菜单 event bus
+ *
+ * @Author:    1024创新实验室-主任：卓大
+ * @Date:      2022-07-12 23:32:48
+ * @Wechat:    zhuda1024
+ * @Email:     lab1024@163.com
+ * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
+ */
+import mitt from 'mitt';
+export default mitt();

smart-admin-web-javascript/src/layout/components/top-expand-menu/top-menu.vue

@@ -0,0 +1,147 @@
+<!--
+  * 第一列菜单
+  *
+  * @Author:    1024创新实验室-主任：卓大
+  * @Date:      2022-09-06 20:29:12
+  * @Wechat:    zhuda1024
+  * @Email:     lab1024@163.com
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
+-->
+<template>
+  <div class="top-menu-container">
+    <!-- 一级菜单展示 -->
+    <a-menu :selectedKeys="selectedKeys" mode="horizontal" :theme="theme">
+      <template v-for="item in menuTree" :key="item.menuId">
+        <template v-if="item.visibleFlag">
+          <a-menu-item :key="item.menuId.toString()" @click="onSelectMenu(item)">
+            <template #icon>
+              <component :is="$antIcons[item.icon]" />
+            </template>
+            {{ item.menuName }}
+          </a-menu-item>
+        </template>
+      </template>
+    </a-menu>
+  </div>
+</template>
+<script setup>
+import _ from 'lodash';
+import { computed, ref } from 'vue';
+import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
+import { router } from '/@/router';
+import { useAppConfigStore } from '/@/store/modules/system/app-config';
+import { useUserStore } from '/@/store/modules/system/user';
+
+import menuEmitter from './top-expand-menu-mitt';
+
+const websiteName = computed(() => useAppConfigStore().websiteName);
+const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
+const menuTree = computed(() => useUserStore().getMenuTree || []);
+
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+// 展开菜单的顶级目录名字适配，只展示两个字为好
+function menuNameAdapter(name) {
+  return name.substr(0, 2);
+}
+
+// 选中的顶级菜单
+const selectedKeys = ref([]);
+
+// 选中菜单，页面跳转
+function onSelectMenu(menuItem) {
+  selectedKeys.value = [menuItem.menuId.toString()];
+  if (menuItem.menuType === MENU_TYPE_ENUM.MENU.value && (_.isEmpty(menuItem.children) || menuItem.children.every((e) => !e.visibleFlag))) {
+    useUserStore().deleteKeepAliveIncludes(menuItem.menuId.toString());
+    router.push({ name: menuItem.menuId.toString() });
+  }
+  menuEmitter.emit('selectTopMenu', menuItem);
+}
+
+// 更新选中的菜单
+function updateSelectKey(key) {
+  selectedKeys.value = [key];
+  let selectMenu = _.find(menuTree.value, { menuId: Number(key) });
+  if (selectMenu) {
+    menuEmitter.emit('selectTopMenu', selectMenu);
+  }
+}
+
+defineExpose({ updateSelectKey });
+
+// 动态计算当前导航宽度
+let menuInfo = computed(() => {
+  let width = '100vw';
+  let right = '-100vw';
+  let selectedItem = _.find(menuTree.value, { menuId: Number(selectedKeys.value[0]) });
+  const hasSecoundMenu = selectedItem && !_.isEmpty(selectedItem.children) && selectedItem.children.some((e) => e.visibleFlag);
+  if (hasSecoundMenu) {
+    if (props.collapsed) {
+      width = 'calc(100vw - 80px)';
+      right = 'calc(-100vw + 80px)';
+    } else {
+      width = 'calc(100vw - 180px)';
+      right = 'calc(-100vw + 180px)';
+    }
+  }
+  return {
+    width,
+    right,
+  };
+});
+</script>
+<style scoped lang="less">
+.top-menu {
+  position: absolute;
+  transition: all 0.2s, background 0s;
+  top: 0;
+  right: v-bind('menuInfo.right');
+  width: v-bind('menuInfo.width');
+  flex-shrink: 0;
+}
+.ant-menu-dark {
+  background: #1677ff;
+  color: #fff;
+}
+.ant-menu-light {
+  background: #1677ff;
+  color: #fff;
+}
+::v-deep(.ant-menu-item-selected) {
+  background: #0958d9 !important;
+  color: #fff !important;
+}
+.top-menu-container {
+  height: 100%;
+}
+.logo {
+  height: @header-user-height;
+  line-height: @header-user-height;
+  padding: 0px 15px 0px 15px;
+  width: 100%;
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .logo-img {
+    width: 30px;
+    height: 30px;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+    color: v-bind('theme === "light" ? "#001529": "#ffffff"');
+  }
+}
+</style>

smart-admin-web-javascript/src/layout/index.vue

@@ -16,11 +16,14 @@
   <TopLayout v-if="layout === LAYOUT_ENUM.TOP.value" />
   <!--定期修改密码-->
   <RegularChangePasswordModal />
+  <!--顶部展开 模式-->
+  <TopExpandLayout v-if="layout === LAYOUT_ENUM.TOP_EXPAND.value" />
 </template>
 <script setup>
   import { computed } from 'vue';
   import { LAYOUT_ENUM } from '/@/constants/layout-const';
   import SideExpandLayout from './side-expand-layout.vue';
+  import TopExpandLayout from './top-expand-layout.vue';
   import SideLayout from './side-layout.vue';
   import TopLayout from './top-layout.vue';
   import { useAppConfigStore } from '/@/store/modules/system/app-config';

smart-admin-web-javascript/src/layout/top-expand-layout.vue

@@ -0,0 +1,279 @@
+<!--
+  *  展开菜单模式
+  * 
+  * @Author:    1024创新实验室-主任：卓大 
+  * @Date:      2022-09-06 20:40:16 
+  * @Wechat:    zhuda1024 
+  * @Email:     lab1024@163.com 
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
+-->
+<template>
+  <a-layout class="admin-layout" style="min-height: 100%">
+    <!-- 侧边菜单 side-menu -->
+    <a-layout-sider :theme="theme" class="side-menu" :collapsed="collapsed" :trigger="null">
+      <!-- 左侧菜单 -->
+      <TopExpandMenu :collapsed="collapsed" />
+    </a-layout-sider>
+
+    <!--中间内容，一共三部分：1、顶部;2、中间内容区域;3、底部（一般是公司版权信息）;-->
+    <a-layout class="admin-layout-main" :style="`height: ${windowHeight}px`" id="smartAdminMain">
+      <!-- 顶部头部信息 -->
+      <a-layout-header class="smart-layout-header">
+        <a-row justify="space-between" class="smart-layout-header-user">
+          <a-col class="smart-layout-header-left">
+            <span class="collapsed-button">
+              <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
+              <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
+            </span>
+            <a-tooltip placement="bottom">
+              <template #title>首页</template>
+              <span class="home-button" @click="goHome">
+                <home-outlined class="trigger" />
+              </span>
+            </a-tooltip>
+            <span class="location-breadcrumb">
+              <MenuLocationBreadcrumb />
+            </span>
+          </a-col>
+          <!---用戶操作区域-->
+          <a-col class="smart-layout-header-right">
+            <HeaderUserSpace />
+          </a-col>
+        </a-row>
+        <PageTag />
+      </a-layout-header>
+
+      <!--中间内容-->
+      <a-layout-content class="admin-layout-content" id="smartAdminLayoutContent">
+        <!--不keepAlive的iframe使用单个iframe组件-->
+        <IframeIndex v-show="iframeNotKeepAlivePageFlag" :key="route.name" :name="route.name" :url="route.meta.frameUrl" />
+        <!--keepAlive的iframe 每个页面一个iframe组件-->
+        <IframeIndex
+          v-for="item in keepAliveIframePages"
+          v-show="route.name == item.name"
+          :key="item.name"
+          :name="item.name"
+          :url="item.meta.frameUrl"
+        />
+        <!--非iframe使用router-view-->
+        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)">
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="keepAliveIncludes">
+              <component :is="Component" :key="route.name" />
+            </keep-alive>
+          </router-view>
+        </div>
+      </a-layout-content>
+      <!-- footer 版权公司信息 -->
+      <a-layout-footer class="smart-layout-footer" v-show="footerFlag"> <SmartFooter /></a-layout-footer>
+      <!---- 回到顶部 --->
+      <a-back-top :target="backTopTarget" :visibilityHeight="80" />
+    </a-layout>
+    <!-- 右侧帮助文档 help-doc -->
+    <a-layout-sider v-show="helpDocFlag" theme="light" :width="180" class="help-doc-sider" :trigger="null" style="min-height: 100%">
+      <SideHelpDoc />
+    </a-layout-sider>
+  </a-layout>
+</template>
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import HeaderUserSpace from './components/header-user-space/index.vue';
+import MenuLocationBreadcrumb from './components/menu-location-breadcrumb/index.vue';
+import PageTag from './components/page-tag/index.vue';
+import TopExpandMenu from './components/top-expand-menu/index.vue';
+import SmartFooter from './components/smart-footer/index.vue';
+import { smartKeepAlive } from './components/smart-keep-alive';
+import IframeIndex from '/@/components/framework/iframe/iframe-index.vue';
+import watermark from '../lib/smart-watermark';
+import { useAppConfigStore } from '/@/store/modules/system/app-config';
+import { useUserStore } from '/@/store/modules/system/user';
+import SideHelpDoc from './components/side-help-doc/index.vue';
+import { useRouter } from 'vue-router';
+import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
+
+const windowHeight = ref(window.innerHeight);
+
+//主题颜色
+const theme = computed(() => useAppConfigStore().$state.sideMenuTheme);
+//是否显示标签页
+const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
+// 是否显示帮助文档
+const helpDocFlag = computed(() => useAppConfigStore().$state.helpDocExpandFlag);
+// 是否显示页脚
+const footerFlag = computed(() => useAppConfigStore().$state.footerFlag);
+// 是否显示水印
+const watermarkFlag = computed(() => useAppConfigStore().$state.watermarkFlag);
+// 多余高度
+const dueHeight = computed(() => {
+  let due = 40;
+  if (useAppConfigStore().$state.pageTagFlag) {
+    due = due + 40;
+  }
+  if (useAppConfigStore().$state.footerFlag) {
+    due = due + 40;
+  }
+  return due;
+});
+//是否隐藏菜单
+const collapsed = ref(false);
+
+//页面初始化的时候加载水印
+onMounted(() => {
+  if (watermarkFlag.value) {
+    watermark.set('smartAdminLayoutContent', useUserStore().actualName);
+  } else {
+    watermark.clear();
+  }
+});
+
+watch(
+  () => watermarkFlag.value,
+  (newValue) => {
+    if (newValue) {
+      watermark.set('smartAdminLayoutContent', useUserStore().actualName);
+    } else {
+      watermark.clear();
+    }
+  }
+);
+
+window.addEventListener('resize', function () {
+  windowHeight.value = window.innerHeight;
+});
+
+//回到顶部
+const backTopTarget = () => {
+  return document.getElementById('smartAdminMain');
+};
+// ----------------------- keep-alive相关 -----------------------
+let { route, keepAliveIncludes, iframeNotKeepAlivePageFlag, keepAliveIframePages } = smartKeepAlive();
+const router = useRouter();
+function goHome() {
+  router.push({ name: HOME_PAGE_NAME });
+}
+</script>
+<style scoped lang="less">
+:deep(.ant-layout-header) {
+  height: auto;
+}
+:deep(.layout-header) {
+  height: auto;
+}
+
+.smart-layout-header {
+  background: #fff;
+  padding: 0;
+  z-index: 21;
+}
+
+.smart-layout-header-user {
+  height: @header-user-height;
+  border-bottom: 1px solid #f6f6f6;
+}
+
+.smart-layout-header-left {
+  display: flex;
+  height: @header-user-height;
+
+  .collapsed-button {
+    margin-left: 10px;
+    line-height: @header-user-height;
+  }
+
+  .home-button {
+    margin-left: 15px;
+    cursor: pointer;
+    padding: 0 5px;
+    line-height: @header-user-height;
+  }
+
+  .home-button:hover {
+    background-color: #efefef;
+  }
+
+  .location-breadcrumb {
+    margin-left: 15px;
+    line-height: @header-user-height;
+  }
+}
+
+.smart-layout-header-right {
+  display: flex;
+  height: @header-user-height;
+}
+
+.admin-layout {
+  .side-menu {
+    height: 100vh;
+    flex: 0 !important;
+    min-width: inherit !important;
+    max-width: none !important;
+    // width: auto !important;
+    &.fixed-side {
+      position: fixed;
+      height: 100vh;
+      left: 0;
+      top: 0;
+    }
+  }
+  .side-menu::-webkit-scrollbar {
+    width: 4px;
+  }
+  .side-menu::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .side-menu::-webkit-scrollbar-track {
+    border-radius: 0;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .help-doc-sider {
+    flex: 0 !important;
+    min-width: 100px;
+    height: 100vh;
+    max-width: 100px;
+    width: auto !important;
+    &.fixed-side {
+      position: fixed;
+      height: 100vh;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .virtual-side {
+    transition: all 0.2s;
+  }
+
+  .virtual-header {
+    transition: all 0.2s;
+    opacity: 0;
+
+    &.fixed-tabs.multi-page:not(.fixed-header) {
+      height: 0;
+    }
+  }
+
+  .admin-layout-main {
+    padding-top: 46px;
+    overflow-x: hidden;
+  }
+
+  .admin-layout-content {
+    background-color: inherit;
+    min-height: auto;
+    position: relative;
+    padding: 10px 10px 0px 10px;
+    height: calc(100% - v-bind(dueHeight) px);
+    overflow-x: hidden;
+  }
+}
+
+.smart-layout-footer {
+  position: relative;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
+</style>