更改目录结构

web/src/layout/Layout.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-container style="height: 100%;">
+    <!--侧边栏菜单-->
+    <el-aside :width="is_active?'200':'64'">
+      <LayoutAside :is_active="is_active" :route_path="route_path"/>
+    </el-aside>
+
+    <el-container>
+      <!--正文头部内容-->
+      <el-header>
+        <!--监听子组件的变量事件-->
+        <LayoutHeader :is_active.sync="is_active" :route_name="route_name"/>
+      </el-header>
+      <!--正文内容-->
+      <!--style="background-color: rgb(240, 242, 245);"-->
+      <el-main style="background-color: #fbfbfb">
+        <!-- 对应的组件内容渲染到router-view中 -->
+        <!--子组件上报route信息-->
+        <router-view :route_path.sync="route_path" :route_name.sync="route_name"></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import LayoutAside from "@/layout/LayoutAside";
+import LayoutHeader from "@/layout/LayoutHeader";
+
+export default {
+  name: "Layout",
+  components: {LayoutHeader, LayoutAside},
+  data() {
+    return {
+      is_active: true,
+      route_path: '/index',
+      route_name: ['首页'],
+    }
+  },
+  watch: {
+    route_path: function (val) {
+      // var w = document.getElementById('layout-menu').clientWidth;
+      window.console.log('is_active', val)
+    },
+  },
+  created() {
+    window.console.log('layout-route', this.$route)
+  },
+}
+</script>
+
+<style>
+.el-header {
+  background-color: #fff;
+  /*box-shadow: 0 1px 4px rgba(0, 21, 41, .08);*/
+  color: #333;
+  line-height: 60px;
+  /*width: 100%;*/
+
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+}
+
+</style>

web/src/layout/LayoutAside.vue

@@ -0,0 +1,78 @@
+<template>
+
+  <!--background-color="#304156"-->
+  <!--text-color="#bfcbd9"-->
+  <!--active-text-color="#409EFF"-->
+  <!--:unique-opened="false"-->
+
+  <!--<div class="layout-aside" :style="aside_style">-->
+
+  <el-menu :collapse="!is_active"
+           :default-active="route_path"
+           :style="is_active?'width:200px':''"
+           router
+           class="layout-menu"
+           :collapse-transition="false"
+
+           background-color="#545c64"
+           text-color="#fff"
+           active-text-color="#ffd04b"
+  >
+    <el-menu-item index="/admin/home">
+      <i class="el-icon-s-home"></i>
+      <span slot="title">首页</span>
+    </el-menu-item>
+
+    <el-submenu index="1">
+      <template slot="title">
+        <i class="el-icon-menu"></i>
+        <span slot="title">基础信息</span>
+      </template>
+
+      <el-menu-item index="/admin/set/system">系统信息</el-menu-item>
+      <el-menu-item index="/admin/set/soft">软件配置</el-menu-item>
+      <el-menu-item index="/admin/set/other">其他设置</el-menu-item>
+    </el-submenu>
+
+    <el-submenu index="2">
+      <template slot="title">
+        <i class="el-icon-s-custom"></i>
+        <span slot="title">用户信息</span>
+      </template>
+
+      <el-menu-item index="/admin/user/list">用户列表</el-menu-item>
+      <el-menu-item index="/admin/user/online">在线用户</el-menu-item>
+      <el-menu-item index="/admin/user/ip_map">IP映射</el-menu-item>
+    </el-submenu>
+
+    <el-submenu index="3">
+      <template slot="title">
+        <i class="el-icon-s-order"></i>
+        <span slot="title">用户组信息</span>
+      </template>
+
+      <el-menu-item index="/admin/group/list">用户组列表</el-menu-item>
+    </el-submenu>
+
+
+  </el-menu>
+
+</template>
+
+<script>
+export default {
+  name: "LayoutAside",
+  data() {
+    return {}
+  },
+  props: ['is_active', 'route_path'],
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+.layout-menu {
+  height: 100%;
+}
+</style>

web/src/layout/LayoutHeader.vue

@@ -0,0 +1,82 @@
+<template>
+
+  <div class="layout-header">
+    <div>
+      <i @click="toggleClick" :class="is_active ? 'el-icon-s-fold' : 'el-icon-s-unfold'" class="toggle-icon"
+         style="font-size: 26px;"></i>
+
+      <el-breadcrumb separator="/" class="app-breadcrumb">
+        <el-breadcrumb-item v-for="(item, index) in route_name" :key="index">{{ item }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <el-dropdown trigger="click" @command="handleCommand">
+      <i class="el-icon-setting" style="margin-right: 15px"></i>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="logout">退出</el-dropdown-item>
+      </el-dropdown-menu>
+      <span style="font-size: 12px;">{{ admin_user }}</span>
+    </el-dropdown>
+
+  </div>
+
+</template>
+
+<script>
+import {getUser, removeToken} from "@/plugins/token";
+
+export default {
+  name: "Layoutheader",
+  props: ['route_name'],
+  data() {
+    return {
+      is_active: true
+    }
+  },
+  computed: {
+    admin_user() {
+      return getUser();
+    },
+  },
+  methods: {
+    // 菜单栏开关按钮
+    toggleClick() {
+      this.is_active = !this.is_active
+      // 触发事件,抛出到上层
+      this.$emit('update:is_active', this.is_active)
+    },
+    handleCommand() {
+      console.log("handleCommand")
+      // 退出 删除登录信息
+      removeToken()
+      this.$router.push("/login");
+    },
+  }
+}
+</script>
+
+<style scoped>
+.layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.toggle-icon {
+  cursor: pointer;
+  transition: background .3s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.toggle-icon:hover {
+  background: rgba(0, 0, 0, .025)
+}
+
+.app-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  /*line-height: 20;*/
+  margin-left: 20px;
+}
+
+</style>