普通视图

发现新文章，点击刷新页面。

昨天 — 2026年2月14日首页

掘金前端
TinyEngine 2.10 版本发布：零代码 CRUD、云端协作，开发效率再升级！OpenTiny社区
2026年2月14日 11:31

TinyEngine 2.10 版本发布：零代码 CRUD、云端协作，开发效率再升级！

掘金前端

作者 OpenTiny社区

2026年2月14日 11:31

本文由体验技术团队Hexqi原创。

前言

TinyEngine 是一款面向未来的低代码引擎底座，致力于为开发者提供高度可定制的技术基础设施——不仅支持可视化页面搭建等核心能力，更可通过 CLI 工程化方式实现深度二次开发，帮助团队快速构建专属的低代码平台。

无论是资源编排、服务端渲染、模型驱动应用，还是移动端、大屏端、复杂页面编排场景，TinyEngine 都能灵活适配，成为你构建低代码体系的坚实基石。

最近我们正式发布 TinyEngine v2.10 版本，带来多项功能升级与体验优化：模型驱动、登录鉴权、应用中心等全新特性，同时还有Schema面板与画布节点同步、出码源码即时预览、支持添加自定义 MCP 服务器等功能进行了增强，以让开发协作、页面搭建变得更简单、更高效。

开源地址：github.com/opentiny/ti…（欢迎 Star ⭐）
官方网站：opentiny.design/tiny-engine

版本特性总览

核心特性

模型驱动：零代码创建 CRUD
多租户与登录鉴权能力
新增应用中心与模板中心

功能增强

出码支持即时查看代码
自定义 MCP 服务器，扩展 AI 助手能力
画布与 Schema 面板支持同步滚动
页面 Schema CSS 字段格式优化
图表物料更新，组件属性配置平铺优化
多项细节优化与 Bug 修复

体验升级

新官网：UI 全面焕新
新文档：域名迁移与样式升级
新演练场：真实前后端，完整功能体验

新特性详解

1. 【核心特性】模型驱动：零代码极速创建CRUD页面（体验版本）

背景与问题

在传统的后台管理系统开发中，创建一个包含表单、表格和完整 CRUD(增删改查) 功能的页面往往需要开发者：

重复配置相似的表单和表格组件
手动绑定数据源、编写事件处理逻辑
数据模型变更时，同步修改多个组件配置

这种重复性劳动不仅耗时，还容易出错。

核心功能

模型驱动特性通过声明式的数据模型配置，自动生成对应的 UI 组件和数据交互逻辑，实现真正的"零代码"生成数据管理页面。

核心模块：

模块	功能
模型管理器插件	可视化创建数据模型、配置字段和 API，管理模型
内置模型组件	表单、表格、组合表单+表格，基于模型自动生成表单、表格，或组合生成完整 CRUD 页面
模型绑定配置器组件	为模型生成 UI、绑定 CRUD 逻辑

支持的模型字段类型：String（字符串）、Number（数字）、Boolean（布尔）、Date（日期）、Enum（枚举）、ModelRef（关联模型）

价值亮点

开发效率大幅提升：通过配置模型即可生成完整的 CRUD 页面，无需手动配置每个组件
后端自动生成：使用默认接口路径时，自动生成数据库表结构和 CRUD 接口
UI 与接口自动绑定：拖拽组件选择模型后，UI 自动生成，接口自动绑定，一站式完成前后端搭建
支持嵌套模型：字段可关联其他模型，实现复杂数据结构（如用户关联部门）（后续实现）
标准化输出：基于统一模型生成的 UI 组件保证了一致性
灵活扩展：可自定义字段类型和组件映射

使用场景

后台管理系统的数据管理页面
需要频繁进行增删改查操作的业务场景
需要快速原型的项目

快速上手

1. 创建数据模型

打开模型管理器插件，创建数据模型（如"用户信息"）：

配置模型基本信息：中文名称、英文名称、描述
添加模型字段（如姓名、年龄、邮箱等）
配置字段类型、默认值、是否必填等属性

2. 配置接口路径（可选）

创建模型时，可以选择：

使用默认路径：系统自动使用后端模型接口作为基础路径，并在后端自动生成对应的 SQL 表结构和 CRUD 接口
自定义路径：指定自己的接口基础路径，对接已有后端服务

3. 拖拽模型组件到页面

在物料面板中选择模型组件拖拽到画布：

