项目与页面创作
项目与页面是平台日常创作的主线。项目用于组织一整套演讲汇报、专题分析或图文卡片集，页面则承载具体的内容结构、视觉排版与交互表达。
1. 创建与配置项目
进入工作空间后，点击“新建项目”：
- 基本信息：填写项目标题与描述。项目描述不仅供团队成员参考，也会作为全局上下文注入给 AI，帮助 AI 准确理解内容主题与受众。
- 画布尺寸与比例：
- 常见演示比例：
16:9（1920×1080，主流屏幕与投影推荐）或4:3（传统屏幕/平板）。 - 竖屏或卡片比例：
9:16、1:1或自定义固定像素尺寸（适合图文海报或移动端展示）。
- 常见演示比例：
- 关联主题与样式：选择工作空间内的默认品牌主题（决定主色、配色与字体族）和排版样式规范。
2. 组织页面大纲
项目由多个有序页面组成：
- 建议命名规范：推荐按演示汇报逻辑编号命名，例如
01 封面、02 核心结论、03 数据拆解、04 风险与对策、05 结语。 - 页面管理：支持在左侧大纲树中拖拽调整页面顺序、复制已有页面以保留板式、以及将废弃页面进行归档（归档后随时可恢复）。
- 组件沉淀原则：如果多页之间有高度相似的结构（如固定版式的三列指标卡、团队介绍页），建议在“组件库”中将其沉淀为组件，而不是在每页重复粘贴相同代码。
3. 编辑工作台概览
打开任意页面即可进入沉浸式编辑工作台：
+------------------+------------------------------+---------------------------+
| 左侧：页面大纲 | 中间：固定画布实时预览 | 右侧：双模编辑面板 |
| | | |
| 01 封面 | [ 公司年度战略复盘 ] | [ 可视化 ] [ 源码 ] |
| 02 核心结论 | [ 核心指标达成分析 ] | - 常用样式 |
| 03 财务数据 | | - 素材替换 |
| ... | (Runtime 实时渲染沙箱) | - 页面结构 / 高级设置 |
+------------------+------------------------------+---------------------------+平台提供独特的双模编辑体验：无论是不会写代码的内容创作者，还是需要精细控制的前端开发者，都能高效协同。
4. 低代码“可视化”面板实战
切换到 “可视化” 面板，创作者无需接触 HTML/Vue 标签，直接通过所见即所得的点击即可修改内容。
4.1 直接点击编辑文本
- 在中间预览画布中，直接点击任意标题、正文段落或数据卡片。
- 画布中被点击元素会出现蓝色高亮选中框，光标直接进入文本编辑状态，实时修改文字内容。
4.2 “常用样式”快捷调节
在右侧属性面板的“常用样式”分组中，针对选中的文字或区块快速调整：
- 文字排版：字号滑块、粗细、字体颜色、行高、文字对齐方式（居左、居中、居右）。
- 外观与边距：背景填充色、内边距（Padding）、外边距（Margin）、圆角大小、边框线宽与颜色。
- 定位与网格：收敛在“更多样式”中，可随时微调元素的层级与对齐。
4.3 图片素材一键替换 (AssetImage.v1)
平台推崇使用标准化图片组件 AssetImage.v1：
- 在画布中点击图片，右侧面板会自动显示该图片的资源绑定状态。
- 点击“从工作空间资源库选择”，即可弹出资产选择器，一键更换为团队已有素材。
- 可视化面板支持直接切换图片的填充模式（
cover裁剪填充 或contain完整适应），并提供九宫格对齐定位（居中、顶部居中、靠左等）。
4.4 样式锁定与保护机制
为了防止低代码操作破坏复杂的排版外壳：
- 若文本段落内嵌了特殊的内联样式、动态表达式或受保护组件，系统会显示**“样式锁定”**状态。
- 在锁定状态下，你可以安全地修改文字内容，而不会误删外层的排版标签。
- 点击“样式锁定”可查看被保护的具体标签属性；若确需彻底清空排版外壳，可点击“删除锁定样式”，系统会保留文字本身并清理复杂属性。
4.5 草稿保存与版本更新
- 在可视化面板中的所有修改首先作为本地草稿保存，中间画布会即时显示效果。
- 确认满意后，点击顶部的 “保存” 按钮，Backend 会生成页面新版本并持久化。每个被修改字段均支持单独点击“撤销”，也可一键恢复至初始状态。
5. 源码模式与高级定制
针对需要复杂排版、动态交互或使用特殊组件的场景，可切换到 “源码” 面板：
- Monaco 智能编辑器：内置语法高亮、代码折叠与代码诊断提示。
- 公开能力规范：页面源码统一使用 Vue 3 单文件组件（SFC）格式。请严格通过版本化契约引用 Runtime Kit 能力（例如
@runtime-kit/canvas/CanvasFrame.v1、@runtime-kit/asset/AssetImage.v1）以及工作空间已发布的组件。 - 避免私有依赖：不要试图引用未经版本声明的内部路径，以保证页面后续构建和跨环境导出的稳定性。
6. 版本历史与回滚
每次在可视化面板或源码面板点击保存，平台都会为当前页面创建一份版本快照（Snapshot）：
- 点击编辑区顶部的 “版本历史” 图标。
- 可以在列表中查看历史版本的保存时间、修改人以及版本差异（Diff）。
- 如遇到排版错乱或误操作，可选择任一稳定版本点击“恢复至此版本”。
7. 双模协作与 AI 协作节奏
建议个人与团队遵循以下协作节奏，效率最高：
[ AI 助手 ]
生成页面初稿、规划布局结构、编写复杂组件调用
↓
[ 可视化面板 ]
微调文本字句、替换图片素材、调整字号色板与间距
↓
[ 源码面板（可选）]
高级动效微调、定制复杂 Tailwind 样式或嵌套循环
↓
[ 实时预览 / 保存 ]
核验最终效果，生成页面稳定版本