接口地址

layouts/basic-layout/product.vue

+<template>
+  <Layout class="product-layout">
+    <Header>
+      <span class="menu">
+        <a class="home">
+          <Icon type="ios-keypad" />
+          <ul class="top-menu">
+            <li v-for="(item,i) in filterSider">
+              <ul>
+                <li class="title">{{item.title}}</li>
+                <li v-for="(li,j) in item.children">
+                    <a>{{li.title}}</a>                    
+                    </li>
+              </ul>
+            </li>
+          </ul>
+        </a>
+      </span>
+      <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
+      <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
+      <div class="header-right">
+        <i-header-search
+          v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))"
+        />
+        <i-menu-head v-if="headerMenu && isMobile" />
+        <i-header-log v-if="isDesktop && showLog" />
+        <i-header-bug />
+        <i-header-fullscreen v-if="isDesktop && showFullscreen" />
+        <i-header-notice v-if="showNotice" />
+        <i-header-user />
+        <i-header-i18n v-if="showI18n" />
+        <i-header-setting v-if="enableSetting && !isMobile" />
+      </div>
+    </Header>
+    <Content class="i-layout-content">
+      <keep-alive :include="keepAlive">
+        <nuxt v-if="loadRouter" />
+      </keep-alive>
+    </Content>
+  </Layout>
+</template>
+<script>
+import iMenuHead from "./menu-head";
+import iMenuSide from "./menu-side";
+import iHeaderLogo from "./header-logo";
+import iHeaderCollapse from "./header-collapse";
+import iHeaderReload from "./header-reload";
+import iHeaderBreadcrumb from "./header-breadcrumb";
+import iHeaderSearch from "./header-search";
+import iHeaderLog from "./header-log";
+import iHeaderBug from "./header-bug";
+import iHeaderFullscreen from "./header-fullscreen";
+import iHeaderNotice from "./header-notice";
+import iHeaderUser from "./header-user";
+import iHeaderI18n from "./header-i18n";
+import iHeaderSetting from "./header-setting";
+import iTabs from "./tabs";
+import iCopyright from "@/components/copyright";
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+import Setting from "@/setting";
+
+import { requestAnimation } from "@/libs/util";
+
+export default {
+  name: "ProductLayout",
+  components: {
+    iMenuHead,
+    iMenuSide,
+    iCopyright,
+    iHeaderLogo,
+    iHeaderCollapse,
+    iHeaderReload,
+    iHeaderBreadcrumb,
+    iHeaderSearch,
+    iHeaderUser,
+    iHeaderI18n,
+    iHeaderLog,
+    iHeaderFullscreen,
+    iHeaderSetting,
+    iHeaderNotice,
+    iTabs,
+    iHeaderBug
+  },
+  data() {
+    return {
+      showDrawer: false,
+      ticking: false,
+      headerVisible: true,
+      oldScrollTop: 0,
+      isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
+      loadRouter: true
+    };
+  },
+  computed: {
+    ...mapState("admin/layout", [
+      "siderTheme",
+      "headerTheme",
+      "headerStick",
+      "tabs",
+      "tabsFix",
+      "siderFix",
+      "headerFix",
+      "headerHide",
+      "headerMenu",
+      "isMobile",
+      "isTablet",
+      "isDesktop",
+      "menuCollapse",
+      "showMobileLogo",
+      "showSearch",
+      "showNotice",
+      "showFullscreen",
+      "showSiderCollapse",
+      "showBreadcrumb",
+      "showLog",
+      "showI18n",
+      "showReload",
+      "enableSetting"
+    ]),
+    ...mapState("admin/page", ["keepAlive"]),
+    ...mapGetters("admin/menu", ["hideSider", "filterSider"]),
+    // 如果开启 headerMenu，且当前 header 的 hideSider 为 true，则将顶部按 headerStick 处理
+    // 这时，即使没有开启 headerStick，仍然按开启处理
+    isHeaderStick() {
+      let state = this.headerStick;
+      if (this.hideSider) state = true;
+      return state;
+    },
+    showHeader() {
+      let visible = true;
+      if (this.headerFix && this.headerHide && !this.headerVisible)
+        visible = false;
+      return visible;
+    },
+    headerClasses() {
+      return [
+        `i-layout-header-color-${this.headerTheme}`,
+        {
+          "i-layout-header-fix": this.headerFix,
+          "i-layout-header-fix-collapse": this.headerFix && this.menuCollapse,
+          "i-layout-header-mobile": this.isMobile,
+          "i-layout-header-stick": this.isHeaderStick && !this.isMobile,
+          "i-layout-header-with-menu": this.headerMenu,
+          "i-layout-header-with-hide-sider":
+            this.hideSider || this.isDelayHideSider
+        }
+      ];
+    },
+    headerStyle() {
+      const menuWidth = this.isHeaderStick
+        ? 0
+        : this.menuCollapse
+        ? 80
+        : Setting.menuSideWidth;
+      return this.isMobile || !this.headerFix
+        ? {}
+        : {
+            width: `calc(100% - ${menuWidth}px)`
+          };
+    },
+    siderClasses() {
+      return {
+        "i-layout-sider-fix": this.siderFix,
+        "i-layout-sider-dark": this.siderTheme === "dark"
+      };
+    },
+    contentClasses() {
+      return {
+        "i-layout-content-fix-with-header": this.headerFix,
+        "i-layout-content-with-tabs": this.tabs,
+        "i-layout-content-with-tabs-fix": this.tabs && this.tabsFix
+      };
+    },
+    insideClasses() {
+      return {
+        "i-layout-inside-fix-with-sider": this.siderFix,
+        "i-layout-inside-fix-with-sider-collapse":
+          this.siderFix && this.menuCollapse,
+        "i-layout-inside-with-hide-sider": this.hideSider,
+        "i-layout-inside-mobile": this.isMobile
+      };
+    },
+    drawerClasses() {
+      let className = "i-layout-drawer";
+      if (this.siderTheme === "dark") className += " i-layout-drawer-dark";
+      return className;
+    },
+    menuSideWidth() {
+      return this.menuCollapse ? 80 : Setting.menuSideWidth;
+    }
+  },
+  watch: {
+    hideSider() {
+      this.isDelayHideSider = true;
+      setTimeout(() => {
+        this.isDelayHideSider = false;
+      }, 0);
+    },
+    $route(to, from) {
+      if (to.name === from.name) {
+        // 相同路由，不同参数，跳转时，重载页面
+        if (Setting.sameRouteForceUpdate) {
+          this.handleReload();
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapMutations("admin/layout", ["updateMenuCollapse"]),
+    ...mapMutations("admin/page", ["keepAlivePush", "keepAliveRemove"]),
+    handleToggleDrawer(state) {
+      if (typeof state === "boolean") {
+        this.showDrawer = state;
+      } else {
+        this.showDrawer = !this.showDrawer;
+      }
+    },
+    handleScroll() {
+      if (!this.headerHide) return;
+
+      const scrollTop =
+        document.body.scrollTop + document.documentElement.scrollTop;
+
+      if (!this.ticking) {
+        this.ticking = true;
+        requestAnimation(() => {
+          if (this.oldScrollTop > scrollTop) {
+            this.headerVisible = true;
+          } else if (scrollTop > 300 && this.headerVisible) {
+            this.headerVisible = false;
+          } else if (scrollTop < 300 && !this.headerVisible) {
+            this.headerVisible = true;
+          }
+          this.oldScrollTop = scrollTop;
+          this.ticking = false;
+        });
+      }
+    },
+    handleHeaderWidthChange() {
+      const $breadcrumb = this.$refs.breadcrumb;
+      if ($breadcrumb) {
+        $breadcrumb.handleGetWidth();
+        $breadcrumb.handleCheckWidth();
+      }
+      const $menuHead = this.$refs.menuHead;
+      if ($menuHead) {
+        // todo $menuHead.handleGetMenuHeight();
+      }
+    },
+    handleReload() {
+      // 针对缓存的页面也生效
+      const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
+      const pageName = this.$route.name;
+      if (isCurrentPageCache) {
+        this.keepAliveRemove(pageName);
+      }
+      this.loadRouter = false;
+      this.$nextTick(() => {
+        this.loadRouter = true;
+        if (isCurrentPageCache) {
+          this.keepAlivePush(pageName);
+        }
+      });
+    }
+  },
+  mounted() {
+    document.addEventListener("scroll", this.handleScroll, { passive: true });
+  },
+  beforeDestroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+  },
+  created() {
+    if (this.isTablet && this.showSiderCollapse) this.updateMenuCollapse(true);
+  }
+};
+</script>
+<style lang="less">
+.product-layout {
+  .ivu-layout-header {
+    height: 50px;
+    line-height: 50px;
+    padding: 0;
+    .menu {
+      margin: 0 10px;
+      .home {
+        position: relative;
+        height: 30px;
+        width: 30px;
+        display: inline-block;
+        border-radius: 50%;
+        background: #2680eb;
+        color: white;
+        line-height: 30px;
+        text-align: center;
+      }
+      .top-menu {
+        display: none;
+        position: absolute;
+        z-index: 99999;
+        left: 70%;
+        top: 70%;
+        background: #f5f6fa;
+        border-radius: 4px;
+        min-width: 1800px;
+        min-height: 300px;
+        color: #2680eb;
+        list-style: none;
+        text-align: left;
+        li {
+          width: 100%;
+          display: block;
+          float: left;
+          ul {
+              width: 100%;
+              list-style: none;
+            li {
+              display: inline-block;
+              list-style: none;
+              margin-right: 10px;
+              width: 150px;
+                a{
+                    display: inline-block;
+                    padding: 0 10px;
+                    height: 30px;
+                }
+                a:hover{
+                    background: #2680EB;
+                    color: white;
+                    border-radius: 4px;
+                }
+            }
+            .title {
+              display: inline-block;
+              background: #515a6e;
+              width: 104px;
+              color: white;
+              text-align: center;
+              font-weight: bold;
+                height: 47px;
+            }
+            .title:hover{
+                color: #ddd;
+            }
+          }
+        }
+      }
+      .home:hover .top-menu {
+        display: block;
+      }
+    }
+    .ivu-breadcrumb {
+      height: 50px;
+      line-height: 50px;
+    }
+  }
+  .header-right {
+    float: right;
+    height: 50px;
+    color: white;
+    margin: 0;
+    .i-layout-header-trigger {
+      color: white;
+      height: 50px;
+      line-height: 50px;
+    }
+    .ivu-tooltip {
+      color: white;
+      height: 50px;
+      line-height: 50px;
+    }
+  }
+}
+</style>
\ No newline at end of file

layouts/product.vue

+<template>
+    <Layout class="i-layout">
+         <Header>
+
+                                 <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
+             <div class="i-layout-header-right">
+                        <i-header-search v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))" />
+                        <i-header-log v-if="isDesktop && showLog" />
+                        <i-header-bug />
+                        <i-header-fullscreen v-if="isDesktop && showFullscreen" />
+                        <i-header-notice v-if="showNotice" />
+                        <i-header-user />
+                        <i-header-i18n v-if="showI18n" />
+                        <i-header-setting v-if="enableSetting && !isMobile" />
+                    </div>
+         </Header>
+          <Content> <nuxt v-if="loadRouter"/></Content>
+    </Layout>
+</template>
\ No newline at end of file