目录

设计背景

DSL领域模型设计

模板页的设计

DSL配置文件的设计

设计背景

前端开发中同类型系统的功能模块高度重复，尤其是基础增删改查逻辑占比过高。重复开发导致团队陷入低价值劳动，技术精力被基础功能消耗，难以聚焦核心业务逻辑的创新与优化。开发效率低下且维护成本递增，现有模式无法支持业务快速迭代需求，长期将影响产品竞争力。

DSL领域模型设计

DSL，即领域特定语言，它是一种为解决特定领域问题，而对某个特定领域操作和概念进行抽象的语言。Elpis采用DSL（领域特定语言）领域模型为每个模板页定义配置规则，每套模板对应一份DSL模型。通过实现DSL解析逻辑，用户仅需编写DSL配置即可自动渲染目标页面。

模板页的设计

DSL的设计是基于模板页来进行的，因此需要先对模板页进行分析与设计。对于大部分中后台管理系统，80%的业务逻辑是增删改查，只有少数为定制化需求，因此，模板页的布局大概可以分为头部菜单栏，侧边菜单栏，搜索表单＋表格数据的形式。具体的模板页设计如下图所示。

如上图所示，dashboard可以分为header-container，sider-container以及schema-view，iframe-view，custom-view

header-container：头部组件，包含系统标题，头部菜单栏以及右侧区域（设置，用户信息等）

sider-container：侧边栏组件，包含侧边栏菜单

schema-view：传统业务数据页，包含schema-search-bar（搜索表单）、schema-table（数据表格）、schem-form（表格操作关联的表单页）等

iframe-view：第三方页面，通过嵌入url展示iframe的页面

custom-view：自定义页面，满足定制化需求的页面，可以自行定义

DSL配置文件的设计

根据上边所描述和设计的dashboard模板页，我们可以设计出相应的DSL配置：

{

  mode: 'dashboard' // 模板类型，不同模板类型对应不一样的模板数据结构

  name: '' // 名称

  desc: '' // 描述

  icon: '' // 图标

  homePage: '' // 首页(项目配置)

  // 头部菜单

  menu: [{

    key: '', // 菜单唯一描述

    name: '', // 菜单名称

    menuType: '', // 枚举值，group / module

    // 当menuType为group时，可填

    subMenu: [

      {

        // 可递归MenuItem

      }

    ],

    // 当 menuType == module 时， 可填

    moduleType: '', // 枚举值，sider/iframe/custom/schema

    // 当 moduleType == sider 时， 可填

    siderConfig: {

      menu: [{

        // 可递归 menuItem（除 moduleType为sider）

      }]

    },

    // 当 moduleType == iframe 时， 可填

    iframeConfig: {

      path: '', // iframe 路径

    },

    // 当 moduleType == custom 时， 可填

    customConfig: {

      path: '', // 自定义路由路径

    },

    // 当 moduleType == schema 时， 可填

    schemaConfig: {

      api: '', // 数据源API （遵循 RESTFUL 规范）

      schema: { // 板块数据结构

        type: 'object',

        properties: {

          key: {

            ...schema, // 标准 schema 配置

            type: '', // 字段类型

            label: '', // 字段的中文名

            // 字段在 table 中的相关配置

            tableOption: {

              ...elTableColumnConfig, // 标准 el-table-column 配置

              toFix: 0, // 保留小数位数

              visiable: true, // 默认为 true （false， 表示不在表单中显示）

            },

            // 字段在 search-bar 中的相关配置

            searchOption: {

              ...eleComponentConfig, // 标准 el-component-column 配置

              comType: '', // 配置组件类型 input/select/.....

              default: '', // 默认值

              // comType === 'select'

              enumList: [], // 下拉选项列表

              // comType === 'dynamicSelect'

              api: ''

            }

          },

          // ...

        }

      },

      // table 相关配置

      tableConfig: {

        headerButtons: [{

          label: '', // 按钮中文名

          eventKey: '', // 按钮事件名

          eventOption: {}, // 按钮事件具体配置

          ...elButtonConfig, // 标准 el-button 配置

        },

        // ...

        ],

        rowButtons: [{

          label: '', // 按钮中文名

          eventKey: '', // 按钮事件名 例如：remove

          eventOption: {

            // 当 eventKey === 'remove'

            params: {

              // paramKey = 参数的键值

              // rowValueKey = 参数值（当格式为 schema::tableKey 的时候，到 table 中找相应的字段）

              paramKey: rowValueKey // 例如： user_id: schema::user_id

            }

          }, // 按钮事件具体配置

          ...elButtonConfig, // 标准 el-button 配置

        },

        // ...

      ]

      }, // table 相关配置

      searchConfig: {}, // search-bar 相关配置

      components: {} // 模块组件

    },

  }]

}

需要注意的是，在侧边栏配置siderConfig中不能再设置菜单项的moduleType为sider，同时schemaConfig中的api配置要遵循RESTFUL规范，前后端保持一致；schema数据结构通过json-schema定义数据模型，自动生成表单、表格、搜索栏。其中tableOption为表格列配置，如是否显示、小数保留位数等；searchOption为搜索栏组件配置（类型、默认值、下拉选项等）；tableConfig中主要用来设置表格顶部按钮操作区headerButtons和表格中每个数据项对应的操作区rowButtons，通过eventKey执行对应的操作方法，通过eventOption的params来动态获取操作要传递的参数。

BFF层通过SSR技术根据系统标识渲染出对应的模板页（HTML骨架），每个模板页引导至一个独立的SPA应用，该SPA应用内部利用Vue-Router管理路由跳转，并通过模板解析器将配置化的JSON描述动态转换为实际的可交互页面组件，最终实现对不同业务系统的灵活渲染和统一管理。