🐞 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
-    }),
-    methods: {
-        formatter(data, parentPath = '', parentName) {
-            return data.map(item => {
-                let locale = 'menu';
-                if (parentName && item.name) {
-                    locale = `${parentName}.${item.name}`;
-                } else if (item.name) {
-                    locale = `menu.${item.name}`;
-                } else if (parentName) {
-                    locale = parentName;
-                }
-                const result = {
-                    ...item,
-                    locale
-                };
-
-                if (!item.leaf) {
-                    const menus = this.formatter(item.children, `${parentPath}${item.path}/`, locale);
-                    // Reduce memory usage
-                    result.menus = menus;
-                }
-                delete result.children;
-                return result;
-            });
-        },
-        getMenuData() {
-            return this.formatter(this.menuNav.data);
-        },
-        /**
-         * 获取面包屑映射
-         * @param {Object} menuData 菜单配置
-         */
-        getBreadcrumbNameMap() {
-            const routerMap = {};
-            const mergeMenuAndRouter = data => {
-                data.forEach(menuItem => {
-                    if (menuItem.menus) {
-                        mergeMenuAndRouter(menuItem.menus);
-                    }
-                    // Reduce memory usage
-                    routerMap[menuItem.path] = menuItem;
-                });
-            };
-            mergeMenuAndRouter(this.getMenuData());
-            return routerMap;
-        },
-
-        matchParamsPath(pathname) {
-            const breadcrumbNameMap = this.getBreadcrumbNameMap()
-            const pathKey = Object.keys(breadcrumbNameMap).find(key =>
-                pathToRegexp(key).test(pathname)
-            );
-            return breadcrumbNameMap[pathKey];
-        },
+  data: () => ({
+    layout: "topmenu",
+    logo,
+  }),
+  methods: {
+    formatter(data, parentPath = "", parentName) {
+      return data.map((item) => {
+        let locale = "menu";
+        if (parentName && item.name) {
+          locale = `${parentName}.${item.name}`;
+        } else if (item.name) {
+          locale = `menu.${item.name}`;
+        } else if (parentName) {
+          locale = parentName;
+        }
+        const result = {
+          ...item,
+          locale,
+        };
 
-        getPageTitle(pathname) {
-            const currRouterData = this.matchParamsPath(pathname);
-            if (!currRouterData) {
-                return this.settings.leftMenuTitle;
-            }
-            const message = this.$t(currRouterData.locale || currRouterData.name)
-            return `${message} - ${this.settings.leftMenuTitle}`;
-        },
-        onResizeCollapsed() {
-            if (window.innerWidth <= 900) {
-                this.$store.commit('global/UpdateChangeLayoutCollapsed', true)
-            } else {
-                this.$store.commit('global/UpdateChangeLayoutCollapsed', false)
-            }
+        if (!item.leaf) {
+          const menus = this.formatter(
+            item.children,
+            `${parentPath}${item.path}/`,
+            locale
+          );
+          // Reduce memory usage
+          result.menus = menus;
         }
+        delete result.children;
+        return result;
+      });
     },
-    computed: {
-        ...mapGetters({
-            collapsed: "global/getChangeLayoutCollapsed",
-            settings: "global/settings",
-            menuNav: "global/nav/getMenuNav"
-        }),
-        getContentStyle() {
-            return {
-                margin: '24px 24px 0',
-                paddingTop: this.settings.fixedHeader ? 64 : 0,
-            }
-        },
+    getMenuData() {
+      return this.formatter(this.menuNav.data);
     },
-    beforeRouteEnter(to, from, next) {
-        next(vm => {
-            // 通过 `vm` 访问组件实例
-            document.title = vm.getPageTitle(to.path)
-        })
+    /**
+     * 获取面包屑映射
+     * @param {Object} menuData 菜单配置
+     */
+    getBreadcrumbNameMap() {
+      const routerMap = {};
+      const mergeMenuAndRouter = (data) => {
+        data.forEach((menuItem) => {
+          if (menuItem.menus) {
+            mergeMenuAndRouter(menuItem.menus);
+          }
+          // Reduce memory usage
+          routerMap[menuItem.path] = menuItem;
+        });
+      };
+      mergeMenuAndRouter(this.getMenuData());
+      return routerMap;
     },
-    beforeRouteUpdate(to, from, next) {
-        this.$store.commit('global/UpdateBasicLayoutSpinning', true)
-        document.title = this.getPageTitle(to.path)
-        this.$nextTick(() => {
-            next();
-        })
+
+    matchParamsPath(pathname) {
+      const breadcrumbNameMap = this.getBreadcrumbNameMap();
+      const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
+        pathToRegexp(key).test(pathname)
+      );
+      return breadcrumbNameMap[pathKey];
     },
-    mounted() {
-        this.$store.dispatch('global/nav/getMenuNav');
 
-        this.onResizeCollapsed()
+    getPageTitle(pathname) {
+      const currRouterData = this.matchParamsPath(pathname);
+      if (!currRouterData) {
+        return this.settings.leftMenuTitle;
+      }
+      const message = this.$t(currRouterData.locale || currRouterData.name);
+      return `${message} - ${this.settings.leftMenuTitle}`;
+    },
+    onResizeCollapsed() {
+      if (window.innerWidth <= 900) {
+        this.$store.commit("global/UpdateChangeLayoutCollapsed", true);
+      } else {
+        this.$store.commit("global/UpdateChangeLayoutCollapsed", false);
+      }
+    },
+  },
+  computed: {
+    ...mapGetters({
+      collapsed: "global/getChangeLayoutCollapsed",
+      settings: "global/settings",
+      menuNav: "global/nav/getMenuNav",
+    }),
+    getContentStyle() {
+      return {
+        margin: "24px 24px 0",
+        paddingTop: this.settings.fixedHeader ? 64 : 0,
+      };
+    },
+    getSiderShadow() {
+      let width = 256;
+      if (this.collapsed) width = 80;
 
-        window.onresize = () => {
-            // 通过捕获系统的onresize事件触发我们需要执行的事件
-            this.onResizeCollapsed()
-        }
+      return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;transition: all 0.2s;background: #001529;`;
     },
-    render() {
-        const { collapsed, getContentStyle, logo } = this;
-        const { layout } = this.settings;
-        const isTop = layout === 'topmenu';
-        const isMobile = false;
-        const menuData = this.getMenuData();
-        eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap()
-        return (
-            <Layout class="ai-basic-layout-container">
-                {isTop && !isMobile ? null : (
-                    <SiderMenu collapsed={collapsed} menuData={menuData} logo={logo}/>
-                )}
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      // 通过 `vm` 访问组件实例
+      document.title = vm.getPageTitle(to.path);
+    });
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.$store.commit("global/UpdateBasicLayoutSpinning", true);
+    document.title = this.getPageTitle(to.path);
+    this.$nextTick(() => {
+      next();
+    });
+  },
+  mounted() {
+    this.$store.dispatch("global/nav/getMenuNav");
+
+    this.onResizeCollapsed();
 
-                <Layout>
-                    <Header menuData={menuData} logo={logo}/>
-                    <Layout.Content style={getContentStyle}>
-                        <router-view />
-                    </Layout.Content>
-                    <Footer />
-                </Layout>
-            </Layout>
-        )
-    }
-}
-export default BasicLayout
+    window.onresize = () => {
+      // 通过捕获系统的onresize事件触发我们需要执行的事件
+      this.onResizeCollapsed();
+    };
+  },
+  render() {
+    const { collapsed, getContentStyle, logo } = this;
+    const { layout, fixedHeader, fixSiderbar } = this.settings;
+    const isTop = layout === "topmenu";
+    const isMobile = false;
+    const menuData = this.getMenuData();
+    eventBus.breadcrumbNameMap = this.getBreadcrumbNameMap();
\ No newline at end of file
+    return (
+      <Layout class="ai-basic-layout-container">
+        {isTop && !isMobile ? null : (
+          <SiderMenu
+            collapsed={collapsed}
+            fixSiderbar={fixSiderbar}
+            menuData={menuData}
+            logo={logo}
+          />
+        )}
+        {fixSiderbar ? <div style={this.getSiderShadow}></div> : null}
+        <Layout>
+          <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;

tools/frontend/src/layouts/Header.js

@@ -27,45 +27,42 @@ 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
-            //     theme={navTheme}
-            //     mode="horizontal"
-            //     Authorized={Authorized}
-            //     onCollapse={handleMenuCollapse}
-            //     onNoticeClear={this.handleNoticeClear}
-            //     onMenuClick={this.handleMenuClick}
-            //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
-            //     {...this.props}
-            // />
-            <TopNavHeader
-              theme={navTheme}
-              layout={layout}
-              mode="horizontal"
-              menuData={menuData}
-              logo={logo}
-              title={leftMenuTitle}
-            />
-          ) : (
-            // <GlobalHeader
-            //     onCollapse={handleMenuCollapse}
-            //     onNoticeClear={this.handleNoticeClear}
-            //     onMenuClick={this.handleMenuClick}
-            //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
-            //     {...this.props}
-            // />
-            <GlobalHeader theme={navTheme} layout={layout} />
-          )}
-        </Header>
-        <div v-show={fixedHeader} class="placeholder-element" />
-      </div>
+      <Header style={this.headerStyle}>
+        {isTop && !isMobile ? (
+          // <TopNavHeader
+          //     theme={navTheme}
+          //     mode="horizontal"
+          //     Authorized={Authorized}
+          //     onCollapse={handleMenuCollapse}
+          //     onNoticeClear={this.handleNoticeClear}
+          //     onMenuClick={this.handleMenuClick}
+          //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
+          //     {...this.props}
+          // />
+          <TopNavHeader
+            theme={navTheme}
+            layout={layout}
+            mode="horizontal"
+            menuData={menuData}
+            logo={logo}
+            title={leftMenuTitle}
+          />
+        ) : (
+          // <GlobalHeader
+          //     onCollapse={handleMenuCollapse}
+          //     onNoticeClear={this.handleNoticeClear}
+          //     onMenuClick={this.handleMenuClick}
+          //     onNoticeVisibleChange={this.handleNoticeVisibleChange}
+          //     {...this.props}
+          // />
+          <GlobalHeader theme={navTheme} layout={layout} />
+        )}
+      </Header>
     );
   },
 };