ub-ria-tool
用于联盟前端产品开发的工具库。
安装:
- 安装NodeJS
npm install -g ub-ria-tool
Tools to help develop ub-ria projects
License: GNU General Public License v2.0
1,src\error\Action.js 第11行引用BaseAction路径错误
2,src\ui下的validate相关文件没有生成
3,src\common\tpl相关的文件没有生成
4,src\common\main.js中15行require单词写成requrie
5,src\common\extension\ui.js中引用的Upload在ub-ria中没有生成
6,src\common\BaseData没有生成
再发一个简单版的,从实体定义出发的配置模板,请轻拍
{
/*
* 列表
*/
list: [
// {key}: ['{Type}', '{表头描述}', 'TypeOption']
id: ['number','ID字段', ''],
name: ['string', '广告位名称'], // 当Type为string时,没有TypeOption
status: ['enum', '状态', 'Status'], // 当Type为enum时,TypeOption为对应的enum变量
height: ['number', '高度', 'PX'], // 当Type为number时,TypeOption为单位
...
],
/*
* 表单
*/
form: [
// 一个数组为一个section
{
// {key}: [{Type}<string>, {字段描述}<string>, {TypeOption}<object|string>]
// 当Type为string时,输出Text,TypeOption属性有:
// 字 段 required | maxLength | wordCount
// 默认值 true | @rule.maxLength | flase
name: ['string', '广告位名称', { maxLength: 150 }],
// 当Type为enum时,变量数<=3个用Radio,否则用Selector
// TypeOption为对应的enum变量
status: ['enum', '状态', 'Status'],
// 当Type为number时,输出Text, TypeOption属性有:
// 字 段 required | unit | maxLength | max | min | pattern
// 默认值 true | - | @rule.maxLength | - | - | @rule.positiveInteger.pattern
// 有unit字段时,会输出hint
height: ['number', '高度', { unit: 'PX', max: 10000, min: 0 }],
// 当Type为bool时,输出Checkbox,没有TypeOption
allowRest: ['bool', '空闲时补余'],
// 当Type为FK时,输出ToggleSelector, TypeOption属性有:
// 字 段 required | datasource
// 默认值 true | 同字段名
channelId: ['FK', '所属频道', { datasource: 'channels' }]
},
{ ... },
...
]
}
RT
需要的文件如下:
/src
/common
/css
extern.less
layout.less
common.less
reset.less
navigator.less
main.less
/egg
/extension
underscore.js
ui.js
mvc.js
ajax.js
/global
user.js
system.js
/img
/tpl
navigator.tpl.html
config.js
enum.js
extension.js
gray.js
main.js
/startup
/ui
/css
/img
基本先从AMD拿过来改造就好,后续考虑复用
脚手架工具通过读取实体定义entitydef.js
和对应的模块描述如formdef.js
来生成比较完整的模块信息;
为了保证这些定义文件在生产环境中可以直接引用,因此也采用AMD规范来描述这些文件;
在脚手架工具中,则通过重写define
和require
两个函数,来保证脚手架运行时,相关代码执行正确;
entitydef.js
/**
* <%-: project.alias %>
* Copyright 2014 Baidu Inc. All rights reserved.
*
* @ignore
* @file <%-: description %>实体定义模块
* @author {<%-: developer.name %>(<%- developer.email %>)}
*/
define(
function (require) {
/*
* Entity对象用于描述这个模块的实体,主要包括:
* 字段:{key}、字段类型:{type}、字段描述:{字段描述} 和 字段配置:{TypeOption}
*
* 一个典型的实体字段定义描述如下:
* {key}: [{Type}<string>, {字段描述}<string>, {TypeOption}<object|string>]
*
* Type: 'string' | 'enum' | 'number' | 'bool' | 'reference' | 'reference-set'
*
* 当Type为'string'时,输出Text控件,TypeOption属性有:
* 字 段 required | maxLength | wordCount | rule
* 默认值 true | @rule.maxLength | flase | -
*
* 当Type为'enum'时,enum数<=3个用RadioButton控件,否则用Selector控件
* TypeOption为对应的enum变量的名称
*
* 当Type为'number'时,输出Text控件, 当TypeOption有unit字段时,带有hint插件,TypeOption属性有:
* 字 段 required | unit | maxLength | max | min | pattern
* 默认值 true | - | @rule.maxLength | - | - | @rule.positiveInteger.pattern
*
* 当Type为'bool'时,输出Checkbox,没有TypeOption
*
* 当Type为'reference'时,输出ToggleSelector, TypeOption属性有:
* 字 段 required | datasource
* 默认值 true | 同字段名
*
* 当Type为'reference-set'时,输出CascadingSelector, TypeOption属性有:
* 字 段 required | datasource
* 默认值 true | 同字段名
*/
var entity = {
id: ['number', 'ID'],
name: ['string', '广告位名称', { wordCount: true }],
status: ['enum', '状态', 'Status'],
displayOrder: ['number', '显示顺序', { min: 1, max: 10000}]
// TODO: 添加或修改实体定义,完成后请删除该注释内容
};
return entity;
}
);
listdef.js
/**
* <%-: project.alias %>
* Copyright 2014 Baidu Inc. All rights reserved.
*
* @ignore
* @file <%-: description %>列表模块定义
* @author {<%-: developer.name %>(<%- developer.email %>)}
*/
define(
function (require) {
/*
* list对象用于描述这个模块列表的视图构成,主要包括:
* 筛选:filter、批量操作:batch 和 表格字段:table
*
*/
var list = {
/*
* filter<Array.String>用于描述列表的筛选所使用的字段
* 每个元素为在`entitydef.js`中定义的字段名
*
* 注意:脚手架会为每个filter添加`全部`这个额外的选项字段
*/
filter: [
'status'
// TODO: 添加或修改filter的内容,完成后请删除该注释
],
/*
* batch<Array.Object>用于描述列表的批量操作
*
* 每个批量操作的定义由四个字段组成:
* statusName:批量操作的目标状态名
* command:指令的中文名称
* status:目标状态的值
* accept:该操作所接受的当前状态值
*/
batch: [
{
statusName: "restore",
command = "启用",
status = 1,
accept: [0]
}
{
statusName: "remove",
command = "删除",
status = 0,
accept: [1]
}
// TODO: 添加或修改batch的内容,完成后请删除该注释
],
/*
* table<Object>用于描述列表的属性和其字段属性
*
* withCommand<Bool>:为true时,表示该表格支持Command扩展,可按需使用
* fields<Array.Array>:列表的字段描述,一个典型的字段描述如下:
* ['{fieldType}', '{fieldName}', '{表头文字}']
*
* `fieldType`为字段类型:
* 当`fieldType`为`field`时,该字段为一个普通字段,会直接填充`entitydef.js`中定义的实体字段内容
* 当`fieldType`为`enum`时,该字段为一个枚举量字段,将根据`enum.js`中定义的规则显示text的内容
* `fieldName`对应`entitydef.js`中定义的实体字段
*/
table: {
withCommand: false,
fields: [
['field', 'name', '名称'],
['enum', 'status', '状态']
// TODO: 添加或修改table的内容,完成后请删除该注释
]
}
};
return list;
}
);
formdef.js
/**
* <%-: project.alias %>
* Copyright 2014 Baidu Inc. All rights reserved.
*
* @ignore
* @file <%-: description %>表单模块定义
* @author {<%-: developer.name %>(<%- developer.email %>)}
*/
define(
function (require) {
/*
* form对象用于描述这个模块表单的视图构成
* @type <Array.Section.Field>
*
*/
var form = [
/*
* form数组的每个元素对应一个`section`的DOM元素,用一个对象表示
*
* name:这个section的名称,用于class和toggleable为true时的控件id
* title:这个section的Title,没有该字段或该字段为空,则不显示Title
* toggleable:是否允许section折叠,true时,输出TogglePanel控件替代section
* fields:这个section中的字段
*/
{
name: 'basicInfo',
title: '基本信息',
toggleable: true,
fields: [
/*
* `entitydef.js`中定义过的字段将直接使用其定义输出模板
*/
'name',
'displayOrder',
/*
* `entitydef.js`中未定义过的字段,可以用如下格式定义:
* `[{fieldName}<String>, {字段名}<String>]`
* 一个典型样例如下:
* `['otherField', '字段名称']`
*/
['otherField', '字段名称']
// TODO: 添加或修改fields的内容,完成后请删除该注释
]
}
// TODO: 添加或修改form的内容,完成后请删除该注释
];
return list;
}
);
未来,还会针对Read、Detail等类型模块,提供相应的模块定义
目前设计了列表页和表单页的定义语言;
初步设想的使用场景是:
enum.js
中写好,还是也通过脚手架来定义和生成?)module.conf
文件的框架;module.conf
文件的编辑;目前仅考虑了Form和List,同时Read可以根据Form内容来生成;
---<if:xxx>---
... // 此处的内容只有在符合if条件的情况下才有效
---</if>---
abc:xxx
---<ChoseOne>--- // 表示这个字段目前有两种表示的方法,但是未来要在两个里面选一种
abc:yyy
abc:xxx
---<or>--- // 表示这个字段有两种或根多种表示方法,未来可以选择一种,或者都用
abc:yyy
======<default>====== // 此标记以下的内容为不填时所代表的默认值
======<optional>======
name: 'basicInfo' // 选填字段,可以不填
======</optional>======
以上这些标记只是供讨论时候用的注释标记。
{
/*
* 列表
*/
list: {
cssType: 'sidebar', // 框架类型,fullsize|sidebar
---<if:cssType === 'sidebar'>---
sidebar: 'sidebarTpl', // sidebarTPL的target
---</if>---
/*
* 筛选
*/
filters: [
status: [
{ alias: 'ALL', text: '全部', value: 'all' },
{ alias: 'NOT_REMOVED', text: '未删除', value: '0,1,2,3,4' }
],
......
---<ChoseOne>---
status: {
addition: [
{ alias: 'ALL', text: '全部', value: 'all' },
{ alias: 'NOT_REMOVED', text: '未删除', value: '0,1,2,3,4' }
],
enum: 'Status'
---<or>---
enum: [
{ alias: 'REGISTERED', text: '当前用户已注册联盟账号' },
{ alias: 'UNREGISTEED', text: '没有注册' }
]
},
......
],
/*
* 批量操作
*/
batchModify: [
{
statusName: "stop",
command = "停用",
status = 2,
accept: [0, 1, 2, 3, 4]
},
......
],
/*
* 表格字段定义
*/
table: [
withCommand: true,
fields: [
{
contentType: 'field',
title: '姓名',
field: 'name'
======<default>======
sortable: true,
resizable: false,
width: 120,
stable: false,
content: 'name'
},
{
contentType: 'enum',
title: '状态',
field: 'status',
enum: 'status'
======<default>======
sortable: false,
resizable: false,
width: 120,
stable: true
},
{
contentType: 'operation',
operations: ['modify', 'read', 'link']
======<default>======
title: '操作',
field: 'operation',
sortable: false,
resizable: false,
width: 80,
stable: true
}
]
]
},
/*
* 表单和只读
*/
form: {
cssType: 'sidebar', // 框架类型,fullsize|sidebar
---<if:cssType === 'sidebar'>---
sidebar: 'sidebarTpl', // sidebarTPL的target
---</if>---
sections: [
{
======<optional>======
name: 'basicInfo',
title: '基本信息',
toggleable: true
======</optional>======
fields:{
name: 'name', // 用于字段的name和id中,id为dashlize化的形式
title: '姓名',
type: 'TextBox', // 控件的Type
value: '@name', // 对应的Model,不填默认就是name
properties: {
{key}: {value}, // 这里的内容,会以data-ui-{key}="{value}"的形式输出到模板中,{key}会dashlize化
......
},
events: {
{evnet}: {func},// {event}事件类型,{func}事件处理函数名
......
},
condition: [ // 这块怎么搞?Toggle类的操作是否要基类直接支持?
'{name1} === {value1} && {name2} >= {value2}',
... // 语句之间是或关系,语句解析只支持===, >=, <=和&&
]
======<default>======
inPanel: false // 如果inPanel为true,则会在控件外层加一个id为{id}-wrapper的panel
---<or>---
inPanel: 'groupName'// 如果inPanel值为字符串,则控件会被加入到这个为id(dashlize化)的panel中,并加上group
},
......
},
......
]
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.