TinyEngine 2.11：AI 深入画布，Vue 工程加速迁移为 DSL

TinyEngine 2.11 的升级重点不只是增加几个设计器按钮，而是继续缩短“已有代码、设计器资产与最终页面”之间的距离。本次版本集中推进三个方向：让 AI 更深入地参与画布开发、提升外部资产的导入效率，以及补全设计器物料生态。其中，Vue 工程一键转换为 DSL，直接回应了低代码平台落地时最常见的迁移问题：已有项目如何进入可视化体系，而不是从空白画布重新搭建。

AI 进入画布，重点是参与开发闭环

当 AI 只负责生成一段代码时，开发者仍要手动把结果放进页面、绑定数据并检查布局。AI 进一步融入画布后，更值得关注的是它能否理解当前编辑上下文，例如正在操作的组件、页面层级、已有物料和属性约束。

这类能力的价值主要体现在三个环节：

• 生成：根据需求创建页面结构、组件组合或初始内容。
• 修改：针对画布中的现有节点调整属性、布局和交互，而不是重新生成整个页面。
• 校验：在组件缺少必要属性、事件没有绑定或结构不符合约束时给出提示。

团队在评估 AI 能力时，不应只看一次生成结果是否漂亮，还要检查修改是否局部可控、生成内容能否继续编辑，以及操作结果是否能够撤销和审计。设计器里的 AI 一旦直接修改页面 DSL，其影响就与普通代码变更相同，需要进入版本管理和评审流程。

Vue 转 DSL 解决的是存量工程入口

DSL 是设计器理解页面的结构化表示，通常会描述组件类型、属性、子节点、事件和数据绑定。传统 Vue 工程则包含模板、脚本、样式、组合式 API、第三方组件和构建插件。两者并不是简单的文本格式转换。

TinyEngine 2.11 提供 Vue 工程一键转 DSL 的能力，意味着存量页面可以更顺畅地进入设计器工作流。它尤其适合这些场景：

• 将已有 Vue 页面导入设计器，继续进行可视化编排。
• 把团队内部组件沉淀为可复用物料。
• 为旧项目建立页面结构基线，再逐步补充设计器元数据。
• 降低 PoC 和迁移评估成本，快速识别不兼容部分。

但“一键转换”不等于所有业务语义都能无损映射。动态组件、运行时插槽、复杂指令、直接 DOM 操作，以及深度依赖构建插件的逻辑，都可能需要人工处理。更稳妥的方式是先选取一个依赖较少的页面，比较转换前后的结构、交互和样式，再决定批量迁移范围。

可以这样理解 Vue 到 DSL 的映射

下面是一个可运行的简化示例，用于演示 Vue 模板如何转换成通用树形 DSL。它不是 TinyEngine 2.11 的官方命令或官方 DSL 定义，而是帮助团队在接入前梳理转换规则的最小实验。

先创建目录并安装 Vue 模板解析器：

mkdir vue-dsl-demo
cd vue-dsl-demo
npm init -y
npm install @vue/compiler-dom

新建 convert.mjs：

import { baseParse, NodeTypes } from '@vue/compiler-dom';

const template = `
<div class="profile">
  <h2>{{ user.name }}</h2>
  <button :disabled="loading" @click="save">保存</button>
</div>
`;

const ast = baseParse(template);

function toDSL(node) {
  if (node.type === NodeTypes.ELEMENT) {
    const props = {};
    const events = {};

    for (const prop of node.props) {
      if (prop.type === NodeTypes.ATTRIBUTE) {
        props[prop.name] = prop.value?.content ?? true;
      } else if (prop.type === NodeTypes.DIRECTIVE && prop.arg) {
        const name = prop.arg.content;
        const expression = prop.exp?.content ?? '';

        if (prop.name === 'bind') props[name] = { binding: expression };
        if (prop.name === 'on') events[name] = expression;
      }
    }

    return {
      component: node.tag,
      props,
      events,
      children: node.children.map(toDSL).filter(Boolean)
    };
  }

  if (node.type === NodeTypes.TEXT) {
    const value = node.content.trim();
    return value ? { type: 'text', value } : null;
  }

  if (node.type === NodeTypes.INTERPOLATION) {
    return {
      type: 'expression',
      value: node.content.content
    };
  }

  return null;
}

const dsl = ast.children.map(toDSL).filter(Boolean);
console.log(JSON.stringify(dsl, null, 2));

运行转换：

node convert.mjs

输出会保留组件层级，并把静态属性、动态绑定、事件和插值表达式拆成结构化字段。真实工程还需要增加组件名称映射、样式解析、插槽处理、表达式安全检查，以及目标设计器要求的版本和元数据字段。

这段实验也能帮助团队提前建立验收标准：哪些 Vue 语法必须自动转换，哪些语法允许降级，哪些情况必须阻止导入并报告具体文件和节点。

资产导入与物料生态决定转换后的可用性

页面结构能够进入设计器，只完成了迁移的一半。DSL 中引用的组件还必须在设计器中找到对应物料，否则导入结果可能只剩占位节点，属性面板和事件配置也无法正常工作。

因此，TinyEngine 2.11 强调更顺滑的资产导入和更完整的物料生态，与 Vue 转 DSL 是一组互相依赖的能力。团队可以为每个内部组件准备一份物料契约，至少记录：

name: UserCard
version: 1.0.0
source: '@company/ui'
props:
  userId:
    type: string
    required: true
  compact:
    type: boolean
    default: false
events:
  - select
slots:
  - default

这个 YAML 同样只是可改造的契约示例，不代表 TinyEngine 的官方物料格式。实际接入时应以平台支持的物料规范为准。关键是让组件包、设计器物料和转换映射使用一致的名称与版本，避免同一个组件在代码、DSL 和资产库中出现三套身份。

升级前先做一轮小范围迁移

引入 TinyEngine 2.11 时，可以按下面的清单控制风险：

• 选择一个组件数量有限、动态逻辑较少的 Vue 页面进行试转换。
• 对比 DOM 结构、样式、数据绑定、事件和路由行为。
• 建立内部组件到设计器物料的映射表，并明确版本策略。
• 将 AI 修改后的 DSL 纳入差异比较、评审和回滚流程。
• 为无法转换的语法生成报告，不要静默丢弃节点或表达式。
• 在批量导入前固定 TinyEngine、物料包和业务组件的版本。

TinyEngine 2.11 展示了一条更实际的低代码演进路径：AI 负责降低画布操作成本，Vue 转 DSL 打开存量工程入口，资产导入与物料生态则保证页面进入设计器后仍然可编辑、可维护。真正决定升级收益的，不是一次转换了多少页面，而是转换后的页面能否继续参与团队现有的开发、测试和发布流程。