表格模型：生成数据列表
表单模型：生成数据录入表单
页面模型：生成包含搜索、表格、编辑弹窗的完整 CRUD 页面

4. 绑定模型，自动生成

选中组件后，在右侧属性面板：
1）点击"绑定模型数据"，选择刚才创建的模型
2）系统自动生成 UI 界面
3）系统自动绑定 CRUD 接口
4）一站式完成前后端搭建

5. 预览页面

预览即可看到包含搜索、新增、编辑、删除、分页功能的完整数据管理页面。

核心流程图

graph LR
    A[创建数据模型] --> B{选择接口路径}
    B -->|默认路径| C[后端自动生成<br/>SQL表结构+CRUD接口]
    B -->|自定义路径| D[对接已有后端]
    C --> E[拖拽模型组件到页面]
    D --> E
    E --> F[绑定模型]
    F --> G[系统自动生成UI]
    F --> H[系统自动绑定接口]
    G --> I[预览完整CRUD页面]
    H --> I

    style A fill:#e1f5fe
    style C fill:#fff3e0
    style G fill:#f3e5f5
    style H fill:#f3e5f5
    style I fill:#e8f5e9

用户只需关注

定义好数据模型，前后端自动生成：

✅ 无需手动编写表单 HTML
✅ 无需手动编写表格渲染逻辑
✅ 无需手动编写 API 调用代码
✅ 无需手动编写数据验证规则
✅ 无需手动编写分页排序逻辑

让用户专注于业务逻辑和模型设计，而非重复的 UI 代码编写。

2. 【核心特性】多租户与登录鉴权能力

功能概述

TinyEngine v2.10 引入了完整的用户认证系统，支持用户登录、注册、密码找回，并结合多租户体系，让您的设计作品可以实现云端保存、多设备同步和团队协作。

登录注册

用户登录：基于用户名/密码的身份认证，Token 自动管理
用户注册：支持新用户注册，注册成功后提供账户恢复码用于找回密码
密码找回：通过账户恢复码重置密码，无需邮件验证

组织管理

多组织支持：用户可属于多个组织，灵活切换不同工作空间
组织切换：动态切换组织上下文，组织间数据隔离
创建组织：一键创建新组织，邀请团队成员加入

登录鉴权流程

系统采用 Token 认证机制，通过 HTTP 拦截器实现统一的请求处理和权限验证：

sequenceDiagram
    participant 用户
    participant 前端应用
    participant HTTP拦截器
    participant 后端API

    用户->>前端应用: 1. 输入用户名/密码登录
    前端应用->>后端API: 2. POST /platform-center/api/user/login
    后端API-->>前端应用: 3. 返回 Token
    前端应用->>前端应用: 4. 保存 Token 到 localStorage

    Note over 前端应用,后端API: 后续请求自动携带 Token

    前端应用->>HTTP拦截器: 5. 发起业务请求
    HTTP拦截器->>HTTP拦截器: 6. 检查 Token 并注入 Authorization 头
    HTTP拦截器->>后端API: 7. 携带 Token 的请求
    后端API-->>HTTP拦截器: 8. 返回数据 或 认证失败(401)

    alt 认证失败
        HTTP拦截器->>前端应用: 9. 清除 Token，显示登录弹窗
        前端应用->>用户: 10. 提示重新登录
    end

访问入口

1）登录界面：访问 TinyEngine 时系统会自动弹出登录窗口，未登录用户需完成登录或注册。

2）组织切换：登录后可通过以下方式切换组织：

点击顶部工具栏的用户头像，选择「切换组织」
在用户菜单中直接选择目标组织

3）退出/重新登录：已登录用户可以点击右上角头像在菜单点击"退出登录"，进入登录页面重新登录

使用场景

1）个人使用：登录后即可享受云端保存、多设备同步等功能，设计作品永不丢失。

2）团队协作：

创建组织：为团队或项目创建独立组织空间
数据隔离：不同组织的资源完全隔离，清晰区分个人与团队项目

💡 提示：新注册用户默认属于 public 公共组织，所有数据公共可见，您也可以创建自定义组织隔离数据。

开发者指南

1）环境配置：

开发环境：通过 pnpm dev:withAuth 命令启用登录认证，pnpm dev 默认不启用（mock server）
生产环境：自动启用完整登录认证系统

也可以修改配置文件来启动或关闭登录鉴权：

