elpis项目DSL设计分享

大佬手把手教学，抖音"哲玄前端"《大前端全栈实践》

概述

elpis项目采用了一套基于JSON Schema的声明式DSL，实现了配置驱动的动态界面生成。这套DSL的核心设计理念是通过配置而非硬编码来构建企业级应用界面。

DSL核心架构

层次结构

graph TB A[Project Model] --> B[Menu Configuration] B --> C[Module Types] C --> D1[schema - 动态表单/表格] C --> D2[custom - 自定义组件] C --> D3[iframe - 内嵌页面] C --> D4[sider - 侧边栏布局] D1 --> E[Schema Config] E --> F1[API配置] E --> F2[字段Schema] E --> F3[组件配置]

三层架构设计

第一层：项目模型层

位置：model/buiness/model.js
职责：定义项目的整体结构、菜单层次和模块类型
特点：提供项目级别的配置入口

第二层：Schema配置层

职责：定义具体的数据结构、UI组件配置和交互行为
核心：schemaConfig对象
特点：支持多场景配置，一个字段可配置多种使用场景

第三层：组件映射层

职责：将DSL配置映射到具体的Vue组件
实现：动态组件渲染机制
特点：实现配置到界面的最终转换

DSL配置结构详解

菜单DSL结构

javascript 复制代码

{
  key: "product",           // 菜单唯一标识
  name: "商品管理",         // 菜单显示名称
  menuType: "module",       // 菜单类型：group/module
  moduleType: "schema",     // 模块类型：schema/custom/iframe/sider
  schemaConfig: {           // Schema配置（当moduleType为schema时）
    api: "/api/proj/product",    // RESTful API端点
    schema: { ... },             // 数据结构定义
    tableConfig: { ... },        // 表格配置
    componentConfig: { ... }     // 动态组件配置
  }
}

字段Schema的多场景配置

每个字段支持以下使用场景的独立配置：

javascript 复制代码

product_name: {
  type: "string",
  label: "商品名称",

  // 表格显示配置
  tableOption: {
    width: 200,
    "show-overflow-tooltip": true
  },

  // 搜索表单配置
  searchOption: {
    comType: "dynamicSelect",
    api: "/api/proj/product_enum/list"
  },

  // 新增表单配置
  createFormOption: {
    comType: "input",
    default: "最新课程"
  },

  // 编辑表单配置
  editFormOption: {
    comType: "input",
    disabled: false
  },

  // 详情面板配置
  detailPanelOption: {
    visible: true
  }
}

DSL到站点的映射机制

核心映射流程

sequenceDiagram participant Route as 路由系统 participant Menu as 菜单Store participant Schema as useSchema钩子 participant Component as 动态组件 participant UI as 用户界面 Route->>Menu: 获取菜单配置(key/sider_key) Menu->>Schema: 提供schemaConfig Schema->>Schema: buildDtoSchema()分场景解析 Schema->>Component: 生成tableSchema/searchSchema/components Component->>UI: 渲染动态界面

关键映射组件

1. useSchema钩子

职责：DSL解析的核心引擎，将统一Schema按场景拆分为不同的配置对象

核心方法：

javascript 复制代码

const buildDtoSchema = (_schema, comName) => {
  const dtoSchema = { type: "object", properties: {} };

  for (const key in _schema.properties) {
    const props = _schema.properties[key];
    // 提取特定场景的配置（如tableOption、searchOption）
    if (props[`${comName}Option`]) {
      // 构建场景专用的schema
      dtoSchema.properties[key] = {
        ...props,
        option: props[`${comName}Option`],
      };
    }
  }
  return dtoSchema;
};

2. 组件配置映射

javascript 复制代码

const SearchItemConfig = {
  input: { component: input },
  select: { component: select },
  dynamicSelect: { component: dynamicSelect },
  dateRange: { component: dateRange },
};

动态组件映射

javascript 复制代码

const ComponentConfig = {
  createForm: { component: createForm },
  editForm: { component: editForm },
  detailPanel: { component: detailPanel },
};

DSL优势特点

1. 配置驱动开发

零代码界面生成：通过JSON配置即可生成完整的CRUD界面
快速原型开发：新增业务模块只需配置DSL，无需编写组件代码
维护成本低：业务逻辑变更只需修改配置，不涉及代码重构

2. 高度可扩展性

组件插件化：新组件类型可通过配置映射快速集成
多场景复用：同一字段配置可在不同UI场景中复用
自定义扩展：支持自定义组件类型和配置选项

3. 数据驱动架构

API标准化：遵循RESTful规范，配置API端点即可完成数据交互
参数校验集成：结合router-schema实现API参数自动校验
状态管理统一：基于Pinia的状态管理，数据流清晰可控

4. 开发效率提升

代码复用率高：通用组件可在多个业务场景中复用
开发周期短：从需求到上线的开发时间大幅缩短
团队协作友好：前后端可并行开发，减少沟通成本

扩展开发指南

添加新的组件类型

创建组件文件：

javascript 复制代码

// app/pages/widgets/schema-form/complex-view/new-component/new-component.vue
<template>
  <!-- 组件模板 -->
</template>
<script setup>
// 组件逻辑
</script>

注册组件：

javascript 复制代码

// form-item-config.js
import newComponent from "./complex-view/new-component/new-component.vue";

const FormItemConfig = {
  // ... 现有组件
  newComponent: { component: newComponent },
};

使用配置：

javascript 复制代码

fieldName: {
  createFormOption: {
    comType: "newComponent",
    // 组件特定配置
  }
}

添加新的模块类型

扩展路由处理
创建对应的视图组件
在菜单配置中使用新模块类型

总结

elpis项目的DSL设计实现了配置即应用的理念，通过三层架构（项目模型层、Schema配置层、组件映射层）和多场景字段配置，大大提高了企业级应用的开发效率和维护性。这套DSL不仅降低了开发门槛，还提供了高度的可扩展性，是现代企业级应用开发的优秀实践。