Skip to content

前台布局(HomeLayout)

简介

前台布局是系统提供的简洁版布局方案,专为前台展示页面、登录页面、错误页面等场景设计。与功能完整的后台管理布局不同,HomeLayout 采用极简设计理念,去除了侧边栏、顶部导航栏、标签视图等复杂组件,仅保留核心的内容渲染功能,为用户提供纯净、专注的浏览体验。

组件架构

layouts/
└── HomeLayout.vue          # 前台布局主组件

组件详解

HomeLayout.vue - 前台布局容器

极简的布局容器,专注于内容展示而无复杂的导航结构。

组件结构

vue
<template>
  <div class="" :style="{ '--current-color': theme }">
    <!-- 主内容区 -->
    <div class="">
      <!-- 主内容 -->
      <app-main />
    </div>
  </div>
</template>

<script setup lang="ts" name="HomeLayout">
import AppMain from './components/AppMain/AppMain.vue'
import { SystemConfig } from '@/systemConfig'

// 获取应用设置
const theme = computed(() => useThemeStore().theme)

// 组件挂载时初始化
onMounted(() => {
  // 建立实时通信连接
  webSocket.initialize()
  webSocket.connect()

  useSSE(SystemConfig.api.baseUrl + '/resource/sse')
})
</script>

设计理念

极简主义设计

HomeLayout 遵循"少即是多"的设计哲学:

  • 去除冗余:移除所有非必要的UI元素
  • 专注内容:让用户关注核心内容而非界面装饰
  • 减少干扰:避免复杂的导航和操作影响用户体验
  • 提升性能:更少的组件意味着更快的加载速度

适用场景

HomeLayout 特别适用于以下场景:

场景类型具体应用特点
登录认证登录页、注册页、忘记密码页需要用户专注于表单填写
错误页面404页面、500页面、无权限页简洁清晰的错误信息展示
引导页面欢迎页、帮助页、引导流程突出重点内容和操作
展示页面产品介绍、公司简介、公告内容为主的静态展示
移动端页面H5页面、微信小程序页面移动端友好的简洁布局

核心功能

主题色集成

typescript
// 主题色响应式计算
const theme = computed(() => useThemeStore().theme)

// 通过CSS变量应用主题色
:style="{ '--current-color': theme }"

HomeLayout 保持与主系统的主题色一致性,确保前台页面与后台管理界面的视觉统一。

实时通信集成

typescript
onMounted(() => {
  // 建立WebSocket连接
  webSocket.initialize()
  webSocket.connect()

  // 启用SSE服务端推送
  useSSE(SystemConfig.api.baseUrl + '/resource/sse')
})

即使是简洁的前台布局,依然保持与后台系统的实时通信能力,确保数据的实时性。

AppMain 集成

HomeLayout 复用了主系统的 AppMain 组件,继承其完整功能:

  • 路由视图渲染:支持 Vue Router 的动态路由
  • 组件缓存:keep-alive 缓存机制
  • 页面动画:平滑的页面切换效果
  • iframe 支持:外部页面内嵌能力

路由配置

基础路由配置

typescript
// router/index.ts
{
  path: '/home',
  component: () => import('@/layouts/HomeLayout.vue'),
  children: [
    {
      path: '',
      name: 'Home',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '首页',
        requiresAuth: false
      }
    }
  ]
}

与主布局的对比

特性HomeLayoutLayout
复杂度极简功能完整
组件数量1个核心组件10+个组件
导航系统✅ 侧边栏+顶部导航
标签视图✅ 多标签页管理
用户工具✅ 搜索、通知、设置等
权限控制基础完整的权限体系
适用场景展示页面、登录页后台管理系统
加载性能⚡ 极快🐌 相对较慢
维护成本💚 低🔶 中等

性能优化

组件懒加载

typescript
// 路由级别的懒加载
const HomeLayout = () => import('@/layouts/HomeLayout.vue')

// 页面组件懒加载
{
  path: '/login',
  component: HomeLayout,
  children: [
    {
      path: '',
      component: () => import('@/views/auth/login/index.vue')
    }
  ]
}

资源预加载

typescript
// 关键资源预加载
onMounted(() => {
  // 预加载常用图片
  const images = [
    '/assets/logo.png',
    '/assets/bg-pattern.jpg'
  ]
  
  images.forEach(src => {
    const img = new Image()
    img.src = src
  })
})

代码分割