export default {
  // enableLogin: true // 打开或关闭登录认证
}

2）多租户机制：

用户可属于多个组织，通过 URL 参数标识当前组织上下文
组织间数据完全隔离，切换组织可查看不同资源
当 URL 未携带应用 ID 或组织 ID 时，系统自动跳转到应用中心

3. 【核心特性】应用中心与模板中心

应用中心和模板中心是此次版本新增的两大核心功能模块。通过应用中心可以集中管理您创建的所有低代码应用，为不同的场景创建不同的应用；模板中心则让优秀页面设计得以沉淀为可复用资产，团队成员可以基于模板快速搭建新页面，大幅提升协作效率。

应用中心

登录后进入应用中心，集中管理您创建的所有低代码应用。

功能亮点：

统一管理：在一个界面查看、创建、打开所有应用
快速切换：无需手动输入 URL，一键进入任意应用编辑器
组织隔离：不同组织的应用数据隔离，清晰区分个人与团队项目

模板中心

模板中心让页面设计资产得以沉淀和复用，提升团队协作效率。

核心价值：

设计复用：保存优秀页面设计为模板，避免重复造轮子
快速启动：基于模板创建新页面，继承已有布局和样式
团队共享：组织内共享设计资产，统一 UI 风格和设计规范

访问入口

在编辑器中点击左上角菜单按钮，悬停即可看到应用中心和模板中心入口，点击即可前往。

使用说明

自动跳转规则：

如果访问编辑器时未携带应用 ID 或组织 ID 参数，系统会自动跳转到应用中心
您可以在应用中心创建新应用，或打开已有应用进入编辑器

组织权限说明：

public 组织：默认公共组织，所有用户的应用对所有人可见
自定义组织：用户新建的组织默认仅创建者可见，需手动邀请成员加入
切换组织可以查看不同组织下的应用和资源

特性开关

如果不需要使用应用中心与模板中心，可以在注册表中进行关闭:

// registry.js
export default {
  [META_APP.AppCenter]: false, // 关闭应用中心
  [META_APP.TemplateCenter]: false // 关闭模板中心
  // ...
}

4. 【增强】出码即时预览 - 导出前预览所见即所得

出码功能新增源码预览能力，用户在导出代码前可以实时查看生成的源码内容，提升代码导出体验和准确性。

功能特性

左右分栏布局：左侧树形文件列表，右侧 Monaco 代码编辑器预览
智能初始化：打开对话框时自动显示当前编辑页面对应的文件代码
实时预览：点击树形列表中的任意文件，即可在右侧预览其代码内容
灵活选择：支持勾选需要导出的文件

使用方法

1）在编辑器中点击「出码」按钮
2）打开的弹窗中左侧树形列表显示所有可生成的文件，当前页面对应文件自动展示在右侧
3）点击任意文件预览源码，勾选需要导出的文件
4）点击「确定」选择保存目录完成导出

5. 【增强】自定义 MCP 服务器 - 扩展 AI 助手能力

之前版本中，TinyEngine已经提供内置MCP 服务，可以通过MCP工具让AI调用平台提供的各种能力。本次特性是在TinyEngine 中支持添加自定义 MCP (Model Context Protocol) 服务器，可以通过配置轻松集成第三方 MCP 服务，扩展 AI 开发助手的工具能力。

功能特性

灵活配置：通过注册表简单的配置即可添加自定义服务器
协议支持：支持 SSE 和 StreamableHttp 两种传输协议
服务管理：在 AI 插件的配置界面即可管理 MCP 服务器的开关状态
工具控制：可查看并切换各个工具的启用状态

使用步骤

1）准备您的 MCP 服务器（需符合 MCP 协议规范）

2）在项目的 registry.js 中添加配置

// 使用示例
// registry.js
export default {
  [META_APP.Robot]: {
    options: {
      mcpConfig: {
        mcpServers: {
          'my-custom-server': {
            type: 'SSE',              // 支持 'SSE' 或 'StreamableHttp'
            url: 'https://your-server.com/sse',
            name: '我的自定义服务器',
            description: '提供xxx功能的工具',
            icon: 'https://your-icon.png'  // 可选
          }
        }
      }
    }
  }
}

3）刷新编辑器，在 AI 插件 MCP 管理面板中即可看到新添加的服务器

4）启用服务器，选择需要的工具，即可在 AI 助手中开始使用！

