Appearance
tm-ui组件库集成
本文档引用文件
目录
简介
本文档全面阐述了tm-ui组件库在项目中的集成方案，涵盖引入、配置、定制化策略、二次封装机制、主题与国际化支持、性能优化及版本管理实践。tm-ui是一个基于Vue3和TypeScript的现代化UI组件库，为项目提供了一致且可复用的界面元素。
项目结构
项目采用多模块架构，包含codegen、pc、rust、uni四个主要模块。其中，uni模块下的uni_modules/tm-ui目录存放了tm-ui组件库的源码，pc模块则实现了对tm-ui组件的二次封装和集成。
图示来源
本节来源
核心组件
项目通过CustomInput.vue、CustomSelect.vue和DictSelect.vue等自定义组件对tm-ui及Element Plus组件进行二次封装，实现了统一的样式、行为和API简化。这些组件增强了可读性、可维护性和复用性。
本节来源
架构概览
系统采用前后端分离架构，前端基于Vue3和UniApp，后端使用Rust。tm-ui组件库作为UI层的基础，通过pc模块的自定义组件进行适配和扩展，与后端通过GraphQL API进行数据交互。
图示来源
详细组件分析
CustomInput组件分析
CustomInput.vue是对Element Plus的el-input组件的封装，提供了只读模式、对齐方式、自定义插槽等增强功能。
图示来源
本节来源
CustomSelect组件分析
CustomSelect.vue是对Element Plus的ElSelectV2组件的高级封装，支持多选、全选、设为默认、异步数据加载等功能。
图示来源
本节来源
DictSelect组件分析
DictSelect.vue是专门用于系统字典的下拉选择组件，集成了字典数据的自动加载、新增选项功能，实现了业务层面的专用封装。
图示来源
本节来源
依赖分析
项目通过npm管理前端依赖，tm-ui组件库作为uni模块的子模块被引用。pc模块通过Vue的组件系统集成和扩展tm-ui组件，形成了一套完整的UI解决方案。
图示来源
本节来源
性能考虑
- 使用
$shallowRef优化大型选项列表的响应式性能 - 采用异步数据加载避免阻塞主线程
- 通过
v-if和v-else实现只读和编辑模式的条件渲染，减少不必要的DOM操作 - 利用
watch的deep选项精确控制响应式更新
故障排除指南
- 组件不显示：检查
main.ts中是否正确引入和注册组件 - 数据不加载：确认
method属性是否正确指向数据获取函数 - 样式异常：检查SCSS变量是否正确配置，确保UnoCSS正常工作
- 国际化失效：验证
i18n配置是否正确初始化
本节来源
结论
tm-ui组件库通过合理的二次封装策略，成功集成到项目中，提供了统一、高效、可维护的UI解决方案。通过自定义组件的抽象，实现了业务逻辑与UI表现的分离，提高了开发效率和代码质量。建议持续关注tm-ui的版本更新，及时进行兼容性测试和升级。