typescript
// 按需导入工具函数
const loadUtils = () => import('@/utils/common')
const loadValidators = () => import('@/utils/validators')

// 动态导入重型组件
const loadChart = () => import('@/components/Chart.vue')

最佳实践

✅ 推荐做法

  1. 保持简洁

    vue
    <!-- ✅ 简洁的结构 -->
    <template>
      <div class="container">
        <main class="content">
          <router-view />
        </main>
      </div>
    </template>
  2. 响应式优先

    scss
    // ✅ 移动端优先的响应式设计
    .container {
      padding: 15px;
      
      @media (min-width: 768px) {
        padding: 30px;
        max-width: 1200px;
        margin: 0 auto;
      }
    }
  3. 语义化HTML

    vue
    <!-- ✅ 语义化的标签 -->
    <template>
      <main role="main">
        <header class="page-header">
          <h1>页面标题</h1>
        </header>
        <section class="page-content">
          <!-- 内容 -->
        </section>
      </main>
    </template>

❌ 避免做法

  1. 添加不必要的组件

    vue
    <!-- ❌ 在HomeLayout中添加复杂组件 -->
    <template>
      <div>
        <Navbar />  <!-- 不需要 -->
        <Sidebar /> <!-- 不需要 -->
        <AppMain />
      </div>
    </template>
  2. 复杂的状态管理

    typescript
    // ❌ 过度使用状态管理
    const homeStore = defineStore('home', {
      state: () => ({
        sidebarVisible: false, // HomeLayout不需要侧边栏状态
        tabsViews: []         // HomeLayout不需要标签页状态
      })
    })
  3. 忽略无障碍访问

    vue
    <!-- ❌ 缺少语义化和无障碍支持 -->
    <div class="title">标题</div>
    
    <!-- ✅ 正确的语义化 -->
    <h1 class="title">标题</h1>

扩展开发

添加全局组件

typescript
// 在HomeLayout中添加全局组件
import GlobalLoading from '@/components/GlobalLoading.vue'
import GlobalMessage from '@/components/GlobalMessage.vue'

// 组件注册
app.component('GlobalLoading', GlobalLoading)
app.component('GlobalMessage', GlobalMessage)

自定义主题

scss
// 为HomeLayout定制专属主题
.home-layout {
  // 自定义调色板
  --home-primary: #667eea;
  --home-secondary: #764ba2;
  --home-accent: #f093fb;
  
  // 应用自定义颜色
  background: linear-gradient(135deg, var(--home-primary) 0%, var(--home-secondary) 100%);
  
  // 自定义组件样式
  .custom-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
}

集成第三方库

typescript
// 为HomeLayout集成特定的第三方库
import { createApp } from 'vue'
import AOS from 'aos' // 动画库
import 'aos/dist/aos.css'

// 在HomeLayout挂载时初始化
onMounted(() => {
  // 初始化动画库
  AOS.init({
    duration: 800,
    easing: 'ease-in-out',
    once: true
  })
})

故障排除

常见问题

  1. 样式冲突

    scss
    // 问题:与主系统样式冲突
    // 解决:使用作用域样式
    .home-layout {
      // 重置可能冲突的样式
      * {
        box-sizing: border-box;
      }
      
      // 使用特定的类名避免冲突
      .home-specific-class {
        // 样式定义
      }
    }
  2. 路由配置错误

    typescript
    // 问题:子路由无法正常显示
    // 解决:确保路由配置正确
    {
      path: '/home',
      component: HomeLayout,
      children: [
        {
          path: '', // 重要:空路径作为默认子路由
          component: HomePage
        }
      ]
    }
  3. 主题色不生效

    typescript
    // 问题:CSS变量未正确应用
    // 解决:确保计算属性正确绑定
    const theme = computed(() => useThemeStore().theme)
    
    // 确保模板中正确使用
    :style="{ '--current-color': theme }"

总结

HomeLayout 作为系统的简洁版布局方案,以极简设计和纯净体验为核心理念,为前台展示、用户认证、错误处理等场景提供了优雅的解决方案。通过去除复杂的导航和管理功能,HomeLayout 让用户能够专注于核心内容,同时保持了与主系统的技术一致性和主题协调性。

合理使用 HomeLayout,能够为不同类型的页面选择最适合的布局模式,既保证了功能的完整性,又提升了用户体验和系统性能。在开发过程中,应该根据页面的实际需求和用户场景,在 HomeLayout 和完整的 Layout 之间做出明智的选择。