init：初始化模块

src/assets/css/base.css

@@ -86,4 +86,5 @@ textarea:focus {
 body {
   background: url('../images/bg.png') no-repeat center bottom;
   background-size: cover;
+  font-family: 'PingFang SC', 'PingFangSC-Regular', 'Source Han Sans CN', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
 }

src/components/layout/Aside.vue

-<template>
-  <aside class="app-aside">
-    <nav class="nav">
-      <el-menu :default-active="defaultActive" :router="true">
-        <template v-for="item in menuList">
-          <el-submenu :index="item.path" :key="item.path" v-if="item.children">
-            <template #title><i :class="item.icon"></i>{{ item.name }}</template>
-            <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path">
-              {{ subitem.name }}
-            </el-menu-item>
-          </el-submenu>
-          <el-menu-item :index="item.path" :key="item.path" v-else>
-            <i :class="item.icon"></i>{{ item.name }}
-          </el-menu-item>
-        </template>
-      </el-menu>
-    </nav>
-  </aside>
-</template>
-
-<script>
-export default {
-  name: 'AppAside',
-  data() {
-    return {
-      menuList: [
-        { name: '概况', path: '/', icon: 'el-icon-house' },
-        {
-          name: '商品',
-          path: '/test',
-          icon: 'el-icon-goods',
-          children: [
-            { name: '商品列表', path: '/test' },
-            { name: '商品分组', path: '/goods/group' }
-          ]
-        },
-        {
-          name: '订单',
-          path: '/order',
-          icon: 'el-icon-tickets',
-          children: [{ name: '订单列表', path: '/order' }]
-        },
-        {
-          name: '设置',
-          path: '/setting/info',
-          icon: 'el-icon-setting',
-          children: [
-            { name: '店铺信息', path: '/setting/info' },
-            { name: '联系我们', path: '/setting/contact' },
-            { name: '通用设置', path: '/setting/general' },
-            { name: '商品设置', path: '/setting/goods' }
-          ]
-        }
-      ]
-    }
-  },
-  computed: {
-    defaultActive() {
-      return this.$route.path
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.app-aside {
-  position: sticky;
-  top: 0;
-  width: 200px;
-  z-index: 100;
-  background: #fff;
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex: 0 0 200px;
-}
-.nav {
-  margin: 20px 0;
-  .el-menu {
-    border-right: 0;
-    i {
-      margin-right: 14px;
-      font-size: 24px;
-    }
-    .el-icon-arrow-down {
-      margin-right: 0;
-      font-size: 16px;
-    }
-  }
-  .el-menu-item {
-    display: flex;
-    align-items: center;
-    margin: 0 16px;
-    font-size: 16px;
-    border-radius: 8px;
-  }
-  .el-submenu .el-menu-item {
-    min-width: auto;
-    padding-left: 58px !important;
-  }
-  .el-submenu__title {
-    display: flex;
-    align-items: center;
-    margin: 0 16px;
-    font-size: 16px;
-    border-radius: 8px;
-    &:hover {
-      background-color: rgba(86, 100, 210, 0.04);
-    }
-  }
-}
-</style>

src/components/layout/Breadcrumb.vue

-<template>
-  <div class="app-breadcrumb" v-if="routes.length">
-    <el-breadcrumb>
-      <el-breadcrumb-item v-for="route in routes" :key="route.path">
-        <router-link :to="route.path">{{ route.meta.title }}</router-link>
-      </el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppBreadcrumb',
-  computed: {
-    routes() {
-      return this.$route.matched.filter(route => route.meta.title)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.app-breadcrumb {
-  padding: 18px 0 32px;
-
-  .el-breadcrumb {
-    font-size: 20px;
-    font-weight: 400;
-    line-height: 1;
-  }
-  .el-breadcrumb__inner a {
-    font-weight: normal;
-    color: #5b91fd;
-  }
-  .router-link-active {
-    color: #1a1b1c;
-  }
-}
-</style>

src/components/layout/Header.vue

 <template>
   <header class="app-header">
-    <ul>
-      <li></li>
+    <ul class="menu">
+      <template v-for="(item, index) in menuList">
+        {{index === 0 ? '' : '|'}}<li :class="{ active: item.path === path}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
+      </template>
     </ul>
-    <div class="logo">
-      <router-link to="/"><img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" /></router-link>
-    </div>
-    <div class="app-header-right">
-      <el-dropdown>
-        <div class="avatar">
-          <img :src="user.avatar || 'https://zws-imgs-pub.ezijing.com/pc/base/logo.png'" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <div class="user">
-            <div class="user-name">{{ user.realname || user.nickname }}</div>
-            <el-button round size="medium" class="btn-logout" @click="logout">退出登录</el-button>
-          </div>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
   </header>
 </template>
 
 <script>
 export default {
   name: 'AppHeader',
+  data() {
+    return {
+      menuList: [
+        { label: '首页', path: '/home' },
+        { label: '产品分析', path: '/product-analysis' },
+        { label: '用户研究', path: '/user-study' },
+        { label: '营销工具使用', path: '/market-tools' },
+        { label: '作品展示', path: '/works-show' }
+      ]
+    }
+  },
   computed: {
-    user() {
-      return this.$store.state.user
+    path() {
+      return this.$route.path
+    }
+  },
+  watch: {
+    path: {
+      handler(nv) {
+        console.log(nv)
+      },
+      immediate: true
     }
   },
   methods: {
-    logout() {
-      this.$store.dispatch('logout').then(() => {
-        window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.href)}`
-      })
+    menuSelect(item) {
+      this.$router.push(item.path)
     }
   }
 }
 </script>
 
-<style lang="scss">
-.app-header {
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 64px;
-  background-color: #3276fc;
-  color: #fff;
-
-  .logo {
-    width: 120px;
-  }
-}
-.app-header-right {
-  display: flex;
-
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-  }
+<style lang="scss" scoped>
+.app-header{
+  padding:30px 33px 0;
 }
-.user {
-  padding: 16px;
+.menu{
+  width: 780px;
+  height:56px;
+  background:#68B8A4;
+  border-radius:28px;
+  display:flex;
+  font-size:18px;
+  line-height:56px;
+  color:#fff;
 }
-.user-name {
-  margin-bottom: 20px;
+.menu li{
+  padding:0 40px;
+  cursor: pointer;
 }
-.btn-logout {
-  width: 200px;
+.menu li.active{
+  font-weight: bold;
 }
 </style>

src/components/layout/Index.vue

 <template>
   <div class="app-layout">
     <app-header></app-header>
-    <div class="app-layout-container">
-      <app-aside></app-aside>
-      <app-main></app-main>
-    </div>
+    <app-main></app-main>
   </div>
 </template>
 
 <script>
 import AppHeader from './Header.vue'
-import AppAside from './Aside.vue'
 import AppMain from './Main.vue'
 
 export default {
   name: 'AppLayout',
-  components: { AppHeader, AppAside, AppMain }
+  components: { AppHeader, AppMain }
 }
 </script>
 

src/components/layout/Main.vue

 <template>
   <section class="app-main">
-    <div class="app-main-inner">
-      <div class="app-main-header">
-        <app-breadcrumb v-if="hasBreadcrumb"></app-breadcrumb>
-      </div>
-      <div class="app-main-container">
-        <router-view></router-view>
-      </div>
-    </div>
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
   </section>
 </template>
 
 <script>
-import AppBreadcrumb from './Breadcrumb.vue'
 export default {
   name: 'AppMain',
-  props: { hasBreadcrumb: { type: Boolean, default: true } },
-  components: { AppBreadcrumb }
+  computed: {
+    key () {
+      return this.$route.path
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped>
 .app-main {
+  width: 100%;
   position: relative;
-  flex: 1;
-  padding: 20px;
   overflow: hidden;
 }
-.app-main-inner {
-  margin: 0 auto;
-}
-.app-main-container::after {
-  content: '';
-  display: table;
-  clear: both;
-}
-.el-form--label-top .el-form-item__label {
-  padding-bottom: 0;
-}
 </style>

src/modules/home/index.js

 const routes = [
   {
     path: '/',
-    component: () => import('./views/Index.vue')
-  }
+    component: () => import('@/components/layout/Index.vue'),
+    children: [
+      {
+        path: 'home',
+        component: () => import('./views/Index.vue')
+      }
+    ]
+  },
 ]
 
 export { routes }

src/modules/home/views/Index.vue

 <template>
-  <div>home</div>
+  <div class="home">home</div>
 </template>
 
 <script>
 export default {}
 </script>
 
-<style></style>
+<style scoped>
+.home{
+  height:calc(100vh - 86px);
+}
+</style>

src/modules/market-tools/index.js

+const routes = [
+  {
+    path: '/market-tools',
+    component: () => import('@/components/layout/Index.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('./views/Index.vue')
+      }
+    ]
+  },
+]
+
+export { routes }

src/modules/market-tools/views/Index.vue

+<template>
+  <div class="market-tools">营销工具</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.market-tools{
+  height:calc(100vh - 86px);
+}
+</style>

src/modules/product-analysis/index.js

+const routes = [
+  {
+    path: '/product-analysis',
+    component: () => import('@/components/layout/Index.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('./views/Index.vue')
+      }
+    ]
+  },
+]
+
+export { routes }

src/modules/product-analysis/views/Index.vue

+<template>
+  <div class="product-analysis">产品分析</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.product-analysis{
+  height:calc(100vh - 86px);
+}
+</style>

src/modules/user-study/index.js

+const routes = [
+  {
+    path: '/user-study',
+    component: () => import('@/components/layout/Index.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('./views/Index.vue')
+      }
+    ]
+  },
+]
+
+export { routes }

src/modules/user-study/views/Index.vue

+<template>
+  <div class="user-study">用户研究</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.user-study{
+  height:calc(100vh - 86px);
+}
+</style>

src/modules/works-show/index.js

+const routes = [
+  {
+    path: '/works-show',
+    component: () => import('@/components/layout/Index.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('./views/Index.vue')
+      }
+    ]
+  },
+]
+
+export { routes }

src/modules/works-show/views/Index.vue

+<template>
+  <div class="works-show">作品展示</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.works-show{
+  height:calc(100vh - 86px);
+}
+</style>

src/router/index.js

@@ -3,7 +3,10 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{ path: '*', redirect: '/' }]
+const routes = [
+  { path: '*', redirect: '/home' },
+  { path: '/', redirect: '/home' },
+]
 
 const router = new VueRouter({
   mode: 'history',