AI 原生的数据大屏 / BI 可视化编辑器。跟 Agent 描述需求，或者给一个 Figma 链接，它会直接在画布上创建组件、接上数据、配好联动，产出一个可以继续在编辑器里改的大屏。
Monorepo：
apps/app（Vue 3 编辑器）+servers/server（Hono + Mastra Agent 服务）+packages/*（框架无关的核心与物料）。B/S 架构：浏览器访问编辑器，后端用 PostgreSQL 存储，需要登录。
把需求描述清楚，Agent 会自己做语义分区、挑组件、生成 Schema、排版，实时同步到画布，改动前可以审批，也可以回溯。也可以给一个 Figma 链接，把设计稿导入成大屏。
组件能力覆盖不到的效果，内置的 Artifact App 子系统可以在沙箱里直接写 Vue 代码并实时预览。数据接好之后 Agent 会自己跑一遍数据流做校验。做好的大屏可以存成模板，之后复用。
编辑器本身带了 76+ 物料组件（图表、文本、指标、媒体、交互、地图下钻等），可以导出成脱离编辑器运行的静态包。
编辑器（apps/app）和 Agent 服务（servers/server）是两个独立进程：编辑器管画布渲染和交互，Agent 服务管规划、调用工具、读写大屏数据，两者之间用 SSE 流式通信。
编辑器内部按"核心逻辑 / 框架适配"分层：packages/core 是不依赖任何 UI 框架的编辑器核心（画布状态、组件树、事件系统），packages/composables 把它包装成 Vue 的 composable 给 apps/app 用。这样拆是为了以后核心逻辑要迁移到别的框架，或者做无头（headless）场景时，不用把这部分逻辑重写一遍。
物料组件（packages/material）和类型 / Zod Schema（packages/types）各自独立成包——编辑器和 Agent 服务都要用同一套组件定义和数据结构，独立出来两边引用同一份；物料也因此可以单独打包发布，不用绑着整个编辑器一起发。
大屏组件树存成两块：大屏和版本信息在 LargeScreen / LargeScreenVersion 表，每个组件单独一行存在 Layers 表里，前端读取时递归拼成完整的组件树。
用户在画布上手动拖拽、改属性，走的是普通 REST 接口，每次改动即时提交，没有防抖，也没有乐观锁。Agent 修改是另一条路：工具调用完之后，通过 Mastra 的 suspend/resume 把算好的组件结果，从同一条对话 SSE 流推给前端，前端合并进画布状态后，再回调同一套 REST 接口落库——两条路径最终都写同一张表。Agent 那边另外维护一份工作区文件镜像（由前端整屏同步生成），供它的读写文件类工具使用。
flowchart LR
U[用户手动编辑] -->|REST| DB[(Layers 表)]
T[Agent 工具调用] -->|suspend/resume| SSE[对话 SSE 流]
SSE --> C[前端合并进画布]
C -->|REST| DB
T -.镜像.-> WS[工作区文件]
同一浏览器里多个对话 Tab 同时跑 Agent 时，画布写入靠前端内存里的一个 Promise 队列做串行化，避免几个 Tab 互相打断。
| 目录 | 说明 |
|---|---|
apps/app |
主编辑器（Vue 3 + Vite + ECharts + Three.js） |
servers/server |
Agent 服务（Hono + Mastra + Prisma/PostgreSQL） |
packages/core |
编辑器核心（不依赖任何 UI 框架） |
packages/composables |
core 的 Vue composable 封装 |
packages/material |
物料组件包 |
packages/types |
类型与 Zod Schema |
环境要求：Node ≥ 22.13，pnpm 10（corepack enable 即可），Docker（用来起带 pgvector 的 PostgreSQL）。
git clone https://github.com/Onweekendd/ScreenWright.git
cd ScreenWright
pnpm installdocker compose -f docker-compose.dev.yml up -d # PostgreSQL + pgvector → localhost:5432
cp servers/server/.env.example servers/server/.env按角色填模型配置：REASONING_MODEL_*（推理）、VISION_MODEL_*（视觉）、EMBEDDING_MODEL_*（嵌入），均按 OpenAI 兼容端点处理；也可以全部留空，启动后在「设置」页填。其余保持默认即走本地 PostgreSQL + 本地文件存储。生产环境必须设置 JWT_SECRET（见 .env.example）。
初始化数据库：
pnpm --dir servers/server exec dotenvx run -- prisma migrate deploy # 建表
pnpm --dir servers/server run seed-modules # 组件库
pnpm --dir servers/server run seed-bi-user # 初始超管 admin（开发环境口令 admin123；生产用 SEED_ADMIN_PASSWORD 指定）
pnpm --dir servers/server run seed-embeddings -- --reset # 组件 RAG 向量（可选）pnpm server:dev # Agent 服务 → http://localhost:4111
pnpm dev # 编辑器 → http://localhost:5173打开编辑器并登录，进入任意大屏，右侧 AgentBI 面板即可开始对话。
后端同一份代码、同一个镜像，用环境变量 ROLE 决定进程职责：
| ROLE | 职责 | 备注 |
|---|---|---|
all（默认） |
以下全部跑在一个进程里 | 本地开发用，pnpm server:dev |
api |
登录鉴权、大屏 / 图层 / 数据源等业务接口、素材 blob、终端控制 WebSocket | 不加载 Mastra |
ai |
对话（bi-chat SSE）、Mastra agent / workflow、artifact 沙箱预览 | 单副本，按 threadId 粘性路由 |
worker |
消费 BullMQ 队列里的长任务（目前是生图），不监听 HTTP | 必须配 REDIS_URL |
配了 REDIS_URL（本地：docker compose -f docker-compose.dev.yml up -d redis，端口 6380）后，生图等长任务走队列、由 worker 进程执行；没配则在当前进程内直接执行。分开部署时，由网关 / ingress 把 /customApi/*、/api/*、/artifact-apps/* 转给 ai，其余转给 api；api、ai、worker 共用同一个 PostgreSQL、同一个 JWT_SECRET，多进程使用 fs 存储时还需共享 BLOB_STORAGE_DIR（或改用 MinIO）。
cp .env.compose.example .env # 至少填 POSTGRES_PASSWORD、JWT_SECRET、MINIO_ROOT_PASSWORD
docker compose up -d --build # 首次构建需要几分钟
docker compose logs migrate # 没设 SEED_ADMIN_PASSWORD 时，随机生成的管理员口令在这里打开 http://localhost:8080（HTTP_PORT 可改），用 admin 和上面的口令登录。国内网络构建慢的话，在 .env 里设 NPM_REGISTRY=https://registry.npmmirror.com。
编排里有 7 个服务：
| 服务 | 说明 |
|---|---|
web |
nginx：托管编辑器静态文件，并按路径分流——/customApi、/api、/artifact-apps → ai；/user、/bi-system、/online、/blobs → api；/screenwright/ → MinIO |
api / ai / worker |
同一个后端镜像，按 ROLE 起三种进程（见上一节）。ai 单副本 |
migrate |
一次性任务：建表、导入组件库、创建超管；跑完 api / ai / worker 才启动，可重复执行 |
postgres / redis / minio |
数据库（pgvector）、任务队列、素材库；minio-init 负责建桶并设为公开读 |
数据都在命名卷里（pg_data、redis_data、minio_data、ai_workspace），docker compose down 不会删，down -v 才会。对外用域名 / HTTPS 时把 PUBLIC_ORIGIN 改成对应地址（素材直链用它拼接），TLS 在 web 前面再加一层反向代理终结即可。
Vue 3 · TypeScript · Vite · Mastra Agent · Hono · Prisma · PostgreSQL · pnpm workspace / Turborepo
-
图片转大屏（自研：主模型看效果图写设计蓝图 → 批量准备素材 → 组装）
- 截图 / 参考图 → 版面区域切分与层级识别
- 区域内容 → 组件类型与配置的还原（图表类型、文本、指标卡等）
-
文档 / 图片 / 视频向量化
- 先覆盖 PDF、常见图片格式，视频先从关键帧和字幕入手
- 向量化后可以在对话中被检索、引用，作为生成大屏时的素材或背景资料
- 长期可以支撑基于这些资料的问答、指标解释这类场景
-
数据源接入（BI 系统的核心，优先级最高）
- 常见关系型数据库直连（MySQL、PostgreSQL 等）
- 数据源的连接管理、Schema 识别，辅助 Agent 判断该用什么图表
- 视情况再扩展到时序库 / NoSQL
-
用户编辑与 Agent 编辑的并发保护
- 目前两条路径都是直接写库，没有乐观锁，理论上会后写覆盖前写
- 打算做成最小可行的冲突检测（比如基于版本号/时间戳），而不是复杂的实时协同
-
Artifact App 的构建与沙箱化
- 现在的 LocalSandbox 就是本地子进程 + 固定工作目录，代码里也写明了不提供文件系统/进程/网络层面的隔离，不能跑不可信代码
- 计划换成真正隔离的沙箱（容器化），Agent 生成的代码不应该是直接在宿主机上跑的
- 补上构建/导出链路，让 Artifact App 也能像大屏一样导出成可独立部署的产物，而不是只能停留在预览代理里