学习自动构建

package.json

@@ -7,7 +7,9 @@
     "babel-plugin-antd": "0.4.x",
     "babel-plugin-transform-runtime": "^6.8.0",
     "babel-runtime": "^6.6.1",
+    "bce-sdk-js": "^0.1.8",
     "classnames": "^2.2.3",
+    "echarts-for-react": "^1.1.2",
     "es3ify-loader": "^0.2.0",
     "fetch-ie8": "^1.4.0",
     "history": "^2.0.1",

src/common/config.js

+/**
+ * [Config description]
+ * @type {Object}
+ *
+ * header 管理后台头部配置
+ *     title    String  标题
+ *     icon     String   标题图标
+ *     style    Object  自定义样式
+ *
+ * sider  管理后台侧栏配置
+ *     menu     Array   sider列表
+ *     openKeys Array   默认展开的sider区
+ *     selectedKey  String  默认打开的功能区
+ *     style    Object  自定义样式
+ *
+ * main  功能区域配置
+ *     components   Object  配置sider对应功能区域组件
+ *         Feature1     Object  对应sider menu 中的功能key对 应功能组件
+ *     style        Object  配置样式
+ */
+
+const Config = {
+    header: {
+        title: "测试配置管理后台",
+        icon: "appstore",
+        style: {
+            padding: "15px 15px 15px 25px",
+            borderBottom: "1px solid #E9E9E9",
+            backgroundColor: "#F5F5F5"
+        }
+    },
+
+    sider: {
+        menu: [
+            {
+                title: "数据展示项",
+                key: "dataShow",
+                icon: "bars",
+                items: [
+                    {title: "table数据展示项", key: "Feature1-1"},
+                    {title: "simple对象数据展示项", key: "Feature1-2"},
+                    {title: "数据可视化展示项", key: "Feature1-3"},
+                    {title: "综合数据展示", key: "Feature1-4"}
+                ]
+            },
+            {
+                title: "数据操作项目",
+                key: "dataOperate",
+                icon: "bars",
+                items: [
+                    {title: "table数据搜索操作", key: "Feature2-1"},
+                    {title: "table数据增删改操作", key: "Feature2-2"},
+                    {title: "simple对象数据修改操作", key: "Feature2-3"}
+                ]
+            },
+            {
+                title: "自定义操作项目",
+                key: "customOperate",
+                icon: "bars",
+                items: [
+                    {title: "富文本编辑功能", key: "Feature3-1"}
+                ]
+            },
+            {
+                title: "导航1",
+                key: "subTitle1",
+                icon: "setting",
+                items: [
+                    {title: "选项1", key: "Feature1"},
+                    {title: "选项2", key: "Feature2"},
+                    {title: "选项3", key: "Feature3"},
+                    {   
+                        title: "导航3",
+                        key: "subTitle3",
+                        icon: "",
+                        items: [
+                            {title: "选项6", key: "Feature6"},
+                            {title: "选项7", key: "Feature7"},
+                            {title: "选项8", key: "Feature8"}
+                        ]
+                    }
+                ]
+            },{
+                title: "导航2",
+                key: "subTitle2",
+                icon: "delete",
+                items: [
+                    {title: "选项4", key: "Feature4"}
+                ]
+            },{
+                title: "选项5",
+                key: "Feature5"
+            }
+        ],
+        openKeys:['dataShow','dataOperate'],
+        selectedKey: "Feature1",
+        style: {}
+    },
+
+    main: {
+        components: {
+            "Feature1-1": {
+                title: 'table 数据展示',
+                component: require('../feature/Feature1-1')
+            }, 
+            "Feature1-2": {
+                title: 'simple对象 数据展示',
+                component: require('../feature/Feature1-2')
+            }, 
+            "Feature1-3": {
+                title: '数据可视化 数据展示',
+                component: require('../feature/Feature1-3')
+            }, 
+            "Feature1-4": {
+                title: '综合数据展示',
+                component: require('../feature/Feature1-4')
+            },
+
+            "Feature2-1": {
+                title: 'table 数据搜索操作',
+                component: require('../feature/Feature2-1')
+            }, 
+            "Feature2-2": {
+                title: 'table 数据增删改操作',
+                component: require('../feature/Feature2-2')
+            }, 
+            "Feature2-3": {
+                title: 'simple对象数据修改操作',
+                component: require('../feature/Feature2-3')
+            }, 
+
+            "Feature3-1": {
+                title: '富文本编辑区域',
+                component: require('../feature/Feature3-1')
+            }, 
+
+            "Feature1": {
+                title: '这是功能区域标题1',
+                component: require('../feature/Feature1')
+            },   // 纯数据展示
+            "Feature2": {
+                title: '这是功能区域标题2',
+                component: require('../feature/Feature2')
+            },   // 添加操作
+            "Feature3": {
+                title: '这是功能区域标题3',
+                component: require('../feature/Feature3')
+            },
+            "Feature4": {
+                title: '这是功能区域标题4',
+                component: require('../feature/Feature4')
+            },
+            "Feature5": {
+                title: '这是功能区域标题5',
+                component: require('../feature/Feature5')
+            },
+            "Feature6": {
+                title: '这是功能区域标题6',
+                component: require('../feature/Feature6')
+            },
+            "Feature7": {
+                title: '这是功能区域标题7',
+                component: require('../feature/Feature7')
+            },
+            "Feature8": {
+                title: '这是功能区域标题8',
+                component: require('../feature/Feature2')
+            }
+        },
+        style: {} 
+    },
+
+    permission: BaiduInfo.permission,
+    loginUrl: BaiduInfo.loginUrl
+}
+
+export default Config;
\ No newline at end of file

