@mangjuxiong/elpis 1.0.2

package/app/public/static/normalize.css

@@ -0,0 +1,267 @@
+/*! 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,6 @@
+module.exports = (app, router) => {
+  const { project: projectController } = app.controllers;
+  router.get('/api/project/model_list', projectController.getModelList.bind(projectController));
+  router.get('/api/project/list', projectController.getList.bind(projectController));
+  router.get('/api/project', projectController.getProject.bind(projectController));
+};

package/app/router/view.js

@@ -0,0 +1,7 @@
+module.exports = (app, router) => {
+  const { view: viewController } = app.controllers;
+  //用户输入 http://ip:port/view/xxx,就能渲染对应的页面
+  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,30 @@
+module.exports = {
+  '/api/project/model_list': {
+    get: {},
+  },
+  '/api/project/list': {
+    get: {
+      query: {
+        type: 'object',
+        properties: {
+          proj_key: {
+            type: 'string'
+          }
+        }
+      }
+    },
+  },
+  '/api/project': {
+    get: {
+      query: {
+        type: 'object',
+        properties: {
+          proj_key: {
+            type: 'string',
+          }
+        },
+        required: ['proj_key'],
+      }
+    },
+  },
+};

package/app/service/base.js

@@ -0,0 +1,13 @@
+const superagent = require('superagent');
+module.exports = (app) =>
+  class BaseService {
+    /**
+     * service基类
+     * 统一收拢 service 相关公共方法
+     */
+    constructor(ctx) {
+      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')(app);
+
+  return class ProjectService extends BaseService {
+    /**
+     * 获取所有模型和项目的结构化数据
+     */
+    async getModelList() {
+      return modelList;
+    };
+    /**
+     * 获取当前projKey 对应模型下的项目列表，如果无projKey，则返回所有项目列表
+     */
+    getList({projKey}){
+      return modelList.reduce((preList,modelItem)=>{
+        const { project } = modelItem;
+        // 如果有projKey，则只返回projKey对应的项目,否则返回所有项目
+        if(projKey && !project[projKey]) return preList;
+        // 遍历project的key，将该model的所有project插入数据返回
+        for(const pKeyt in project){
+          preList.push(project[pKeyt]);
+        }
+        return preList;
+      },[]);
+    };
+    /**
+     * 根据proj_key获取项目配置
+     */
+    getProject({projKey}){
+      let projectConfig;
+      modelList.some(modelItem=>{
+        const { project } = modelItem;
+        if(project[projKey]){
+          projectConfig = project[projKey];
+          return true;
+        }
+      });
+      return projectConfig;
+    };
+  };
+};

package/app/view/entry.tpl

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

package/app/webpack/config/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: [require.resolve('@babel/preset-env')],
+  plugins: [require.resolve('@babel/plugin-transform-runtime')],
+};

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

