浅念
8884e100f9
Overlay 190 upstream items (V8.22→8.31) preserving trade-pro theme, registry tests, and design docs. Re-applied full patch set on identical anchors (discovery/env_for/blocks.css/type-mapping/locale-override/ theme_color/frontend entries/test_theme_pro_v3 mods) plus compose pins. Verified: theme suites 35/35; dual-baseline full run 415 passed vs pristine 386+29 ours, FAILED-set diff EMPTY (same 10 Windows env fails). Live: container 8.31.1-dev.1 healthy, hesupipe 192 entries intact, trade-pro build 203 pages 0 errors. Co-Authored-By: Claude Code <noreply@anthropic.com>
2.0 KiB
2.0 KiB
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：完全独立可打开、模拟数据。
操作
- 登录后台选站点、打开「页面设计」。
- 点击画布区块显示橙色边框；顶部黑色工具栏可直接移动/拖拽、插入、复制或删除。
- 双击顶层区块标题（如 Hero 标题）改文字，Enter 确认、Esc 取消。
- 桌面端选择多列布局，用相邻列之间的橙色握柄拖动列宽，也可用方向键逐步调整。
- 切换平板/手机预览后检查样式，按原流程「保存草稿」→「发布设计」→「构建」→「部署」。
限制
- 保留声明式区块模型：不允许任意像素绝对定位和任意脚本插入。
- 画布内层子组件尚不支持直接双击修改，需右侧属性编辑。
- 列宽拖拽仅针对桌面端；平板/手机采用既有响应式字段。
- 草稿发布到内容库并非直接上线，需要构建并通过发布审批。
- 最终验收详情：
reports/V8_22_验收报告.md。