AI 原生的可视化内容框架:结构化页面文档 + 类型级创造 + 变量数据面 + 协作协议 + 自带编译链。独立开源(MIT),首个消费者是 YuDream Admin。
状态:全部范围(P0-P3 库侧)已实现并通过逐环节独立验证(2026-10-18)。设计与决策见 docs/design.md;工程规则见 AGENTS.md 与 docs/dev/conventions.md;规范分册见 docs/dev/(编译链 / 保真 / AI 工具 / 发布)。
- 文档模型:页面是可寻址的节点树(稳定 ID、schema 契约),不是 HTML 快照。
- 类型级创造:AI 与主题都能造新的块类型(L2 受限模板 / L3 Vue SFC 沙箱),创造物可版本化、可审核、可视化可编辑。
- 变量系统:站点配置、上下文、插件与能力的数据源统一为类型化变量,页面以声明式绑定消费;publish/request/client 三种解析时机与安全闸门。
- 协作协议:计划 / 步骤 / 操作 / 截图 / 评审 / 评论 / 修订七类事件;操作级三方合并(含 RGA 文本字符级)、锚点评论、截图自评闭环、变更集 HITL。
- 编译链:创作与发布时编译、请求时不编译;产物内容寻址(sourceHash + compilerVersion + runtimeContract)、版本钉住。
- 保真契约:预览、运行、静态发布共用同一渲染入口,差异只能来自数据不能来自渲染——三模式不变性测试 + 黄金截图 + 发布前真实比对三层强制。
- 发布:不可变 Release(内容快照 + 静态渲染 + 资源)、原子切换与回滚、变量失效增量重渲染、稳定内容 API(
/api/public/content/*)。
docs/design.md 总体设计与决策记录(权威)
docs/dev/ 工程规范正文(conventions 为入口 + 编译链/保真/AI 工具/发布分册)
AGENTS.md 工程规则入口与硬规则
packages/ 11 个框架包(见下表)
scripts/ 边界门禁、黄金截图 harness、改名工具
tests/golden/ 黄金截图基线(入库)
tools/fidelity/ 黄金截图夹具
pnpm install && pnpm buildpnpm demo # 构建 + 启动演示工作室(默认 http://127.0.0.1:8017/,Ctrl+C 退出)
pnpm demo:build # 只构建演示产物 demo/dist/app.js演示装配:内存后端(页面/变量/事件流/变更集/评论/Release)+ 内置 17 块 + 编辑器 + 脚本化评审结论源。可体验:左侧块库插入、右侧属性面板/事件流/变更集/评审(跑一轮:脚本结论含一条幻觉锚点,会被防幻觉闸门丢弃,修正自动落草稿,发布仍需人工过闸)/发布 Release;window.cmsStudio 可在控制台探索。演示不落盘、不含 L3 沙箱与 CLI 编译链(Node 专属,浏览器里被无害桩替代)。
- 渲染一个页面:
@yudream/cms-vue的createRenderer(...)→renderDocument(doc)(三模式同构)或renderToHtml(doc)(SSR/静态)。 - 装配块库:
@yudream/cms-blocks的registerAllBlocks({typeRegistry, runtimeRegistry})(17 个内置块)。 - 作者造块:
@yudream/cms-sdk的defineTemplateBlock(L2 定义期即时编译)/defineSfcBlock(L3 沙箱)/defineVar/defineCollection/defineLayout/defineTheme/definePage。 - 命令行自查:
pnpm --filter @yudream/cms-cli build && node packages/cli/dist/index.js --help(validate page/type/var/theme、compile template/sfc、starter block/theme)。 - 开箱编辑器:
@yudream/cms-studio的createStudio()→mount(el)(内存后端开箱即用,宿主替换存储/AI/截图端口即可接线)。 - 发布:
@yudream/cms-vue的createPublishPipeline(...)→publish(pageId)(校验→固化→双渲染→真实比对→原子切换)+ core 内容 API 契约。
环境要求:Node ≥ 22(CI 用 24)、pnpm 11.9。依赖与构建全部走 pnpm workspace,源码为 ESM + TypeScript(NodeNext)。
pnpm install # 安装依赖(workspace 全部包)
pnpm build # 递归构建:每包 tsc -b → packages/<pkg>/dist
pnpm test # 递归单测:vitest run(headless 用 node 环境,UI 包用 happy-dom;各包含覆盖率阈值)
pnpm typecheck # 递归类型检查:tsc -p tsconfig.json(noEmit,按 paths 直读源码)
pnpm gate # 依赖边界门禁:headless 包零 UI / 零宿主依赖、零 DOM 类型
pnpm golden:check # 黄金截图保真比对:固定夹具 × 多视口 × 明暗逐像素比对(design §3.6 测试 2),回归失败出差异图;基线重生成用 pnpm golden:update约定摘要(完整规则见 AGENTS.md 与 docs/dev/conventions.md):
- 源码相对导入必须带
.js后缀(NodeNext);@yudream/cms-*之间经workspace:*互引。 - headless 包(core / compile / vars / collab / ai / cli / transcribe)的 tsconfig
lib只有["ES2023"],不得引入 DOM;UI 包(vue / blocks / sdk / studio)额外加DOM、DOM.Iterable。 - 类型检查走根
tsconfig.base.json的paths(直指各包src/index.ts);构建走每包tsconfig.build.json的 project references 与dist声明。 - 每包脚本:
build/test/typecheck;根脚本pnpm -r递归调用。CI:install → gate → typecheck → build → test + 独立黄金截图 job。
| 包 | 依赖 | 职责 |
|---|---|---|
@yudream/cms-core |
无(零运行时依赖,纯 TS sha256) | 文档模型、类型工件与版本审核流、schema、校验、可逆操作与操作日志、修订、Release 模型、迁移、主题包契约、内容 API 契约 |
@yudream/cms-compile |
core、@babel/parser、@vue/compiler-dom、@vue/compiler-sfc、postcss(编译期) | L2 受限文法编译(表达式白名单/scoped CSS)、L3 构建沙箱(独立进程 --permission)、结构化错误契约、内容寻址产物、Node/浏览器 Worker 适配 |
@yudream/cms-vars |
core | 变量声明与校验、类型检查器、别名与弃用、解析三态与降级、时机与受众硬校验、派生表达式、依赖追踪与失效合并、选择器数据面、P2 声明式查询变量 |
@yudream/cms-collab |
core | 七类事件流与回放、三方合并(结构锚点/墓碑/确定性收敛)、RGA 文本 CRDT、冲突面板与决议、锚点评论(孤儿桶/评论即任务)、评审引擎(防幻觉/评分卡/胶片/截图预算)、软存在感 |
@yudream/cms-ai |
core | 目录两层(生成+notes 合并+陈旧检查)、工具契约(批量原子回滚/读预算 JSONL 卸载/vars 工具 admin 拒读)、变更集 HITL、L1 变体、评分卡八规则、L4 主题生成、工作区种子 |
@yudream/cms-vue |
core、vars;peer vue | 单一渲染入口(三模式同构)、覆盖层、接缝组件、令牌层、运行时块注册表(builtin/L2/L3)、编辑器(画布/结构树/schema 属性面板/拖拽/就地编辑/撤销)、SSR+岛、发布管线(固化/比对/增量)、主题加载 |
@yudream/cms-blocks |
core;peer vue | L0 布局原语(容器查询响应式)、基础内容块、raw-html + 净化网关(XSS 矩阵)、行为原语(Tabs/Accordion/Carousel)、@layer cms.render 样式层 |
@yudream/cms-sdk |
core、compile、vars;peer vue | 作者 API:defineBlock / defineTemplateBlock / defineSfcBlock / defineLayout / defineVar / defineDerivedVar / defineCollection / defineTheme / definePage(定义期自校验不静默) |
@yudream/cms-cli |
core、compile、vars | cmsc validate page/type/var/theme、compile template/sfc(L3 走沙箱)、starter block/theme(脚手架产物自身可过校验闭环) |
@yudream/cms-studio |
core、vue、blocks、vars、collab、ai、sdk;peer vue | 开箱编辑器应用:内存后端、页面管理、事件流面板、变更集 HITL 面板(含冲突决议)、评审面板、发布、主题装载(不依赖 YD 组件库,替换面收敛在组件层) |
@yudream/cms-transcribe |
core | 抓取(FetchPort 注入+出站防护)、容错 HTML 解析、分段映射、资产归集、确定性草稿生成(batch-file op)、截图比对端口+结构相似度 |
packages/studio/tests/e2e-acceptance.test.ts 实演 design §11 验收场景全文:AI 造 timeline.milestone L2 块 → 插入 → 绑 mc.servers 循环渲染 → 截图自评两轮(含防幻觉丢弃)→ 人评论 → AI 变更集 → 人工确认 → 类型转正 → 回退/重做 → 发布 Release(内容 API 过契约校验)→ 人机并发冲突裁决;全程事件流七类可见、OpLog 与事件流 opId 集合等价(无第二写路径)。
见 CONTRIBUTING.md(流程/纪律/DCO)、CODE_OF_CONDUCT.md、NOTICE(依赖许可)。MIT(见 LICENSE)。正式推公开仓与公开 registry 前需要明确授权;改名工具见 scripts/rename-scope.mjs。