Files
cms-SiteForge/docs/V8_23_ADVANCED_STUDIO.md
T
浅念 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 Blame History

SiteForge V8.23 — 高级可视化编辑器第二阶段

版本:8.23.0-dev.1
基线:V8.22.0-dev.1 完整源码
阶段:开发集成版;未通过生产环境验收

1. 用户操作方式

在站点工作台打开 /editor/{site_id}/{entry_id},添加一个「多列自由布局」区块,并在任一列添加标题、图文组合或行动号召等子组件。

  • 点击中间预览中的列内组件,右侧「内容」自动显示相应组件的普通属性表单。
  • 在组件上悬浮显示快捷工具条,允许复制、删除、同列上下排序。选中态使用蓝绿色边框与顶层橙色选中态区分。
  • 对支持纯文本编辑的标题/描述双击,直接输入。富文本 HTML 内容仍使用安全受控的富文本配置,不直接将 DOM 反写到数据模型。
  • 选中顶层多列布局,切换右侧「手机/平板」,可选择均分、左宽右窄、左窄右宽,并设置列间距、手机及平板列数、跨列、顺序和显隐。
  • 更改均属于未保存草稿。保存草稿后可以发布设计,但正式站点还需构建、审批与部署。

2. 实际文件修改

文件 改动
app/static/studio-canvas-bridge.js 列内直接子组件工具栏、选中与文字修改事件,继续使用 sandbox iframe
app/static/editor-helpers.js 查找/校验父子 ID、子组件移动、布局预设等纯函数
app/static/editor.js 嵌套操作命令接收、内容属性卡片、列宽预设、草稿状态更新
app/static/editor.css 嵌套编辑卡片与预设按钮样式
app/templates/editor.html 画布帮助文案
tests/test_nested_v823.py 嵌套区块 Schema、草稿接口和安全界面回归
tests/test_nested_helpers_v823.cjs 过期 ID、拒绝非法操作、列宽、移动及复制安全检查
scripts/studio_nested_browser_v823.py Chromium 沙箱 srcdoc 直接交互验证
scripts/regression_v823.py 43 个测试模块独立分批执行及原始日志
scripts/check.sh、scripts/check.ps1、CI 加入新版回归入口、升级版本标识

3. 兼容性与安全边界

  1. 不改变已有 SQL Schema,不启用任意 HTML/JavaScript 组件,不修改静态站发布器对安全媒体与链接的控制。
  2. 父组件 ID 与子组件 ID 必须同时匹配当前页面内的真实布局。不存在的组件、非法字段与未知操作在父编辑器拒绝。
  3. 目前 只支持多列布局直接子组件的画布操作。更深层嵌套允许在后端声明式模型中存在,但尚不提供多层画布操作路径。
  4. 布局预设限于 2 列的左宽/右宽;1–4 列可使用等宽。当前未实现任意绝对定位、多组件跨列拖放或像素级自由布局。
  5. 组件库仍然是「复制一个快照到页面」模式,不是跨站点引用、自动同步或协作编辑;这部分不能算作完成。
  6. 浏览器传递操作通过 iframe.contentWindow 来源验证;沙箱仅设置 allow-scripts,不授予同源访问权限。保存/发布仍走已有认证、CSRF、修订冲突验证。

4. 验收记录

  • 完整 Python 历史和新增回归:43 个测试模块、352 项用例、15 个隔离批次,全部通过,详见 reports/v823-regression/。
  • JavaScript 历史测试:9 项通过;另有嵌套 JS 专项断言脚本通过。
  • Chromium 隔离画布:点击子组件、复制、双击修改标题的事件链路通过。
  • HTML 离线交互演示:通过 Chromium set_content 执行检查,组件点击、标题编辑、列宽预设和设备切换无脚本错误。
  • HTTP + Worker:真实启动服务、登录/CSRF、建站、构建、ZIP 下载与预览全部通过。
  • 未通过/未执行:Chromium 导航到 localhost 的真实后台 E2E,被运行环境管理员策略阻止;真实 Docker、PostgreSQL/Redis、生产服务器和官方 Art Design Pro 完整编译未在本轮执行。

建议下一步:完善复杂多层节点定位、可视化布局栅格和跨页面共享组件版本引用,然后把 Art Design Pro 官方工程加入真实集成编译和自动化浏览器测试。