浅念
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>
32 lines
2.0 KiB
Markdown
32 lines
2.0 KiB
Markdown
# 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`。
|