四、 菜单树与路由
sw-frontend以用户创建的各个应用为一级路由构建起整个前端工程的菜单体系，所有的页面都是依托“应用”为节点进行挂载的。下图为应用运维桌面，用户可以点击应用快捷方式进入运维应用。
运维桌面同时也是我们应用维度的其中一员，即在sw-frontend的总体设计概念上：一切皆是应用。
1. 菜单节点树
我们将运维应用前端页面中的菜单以树形节点（nodeTree）的形式组织起来，根结点映射为应用ID。从根节点创建的子节点，则作为一级菜单，以此类推孙子节点为二级菜单。如下图数据运维平台（appID：dataops）应用所示，一级菜单为“主页、资产目录、数据资产、数据管理、数据服务、数据质量”。该页面是dataops应用前端的渲染态。
进入到dataops应用的开发态，在前端开发编辑器中，我们可以从左侧菜单节点树看到与上面菜单一一对应的内容，每个节点上挂载了该页面的具体配置，每个页面配置包含一个主页面和多个页面区块配置，维护管理在页面设计器中。
2. 动态路由生成
每个应用的页面菜单都抽象为一个页面节点树nodeTree，并在Node节点上可以对节点类型和菜单页布局以及权限等信息进行配置（菜单/Link作为嵌套路由使用）。我们将挂在在该节点的主页面和页面区块的相关配置：属性、数据源、编排等进行配置，我们称之为节点配置（nodeConfig）。
在一级路由页运行渲染时，根据应用id（appId）拉取对应nodeConfig，如下以“运营中心”为例，对应的应用配置如下：其中children所代表的为二级路由；config代表的是该级节点的属性配置；nodeTypePath字段作为描述节点树的上下级关联关系key；每一级子路由进行渲染挂载都会依据nodeTypePath先去索引其下一级子路由nodeModel，用于装载子级的动态路由。
nodeTypePath也是作为子节点获取对应节点页面配置的索引key，用以拼接组装该节点的动态子路由。
五、 前端设计器
swadmin作为内置应用的一员，同时也是其他应用的母应用，一生万物，所有应用的都是通过前端设计器设计配置而来；在此可以对组件/页面进行业务字段、UI和数据源的配置，对当前应用的节点树进行编辑，以及对每级节点对应页面的组件进行属性配置、数据源绑定和布局编排工作。
swadmin提供了两种交互编辑方式。
1. 可视化交互编辑
如下图就是在对staticPage这一应用下的一级子路由“pageScreen”页面进行开发编辑，下方弹窗区为对页面内大屏组件的属性进行可视化配置。
2. 源码编辑（JSON编辑）
除了可视化设计界面外，同时也提供了源码编辑，直接修改映射配置，以提供更大的灵活性；且可以在源码编辑和可视化编辑之间进行灵活切换，并保持同步的编辑态。
六、 页面布局
sw-frontend内置两种页面布局类型：自定义布局和流式布局（自定义布局当前只在内置应用使用，暂未对外部应用开源使用）。对于流式布局我们将页面抽象成一行行的容器，在新增行容器时可以自定义分割成若干区块并确定分割占比，每个区块对应一个组件容器位。
对于自定义布局，可以根据业务需要对添加进入的区块组件任意拖拉改变宽高以及布局位置：
七、 组件体系
sw-frontend采取声明式组件注册机制，每个内置组件由meta元数据文件和主文件两份文件构成，其中meta以json格式用来描述该组件的一些可配置属性及组件的属性默认值和组件名称、组件ID等信息用于组件的注册和loader加载；主文件则用来承接用户对组件的配置信息和数据源数据及一些外部嵌入的逻辑代码。
同时页面提供自定义组件入口，供用户自行设计一些简单的组件以JSXRender方式进行渲染，且用户可以对自定义组件进行添加删除和编辑管理。
