ecomfe / ub-ria-tool

Tools to help develop ub-ria projects

ub-ria-tool

用于联盟前端产品开发的工具库。

安装：

1. 安装NodeJS
2. npm install -g ub-ria-tool

使用：

参考ub-ria的文档

ub-ria-tool's Issues

之前运行ria init生成的文件发现的一些错误，不知道有没有改过来~

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没有生成

【加强版设计1】简单的实体定义

再发一个简单版的，从实体定义出发的配置模板，请轻拍

{
    /*
     * 列表
     */
    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' }]
        },
        { ... },
        ...
    ]
}

项目模板加上BaseData

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拿过来改造就好，后续考虑复用

【加强版设计2】实体定义+模块定义的模型

脚手架工具通过读取实体定义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等类型模块，提供相应的模块定义

【加强版设计0】实体定义

目前设计了列表页和表单页的定义语言；
初步设想的使用场景是：

1. 模块建完，并填写完必要的Enum后；（这里引出一个问题，Enum变量是让用户直接在enum.js中写好，还是也通过脚手架来定义和生成？）
2. 模块建立时生成module.conf文件的框架；
3. 用户按照如下方法完成对module.conf文件的编辑；
4. 按照脚手架使用方法生成List和Form相关JS和TPL文件；

目前仅考虑了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
                },
                ......
            },
            ......
        ]
    }
}