我们从PC时代，走到了Web时代，跑到了移动互联网时代，飞到了人工智能时代。
——本文作者 语
移动先行
在上一个时代，即移动互联网时代，对界面交互的设计遵循着移动先行的原则。
什么是移动先行 ?
我们以移动端产品设计为起点，抓住产品的重点，以内容为核心，做出一个精简的，主次分明的产品。
当平台扩大至桌面或其他相对高级的终端时，设计者可以借助这些增强的优势，一步步有节奏地进行扩展和填充，得出一个能给人们带来更好的用户体验的高级版本。
移动先行
从而推动了响应式界面设计。
响应式设计
此时界面设计仍然以视觉交互为主。
界面引导用户的视觉焦点进行增删查改操作。
用户是被动的。
招聘查询
报表
对话先行
得益于自然语言理解技术进步，系统能通过对话来获取用户的意图。
它能将一句话或多轮对话，转化成一个带参数的函数调用。
而对话，是一种很自然的交互方式。
旧时代，我们第一步是找功能导航和分类，进入对应系统。
新时代，我们第一步是主动说出自己的意图。
第二步，系统自解释
欢迎来到
员工薪酬档案查询页面。在该页面，你可以查询员工的薪酬档案信息。
你可以通过表单输入查询，或者通过对话输入。
对话格式参考如下：
查询信息平台事业部的员工
查询信息平台事业部且在职的员工
第三步，进行具体的业务操作
这里的表单和表格，是我们常见的组件。
我们无需硬编码，可以通过约定的schema配置生成。
参考schema如下：
{
"table": {
name: "table", // 表格名称
jsxcolumns: [ // 列的名称
{
dataKey: "workNo", // 必填；列的标识，对应表格数据的key
title: "工号", // 必填；列标题；
type: "string", // 非必填；默认为"string",包含 'money', 'card', 'cnmobile', 'checkboxSelector', 'action', 'radio', 'text', 'select' 和 'custom' ; 渲染的类型
width: 100, // 非必填；默认为100px；
},
{
dataKey: "name",
title: "姓名",
width: 140,
},
{
dataKey: "orderNum",
title: "任职序号",
type: "string",
},
{
dataKey: "type",
title: "员工类型",
},
{
dataKey: "type",
title: "员工类型",
},
{
dataKey: "dept",
title: "BU/部门",
},
{
dataKey: "location",
title: "工作地点",
},
{
dataKey: "在职状态",
title: "status",
},
{
dataKey: "level",
title: "层级",
},
],
beforeFetch: function (data, from, Formatter) {
data.listCond = JSON.stringify({ workNo: data.workNo });
return data;
}
},
filter: [
{
id: "workNo", // 必填; 唯一标识
component: "InputFormField", // 必填; 组件类型
props: {
jsxname: "workNo",
jsxlabel: "工号",
}
},
{
id: "date",
component: "DateFormField",
props: {
jsxname: "date",
jsxlabel: "时间",
},
formatter: function (value, Formatter) {
return Formatter.date(value, 'YYYY-MM-DD');
}
},
...
{
id: "search",
component: "Button",
props: {
text: '搜索',
},
event: {
type: 'onClick',
function: 'search',
url: "//xxx.com/queryEmpData.json",
}
},
{
id: "ButtonGroupFormField1",
component: "ButtonGroupFormField",
},
],
}
文中提及的库请回答1988的可行性demo地址：https://github.com/wushanchao/pleaseAnswer
组件schema配置器业内已有非常成熟的应用，就不放出地址。
