likes
comments
collection
share

汉得Choerodon UI：开源企业级前端开发利器，极致效率、轻松定制、统一风格

作者站长头像
站长
· 阅读数 14

组件库的起源

随着前端技术的不断演进和页面需求的日益复杂化，传统的 HTML 和 CSS 页面构建方式已经无法满足代码复用、易维护、可定制、风格统一的需求。 为了解决这些问题，前端开发者尝试将常用的代码和样式封装成可复用的组件，以便在不同的项目中重复使用。这种组件化的思想发展成为了现在流行的前端组件库。

Choerodon UI 的诞生

中后台企业项目业务复杂、产品独立，如何提高前端开发效率、稳定支持项目交付是痛点。 在该背景下，汉得自研 DataSet 数据源，基于 DataSet 结合组件，实现数据驱动，专为中后台企业项目提高开发效率研发了 Choerodon UI 。其也成为汉得中台 HZERO 体系中使用的核心组件库，已稳定支持上千个项目。

Choerodon UI 的特点

  • 全面高质量：提供 90+ 开箱即用的高质量 React 组件
  • 高效数据驱动：基于 DataSet 实现数据驱动，优雅地管理和操作数据
  • 灵活属性配置：支持全局、模块、组件、字段等多层级配置，使用灵活、可复用、易维护
  • 国际化支持：提供标准的国际化方案，支持语言扩展，方便海外用户
  • 丰富主题支持：内置多种主题，支持变量级细节定制化主题
  • VsCode 插件：开发插件支持代码补全和内置文档功能，提升开发效率
  • 文档全面清晰：提供详细文档、教程和丰富示例，助力快速上手和开发
  • 快速支持响应：项目开源维护，提供工单系统，积极处理问题

组件全面且高质量

Choerodon UI 提供 90+ 开箱即用的高质量 React 组件，覆盖中后台常用 UI 组件需求，并不断优化、扩展中。 以下展示各分类下的部分组件，更多组件等您探索使用。

汉得Choerodon UI：开源企业级前端开发利器，极致效率、轻松定制、统一风格

高效数据驱动

中后台项目中复杂的业务场景、繁琐的数据流转、控制是影响前端开发效率的重要原因。如何高效、优雅的处理数据，解决复杂场景和需求？ Choerodon UI 通过自研数据源 DataSet，实现数据驱动，结合专为中后台项目研发的标准组件（LOV/Attachment...）等，大大提升开发效率，轻松支持各种需求场景。DataSet 支持丰富的 API 和事件，可以快速构建复杂的页面，同时轻松应对数据规模的扩大和变化。

汉得Choerodon UI：开源企业级前端开发利器，极致效率、轻松定制、统一风格

（前端组件基于 DataSet，数据流转和组件交互图）

灵活属性配置

实际项目中，属性、字段复用场景很多，为避免维护代码繁琐，Choerodon UI 提供了更为灵活的配置方式：

  1. 全局化配置: 为组件提供统一的全局化配置，实现项目层标准统一化
  2. 模块化配置: 为组件提供局部统一的配置，支持模块下高优先全局层统一
  3. 组件层配置：针对当前组件使用场景，对组件属性进行单独配置
  4. DS 字段配置：针对数据源字段对象层级，字段配置可关联应用到各个组件，高度复用

灵活的属性可根据需求进行不同层级配置，优先级从低到高，涵盖所有复用场景，便于代码维护管理及设计。

国际化支持

Choerodon UI 提供标准的国际化方案，内置常见的中英日语言文案，同时支持 30+ 语言扩展，方便海外用户群体的使用。

丰富主题支持

支持多种主题：为满足业务和品牌上多样化的视觉需求，组件库结合 UED 项目提供了一些官方主题。支持鲸海蓝、凌莺蓝、冰峰白、风铃紫等多种主题，主题样式经过汉得设计中心团队精细打磨，为您提供美好的视觉体验。

支持主题定制：除了默认支持的多种主题，Choerodon UI 支持 CSS 变量级主题定制的能力，使得开发者可以根据自己的需求进行扩展现有主题或者自定义全新主题，从而实现符合自己风格的主题效果。

VsCode 插件

开发中，我们经常会遇到组件名称记不起、属性名称太多记不全等问题，为了解决这些问题，Choerodon UI 推出了一款 VsCode 插件：C7N-DATASET-PLUGIN 其代码补全、内置代码、内置文档的功能将帮助大家更舒适、更高效、更高质量的进行编码。

示例全面清晰

Choerodon UI 提供了完整的官网文档，包含官网指南、文档、教程、组件几个页签。详细介绍了组件的功能、用法、参数和事件等方面。 在组件页面下，您可以找到大量可交互示例，即时编辑生效。对于常用 API，您可以点击进入二级界面查看其详解。结合该 API 下针对性的示例，可以进一步理解其使用方法。 此外，Choerodon UI 还提供有视频教学，帮助您快速上手 Choerodon UI。

快速支持响应

您一定在担心，如果有新组件需求怎么办？如果在具体实现过程中遇到难题怎么办？ 请不要担心！我们的团队主打一个快速响应；有项目支持群，随时解答您的疑问，并定时主动跟进项目反馈。

当然您也可以通过工单的方式与我们取得联系。 除此之外，Choerodon UI 是开源项目。可以通过 GitHub 等方式参与到 Choerodon UI 的开源共建。

更多内容

接下来我们会持续推出组件相关更多内容，敬请期待！

  • 性能篇
    • 虚拟滚动
    • 聚合视图
    • 行列组合
    • ......
  • 体验篇
    • 动态筛选条
    • 条码
    • 动画优化
    • 快捷键
    • ......
  • 其他篇

相关资料

邀您共建

欢迎各位朋友提供宝贵想法和建议，我们诚挚的邀请您和我们一起共建 Choerodon UI，期待您的 Issue！ 官网：open.hand-china.com/choerodon-u… github：github.com/open-hand/c… 工单：open.hand-china.com/