@lixianwei/elpis 1.0.0

package/app/public/static/normalize.css

@@ -0,0 +1,239 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html,body,span,div,p,a,table,tbody,td,h1,h2,h3,img,form,font,strong,b,i,dl,dt,dd,ol,ul,li,dl,dd,dt,iframe,label,blockquote,input,button
+{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+html {
+    font-family: "Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif;/* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+    border: 0;
+}
+
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+    overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}

package/app/router/project.js

@@ -0,0 +1,9 @@
+module.exports = (app,router)=> {
+    const {project:ProjectController} = app.controller
+    router.get('/api/project',ProjectController.get.bind(ProjectController));
+
+    router.get('/api/project/list',ProjectController.getList.bind(ProjectController));
+
+    router.get('/api/project/model_list',ProjectController.getModelList.bind(ProjectController))
+
+}

package/app/router/view.js

@@ -0,0 +1,7 @@
+module.exports = (app,router)=>{
+    const {view:ViewController} = app.controller;
+    //用户输入 http://ip:port/view/page1 能渲染出对应的页面
+    router.get('/view/:page',ViewController.renderPage.bind(ViewController));
+    //用户输入 http://ip:port/view/xxx/xxx/*  能渲染出对应的页面
+    router.get('/view/:page/*',ViewController.renderPage.bind(ViewController));
+}

package/app/router-schema/project.js

@@ -0,0 +1,32 @@
+module.exports ={
+    '/api/project':{
+        get:{
+            query:{
+                type: 'object',
+                properties: {
+                    proj_key:{
+                        type:'string'
+                    }
+                },
+                required:["proj_key"]
+            },
+        }
+    },
+    '/api/project/list':{
+      get:{
+          query:{
+              type: 'object',
+              properties: {
+                  proj_key:{
+                      type:'string',
+                  }
+              }
+          }
+      }
+    },
+    '/api/project/model_list':{
+        get:{
+
+        }
+    }
+}

package/app/service/base.js

@@ -0,0 +1,12 @@
+const superagent = require('superagent');
+module.exports = (app)=> class BaseService{
+    /*
+    * service 基类
+    * 统一收拢service 相关公共方法
+    * */
+    constructor(){
+        this.app = app;
+        this.config = app.config;
+        this.curl = superagent
+    }
+}

package/app/service/project.js

@@ -0,0 +1,42 @@
+module.exports =(app)=>{
+    const BaseService = require('./base')(app)
+    const modelList = require('../../model/index.js')(app)
+    return class ProjectService extends BaseService {
+        /*
+         * 根据proj_key获取项目配置
+         * */
+        async get(projKey){
+            let projConfig;
+            modelList.forEach(modelItem => {
+                if(modelItem.project[projKey]) {
+                    projConfig = modelItem.project[projKey]
+                }
+            })
+            return projConfig
+        }
+        /*
+          * 获取当前 projectKey 对应模型下的项目列表  （如果无projectKey，全量获取）
+          * */
+        async getList({projKey}){
+            return modelList.reduce((projList,modelItem)=>{
+                const {project} = modelItem;
+                // 如果传projKey 则只取当前同模型下的数据，如果不传的情况下就差全量
+                if(projKey && !project[projKey]){
+                  return projList
+                }
+
+                for(const projKey in project){
+                    projList.push(project[projKey])
+                }
+                return projList
+            },[])
+
+        }
+        /*
+        * 获取所有模型项目的数据结构
+        * */
+        async getModelList(){
+            return modelList
+        }
+    }
+}

package/app/view/entry.tpl

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="dark">
+ <head>
+    <meta charset="utf-8">
+    <link href="/static/normalize.css" rel="stylesheet">
+    <link href="/static/logo.png" rel="icon" type="image/x-icon">
+    <title>{{name}}</title>
+ </head>
+ <body style="margin:0">
+  <div id="root"></div>
+  <input id="projKey" value="{{projKey}}" style="display:none"/>
+  <input id="env" value="{{env}}" style="display:none"/>
+  <input id="options" value="{{options}}" style="display:none"/>
+ </body>
+ <script type="text/javascript">
+  try{
+        window.projKey = document.getElementById('projKey').value;
+        window.env = document.getElementById('env').value;
+        const options = document.getElementById('options').value
+        window.options = JSON.parse(options)
+  } catch(e){
+       console.log(e)
+  }
+
+ </script>
+</html>

