需求说明
本需求影响页面:
V1主题编辑器
可视化编辑器
需求背景与目标
针对不具备编程能力的运营人员,提供基于“预设HTML代码”的可视化编辑能力。运营可直接在实时预览区点击文字、图片进行内容替换,系统自动回写原始代码,确保页面结构稳定的同时极大降低维护成本。
核心设计原则
内容与结构分离:仅支持内容替换,不允许通过可视化模式改变HTML结构。
沉浸式全屏体验:编辑期间屏蔽非核心噪音。
实时双向同步。
Demostore 主题编辑器
保存
PRD 注释与交互说明
交互入口 (Entry)
入口位置:位于右侧模块配置栏(Sidebar-Right)标题右方。
图标语义:Sparkles / Edit,暗示可视化转换能力。
可视化模式规则
元素探测
:鼠标放置在 H1/P/Img 上呈现蓝色探测框。
内容优先
:禁止改变 HTML 层级结构,仅允许文本内容、图片 Src 的赋值。
沉浸式
:进入编辑后,背景主题编辑器全部遮罩,仅保留编辑工具栏。
正在编辑:自定义Html #1
取消放弃
保存并返回编辑器