简介

evening是一款高效的网页原型开发工具，帮你用可视化配置的方式生成网页，适合数据管理型网页的设计和开发。

• 精致的设计模型
• 快速设计与开发
• 简洁的图形化界面
• 自定义导出模板
• 支持常用图表
• 多语言支持

快速上手

• 在线使用 用浏览器打开 https://www.evening.cool 注册用户名（不需要手机、邮箱验证）后即可访问。
• 本地部署 下载evening的可执行程序，运行后访问http://localhost:8000 即可。 修改配置文件 /conf/defaults.ini，可配置端口、数据库连接等参数。

文档

导航栏

• 支持两层导航栏
• 通过导航栏区域的右键菜单进行配置
• 拖动方式调整导航栏顺序

窗体框

窗体框（Form Box）是页面布局的基本元素，也是网页模型的基本单元。所有的数据模型、前后端交互、mock data、图表风格等都关联到窗体框。

• 添加窗体框 右键点击空白区域，通过弹出的右键菜单添加窗体框。

• 设置窗体框属性 点击窗体右上角的齿轮符号，打开右侧的抽屉式“配置弹窗”。设计人员可以在“配置弹窗”中修改窗体框属性。其中Name属性必须为英文且无特殊符号。

• 调整窗体框顺序 在右侧打开的“配置弹窗”中选择“窗体顺序”选项卡，上下拖动代表各窗体框的标签，即可调整窗体框的顺序。

• 删除窗体框 右键点击要删除的窗体框，通过弹出的右键菜单删除窗体。

数据模型

每个窗体框对应一个单层的自定义数据模型，级联的数据关联需在后端完成。数据模型在“配置弹窗”的“字段”选项卡中配置，支持新增、修改、拖动排序、删除操作。

筛选器

实际使用时，网页最终用户通过 查询 按钮修改筛选器的值，点击确定之后网页会向后端触发数据请求。每个窗体支持一个数据筛选器。网页设计时通过 配置弹窗 =》字段 =》修改 =》筛选 进行配置，可选类型包括全选、准确值、输入范围、输入上限、输入下限。网页会使用该窗体框所有的筛选属性不为全选的字段向后端触发数据请求。

操作按钮

每个窗体在新建时默认包含了添加、修改、删除操作按钮。设计人员可以在“配置弹窗”的“操作”选项卡中增加新的操作按钮，或者对已有操作按钮进行调整和删除。

在最终用户使用时，部分字段应当是不允许修改的，还有部分字段应当是不可见的。网页设计人员可通过配置弹窗 =》操作 =》参数进行指定。

图表

evening目前支持表格、折线图、柱状图、散点图、统计数字标签等窗体框展示类型。通过配置弹窗 =》属性 =》图表字段来指定各窗体框的展示类型。点击确定后再在“配置弹窗”的“样式”选项卡中指定图表的横坐标、纵坐标、颜色等特征。

多语言

点击右上角的用户名，在下拉按钮中选择需要的语言。网页设计时的所有文本(Text)、标题(Title)字段的值都是绑定到当前的语言中的。例如示例中的"用户"窗体框，在中文环境中设置窗体框属性的标题字段为"用户"，再在英文环境中设置property的title字段为"user"。那么窗体框的标题在中文环境下就是"用户"，在英文环境下就是"user"。

导出

点击右上角的用户名，再点击“导出”下拉按钮，就能将之前配置好的网页代码下载到本地。默认下载的网页代码是基于umi框架的，关于umi的使用方法请 查看。在下载的压缩包中包含有source文件夹，里面是json格式的网页的所有配置数据。用户可以基于这些配置数据写模板，生成所需框架和风格对应的代码。