yulan

src/layout/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="full-screen flex flex-justify-start">
+    <el-aside width="300px">
+      <left />
+    </el-aside>
+    <el-container>
+      <el-header class="header">
+        <top />
+      </el-header>
+      <el-main class="wt-main">
+        <el-card>
+          <router-view v-slot="{ Component, route }">
+            <keep-alive :include="keepAlive.list">
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+          </router-view>
+        </el-card>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script lang="js">
+import left from './letf.vue'
+import top from './top.vue'
+import keepAliveStore from '../store/keepAlive.js'
+export default {
+  name: 'index.vue',
+  components: { left, top },
+  setup() {
+    const keepAlive = keepAliveStore()
+    return { keepAlive }
+  },
+  created() {
+    this.keepAlive.$subscribe(res => {
+      console.log(this.keepAlive.list)
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  padding: 0;
+}
+.wt-main {
+  background-color: #f2f3f5;
+}
+</style>

src/layout/left.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="box-shadow-blue full-height">
+    <div class="padding">
+      <div class="flex flex-center logo">
+        <img src="/public/vite.svg" alt="logo" />
+        <span class="font-16 bold ml-20">项目管理平台</span>
+      </div>
+    </div>
+    <div>
+      <div
+        v-for="(item, index) in data"
+        :key="item.id"
+        @click="navClick(index)"
+      >
+        <div
+          class="item flex flex-center bold font-14"
+          :style="item.checked ? 'background-color: #7AB4F9;color:white' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+export default {
+  data() {
+    return {
+      data: []
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.$api.system.getMenus().then(res => {
+        if (res.code === 200) {
+          if (res.msg === '暂无承载数据') {
+            this.$router.push('/login')
+          } else {
+            this.data = res.data.map(sub => {
+              sub.checked = false
+              return sub
+            })
+            this.$router.push(this.data[0].path)
+            this.data[0].checked = true
+          }
+        }
+      })
+    },
+    navClick(index) {
+      this.data.forEach(item => {
+        item.checked = false
+      })
+      this.data[index].checked = true
+      // this.$router.push(this.data[index].path)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-shadow-blue {
+  position: fixed;
+  width: 300px;
+  left: 0;
+  z-index: 2;
+  background-color: white;
+  box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
+}
+.item {
+  background-color: #efefef;
+  height: 40px;
+  margin: 10px;
+  border-radius: 10px;
+}
+</style>

src/layout/top.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-row class="flex flex-align-center flex-justify-between top">
+    <el-col :span="12">
+      <div class="flex flex-justify-start flex-align-center padding">
+        <el-icon :size="20">
+          <Filter />
+        </el-icon>
+        <el-breadcrumb class="ml-20" separator="/">
+          <el-breadcrumb-item v-for="item in nav.menus" :key="item.id">
+            <a :href="item.path">{{ item.name }}</a>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="flex-child-average flex-justify-end flex padding-right">
+        <div class="padding flex flex-align-center">
+          <el-avatar
+            class="mr-10"
+            :size="30"
+            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+          />
+          <el-dropdown @command="dropDown">
+            <span class="flex flex-center">
+              {{ user.info.user_name }}
+              <el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="info">个人中心</el-dropdown-item>
+                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="js">
+import navStore from '../store/nav.js'
+import { useStore } from '../store/user.js'
+
+export default {
+  name: 'top',
+  setup() {
+    const nav = navStore()
+    const user = useStore()
+    return { nav, user }
+  },
+  created() {},
+  methods: {
+    dropDown(res) {
+      if (res === 'info') {
+        this.$message.success('个人中心')
+      } else if (res === 'logout') {
+        this.nav.cleanMenu()
+        this.$message.success('退出登录')
+        this.$router.replace('/login')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+  height: 60px;
+  z-index: 1;
+  background-color: white;
+  top: 0;
+  left: 300px;
+  right: 0;
+  position: fixed;
+  border-bottom: whitesmoke solid 1px;
+  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
+}
+
+.avatar {
+  background-color: #c4c3c3;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+}
+</style>

src/views/home/index.vue

@@ -1,30 +1,7 @@
 <template>
-  <screen class="flex content flex-col">
-    <div class="top">22</div>
-    <div class="full-width flex">
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-    </div>
-
-    <div class="full-width flex">
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-      <div class="box flex flex-center blod font-32" ref="content">
-        {{ width }} * {{ height }}
-      </div>
-    </div>
-  </screen>
+  <div>
+    <el-button type="primary" size="default">首页</el-button>
+  </div>
 </template>
 
 <route>
@@ -37,9 +14,7 @@
 <script>
 import { useStore } from '../../store/user.js'
 import tokenStore from '../../store/token.js'
-import screen from '../../components/screen.vue'
 export default {
-  components: { screen },
   setup() {
     const store = useStore()
     const token = tokenStore()
@@ -51,36 +26,7 @@ export default {
       height: '22'
     }
   },
-  mounted() {
-    this.init()
-    this.onresize = this.debounce(() => this.init(), 100)
-    window.addEventListener('resize', this.onresize)
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onresize)
-  },
   methods: {
-    debounce(fn, t) {
-      const delay = t || 500
-      let timer
-      return function () {
-        const args = arguments
-        if (timer) {
-          clearTimeout(timer)
-        }
-        const that = this
-        timer = setTimeout(() => {
-          timer = null
-          fn.apply(that, args)
-        }, delay)
-      }
-    },
-    init() {
-      const box = this.$refs.content.offsetWidth
-      this.width = box
-      this.height = this.$refs.content.offsetHeight
-      console.log(this.width)
-    },
     push() {
       this.$router.push({ path: '/setting', query: { id: 12, type: 'test' } })
     }

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
+import Layouts from 'vite-plugin-vue-layouts'
 import path from 'path'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
@@ -17,6 +18,10 @@ export default defineConfig({
       ],
       exclude: ['**/components/*.vue'] // 排除组件
     }),
+    Layouts({
+      layoutsDirs: 'src/layout',
+      defaultLayout: 'index'
+    }),
     AutoImport({
       resolvers: [ElementPlusResolver()]
     }),
@@ -58,7 +63,7 @@ export default defineConfig({
         // target: 'https://dev.wutongresearch.club/api',
         target: 'http://192.168.31.181:8110',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        rewrite: path => path.replace(/^\/api/, '')
       }
     }
   }