Zorv AI 小程序技术架构：对话内渲染的富交互卡片1. 项目概览 Zorv AI 小程序 = AI 生成的一段 HT

1. 项目概览

项目：Zorv AI（包名 com.ai.assistance.quro）
开源地址：github.com/Quor-a/Zorv…
适用版本：v1.0.77
更新日期：2026-09-02

Zorv AI 小程序 = AI 生成的一段 HTML/JS，被内联渲染进对话框的轻量交互卡片。

不是微信小程序那样独立运行环境，而是对话流里的富交互组件。
AI 可以"画"出一个表单、计算器、图表、待办列表，用户直接在气泡里操作。
操作结果通过 bridge.js 回传 AI，实现"对话 → 控件 → 再对话"的闭环。

2. 整体渲染链路

flowchart TB
    subgraph GEN[&#34;生成&#34;]
        U[&#34;用户 / AI 输出 miniapp 围栏&#34;]
        T[&#34;或 ui_control(widget, miniapp)&#34;]
    end
    subgraph RENDER[&#34;渲染&#34;]
        M[&#34;MiniAppCard\n(消息卡片容器)&#34;]
        W[&#34;MiniAppWebView\n(内联 WebView)&#34;]
        B[&#34;bridge.js 运行时\n(data-bind / data-action / setData)&#34;]
    end
    subgraph RT[&#34;运行时&#34;]
        JS[&#34;用户交互&#34;]
        CB[&#34;回调 AI\n(工具调用 / 文本)&#34;]
    end

    U --> M
    T --> M
    M --> W
    W --> B
    B --> JS
    JS --> CB
    CB --> U

3. 对话内渲染（核心呈现）

这是 Zorv AI「可视化编程」的本质：用户在对话框里发 ```miniapp / ```mmd 围栏，ChatScreen 直接把内容渲染成可交互卡片，无需跳出 App。

sequenceDiagram
    participant User as 用户
    participant AI as AI 引擎
    participant Chat as ChatScreen
    participant Card as MiniAppCard
    participant Web as MiniAppWebView

    User->>AI: 请求&#34;做个计算器&#34;
    AI-->>User: ```miniapp ... HTML/JS ... ```
    Chat->>Chat: 识别围栏 → 生成 MsgBlock.MiniApp
    Chat->>Card: 渲染卡片
    Card->>Web: 加载内联 HTML + bridge.js
    Web-->>User: 可交互小程序卡片
    User->>Web: 输入/点击
    Web->>AI: 经 bridge 回传结果

围栏类型：```miniapp 渲染小程序；```mermaid / ```mmd 渲染离线矢量图（同一管线）。
消息模型：MsgBlock.MiniApp → MiniAppCardView / MiniAppWebView → 复用 mermaid_render.html 渲染管线。

4. 运行时 bridge.js

bridge.js 是注入到每个小程序 WebView 里的运行时，负责"原生 ↔ HTML"双向通信：

能力	说明
`data-bind`	声明式数据绑定，把 JS 状态映射到 DOM
`data-action`	声明式事件绑定，用户操作触发回调
`setData(obj)`	小程序侧更新数据并驱动 UI 重渲染
回调通道	把交互结果回传 AI（文本 / 工具调用）

flowchart LR
    DOM[&#34;HTML DOM&#34;] <-->|&#34;data-bind / data-action&#34;| JS[&#34;小程序 JS 状态&#34;]
    JS <-->|&#34;setData()&#34;| RT[&#34;bridge.js 运行时&#34;]
    RT <-->|&#34;postMessage&#34;| HOST[&#34;Zorv AI 宿主\n(对话/工具)&#34;]

5. 组件与数据绑定模型

一个最小小程序示例（概念）：

<div class="counter">
  <span data-bind="count">0</span>
  <button data-action="inc">+1</button>
</div>
<script>
  let count = 0;
  bindAction('inc', () => {
    count++;
    setData({ count });           // 驱动 UI 更新
    reportToAI(`计数=${count}`);  // 回传 AI
  });
</script>

元素	角色
`data-bind="x"`	把字段 `x` 绑定到该节点文本
`data-action="fn"`	点击时调用 `fn`
`setData`	更新状态 + 重渲染
`reportToAI`	经 bridge 把结果交还 AI 继续推理

6. 工具中心「可视化编程」工作台

除对话内直接渲染外，工具中心提供 VisProPanel 工作台，作为小程序/可视化的编辑与导出入口：

flowchart TB
    Panel[&#34;VisProPanel 工作台&#34;] -->|&#34;编辑/导出&#34;| Node[&#34;node_editor.html\n节点编辑器&#34;]
    Node -->|&#34;导出 Mermaid&#34;| Chat[&#34;对话框渲染\n(同一管线)&#34;]
    Panel -->|&#34;保存/删除/导入&#34;| Store[&#34;小程序/可视化资源&#34;]

数据流：节点编辑器 → 导出 Mermaid → 进对话框渲染。
与对话内渲染共用同一 mermaid_render.html 管线，保证"编辑所见 = 对话所现"。

7. 安全边界

维度	策略
沙箱	小程序运行在隔离 WebView，不直连主程序私有存储
权限	默认无系统权限，需能力经 ACI/工具显式授予
来源	仅渲染 AI 生成或用户明确粘贴的围栏内容
回传	交互结果经 bridge 走既有工具/对话通道，受提示词约束

8. 与 ACI / 浮窗的关系

flowchart TB
    Mini[&#34;小程序卡片&#34;] -->|&#34;交互回传&#34;| AI[&#34;AI 引擎&#34;]
    AI -->|&#34;调用能力&#34;| ACI[&#34;ACI 受控端\n(见 ACI 文档)&#34;]
    AI -->|&#34;化小窗展示&#34;| Float[&#34;系统级浮窗\n(见浮窗文档)&#34;]

小程序是前端交互层，ACI 是后端能力层，浮窗是呈现载体。
三者组合：AI 在浮窗里显示一个小程序卡片 → 用户操作 → 触发 ACI 能力 → 结果回写卡片。

9. 快速上手

想亲自体验 Zorv AI 小程序能力？欢迎访问开源仓库：

GitHub：github.com/Quor-a/Zorv…
在对话框里发送 ```miniapp 围栏，即可让 AI 为你生成可交互卡片。

配套文档：跨进程能力框架见《ACI 完整架构介绍》；系统级浮窗见《LSPosed 与系统级浮窗技术架构》；人格与心跳见《灵魂注入与 AI 心跳人格自动孵化》；长期记忆见《记忆库架构介绍》。