src/common/util.js

+
+// 自定义的配置数据
+
+const DateFormat =  function(date, fmt) {
+    let o = {         
+        "M+" : date.getMonth()+1, //月份         
+        "d+" : date.getDate(), //日         
+        "h+" : date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小时         
+        "H+" : date.getHours(), //小时         
+        "m+" : date.getMinutes(), //分         
+        "s+" : date.getSeconds(), //秒         
+        "q+" : Math.floor((date.getMonth()+3)/3), //季度         
+        "S" : date.getMilliseconds() //毫秒         
+    };         
+    let week = {         
+        "0" : "/u65e5",         
+        "1" : "/u4e00",         
+        "2" : "/u4e8c",         
+        "3" : "/u4e09",         
+        "4" : "/u56db",         
+        "5" : "/u4e94",         
+        "6" : "/u516d"        
+    };         
+    if(/(y+)/.test(fmt)){         
+        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));         
+    }         
+    if(/(E+)/.test(fmt)){         
+        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[date.getDay()+""]);         
+    }         
+    for(let k in o){         
+        if(new RegExp("("+ k +")").test(fmt)){         
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         
+        }         
+    }         
+    return fmt; 
+}
+
+
+export default {
+    DateFormat : DateFormat
+};
\ No newline at end of file

src/components/BDUploader.jsx

+import React from 'react';
+import { Button, Icon, message } from 'antd';
+import baidubce from 'bce-sdk-js';
+
+let config = {
+    endpoint: 'http://bj.bcebos.com',         //传入Bucket所在区域域名
+    credentials: {
+        ak: 'e4a6dcc47a3b46f3a5ebf0f81d0e4928',          //您的AccessKey
+        sk: '8d26035b87e14989a4343f0e43c0ce71'           //您的SecretAccessKey
+    }
+};
+
+let client = new baidubce.BosClient(config);
+
+const createKey = function(ext){
+    let date = new Date();
+
+    let year = date.getFullYear();
+    let month = date.getMonth()+1;
+    month = (month < 10) ? '0' + month: month;
+
+    let day = date.getDate();
+    day = (day < 10) ? '0' + day: day;
+
+    return year + '/' + month + '/' + day + '/' + (+new Date())+ '.'+ext;
+}
+
+// 百度浏览器特定文件上传组件
+let BDUploader = React.createClass({
+    getInitialState: function() {
+        return {
+
+        };
+    },
+
+    render: function() {
+        return  <div>
+                    <Button type="ghost" onClick={this.openFileInput}>
+                        <Icon type="upload" /> 文件上传
+                    </Button>
+                    <input type="file" ref="fileInput" style={{display:"none"}} onChange={this.uploadImg} />
+                </div>;
+    },
+    
+    openFileInput: function(e){
+        this.refs.fileInput.click();
+    },
+    uploadImg: function(e){
+        let self = this;
+        
+        let file = e.target.files[0]; // 获取要上传的文件
+        let ext = file.name.split(/\./g).pop();
+
+        let key = createKey(ext); // 保存到bos时的key，您可更改，默认以文件名作为key
+        let mimeType = baidubce.MimeType.guess(ext);
+
+        client.putObjectFromBlob("mbrowser", key, file, {
+            'Content-Type': /^text\//.test(mimeType)? mimeType+'; charset=UTF-8': mimeType
+        }).then(function (res) {
+            // 上传完成，添加您的代码
+            let imgUrl = config.endpoint+'/v1/mbrowser/'+key;
+            console.log('上传成功', imgUrl);
+            self.props.success&&self.props.success(imgUrl);
+        }).catch(function (err) {
+            // 上传失败，添加您的代码
+            self.props.error&&self.props.error(error);
+        });
+    }
+});
+
+export default BDUploader;

src/components/CreateForm.jsx

+import React from 'react';
+import { Form, Modal, Button } from 'antd';
+
+import CFormItem from './CreateFormItem';
+
+let CForm = React.createClass({
+    getInitialState: function() {
+        return { visible: false };
+    },
+
+    render: function() {
+        const self = this;
+        const CType = this.props.CType;
+
+        const { getFieldProps } = this.props.form;
+        const formItemLayout = {
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 },
+        };
+
+        return  CType ?
+                <div className="f-create">
+                    <Button type="primary" icon="plus-circle-o" onClick={this.showModal}>添加</Button>
+                    <Modal title="添加新对象" visible={this.state.visible} onOk={this.handleCreate} onCancel={this.hideModal}>
+                        <Form horizontal form={this.props.form}>
+                            { 
+                                CType.map(function(item){
+                                    //return self.dealConfigCType(item);
+                                    return <CFormItem key={item.name} getFieldProps={getFieldProps} formItemLayout={formItemLayout} item={item}/>
+                                })
+                            }
+                        </Form>
+                    </Modal>
+                </div>:
+                <div></div>
+    },
+
+    handleCreate: function(){
+
+        console.log('收到表单值：', this.props.form.getFieldsValue());
+
+        this.props.form.validateFields((errors, values) => {
+            if (!!errors) {
+                console.log('Errors in form!!!');
+                return;
+            }else{
+                console.log('Submit!!!');
+                this.props.submit(values);
+                this.hideModal();
+            }
+        });
+        //this.props.submit(this.props.form.getFieldsValue());
+        
+    },
+
+    handleReset: function() {
+        this.props.form.resetFields();
+    },
+
+    showModal: function() {
+        this.setState({ visible: true });
+    },
+
+    hideModal: function() {
+        this.setState({ visible: false });
+        this.handleReset();
+    }
+});
+CForm = Form.create()(CForm);
+
+export default CForm;

