打开编辑器
点击右上角「打开编辑器」进入。无需注册登录，首次打开自动载入示例页面（介绍页 / 数据看板 / 系统架构图 / 协作脑图），直接在上面改，或新建空白页面。所有编辑自动保存，数据存在浏览器本地，刷新不丢失。
想使用 AI 生成与多人协作功能时，再点击右上角「登录」按钮注册或登录账号，登录后本地页面可一键导入协作项目。
认识界面
编辑器分四个区域，从左上角顺时针分别是：
- 顶部工具栏：项目与账号菜单、撤销 / 重做、设计 / 钢笔 / 连线工具切换、组合、对齐、图层、居中、辅助线、预览
- 左侧面板：图标工具条 + 内容面板，含页面列表、组件库、图标库、资源（图片素材）、模板、母版、图层（面板宽度可拖拽调整，拖到最窄可折叠只留图标栏）
- 中间画布：所见即所得的编辑区，空白处可拖拽平移，右下角控制缩放
- 右侧属性面板：选中组件后在这里调整位置尺寸、旋转、背景、边框、圆角、阴影、动画、文本等全部属性
鼠标悬停每个按钮都会显示中文提示，右侧面板底部的「设置」里可以调整偏好（框选模式、移动步长、画布可拖拽等）。
创建与切换页面
打开左侧面板的「页面」（默认面板），即可看到当前项目的全部页面。每个页面都有独立的名称、尺寸与背景色，适合做一个完整设计稿的多个分页。
- 新建页面：点页面列表底部的「新建」按钮（或右键页面列表区域）
- 切换页面：点击页面名即可，编辑内容自动保存，切换无需手动保存
- 复制 / 删除页面：鼠标移入页面条目，使用右侧出现的操作按钮
- 修改尺寸与背景：选中页面条目后在右侧属性面板设置
拖入组件
左侧面板切换到「组件库」，按分类（base 通用组件、flow 流程图形状等）列着全部内置组件。点击左侧图标工具条即可切换面板。
- 拖入：按住组件条目拖到画布松开即放置
- 文本、按钮、表单、图表、表格、图片、图标等 30+ 组件开箱即用
- 「图标库」面板：内置 iconfont 图标，同样即拖即用
- 「模板」/「母版」面板：常用组件保存为基础模板或引用模板后可整块复用（详见第 17、18 节）
选中、移动、缩放、旋转与双击编辑
点击组件即选中（右侧属性面板随之显示该组件的属性）；按住拖动移动位置，拖动时自动吸附辅助线并显示与相邻组件的间距标注。
- 缩放：选中后拖动四角 / 四边手柄；按住 Shift 可等比缩放（部分组件）
- 旋转：拖动组件外圈的圆弧手柄
- 编辑内容：双击文本 / 形状 / 表格等组件直接编辑内容，编辑态下按 Esc 退出
- 微调位置：选中后按方向键每次移动 1px（精调排版常用）
- 隐藏 / 锁定：快捷键 Ctrl+H 隐藏、Ctrl+L 锁定选中组件
复制、粘贴与删除
复制 / 拷贝组件有多种方式，效果相同：
- Ctrl+C 复制 → Ctrl+V 粘贴；Ctrl+D 原地创建副本（最常用）；Ctrl+X 剪切
- 在组件上右键，菜单里同样有「复制」「粘贴」
- 删除：选中后按 Delete，或右键删除
- 选中的连线也可以直接按 Delete 精准删除
上传图片
两种方式上传本地图片：
- 直接拖拽：把本地图片文件拖进画布，自动完成上传并生成图片组件（按图片比例设置初始尺寸）
- 资源面板：左侧「资源」面板点击上传按钮选择图片文件（详细用法见第 19 节「素材资源库」）
图片组件支持铺满 / 等比 / 拉伸三种填充模式；未登录时图片保存在本地（数据不离开浏览器），登录后图片上传到服务端，协作成员可见。
框选与批量操作
在画布空白处按住拖出虚线框即可框选多个组件，选中后可以整体移动、复制、删除、对齐、分组。
- 两种框选模式：相交（碰到即选中，默认）与包围（完全包含才选中），快捷键 Ctrl+Shift+O 切换，设置面板也可切换
- 框选过程中实时高亮命中组件，松手批量选中
- 全选：Ctrl+A 选中当前页面全部组件
分组与图层
多个组件需要整体移动、缩放时，把它们组合成一个分组：选中多个组件后，点顶部工具栏「组合」按钮（或 Ctrl+G）。组合后拖其中任意一个，整组一起动；「解散」按钮（Ctrl+Shift+G）随时拆回。分组不会改变渲染结果，纯结构便利。
组件层级调整用顶部「图层」组按钮（或左侧「图层」面板）：
- 置为顶层 / 上移一层：Ctrl+Shift+↑ / Shift+↑
- 置为底层 / 下移一层：Ctrl+Shift+↓ / Shift+↓
对齐与辅助线
选中多个组件后，顶部工具栏「对齐」按钮组提供六种对齐与两种分布：左对齐、水平居中、右对齐、顶对齐、垂直居中、底对齐、水平分布、垂直分布。
- 对齐快捷键：L 左对齐 / C 水平居中 / R 右对齐 / T 顶对齐 / M 垂直居中 / B 底对齐（需先选中组件）
- 拖拽组件时自动出现辅助线（吸附参考线 + 与相邻组件的间距标注），排版对齐零心算
- 显示 / 隐藏辅助线：Ctrl+Shift+L，或点顶部「辅助线」按钮
绘制连线（流程图 / 思维导图 / 架构图）
顶部工具栏切换到「连线」工具，所有组件四边出现连线锚点（小箭头），无需选中组件即可拖线：
- 连接：按住某组件锚点拖向目标组件锚点，悬停高亮吸附，松开建立连接
- 断开：轻点已连接的锚点，断开该锚点的全部连线
- 选中与删除：点击画布上的线选中（变红），按 Delete 删除；点空白处取消选中
- 线型：连线模式下工具栏出现线段样式按钮，可切换贝塞尔曲线与直角折线，直角折线自动绕开画布上所有组件，箭头永不穿内容
- 样式：线段颜色（9 色预设）与粗细（1-5px）可调，随项目保存
- 连线自动跟随组件移动、缩放，无需手动同步；一个锚点可连多个目标
连线模式下画布空白处点按为框选不受影响；退出连线：再点一次「连线」工具或「设计」工具。
钢笔工具（自由绘制）
顶部工具栏切换到「钢笔」（快捷键 P），在画布上连续点按即可绘制折线 / 多边形等自由图形，双击或按 Enter 完成并自动退回「设计」模式；按 Esc 可取消。适合画不规则标注、手绘箭头等场景。
快捷键大全
以下为全部内置快捷键（Mac 上 Ctrl 对应 ⌘）：
| 操作 | 快捷键 |
|---|---|
| 撤销 / 重做 | Ctrl+Z / Ctrl+Shift+Z |
| 复制 / 粘贴 / 剪切 | Ctrl+C / Ctrl+V / Ctrl+X |
| 原地创建副本 | Ctrl+D |
| 删除选中 | Delete |
| 全选 | Ctrl+A |
| 保存 | Ctrl+S |
| 组合分组 / 解散 | Ctrl+G / Ctrl+Shift+G |
| 锁定 / 解锁选中 | Ctrl+L |
| 隐藏 / 显示选中 | Ctrl+H |
| 显示 / 隐藏辅助线 | Ctrl+Shift+L |
| 放大 / 缩小画布 | Ctrl++ / Ctrl+- |
| 视图居中 | Ctrl+Shift+F，或点顶部「居中」按钮 |
| 拖拽平移画布 | 按住 Space（空格）+ 鼠标拖动 |
| 钢笔工具 | P |
| 切换框选模式（相交 / 包围） | Ctrl+Shift+O |
| 微调位置（1px 步进） | 方向键 ←↑→↓ |
| 左对齐 / 水平居中 / 右对齐 | L / C / R |
| 顶对齐 / 垂直居中 / 底对齐 | T / M / B |
| 上移一层 / 置为顶层 | Shift+↑ / Ctrl+Shift+↑ |
| 下移一层 / 置为底层 | Shift+↓ / Ctrl+Shift+↓ |
小提示：正在输入文字时快捷键自动失效，不会误触；以上快捷键在编辑状态下按 Esc 可随时退出编辑。
AI 助手生成页面（可选）
登录进入工作台后，画布右下角打开「AI 助手」，直接用自然语言描述需求：「做一个登录页」「加一张柱状图展示近六个月销量」——助手会创建页面、添加组件、修改属性。
- 生成结果就是普通页面数据，落在画布上，可继续拖拽、调属性、连线
-
页面数据是纯 JSON（组件树 + 属性 + 连线），把
AI_PAGE_GUIDE.md数据结构文档交给任何外部 AI 工具，同样能生成页面导入
导出图片与数据备份
右上角「导出」按钮：
- 导出当前页为 PNG / JPEG 图片（连线、图表、圆角阴影完整保留，2x 清晰度）
- 导出整个项目为 ZIP 压缩包
数据默认自动保存在浏览器本地。换浏览器 / 清缓存前，建议导出项目 JSON 备份，或登录后把本地页面一键导入协作项目。
协作与分享
登录后：
- 在「工作台」创建项目，点「邀请成员」输入对方邮箱（需已注册），分配所有者 / 编辑 / 只读三种角色
- 被邀请的成员打开同一项目即可同屏实时编辑，只同步变化的属性，互不覆盖
- 只读成员可查看不可修改；协作服务可自行部署，数据保存在你自己的服务器上
- 游客模式编辑的本地数据，登录后导入协作项目即可与成员一起继续
基础模板
把常用的组件组合沉淀成模板，跨项目反复使用：
- 保存：画布选中组件（可框选多选）→ 右键菜单选「保存为普通模板」，自动生成预览图，出现在左侧「模板」面板
- 使用：从「模板」面板拖出到画布即得组件副本，与模板本身互不影响，可继续自由编辑
- 管理：面板条目悬停可重命名、删除；模板存云端，登录后自动同步，换设备不丢
- 未登录 / 游客模式下保存模板会提示登录引导，登录后即可使用
引用模板
与普通模板「拖出即副本」不同，引用模板是项目内共享的引用——拖出的每一处都是同一实例，改一处、处处更新：
- 保存：选中组件 右键选「保存为引用模板」（仅项目所有者可创建，服务端强制校验），出现在左侧「母版」面板
- 使用：从「母版」面板拖出到项目任意页面，渲染内容按模板 id 实时读取
- 更新：点母版条目「编辑」进入编辑页修改，保存后该项目内所有引用同步更新，无需逐个改
- 多状态：编辑页可添加多个状态（如 Tabs 的每个页签、轮播的每一帧），配合组件「交互」配置切换状态，做出动态效果
- 协作者可正常使用母版，但不能创建——成员退出协作后引用依然有效
素材资源库
左侧「资源」面板是你的个人图片素材库，上传一次、随处可拖：
- 上传：点面板上传按钮选择图片，或直接把本地图片拖进画布自动上传入库
- 压缩与配额：超过 20KB 的图片自动视觉无损压缩；面板底部显示存储用量（黄金会员 200MB、铂金会员 2GB）
- 使用：缩略图列表秒开（浏览器强缓存），拖入画布即用；画布引用的是相对地址，页面数据不受上传目录影响
- 删除：条目悬停删除图片，配额同步回收
- 游客模式图片仅保存在本地；登录后上传到云端，协作成员在项目里可见可用