蓝图编辑器

蓝图编辑器是 MdrFrontEngine 的核心功能，提供直观的可视化 UI 设计体验。通过拖拽组件、调整属性、管理层级，你可以快速构建出专业的用户界面。

界面概览

┌─────────────────────────────────────────────────────────────────┐
│  [Logo]  项目名称    地址栏     [预览] [导出] [设置]             │
├────────────┬───────────────────────────────┬───────────────────┤
│            │                               │                   │
│   组件     │                               │     属性          │
│   面板     │                               │     检查器        │
│            │                               │                   │
│  ─────────│         画布区域               │  ────────────────│
│            │                               │                   │
│   组件树   │                               │     样式          │
│            │                               │     编辑器        │
│            │                               │     AI 助手       │
├────────────┴───────────────────────────────┴───────────────────┤
│                      视口工具栏                                 │
└─────────────────────────────────────────────────────────────────┘

组件面板

组件面板位于左侧边栏上部，展示所有可用的组件类别和组件。

组件分类

分类	组件示例	说明
基础	Button, Link, Text, Icon	基本 UI 元素
布局	Div, Section, Card, Panel	页面结构和布局
表单	Input, Select, DatePicker, FileUpload	用户输入控件
导航	Nav, Navbar, Sidebar, Tabs, Breadcrumb	页面导航元素
媒体	Image, Avatar, Video, Audio	多媒体内容
数据	Table, DataGrid, List, Tree, Tag	数据展示组件
反馈	Modal, Drawer, Tooltip, Notification	用户反馈组件
无头	Headless Container	无样式逻辑组件

内置组件数量

MDR 内置 75+ 组件，覆盖常见 UI 场景：

按钮类 (4): MdrButton, MdrButtonLink, MdrIconLink, MdrLink
导航类 (8): MdrNav, MdrNavbar, MdrSidebar, MdrBreadcrumb, MdrPagination, MdrAnchorNavigation, MdrTabs, MdrCollapse
输入类 (3): MdrInput, MdrTextarea, MdrSearch
表单类 (16): MdrDatePicker, MdrDateRangePicker, MdrTimePicker, MdrRegionPicker, MdrVerificationCode, MdrPasswordStrength, MdrRegexInput, MdrFileUpload, MdrImageUpload, MdrRichTextEditor, MdrRating, MdrColorPicker, MdrSlider, MdrRange, MdrSelect, MdrRadioGroup
容器类 (4): MdrDiv, MdrSection, MdrCard, MdrPanel
图片类 (3): MdrImage, MdrAvatar, MdrImageGallery
数据类 (13): MdrTable, MdrDataGrid, MdrList, MdrCheckList, MdrTree, MdrTreeSelect, MdrTag, MdrBadge, MdrProgress, MdrSpinner, MdrStatistic, MdrTimeline, MdrSteps
反馈类 (8): MdrModal, MdrDrawer, MdrTooltip, MdrPopover, MdrMessage, MdrNotification, MdrEmpty, MdrSkeleton

使用方式

拖拽添加 - 从面板中拖拽组件到画布
双击添加 - 双击组件快速添加到当前选中容器
搜索筛选 - 使用顶部搜索框快速查找组件

┌──────────────────┐
│ 🔍 搜索组件...    │
├──────────────────┤
│ ▼ 布局           │
│   □ Container    │
│   ⊞ Grid         │
│   ▣ Flex         │
│                  │
│ ▼ 基础           │
│   ▢ Button       │
│   🔗 Link        │
│   T Text         │
└──────────────────┘

组件树

组件树展示当前页面的组件层级结构，支持：

功能特性

层级展示 - 清晰展示父子关系
拖拽排序 - 通过拖拽调整组件顺序和层级
快速选择 - 点击节点选中对应组件
可见性切换 - 临时隐藏/显示组件
锁定编辑 - 防止意外修改

操作方式

┌──────────────────────────┐
│ 组件树                    │
├──────────────────────────┤
│ ▼ Page                   │
│   ▼ Header               │
│     ├ Logo           👁️ 🔒│
│     └ Nav            👁️ 🔒│
│   ▼ Main                 │
│     ├ Hero           👁️ 🔒│
│     └ Content        👁️ 🔒│
│   └ Footer           👁️ 🔒│
└──────────────────────────┘

图标	功能
👁️	切换可见性
🔒	锁定/解锁组件
▼	展开/折叠子节点

