DSL领域模型设计
背景：基于抖音哲玄前端大前端课程（里程碑三），我们围绕dashboard模板构建了一套完整的DSL领域模型体系。该体系核心采用配置驱动UI的设计理念，实现了高度可复用和可扩展的前端架构。
核心架构设计
菜单体系与组件类型
- menuType：定义菜单类型，包括group（分组）和model（模型）
- moduleType：在model下定义具体的组件类型，支持iframe、custom、schema、sider四种类型
继承模型设计
基于面向对象思想，我们建立了model基类与project子类的继承体系：
- 继承：保留基类特性
- 重载：覆盖基类方法
- 新增：扩展子类功能
优势：
- 隔离性：各项目新增功能互不影响
- 复用性：公共逻辑无需重复编码
- 扩展性：支持业务定制化需求
实现：通过
model/index.js遍历所有model和project文件，利用lodash的mergeWith方法进行配置合并，最终整理成统一的modelList供服务层使用。
组件类型：
- iframe-view：第三方应用
- custom-view：用户自定义
- schema-view：基于JSON Schema 沉淀的大部分代码
- sider-view：侧边导航菜单
组件架构
header-view 头部菜单
-
header-container : dsl菜单menu的渲染
-
slot:main-content ：具体的 sider-view/iframe-view/custom-view/schema-view
sider-view 侧边菜单
-
sider-container : 渲染侧边栏菜单（ siderconfig 里的 menu)
-
slot:main-content : 利用 vue router 实现动态承载sider-view、iframe-view、custom-view、schema-view等具体内容组件
schema-view 配置化
基于JSON-Schema标准，定义了统一的数据结构：
schemaConfig: {
api: '', // 数据源API （遵循 RESTFUL 规范）
schema: { // 板块数据结构
type: 'object',
properties: {
key: {
...schema, // 标准 schema 配置
type: '',// 字段类型
label: '',// 字段中文名
tableOption: {}, // 字段在 table 中的相关配置
searchOption: {}, // 字段在 search-bar 中的相关配置
}
tableConfig: { // table 相关配置
headerButtons: {}，
rowButtons: {}
}
searchConfig: {}, // search-bar 相关配置
components: {} // 模块组件
}
}
}
}
有许多各种各样的组件配置 -> 通过hook/schema.js实现智能配置提取： 例如是tableSchema 和 tableConfig 则只要 table 相关的，去掉其他的生成纯净的 dtoSchema
由入口文件路由 entry.dashboard 进行分发，确保各组件按预期路径渲染
总结：
- 开发范式统一 - 团队遵循相同的配置规范
- 代码复用率提升 - 公共逻辑复用度达80%以上
- 维护成本降低 - 业务变更通过配置调整即可完成