src/components/CreateFormItem.jsx

+import React from 'react';
+import { Form, Select, Input, Button, Icon , DatePicker, TimePicker, Radio, Switch} from 'antd';
+import { Upload, Modal, message } from 'antd';
+
+import BDUploader from './BDUploader';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+
+let CFormItem = React.createClass({
+    getInitialState: function() {
+        return {
+            img_url:''
+        };
+    },
+
+    render: function() {
+        const getFieldProps = this.props.getFieldProps;
+        const formItemLayout = this.props.formItemLayout || {};
+        const item = this.props.item || {};
+        const defaultValue = item.defaultValue || '';
+        const defaultTimeValue = item.defaultValue || new Date();
+        const defaultImgValue = this.state.img_url || item.defaultValue || '';
+
+        switch (item.type){
+            case 'string':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <Input placeholder={item.placeholder||''}
+                            {...getFieldProps(item.name, {rules:item.rules, initialValue:defaultValue})} />    
+                        </FormItem>
+                break;
+
+            case 'date':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <DatePicker showTime format="yyyy-MM-dd HH:mm:ss" {...getFieldProps(item.name, { initialValue:defaultTimeValue})} />  
+                        </FormItem>
+                break;
+
+            case 'select':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <Select  {...getFieldProps(item.name, { initialValue: defaultValue })} >
+                                {
+                                    item.options.map(function(item){
+                                        return <Option key={item.value} value={item.value}>{item.text}</Option>
+                                    })
+                                }
+                            </Select>
+                        </FormItem>
+                break;
+
+            case 'radio':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <RadioGroup {...getFieldProps(item.name, { initialValue: defaultValue })}>
+                                {
+                                    item.options.map(function(item){
+                                        return <Radio key={item.value} value={item.value}>{item.text}</Radio>
+                                    })
+                                }
+                            </RadioGroup>
+                        </FormItem>
+                break;
+
+            case 'switch':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <Switch {...getFieldProps(item.name, { initialValue: defaultValue})} />
+                        </FormItem>
+                break;
+
+            case 'imageUpload':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}
+                            {...formItemLayout}>
+                            <Input
+                            {...getFieldProps(item.name, { initialValue:defaultImgValue})} /> 
+                            <img className="uploadImg" src={defaultImgValue} />
+                            <BDUploader success={this.uploadSuccess} />
+                        </FormItem>
+
+                break;
+
+            default:
+                return '';
+                break;
+        }
+    },
+    uploadSuccess: function(url){
+        console.log(url)
+        this.setState({
+            img_url: url
+        })
+    }
+});
+
+export default CFormItem;

src/components/RetrieveForm.jsx

+import React from 'react';
+import { Form, Select, Input, Button, Icon , DatePicker, TimePicker, Radio, Switch} from 'antd';
+import { Upload, Modal, message } from 'antd';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+
+let RForm = React.createClass({
+    render: function() {
+        const self = this;
+        const RType = this.props.RType;
+        return RType ?
+                (<div className="f-search">
+                    <Form inline>
+                        { 
+                            RType.map(function(item){
+                                return self.dealConfigRType(item);
+                            })
+                        }
+                        <FormItem key="search-btn">
+                            <Button type="primary" onClick={this.handleRetrieve}>查询</Button>
+                        </FormItem>
+                    </Form>
+                </div>):
+                <div></div>;
+    },
+
+    dealConfigRType: function(item){
+        const { getFieldProps } = this.props.form;
+
+        switch (item.type){
+            case 'string':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}>
+                            <Input placeholder={item.placeholder||''}
+                            {...getFieldProps(item.name)} />    
+                        </FormItem>
+                break;
+
+            case 'date':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}>
+                            <DatePicker showTime format="yyyy-MM-dd HH:mm:ss" {...getFieldProps(item.name)} />  
+                        </FormItem>
+                break;
+
+            case 'select':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}>
+                            <Select  {...getFieldProps(item.name, { initialValue: item.defaultValue||item.options[0].value })} >
+                                {
+                                    item.options.map(function(item){
+                                        return <Option key={item.value} value={item.value}>{item.text}</Option>
+                                    })
+                                }
+                            </Select>
+                        </FormItem>
+                break;
+
+            case 'radio':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}>
+                            <RadioGroup {...getFieldProps(item.name, { initialValue: item.defaultValue||item.options[0].value })}>
+                                {
+                                    item.options.map(function(item){
+                                        return <Radio key={item.value} value={item.value}>{item.text}</Radio>
+                                    })
+                                }
+                            </RadioGroup>
+                        </FormItem>
+                break;
+
+            case 'switch':
+                return <FormItem
+                            label={item.label}
+                            key={item.name}>
+                            <Switch {...getFieldProps(item.name, { initialValue: item.defaultValue|| false })} />
+                        </FormItem>
+                break;
+
+            default:
+                return '';
+                break;
+        }
+    },
+
+    handleRetrieve: function(){
+
+        console.log('收到表单值：', this.props.form.getFieldsValue());
+        this.props.submit(this.props.form.getFieldsValue());
+    }
+});
+RForm = Form.create()(RForm);
+
+export default RForm;

src/components/UpdateForm.jsx