package/app/webpack/config/webpack.base.js

@@ -0,0 +1,219 @@
+const glob = require('glob');
+const path = require('path')
+const fs = require('fs');
+const webpack = require('webpack')
+const merge = require('webpack-merge');
+const {VueLoaderPlugin} = require('vue-loader');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+// 动态构造 elpisPageEntries elpisHtmlWebpackPluginList
+const elpisPageEntries={}
+const elpisHtmlWebpackPluginList =[]
+// 获取elpis/app文件中pages目录下的所有带有entry.*.js的相关文件
+const elpisEntriesList = path.resolve(__dirname, '../../pages/**/entry.*.js');
+// 将获取到的文件通过glob.sync 转换成数组，并且进行文件遍历
+glob.sync(elpisEntriesList).forEach(file => {
+    handleFile(file,elpisPageEntries,elpisHtmlWebpackPluginList)
+})
+
+// 动态构造 businessPageEntries businessHtmlWebpackPluginList
+const businessPageEntries={}
+const businessHtmlWebpackPluginList =[]
+// 获取业务/app文件中pages目录下的所有带有entry.*.js的相关文件
+const businessEntriesList = path.resolve(process.cwd(), './app/pages/**/entry.*.js');
+// 将获取到的文件通过glob.sync 转换成数组，并且进行文件遍历
+glob.sync(businessEntriesList).forEach(file => {
+    handleFile(file,businessPageEntries,businessHtmlWebpackPluginList)
+})
+
+// 构造相关webpack处理的数据结构
+function handleFile(file,entries ={},htmlWebPackPluginList = []){
+    // 获取到js文件的名称  entry.*
+    const entryname = path.basename(file, '.js');
+    // 构造entry
+    entries[entryname] = file;
+    // 构造最终渲染的页面文件
+    htmlWebPackPluginList.push(
+        // htmlWebpackPlugin 辅助注入打包后的bundle 文件到tpl文件中
+        new HtmlWebpackPlugin({
+            // 产物最终模板 输出路径
+            filename:path.resolve(process.cwd(),'./app/public/dist/',`${entryname}.tpl`),
+            // 指定要使用的模板文件
+            template:path.resolve(__dirname,'../../view/entry.tpl'),
+            // 要注入的代码块
+            chunks: [entryname]
+        })
+    )
+}
+
+
+// 加载业务webpack 配置
+let buinessWebPackConfig ={};
+
+try{
+    buinessWebPackConfig = require(`${process.cwd()}/app/webpack.config.js`)
+} catch (e) {
+
+}
+
+/*
+* webpack 配置
+* */
+module.exports= merge.smart({
+    // 入口配置
+    entry:Object.assign({},elpisPageEntries,businessPageEntries),
+    // 模块解析配置（决定了要加载解析哪些模块，以及用什么方式去解析）
+    module:{
+        rules:[
+            {
+                test: /\.vue$/,
+                use: {
+                    loader:require.resolve('vue-loader')
+                },
+            },
+            {
+                test: /\.js$/,
+                include: [
+                    // 处理elpis 目录
+                    path.resolve(__dirname, '../../pages'),
+                    // 处理业务目录
+                    path.resolve(process.cwd(), './app/pages'),
+                ],
+                use: {
+                    loader:require.resolve('babel-loader')
+                },
+            },
+            {
+                test: /\.(png|jpe?g|gif)(\?.+)?$/,
+                use: {
+                    loader:require.resolve('url-loader'),
+                    options:{
+                        limit:300,
+                        esModule:false,
+                    }
+                },
+            },
+            {
+                test:/\.css$/,
+                use:[
+                    require.resolve('style-loader'),
+                    require.resolve('css-loader')
+                ],
+            },
+            {
+                test:/\.less$/,
+                use:[
+                    require.resolve('style-loader'),
+                    require.resolve('css-loader'),
+                    require.resolve('less-loader')
+                ],
+            },
+            {
+                test:/\.(eot|ttf|woff|woff2)(\?\S*)?$/,
+                use:require.resolve('file-loader'),
+            }
+
+        ]
+    },
+    // 产物输出路径,因为开发和生产环境输出不一致，所以在各自环境中自行配置
+    output:{},
+    // 配置模块解析的具体行为(定义webpack在打包时，如何找到并解析具体模块路径)
+    resolve:{
+        extensions: [ '.js','.vue','.less','.css'],
+        alias:(()=>{
+            const aliasMap ={};
+            const blankModulePath = path.resolve(__dirname,'../libs/blank.js');
+                // dashborad 路由扩展
+            const businessDashboardRouterConfig = path.resolve(process.cwd(),'./app/pages/dashboard/router.js');
+            aliasMap['$businessDashboradRouterConfig'] = fs.existsSync(businessDashboardRouterConfig) ? businessDashboardRouterConfig:blankModulePath
+
+            // schema-view component 扩展配置
+            const businessComponentConfig = path.resolve(process.cwd(),'./app/pages/dashboard/complex-view/schema-view/components/component-config.js');
+            aliasMap['$businessComponentConfig'] = fs.existsSync(businessComponentConfig) ? businessComponentConfig:blankModulePath
+
+            // 业务 form-item 配置扩展
+            const businessFormItemConfig = path.resolve(process.cwd(),'./app/pages/widgets/schema-form/form-item-config.js');
+            aliasMap['$businessFormItemConfig'] = fs.existsSync(businessFormItemConfig) ? businessFormItemConfig:blankModulePath
+
+            // 业务 search -bar 配置扩展
+            const businessSchemaSearchBar = path.resolve(process.cwd(),'./app/pages/widgets/schema-search-bar/search-item-config.js');
+            aliasMap['$businessSearchItemConfig'] = fs.existsSync(businessSchemaSearchBar) ? businessSchemaSearchBar:blankModulePath
+            return {
+                'vue':require.resolve('vue'),
+                '@babel/runtime/helpers/asyncToGenerator':require.resolve('@babel/runtime/helpers/asyncToGenerator'),
+                '@babel/runtime/regenerator': require.resolve('@babel/runtime/regenerator'),
+                '@babel/runtime/helpers/toConsumableArray':require.resolve('@babel/runtime/helpers/toConsumableArray'),
+                $elpisPages: path.resolve(__dirname,'../../pages'),
+                $elpisCommon: path.resolve(__dirname,'../../pages/common'),
+                $elpisCurl:path.resolve(__dirname,'../../pages/common/curl.js'),
+                $elpisUtils:path.resolve(__dirname,'../../pages/common/utils.js'),
+                $elpisWidgets: path.resolve(__dirname,'../../pages/widgets'),
+                $elpisHeaderContainer:path.resolve(__dirname,'../../pages/widgets/header-container/header-container.vue'),
+                $elpisSiderContainer:path.resolve(__dirname,'../../pages/widgets/sider-container/sider-container.vue'),
+                $elpisSchemaTable:path.resolve(__dirname,'../../pages/widgets/schema-table/schema-table.vue'),
+                $elpisSchemaForm:path.resolve(__dirname,'../../pages/widgets/schema-form/schema-form.vue'),
+                $elpisSchemaSearchBar:path.resolve(__dirname,'../../pages/widgets/schema-search-bar/schema-search-bar.vue'),
+
+                $elpisStore: path.resolve(__dirname,'../../pages/store'),
+                $elpisBoot: path.resolve(__dirname,'../../pages/boot.js'),
+                ...aliasMap,
+            }
+        }) ()
+    },
+    // 配置webpack插件
+    plugins:[
+        // 处理.vue文件 这个插件必须的
+        // 它的只能是将你定义过的其他规则复制并应用到 .vue文件里
+        // 例如 如果有一条匹配规则 /\.js$/ 的规则，那么它会应用到.vue文件中的script板块中
+        new VueLoaderPlugin(),
+        // 把第三方库暴漏到window context下
+        new webpack.ProvidePlugin({
+            Vue:'vue',
+            axios:'axios',
+            _:'lodash',
+        }),
+        // 定义全局常量
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__:'true',//支持vue解析optionApi
+            __VUE_PROD_DEVTOOLS__:'false',//禁用vue调试工具
+            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__:'false',//禁用生产环境水合不匹配详情
+        }),
+        // 构造最终渲染页面模板
+        ...elpisHtmlWebpackPluginList,
+        ...businessHtmlWebpackPluginList
+    ],
+    // 配置打包输出优化 （配置代码分割，模块合并，缓存，TreeShaing，压缩等优化策略）
+    optimization: {
+        /*
+        *  把js打包成3中类型
+        * 1 vendor 第三方lib库 基本不会改动，除非依赖版本升级
+        * 2 common 业务组件代码的公共部分抽取出来 改动较少
+        * 3 entry.{page} 不用页面 entry 里的业务组件代码的差异部分，会经常改动
+        * 目的：把改动和引用频率不一样的js区分出来 以达到更好利用浏览器缓存的效果
+        * */
+        splitChunks: {
+            chunks: 'all',//对同步和异步模块进行分割
+            maxAsyncRequests:10,//每次异步加载的最大并行请求数
+            maxInitialRequests:10,//入口点的最大并行请求数
+            cacheGroups: {
+                vendor: { //第三方依赖库
+                    test: /[\\/]node_modules[\\/]/,//打包node_modules中的文件
+                    name: 'vendor',//模块名称
+                    priority: 20,//优先级 数字越大，优先级越高
+                    enforce: true,//强制执行
+                    reuseExistingChunk: true, //复用已有的公共chunk
+                },
+                common: { //公共模块
+                    test: /[\\/]common | widgets[\\/]/,//打包common和widgets中的文件
+                    name: 'common',//模块名称
+                    minChunks: 2,//被两处引用即为公共模块
+                    minSize: 1,//最小分割文件大小 1byte
+                    priority: 10,//优先级
+                    reuseExistingChunk: true,//复用已有的公共chunk
+                }
+            }
+        },
+        // 将webpack运行时生成的代码打包到runtime.js
+        runtimeChunk:true
+    }
+},buinessWebPackConfig)