右键菜单

在组件树节点上右键，可以执行：

复制 - 复制组件及其子组件
剪切 - 剪切组件
粘贴 - 粘贴到当前节点下
删除 - 删除组件
复制 MIR - 复制组件的 MIR 表示
包装容器 - 将组件包装在容器中

画布区域

画布是进行可视化设计的主要区域。

交互操作

操作	方式
选择组件	单击
多选组件	Ctrl/Cmd + 单击
框选组件	从空白处拖拽
移动组件	拖拽选中组件
调整大小	拖拽组件边缘/角点
平移画布	Space + 拖拽 / 中键拖拽
缩放画布	Ctrl/Cmd + 滚轮

辅助功能

对齐参考线 - 拖拽时自动显示对齐参考线
吸附对齐 - 自动吸附到相邻组件或网格
标尺 - 显示画布尺寸和位置标尺
网格 - 可选的背景网格辅助对齐

选中状态

选中组件时显示：

┌─────────────────────────────────┐
│  ●─────────────●─────────────●  │  ← 调整大小控制点
│  │                           │  │
│  ●      组件内容              ●  │
│  │                           │  │
│  ●─────────────●─────────────●  │
└─────────────────────────────────┘
     ↑ 旋转控制点（部分组件支持）

属性检查器

属性检查器位于右侧边栏，用于编辑选中组件的属性。

属性分类

┌─────────────────────────────┐
│ Button                      │
├─────────────────────────────┤
│ ▼ 基础属性                   │
│   文本: [点击我          ]   │
│   变体: [▼ primary      ]   │
│   大小: [▼ medium       ]   │
│   禁用: [ ] 否              │
│                             │
│ ▼ 事件                      │
│   onClick: [配置...]        │
│                             │
│ ▼ 高级                      │
│   ID: btn-1                 │
│   类名: [                ]   │
└─────────────────────────────┘

属性类型

类型	输入方式	示例
文本	输入框	按钮文本
数字	数字输入/滑块	宽度、高度
选择	下拉菜单	变体、大小
布尔	开关/复选框	禁用、可见
颜色	颜色选择器	背景色、文字色
事件	事件配置器	onClick

数据绑定

属性支持绑定到数据源：

文本: [▼ 绑定...]
      ├─ 静态值
      ├─ 变量 → $user.name
      ├─ 表达式 → ${user.name + '!'}
      └─ API 数据 → /api/user → name

视口工具栏

视口工具栏位于画布底部，提供视口控制功能。

┌─────────────────────────────────────────────────────────────┐
│  [🖥️] [📱] [📟]  |  [−] 100% [+]  |  [⟲ 重置]  [📐 网格]   │
└─────────────────────────────────────────────────────────────┘

功能说明

功能	说明
设备预览	切换桌面/平板/手机视口
缩放控制	调整画布缩放比例
重置视口	恢复默认缩放和位置
网格开关	显示/隐藏背景网格

预设视口尺寸

设备	宽度	高度
桌面	1920px	1080px
笔记本	1366px	768px
平板	768px	1024px
手机	375px	812px

AI 助手

AI 助手位于蓝图编辑器右下角，折叠时与组件树折叠按钮对齐，展开后显示一个小型对话面板。它用于把当前蓝图上下文交给 LLM，先生成可审阅的计划，而不是直接修改 MIR。

使用流程

点击右下角 AI 图标展开面板。
在输入框中描述目标，例如“规划一个更清晰的首屏结构”。
点击输入框右下角的发送按钮生成计划。
查看模型返回的目标和里程碑。
Hover 调试图标查看 Prompt 或原始返回。

设置项

标题栏的设置按钮会打开 AI 设置弹窗：

设置项	说明
Provider	`mock` 或 `OpenAI-compatible`
Base URL	兼容 OpenAI API 的服务地址
Model	模型 ID
API Key	可选密钥
JSON mode	是否发送 JSON mode 请求参数
Temperature	输出随机性
Max output tokens	最大输出 token 数

设置弹窗还支持从 {baseURL}/models 发现模型。模型发现只减少手动输入，不会根据模型 ID 推断能力。

调试输出

生成后面板底部会出现两个小图标：

图标	说明
查看 Prompt	Hover 展示实际发送给 provider 的 messages
查看原始返回	Hover 展示模型返回的原始文本

