title "网页交互"
spark `Contexts 提供了网页接口，所有的软件工具，都可以通过网页来使用。`

chapter "启动服务"
spark `为了更形象的解说软件界面，本文会引用本机 <a>http://localhost:9020</a> 提供的服务，来展示界面。
所以建议先按本章节的说明，下载并启动 Contexts 后，再查看后续章节的文档。
通过网页使用 Contexts 前，需要先启动 web 服务器。Contexts 自带了多种启动方式。`

spark `使用 serve 命令，可以直接启动服务。`
shell `./bin/ice.bin serve start`

spark `如果需要进程常驻，可以使用守护命令 forever。forever 启动守护进程后，才会启动服务进程，并且会一直等待服务进程结束，当检测到服务进程是异常结束的，则会重新启动服务进程。`
shell `./bin/ice.bin forever start`

spark `无论哪种方式启动，默认的服务端口都是 9020，打开 <a>http://localhost:9020</a> 即可通过网页使用所有的软件工具。`
spark `服务启动后，会在终端上，启动一个交互式的 shell，Contexts 的所有软件工具，都可以在这个 shell 上，以命令的方式使用。`

chapter "登录认证"
spark `如果是在容器或远程服务器上启动的服务，访问时都是需要登录认证的。
或者是本机启动的服务，但在其它设备上访问此服务，也是需要登录认证的。`
spark `前端网页在检测到没有登录，会展示一个登录页面。可扫码登录，也可以在后台执行命令进行授权登录。
初始用户只能在后台用命令授权登录，复制二维码下面的授权命令，在后台服务启动的 shell 中执行一下，即可授权登录。`
spark `Contexts 是一个工具系统，使用的场景是面向的个人或小团队使用，所以框架并没有提供用户注册的功能。
如果需要多人登录本系统，已经登录的用户，可以通过 aaa.offser 命令发送邀请链接，被邀请人就可以获取登录权限。`

chapter "使用方式"
spark `为了更加方便的使用这些软件工具，Contexts 自带了一个后台管理系统。
后台管理系统的界面从上到下，依次由菜单栏、导航栏、工作区、状态栏组成，另外搜索栏，会在需要时，悬浮在工作区之上。
所有的软件工具，既可以添加到导航栏里，通过结构化的方式组织起来，也可以通过搜索框被快速查找出来，还可以通过 URL 地址，直接在单独的网页中使用。`

section "导航式"
spark `Contexts 启动后，可直接访问 <a>http://localhost:9020/chat/portal/</a>，打开后台管理系统。
后台管理系统导航栏的内容，都是在 src/main.js 文件中定义的。如需自定义导航栏的内容，直接修改此文件即可。
Contexts 也提供了界面添加功能，点击创建后，依次添加群组、添加应用、添加工具，即可将任意的软件工具添加到导航栏。`
iframe "http://localhost:9020"

section "搜索式"
spark `默认的后台管理系统，会提供一个搜索框，所有的软件工具都可以通过搜索，直接在结果栏中展示，即可实现快速使用此工具。
当结果栏里，只有一条结果，则会直接创建此工具的界面。如果结果栏里，有多条结果，则需要手动选择需要打开的工具。`
iframe "http://localhost:9020?_search=tcp.host"

section "命令式"
spark `所有的软件工具都可以通过 URL 直接访问使用，例如工具 web.team.plan 的 URL 是 <a>http://localhost:9020/chat/cmd/web.team.plan</a>。`
spark demo plan
spark `有些软件工具在注册时，会注册一个全局的短名，如 web.team.plan 是全名，plan 就是注册的短名，在使用时，两个完全等价，如链接地址
<a>http://localhost:9020/chat/cmd/web.team.plan</a> 与 <a>http://localhost:9020/chat/cmd/plan</a> 是一样的。
需要注意的是，并不是所有的工具在注册时，都会注册短名。只有那些比较基础、比较通用的工具，才需要注册短名。`

chapter "标准界面"
spark `在 Contexts 中，所有的软件工具，都是使用同一前端框架，自动生成的前端界面。
如果默认的前端界面，无法满足需求，可以灵活的配置，指定任意的前端脚本，甚至还可以随时编写前端代码，自行定义界面。`
spark `一个标准的工具界面，从上到下依次为标题栏、参数栏、工具栏、工作区、状态栏。
有时为了最大的展示工作区，往往会将标题栏、参数栏、工具栏，放在同一行。`
spark demo host

section "标题栏"
spark `标题栏，由工具名与中文名组成。当系统切换成英文版时，会只显示工具名。`
spark `点击标题栏，会打开一个菜单，对工具界面进行更详情的控制，如切换全屏、切换浮动、打开单独的网页、生成共享链接等。`

section "参数栏"
spark `在参数栏中，会有输入框、选择框、按钮等输入控件。这些参数，会在刷新数据时直接传给后端，从而后端根据这些参数，返回不同的数据，然后刷新工作区。`

section "工具栏"
spark `工具栏与参数栏很相似，都有一样的输入控件，位置也相邻，都在工作区上面。但区别是，工具栏更偏向于前端交互，不一定会向后端发送请求。但参数栏的交互一般都会发送请求，然后刷新工作区。`

section "状态栏"
spark `状态栏，在工作区下方，由key 和 value 组成，一般都是一些状态信息、统计信息等。`

section "工作区"
spark `工作区，在正中间，占据最大的空间。默认的会以表格的形式展示数据，最后一列一般是当前行的操作按钮。点击某列的表头，会切换当前列的排序方式。`

chapter "操作表格"
section "切换视图"
spark `如果工具界面的输出是一个表格，当点击某个单元格时，如果此单元格的表头和参数栏的名称一样，则会将此单元格的内容作为参数，复制到输入控件上，并刷新数据。`

section "编辑字段"
spark `直接双击单元格，即可编辑数据，点击回车即可保存更改。`