AmazingDashboard - 可扩展的数据可视化平台

var Chart = Base.extend({
    constructor: function (layout) { },

    // 初始化：控件挂载到 DOM
    init: function (element) {
        // 创建图表实例
    },

    // 加载示例数据（设计器预览）
    example: function () {
        this.setData(this.getMockData());
    },

    // 设置图表数据
    setData: function (data) {
        // 处理并渲染数据
    },

    // 设置配置项
    setOption: function (option) {
        // 更新图表配置
    },

    // 获取当前配置
    getOption: function () {
        // 返回配置对象
    },

    // 设置主题
    setTheme: function (theme) {
        // 切换视觉主题
    },

    // 响应式调整
    resize: function () {
        // 窗口大小变化时重绘
    },

    // 显示/隐藏加载状态
    showLoading: function () { },
    hideLoading: function () { },

    // 清理资源
    dispose: function () {
        // 销毁图表实例
    },

    // 获取 DOM 元素和图表实例
    getElement: function () { },
    getChart: function () { }
});

// ebar.js - ECharts 柱状图控件
define(['app/core/base'], function (Base) {
    return Base.extend({
        init: function (element) {
            this.element = element;
            this.chart = echarts.init(element[0]);
        },

        setData: function (data) {
            var option = this.buildOption(data);
            this.chart.setOption(option);
        },

        setOption: function (option) {
            this.chart.setOption(option);
        },

        resize: function () {
            this.chart.resize();
        },

        dispose: function () {
            this.chart.dispose();
        }
    });
});

// echartsMeta.js - 属性定义
var property = {
    option: [
        {
            group: '标题',
            id: '34ed2334-8d25-4e24-bfc8-59a1ed4ee141',
            name: '主标题',
            type: 'text',
            value: '',
            default: '',
            link: 'title.text',  // 映射到 ECharts 配置路径
            tooltip: '主标题文本，支持使用 \\n 换行'
        },
        {
            group: '系列',
            id: 'series-type',
            name: '图表类型',
            type: 'select',
            value: 'bar',
            options: [
                { value: 'bar', label: '柱状图' },
                { value: 'line', label: '折线图' },
                { value: 'area', label: '面积图' }
            ],
            link: 'series[0].type'
        },
        {
            group: '生命周期',
            id: '___Control_Chart_Before_Init_Event',
            name: '初始化前执行脚本',
            type: 'script',  // 支持自定义 JavaScript!
            value: '',
            link: '__beforeInitScript'
        }
    ]
};

{
    group: '数据绑定',
    id: 'series-binding',
    name: '序列绑定',
    type: 'seriesBinding',
    dataset: '',      // 数据集编码
    dimension: '',    // 维度列（X 轴）
    measure: '',      // 度量列（Y 轴）
    tooltip: '配置与数据集的绑定关系'
}

// loader.js - 插件动态加载
function loadPluginModule(name) {
    // 从 LocalStorage 缓存读取清单
    var manifests = getCachedManifests();

    // 查找目标插件
    var module = _.find(manifests, function (manifest) {
        return manifest.uid === name;
    });

    // RequireJS 按需加载
    require([module.bootstrap], function (bootstrap) {
        // 返回控件类和配置
        deferred.resolve(bootstrap, module);
    });
}