+import React from 'react';
+import { Form, Modal, message } from 'antd';
+
+import CFormItem from './CreateFormItem';
+
+
+let UForm = React.createClass({
+    getInitialState: function() {
+        return {
+
+        };
+    },
+
+    render: function() {
+        const self = this;
+        const UType = this.props.UType;
+        const updateItem = this.props.updateItem;
+        
+        // 详情见antd form 文档
+        const { getFieldProps } = this.props.form;
+        const formItemLayout = {
+            labelCol: { span: 6 },
+            wrapperCol: { span: 18 },
+        };
+
+        return  UType ?
+                <div className="f-update">
+                    <Modal title="更新对象" visible={this.props.isShow} onOk={this.handleUpdate} onCancel={this.hideModal}>
+                        <Form horizontal form={this.props.form}>
+                            { 
+                                UType.map(function(item){
+                                    item.defaultValue = updateItem[item.name]||'';
+                                    //return self.dealConfigUType(item, defaultValue);
+                                    return <CFormItem key={item.name} getFieldProps={getFieldProps} formItemLayout={formItemLayout} item={item}/>
+                                })
+                            }
+                        </Form>
+                    </Modal>
+                </div>:
+                <div></div>
+    },
+
+    handleUpdate: function(){
+        this.props.submit(this.props.form.getFieldsValue());
+    },
+
+    handleReset: function() {
+        this.props.form.resetFields();
+    },
+
+    hideModal: function() {
+        this.props.hideForm();
+        this.handleReset();
+    }
+});
+UForm = Form.create()(UForm);
+
+export default UForm;

src/feature/Feature1-1.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+// 增加(Create)、重新取得数据(Retrieve)、更新(Update)和删除(Delete)
+const table_conf = {
+    
+    type: 'tableList', // tableList graphList simpleObject complexObject 
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+        // 接口调用数据形式
+        /*
+            let data = {
+                type: 'entry_list',
+                num: 20,
+                ua: 'bd_1_1_1_5-5-0-0_1',
+                cuid: '00000000000000000000000000000000%7C0000000000000000',
+                channel: 'AA_0',
+                dir: 'up'
+            }
+
+            Reqwest({
+                url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+                data: data,
+                type: 'jsonp',
+                jsonpCallback: 'fn',
+                success: function (data) {
+                    let lists = data.data.stream_data;
+                    
+                    // 必须要向数据中 添加唯一的 key
+                    lists.forEach(function(ele) {
+                        ele.key = ele.docid;
+                    });
+
+                    callback(lists);
+                }
+            });
+        */
+       
+       // 模拟数据
+       setTimeout(function(){
+            let list = testData.tableList;
+            list.forEach(function(ele) {
+                ele.key = ele.docid;
+            });
+            callback(list);
+       }, 1000)
+    },
+        
+    // table 列表展现配置
+    // {
+    //      title       table显示表题
+    //      dataIndex   显示数据中的key
+    //      type        展现形式 （string image link）
+    //      render      自定义展现形式 参数 （当前数据，当前对象数据）
+    //      sort        是否需要排序功能
+    //      width       自定义该列宽度 否则等分
+    // }
+    // 
+    // table 列表头标题
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link',
+            render: (text) => ( <span>
+                                    <a href={text}>链接</a>
+                                </span>),
+            width: 50
+        },{
+            title: '日期',
+            dataIndex: 'date',
+            type: 'string',
+            width: 150
+        },{
+            title: '图片',
+            dataIndex: 'img',
+            type: 'image'
+        }
+    ]
+
+};
+
+const Feature1 = FeatureSetConfig(table_conf);
+
+export default Feature1;

src/feature/Feature1-2.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+const simple_conf = {
+    
+    type: 'simpleObject',
+
+    initData: function(callback){
+       // 模拟数据
+       setTimeout(function(){
+            let object = testData.simpleObject;
+            object.key = object.docid;
+
+            callback(object);
+       }, 1000)
+    },
+
+    operate:[
+        {
+            text: '确认数据',
+            style: {
+                'marginRight': '30px'
+            },
+            callback: function(item){
+                console.log(item)
+            }
+        }, {
+            text: '展示数据',
+            callback: function(item){
+                console.log(item)
+            }
+        }
+    ],
+
+    UType:[
+        {
+            name: 'docid',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'title',
+            label: '标题',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'link',
+            label: '链接',
+            type: 'string'
+        },{
+            name: 'date',
+            label: '日期',
+            type: 'date'
+        },{
+            name: 'img',
+            label: '图片',
+            type: 'imageUpload'
+        }
+    ]
+}
+
+const Feature1 = FeatureSetConfig(simple_conf);
+
+export default Feature1;

