DSL 领域模型架构(2)——动态组件机制

动态组件设计

核心：组件解析器，解析DSL配置文件中的 comSchema + comConfig，生成对应组件。这些都是通用组件，通过封装各类通用组件，来达到减少 80% 重复工作的目。

核心原理如下：

当然设计在动态组件的 SchemaConfig 配置时，需要有命名规范，配置规范，还要考虑动态组件如何触发，展示哪些内容，哪些字段等等。

以 createForm组件为例：

json 复制代码

{
  "schemaConfig": {
    "schema": {
      "type": "object",
      "properties": {
        "product_name": {
          "type": "string",
          "label": "商品名称",
          "createFormOption": {
            "comType": "input",
            "default": "哲玄新课程"
          }
        }
      },
      "required": ["product_name"]
    },
    "tableConfig": {
      "headerButtons": [
        {
          "label": "新增商品",
          "eventKey": "showComponent",
          "eventOption": {
            "comName": "createForm"
          }
        }
      ]
    },
    "componentConfig": {
      "createForm": {
        "title": "新增商品",
        "saveBtnText": "新增商品"
      }
    }
  }
}

componentConfig.createForm: 表单组件基础配置, 如配置标题、按钮名称，主键等
schema.properties.createFormOption: 对应字段在 createForm 组件中的配置，如展示组件类型（comType: 'input'）、默认值、是否展示、是否禁用、枚举列表等。
schema.required: 为必传字段, 用于表达的检验，后续如果需要更多的校验，也可以在这里拓展;
tableConfig.headerButtons: 触发按钮配置，这里配置 table 中的新增商品按钮，通过关联eventKey(事件触发方式)和eventOption(事件处方配置项)的方式来触发 createForm 组件的展示。

createForm 渲染效果如下：

组件配置解析

整个 useSchema Composition API 函数的目的是作为一个配置解析中枢 。它监听路由和菜单的变化，从一个统一的、来自后端的 schemaConfig 配置中，提取并构造出各种视图组件（Table, Search, 自定义组件）所能直接消费的 schema 和 config。

其核心流程可以分为以下几个步骤：

数据初始化，根据 router 信息获取 schemaConfig。
触发解析：分别在 onMounted 和 route.query.key, route.query.sider_key, menuStore.menuList 发生变化时触发执行解析。
核心解析过程：子组件配置处理，从 schemaConfig 中解析出各个子组件（表格、搜索栏、其他动态组件）所需的 schema 和 config。
- 表格/搜索栏: 通过解析器 buildDtoSchema 提取标记了 tableOption 的字段，形成 tableSchema，并直接获取独立的 tableConfig。
- 动态组件：遍历配置中定义的动态组件，为每个组件使用 buildDtoSchema 提取其专属配置（如 createFormOption），并与该组件的独立配置结合，存入 components 对象。

总结

动态组件的配置完美体现了 "配置与UI分离" 和 "一处定义，多处派生" 的DSL设计思想。

中心化配置源 ：整个系统的UI表现依赖于一个来自后端的、结构化的 schemaConfig 。这降低了前端与后端的耦合度，后端只需提供一份数据模型定义，前端即可自动渲染出多种UI视图。
职责单一的解析器 ：buildDtoSchema 函数作为通用的解析算法，其唯一职责是根据组件名（如 'table'）从 schemaConfig中提取和转换字段配置。这种设计使得增加一个新的组件类型（如一个详情面板 detail）变得非常简单，只需在 schemaConfig中为字段增加 detailOption 并在 componentConfig 中配置即可，解析逻辑无需改动。
动态性与响应性 ：通过 Vue 的响应式系统和监听器，解析流程与路由状态深度绑定。用户在不同功能间的切换会触发配置的重新解析，从而实现页面的动态渲染，实现了真正的单页面动态应用。

DSL动态组件通过修改后端配置就能极大地改变前端的界面和交互，极大地提升了开发效率和系统的灵活性。