my-v0

Vue 3 + Vite 大屏低代码编辑器前端

技术栈

• 框架：Vue 3、Vite、TypeScript、Pinia、Vue Router
• 样式 / UI：Tailwind CSS、Element Plus、Iconify
• 画布：vue3-moveable（拖拽缩放）、vue3-selecto（框选）、vue3-sketch-ruler（标尺）、vue-draggable-plus（图层拖拽排序）
• 图表 / 编辑器：ECharts、Monaco Editor
• 数据：Axios、Mock.js

开发

Node ^22.18.0 || >=24.12.0，包管理器用 pnpm。

pnpm install
pnpm dev

pnpm build          # vue-tsc --build + vite build
pnpm type-check
pnpm preview
pnpm lint           # oxlint + eslint（都会 --fix）
pnpm format         # prettier --write src/

项目目标

一、编辑器核心架构

• 项目初始化与基础布局
• 工具栏实现
• 物料面板（可扩展架构）
• 图层面板
• 插件化注册机制
• 物料 DSL 设计
• 拖拽渲染流程
• 节点拖动与缩放
• 框选与多选操作
• 画布标尺接入
• 图层排序与画布层级联动
• 页面 DSL 设计与落地
• 属性面板
• 右键菜单
• 组合式函数拆分
• 撤销重做基础能力
• 批处理与历史记录管理
• ECharts 图表物料接入

二、代码与数据能力

• 网页代码编辑器接入
• 页面 Schema 导入导出与实时编辑
• 静态数据源
• API 数据源
• 数据源管理界面
• API 数据源调试
• 加载、刷新与请求复用

三、运行时与预览能力

• 大屏自适应预览
• 页面持久化与独立访问
• 运行时上下文

四、事件系统

• 事件调度机制
• 事件配置面板
• 跨组件事件联动
• 事件函数编辑体验优化
• 代码沙箱
• 物料可触发事件声明

五、AI Agent 核心能力

• 大模型接入与调试
• 提示词工程
• 上下文工程
• 结构化输出
• 工具调用
• Agent Loop
• 模型记忆
• RAG 与文档处理
• Agentic RAG
• Skill 体系
• MCP
• 流程编排（LangGraph）
• 状态管理与人工介入
• 子图与节点重试
• Responses API

六、全栈应用落地

• 项目整体搭建
• 最小会话构建
• AI 能力与设计器深度融合
• 完整业务场景落地