src/feature/Feature1-3.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+const graph_conf = {
+    
+    type: 'graphList', // tableList graphList simpleObject complexObject 
+    EchartStyle: {
+        width: '100%',
+        height: '450px'
+    },
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+       
+       // 模拟数据
+       setTimeout(function(){
+            let series = testData.graphList;
+            series.forEach(function(item) {
+                item.type = 'line';
+                item.stack = '总量'
+            });
+
+            callback(series);
+       }, 1000)
+    },
+        
+    // 参考echarts 参数
+    option : {
+        title: {
+            text: '堆叠区域图'
+        },
+        tooltip : {
+            trigger: 'axis'
+        },
+        legend: {
+            data:['邮件营销','联盟广告','视频广告']
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis : [
+            {
+                type : 'category',
+                boundaryGap : false,
+                data : ['周一','周二','周三','周四','周五','周六','周日']
+            }
+        ],
+        yAxis : [
+            {
+                type : 'value'
+            }
+        ]
+    }
+
+};
+
+const graph_conf2 = {
+    
+    type: 'graphList', // tableList graphList simpleObject complexObject 
+    style: {
+        width: '100%',
+        height: '450px'
+    },
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+       
+        // 模拟数据
+        setTimeout(function(){
+            let series = [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius : '55%',
+                    center: ['50%', '60%'],
+                    data:[
+                        {value:335, name:'直接访问'},
+                        {value:310, name:'邮件营销'},
+                        {value:234, name:'联盟广告'},
+                        {value:135, name:'视频广告'},
+                        {value:1548, name:'搜索引擎'}
+                    ],
+                    itemStyle: {
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+
+            callback(series);
+       }, 1000)
+    },
+        
+    // 参考echarts 参数
+    option : {
+        title : {
+            text: '某站点用户访问来源',
+            subtext: '纯属虚构',
+            x:'center'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+        }
+    }
+
+};
+
+const Feature = FeatureSetConfig(graph_conf2);
+
+export default Feature;

src/feature/Feature1-4.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+const graph_conf = {
+    
+    type: 'graphList', // tableList graphList simpleObject complexObject 
+    EchartStyle: {
+        width: '100%',
+        height: '450px'
+    },
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+       
+       // 模拟数据
+       setTimeout(function(){
+            let series = testData.graphList;
+            series.forEach(function(item) {
+                item.type = 'line';
+                item.stack = '总量'
+            });
+
+            callback(series);
+       }, 1000)
+    },
+        
+    // 参考echarts 参数
+    option : {
+        title: {
+            text: '堆叠区域图'
+        },
+        tooltip : {
+            trigger: 'axis'
+        },
+        legend: {
+            data:['邮件营销','联盟广告','视频广告']
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis : [
+            {
+                type : 'category',
+                boundaryGap : false,
+                data : ['周一','周二','周三','周四','周五','周六','周日']
+            }
+        ],
+        yAxis : [
+            {
+                type : 'value'
+            }
+        ]
+    }
+
+};
+
+const graph_conf2 = {
+    
+    type: 'graphList', // tableList graphList simpleObject complexObject 
+    EchartStyle: {
+        width: '100%',
+        height: '450px'
+    },
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+       
+        // 模拟数据
+        setTimeout(function(){
+            let series = [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius : '55%',
+                    center: ['50%', '60%'],
+                    data:[
+                        {value:335, name:'直接访问'},
+                        {value:310, name:'邮件营销'},
+                        {value:234, name:'联盟广告'},
+                        {value:135, name:'视频广告'},
+                        {value:1548, name:'搜索引擎'}
+                    ],
+                    itemStyle: {
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+
+            callback(series);
+       }, 1000)
+    },
+        
+    // 参考echarts 参数
+    option : {
+        title : {
+            text: '某站点用户访问来源',
+            subtext: '纯属虚构',
+            x:'center'
+        },
+        tooltip : {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+        }
+    }
+
+};
+
+const table_conf = {
+    
+    type: 'tableList', // tableList graphList simpleObject complexObject 
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+       
+       // 模拟数据
+       setTimeout(function(){
+            let list = testData.tableList;
+            list.forEach(function(ele) {
+                ele.key = ele.docid;
+            });
+            callback(list);
+       }, 1000)
+    },
+        
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link',
+            render: (text) => ( <span>
+                                    <a href={text}>链接</a>
+                                </span>),
+            width: 50
+        },{
+            title: '日期',
+            dataIndex: 'date',
+            type: 'string',
+            width: 150
+        },{
+            title: '图片',
+            dataIndex: 'img',
+            type: 'image'
+        }
+    ]
+
+};
+
+const Feature1 = FeatureSetConfig(graph_conf2);
+const Feature2 = FeatureSetConfig(graph_conf);
+const Feature3 = FeatureSetConfig(table_conf);
+
+const Feature = React.createClass({
+
+        render: function() {
+            return  <div>
+                        <Feature1 />
+                        <Feature2 />
+                        <Feature3 />
+                    </div>
+        }
+    });
+
+export default Feature;

src/feature/Feature1.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+// 增加(Create)、重新取得数据(Retrieve)、更新(Update)和删除(Delete)
+const table_conf = {
+    
+    type: 'tableList', // tableList graphList simpleObject complexObject 
+
+    // 初始化展现的数据，使用callback 回传列表数据
+    // 需要手动添加唯一id key
+    // callback 组件数据的回调函数(接受列表数据参数)
+    initData: function(callback){
+        // 接口调用数据形式
+        /*
+            let data = {
+                type: 'entry_list',
+                num: 20,
+                ua: 'bd_1_1_1_5-5-0-0_1',
+                cuid: '00000000000000000000000000000000%7C0000000000000000',
+                channel: 'AA_0',
+                dir: 'up'
+            }
+
+            Reqwest({
+                url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+                data: data,
+                type: 'jsonp',
+                jsonpCallback: 'fn',
+                success: function (data) {
+                    let lists = data.data.stream_data;
+                    
+                    // 必须要向数据中 添加唯一的 key
+                    lists.forEach(function(ele) {
+                        ele.key = ele.docid;
+                    });
+
+                    callback(lists);
+                }
+            });
+        */
+       
+       // 模拟数据
+       setTimeout(function(){
+            let list = testData.tableList;
+            list.forEach(function(ele) {
+                ele.key = ele.docid;
+            });
+            callback(list);
+       }, 1000)
+    },
+        
+    // table 列表展现配置
+    // {
+    //      title       table显示表题
+    //      dataIndex   显示数据中的key
+    //      type        展现形式 （string image link）
+    //      render      自定义展现形式 参数 （当前数据，当前对象数据）
+    //      sort        是否需要排序功能
+    //      width       自定义该列宽度 否则等分
+    // }
+    // 
+    columns: [
+        {
+            title: 'DOCID',
+            dataIndex: 'docid',
+            type: 'string'
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link',
+            render: (text, item) => (<span><a href={text}>{item.title}</a></span>)   // 可自定义
+        }
+    ]
+
+};
+
+const simple_conf = {
+    
+    type: 'simpleObject',
+
+    initData: function(callback){
+       // 模拟数据
+       setTimeout(function(){
+            let object = testData.simpleObject;
+            object.key = object.docid;
+
+            callback(object);
+       }, 1000)
+    },
+
+    operate:[
+        {
+            text: '确认数据',
+            style: {
+                'marginRight': '30px',
+                'marginLeft': '80px'
+            },
+            callback: function(item){
+                console.log(item)
+            }
+        }, {
+            text: '展示数据',
+            callback: function(item){
+                console.log(item)
+            }
+        }
+    ],
+
+    UType:[
+        {
+            name: 'docid',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'title',
+            label: '标题',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'link',
+            label: '链接',
+            type: 'string'
+        },{
+            name: 'date',
+            label: '日期',
+            type: 'date'
+        },{
+            name: 'img',
+            label: '图片',
+            type: 'imageUpload'
+        }
+    ]
+}
+
+const Feature1 = FeatureSetConfig(simple_conf);
+
+export default Feature1;

