diff --git a/src/assets/img/DataCenter/qrcode.png b/src/assets/img/DataCenter/qrcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d11af51f048773b99065c55b50e4a2cdf2a1005
Binary files /dev/null and b/src/assets/img/DataCenter/qrcode.png differ
diff --git a/src/layouts/components/index.js b/src/layouts/components/index.js
index 89d175119ad6e67314ff62b366c8283bb18d4784..5021c5cb82136a3aa1b2b90b6252e8d6f4149751 100644
--- a/src/layouts/components/index.js
+++ b/src/layouts/components/index.js
@@ -1,5 +1,5 @@
 export { default as TagsBar } from "zx-layouts/zx-tags-bar"
-export { default as SideBar } from "zx-layouts/zx-side-bar"
+export { default as SideBar } from "@/layouts/components/zx-side-bar"
 export { default as Breadcrumb } from "zx-layouts/zx-breadcrumb"
 export { default as FullScreenBar } from "zx-layouts/zx-full-screen-bar"
 export { default as ErrorLog } from "zx-layouts/zx-error-log"
diff --git a/src/layouts/components/zx-side-bar/components/SideBarItem.vue b/src/layouts/components/zx-side-bar/components/SideBarItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..427fe9f981a25053be78067dc041d387309221b5
--- /dev/null
+++ b/src/layouts/components/zx-side-bar/components/SideBarItem.vue
@@ -0,0 +1,143 @@
+<template>
+  <div v-if="!item.hidden">
+    <template
+      v-if="
+        handleChildren(item.children, item) &&
+        (!onlyOneChildren.children || onlyOneChildren.notShowChildren) &&
+        !item.alwaysShow
+      "
+    >
+      <app-link
+        v-if="onlyOneChildren.meta"
+        :target="onlyOneChildren.meta.target ? onlyOneChildren.meta.target : ''"
+        :to="handlePath(onlyOneChildren.path)"
+      >
+        <el-menu-item
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+          :index="handlePath(onlyOneChildren.path)"
+        >
+          <vab-icon
+            v-if="onlyOneChildren.meta && onlyOneChildren.meta.icon"
+            :icon="['fas', onlyOneChildren.meta.icon]"
+            class="vab-nav-icon"
+          />
+          <vab-remix-icon
+            v-if="onlyOneChildren.meta && onlyOneChildren.meta.remixIcon"
+            :icon-class="onlyOneChildren.meta.remixIcon"
+            class="vab-nav-icon"
+          />
+          <span slot="title">{{ onlyOneChildren.meta.title }} </span>
+          <el-tag
+            v-if="onlyOneChildren.meta && onlyOneChildren.meta.badge"
+            type="danger"
+            effect="dark"
+            >{{ onlyOneChildren.meta.badge }}</el-tag
+          >
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-submenu v-else ref="subMenu" :index="handlePath(item.path)">
+      <template slot="title">
+        <vab-icon
+          v-if="item.meta && item.meta.icon"
+          :icon="['fas', item.meta.icon]"
+          class="vab-nav-icon"
+        />
+        <vab-remix-icon
+          v-if="item.meta && item.meta.remixIcon"
+          :icon-class="item.meta.remixIcon"
+          class="vab-nav-icon"
+        />
+        <span>{{ item.meta.title }}</span>
+      </template>
+      <side-bar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :base-path="handlePath(child.path)"
+        :is-nest="true"
+        :item="child"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from "path";
+import { isExternal } from "@/utils/validate";
+import AppLink from "@/layouts/components/Link";
+
+export default {
+  name: "SideBarItem",
+  components: { AppLink },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    isNest: {
+      type: Boolean,
+      default: false,
+    },
+    basePath: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    this.onlyOneChild = null;
+    return {};
+  },
+  methods: {
+    handleChildren(children = [], parent) {
+      if (children === null) children = [];
+      const showChildren = children.filter((item) => {
+        if (item.hidden) {
+          return false;
+        } else {
+          this.onlyOneChildren = item;
+          return true;
+        }
+      });
+      if (showChildren.length === 1) {
+        return true;
+      }
+
+      if (showChildren.length === 0) {
+        this.onlyOneChildren = {
+          ...parent,
+          path: "",
+          notShowChildren: true,
+        };
+        return true;
+      }
+      return false;
+    },
+    handlePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath;
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath;
+      }
+      return path.resolve(this.basePath, routePath);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.vab-nav-icon {
+  margin-right: 4px;
+}
+::v-deep {
+  .el-tag {
+    margin-top: 15px;
+    padding-left: 3px;
+    padding-right: 3px;
+    height: 16px;
+    line-height: 13px;
+    float: right;
+  }
+}
+</style>
diff --git a/src/layouts/components/zx-side-bar/index.vue b/src/layouts/components/zx-side-bar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19b685b0311366c3034dbb38f0c4bf5dbe12e0af
--- /dev/null
+++ b/src/layouts/components/zx-side-bar/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <el-scrollbar class="side-bar-container" :class="{ 'is-collapse': collapse }">
+    <logo />
+    <el-menu
+      :background-color="variables['menu-background']"
+      :text-color="variables['menu-color']"
+      :active-text-color="variables['menu-color-active']"
+      :default-active="activeMenu"
+      :collapse="collapse"
+      :collapse-transition="false"
+      :default-openeds="defaultOpens"
+      :unique-opened="uniqueOpened"
+      mode="vertical"
+      class="undefineMenu"
+    >
+      <side-bar-item
+        v-for="route in routes"
+        :key="route.path"
+        :base-path="route.path"
+        :item="route"
+      />
+      <div class="qrcode">
+        <div class="img"></div>
+        <div class="text">问题反馈群</div>
+      </div>
+    </el-menu>
+  </el-scrollbar>
+</template>
+<script>
+import Logo from "@/layouts/components/Logo"
+import SideBarItem from "./components/SideBarItem"
+import variables from "@/styles/variables.scss"
+import { mapGetters } from "vuex"
+import { defaultOopeneds, uniqueOpened } from "@/config/settings"
+
+export default {
+  name: "SideBar",
+  components: { SideBarItem, Logo },
+  data() {
+    return {
+      uniqueOpened,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      collapse: "settings/collapse",
+      routes: "routes/routes",
+    }),
+    defaultOpens() {
+      if (this.collapse) {
+      }
+      return defaultOopeneds
+    },
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    variables() {
+      return variables
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.qrcode {
+  width: 108px;
+  height: 136px;
+  background: #546184;
+  border-radius: 4px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .img {
+    width: 92px;
+    height: 92px;
+    background: url("~@/assets/img/DataCenter/qrcode.png") no-repeat;
+    background-size: cover;
+    background-position: center center;
+    border-radius: 2px;
+  }
+  .text {
+    font-size: 14px;
+    font-family: AlibabaPuHuiTiR;
+    color: #ffffff;
+    text-align: center;
+    margin-top: 8px;
+  }
+}
+@mixin active {
+  &:hover {
+    color: $base-color-white !important;
+    background-color: $base-menu-background-active !important;
+  }
+
+  &.is-active {
+    color: $base-color-white !important;
+    background-color: $base-menu-background-active !important;
+  }
+}
+.undefineMenu {
+  min-height: calc(100vh - 120px);
+  padding-bottom: 166px;
+}
+.side-bar-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $base-z-index;
+  width: $base-left-menu-width;
+  height: 100vh;
+  overflow: hidden;
+  background: $base-menu-background;
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  transition: all 0.1s;
+  padding: 8px 0 14px;
+
+  &.is-collapse {
+    width: $base-left-menu-width-min;
+    border-right: 0 !important;
+
+    ::v-deep {
+      .el-menu {
+        transition: all 0.1s;
+      }
+
+      .el-menu--collapse {
+        border-right: 0 !important;
+
+        .el-submenu__icon-arrow {
+          right: 10px;
+          margin-top: -3px;
+        }
+
+        .el-submenu__title {
+          span {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep {
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+
+    .el-menu {
+      border: 0;
+    }
+
+    .svg-inline {
+      &--fa {
+        width: 1rem;
+      }
+    }
+
+    .el-menu-item {
+      height: 46px !important;
+      overflow: hidden;
+      line-height: 46px !important;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      @include active;
+    }
+
+    .nest-menu {
+      .el-menu-item {
+        background-color: $base-menu-children-background !important;
+
+        @include active;
+      }
+
+      .el-submenu .el-menu-item {
+        background-color: $base-menu-children-background !important;
+
+        @include active;
+      }
+    }
+  }
+}
+</style>