# V8.22 高级可视化编辑器 — 开发实现说明

**继承基线**：SiteForge V8.21.3，四套主题与移动端导航不变。

## 文件

- `app/static/studio-canvas-bridge.js`：注入 sandbox iframe 的独立画布工具层。浏览器只传受限指令到上级编辑器；禁止执行任意 HTML/JS 指令。
- `app/static/editor-helpers.js`：纯函数校验、按 ID 排序、列宽边界、画布命令白名单。
- `app/static/editor.js`：受信 iframe 来源检查、按区块 ID 查找并操作草稿，撤销与版本继续复用原有机制。
- `app/main.py`：编辑器预览 HTML 注入上述脚本，不向真实静态构建添加编辑工具。
- `app/templates/editor.html`、`app/static/editor.css`：更清晰的引导和插入反馈。
- `tests/test_v822_canvas.py`、`tests_js/editor_ux.test.cjs`：新增专项测试。
- `scripts/studio_canvas_smoke_v822.py`：需要本机 HTTP 访问许可的真实 Chromium E2E。
- `scripts/studio_canvas_isolated_browser_v822.py`：无需网络的真实 Chromium iframe 交互检查。
- `examples/Studio_V8_22_画布级可视化编辑器_交互演示.html`：完全独立可打开、模拟数据。

## 操作

1. 登录后台选站点、打开「页面设计」。
2. 点击画布区块显示橙色边框；顶部黑色工具栏可直接移动/拖拽、插入、复制或删除。
3. 双击顶层区块标题（如 Hero 标题）改文字，Enter 确认、Esc 取消。
4. 桌面端选择多列布局，用相邻列之间的橙色握柄拖动列宽，也可用方向键逐步调整。
5. 切换平板/手机预览后检查样式，按原流程「保存草稿」→「发布设计」→「构建」→「部署」。

## 限制

- 保留声明式区块模型：不允许任意像素绝对定位和任意脚本插入。
- 画布内层子组件尚不支持直接双击修改，需右侧属性编辑。
- 列宽拖拽仅针对桌面端；平板/手机采用既有响应式字段。
- 草稿发布到内容库并非直接上线，需要构建并通过发布审批。
- 最终验收详情：`reports/V8_22_验收报告.md`。