src/feature/Feature2-1.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(){},
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+           
+    },
+    Update:function(){},
+
+    
+    Retrieve: function(data, callback){
+
+        console.log(data);
+        let dataI = Immutable.fromJS({
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }).merge(data);
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: dataI.toJS(),
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+    },
+
+    // 可设置的查询字段 
+    // RType 查询字段
+    // CType 创建字段
+    // UType 更新字段
+    RType:[
+        {
+            name: 'id',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'date',
+            label: '项目开始时间',
+            type: 'date'
+        },{
+            name: 'stype',
+            label: '项目类型Select',
+            type: 'select',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'rtype',
+            label: '项目类型Radio',
+            type: 'radio',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'ischange',
+            label: '是否过滤',
+            type: 'switch',
+            defaultValue: false
+        }
+
+    ],
+
+
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 80,
+            btns: [{
+                text: '删除',
+                type: 'delete'
+            }, {
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ],
+
+
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature2-2.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+let CUTpye = [
+    {
+        name: 'id',
+        label: '唯一标识',
+        type: 'string',
+        placeholder: '请输入标示名称',
+        rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
+    },{
+        name: 'id2',
+        label: '唯一标识',
+        type: 'string',
+        placeholder: '请输入标示名称',
+        rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
+    },{
+        name: 'date',
+        label: '项目开始时间',
+        type: 'date',
+    },{
+        name: 'stype',
+        label: '项目类型Select',
+        type: 'select',
+        defaultValue: 'one',
+        options:[{
+            text: '选项一',
+            value: 'one'
+        },{
+            text: '选项二',
+            value: 'two'
+        },{
+            text: '选项三',
+            value: 'three'
+        }]
+    },{
+        name: 'rtype',
+        label: '项目类型Radio',
+        type: 'radio',
+        defaultValue: 'one',
+        options:[{
+            text: '选项一',
+            value: 'one'
+        },{
+            text: '选项二',
+            value: 'two'
+        },{
+            text: '选项三',
+            value: 'three'
+        }]
+    },{
+        name: 'ischange',
+        label: '是否过滤',
+        type: 'switch'
+    },{
+        name: 'image',
+        label: '背景图片',
+        type: 'imageUpload'
+    }
+];
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作添加数据的请求
+        console.log(dataI.toJS());
+
+        let item = {
+            docid: (Math.random()*10000000000)|0,
+            title: '院依法对原省安监局局长陈炎生决定逮捕',
+            link: 'sdfghjcvbnmertfheiuwfhsdh'
+        }
+        
+        // 需要设置key
+        item.key = item.docid;
+
+        // 模拟请求创建成功的回调
+        setTimeout(function(){
+            callback(item);
+        }, 1000);
+    },
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+    },
+    Update:function(data, callback){
+        console.log(data);
+    },
+  
+
+    // 创建项目所需的字段 与 更新项目所需的字段
+    // rules 规范可见 https://github.com/yiminghe/async-validator
+    CType: Immutable.fromJS(CUTpye).toJS(),
+    UType: Immutable.fromJS(CUTpye).toJS(),
+    
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 120,
+            btns: [{
+                text: '更新',
+                type: 'update'
+            },{
+                text: '删除',
+                type: 'delete'
+            },{
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ],
+
+    uploadfile: function(data){
+        
+    }
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature2-3.jsx

+// 纯数据展现情况列表
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+import Reqwest from 'reqwest';
+
+import testData from '../common/test-data';
+
+const simple_conf = {
+    
+    type: 'simpleObject',
+
+    initData: function(callback){
+       // 模拟数据
+       setTimeout(function(){
+            let object = testData.simpleObject;
+            object.key = object.docid;
+
+            callback(object);
+       }, 1000)
+    },
+
+    Update:function(data, callback){
+        console.log(data);
+        callback(data);
+    },
+
+    operate:[
+        {
+            text: '确认修改',
+            type: 'update',
+            style: {
+                'marginRight': '30px',
+                'marginLight': '80px'
+            }
+        }, {
+            text: '展示数据',
+            callback: function(item){
+                console.log(item)
+            }
+        }
+    ],
+
+    UType:[
+        {
+            name: 'docid',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'title',
+            label: '标题',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'link',
+            label: '链接',
+            type: 'string'
+        },{
+            name: 'date',
+            label: '日期',
+            type: 'date'
+        },{
+            name: 'img',
+            label: '图片',
+            type: 'imageUpload'
+        }
+    ]
+}
+
+const Feature1 = FeatureSetConfig(simple_conf);
+
+export default Feature1;

src/feature/Feature2.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+           
+    },
+
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200           // 列宽 可选 不填为默认均分
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 80,
+            btns: [{
+                text: '删除',
+                type: 'delete'
+            }, {
+                text: '展示',
+                callback: function(item){
+                    alert(JSON.stringify(item));
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ]
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature3-1.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import Immutable from 'immutable';
+import TinyMCE from 'react-tinymce';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+const Feature = React.createClass({
+    getInitialState: function(){
+        return {
+            value: ''
+        }
+    },
+    render: function() {
+        let config = {
+            content: "<p>This is the initial content of the editor</p>",
+            config: {
+                height: '250',
+                plugins: [
+                    "advlist autolink lists charmap print preview hr anchor pagebreak spellchecker",
+                    "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime  nonbreaking",
+                    "save table contextmenu directionality emoticons paste textcolor"
+                ],
+                toolbar: "insertfile undo redo | styleselect fontselect fontsizeselect| bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      | print preview fullpage | forecolor backcolor", 
+            },
+            onChange: this.handleEditorChange
+        }
+        return  <div>
+            <p style={{margin:'10px'}}>html文本：{this.state.value}</p>
+            <TinyMCE className="editor" {...config} />
+        </div>
+    },
+
+    handleEditorChange(e) {
+        window.e = e;
+        this.setState({
+            value: e.target.getContent()
+        });
+    },
+});
+
+export default Feature;

src/feature/Feature3.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(){},
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+           
+    },
+    Update:function(){},
+
+    
+    Retrieve: function(data, callback){
+
+        console.log(data);
+        let dataI = Immutable.fromJS({
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }).merge(data);
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: dataI.toJS(),
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+    },
+
+    // 可设置的查询字段
+    RType:[
+        {
+            name: 'id',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'date',
+            label: '项目开始时间',
+            type: 'date'
+        },{
+            name: 'stype',
+            label: '项目类型Select',
+            type: 'select',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'rtype',
+            label: '项目类型Radio',
+            type: 'radio',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'ischange',
+            label: '是否过滤',
+            type: 'switch',
+            defaultValue: false
+        }
+
+    ],
+
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 80,
+            btns: [{
+                text: '删除',
+                type: 'delete'
+            }, {
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ],
+
+
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature4.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作添加数据的请求
+        console.log(dataI.toJS());
+
+        let item = {
+            docid: (Math.random()*10000000000)|0,
+            title: '院依法对原省安监局局长陈炎生决定逮捕',
+            link: 'sdfghjcvbnmertfheiuwfhsdh'
+        }
+        
+        // 需要设置key
+        item.key = item.docid;
+
+        // 模拟请求创建成功的回调
+        setTimeout(function(){
+            callback(item);
+        }, 1000);
+    },
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+           
+    },
+    Update:function(data, callback){
+        console.log(data);
+    },
+    Retrieve: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }).merge(data);
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: dataI.toJS(),
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+    },
+
+    // 创建项目所需的字段
+    // rules 规范可见 https://github.com/yiminghe/async-validator
+    CType:[
+        {
+            name: 'id',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称',
+            rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
+        },{
+            name: 'id2',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称',
+            rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
+        },{
+            name: 'date',
+            label: '项目开始时间',
+            type: 'date',
+        },{
+            name: 'stype',
+            label: '项目类型Select',
+            type: 'select',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'rtype',
+            label: '项目类型Radio',
+            type: 'radio',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'ischange',
+            label: '是否过滤',
+            type: 'switch'
+        },{
+            name: 'image',
+            label: '背景图片',
+            type: 'imageUpload'
+        }
+
+    ],
+
+
+
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 120,
+            btns: [{
+                text: '删除',
+                type: 'delete'
+            }, {
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ]
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature5.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+    },
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+           
+    },
+    Update:function(data, callback){
+        console.log(data);
+        data.key = data.docid;
+        callback(data);
+    },
+    Retrieve: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }).merge(data);
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: dataI.toJS(),
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+    },
+
+    // 更新项目所需的字段
+    UType:[
+        {
+            name: 'docid',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'title',
+            label: '标题',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'link',
+            label: '链接',
+            type: 'string'
+        },{
+            name: 'date',
+            label: '日期',
+            type: 'date'
+        },{
+            name: 'img',
+            label: '图片',
+            type: 'imageUpload'
+        }
+
+    ],
+
+
+    // table 列表头标题
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link',
+            render: (text) => ( <span>
+                                    <a href={text}>链接</a>
+                                </span>),
+            width: 50
+        },{
+            title: '日期',
+            dataIndex: 'date',
+            type: 'string',
+            width: 150
+        },{
+            title: '图片',
+            dataIndex: 'img',
+            type: 'image'
+        },{
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 120,
+            btns: [{
+                text: '更新',
+                type: 'update'
+            },{
+                text: '删除',
+                type: 'delete'
+            }, {
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }] // 可选
+        }
+    ],
+
+    uploadfile: '/umis/pushc/uploadfile'
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature6.jsx

