你是一名资深前端开发工程师，正在开发一款叫 Prodivix 的工业级浏览器端可视化前端开发工具。以下是这款工具的核心架构。
flowchart TD
%% 核心作者态文件系统
subgraph VFS [Workspace VFS]
direction TB
WorkspaceCore[workspace.json / route-manifest.json]
PIR((PIR Core JSON<br>ui.graph / logic / animation<br>CodeReference)):::core
CodeDocuments[Code Documents<br>TS / CSS / Shader / Adapter]
VFSAssets[Assets / Config]
end
%% ----------------- 顶部：编辑器层 -----------------
subgraph Editors [编辑器-三编辑器架构]
direction TB
%% 测试模块
TestBox[测试]
VisualTest[视觉回归测试等]
UnitTest[单元测试等]
TestBox --> VisualTest & UnitTest
%% 具体编辑器
Blueprint[蓝图编辑器]:::editor
NodeGraph[节点图编辑器]:::editor
AnimEditor[动画编辑器]:::editor
%% 代码相关能力通过共享代码作者环境进入三编辑器
%% 测试与编辑器的连接
VisualTest -.-> Blueprint
UnitTest -.-> NodeGraph
%% 动画细节
AnimDetail[关键帧 / CSS Filter / SVG Filter]
AnimEditor --- AnimDetail
end
%% ----------------- 中部：共享代码作者环境 -----------------
subgraph Authoring [共享代码作者环境]
direction TB
CodeEnv[Code Authoring Environment<br>三编辑器共享代码作者态底座]:::editor
CodeWorkspace[Code Workspace / CodeArtifact]
Symbols[Authoring Symbol Environment<br>CodeSymbol / CodeScope / Diagnostics]
IntelliSense[IntelliSense / Language Service]
CodeSlots[Code Slots<br>handler / executor / adapter / mounted CSS]
CodeAssets[GLSL / WGSL / TS / CSS / Adapter]
CodeEnv --> CodeWorkspace & Symbols & IntelliSense & CodeSlots & CodeAssets
end
Blueprint -->|"event / mounted CSS / adapter slot"| CodeEnv
NodeGraph -->|"executor / transform slot"| CodeEnv
AnimEditor -->|"easing / shader / timeline script slot"| CodeEnv
CodeEnv -->|"edit / index / diagnostics"| CodeDocuments
CodeEnv -->|"CodeReference / diagnostics"| PIR
%% 编辑器到 VFS 内核心 JSON 的连接
Blueprint -->|"ui"| PIR
NodeGraph -->|"logic"| PIR
AnimEditor -->|"animation"| PIR
%% ----------------- 左侧：资源与项目 -----------------
subgraph Assets [资源与依赖]
ESM[esm.sh]
ExtLib[外部库]
BuiltIn[内置组件]
HTML[HTML 原生]
ESM --> ExtLib
ExtLib & BuiltIn & HTML --> ProjectScope
subgraph ProjectScope [项目]
Router[路由]
Component[组件]
end
end
Router -->|"route manifest"| WorkspaceCore
Component -->|"component PIR"| PIR
Assets -->|"assets / dependencies"| VFSAssets
ESM -.-> AnimEditor
%% ----------------- 核心功能扩展 -----------------
LLM[LLM 辅助开发]
CommandLayer[Command / Intent / Patch]
LLM -->|"code context / patch proposal"| CodeEnv
LLM -->|"intent"| CommandLayer
CommandLayer -->|"validated workspace patch"| WorkspaceCore & PIR & CodeDocuments & VFSAssets
%% ----------------- 右侧：后端与 Git -----------------
subgraph BackendSys [后端与社区]
Backend[后端] --> Community[社区系统]
Community --> OtherPlatform[其他平台上的社区]
end
PIR <--> Backend
subgraph VersionControl [版本控制]
Git[Git]:::infra
GitPlat[GitHub / Gitee / GitLab]
License[依赖项 LICENSE 处理]
Git <--> GitPlat
License --> Git
end
WorkspaceCore & PIR & CodeDocuments & VFSAssets -->|"VFS 投影"| Git
%% ----------------- 底部：编译与部署 -----------------
subgraph Compilation [编译器与输出]
Compiler[编译器]:::output
%% 框架列表
Frameworks[原生 / Web Components / React / Vue / Angular<br>Qwik / Svelte / Solid / Lit / Astro]
Build[构建]
Deploy[部署]:::infra
%% 部署目标
Targets[Nginx 配置 / Cloudflare 等 / 服务器 / CDN]
Hosting[GitHub Pages / Vercel / Netlify]
Perf[性能监控]
Compiler --> Frameworks
Frameworks --> Build --> Deploy
Deploy --> Targets & Hosting
Targets --> Perf
end
%% 连接 VFS 内文档到编译器
WorkspaceCore & PIR & CodeDocuments & VFSAssets --> Compiler
Frameworks -->|生成源码| Git
%% ----------------- 右下角：文档 -----------------
Docs[文档]
Tutorials[教程]
flowchart TD
%% 写入侧：编辑器与 AI 不直接覆盖树结构
Editors[蓝图 / 节点图 / 动画编辑器]
LLM[LLM 辅助开发]
Commands[Command / Intent / Patch]
%% VFS 保存态：项目级作者态文件系统囊括 PIR Core JSON
subgraph VFS [Workspace VFS]
direction TB
WorkspaceCore[workspace.json / route-manifest.json]
Graph[PIR Core JSON<br>ui.graph<br>rootId / nodesById / childIdsById / regionsById]
CodeDocs[Code Documents / Assets / Config]
end
Validator[PIR Validator<br>Schema + Graph 语义校验]
Persistence[Backend / Git Projection]
%% 读取侧：需要树时只生成临时中间层
Materialize[materializeUiTree<br>临时树中间层]
Renderer[Renderer / Preview]
Codegen[Code Generator]
Editors --> Commands
LLM --> Commands
Commands --> Graph
Graph --> Validator
Validator --> Persistence
Persistence --> Graph
Graph --> Materialize
Materialize --> Renderer
Materialize --> Codegen
MFE 是 Blueprint、NodeGraph、Animation 三编辑器架构。specs/decisions/28.code-authoring-environment.md 定义的 Code Authoring Environment 是三编辑器共享的代码作者态底座。
- code-owned 内容由 Code Authoring Environment 承载，包括 event handler、custom executor、animation function、mounted CSS、shader、external library adapter 和普通 Workspace 代码文件。
- 三编辑器通过 code slot 连接代码能力。slot 需要声明 owner、输入、输出、能力约束和诊断落点；slot 的绑定值应是
CodeReference或CodeArtifactowner，不应是散落在 UI 局部状态里的裸代码字符串。 specs/decisions/25.authoring-symbol-environment.md定义的 Authoring Symbol Environment 是 Code Authoring Environment 的索引与查询层，负责CodeArtifact、CodeSymbol、CodeScope、DiagnosticTargetRef、SourceSpan、引用、补全和诊断。- PIR 可以引用代码，但不吞并代码源码和复杂库内部状态。复杂库按 Native / Adapted / Embedded / Code-only 能力等级接入，不逐库承诺完整可视化编辑。
- code-owned 不等于黑盒放弃。MFE 仍应该提供编辑、引用、诊断、定位、预览和 AI patch 能力，并能从 Issues、Inspector、画布、节点图、动画轨道跳转到对应代码上下文。
- 三编辑器、Inspector、Resources、AI 和 Issues 面板需要符号或诊断时，应通过 Code Authoring Environment 或其稳定查询接口，不直接扫描其他编辑器内部结构。
- 执行新 session 时，先同步远端最新 Git 仓库状态；开始改动前运行
git fetch并确认当前分支是否落后于远端，若远端已有新提交，先用非破坏方式集成后再继续。 - 读写文档都要用 UTF-8 编码。
- 所有代码必须考虑可扩展性和健壮性。
@prodivix/ui包下组件库使用 SCSS 进行样式编写，其他样式则用 Tailwind。要用最新的 Tailwind 4 写法，摒弃旧写法；尤其注意 Tailwind 当中关于 var 的写法，比如用text-(--text-primary)而不是text-[var(--text-primary)]。- 优先使用
@/...导入同一个包下的代码，而不是使用相对路径。 - 为方便开发者看懂代码，当且仅当在重要模块的核心方法或核心组件前编写规范的文档注释，写明白模块的调用链路的逻辑。不要写无用注释。
- 如果文件过长，拆分。
- 当且仅当需要测试时，补全测试。考虑边界条件。
- 不要加耦合测试，尤其不要写依赖 DOM 层级、内部 class、具体标签结构、
querySelector、closest、parentElement、快照或实现细节的测试；优先测试用户可感知行为、公开 API、状态结果和稳定语义。 - 当完整的功能写好后，先运行
pnpm run format来格式化代码。 - 仅在有明确提示的时候提交并推送。commit msg 使用纯英文，按照业界规范写法：使用
type(scope): description格式。 - 在保持 monochrome-ui 设计风格的前提下，样式和 UX 设计可以模仿 Figma 和 Dify。
- 扫描文件名时，优先使用
git ls-files、git diff --name-only等 Git 相关命令限定仓库文件，避免递归扫到node_modules等依赖目录。 - 依赖安装或更新导致锁文件变化时，无需手动修改锁文件，接受包管理器自然生成的锁文件变更。
- 文档语言按目标读者、已有文件语境和同一文档语言一致性决定。根
README.md使用英文，README.zh-CN.md使用简体中文。 - 任何 code-owned 能力都要优先接入 Code Authoring Environment，不要让三编辑器直接保存任意代码字符串，也不要绕过 Authoring Symbol Environment 自行扫描其他编辑器内部状态。
AGENTS.md是跨 AI 工具共享的主规则来源，记录项目架构、PIR 读写链路与通用开发规范。CLAUDE.md是 Claude Code 专用补充文件，用于记录 Claude 的命令速查、仓库路径索引、测试备注与文档边界。- 两者内容冲突时，以本文件的通用项目规则为准；工具专属执行细节以对应工具文件为准。