Files
cms-SiteForge/docs/V8_21_1_STUDIO_UX.md
T
浅念 601451f22b upgrade: adopt V8.21.3 (V8.13→8.21.3: P5 SFTP/S3, P6 multilingual, editor overhaul, enterprise hardening)
Overlay ~150 upstream items onto our V8.12 base, preserving trade-pro
theme, registry tests, and design docs. Re-applied our patch set
(discovery/env_for/blocks.css/type-mapping/theme_color/frontend entries,
test_theme_pro_v3 mods) — all anchors survived upstream evolution.

New platform enhancement (fixes upgrade-introduced regression):
multilingual.site_locale now honors settings_json.locale, plus
PUT /api/i18n/sites/{id}/locale — standalone English sites get
<html lang='en'> under the V8.15 locale-rewrite pipeline.

compose: adopt V8.21.3 (image 8.21.3-dev.1, /api/ready probes, MySQL/S3
env) with project name pinned to siteforge-v8-10 (data volumes).

Tests: 356 passed / 11 failed — all 11 confirmed pre-existing in
pristine V8.21.3 on this host (10 upstream Windows env + our build test
now green after locale fix). Patch registry updated in plan doc.

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-23 12:31:03 +08:00

4.2 KiB

SiteForge V8.21.1 — 可视化编辑器体验增强

状态:8.21.1-dev.1,在 V8.21 源码基础上做前端编辑器的向后兼容升级。

已实际开发的内容

  1. 页面区块面板:按标题、类型、嵌套区块内容搜索;拖拽排序继续保留;新增上/下移动、显隐、复制和删除快捷操作;支持 Alt+↑/↓ 按键移动聚焦的结构行。
  2. 属性分区:从单一长滚动面板拆分为「内容」「样式」「响应式」,多列布局与平板/手机跨度和显隐均放在响应式面板。
  3. PC/平板/手机预览:桌面自适应宽度、平板 780px、手机 390px;展示明确设备标签,窄屏可分别展开区块侧栏和属性侧栏。
  4. 页面刷新安全性:所有预览请求使用 AbortController 取消上一个请求,并通过请求序号和页面 ID 双重核对;旧请求不得覆盖新预览。
  5. 草稿可靠保存:调用保存接口前冻结请求数据,写入过程中若发生额外本地修改不会错误清除 dirty 标志;同一时间仅处理一项保存请求,页面切换时阻止混淆。
  6. 撤销与重做:历史操作按钮可用状态实时更新;连续输入编辑合并短时间内的快照,提供 Ctrl/Cmd+S 快捷保存(前端输入框内保留浏览器默认编辑撤销行为)。
  7. 顶部操作层级:保留高频保存/发布操作,低频的版本历史、全站设计、构建等放入「更多操作」菜单。移动端保存按钮仍可见。
  8. 测试辅助:纯函数 editor-helpers.js 以 Node Test Runner 检验,新增浏览器烟测脚本(需要运行环境允许本机 HTTP)和可离线打开的静态交互演示。

安全与兼容约束

  • 不修改已有页面 blocks JSON 数据模型、不新增生产数据库迁移;旧页面和已有 V8.21 草稿可以继续使用。
  • 仍使用原有 PUT /studio-draft 的 expected_revision 乐观锁、发布接口、站点权限及审批逻辑。页面草稿保存不会自动发布静态网站。
  • 编辑器 iframe 仍使用 sandbox="allow-scripts",未添加 allow-same-origin。UI 表单不执行用户自定义代码。
  • 没有实现无限自由定位、Figma 式像素编辑、复杂组件级协作锁、跨页面模板继承或官方 Art Design Pro 全工程真实编译。相关模块需要后续专项开发。

本次验证结果

  • JavaScript 纯函数:6/6 通过(node --test tests_js/editor_ux.test.cjs)。
  • Python 编辑器专项和既有历史/映射:9/9 通过;新静态界面测试:3/3。
  • 现有 39 个 Python 测试模块分段或独立运行,累计 328 个用例通过;其中前六批计 215 项、批次 7 拆分运行计 26 项、余下独立模块 87 项。
  • HTTP + Worker 实际建站构建:通过(隔离临时 SQLite 环境)。
  • Python 编译、全部 app/static/*.js 语法校验、工程静态发布检查:通过。
  • 一键完整回归:未通过完整单次执行门槛,第七批发生进程停滞,已记录。独立模块通过不代表一键执行器稳定。
  • 真实 Chromium 操作:当前执行环境 ERR_BLOCKED_BY_ADMINISTRATOR,不计为通过;保留 scripts/browser_studio_v8211.py 供在 CI/开发机复测。
  • Docker/PostgreSQL/Redis/Art Design Pro 官方工程:未进行本轮真实环境验收。

运行与使用

python scripts/http_end_to_end.py
node --test tests_js/editor_ux.test.cjs
python -m pytest -q tests/test_editor_ux_v8211.py
python scripts/browser_studio_v8211.py  # 需本地 Chromium、Playwright、本机 HTTP 访问权限

网站编辑器继续通过 /editor/{site_id}/{entry_id} 访问。单独查看视觉交互可直接在浏览器打开 examples/Studio_V8_21_1_交互预览.html,该文件为示例 UI,不访问数据库也不是真实发布端。

后续计划

  • 进行真实浏览器的 PC/平板/手机 E2E,并按操作可用性修复视觉缺陷;
  • 实现嵌套 layout 子组件的独立属性选择、拖拽落点可视化与组件版本继承;
  • 增加数据源联动的结构化表单编辑,而非复杂 JSON 文本框;
  • 拿到 Art Design Pro 官方项目后进行完整编译及权限/路由集成验收;
  • 排查一键测试执行器跨模块进程停滞并在 CI 设置稳定性门槛。