江西淮然科技有限公司 - HR Components CLI 脚手架

项目概述

江西淮然科技有限公司出品 · 企业级 HR 组件渲染核心库 高性能、可扩展、安全可靠的前端组件渲染引擎，专为管理平台低代码系统打造。

📦 简介

@hr-components-dev/render 是 HR Components 生态体系的核心渲染层，基于 amis 和 Vue 3 构建，提供开箱即用的低代码页面渲染能力。支持动态表单、数据可视化、工作流配置等 HR 场景高频需求，同时集成加密保护机制，保障企业核心业务逻辑安全。

本包通常与 @hr-components-dev/cli 配合使用，实现“开发-加密-部署-运行”一体化流程。

快速开始

环境要求

• Node.js >= 14.0.0
• npm 或 yarn 包管理器

✨ 主要特性

🔥 高性能渲染：基于 amis + React/Vue 混合架构，支持万级数据流畅展示 🔐 代码加密支持：无缝对接 CLI 加密流程，运行时自动解密（需配合 decrypt 工具） 🌐 多端适配：响应式设计，完美支持 PC、平板及企业微信/钉钉内嵌 ⚙️ 灵活扩展：支持自定义组件注册、API 代理、主题定制 📊 Monaco Editor 集成：内置代码编辑器，支持 JSON Schema 可视化配置

获取帮助

import AmisRenderer from '@hr-components-dev/render';

<AmisRenderer ref="amisRef" :debug="debug" :schema="defaultSchema" :data="defaultAmisData" :context="defaultAmisContext" @ready="amisReady" @doRegister="doRegister" />

补充说明：

schema 是 amis 的核心，定义了整个低代码页面的结构。 data 和 context 的区别： data 是当前作用域的数据模型，会随用户交互（如表单输入）自动更新。 context 是只读的上下文变量，通常用于传递全局信息（如用户 ID、租户标识），不会被 amis 修改。 @ready 是最常用的生命周期钩子，常用于保存 amis 实例以便后续操作：

const amisReady = (instance: any) => { amisInstance.value = instance; // 后续可通过 amisInstance.value.updateProps(...) 更新 };