docs: add route/outline-tree document (#1336)

docs/advanced-features/page-support-nested-route.md

@@ -0,0 +1,58 @@
+# 页面支持嵌套路由
+
+## 支持静态页面下新建子页面
+
+首先进入页面管理插件，新增一个 Root 页面，新建完成后，悬停 Root 项，点击右侧出现的菜单项，接着点击新建子页面。弹出的表单中，表单项“父文件夹/父页面”会自动填充，填写表单项“页面名称”和“页面路由”然后保存，即可新建一个子页面。这里我们新建一个子页面，名为 Home
+
+   ![route-1](./imgs/route-1.gif)
+
+## 页面树支持拖拽编排
+
+我们先在根目录新建一个页面名为 Intro，新建完成后可以看到 Intro 页面是在顶层。然后拖拽 Intro 页面到 Root 页面下，松开鼠标后页面右上角提示“保存成功”说明拖拽已完成
+
+   ![route-2](./imgs/route-2.gif)
+
+接着再添加一个子页面名为 Docs，你可以参考刚刚添加 Intro 页面的步骤添加 Docs 页面，也可以直接在 Root 页面下新建子页面。最终 Root 页面的树结构为这样
+
+   ![route-3](./imgs/route-3.png)
+
+## 新增了内置物料，属性配置中新增页面选择器
+
+打开 Root 页面，我们从物料拖入导航条和路由视图。导航条是预设的多个路由链接组成的 snippet，路由链接设置好跳转页面后可以用来跳转到其他路由，路由视图则是子路由插槽。这里的逻辑和 vue-router 是保持一致的，并且最终出码也是使用的 vue-router。在这里我们给每个路由链接设置到对应的路由
+
+   ![route-4](./imgs/route-4.gif)
+
+## RouterLink 增加右键菜单路由跳转，或者通过悬停菜单点击后跳转。画布顶部的路由指示器，也可以点击跳转
+
+如下图操作所示，我们给每个子页面添加一条简单的文本，方面查看当前子页面是哪一个。可以通过点击路由链接的右键菜单来实现路由跳转，需要注意的是，右键菜单只能在当前编辑（激活）页面的组件上生效。所以我们额外增加了一种交互方式，当你悬停在路由链接上时，无论此时路由链接是否能够编辑，可以点击右上角出现的跳转按钮来实现路由跳转
+
+   ![route-5](./imgs/route-5.gif)
+
+## 画布渲染器：支持父子多层级页面嵌套渲染，支持切换页面的时候局部切换刷新
+
+如上图所示，在跳转到子页面后嵌套渲染了父子页面，在子路由之间切换只进行了局部刷新
+
+## 预览时，支持单页预览的时候嵌套视图预览
+
+如下图所示，单页预览子页面时，会同时显示父页面内容。横向导航条属于父页面内容，导航条下面的“我是 Home 页”文本则属于子页面内容
+
+   ![route-6](./imgs/route-6.png)
+
+## 工具栏增加切换嵌套视图/单页视图
+
+点击页面右上角的菜单按钮，可以查看到新增了“切换到单页/嵌套视图”的选项。使用此选项来进行嵌套视图/单页视图的切换
+
+   ![route-7](./imgs/route-7.gif)
+
+## 最终效果
+
+Root 页面为父页面，拥有3个子页面，分别可以使用导航栏中的路由链接进行跳转。跳转到子页面后同时显示父页面，父子页面嵌套渲染
+
+   ![final-effect](./imgs/final-effect.gif)
+
+
+## 出码支持多层级路由嵌套结构的输出
+
+上述应用最终出码的路由文件如下
+
+   ![route-8](./imgs/route-8.png)

docs/advanced-features/route-bar-clear-preview-page.md

@@ -0,0 +1,5 @@
+## 路由bar支持一键清除预览页面的路径
+
+如果存在预览路径，当鼠标选听到路由bar上时，会出现“重置路由视图为占位符”的按钮，点击后会将当前编辑页的路由视图重置为占位符。如下图所示，当前编辑页面为Root页面，Root页面的RouterView显示了Docs页面，Docs页面内部的RouterView显示了BestPractices页面，点击“重置路由视图为占位符”的按钮后，Root页面的RouterView重置为了占位符，子页面Docs和嵌套的子页面BestPractices都不再显示
+
+   ![route-bar-2](./imgs/route-bar-2.gif)

docs/advanced-features/route-bar-current-page-highlight.md

@@ -0,0 +1,5 @@
+## 路由bar会显示预览页面的路径，当前编辑页面会高亮
+
+在RouterView中显示了子页面后，路由bar中的路径会同步更新，并且当前编辑页面会加粗高亮。当前编辑页一直是Root页面，Root路由会高亮显示，当前编辑页后的预览的路径文本色显示为浅色
+
+   ![route-bar-1](./imgs/route-bar-1.png)

docs/advanced-features/route-view-support-preview-subpage.md

@@ -0,0 +1,41 @@
+# RouterView组件支持预览子界面
+
+## 为什么需要预览子页面功能？
+
+在父页面拖入RouterView来提供给子页面渲染的插槽，然而在编辑父页面时，我们无法结合子页面内容来实时预览更改后的整体效果，想查看整体效果只能通过单页预览或者出码运行。为了提升这个场景的交互体验，我们推出了RouterView组件支持预览子页面功能。
+
+
+下面我们逐步创建演示示例来展示路由的新功能。
+
+
+首先我们创建多个页面，页面结构如下
+
+   ![preview-1](./imgs/preview-1.png)
+
+接着在Root页面中拖入横向导航条和路由视图，横向导航条中的路由链接绑定好跳转页面，然后在每个子页面中拖入文本。效果如下所示
+
+   ![preview-2](./imgs/preview-2.gif)
+
+## RouterView组件支持预览子页面
+
+我们回到Root页面，Root页面中有一个横向导航条和一个RouteView路由视图。悬停RouteView组件，RouteView右上角显示“眼睛”图标，点击此图标用会弹出列表。列表的可选项分为两类：
+
+路由子页面占位符。是列表首个元素，选择后重置RouterView为占位符
+
+RouteView组件所在的页面的子页面，选择任意一个子页面后，RouterView内容会显示子页面
+
+具体效果如下图所示。RouterView中显示了子页面，预览的子页面是只读的（鼠标悬停子页面的组件显示灰色边框，说明是只读的），当前编辑页仍然是Root页面
+
+   ![preview-3](./imgs/preview-3.gif)
+
+## RouterView组件预览子页面支持嵌套预览
+
+我们将Docs页面稍作修改，首先给Docs页面增加两个子页面分别为QuickStart和BestPractices，这两个子页面也拖入一个基本的文本便于识别，最后在Docs页面中拖入一个路由视图。页面结构和Docs页面预览如下
+
+   ![preview-4](./imgs/preview-4.png)
+
+   ![preview-5](./imgs/preview-5.png)
+
+我们回到Root页面，将Root页面中的RouterView显示为Docs页面，即使RouterView内部的内容是只读的，嵌套的RouterView仍然可以继续选择要显示的子页面。效果如下图所示
+
+   ![preview-6](./imgs/preview-6.gif)

docs/basic-features/outline-tree.md

@@ -2,6 +2,58 @@
 
 在左侧插件栏中，单击![大纲树插件图标](./imgs/icon-tree.png)，展开并查看页面大纲树。
 
-   **图 1**  设置主页
-   ![设置主页](not-found/setIndex-20.png)
+##  大纲树UI展示
+   ![outline-tree-1](./imgs/outline-tree-1.png)
+
+## 节点支持拖拽
+
+大纲树节点支持拖拽，下面是一个最基础的拖拽文本到div容器的例子
+
+   ![outline-tree-2](./imgs/outline-tree-2.gif)
+
+拖拽时鼠标悬停节点即拖拽目标节点。拖拽交互分为三类：拖拽为目标节点的子节点、拖拽为目标节点的前一个兄弟节点、拖拽为目标节点的后一个兄弟节点。UI分别为如下表示：
+
+将Text节点拖拽为div节点的子节点。拖拽为目标节点的子节点时，目标节点显示全部边框
+
+   ![outline-tree-3](./imgs/outline-tree-3.png)
+
+将Text节点拖拽为div节点的前一个兄弟节点。拖拽为目标节点的前一个兄弟节点时，目标节点显示上边框
+
+   ![outline-tree-4](./imgs/outline-tree-4.png)
+
+将Text节点拖拽为div节点的后一个兄弟节点。拖拽为目标节点的后一个兄弟节点时，目标节点显示下边框
+
+   ![outline-tree-5](./imgs/outline-tree-5.png)
+
+另外如果禁止拖拽，则目标节点的背景色会高亮警告。如下图所示，将div节点拖拽为Text节点的子节点是行不通的
+
+   ![outline-tree-6](./imgs/outline-tree-6.png)
+
+禁止拖拽的逻辑和画布是保持一致的，由物料组件的 isContainer 和 nestingRule 属性决定。目标节点对应的组件的属性 isContainer 为 True 是允许其他节点拖拽为目标节点的子节点的前提条件，nestingRule 请参考物料资产包协议中的组件属性信息结构规范章节
+
+## 大纲树嵌套深度很深时，显示横向滚动条
+
+   ![outline-tree-7](./imgs/outline-tree-7.gif)
+
+## 大纲树支持复制、删除、多选能力
+
+长按 ctrl + 鼠标单击，可支持元素多选，多选节点后可以结合快捷键可以实现批量复制、粘贴、删除操作，多选选中的节点在大纲树和画布会同步显示。如下图所示
+
+   ![outline-tree-8](./imgs/outline-tree-8.png)
+
+另外还给大纲树补充了几个其他常用的快捷键，具体看如下表格
+
+
+| 大纲树支持的快捷键  | 功能说明 | 支持多选 |
+| --------- | -------- | ------------- |
+| ctrl+鼠标点击 | 选择多个节点。如点击已选中节点后，则为取消选中       | 否 |
+| ctrl+c       | 复制节点           | 是 |
+| ctrl+v       | 粘贴节点           | 是 |
+| ctrl+x       | 剪切节点           | 是 |
+| delete       | 删除节点           | 是 |
+| ctrl+z       | 撤销历史记录       | 否 |
+| ctrl+y       | 回退历史记录       | 否 |
+| ctrl+s       | 保存页面schema     | 否 |
+
+