🐞 fix(前端布局bug): 修复前端布局bug

tools/frontend/src/components/SettingDrawer/index.js

@@ -50,7 +50,7 @@ const SettingDrawer = {
       nextState.config = true;
       this.$store.commit('global/UpdateDefaultSettings', this.settings);
       this.$store.commit('global/UpdateDefaultSettings', nextState);
-      message.loading("正在编译主题！", 3);
+      message.loading("正在编译主题！", 1.5);
       this.$store.dispatch("global/defaultSettings", true);
 
     },
@@ -63,7 +63,8 @@ const SettingDrawer = {
   },
   render() {
     const { collapse } = this;
-    const { primaryColor, layout, navTheme } = this.settings;
+    const { primaryColor, layout, navTheme, contentWidth, fixedHeader, fixSiderbar, autoHideHeader } = this.settings;
+
     return (
       <Drawer
         title="界面设置"
@@ -135,7 +136,7 @@ const SettingDrawer = {
           <h3 class="setting-title">其它设置</h3>
           <div class="setting-item">
             <p>内容区域宽度</p>
-            <a-radio-group size="small" default-value="Fluid" button-style="solid" onChange={(e) => {
+            <a-radio-group value={contentWidth} size="small" default-value="Fluid" button-style="solid" onChange={(e) => {
               this.changeSetting("contentWidth", e.target.value);
             }}>
               <a-radio-button value="Fluid">
@@ -148,19 +149,19 @@ const SettingDrawer = {
           </div>
           <div class="setting-item">
             <p>固定HEADER</p>
-            <a-switch size="small" default-checked onChange={(e) => {
+            <a-switch checked={fixedHeader} size="small" onChange={(e) => {
                 this.changeSetting("fixedHeader", e);
               }} />
           </div>
           <div class="setting-item">
             <p>自动隐藏HEADER</p>
-            <a-switch size="small" default-checked onChange={(e) => {
+            <a-switch checked={autoHideHeader} size="small" onChange={(e) => {
                 this.changeSetting("autoHideHeader", e);
               }} />
           </div>
           <div class="setting-item">
             <p>固定侧边栏</p>
-            <a-switch size="small" default-checked onChange={(e) => {
+            <a-switch checked={fixSiderbar} size="small" onChange={(e) => {
                 this.changeSetting("fixSiderbar", e);
               }} />
           </div>

tools/frontend/src/components/SiderMenu/SiderMenu.vue

 <template>
-  <a-layout-sider v-model="collapsed" width="256" :class="`ai-sider-menu sider ${fixSiderbar?'fixSiderbar':'',settings.navTheme==='light'?'light':'dark'}`" :theme="settings.navTheme">
+  <a-layout-sider
+    v-model="collapsed"
+    width="256"
+    :class="[
+      'ai-sider-menu sider',
+      fixSiderbar ? 'fixSiderbar' : '',
+      settings.navTheme === 'light' ? 'light' : 'dark',
+    ]"
+    :theme="settings.navTheme"
+  >
     <div class="logo" key="logo" id="logo">
       <router-link to="/">
         <img :src="logo" alt="logo" />
         <h1>{{ settings.leftMenuTitle }}</h1>
       </router-link>
     </div>
-    <a-base-menu :collapsed="collapsed" :menuData="menuData" :theme="settings.navTheme" :layout="settings.layout" styles="padding: '16px 0'; width: '100%'"/>
+    <a-base-menu
+      :collapsed="collapsed"
+      :menuData="menuData"
+      :theme="settings.navTheme"
+      :layout="settings.layout"
+      styles="padding: '16px 0'; width: '100%'"
+    />
   </a-layout-sider>
 </template>
 
@@ -18,26 +33,32 @@ export default {
   props: {
     collapsed: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     fixSiderbar: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     menuData: {
       default: () => [],
-      type: Array
+      type: Array,
     },
-    logo: { type: String }
+    logo: { type: String },
   },
   computed: {
     ...mapGetters({
-      settings: "global/settings"
-    })
+      settings: "global/settings",
+    }),
+    siderStyle() {
+      let width = 256;
+      if (this.collapsed) width = 80;
+
+      return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;transition: all 0.2s;background: #001529;`;
+    },
   },
   components: {
     ALayoutSider: Layout.Sider,
-    ABaseMenu
+    ABaseMenu,
   },
 };
 </script>

tools/frontend/src/components/SiderMenu/index.less

@@ -35,6 +35,10 @@
   z-index: 10;
   &.fixSiderbar {
     position: fixed;
+    height: 100vh;
+    min-width: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
     top: 0;
     left: 0;
   }

tools/frontend/src/defaultSettings.js

 /*
  * @Author: your name
  * @Date: 2021-07-15 09:33:39
- * @LastEditTime: 2021-07-23 10:58:39
+ * @LastEditTime: 2021-07-23 15:56:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\tools\frontend\src\defaultSettings.js
@@ -9,7 +9,7 @@
 export default {
     navTheme: 'dark', // theme for nav menu
     primaryColor: '#1890FF', // primary color of ant design
-    layout: 'topmenu', // nav menu position: sidemenu or topmenu
+    layout: 'sidemenu', // nav menu position: sidemenu or topmenu
     contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
     fixedHeader: true, // sticky header
     autoHideHeader: false, // auto hide header

tools/frontend/src/layouts/BasicLayout.js

-import './BasicLayout.less'
+import "./BasicLayout.less";
 import { Layout } from "ant-design-vue";
-import pathToRegexp from 'path-to-regexp';
+import pathToRegexp from "path-to-regexp";
 import SiderMenu from "@/components/SiderMenu";
-import Header from './Header';
-import Footer from './Footer';
-import eventBus from '@/utils/eventBus.js'
+import Header from "./Header";
+import Footer from "./Footer";
+import eventBus from "@/utils/eventBus.js";
 import logo from "@/assets/app-store.svg";
 import { mapGetters } from "vuex";
 const BasicLayout = {
   data: () => ({
-        layout: 'topmenu',
-        logo
+    layout: "topmenu",
+    logo,
   }),
   methods: {
-        formatter(data, parentPath = '', parentName) {
-            return data.map(item => {
-                let locale = 'menu';
+    formatter(data, parentPath = "", parentName) {
+      return data.map((item) => {
+        let locale = "menu";
         if (parentName && item.name) {
           locale = `${parentName}.${item.name}`;
         } else if (item.name) {
@@ -25,11 +25,15 @@ const BasicLayout = {
         }
         const result = {
           ...item,
-                    locale
+          locale,
         };
 
         if (!item.leaf) {
-                    const menus = this.formatter(item.children, `${parentPath}${item.path}/`, locale);
+          const menus = this.formatter(
+            item.children,
+            `${parentPath}${item.path}/`,
+            locale
+          );
           // Reduce memory usage
           result.menus = menus;
         }
@@ -46,8 +50,8 @@ const BasicLayout = {
      */
     getBreadcrumbNameMap() {
       const routerMap = {};
-            const mergeMenuAndRouter = data => {
-                data.forEach(menuItem => {
+      const mergeMenuAndRouter = (data) => {
+        data.forEach((menuItem) => {
           if (menuItem.menus) {
             mergeMenuAndRouter(menuItem.menus);
           }
@@ -60,8 +64,8 @@ const BasicLayout = {
     },
 
     matchParamsPath(pathname) {
-            const breadcrumbNameMap = this.getBreadcrumbNameMap()
-            const pathKey = Object.keys(breadcrumbNameMap).find(key =>
+      const breadcrumbNameMap = this.getBreadcrumbNameMap();
+      const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
         pathToRegexp(key).test(pathname)
       );
       return breadcrumbNameMap[pathKey];
@@ -72,75 +76,87 @@ const BasicLayout = {
       if (!currRouterData) {
         return this.settings.leftMenuTitle;
       }
-            const message = this.$t(currRouterData.locale || currRouterData.name)
+      const message = this.$t(currRouterData.locale || currRouterData.name);
       return `${message} - ${this.settings.leftMenuTitle}`;
     },
     onResizeCollapsed() {
       if (window.innerWidth <= 900) {
-                this.$store.commit('global/UpdateChangeLayoutCollapsed', true)
+        this.$store.commit("global/UpdateChangeLayoutCollapsed", true);
       } else {
-                this.$store.commit('global/UpdateChangeLayoutCollapsed', false)
-            }
+        this.$store.commit("global/UpdateChangeLayoutCollapsed", false);
       }
     },
+  },
   computed: {
     ...mapGetters({
       collapsed: "global/getChangeLayoutCollapsed",
       settings: "global/settings",
-            menuNav: "global/nav/getMenuNav"
+      menuNav: "global/nav/getMenuNav",
     }),
     getContentStyle() {
       return {
-                margin: '24px 24px 0',
+        margin: "24px 24px 0",
         paddingTop: this.settings.fixedHeader ? 64 : 0,
-            }
+      };
+    },
+    getSiderShadow() {
+      let width = 256;
+      if (this.collapsed) width = 80;
+
+      return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;transition: all 0.2s;background: #001529;`;
     },
   },
   beforeRouteEnter(to, from, next) {
-        next(vm => {
+    next((vm) => {
       // 通过 `vm` 访问组件实例
-            document.title = vm.getPageTitle(to.path)
-        })
+      document.title = vm.getPageTitle(to.path);
+    });
   },
   beforeRouteUpdate(to, from, next) {
-        this.$store.commit('global/UpdateBasicLayoutSpinning', true)
-        document.title = this.getPageTitle(to.path)
+    this.$store.commit("global/UpdateBasicLayoutSpinning", true);
+    document.title = this.getPageTitle(to.path);
     this.$nextTick(() => {
       next();
-        })
+    });
   },
   mounted() {
-        this.$store.dispatch('global/nav/getMenuNav');
+    this.$store.dispatch("global/nav/getMenuNav");
 
-        this.onResizeCollapsed()
+    this.onResizeCollapsed();
 
     window.onresize = () => {
       // 通过捕获系统的onresize事件触发我们需要执行的事件
-            this.onResizeCollapsed()
-        }
+      this.onResizeCollapsed();
+    };
   },
   render() {
     const { collapsed, getContentStyle, logo } = this;
-        const { layout } = this.settings;
-        const isTop = layout === 'topmenu';
+    const { layout, fixedHeader, fixSiderbar } = this.settings;
+    const isTop = layout === "topmenu";
     const isMobile = false;
     const menuData = this.getMenuData();
-        eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap()
+    eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap();
     return (
       <Layout class="ai-basic-layout-container">
         {isTop && !isMobile ? null : (
-                    <SiderMenu collapsed={collapsed} menuData={menuData} logo={logo}/>
+          <SiderMenu
+            collapsed={collapsed}
+            fixSiderbar={fixSiderbar}
+            menuData={menuData}
+            logo={logo}
+          />
         )}
-
+        {fixSiderbar ? <div style={this.getSiderShadow}></div> : null}
         <Layout>
-                    <Header menuData={menuData} logo={logo}/>
+          <Header menuData={menuData} logo={logo} />
+          <div v-show={fixedHeader} style={{ width: "100%", height: "64px" }} />
           <Layout.Content style={getContentStyle}>
             <router-view />
           </Layout.Content>
           <Footer />
         </Layout>
       </Layout>
-        )
-    }
-}
-export default BasicLayout
\ No newline at end of file
+    );
+  },
+};
+export default BasicLayout;

tools/frontend/src/layouts/Header.js

@@ -27,12 +27,11 @@ const HeaderView = {
   },
   render() {
     const { menuData, logo } = this;
-    const { layout, navTheme, fixedHeader, leftMenuTitle } = this.settings;
+    const { layout, navTheme, leftMenuTitle } = this.settings;
     const isTop = layout === "topmenu";
     const isMobile = false;
 
     return (
-      <div>
       <Header style={this.headerStyle}>
         {isTop && !isMobile ? (
           // <TopNavHeader
@@ -64,8 +63,6 @@ const HeaderView = {
           <GlobalHeader theme={navTheme} layout={layout} />
         )}
       </Header>
-        <div v-show={fixedHeader} class="placeholder-element" />
-      </div>
     );
   },
 };