Files
cms-SiteForge/docs/V8_24_DEEP_NESTED_STUDIO.md
浅念 8884e100f9 upgrade: adopt V8.31.1 (theme 1.3/1.4 redesigns, editor deep-canvas, guided launch, component library)
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>
2026-10-26 09:43:17 +08:00

4.1 KiB
Raw Permalink Blame History

SiteForge Enterprise V8.24 — 深层布局编辑与内层组件复用

版本: 8.24.0-dev.1
状态: 开发集成版。无需数据库结构迁移。来源:V8.23 完整项目源码。

1. 改造目标与边界

使使用者在编辑器中看得到、选得中、改得了两层多列布局:

  • 在顶层「多列布局」的第 1 层列中增加「内层布局」;
  • 内层布局的各列可直接添加富文本、图文、优势、行动号召组件;
  • 点击第二层组件(画布或右侧结构卡片),可以直接修改文字、复制、排序、删除;
  • 内层布局本身支持等宽 / 左宽右窄 / 左窄右宽、列间距、手机和平板列数;
  • 从站点媒体库选择图片时,应用到正在选中的组件,不误改上层布局;
  • 可以将当前选中的列内组件保存到本站复用组件库,并在选中列内组件时将组件副本插入其后。

限制: 当前支持「外层 layout → 内层 layout → 内容块」,不开放第三层 layout(遵循原服务端 blueprints.validate_blocks 的嵌套深度限制)。组件库使用复制入页,不是跨页自动同步。不会添加任意 HTML、JavaScript、自由绝对定位、数据库新表或新的发布捷径。

2. 编辑器操作

  1. 进入 /editor/{site_id}/{entry_id},选中或添加「多列自由布局」。
  2. 在某一列点击「+ 内层布局」,右侧「画布组件」列表会显示内层布局。
  3. 选中内层布局,用「+ 富文本」「+ 图文组合」「+ 核心优势」「+ 行动号召」添加内容。
  4. 点击中间画布中的第二层组件、修改标题与描述。可点复制、上移、下移、删除。
  5. 选中内层布局,选择布局比例与手机/平板列数。更改外层设置不会覆写内层布局数据。
  6. 需要重复利用时,选中子组件,点击「☆ 保存当前组件到组件库」;再次选择组件库条目,复制进入所选列内。
  7. 保存草稿 → 审核设计 → 发布设计 → 执行静态构建;仅点击发布设计不会直接更新正式网站。

3. 代码变化

  • app/static/editor-helpers.js:ID 安全定位(findNestedChild、findChildInRoot、findLayout),限制从画布传来的非法操作;客户端从不接受事件中夹带的数据库位置索引。
  • app/static/editor.js:任意已支持层级的点击编辑与树状卡片、内层响应式控件和添加操作、子组件素材选择及复用组件保存/插入。
  • app/static/studio-canvas-bridge.js:继续在受限 iframe 中分发可靠的 ID 消息,保留事件源比对和区块高亮。
  • tests/test_deep_nested_v824.py:静态渲染、草稿、预览、安全嵌套深度及组件库行为。
  • tests_js/deep_nested_v824.test.cjs:深层定位、非法命令、列宽和 ID 复制校验。
  • scripts/studio_nested_browser_v824.py:离线 Chromium 交互演示验收,不是已登录后台浏览器 E2E。
  • scripts/regression_v824.py:独立分批自动化回归、超时与原始日志。

4. 验证命令

python -m compileall -q app
node --check app/static/editor.js
node --test tests_js/*.test.cjs
python -m pytest tests/test_deep_nested_v824.py -q
python scripts/http_end_to_end.py
python scripts/studio_nested_browser_v824.py
python scripts/regression_v824.py --timeout 65 --group-size 2

查看 reports/v824-regression/result.json。各模块进程相互隔离,但这不代替 Docker、PostgreSQL/Redis 及生产备份/发布验收。

5. 上线前阻断项

  • 使用真实后台会话与正式 iframe,在常规浏览器完成点击、拖拽、撤销、保存、版本回滚流程;本轮的隔离 Chromium 演示不足以关闭此项。
  • 确认四套主题在全部页面的桌面/手机实际效果,尤其是内外层栅格混用与窄屏折行。
  • 测试大型页面接近 120 个区块上限、重复 ID、非法媒体 URL 与编辑冲突。
  • 官方 Art Design Pro 完整工程尚未随本项目提供,安装器不等于官方工程已完成编译。
  • 企业级 PostgreSQL、Redis、多 Worker、远端发布与恢复仍需部署环境的独立验收。