package/app/webpack/config/webpack.dev.js

@@ -0,0 +1,55 @@
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+
+// 基础类
+const baseConfig = require('./webpack.base.js');
+const path = require("path");
+// devServer配置
+const DEV_SERVER_CONFIG={
+    HOST:'127.0.0.1',
+    PORT:9002,
+    HMR_PATH:'__webpack_hmr',//官方规定
+    TIMEOUT:20000
+}
+const {HOST,PORT,HMR_PATH,TIMEOUT} = DEV_SERVER_CONFIG
+Object.keys(baseConfig.entry).forEach(v=>{
+    // 第三方包不作为hmr的入口
+    if(v !=='vendor'){
+        baseConfig.entry[v] = [
+            // 主入口文件
+            baseConfig.entry[v],
+            // hmr更新入口,官方指定的hmr路径
+            `${require.resolve('webpack-hot-middleware/client')}?path=http://${HOST}:${PORT}/${HMR_PATH}&timeout=${TIMEOUT}&reload=true`
+        ]
+    }
+})
+
+// 生产环境webpack配置
+const webpackConfig = merge.smart(baseConfig, {
+    // 指定开发环境模式
+    mode: 'development',
+    // sourcemap开发工具，呈现代码的映射关系，便于在开发过程中调试代码
+    devtool: 'eval-cheap-module-source-map',
+    // 开发阶段的output配置
+    output:{
+        filename:'js/[name]_[chunkhash:8].bundle.js',
+        path:path.resolve(process.cwd(),'./app/public/dist/dev/'),//输出文件路径
+        publicPath:`http://${HOST}:${PORT}/public/dist/dev`, //外部资源公共路径
+        globalObject: 'this'
+    },
+    plugins:[
+        // HotModuleReplacementPlugin 用于实现热模块替换（Hot Module Replacement 简称 HMR）
+        //模块热替换允许在应用程序运行时替换模块
+        //极大的提升开发效率 因为能让应用程序一直保持运行状态
+        new webpack.HotModuleReplacementPlugin({
+            multiStep:false
+        }),
+    ]
+
+})
+module.exports = {
+    // webpack配置
+    webpackConfig,
+    //devServer 配置 暴漏给dev.js使用
+    DEV_SERVER_CONFIG
+};