顶部栏中有设置、更新、服务器、工具、退出、新建等。

1.1 设置

WIDE设置界面能够对wide基本内容进行设置，如下图。

l  代码根目录：项目文件保存位置。使用者可自主选择代码保存位置，点击代码根目录，新建或者选择保存位置即可。

l  证书文件：服务器证书文件存放位置。注意：证书名称必须是IP或域名.id_rsa格式，切换证书时开发服务器地址才会自动切换。

l  开发服务器：发布项目所需要的后台服务器。输入栏内可填写域名和IP地址，填写后顶部栏右侧有显示，注意：填写后勿忘配置host文件（详情请点配置host文件）。

l  开发服务器端口：服务器和浏览器通信的端口。注意：请尽量使用默认数值。

l  app构建服务器：构建app时所用的服务器地址。

l  外部编辑器：可以使用其它编辑器打开项目文件进行编辑。例如：windows 系统下如果安装成功 sublime 编辑器, 该处填入"D:\Program Files (x86)\Sublime Text 2\sublime_text.exe" %path%，linux 系统下如果安装成功 sublime 编辑器, 该处填入subl %path%或subl -n %path%(后者使文件在编辑器新窗口打开)。

l  文本编辑器风格：使用默认风格时wide会以不同颜色区分编辑器中的源码；选择其它风格，可能没有变化。

l  自动保存时间：支持自动保存，默认10分钟自动保存，设置为0或负值表示关闭自动保存。

l  布局编辑器中加载外部CSS：在页面编辑界面会根据外部CSS显示相应主题。

l  合并列中的全部元素：将页面编辑界面同一个黄色编辑栏下列中包含的多个元素，合并为一个元素。详情请点击合并列中元素。

l  图片路径中添加额外原始域名目录：当选中此项时，拖拽图片到文档流编辑页面（注意是拖拽，不是添加）无论图片从哪个位置获取过来，都会自动在对应的img项目里保存下来，自动创建一和站点名相同的文件夹，防止图片重名而覆盖。注意：开发同一项目的所有成员，该选项设置需保持一致。

l  每次保存页面时，都检查图片资源是否更新：每次保存页面时，都检查图片资源是否更新。项目中使用网络上的图片，保存页面时会检查图片是否更新，若更新wide会重新下载并展示，否则不下载。

l  禁用图片自动压缩：选择此项，wide不会根据屏幕大小调整图片大小。

l  启用图片未压缩报警：选择此项还需要勾选“禁用图片自动压缩”，保存页面时，wide会给出黄色的未设置压缩的警告。注意：如果具体设置了图片width/height值（用百分比设置的不是具体的），也不会出现警告。

l  开发者模式--不缓冲代码生成器组件：后端开发人员使用，用以控制代码生成器组件是否缓冲。

1.2 更新

wide在不断地添加新功能，处理bug；通过更新可以解决操作中的一些问题，同时也会优化用户操作体验。更新有五个部分，依次点击即可更新，也可点击“全部”进行全部更新。注意：更新时Node必须更新，以解决部分更新时，依赖包冲突的问题。

| 强制更新Node：如果发布时报错无法加载模块，使用强制更新Node。

1.3 服务器

服务器提供与wide开发服务器相关的管理工具，如下图。

l  WWARE配置：配置服务器的WWARE运行环境。

l  postgres数据库：构建到当前开发服务器的对应隧道，并访问phppgmanager服务。

l  Elastic数据库：构建到当前开发服务器的对应隧道，并访问Elastic Search服务。

| Rabbitmq管理：构建到当前开发服务器的对应隧道，并访问rabbitmq管理服务。

l  打开终端：打开当前开发服务器的终端。

l  查看日志：查看当前服务器的访问日志。

1.4 工具

目前可使用的工具有科学计算器、安装单服务器以及安装打包服务器。有关计算器的介绍请点科学计算器。安装单服务器、安装打包服务器以及安装JenkinsCI的介绍请点击服务器安装。

1.5 退出

退出wide系统：选择此项会关闭使用者打开的所有wide窗口。注意：使用者勿忘保存（快捷键Ctrl+S）避免造成数据丢失。

1.6 新建

新建一个新的域名。新建完成需要配置host表，同时刷新页面会找到新建的域名。注意：域名中不允许使用中文、空格以及特殊符号。

1.7 刷新

顶部栏右侧的刷新同时具有刷新和清除缓存的功能。

1.8 开发者工具

wide开发者工具主要帮助开发者快速、精确的定位开发者想要查找的元素；同时开发者能够对元素的样式进行修改。

开发者工具常被开发者在页面编辑时使用，因此下面将以页面编辑时使用为例进行介绍。

（1）进入开发者工具编辑页

（2）查找元素

点击 ，然后把鼠标放到要查找的元素上点击选中。

（3）元素样式的增删改

开发者查找到所需元素后能够对其样式、属性进行增加、删除和修改。

开发者可以在上图红色框内双击需要修改的，就可进行编辑。注意：编辑完后勿忘保存（快捷键Ctrl+S）。

2.1 在主界面主体左侧蓝色部分都是站点名称，点击一个进入的就是站点编辑界面，如下图。

站点编辑界面中有发布、编辑、应用、运维、加入/删除模块、搜索功能，如下图。了解更多请点站点编辑页面。

2.2 在主界面主体右侧上部有搜索功能，项目文件较多时，输入关键字能够快速找到自己想要的文件，如下图。

2.3 在主界面主体右侧蓝色部分有删除、外部打开和浏览器打开。

l  外部打开：跳转至项目文件在电脑中的位置。

l  浏览器打开：打开项目首页，如果项目没有index.html，则无法打开网页。

l  代码统计：统计项目的代码。注意：在点击统计前，请确保代码目录所有文件已经在svn管理之下，并且没有未提交的代码，否则会报错。