场景示例

您可以集成企业内部 MCP 服务、社区 MCP 服务、第三方 MCP 工具等，扩展 AI 助手的业务能力。

例如，下面是一个添加图片搜索MCP服务后使用AI生成带图片页面的场景示例：

6. 【增强】画布与 Schema 面板支持同步滚动

Schema 面板新增"跟随画布"功能，启用后当在画布中选中组件时，Schema 面板会自动滚动到选中组件的对应位置并高亮显示。

使用场景

快速定位：当页面元素较多时，能快速找到对应组件的 Schema 配置
双向对照：可视化视图与 JSON 代码视图对照，便于理解页面结构

使用方法

打开 Schema 面板，勾选面板标题栏的"跟随画布"复选框启用。在画布中点击切换元素，即可看到 Schema 面板跟随变化。

效果如下：

7. 【优化】页面 Schema CSS 字段格式优化

页面 Schema 中的 CSS 样式字段由字符串格式优化为对象格式，提升样式配置的可读性和可维护性。系统会自动处理对象与字符串的相互转换，出码时自动转换为标准 CSS 字符串格式，同时完美兼容之前的字符串格式。

优化场景

AI场景更友好：AI生成代码及修改样式场景，能够更快速地进行增量生成及修改
编辑更直观：对象格式支持属性智能提示和语法高亮，编辑体验更佳
阅读更清晰：结构化的对象格式易于查看和修改样式属性
维护更便捷：新增或修改样式规则时，无需手动拼接 CSS 字符串

格式对比

之前（字符串格式）：

"css": ".page-base-style { padding: 24px; background: #FFFFFF; } .block-base-style { margin: 16px; } .component-base-style { margin: 8px; }"

现在（对象格式）：

"css": {
  ".page-base-style": {
    "padding": "24px",
    "background": "#FFFFFF"
  },
  ".block-base-style": {
    "margin": "16px"
  },
  ".component-base-style": {
    "margin": "8px"
  }
}

兼容性说明

两种格式完全兼容，可在同一项目中混用
系统自动识别格式类型并进行转换
出码时统一转换为标准 CSS 字符串格式
页面样式设置等场景使用都与之前保持一致，不受该特性影响

8. 【增强】图表物料更新，组件属性优化

图表物料进行了如下优化：

添加三种常用图表组件物料：仪表盘、拓扑图、进度图
图表组件的配置面板优化，将原有的图标配置属性由整体 options 配置拆分为独立的属性配置项（颜色、数据、坐标轴等），使配置更加清晰直观。

9. 【新体验】新演练场 - 完整的前后端体验

演练场进行了全面升级，从原来的前端 Mock 数据改为完整的前后端部署，带来真实的体验环境。

升级亮点：

完整的前后端部署：不再是拦截接口 Mock 数据，而是真实的服务端环境
支持用户登录：可以使用真实账户登录演练场
数据隔离：用户数据基于租户进行共享或隔离，更符合实际使用场景
功能完整体验：之前无法体验的功能现在都可以正常使用，如AI助手插件自然语言生成页面

新演练场地址：playground.opentiny.design/tiny-engine…

通过下面两个入口都可以访问：

官网opentiny.design/tiny-engine…点击 "立即体验" 自动跳转新版演练场
演练场首页playground.opentiny.design/点击 "TinyEngine > 进入演练场" 前往

如您希望继续使用旧版演练场，依旧可以通过下面地址继续访问：旧版演练场：opentiny.design/tiny-engine…

10. 【新体验】新官网 - UI 全面焕新

TinyEngine 官网首页 UI 全面焕新，带来更现代、更清爽的视觉体验。

全新设计：首页内容刷新，并采用现代化的设计语言，视觉更加清爽美观
响应式布局：完美适配各种屏幕尺寸，移动端访问更友好

访问新版官网：opentiny.design/tiny-engine

11.【新体验】新文档 - 全新文档体验

TinyEngine 文档与其他OpenTiny产品文档统一迁移至新docs子域名：

新域名：docs.opentiny.design/tiny-engine…

文档变化：

整体更统一，方便查找切换其他文档
同时也进行了全面的样式优化，阅读体验更佳

12. 【其他】功能细节优化&bug修复

