当前位置：首页 > news >正文

博客2：通用组件开发与布局系统

news 2026/6/4 7:19:04

一、开发背景

在健康管理系统中，用户界面的一致性和易用性是非常重要的。为了提高开发效率和保证界面的统一性，我们需要开发一系列通用组件和布局系统。这些组件将在整个应用中被多次复用，不仅可以减少代码冗余，还能确保用户在不同页面的操作体验一致。作为前端开发负责人，我负责设计和实现这些通用组件和布局系统，为整个应用奠定基础。

二、技术实现

1. 通用组件设计

Header 组件

- 功能：展示应用标题、用户信息、通知和设置入口
- 实现：

<template> <header class="header"> <div class="header-left"> <h1 class="app-title">AI-HEALTH</h1> </div> <div class="header-right"> <el-dropdown trigger="click" @command="handleUserMenu"> <span class="user-info"> <img :src="user.avatar" class="user-avatar" /> <span>{{ user.username }}</span> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="profile">个人中心</el-dropdown-item> <el-dropdown-item command="settings">设置</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </header> </template>

- 亮点：使用Element Plus的Dropdown组件实现用户菜单，响应式设计适配不同屏幕尺寸

Sidebar 组件

- 功能：提供应用导航菜单，支持折叠/展开功能
- 实现：

<template> <aside class="sidebar" :class="{ 'sidebar-collapsed': isCollapsed }"> <div class="sidebar-header"> <el-button @click="toggleSidebar" icon="el-icon-s-fold" circle /> </div> <nav class="sidebar-nav"> <el-menu :default-active="activeMenu" @select="handleMenuSelect" :collapse="isCollapsed" > <el-menu-item index="/dashboard"> <el-icon><Home /></el-icon> <span slot="title">仪表盘</span> </el-menu-item> <!-- 其他菜单项 --> </el-menu> </nav> </aside> </template>

- 亮点：实现了菜单的折叠/展开功能，根据路由自动高亮当前菜单项

Layout 组件

- 功能：整合Header和Sidebar，提供应用的整体布局
- 实现：

<template> <div class="layout"> <Header /> <div class="layout-content"> <Sidebar /> <main class="main-content"> <router-view /> </main> </div> </div> </template>

- 亮点：使用flex布局实现响应式设计，适配不同屏幕尺寸

ThemeToggle 组件

- 功能：实现应用的明暗主题切换
- 实现：

<template> <el-switch v-model="isDark" active-text="深色" inactive-text="浅色" @change="toggleTheme" /> </template> <script setup> import { useThemeStore } from '@/stores/themeStore' const themeStore = useThemeStore() const isDark = computed(() => themeStore.isDark) const toggleTheme = (value) => { themeStore.setTheme(value ? 'dark' : 'light') } </script>

- 亮点：使用Pinia管理主题状态，实现主题的持久化存储

2. 响应式布局实现

- 技术：使用CSS Flexbox和媒体查询实现响应式布局
- 实现：

/* 基础布局 */ .layout-content { display: flex; height: calc(100vh - 60px); } .main-content { flex: 1; padding: 20px; overflow-y: auto; } /* 响应式适配 */ @media (max-width: 768px) { .layout-content { flex-direction: column; } .sidebar { height: auto; border-right: none; border-bottom: 1px solid #eaeaea; } }

- 亮点：在小屏幕设备上自动调整布局，确保良好的用户体验

3. 自定义指令

lazyLoad 指令

- 功能：实现图片的懒加载，提高页面加载速度
- 实现：

// directives/lazyLoad.js export default { mounted(el, binding) { const imgSrc = binding.value const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { el.src = imgSrc observer.unobserve(el) } }) }) observer.observe(el) } }

- 亮点：使用IntersectionObserver API实现高效的图片懒加载，减少页面加载时间

三、遇到的问题与解决方案

1. 响应式布局适配问题

问题：在小屏幕设备上，Sidebar和主内容区域的布局显示异常。解决方案：使用媒体查询，在小屏幕设备上将flex布局方向从row改为column，确保内容垂直排列。

2. 主题切换状态管理

问题：主题切换后，刷新页面会恢复默认主题。解决方案：使用localStorage存储主题设置，在应用启动时读取存储的主题设置。

3. 组件间通信

问题：Header和Sidebar组件需要共享用户信息和菜单状态。解决方案：使用Pinia状态管理库，创建userStore和themeStore，实现组件间的数据共享。

4. 图片懒加载性能

问题：大量图片的懒加载可能影响页面滚动性能。解决方案：优化IntersectionObserver的配置，减少不必要的观察，提高性能。

四、效果展示

1.通用组件效果

- Header ：显示应用标题和用户信息，点击用户头像展开菜单
- Sidebar ：提供应用导航菜单，支持折叠/展开功能
- Layout ：整合Header和Sidebar，提供响应式布局
- ThemeToggle ：实现明暗主题切换，实时更新界面样式
- lazyLoad ：图片进入视口时才加载，提高页面加载速度