Skip to main content

【阻力 2】动态语义表达与条件联动协议

我们马上开始，直接切入 【阻力 2：动态语义表达】 的具体落地方案！

阻力 2：动态语义表达 ── 待攻克​

痛点复现：静态属性（颜色、字号）好配。但电商页面充满了跨组件动态联动（如：“勾选了满减券，商品列表就必须亮起满减标签，并过滤非活动商品”）。如何用一套大模型能读懂、前端能解析的轻量协议（DSL）来低成本表达这种“条件 -> 动作”的动态逻辑？

💡 落地解法：“行为原子化（Atom Actions）”与宣言型条件依赖协议​

我们绝对不能让 AI 自由发挥写 JavaScript 联动代码。前端架构师必须在低代码平台上设计一套“状态驱动（State-Driven）”的宣言型联动引擎。

1. 顶层状态总线（Global Context）​

页面最顶层维护一个可响应式的状态池（类似全局的 Pinia / Redux），AI 只能对这个状态池进行读写，组件也只监听这个状态池。

interface PageContext {
  activeCouponId: string | null; // 当前选中的优惠券ID
  userSegment: 'new' | 'vip' | 'normal'; // 用户分群
}

2. 联动协议设计（由 AI 填充并输出）​

在组件的 Schema 中，允许 AI 组装一个 dependencies（依赖行为）数组。AI 只需要做单项选择题：

  • 当（Condition）：全局状态满足什么条件
  • 做什么（Action）：触发什么原子行为
{
  "id": "ProductWaterfall_1",
  "type": "ProductList",
  "props": { "baseApi": "/api/products" },
  "dependencies": [
    {
      "comment": "当用户选中了特定的满减券，商品列表联动更新数据源并切换展示标签",
      "cond": "$.activeCouponId === 'COUPON_100_10'",
      "action": "UPDATE_PROPERTIES",
      "payload": {
        "extraParams": { "couponId": "COUPON_100_10" },
        "showTag": "满100减10专享"
      }
    }
  ]
}

3. 前端执行器（Safe Evaluator）​

前端渲染内核在拿到这段配置后，会使用一个完全禁用 eval() 的安全表达式解析器（如 expr-eval 库）。当 $.activeCouponId 发生改变时，解析器自动重新求值，并将 payload 里的新属性合并到响应式的 ProductList 组件中，触发视图的重新渲染。

  • 优势：AI 只需要理解“状态变量”，并拼装固定的条件 JSON，幻觉率降到几乎为零。