+// 含有可操作 table 栏的数据展示
+import React from 'react';
+
+import FeatureSetConfig from '../component/FeatureSetConfig';
+
+import Immutable from 'immutable';
+//https://github.com/ded/reqwest
+import Reqwest from 'reqwest';
+
+
+const conf = {
+    
+    // 初始化页面的数据 回调函数传入 items 列表
+    initData: function(callback){
+
+        let data = {
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: data,
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+           
+    },
+    
+    // 功能模块需要时 添加 CRUD 4方法
+    Create: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作添加数据的请求
+        console.log(dataI.toJS());
+
+        let item = {
+            docid: (Math.random()*10000000000)|0,
+            title: '院依法对原省安监局局长陈炎生决定逮捕',
+            link: 'sdfghjcvbnmertfheiuwfhsdh'
+        }
+        
+        // 需要设置key
+        item.key = item.docid;
+
+        // 模拟请求创建成功的回调
+        setTimeout(function(){
+            callback(item);
+        }, 1000);
+    },
+    Delete: function(data, callback){
+    
+        let dataI = Immutable.fromJS({
+            type: 'entry_list'
+        }).merge({id: data.key});
+        
+        // ... 操作删除请求
+        console.log(dataI.toJS());
+        
+        // 模拟请求删除成功的回调
+        setTimeout(function(){
+            callback();
+        }, 1000)
+    },
+    Update:function(data, callback){
+        console.log(data);
+    },
+    Retrieve: function(data, callback){
+        let dataI = Immutable.fromJS({
+            type: 'entry_list',
+            num: 20,
+            ua: 'bd_1_1_1_5-5-0-0_1',
+            cuid: '00000000000000000000000000000000%7C0000000000000000',
+            channel: 'AA_0',
+            dir: 'up'
+        }).merge(data);
+
+        Reqwest({
+            url: 'http://uil.cbs.baidu.com/rssfeed/fetch?fn=?',
+            data: dataI.toJS(),
+            type: 'jsonp',
+            jsonpCallback: 'fn',
+            success: function (data) {
+                let lists = data.data.stream_data;
+                // 必须要向数据中 添加唯一的 key
+                lists.forEach(function(ele) {
+                    ele.key = ele.docid;
+                });
+
+                callback(lists);
+            }
+        });
+    },
+    
+    // 可设置的查询字段
+    RType:[
+        {
+            name: 'id',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'date',
+            label: '项目开始时间',
+            type: 'date'
+        },{
+            name: 'stype',
+            label: '项目类型Select',
+            type: 'select',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'rtype',
+            label: '项目类型Radio',
+            type: 'radio',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'ischange',
+            label: '是否过滤',
+            type: 'switch',
+            defaultValue: false
+        }
+
+    ],
+    // 创建项目所需的字段
+    // rules 规范可见 https://github.com/yiminghe/async-validator
+    CType:[
+        {
+            name: 'id',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称',
+            rules: [{ required: true, min: 5, message: '用户名至少为 5 个字符' }]
+        },{
+            name: 'id2',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称',
+            rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }]
+        },{
+            name: 'date',
+            label: '项目开始时间',
+            type: 'date',
+        },{
+            name: 'stype',
+            label: '项目类型Select',
+            type: 'select',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'rtype',
+            label: '项目类型Radio',
+            type: 'radio',
+            defaultValue: 'one',
+            options:[{
+                text: '选项一',
+                value: 'one'
+            },{
+                text: '选项二',
+                value: 'two'
+            },{
+                text: '选项三',
+                value: 'three'
+            }]
+        },{
+            name: 'ischange',
+            label: '是否过滤',
+            type: 'switch'
+        },{
+            name: 'image',
+            label: '背景图片',
+            type: 'imageUpload'
+        }
+
+    ],
+    // 更新项目所需的字段
+    UType:[
+        {
+            name: 'docid',
+            label: '唯一标识',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'title',
+            label: '标题',
+            type: 'string',
+            placeholder: '请输入标示名称'
+        },{
+            name: 'link',
+            label: '链接',
+            type: 'string'
+        },{
+            name: 'date',
+            label: '日期',
+            type: 'date'
+        },{
+            name: 'img',
+            label: '图片',
+            type: 'imageUpload'
+        }
+
+    ],
+    columns: [
+        {
+            title: 'DOCID',     // table header 文案
+            dataIndex: 'docid', // 数据对象内的属性，也做react vdom 的key
+            type: 'string',     // table 内显示的类型
+            sort: true,         // 是否需要排序
+            width:200
+        }, {
+            title: '标题',
+            dataIndex: 'title',
+            type: 'string'
+        }, {
+            title: '链接',
+            dataIndex: 'link',
+            type: 'link'
+        }, {
+            title: '操作',
+            type: 'operate',    // 操作的类型必须为 operate
+            width: 120,
+            btns: [{
+                text: '更新',
+                type: 'update'
+            },{
+                text: '删除',
+                type: 'delete'
+            },{
+                text: '展示',
+                callback: function(item){
+                    console.log(item)
+                }
+            }], // 可选
+            
+            // 对应btns 的回调函数 
+            // item为操作的单一数据对象  
+            // callback 为组件的回调函数，将处理之后的数据回传 删除则传undefined
+            // callbacks: [function(item, callback){
+            //     item.docid = 0;
+            //     callback(item, 'update');
+            // },function(item, callback){
+            //     callback(item, 'delete');
+            // }]
+        }
+    ],
+
+    uploadfile: function(data){
+        
+    }
+
+};
+
+const Feature2 = FeatureSetConfig(conf);
+
+export default Feature2;

src/feature/Feature7.jsx

+// 纯数据展现情况列表
+import React from 'react';
+import { Upload, Icon } from 'antd';
+import baidubce from 'bce-sdk-js';
+
+import BDUploader from '../component/BDUploader';
+
+const Feature7 = React.createClass({
+    getInitialState: function() {
+        return {
+            img_url:''
+        };
+    },
+
+    render: function() {
+        const self = this;
+        return  <div>
+                    <h3 className="f-title">{this.props.title}</h3>
+                    <input type="text" value={this.state.img_url} />
+                    <img src={this.state.img_url} />
+                    <BDUploader success={this.uploadSuccess} />
+                </div>;
+    },
+
+    uploadSuccess: function(url){
+        console.log(url)
+        this.setState({
+            img_url: url
+        })
+    }
+});
+
+export default Feature7;