feat: 组件模块化

src/layouts/components/AppFooter/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <span>Copyright (c) 2025 eco-Boot-web</span>
+</template>
+<script lang="ts" name="AppFooter"></script>
+<style scoped lang="scss"></style>

src/layouts/components/AppLogo/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="logo flx-center">
+    <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+    <span class="logo-text">{{ title }}</span>
+  </div>
+</template>
+<script lang="tsx" setup name="AppLogo">
+const title = import.meta.env.VITE_APP_TITLE
+</script>
+<style lang="scss" scoped>
+@use '../index';
+</style>

src/layouts/components/AppMain/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <router-view v-slot="{ Component, route }">
+    <transition appear name="fade-transform" mode="out-in">
+      <keep-alive>
+        <component :is="Component" :key="route.name" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>

src/layouts/components/AppMenu/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-menu ellipsis mode="horizontal" :popper-offset="0" style="max-width: 900px">
+    <el-menu-item index="1">首页</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>权限中心</template>
+      <el-menu-item index="2-1">用户管理</el-menu-item>
+      <el-menu-item index="2-2">角色管理</el-menu-item>
+      <el-menu-item index="2-3">菜单管理</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-sub-menu index="3">
+      <template #title>组织架构</template>
+      <el-menu-item index="3-1">职位管理</el-menu-item>
+      <el-menu-item index="3-2">组织管理</el-menu-item>
+      <el-menu-item index="3-3">item three</el-menu-item>
+      <el-sub-menu index="3-4">
+        <template #title>demo</template>
+        <el-menu-item index="3-4-1">item one</el-menu-item>
+        <el-menu-item index="3-4-2">item two</el-menu-item>
+        <el-menu-item index="3-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="4">监控中心</el-menu-item>
+    <el-menu-item index="5">系统配置</el-menu-item>
+  </el-menu>
+</template>

src/layouts/components/AppTools/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="tool-bar-ri">
+    <span class="username" style="margin-right: 8px">{{ userStore.user.userName }}</span>
+    <el-avatar :icon="UserFilled" />
+  </div>
+</template>
+<script lang="tsx" setup name="AppTools">
+import { UserFilled } from '@element-plus/icons-vue'
+
+import { useUserStore } from '@/stores'
+const userStore = useUserStore()
+</script>
+<style lang="scss" scoped>
+@use '../index';
+</style>

src/layouts/components/index.scss

@@ -0,0 +1,20 @@
+.logo {
+  width: 210px;
+  margin-right: 30px;
+  .logo-img {
+    width: 28px;
+    object-fit: contain;
+    margin-right: 6px;
+  }
+  .logo-text {
+    font-size: 21.5px;
+    font-weight: bold;
+    color: var(--el-header-logo-text-color);
+    white-space: nowrap;
+  }
+}
+.tool-bar-ri {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/layouts/container/AppTransverse/index.scss

@@ -27,23 +27,3 @@
   text-align: center;
   border-top: 1px solid var(--border-color);
 }
-.logo {
-  width: 210px;
-  margin-right: 30px;
-  .logo-img {
-    width: 28px;
-    object-fit: contain;
-    margin-right: 6px;
-  }
-  .logo-text {
-    font-size: 21.5px;
-    font-weight: bold;
-    color: var(--el-header-logo-text-color);
-    white-space: nowrap;
-  }
-}
-.tool-bar-ri {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/layouts/container/AppTransverse/index.vue

@@ -1,61 +1,19 @@
 <template>
   <el-container class="layout">
     <el-header>
-      <div class="logo flx-center">
-        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
-        <span class="logo-text">{{ title }}</span>
-      </div>
-      <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="0" style="max-width: 900px">
-        <el-menu-item index="1">首页</el-menu-item>
-        <el-sub-menu index="2">
-          <template #title>权限中心</template>
-          <el-menu-item index="2-1">用户管理</el-menu-item>
-          <el-menu-item index="2-2">角色管理</el-menu-item>
-          <el-menu-item index="2-3">菜单管理</el-menu-item>
-          <el-sub-menu index="2-4">
-            <template #title>item four</template>
-            <el-menu-item index="2-4-1">item one</el-menu-item>
-            <el-menu-item index="2-4-2">item two</el-menu-item>
-            <el-menu-item index="2-4-3">item three</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
-        <el-sub-menu index="3">
-          <template #title>组织架构</template>
-          <el-menu-item index="3-1">职位管理</el-menu-item>
-          <el-menu-item index="3-2">组织管理</el-menu-item>
-          <el-menu-item index="3-3">item three</el-menu-item>
-          <el-sub-menu index="3-4">
-            <template #title>demo</template>
-            <el-menu-item index="3-4-1">item one</el-menu-item>
-            <el-menu-item index="3-4-2">item two</el-menu-item>
-            <el-menu-item index="3-4-3">item three</el-menu-item>
-          </el-sub-menu>
-        </el-sub-menu>
-        <el-menu-item index="4" disabled>Info</el-menu-item>
-        <el-menu-item index="5">Orders</el-menu-item>
-      </el-menu>
-      <div class="tool-bar-ri">
-        <span class="username">Admin</span>
-        <Avatar />
-      </div>
+      <AppLogo />
+      <AppMenu />
+      <AppTools />
     </el-header>
     <el-main>
-      <router-view v-slot="{ Component, route }">
-        <transition appear name="fade-transform" mode="out-in">
-          <keep-alive>
-            <component :is="Component" :key="route.name" />
-          </keep-alive>
-        </transition>
-      </router-view>
+      <AppMain />
     </el-main>
     <el-footer>
-      <span>Copyright (c) 2025 eco-Boot-web</span>
+      <AppFooter />
     </el-footer>
   </el-container>
 </template>
-<script lang="tsx" setup name="LayoutTransverse">
-const title = import.meta.env.VITE_APP_TITLE
-</script>
+<script lang="tsx" setup name="LayoutTransverse"></script>
 <style lang="scss" scoped>
 @use './index';
 </style>

src/types/auto-components.d.ts

@@ -9,7 +9,13 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppClassic: typeof import('./../layouts/container/AppClassic/index.vue')['default']
+    AppFooter: typeof import('./../layouts/components/AppFooter/index.vue')['default']
+    AppLogo: typeof import('./../layouts/components/AppLogo/index.vue')['default']
+    AppMain: typeof import('./../layouts/components/AppMain/index.vue')['default']
+    AppMenu: typeof import('./../layouts/components/AppMenu/index.vue')['default']
+    AppTools: typeof import('./../layouts/components/AppTools/index.vue')['default']
     AppTransverse: typeof import('./../layouts/container/AppTransverse/index.vue')['default']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']