优化文档。

docs-dev/SUMMARY.md

@@ -8,6 +8,11 @@
     * [场景编辑区](ui/Scene.md)
     * [动画编辑区](ui/AnimationEditor.md)
     * [侧边栏](ui/SideBar.md)
+        * [场景面板](ui/sidebar/Hierarchy.md)
+        * [历史面板](ui/sidebar/History.md)
+        * [属性面板](ui/sidebar/Property.md)
+        * [脚本面板](ui/sidebar/Script.md)
+        * [动画面板](ui/sidebar/Animation.md)
     * [状态栏](ui/StatusBar.md)
 * [脚本](script/Script.md)
 * [更新日志](update/UpdateLog.md)

docs-dev/ui/SideBar.md

@@ -2,22 +2,4 @@
 
 由场景面板、历史面板、属性面板、脚本面板、动画面板组成。
 
-## 场景面板
-
-编辑场景层级结构，单击选择，双击定位。  
-
-## 历史面板
-
-查看场景编辑历史，可以快速回退到某个历史状态。  
-
-## 属性面板
-
-可视化编辑场景元素的属性。  
-
-## 脚本面板
-
-可以创建脚本，使用脚本编辑器编辑脚本。  
-
-## 动画面板
-
-配合动画编辑器可以编辑补间动画。  
+![image](../images/sidebar.png)

docs-dev/ui/sidebar/Animation.md

@@ -0,0 +1,53 @@
+# 动画面板
+
+配合动画编辑器可以编辑补间动画。 
+
+![image](../../images/anim-edit-panel.png)
+
+## 动画名称
+
+点击名称属性，可以设置动画名称。
+
+![image](../../images/anim-name.png)
+
+## 动画类型
+
+点击动画类型下拉框，可以选择动画类型，目前只支持补间动画。
+
+![image](../../images/anim-type.png)
+
+## 动画目标
+
+选择场景中的物体，点击设置目标按钮，可以将选择的物体设为动画目标。
+
+![image](../../images/anim-target.png)
+
+## 开始时间
+
+设置开始时间，单位是秒。
+
+![image](../../images/anim-begin-time.png)
+
+## 结束时间
+
+设置结束时间，单位是秒。
+
+![image](../../images/anim-end-time.png)
+
+## 开始状态
+
+设置物体开始状态。
+
+![image](../../images/anim-begin-state.png)
+
+## 插值函数
+
+设置补间动画用的插值函数。
+
+![image](../../images/anim-ease.png)
+
+## 结束状态
+
+设置物体结束状态。
+
+![image](../../images/anim-end-state.png)

docs-dev/ui/sidebar/Hierarchy.md

@@ -0,0 +1,35 @@
+# 场景面板
+
+场景面板可以编辑场景层级结构，快速选择、定位、删除场景中的物体。
+
+![image](../../images/hierarchy.png)
+
+## 编辑层次结构
+
+使用鼠标拖动树上的物体可以编辑场景层次结构。支持：
+
+1. 将一个模型作为另一个模型子元素。
+2. 两个模型之间交换一部分子元素。
+3. 将基本几何体或光源放置到模型内部。
+4. 使用`组`将多个模型组合到一起。
+5. 删除模型内部一部分组件。
+
+**如何将多个模型组合在一起？**
+
+基本几何体都支持多层嵌套。可以添加一个`组`（在几何体菜单中），然后在场景树状图上，将多个模型拖动到`组`上。
+
+![image](../../images/hierarchy-group.png)
+
+## 选择物体
+
+点击树节点可以选择物体。
+
+## 定位物体
+
+双击树节点可以快速定位到物体。
+
+## 删除物体
+
+选择物体，点击`Del`键可以删除物体。
+
+![image](../../images/hierarchy-del.png)

docs-dev/ui/sidebar/History.md

@@ -0,0 +1,27 @@
+# 历史面板
+
+查看场景编辑历史，可以快速跳转到某个历史状态。
+
+![image](../../images/history-panel.png)
+
+## 撤销
+
+点击编辑菜单撤销按钮。撤销的历史以灰色显示。
+
+![image](../../images/history-undo.png)
+
+## 重做
+
+点击编辑菜单重做按钮。
+
+![image](../../images/history-redo.png)
+
+## 清空历史
+
+点击编辑菜单清空历史记录按钮或历史面板清空按钮。
+
+![image](../../images/history-clear.png)
+
+## 跳转历史
+
+点击历史面板上的历史，可以立刻让场景跳转到某个历史状态。

docs-dev/ui/sidebar/Property.md

@@ -0,0 +1,35 @@
+# 属性面板
+
+可视化编辑场景元素的属性。
+
+![image](../../images/property-panel.png)
+
+## 文本属性
+
+点击输入文本。
+
+![image](../../images/property-text.png)
+
+## 展示属性
+
+只能展示，无法编辑。
+
+![image](../../images/property-display.png)
+
+## 数字属性
+
+输入数字，点击右侧三角可以改变数字，滚动滚轮也可以改变数字。有的数字控件只允许输入整数。
+
+![image](../../images/property-number.png)
+
+## 复选框属性
+
+点击勾选和取消勾选。
+
+![image](../../images/property-checkbox.png)
+
+## 颜色属性
+
+点击选择颜色。
+
+![image](../../images/property-color.png)

docs-dev/ui/sidebar/Script.md

@@ -0,0 +1,19 @@
+# 脚本面板
+
+可以创建脚本，使用脚本编辑器编辑脚本。 
+
+![image](../../images/script-panel.png)
+
+## 创建脚本
+
+点击创建按钮，可以创建脚本。
+
+## 编辑脚本
+
+点击脚本右侧编辑按钮，可以编辑脚本。
+
+![image](../../images/script-editor.png)
+
+## 删除脚本
+
+点击脚本右侧删除按钮，可以删除脚本。