Appearance

10 装修引擎 ​

10.1 目标 ​

装修引擎将后端页面 DSL 转换为可渲染的 Web 页面，支持首页、导航、区块布局、预览和编辑态交互，减少固定页面结构与运营配置之间的耦合。

10.2 核心组成 ​

  • types/decoration.ts：DSL、区块和配置类型。
  • DecorationRenderer.vue：根据 DSL 渲染页面。
  • DecorationSectionHost.vue：渲染区块容器。
  • DecorationBlockHost.vue：渲染区块内部 block。
  • sections/：公告、轮播、商品货架、商品 Tab、图片热点、页头页脚等区块。
  • useDecorationDslFetch.ts、useDecorationPageDslFetch.ts：获取页面 DSL。
  • useDecorationPreview.ts、useDecorationPreviewEditStore.ts：预览和编辑上下文。
  • resolveSettings.ts、resolveDecorationLink.ts：配置解析和装修链接处理。

10.3 渲染流程 ​

text
获取页面 DSL
  → 规范化默认配置
  → 根据 section/block 类型查找注册组件
  → 解析 settings、样式和链接
  → DecorationRenderer 输出页面
  → 预览模式叠加选择框和编辑上下文

当后端 DSL 缺少字段时，应通过默认 DSL 或设置解析器提供安全回退，区块组件本身仍需处理空数据。

10.4 新增装修区块 ​

  1. 在 components/sections/ 增加 Vue 区块组件。
  2. 为配置定义 TypeScript 类型和默认值。
  3. 在装修注册表中注册类型到组件的映射。
  4. 处理 SSR、空数据、图片加载和链接跳转。
  5. 增加 resolveSettings 或链接解析测试。
  6. 在预览态验证区块选择、编辑边界和正常态样式一致。

10.5 模板引擎 ​

templateEngines/ 提供另一层模板组合能力，包括：

  • TemplateEngine.vue：模板渲染入口。
  • templates/b2c/：B2C 首页、头部、购物车等模板。
  • templates/b2b/、templates/bbc/：B2B/BBC 模板配置。
  • sections/ 和 blocks/：模板区块及其 schema。

装修 DSL 适合动态运营编排，模板引擎适合按业务模式复用固定页面骨架；两者边界应保持清晰。