赵忠林
ca4405638c
- 移除售电业务相关内容，调整为门窗定制安装业务 - 新增 TrustSection 品牌信任区组件，展示品质保障和专业团队 - 新增 CaseShowcase 案例展示区组件，支持横向滚动浏览案例 - 新增 ContactSection 联系方式区组件，提供客服热线和在线咨询服务 - 更新首页布局结构，在热销商品后按序排列新功能模块 - 修复图标导入错误，替换为 NutUI 图标库中存在的图标 - 更新样式文件适配新的页面布局和组件间距 - 修改公告栏内容为门窗业务相关介绍 - 调整页面整体样式和间距，优化用户体验
1.7 KiB
1.7 KiB
2026-03-31 工作记录
修复图标导入错误
问题描述
用户报告项目运行不起来，出现 React 错误 #130。经过检查发现是图标导入问题。
具体问题
- CaseShowcase.tsx：导入了不存在的
Right图标 - ContactSection.tsx：导入了不存在的
MapPin和Wechat图标 - TrustSection.tsx：导入了不存在的
Users图标
解决方案：替换为 NutUI 可用的图标
- Right → ArrowRight (项目其他文件已使用)
- MapPin → Location (地图/位置图标)
- Wechat → Share (分享图标，表示关注/分享)
- Users → People (团队/人群图标)
修复步骤
- 更新 CaseShowcase.tsx 中的图标导入和使用
- 更新 ContactSection.tsx 中的图标导入和使用
- 更新 TrustSection.tsx 中的图标导入和使用
- 验证所有图标都来自
@nutui/icons-react-taro的可用导出列表
构建验证
- 执行
npm run build:weapp，构建成功完成 - 检查 dist/pages/index/index.js，确认所有新组件已正确编译
- 确认没有图标相关的导入错误
技术总结
- 图标库限制：必须使用 NutUI 图标库中实际存在的图标
- 验证方法：查看构建错误信息中的 "possible exports" 列表
- 最佳实践：参考项目中其他文件已成功使用的图标
- 维护记录：在 MEMORY.md 中记录图标替换映射关系
结果
项目现在可以成功构建和运行，所有图标问题已解决。首页底部区域的三部分设计已完全实现：
- 品牌信任区 (TrustSection)
- 案例展示区 (CaseShowcase)
- 联系方式区 (ContactSection)