OpenTiny

详情介绍

OpenTiny是华为云和流程IT团队多年内部实践的结晶，经过华为内外众多大型项目的打磨后正式开源。它的设计初衷是解决大型企业级应用开发中的两大痛点：一是不同技术栈带来的维护成本，二是UI一致性难以保证。通过提供统一的组件规范和工具链，OpenTiny让团队即使混用Vue和Angular，也能保持界面风格统一、交互体验一致。

这个项目包含三个核心产品：TinyVue是一款功能强大的Vue组件库，支持Vue 2和Vue 3，你可以平滑升级而无需重写代码；TinyNG是针对Angular开发者的专业组件库，同样覆盖了后台管理系统所需的各类组件；TinyCLI则是配套的命令行工具，提供脚手架、构建优化、代码检查等能力，让项目初始化和管理更加规范。

OpenTiny最特别的地方在于它的“跨端适配”能力。同一套组件代码，通过简单的配置就能自动适配PC、平板、手机甚至大屏显示，这在做响应式企业应用时特别实用。它的主题系统也非常灵活，你可以通过在线主题配置平台，拖拽调整颜色、圆角、间距，实时预览效果，然后一键下载主题包应用到项目中。

除了基础的组件库，OpenTiny还提供了低代码引擎TinyEngine。这是一个可视化搭建平台，业务人员可以通过拖拽组件快速生成页面，开发者则可以在此基础上进行二次开发和集成。这种模式特别适合那些需要频繁迭代后台管理界面的团队，能大幅减少重复劳动。

作为一个开源项目，OpenTiny在GitHub上保持着活跃的更新，社区贡献者包括华为内部的工程师和外部的开发者。项目提供了完善的中英文文档，还有在线示例和社区支持渠道，你可以通过GitHub Issues、微信群等方式获取帮助或参与讨论。

官网入口地址

官网入口网址：https://opentiny.design/
（注意：官网链接目前无法访问，建议优先访问GitHub项目页）

下载地址

开源项目地址：https://github.com/opentiny/tiny-vue （以TinyVue为例，他组件可在opentiny组织下找到）

功能介绍

多技术栈组件库

OpenTiny提供了两套完整的组件库，覆盖主流前端框架：

• TinyVue：为Vue生态打造，同时支持Vue 2.6、Vue 2.7和Vue 3.0。这意味着你可以在同一个项目中混合使用不同Vue版本，或者从老版本平滑升级。它包含了60+个高质量组件，从基础的按钮、表格、表单，到复杂的树形控件、穿梭框、日程安排，应有尽有。

• TinyNG：针对Angular开发者的组件库，遵循Angular的设计规范和实践。提供了与TinyVue对应的组件集，保证跨技术栈项目的视觉一致性。

跨端适配能力

OpenTiny的组件内置了响应式设计，能自动适应不同屏幕尺寸：

• PC端：标准的桌面交互，支持键盘导航、右键菜单等

• 移动端：触mō优化，手势支持，移动端弹窗适配

• 大屏：针对数据可视化场景优化，支持超大尺寸和缩放

• 混合适配：同一个页面可以同时包含PC和移动组件，自动切换

主题配置系统

OpenTiny提供了灵活的主题定制能力：

• 在线配置：访问主题配置平台，可视化调整品牌色、功能色、边框圆角、阴影、字体等

• 实时预览：调整参数时右侧组件实时变化，所见即所得

• 主题导出：配置完成后下载主题包，通过几行代码集成到项目中

• 多主题切换：支持运行时动态切换主题，比如日间模式/夜间模式

命令行工具TinyCLI

配套的开发工具链包含多个实用功能：

• 项目脚手架：一键生成符合规范的项目结构，内置代码规范、提交规范

• 组件创建：快速生成新组件的模板代码

• 构建优化：针对组件库的按需加载优化，自动处理依赖关系

• 代码检查：集成了ESLint、Stylelint，保持代码风格一致

• 单元测试：内置测试运行器，方便编写和运行组件测试

低代码引擎TinyEngine

