diff --git a/docs/advanced-features/imgs/final-effect.gif b/docs/advanced-features/imgs/final-effect.gif new file mode 100644 index 00000000..76e2fe21 Binary files /dev/null and b/docs/advanced-features/imgs/final-effect.gif differ diff --git a/docs/advanced-features/imgs/preview-1.png b/docs/advanced-features/imgs/preview-1.png new file mode 100644 index 00000000..15b75f89 Binary files /dev/null and b/docs/advanced-features/imgs/preview-1.png differ diff --git a/docs/advanced-features/imgs/preview-2.gif b/docs/advanced-features/imgs/preview-2.gif new file mode 100644 index 00000000..c4c7b0c1 Binary files /dev/null and b/docs/advanced-features/imgs/preview-2.gif differ diff --git a/docs/advanced-features/imgs/preview-3.gif b/docs/advanced-features/imgs/preview-3.gif new file mode 100644 index 00000000..a2a2c3e4 Binary files /dev/null and b/docs/advanced-features/imgs/preview-3.gif differ diff --git a/docs/advanced-features/imgs/preview-4.png b/docs/advanced-features/imgs/preview-4.png new file mode 100644 index 00000000..97e2a2c1 Binary files /dev/null and b/docs/advanced-features/imgs/preview-4.png differ diff --git a/docs/advanced-features/imgs/preview-5.png b/docs/advanced-features/imgs/preview-5.png new file mode 100644 index 00000000..c412ebf8 Binary files /dev/null and b/docs/advanced-features/imgs/preview-5.png differ diff --git a/docs/advanced-features/imgs/preview-6.gif b/docs/advanced-features/imgs/preview-6.gif new file mode 100644 index 00000000..4dbe9752 Binary files /dev/null and b/docs/advanced-features/imgs/preview-6.gif differ diff --git a/docs/advanced-features/imgs/route-1.gif b/docs/advanced-features/imgs/route-1.gif new file mode 100644 index 00000000..a6e35b3f Binary files /dev/null and b/docs/advanced-features/imgs/route-1.gif differ diff --git a/docs/advanced-features/imgs/route-2.gif b/docs/advanced-features/imgs/route-2.gif new file mode 100644 index 00000000..d82f3f64 Binary files /dev/null and b/docs/advanced-features/imgs/route-2.gif differ diff --git a/docs/advanced-features/imgs/route-3.png b/docs/advanced-features/imgs/route-3.png new file mode 100644 index 00000000..2eed1999 Binary files /dev/null and b/docs/advanced-features/imgs/route-3.png differ diff --git a/docs/advanced-features/imgs/route-4.gif b/docs/advanced-features/imgs/route-4.gif new file mode 100644 index 00000000..56299b87 Binary files /dev/null and b/docs/advanced-features/imgs/route-4.gif differ diff --git a/docs/advanced-features/imgs/route-5.gif b/docs/advanced-features/imgs/route-5.gif new file mode 100644 index 00000000..7db8d425 Binary files /dev/null and b/docs/advanced-features/imgs/route-5.gif differ diff --git a/docs/advanced-features/imgs/route-6.png b/docs/advanced-features/imgs/route-6.png new file mode 100644 index 00000000..d0421e03 Binary files /dev/null and b/docs/advanced-features/imgs/route-6.png differ diff --git a/docs/advanced-features/imgs/route-7.gif b/docs/advanced-features/imgs/route-7.gif new file mode 100644 index 00000000..27c14161 Binary files /dev/null and b/docs/advanced-features/imgs/route-7.gif differ diff --git a/docs/advanced-features/imgs/route-8.png b/docs/advanced-features/imgs/route-8.png new file mode 100644 index 00000000..a6dbdda8 Binary files /dev/null and b/docs/advanced-features/imgs/route-8.png differ diff --git a/docs/advanced-features/imgs/route-bar-1.png b/docs/advanced-features/imgs/route-bar-1.png new file mode 100644 index 00000000..35987548 Binary files /dev/null and b/docs/advanced-features/imgs/route-bar-1.png differ diff --git a/docs/advanced-features/imgs/route-bar-2.gif b/docs/advanced-features/imgs/route-bar-2.gif new file mode 100644 index 00000000..670e2245 Binary files /dev/null and b/docs/advanced-features/imgs/route-bar-2.gif differ diff --git a/docs/advanced-features/page-support-nested-route.md b/docs/advanced-features/page-support-nested-route.md new file mode 100644 index 00000000..e2815bfd --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/advanced-features/route-bar-clear-preview-page.md b/docs/advanced-features/route-bar-clear-preview-page.md new file mode 100644 index 00000000..f0b41622 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/advanced-features/route-bar-current-page-highlight.md b/docs/advanced-features/route-bar-current-page-highlight.md new file mode 100644 index 00000000..f57735be --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/advanced-features/route-view-support-preview-subpage.md b/docs/advanced-features/route-view-support-preview-subpage.md new file mode 100644 index 00000000..885580c8 --- /dev/null +++ b/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) diff --git a/docs/basic-features/imgs/outline-tree-1.png b/docs/basic-features/imgs/outline-tree-1.png new file mode 100644 index 00000000..1b305d82 Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-1.png differ diff --git a/docs/basic-features/imgs/outline-tree-2.gif b/docs/basic-features/imgs/outline-tree-2.gif new file mode 100644 index 00000000..c9cc89f0 Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-2.gif differ diff --git a/docs/basic-features/imgs/outline-tree-3.png b/docs/basic-features/imgs/outline-tree-3.png new file mode 100644 index 00000000..0218530a Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-3.png differ diff --git a/docs/basic-features/imgs/outline-tree-4.png b/docs/basic-features/imgs/outline-tree-4.png new file mode 100644 index 00000000..3323d8d1 Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-4.png differ diff --git a/docs/basic-features/imgs/outline-tree-5.png b/docs/basic-features/imgs/outline-tree-5.png new file mode 100644 index 00000000..53c4261d Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-5.png differ diff --git a/docs/basic-features/imgs/outline-tree-6.png b/docs/basic-features/imgs/outline-tree-6.png new file mode 100644 index 00000000..1d22733d Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-6.png differ diff --git a/docs/basic-features/imgs/outline-tree-7.gif b/docs/basic-features/imgs/outline-tree-7.gif new file mode 100644 index 00000000..d259eaef Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-7.gif differ diff --git a/docs/basic-features/imgs/outline-tree-8.png b/docs/basic-features/imgs/outline-tree-8.png new file mode 100644 index 00000000..16754ecc Binary files /dev/null and b/docs/basic-features/imgs/outline-tree-8.png differ diff --git a/docs/basic-features/outline-tree.md b/docs/basic-features/outline-tree.md index 6de4a702..bc0a480d 100644 --- a/docs/basic-features/outline-tree.md +++ b/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 | 否 | + +