@@ -0,0 +1,229 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+const webpack = require('webpack');
+const mrege = require('webpack-merge');
+const glob = require('glob');
+const fs = require('fs');
+
+// 动态构造 pageEnytries 和 HtmlWebpackPluginList
+const pageEntries = {};
+const HtmlWebpackPluginList = [];
+
+// 获取 elpis/app/pages目录下所有入口文件(entry.xx.js)
+const elpisEntryList = glob.sync(path.resolve(__dirname, '../../pages/**/entry.*.js'));
+// 获取业务方 app/pages目录下所有入口文件(entry.xx.js)
+const businessEntryList = glob.sync(path.resolve(process.cwd(), './app/pages/**/entry.*.js'));
+// 合并eplis和业务方的所有入口文件
+const entryList = elpisEntryList.concat(businessEntryList);
+
+entryList.forEach((file) => {
+  const entryName = path.basename(file, '.js');
+  // 构造entry
+  pageEntries[entryName] = file;
+  // 构造最终渲染的页面文件
+  HtmlWebpackPluginList.push(
+    // html-webpack-plugin 辅助注入打包后的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 businessWebpackConfig = {};
+try {
+  businessWebpackConfig = require(`${process.cwd()}/app/webpack.config.js`);
+} catch (err) {}
+
+/**
+ * webpack 基础配置
+ */
+module.exports = mrege.smart(
+  {
+    // 入口配置
+    entry: pageEntries,
+    // 模块解析配置（决定要加载哪些模块，以及用什么方式去解析）
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: {
+            loader: require.resolve('vue-loader'),
+          },
+        },
+        {
+          test: /\.js$/,
+          // 只对app/pages目录下的js文件进行babel-loader处理，加快打包速度
+          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,
+              esMoudle: 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|svg|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');
+
+        // dashboard 路由配置
+        const businessDashboardRouterConfig = path.resolve(process.cwd(), './app/pages/dashboard/router.js');
+        aliasMap['@businessDashboardRouterConfig'] = fs.existsSync(businessDashboardRouterConfig)
+          ? businessDashboardRouterConfig
+          : blankModulePath;
+
+        // schema-view component 扩展配置
+        const businessComponentConfig = path.resolve(
+          process.cwd(),
+          './app/pages/dashboard/complex-view/schema-view/components/components-config.js'
+        );
+        aliasMap['@businessComponentConfig'] = fs.existsSync(businessComponentConfig)
+          ? businessComponentConfig
+          : blankModulePath;
+
+        // schema-from 扩展配置
+        const businessFormItemConfig = path.resolve(
+          process.cwd(),
+          './app/pages/widgets/schema-form/form-item-config.js'
+        );
+        aliasMap['@businessFormItemConfig'] = fs.existsSync(businessFormItemConfig)
+          ? businessFormItemConfig
+          : blankModulePath;
+
+        // schema-search-bar 扩展配置
+        const businessSearchItemConfig = path.resolve(
+          process.cwd(),
+          './app/pages/widgets/schema-search-bar/search-item-config.js'
+        );
+        aliasMap['@businessSearchItemConfig'] = fs.existsSync(businessSearchItemConfig)
+          ? businessSearchItemConfig
+          : blankModulePath;
+
+        // header-container 扩展配置
+        const bussinessHeaderConfig = path.resolve(
+          process.cwd(),
+          './app/pages/widgets/header-container/header-config.js'
+        );
+        aliasMap['@bussinessHeaderConfig'] = fs.existsSync(bussinessHeaderConfig)
+          ? bussinessHeaderConfig
+          : blankModulePath;
+
+        return {
+          vue: require.resolve('vue'),
+          '@elpisElement': path.resolve(__dirname, '../../../node_modules/element-plus'),
+          '@babel/runtime/helpers/asyncToGenerator': require.resolve('@babel/runtime/helpers/asyncToGenerator'),
+          '@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'),
+          '@elpisHeadContainer': path.resolve(__dirname, '../../pages/widgets/head-container/head-container.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'
+          ),
+          '@elpisSchemaTable': path.resolve(__dirname, '../../pages/widgets/schema-table/schema-table.vue'),
+          '@elpisSiderContainer': path.resolve(__dirname, '../../pages/widgets/sider-container/sider-container.vue'),
+          '@elpisStore': path.resolve(__dirname, '../../pages/store'),
+          '@elpisBoot': path.resolve(__dirname, '../../pages/boot.js'),
+          ...aliasMap,
+        };
+      })(),
+    },
+    // 配置webpack插件
+    plugins: [
+      // 处理.vue文件，这个插件是必须的，它的职能是将你定义过的其他规则复制并应用到.vue文件里
+      // 例如，如果有条规则是/\.css$/，那么它会应用到.vue文件里的<style>板块中
+      new VueLoaderPlugin(),
+      // 把第三方库暴露到window.context下
+      new webpack.ProvidePlugin({
+        Vue: 'vue',
+        axios: 'axios',
+        _: 'lodash',
+      }),
+      // 定义全局常量
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: 'true', // 支持vue解析optionsApi
+        __VUE_PROD_DEVTOOLS__: 'false', // 禁用vue测试工具
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false', // 禁用生产环境显示“水合”信息
+      }),
+      // 构造最终渲染的页面模板
+      ...HtmlWebpackPluginList,
+    ],
+    // 配置打包输出优化（代码分割,模块合并，缓存，TreeSharing，压缩等优化策略）
+    optimization: {
+      /**
+       * 把js文件打包成三种类型
+       * 1. vendor: 把第三方代码打包成单独的chunk，基本不会改动，除非依赖版本升级
+       * 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[\\/]/,
+            name: 'common',
+            minChunks: 2, // 被两个引用即被归为公共模块
+            minSize: 1, // 最小分割大小（1 byte）
+            priority: 10, // 优先级
+            reuseExistingChunk: true, // 复用已有的公共chunk
+          },
+        },
+      },
+      // 将webpack运行时生成的代码打包到runtime.js
+      runtimeChunk: true,
+    },
+  },
+  businessWebpackConfig
+);

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

@@ -0,0 +1,57 @@
+const path = require('path');
+const mrege = require('webpack-merge');
+const webpack = require('webpack');
+
+// 基类配置
+const baseConfig = require('./webpack.base.js');
+// dev-server 配置
+const DEV_SERVER_CONFIG = {
+  host: '127.0.0.1',
+  port: '9011',
+  hmrPath: '__webpack_hmr', // 官方规定
+  timeout: 20000,
+};
+
+// 开发阶段 entry 配置需要加入hmr
+Object.keys(baseConfig.entry).forEach((key) => {
+  // 第三方包 不需要加入hmr
+  if (key !== 'vendor') {
+    baseConfig.entry[key] = [
+      // 注入主入口文件
+      baseConfig.entry[key],
+      // 注入hmr
+      `${require.resolve('webpack-hot-middleware/client')}?path=http://${DEV_SERVER_CONFIG.host}:${
+        DEV_SERVER_CONFIG.port
+      }/${DEV_SERVER_CONFIG.hmrPath}&timeout=${DEV_SERVER_CONFIG.timeout}&reload=true`,
+    ];
+  }
+});
+
+// 开发环境 webpack 配置
+const webpackConfig = mrege(baseConfig, {
+  // 开发环境
+  mode: 'development',
+  // source-map开发工具
+  devtool: 'eval-cheap-module-source-map',
+  // 开发环境的 output 配置
+  output: {
+    filename: 'js/[name]_[chunkhash:8].bundle.js',
+    path: path.join(process.cwd(), './app/public/dist/dev/'), // 输出文件存储路径
+    publicPath: `http://${DEV_SERVER_CONFIG.host}:${DEV_SERVER_CONFIG.port}/public/dist/dev/`, // 外部资源的路径
+    globalObject: 'this', // 支持多环境打包
+  },
+  // 开发阶段插件
+  plugins: [
+    // 用于实现热模块替换,模块热替换允许在应用程序运行时更新，极大地提升开发效率
+    new webpack.HotModuleReplacementPlugin({
+      multiStep: false,
+    }),
+  ],
+});
+
+module.exports = {
+  // webpack配置
+  webpackConfig,
+  // dev-server 配置,暴露给dev.js使用
+  DEV_SERVER_CONFIG,
+};