修复物料baseUrl问题 by @hexqi
移除me接口冗余请求头 by @xuanlid
登录页响应式优化 by @lichunn
修复本地开发代理问题 by @hexqi
修复工具调用参数问题 by @hexqi
优化应用窗口打开方式 by @xuanlid
区块/页面管理预览修复 by @xuanlid
代码检查优化 by @hexqi
重定向文档地址更新 by @xuanlid
图表属性默认值支持 by @xuanlid
文档样式优化 by @xuanlid
AI助手对话相关问题修复 by @hexqi
应用ID传参修复 by @lichunn
文档更新
- 修改物料同步方案文档 by @lu-yg
- 过期文档问题处理 by @xuanlid
- 新增应用预览/资源管理文档 by @betterdancing

结语

回首这一年，TinyEngine 在开源社区的成长离不开每一位开发者和贡献者的支持。v2.10 版本作为春节前的最后一次发布，我们为大家带来了多项重磅特性：

特性	核心价值
模型驱动	零代码 CRUD，开发效率跃升
多租户与登录鉴权	云端协作、团队协作
应用中心与模板中心	应用管理、资产沉淀
出码预览	导出前预览，提升代码导出体验
自定义 MCP	扩展 AI 能力，集成企业服务
Schema 面板同步滚动	画布与代码视图联动
CSS 字段格式优化	对象格式，可读性更强
图表物料更新	配置平铺，更直观
新演练场	真实前后端，完整体验
新官网/文档	UI 焕新，体验升级

致谢

本次版本的开发和问题修复诚挚感谢各位贡献者的积极参与！同时邀请大家加入开源社区的建设，让 TinyEngine 在新的一年里成长得更加优秀和茁壮！

新春祝福

值此新春佳节即将到来之际，TinyEngine 团队衷心祝愿大家：

🧧 新年快乐，万事如意！ 🧧

愿新的一年里：

代码如诗行云流水
项目如期顺利上线
Bug 远离，需求清晰
团队协作高效顺畅
事业蒸蒸日上，生活幸福美满！

🎊 春节快乐，阖家幸福！ 🎊

让我们在春节后带着满满的热情和能量，继续在未来道路上探索前行！

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyEngine源码：github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyPro、TinyNG、TinyCLI、TinyEditor
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

昨天以前首页

Elpis 总结

掘金前端

作者酒精检测仪

2026年2月8日 18:46

简述

elpis 是一个沉淀了 80% 的标准性、重复性的 CRUD 工作，又提供了 20% 的个性化扩展的前端框架，能基于一份 json 配置快速搭建标准的中后台管理系统页面，同时保障稳定性与可靠性。

elpis

elpis 的整体架构如上。它是一个 BFF 层的架构，是前后端的桥梁。

从一份领域模型 model 的 json 配置（如商品管理），可以拓宽到各个业务系统（如淘宝商品管理、京东商品管理）。
- json 满足 json-shema 规范，定义前后端统一校验与数据库表设计，同时扩展出 UI 组件的配置
经过 elpis BFF 的处理，可 SSR 渲染各个业务系统的首页，提升首页的渲染速度。首页内菜单系统的切换是采用的 vue-router 的 SPA，保证其流畅性。
在 elpis 中，提供了常用的如 input、select等基础 UI 组件，同时支持业务方自定义组件与页面，满足业务特性需求。
接口遵循 restful 规范，交互同样经过 elpis。借助洋葱圈模型思想，支持了全局错误捕获、签名校验、参数校验、日志记录等多个中间件
实现不同环境的 webpack 差异化配置，满足开发与生产的不同需求

基于 koa 设计服务端引擎

为了统一代码规范，提升开发效率，借鉴 egg 的思路，设计了 elpis-core 服务端引擎

loader 自动加载

为了减少在代码中各种 require 导致的依赖不清晰，elpis 设计了约定式的目录结构，在对应目录下的文件导出的实例都会被挂在 app 对象上。具体说来，eipis 借用 glob 和 path 两个工具，将相应文件夹下的 js 文件的文件名统一改为驼峰式命名，同时实例化对象并挂载到 app 下。如 app/middleware/api-params-verify.js 中的实例最终会处理成app.middlewares.apiParamsVerify。这样可以通过 app 对象访问到任何模块，而不需要require。

app/controller/**/**.js      -->  app.controller.xxx
app/extend/**/**.js          -->  app.extend.xxx
app/middleware/**/**.js      -->  app.middleware.xxx
app/router/**/**.js          -->  app.router.xxx
app/router-schema/**/**.js   -->  app.routerSchema.xxx
app/service/**/**.js         -->  app.service.xxx
app/config/**/**.js          -->  app.config.xxx