require.config({
    baseUrl: '.',              // 基础路径
    urlArgs: 'v=' + version,   // 版本号防缓存

    // 第三方库路径映射
    paths: {
        // 核心库
        'jquery': 'libs/jquery/jquery-2.2.4.min',
        'bootstrap': 'libs/bootstrap/bootstrap-3.3.7.min',

        // AngularJS 系列
        'angular': 'libs/angular/angular-1.5.11.min',
        'angular-animate': 'libs/angular/angular-animate-1.5.11.min',
        'angular-ui-router': 'libs/angular/angular-ui-router-0.3.2.min',

        // ECharts 可视化
        'echarts': 'libs/echarts/echarts-3.4.0.min',
        'echarts-gl': 'libs/echarts/echarts-gl-1.0.0.min',

        // 工具库
        'underscore': 'libs/underscore/underscore-1.8.3.min',
        'moment': 'libs/moment/moment-2.18.1.min',

        // 其他组件
        'jquery-ui': 'libs/jqueryui/jquery-ui-1.12.1.min',
        'bxslider': 'libs/bxslider/jquery.bxslider.min'
    },

    // Shim 配置：非 AMD 模块适配
    shim: {
        'jquery': {
            exports: '$'
        },
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        },
        'angular': {
            exports: 'angular',
            deps: ['jquery']
        },
        'angular-animate': {
            deps: ['angular']
        },
        'angular-ui-router': {
            deps: ['angular']
        },
        'echarts': {
            exports: 'echarts'
        },
        'underscore': {
            exports: '_'
        },
        'jquery-ui': {
            deps: ['jquery']
        },
        'bxslider': {
            deps: ['jquery']
        }
    }
});

// 关键脚本必须按顺序加载
var scripts = [
    'app/core/assign.js',          // ES6 Object.assign polyfill
    'app/core/require.js',          // 自定义 Require 扩展
    'app/plugins/require.js'        // 插件配置加载
];

loadScriptsInOrder(scripts).then(function() {
    // 所有依赖加载完成后，启动 RequireJS
    loadJs({
        'src': 'libs/requirejs/require.js',
        'data-main': 'require.js'   // 入口配置文件
    });
});

// 方式一：简化 CommonJS 风格
define(['jquery', 'underscore', './utils'], function ($, _, utils) {
    // 模块代码
    return {
        init: function () { }
    };
});

// 方式二：依赖数组 + 工厂函数
define(['app/core/base'], function (Base) {
    return Base.extend({
        init: function (element) {
            // 控件初始化
        }
    });
});

// 方式三：命名模块（插件推荐）
define('controls/echarts/ebar', [
    'echarts',
    'app/core/base'
], function (echarts, Base) {
    // 控件实现
});

// router.js - 路由配置
app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('editor', {
            url: '/editor',
            lazyModule: 'ad.editor',           // 目标模块名
            lazyFiles: [                       // 需要加载的文件
                'app/modules/editor/define',
                'app/modules/editor/controllers/editor',
                'app/modules/editor/directives/sidebar',
                'app/modules/editor/services/pageService'
            ],
            lazyTemplateUrl: 'app/modules/editor/views/editor.tpl.html',
            resolve: {
                // 通过 ocLazyLoad 动态加载
                load: ['$ocLazyLoad', '$q', function ($ocLazyLoad, $q) {
                    var deferred = $q.defer();
                    require(this.lazyFiles, function () {
                        deferred.resolve();
                    });
                    return deferred.promise;
                }]
            }
        });
}]);

// 加载所有控件的 manifest.json
require(['plugins/config.json'], function (config) {
    config.controls.forEach(function (group) {
        group.controls.forEach(function (control) {
            // 动态构建插件路径
            var path = 'plugins/' + control.path + '/manifest.json';
            require([path], function (manifest) {
                // 缓存到 LocalStorage
                cacheManifest(manifest);
            });
        });
    });
});

// 避免 A 依赖 B，B 又依赖 A 的情况
define(['jquery', 'app/core/manager'], function ($, manager) {
    var instance;

    function getInstance() {
        if (!instance) {
            instance = {
                init: function () {
                    // 延迟获取依赖
                    var dep = manager.getDependency();
                }
            };
        }
        return instance;
    }

    return getInstance();
});

// 开发模式下禁用缓存
if (DEBUG_MODE) {
    require.config({
        urlArgs: 't=' + new Date().getTime()
    });

    // 清除指定模块缓存
    function invalidateModule(moduleId) {
        require.undef(moduleId);
    }
}