全局layout

src/config/menus.ts

@@ -6,7 +6,7 @@ export const menus_gyt: menuType[] = [
       title: "管乐团首页",
       icon: "",
       meta: {
-         routeType: "singlepage"
+         routeType: "layout"
       },
       children: []
    }
@@ -18,7 +18,7 @@ export const menus_gym: menuType[] = [
       title: "管乐迷首页",
       icon: "",
       meta: {
-         routeType: "singlepage"
+         routeType: "layout"
       },
       children: []
    }

src/libs/utils.ts

@@ -33,16 +33,15 @@ export const generateAsyncRoutes = (menus: menuType[], components: asyncComponen
          singlepageRoutes
       }
    }
-   //const { layoutRoutes, singlepageRoutes } = menusAsyncRoutes(menus)
-   const { singlepageRoutes } = menusAsyncRoutes(menus)
+   const { layoutRoutes, singlepageRoutes } = menusAsyncRoutes(menus)
    const asyncRoutes: RouteRecordRaw[] = [
-      // {
-      //    path: "/layout",
-      //    name: "layout",
-      //    redirect: "/noRedirect",
-      //    component: components["layout"],
-      //    children: layoutRoutes
-      // },
+      {
+         path: "/layout",
+         name: "layout",
+         redirect: "/noRedirect",
+         component: components["layout"],
+         children: layoutRoutes
+      },
       ...singlepageRoutes
    ]
    //默认获取第一个菜单为首页

src/router/routers.ts

@@ -1,5 +1,5 @@
 import { RouteRecordRaw, RouteComponent } from "vue-router"
-
+import layout from "@/viewsframe/layout"
 /** 静态路由 */
 export const constRoutes: Array<RouteRecordRaw> = [
    {
@@ -14,5 +14,6 @@ export interface asyncComponentsType {
 }
 /** 动态路由 */
 export const asyncComponents: asyncComponentsType = {
-   ...componentsConfig
+   ...componentsConfig,
+   layout
 }

src/viewsframe/errorPage/errorPage.vue

@@ -7,7 +7,7 @@
    <div class="errorPage">
       <div class="error">
          <div>您访问的页面不存在!</div>
-         <ElButton type="primary" @click="handleGoHome">返回首页</ElButton>
+         <ElButton color="#F5C42D" type="primary" @click="handleGoHome">返回首页</ElButton>
       </div>
    </div>
 </template>

src/viewsframe/layout/index.ts

@@ -0,0 +1,2 @@
+import layout from "./layout.vue"
+export default layout

src/viewsframe/layout/layout.vue

@@ -0,0 +1,102 @@
+<!--
+* @FileDescription: layout
+* @Author: 黄琪勇
+* @Date:2024-03-20 18:06:33
+-->
+<template>
+   <div class="layout">
+      <div class="head">
+         <el-dropdown class="avatar-con" trigger="click" @visible-change="visibleChange">
+            <div class="avatar">
+               <div class="imgCon"><img :src="userInfo.avatar" /></div>
+               <div class="name">{{ userInfo.username }}</div>
+               <img class="horn" :class="{ isVisible: visible }" src="@/img/layout/horn.png" />
+            </div>
+            <template #dropdown>
+               <el-dropdown-menu>
+                  <el-dropdown-item @click="logout">
+                     <span>退出登录</span>
+                  </el-dropdown-item>
+               </el-dropdown-menu>
+            </template>
+         </el-dropdown>
+      </div>
+      <RouterView />
+   </div>
+</template>
+
+<script setup lang="ts">
+import userStore from "@/store/modules/user"
+import { computed } from "vue"
+import { ref } from "vue"
+
+const userStoreHook = userStore()
+
+const userInfo = computed(() => {
+   return userStoreHook.userInfo
+})
+
+const visible = ref(false)
+function visibleChange(value: boolean) {
+   visible.value = value
+}
+function logout() {}
+</script>
+
+<style lang="scss" scoped>
+.layout {
+   width: 100%;
+   min-height: 100%;
+   background: linear-gradient(180deg, #ffd884 0%, #ffa943 100%);
+   box-shadow: 0px 11px 15px 0px #63bd73, inset 0px 1px 14px 0px rgba(255, 255, 255, 0.5);
+   .head {
+      padding-top: 26px;
+      padding-right: 54px;
+      display: flex;
+      flex-direction: row-reverse;
+      .avatar-con {
+         cursor: pointer;
+         padding-left: 30px;
+         padding-right: 14px;
+         height: 46px;
+         background: #edeff0;
+         border-radius: 23px;
+         border: 5px solid #fff8f8;
+         position: relative;
+         .avatar {
+            display: flex;
+            align-items: center;
+         }
+         .imgCon {
+            position: absolute;
+            top: 50%;
+            left: -30px;
+            transform: translate(0, -50%);
+            width: 62px;
+            height: 62px;
+            border: 4px solid #ffffff;
+            border-radius: 50%;
+            > img {
+               border-radius: 50%;
+               width: 100%;
+               height: 100%;
+            }
+         }
+         .name {
+            margin-left: 6px;
+            font-size: 18px;
+            color: #244b55;
+            font-weight: 500;
+            min-width: 56px;
+            text-align: center;
+         }
+         .horn {
+            margin-left: 8px;
+            &.isVisible {
+               transform: rotate(180deg);
+            }
+         }
+      }
+   }
+}
+</style>