SaaS 后台的 DSL 改造（五）：渲染引擎——一份 DSL 生成整个后台

const pathMap: Record<ModuleType, string> = {
  [ModuleType.SCHEMA]:  '/schema',   // DSL 生成的标准页面
  [ModuleType.IFRAME]:  '/iframe',   // iframe 嵌入
  [ModuleType.SIDEBAR]: '/sider',    // 带侧边栏的复合页面
  [ModuleType.CUSTOM]:  menu.customConfig?.path,  // 完全手写的页面
}

name: {
  type: 'string',
  label: '商品名称',
  // 每个 xxxOption 对应一个视图的专属配置 没写就是默认行为
  searchOption: { componentType: 'select', options: [/* ... */] },
  componentOption: {
    editFormOption: {
      componentType: 'input',
      required: true,
      validateSchema: z.toJSONSchema(z.string().min(2).max(20)),
      validateErrorMessage: { minLength: '最小字符长度为2' },
    },
  },
}

function buildDTOSchema(schema, optionField /* 'table' | 'search' | 'component' */) {
  const DTOSchema = { type: 'object', properties: {} }

  Object.entries(schema.properties).forEach(([key, value]) => {
    DTOSchema.properties[key] = Object.keys(value).reduce((props, cur) => {
      // 剥掉所有 xxxOption 后缀属性 只留通用字段
      if (!cur.includes('Option'))
        props[cur] = value[cur]
      return props
    }, {
      // 当前视图的那份 option 提到固定位置
      option: { ...value[`${optionField}Option`] },
    })
  })

  return DTOSchema
}

defineProps<{
  schemaKey: string                    // 字段名 提交时用它当 key
  schema: DTOProperty<'component'>     // 这个字段拍平后的配置 含 option
  model?: unknown                      // 回显值 编辑场景由上层传入
}>()

defineExpose({
  validate: () => boolean,              // 校验自己 返回是否通过
  getValue: () => Record<string, unknown>,  // 以 { [schemaKey]: value } 的形式交出自己的值
})

const modelValue = ref('')
const errorMessage = ref('')
const ajv = injectLocal<Ajv>('ajv')   // 校验器由 schemaForm 统一注入

function validate() {
  errorMessage.value = ''
  const { required, validateSchema, validateErrorMessage } = props.schema.option ?? {}

  // 第一段: 必填检查 空值直接失败
  if (required && !modelValue.value) {
    errorMessage.value = validateErrorMessage?.required ?? `请输入${props.schema.label}`
    return false
  }

  // 第二段: 非必填且为空 放行 不跑规则
  if (!modelValue.value)
    return true

  // 第三段: ajv 编译 DSL 下发的 JSON Schema 校验
  const validator = ajv?.compile(validateSchema)
  const isValid = validator?.(modelValue.value)
  if (!isValid && validator?.errors?.length) {
    const { keyword, message } = validator.errors[0]
    // 错误文案按 ajv 的 keyword 从 DSL 配置里取 取不到用 ajv 默认文案
    errorMessage.value = validateErrorMessage?.[keyword] ?? message ?? ''
    return false
  }

  return isValid
}

function getValue() {
  return { [props.schemaKey]: modelValue.value }
}

defineExpose({ getValue, validate })

// 渲染: componentType 查注册表 没注册的字段直接跳过
const availableProperties = computed(() =>
  Object.fromEntries(Object.entries(schema.properties).filter(([_, value]) =>
    formItemConfig[value.option?.componentType]
  ))
)

<component
  :is="formItemConfig[item.option?.componentType]?.component"
  v-for="(item, key) in availableProperties"
  :key="key"
  :ref="(el) => setFormItemRef(key, el)"
  :schema-key="key"
  :schema="item"
  :model="model?.[key]"
/>

function validate() {
  return Object.values(formItemRefs.value).every((item) => item.validate())
}

function getValue() {
  return Object.values(formItemRefs.value).reduce(
    (acc, item) => ({ ...acc, ...item.getValue() }), {}
  )
}

defineExpose({ validate, getValue })  // schemaForm 自己对上层也遵守同样的协议

{ name: '编辑', eventKey: 'showComponent', eventOption: { componentName: 'editForm' } }
{ name: '删除', eventKey: 'remove', needConfirm: true }

export const componentsMap = {
  createForm: {
    component: defineAsyncComponent(() => import('./createForm/index.vue')),
    isDialog: true,   // 弹窗组件 走命令式打开 不参与声明式渲染
  },
  editForm:   { component: defineAsyncComponent(() => import('./editForm/index.vue')), isDialog: true },
  detailPanel:{ component: defineAsyncComponent(() => import('./detailPanel/index.vue')), isDialog: true },
}

export function useDialog(DialogComponent) {
  const mountPoint = document.createElement('div')
  const componentRef = ref(null)
  let vNode = null

  function renderComponent() {
    const node = h(DialogComponent, componentProps)
    node.appContext = appContext   // 关键: 手动挂载的组件树脱离了应用上下文 必须显式接回
    render(node, mountPoint)
    componentRef.value = node.component?.exposed   // 拿到组件 expose 的协议方法
    return node
  }

  function showDialog(props, opts) {
    if (!vNode) {
      updateProps(props)
      vNode = renderComponent()
      document.body.appendChild(mountPoint)   // 首次才真正挂到 body
    } else if (props) {
      Object.assign(componentProps, props)    // 再次打开 只更新 props 复用组件
    }

    nextTick(() => {
      componentRef.value?.toggleDialogVisible?.(true)   // 通过协议方法打开
    })
  }

  // 组件卸载时清理 DOM 避免泄漏
  tryOnScopeDispose(() => {
    render(null, mountPoint)
    document.body.removeChild(mountPoint)
  })

  return { showDialog, /* ... */ }
}

// 必须 expose 的方法: useDialog 靠它控制开关
defineExpose({
  toggleDialogVisible: (visible: boolean) => void
})

// 必须遵守的事件: 需要联动外部时 emit command
emit('command', 'refresh')

// 1. 抽屉打开时 用 uniqueKey 拉详情回显
async function onOpen() {
  const { res } = await getCaptured(schemaData.api, {
    [props.uniqueKey]: props.model[props.uniqueKey],
  })
  detail.value = res.data
}

// 2. 点保存: 协议调用表单 -> 拼主键提交 -> 通知刷新 -> 关抽屉
async function onEdit() {
  const isValid = formRef.value?.validate()          // schemaForm 的协议方法
  if (!isValid) return

  await putCaptured(schemaData.api, {
    [props.uniqueKey]: props.model[props.uniqueKey],
    ...formRef.value?.getValue(),                    // 各 widget 的值已合并好
  })

  emit('command', 'refresh')                          // 通知表格重新拉数据
  drawer.value?.toggleDialogVisible(false)
}

defineExpose({ toggleDialogVisible })                 // 遵守弹窗协议

const evtMap = {
  showComponent,        // 打开弹窗
  remove,               // 删除
  default: () => {},
}

function onComponentCommand(command, ...args) {
  if (command === 'refresh')
    tablePanelRef.value?.getList()      // 弹窗保存成功 -> 表格刷新
  else if (command === 'buttonEvent')
    onCommand(...args)                  // 弹窗里再触发按钮事件 -> 回到事件映射
}