fix(dashboard): dashboard 分类

Author: wenlan-coder

src/assets/style/index.less

@@ -1 +1 @@
-@import 'base.less'
+@import 'base.less';

src/components/nav-menu/src/nav-menu.vue

@@ -4,7 +4,7 @@
  * @Author: wenlan
  * @Date: 2022-01-27 22:29:28
  * @LastEditors: wenlan
- * @LastEditTime: 2022-02-06 21:02:44
+ * @LastEditTime: 2022-02-06 21:01:12
 -->
 <script setup lang="ts">
 import { PermissionModule } from '@/store/premission/index'
@@ -16,7 +16,8 @@ const route = useRoute()
 const routes = computed(() => {
   return PermissionModule.routes
 })
-computed
+console.log('route', route)
+//computed
 const activeMenu = computed(() => {
   const { meta, name } = route
   // if set path, the sidebar will highlight the path you set

src/router/index.ts

@@ -4,7 +4,7 @@
  * @Author: wenlan
  * @Date: 2022-01-15 16:55:13
  * @LastEditors: wenlan
- * @LastEditTime: 2022-02-05 13:11:41
+ * @LastEditTime: 2022-02-07 16:04:51
  */
 import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
@@ -168,4 +168,6 @@ export function resetRouter() {
   ;(router as any).matcher = (newRouter as any).matcher // reset router
 }
 
+console.log('路由', router.getRoutes())
+
 export default router

src/views/main/Main.vue

@@ -4,15 +4,15 @@
  * @Author: wenlan
  * @Date: 2022-01-23 17:12:21
  * @LastEditors: wenlan
- * @LastEditTime: 2022-02-06 21:04:01
+ * @LastEditTime: 2022-02-07 14:35:33
 -->
 <script setup lang="ts">
-import { markRaw, ref } from 'vue'
+import { ref } from 'vue'
 import NavHeader from '@/components/nav-header'
 import NavMenu from '@/components/nav-menu'
 import { useRoute } from 'vue-router'
-const route = markRaw(useRoute())
 let ISCollapse = ref<boolean>(false)
+const route = useRoute()
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const handleCollapse = (isCollapse: boolean) => {
   console.log(isCollapse)
@@ -31,14 +31,33 @@ const handleCollapse = (isCollapse: boolean) => {
           <nav-header @change-collapse="handleCollapse"></nav-header>
         </el-header>
         <el-main class="page-content">
-          <router-view :key="route.path"> </router-view>
+          <router-view v-slot="{ Component }">
+            <transition name="why" appear>
+              <div :key="(route.name as string)">
+                <component :is="Component"></component>
+              </div>
+            </transition>
+          </router-view>
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>
 
 <style scoped lang="less">
+.why-active {
+  color: red;
+}
+
+.why-enter-from,
+.why-leave-to {
+  opacity: 0;
+}
+
+.why-enter-active,
+.why-leave-active {
+  transition: opacity 1s ease;
+}
 .main {
   position: fixed;
   top: 0;

src/views/main/dashboard/admin/index.vue

@@ -0,0 +1,13 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-02-07 16:24:32
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-02-07 16:25:47
+-->
+<script setup lang="ts"></script>
+
+<template><h1>admin</h1></template>
+
+<style scoped></style>

src/views/main/dashboard/dashboard.vue

@@ -4,12 +4,22 @@
  * @Author: wenlan
  * @Date: 2022-02-03 10:50:45
  * @LastEditors: wenlan
- * @LastEditTime: 2022-02-03 10:50:48
+ * @LastEditTime: 2022-02-07 16:42:49
 -->
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { LoginModule } from '@/store/login/index'
+import { computed } from 'vue'
+import AdminDashboard from './admin/index.vue'
+import EditorDashboard from './editor/index.vue'
+let currentRole = computed(() => {
+  return LoginModule.roles.includes('admin') ? AdminDashboard : EditorDashboard
+})
+</script>
 
 <template>
-  <h1>首页</h1>
+  <div class="dashboard-container">
+    <component :is="currentRole" />
+  </div>
 </template>
 
 <style scoped></style>

src/views/main/dashboard/editor/index.vue

@@ -0,0 +1,14 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: wenlan
+ * @Date: 2022-02-07 16:24:41
+ * @LastEditors: wenlan
+ * @LastEditTime: 2022-02-07 16:25:52
+-->
+<script setup lang="ts"></script>
+<template>
+  <h1>Editor</h1>
+</template>
+
+<style scoped></style>