里程碑三：领域模型架构建设Elpis 里程碑三，基于领域模型概念设计的架构模式，通过配置文件驱动页面生成，实现了高度可配

引用参考：抖音"哲玄前端"《大前端全栈实践》

领域特定语言（DSL）

DSL（Domain Specific Language，领域特定语言）用于在软件系统中精准表达业务逻辑和规则。它是对现实业务问题的抽象和结构化表示，直接映射业务需求，而非单纯的技术实现。

领域模型架构

基于领域模型概念设计的架构模式，通过配置文件驱动页面生成，实现了高度可配置化的系统。

配置驱动：通过标准化的配置数据，驱动生成整个站点的页面组件；
模型继承：基础配置可被多个项目继承和扩展，同时支持定制化内容；
领域分离：按业务领域组织模型配置，不同领域派生出对应的项目类型，保持业务逻辑的清晰分离。

DSL 标准配置

dashboard 面板是页面渲染基座，包括头部菜单栏、页面内容：

头部菜单，根据配置的 menu 渲染菜单项；
页面内容，根据配置的 moduleType 加载；
1. 为 side 时加载侧边栏和子页面内容；
2. 为 iframe 时加载 iframe 页面内容；
3. 为 custom 时加载自定义页面内容；
4. 为 schema 时加载配置驱动的系统组件；

对于 schema 模块，基于JSON Schema 的标准规范拓展了配置，可自定义增加 tableOption、searchOption、comOption、apiOption、dbOption 等配置项。

{
  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 配置
                visiable: true, // 是否可见，默认为 true，（当设置 false 时，将不显示该字段）
              },
              // 字段在 search-bar 中的相关配置
              searchOption: {
                ...eleComponentConfig, // 标准 ele-component 配置
                comType: "", // 配置组件类型 input|select|...
                default: "", // 默认值

                // comType === 'select'
                enumList: [], // 下拉框可选项

                // comType === 'dynamicSelect'
                api: "",
              },
            },
            ...
          },
        },
        // table 相关配置
        tableConfig: {
          headerButtons: [
            {
              label: "", // 按钮中文名
              eventKey: "", // 按钮事件名
              eventOption: {}, // 按钮事件具体配置
              ...elButtonConfig, // 标准 el-button 配置
            },
            ...
          ],
          rowButtons: [
            {
              label: "", // 按钮中文名
              eventKey: "", // 按钮事件名
              eventOption: {
                // 当 eventKey === 'remove'
                params: {
                  // paramKey 为参数的键值
                  // rowValueKey 为参数值（当格式为 schema::tableKey 的时候， 到 table 中找到相应的字段）
                  paramKey: rowValueKey,
                },
              }, // 按钮事件具体配置
              ...elButtonConfig, // 标准 el-button 配置
            },
            ...
          ],
        },
        searchConfig: {}, // search-bar 相关配置
        conponents: {}, // 模块组件
      },
    },
    ...
  ],
};

总结

Elpis 的领域模型设计通过配置驱动的方式实现了高度可配置化的管理系统。其核心优势包括：

高度可配置：通过 JSON 配置即可生成完整的管理页面；
继承复用：模型配置可被多个项目继承，减少重复配置；
组件化：基于配置的组件化架构，易于扩展和维护；
领域分离：按业务领域组织代码，结构清晰；
动态渲染：支持多种页面类型和组件类型的动态渲染。