中间件设计

利用洋葱圈模型，请求（包含业务请求和 API 请求）经过一层层的中间件过滤，再进行业务逻辑的处理，将处理后的结果再一层层返回。

elpis 中定义了三个基础中间件：

全局错误捕获。在最外层，最先使用，catch 住后续所有的错误并记录日志。再进行错误分析，如果是请求不存在的页面，则重定向到主页，不会导致页面白屏；如果是 API 请求报错，则统一返回code: 50000, message: "网络异常请稍后重试"，不会导致接口无响应。
签名校验。对接口请求，将 key 和时间戳进行 md5 加密。防止恶意请求，减少服务压力。
参数校验。从 ctx 上下文中获取接口的 body、query、header等参数并记录日志，结合 ajv + json-schema，看是否满足model/**.json中的字段定义的规则。如不满足，直接拦截。

此外，业务方可根据自己的需求定义额外的中间件。

基于 webpack 搭建前端工程化

开发环境热更新

由于首页采用 SSR 渲染，需要将模板 .tpl 文件输出到磁盘，方便后端能拿到最新的模板渲染页面。而现有的 hmr 服务如 webpack-dev-server 将所有文件保存到内存中，无法满足需求，故采用 webpack-dev-middleware 和 webpack-hot-middleware 实现定制的 hmr 服务（webpack-dev-server 就是封对二者进行了封装）。 hmr 如图，实现 hmr 服务需要两个基础能力：

监控能力。使用 webpack-dev-middleware 监控到业务文件的改变，触发解析引擎工作，将编译后的新的 js/css 文件替换掉内存中旧的。
通讯能力。使用 webpack-hot-middleware 进行通讯，通过 webSocket与浏览器保持长连接，推送文件变动事件（如 hash-changed ）和新模块的加载指令（如 js/css 文件路径）。浏览器接收到通知后，从内存中动态请求新的产物文件，执行模块替换。

此外，还需进行两处配置：

由于 hmr 服务是通过 express 启动的，与后端 elpis-core 服务在不同的端口上，需要配置跨域请求允许。
客户端也需要被注入 hmr 的代码。所以需要在每个每个入口文件都加上 webpack-hot-middleware 的客户端代码，指定 HMR 的通信路径和端口。

构建与打包

不同的运行环境需要不同的配置，elpis 中一共使用了三份 webpack 文件。在 webpack.base.js 中定义了通用需配置，然后在开发环境和生产环境中通过 webpack-merge 插件的 merge.smart 引入通用配置并拓展当前环境所需的配置。

通用配置。
- vue-loader, babel-loader , style-loader 等各种 loader 解析器
- 别名配置（模块解析的具体行为）
- CleanWebpackPlugin，每次build前，清空 public/dist 目录
- 打包输出优化（代码分割，模块合并，缓存 chunkhash，压缩优化等策略）
开发环境配置。主要是 hmr。
生产环境配置。
- 使用 thread-loader 利用多核 CPU 加快打包速度
- 使用 mini-css-extract-plugin 抽取 css 文件，不打包到 js 中，否则会阻塞渲染。使用 css-minimizer-webpack-plugin 压缩 css
- 使用 terser-webpack-plugin 压缩 js

总之，开发环境注重的是构建速度，生产环境注重的是文件体积大小与安全稳定性。

业务拓展

以上都是 elpis 提供的基础服务，此外 elpis 支持业务自定义工程化配置，只需要在业务对应的目录（/app/webpack.config.js）下编写 webpack 文件即可，elpis会通过 merge.smart 合并到一起。

但 elpis 不止于此，elpis 将约定优于配置发挥的淋漓尽致。除了支持业务自定义工程化配置，还支持自定义页面，自定义组件，只需在约定目录下新建文件即可。这些目录下的文件都会被合并到 elpis 中，使用 elpis 的能力。

基于 json-schema 设计动态组件体系

上文说到，elpis 支持配置化开发，用户只需要配置一份 json，即可生成一个完整的页面。如下图，这份 json，不仅仅满足 json-schema 规范，可进行数据校验，elpis 对其功能进行了扩展，可以动态设计 UI 组件。甚至，还能用于辅助数据库建表。

json-schema 规范

采用 json-schema 有以下几个原因

规范完整，完全满足校验需求，且业界流行度高，有完整的校验库（ajv）支持。
json 只是一份数据，前端、后端、数据库可共用，避免了前后端校验不一致的情况（element-plus 中的校验只能前端使用，没法和后端保持统一）。由于定义了数据类型、是否必填等关键信息，后期数据库建表亦可参照此 json。
可拓展性强。elpis 在满足 json-schema 规范的基础上拓展出了 UI 组件的描述。

...
  product_name: {
    type: "string",
    label: "商品名称",
    maxLength: 10,
    minLength: 2,
    tableOption: {
      width: 200,
    },
    searchOption: {
      comType: "dynamicSelect",
      api: "/api/proj/product_name/list",
    },
    createFormOption: {
      comType: "input",
      default: "iPhone 17 pro",
    },
    editFormOption: {
      comType: "input",
    },
    detailPanelOption: {},
  },
...
  tableConfig: {
    headerButtons: [
      {
        label: "新增商品",
        eventKey: "showComponent",
        eventOption: {
          comName: "createForm",
        },
        type: "primary",
      },
    ],
    rowButtons: [
      {
        label: "详情",
        eventKey: "showComponent",
        eventOption: {
          comName: "detailPanel",
        },
        type: "primary",
        text: true,
      },
    ],
  },
  componentConfig: {
    createForm: {
      title: "新增商品",
      saveBtnText: "保存",
    },
  },
...

示例如上，对于“商品名称”这个字段，4-7 行是 json-schema 规范约束，往后都是 UI 组件描述。如在 tableOption 定义 width: 200, 则商品名称在表格中占据的宽度为200，tableOption 中的所有属性描述，可参照 eloment-plus 的 table-column，elpis 中已经做了绑定。如在 searchOption 中定义的 comType: "dynamicSelect"，标识商品名称在搜索表单中的组件类型是一个动态下拉框，下拉框中的值通过 "/api/proj/product_name/list" 这个接口去获取。

动态组件设计

用户在 json 中说明字段需要在哪些地方展示（核心组件和动态组件），使用哪种组件类型（基础控件），elpis 用 Vue 的 component 标签，动态绑定 is 属性，同时给子组件传入对应的 json-schema 约束。通过 ref 收集所有子组件的引用，外层统一处理子组件的相关逻辑（如 validate 和 getValue 方法）。

基础配置

elpis 中提供了 schema-table、schema-search-bar 两个核心组件和 createForm、editForm、detailPanel 三个动态组件和 input、inputNumber、select、dynamicSelect、dateRange 六个基础控件。用户在 json 中可自由搭配组合，只需满足对应规范，即可配置出一个完整的 CRUD 页面。
业务拓展

当基础配置满足不了业务需求时，elpis 支持业务拓展自己的组件。只需在约定目录下新建文件即可。具体说来：
- 编写业务自定义组件
- 在约定目录下创建组件映射，如 userPanel: { component: UserPanel }
- elpis 使用 process.cwd 识别到业务约定目录下的映射文件，与自己的基础组件合并，同名会覆盖基础组件
- Vue 的 component 标签动态渲染时，从合并后的配置对象里查找组件。无论是 elpis 内置的还是业务扩展的，都能找到

基于 docker 改造项目部署

docker

编写 DokcerFile 构建 docker 镜像，保证本地、测试、生产使用的是同一镜像，不会导致环境差异问题
镜像有tag（branch+commit），可以做版本管理，方便出现问题及时回滚

流水线

基于腾讯 DevOps 2.0-Clound Native Build（cnb）构建 CI/CD 流水线，解决以往手动拉代码、打包、上传、部署的低效问题，只需要配置一次，后续无限复用。

npm run lint 检查格式化与 js 报错
npm install + npm run build 打包
docker build + docker push 构建 docker 镜像并推送到镜像仓库
借用 cnbcool/ssh 工具在服务器上 docker pull + docker run 启动最新镜像

后续改进

支持 typescript。现在没有类型提示，编写代码和配置容易出错；
组件联动与通信。现有组件状态无法根据其他组件状态进行动态调整，可参照 formilyjs解决该问题
可视化配置。现有配置依赖研发编写 json，对非技术人员不友好。设计一个可视化页面，支持对组件的拖拉拽和属性的更改
加上监控看板，实时查看数据。