# 用户界面

## 区块编辑器

区块编辑器的整体布局采用顶部工具栏+内容区域的设计。

![编辑器界面](https://cldup.com/VWA_jMcIRw-3000x3000.png)

**工具栏**包含文档级操作：编辑/选择模式、保存状态、撤销/重做/插入等全局功能、设置开关以及发布选项。

**内容区域**承载文档主体内容。

**设置侧边栏**包含文档相关设置（标签、分类、发布时间等）以及"区块"标签页中的区块设置。工具栏中的齿轮按钮可隐藏设置侧边栏，让用户获得更专注的写作体验。在小尺寸屏幕上，侧边栏默认处于隐藏状态。

## 区块单元

区块是编辑器最基础的构成单元。广义而言，所有内容都是区块。用户通过区块构建文章与页面，这种模式完美复现了底层HTML标记的垂直流式布局。

通过将文档每个部分呈现为可操作的独立区块，我们实现了区块特定功能的场景化调用。这一设计灵感源自桌面应用惯例，既能支持丰富的高级功能，又不会造成界面臃肿。

被选中的区块会显示多项场景化操作：

![区块界面](https://cldup.com/3tQqIncKPB-3000x3000.png)

区块界面提供基础操作功能。区块编辑器致力于提供优质通用的默认设置，用户无需依赖设置侧边栏的高级功能即可完成完整文档创作。

**区块工具栏**突出显示常用功能。**区块图标**位于区块工具栏内，包含针对当前选中区块的顶层控制，主要支持用户将区块转换为其他兼容类型。部分区块还会通过区块图标提供替代样式选择。

**区块格式化**选项用于调整区块层级设置，**行内格式化**选项则用于修饰区块内部元素。当区块内容较长时，随着用户向下滚动页面，区块工具栏会自动固定在屏幕顶部。

通过**区块移动器**图标可实现区块的上下移动。点击省略号菜单可唤出附加功能：删除与复制区块，以及"以HTML编辑"、"转换为可复用区块"等**高级操作**。

未选中的区块不会显示区块工具栏或任何场景化控件，此时区块仅呈现内容预览效果：

![未选中区块](https://cldup.com/DH9HZnEgwH-3000x3000.png)

请注意选择状态与焦点状态可独立存在。例如图片区块被选中时，焦点可能位于标题输入框。

## 设置侧边栏

![设置侧边栏](https://cldup.com/iAqrn6Gc8o-3000x3000.png)

侧边栏包含"文档"与"区块"两个标签页：

-   **文档标签页**显示正在编辑的文章或页面的元数据及设置
-   **区块标签页**显示当前选中区块的元数据及设置

每个标签页均包含可展开/折叠的**侧边栏分区**编辑字段组。

若区块需要高级配置，相关设置应置于设置侧边栏中。但请注意：区块基础运行所需的设置不应放在侧边栏区块标签页——用户可能为获得沉浸式写作体验而关闭侧边栏。建议设置合理的默认值，并将重要操作置于区块工具栏。

适合放入侧边栏区块标签页的功能包括：

-   文本区块的首字下沉
-   图库的列数设置
-   "最新文章"区块的文章数量或分类筛选
-   所有非基础操作必需的配置项

## 区块库

![区块库](https://cldup.com/7QoQIoLk-A-3000x3000.png)

当用户通过工具栏或内容区场景化菜单插入区块时，**区块库**界面将会启动。库内区块按可展开的分组进行组织，搜索栏会随用户输入实时筛选区块列表。用户可通过选择**区块按钮**或**区块名称**来选用特定区块。