可视化搭建平台的核心能力：

• 拖拽布局：通过拖拽组件到画布，快速搭建页面结构

• 属性面板：右侧实时编辑组件属性，所见即所得

• 数据模拟：支持配置模拟数据，预览真实效果

• 代码生成：导出标准的前端代码，可继续手工开发

• 扩展机制：支持接入自定义组件和业务逻辑

国际化支持

OpenTiny内置了完善的多语言方案：

• 语言包：支持简体中文、繁体中文、英文、日文等主流语言

• 动态切换：运行时无缝切换语言，无需刷新页面

• 日期时间：自动适配当地日期格式、星期显示

• 数字货币：支持不同地区的货币符号和格式

无障碍访问

组件库遵循WAI-ARIA规范，确保可访问性：

• 键盘操作：所有组件都支持纯键盘操作

• 屏幕阅读器：添加了适当的ARIA标签，读屏软件可准确播报

• 高对比度：支持Windows高对比度模式

• 焦点管理：合理的焦点顺序和视觉提示

企业级特性

针对大型项目特别设计的功能：

• 虚拟滚动：表格和列表支持海量数据渲染，性能稳定

• 权限控制：组件级别的权限校验，集成常见权限模型

• 操作日志：关键操作可记录用户行为

• 浏览器兼容：支持IE11及主流现代浏览器

应用场景

大型企业后台系统

某世界500强企业的内部管理系统，原本有Vue和Angular两个技术栈的团队并行开发，界面风格差异大，维护成本高。引入OpenTiny后，两个团队使用同一套设计规范，组件表现一致，设计资源的复用率提升了60%。同时主题配置功能让系统轻松适配了不同子品牌的视觉要求。

云服务控制台

一家云计算公司用OpenTiny重构了他们的用户控制台。复杂的资源管理页面用表格组件配合虚拟滚动，即使管理数万个云主机也能流畅操作。多级菜单和权限组件集成了他们的RBAC权限模型，不同角色看到的功能入口自动过滤。

低代码开发平台

某软件公司基于TinyEngine构建了面向客户的低代码开发平台。实施顾问通过拖拽就能快速搭建业务表单和工作流，客户反馈周期从原来的2周缩短到3天。对于复杂的定制需求，开发者可以导出代码继续开发，兼顾了效率和灵活性。

跨端企业应用

一家物流公司的移动办公应用需要同时在手机、平板、PC上使用。用OpenTiny的响应式组件，一套代码适配所有终端。仓库管理员用手持终端扫描，办公室人员用PC审批，调度中心用大屏看板，界面体验一致，开发维护成本大幅降低。

必要补充信息

定价模式

OpenTiny是免费的开源项目，采用MIT许可证。这意味着你可以免费用于个人项目、商业项目，甚至可以修改源码后闭源使用。华为云也有基于OpenTiny的商业支持服务，比如技术咨询、定制开发、培训等，但这部分是可选的增值服务，开源版本本身功能完整，无需付费。

开源社区

项目在GitHub上由opentiny组织管理，包含多个仓库：

• tiny-vue：Vue组件库主仓库

• tiny-ng：Angular组件库

• tiny-cli：命令行工具

• tiny-engine：低代码引擎

• tiny-theme：主题配置平台
  社区非常欢迎贡献，你可以通过提Issue报告bug、提交Pull Request贡献代码、在Discussions参与讨论等方式加入。

学习资源

官方提供了完善的学习路径：

• 文档网站：详细的API说明和示例代码

• 在线示例：可以直接运行的代码片段

• 设计资源：Figma设计文件，方便设计师和开发对接

• 技术博客：团队成员分享的实践和原理剖析

• B站视频：入门教程和功能演示

应用示例

某金融科技公司的信贷审批系统，原来开发一个简单的审批页面需要2天，用OpenTiny后，预置的审批流程组件配合低代码引擎，2小时就能完成。表格组件内置了排序、筛选、导出功能，原来需要手写的功能现在直接配置即可。整体开发效率提升了3倍以上。

OpenTiny常见问题