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

一、 开发背景在健康管理系统中用户界面的一致性和易用性是非常重要的。为了提高开发效率和保证界面的统一性我们需要开发一系列通用组件和布局系统。这些组件将在整个应用中被多次复用不仅可以减少代码冗余还能确保用户在不同页面的操作体验一致。作为前端开发负责人我负责设计和实现这些通用组件和布局系统为整个应用奠定基础。二、技术实现1. 通用组件设计Header 组件- 功能 展示应用标题、用户信息、通知和设置入口- 实现 template header classheader div classheader-left h1 classapp-titleAI-HEALTH/h1 /div div classheader-right el-dropdown triggerclick commandhandleUserMenu span classuser-info img :srcuser.avatar classuser-avatar / span{{ user.username }}/span /span template #dropdown el-dropdown-menu el-dropdown-item commandprofile个人中心/el-dropdown-item el-dropdown-item commandsettings设置/el-dropdown-item el-dropdown-item commandlogout退出登录/el-dropdown-item /el-dropdown-menu /template /el-dropdown /div /header /template- 亮点 使用Element Plus的Dropdown组件实现用户菜单响应式设计适配不同屏幕尺寸Sidebar 组件- 功能 提供应用导航菜单支持折叠/展开功能- 实现 template aside classsidebar :class{ sidebar-collapsed: isCollapsed } div classsidebar-header el-button clicktoggleSidebar iconel-icon-s-fold circle / /div nav classsidebar-nav el-menu :default-activeactiveMenu selecthandleMenuSelect :collapseisCollapsed el-menu-item index/dashboard el-iconHome //el-icon span slottitle仪表盘/span /el-menu-item !-- 其他菜单项 -- /el-menu /nav /aside /template- 亮点 实现了菜单的折叠/展开功能根据路由自动高亮当前菜单项Layout 组件- 功能 整合Header和Sidebar提供应用的整体布局- 实现 template div classlayout Header / div classlayout-content Sidebar / main classmain-content router-view / /main /div /div /template- 亮点 使用flex布局实现响应式设计适配不同屏幕尺寸ThemeToggle 组件- 功能 实现应用的明暗主题切换- 实现 template el-switch v-modelisDark active-text深色 inactive-text浅色 changetoggleTheme / /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 图片进入视口时才加载提高页面加载速度2、响应式布局效果- 桌面端 Sidebar和主内容区域水平排列- 平板端 Sidebar可折叠主内容区域自适应- 移动端 Sidebar自动隐藏通过菜单按钮展开五、总结与反思总结- 成功开发了一系列通用组件包括Header、Sidebar、Layout、ThemeToggle等- 实现了响应式布局适配不同屏幕尺寸- 开发了自定义指令lazyLoad提高页面加载速度- 使用Pinia管理应用状态实现组件间的通信反思- 通用组件的设计应更加模块化便于后续扩展- 响应式布局的适配需要考虑更多设备尺寸- 主题切换功能可以进一步优化支持更多自定义主题- 图片懒加载可以结合预加载策略提升用户体验后续计划- 开发健康数据记录组件- 实现数据可视化功能- 集成AI助手功能- 优化用户认证流程- 完善个人中心功能