当模型实际输出了 token 但 UI 没有显示计划时，优先查看原始返回。常见原因包括返回了 Markdown 代码块、非 JSON 文本、字段缺失，或 provider 不支持当前 JSON mode 参数。

地址栏

地址栏位于顶部工具栏，用于导航和管理页面。

┌───────────────────────────────────────────┐
│  [←] [→] [🏠]  /pages/index.mir.json  [▼] │
└───────────────────────────────────────────┘

功能

前进/后退 - 在编辑历史中导航
主页 - 返回项目首页
路径显示 - 显示当前编辑的文件路径
快速导航 - 下拉菜单快速切换页面

快捷键

组件操作

快捷键	功能
`Delete` / `Backspace`	删除选中组件
`Ctrl/Cmd + C`	复制组件
`Ctrl/Cmd + X`	剪切组件
`Ctrl/Cmd + V`	粘贴组件
`Ctrl/Cmd + D`	复制并粘贴
`Ctrl/Cmd + G`	组合为容器
`Ctrl/Cmd + Shift + G`	解除组合
`Ctrl/Cmd + [`	下移一层
`Ctrl/Cmd + ]`	上移一层

视图操作

快捷键	功能
`Ctrl/Cmd + 0`	重置缩放
`Ctrl/Cmd + +`	放大
`Ctrl/Cmd + -`	缩小
`Ctrl/Cmd + 1`	缩放到 100%
`Space + 拖拽`	平移画布

通用操作

快捷键	功能
`Ctrl/Cmd + Z`	撤销
`Ctrl/Cmd + Shift + Z`	重做
`Ctrl/Cmd + S`	保存
`Ctrl/Cmd + Shift + E`	导出
`F5`	预览
`Escape`	取消选择

最佳实践

组件命名

为组件设置有意义的 ID 和类名，便于后续维护：

✅ id="hero-title"
✅ id="nav-menu"
✅ className="card-container"

❌ id="div1"
❌ id="element-123"

层级结构

保持清晰的组件层级：

✅ 推荐结构
Page
├── Header
│   ├── Logo
│   └── Navigation
├── Main
│   ├── Sidebar
│   └── Content
└── Footer

❌ 避免扁平结构
Page
├── Logo
├── Nav
├── Sidebar
├── Content
├── Footer
└── ...

响应式设计

优先使用 Flex/Grid 布局
使用相对单位（%、rem）而非固定像素
在不同设备视口下预览效果
为移动端单独调整必要的样式

外部库集成

蓝图编辑器支持动态加载外部 UI 组件库，扩展可用组件范围。

支持的外部库

库	说明	状态
Ant Design	企业级 UI 组件库	✅ 支持
Material UI	Google Material Design	✅ 支持

配置外部库

在项目设置中找到 外部库管理
选择要启用的组件库
等待库加载完成
组件面板中将显示新的组件分组

外部库状态

外部库加载时会显示状态指示器：

状态	说明
`idle`	未加载
`loading`	正在加载
`success`	加载成功，组件可用
`error`	加载失败，可点击重试

组件分组来源

组件面板中的组件会标注来源：

builtIn - 内置 MDR 组件
external - 外部库组件（如 Ant Design、Material UI）
headless - 无头组件

注意事项

外部库配置保存在浏览器本地存储中
首次加载外部库可能需要较长时间
加载失败时可点击重试按钮
外部库组件在代码导出时会自动添加依赖声明

下一步

AI 助手 - 配置 LLM Provider 并排查模型返回
节点图系统 - 为组件添加交互逻辑
组件系统 - 深入了解内置组件
代码导出 - 导出为生产代码

蓝图编辑器 ​

界面概览 ​

组件面板 ​

组件分类 ​

内置组件数量 ​

使用方式 ​

组件树 ​

功能特性 ​

操作方式 ​

右键菜单 ​

画布区域 ​

交互操作 ​

辅助功能 ​

选中状态 ​

属性检查器 ​

属性分类 ​

属性类型 ​

数据绑定 ​

视口工具栏 ​

功能说明 ​

预设视口尺寸 ​

AI 助手 ​

使用流程 ​

设置项 ​

调试输出 ​

地址栏 ​

功能 ​

快捷键 ​

组件操作 ​

视图操作 ​

通用操作 ​

最佳实践 ​

组件命名 ​

层级结构 ​

响应式设计 ​

外部库集成 ​

支持的外部库 ​

配置外部库 ​

外部库状态 ​

组件分组来源 ​

注意事项 ​

下一步 ​