@dmqweb/elpis 1.0.0

package/app/router-schema/business.js

@@ -0,0 +1,82 @@
+
+module.exports = {
+  '/api/proj/product/list': {
+    get: {
+      query: {
+        type: 'object',
+        properties: {
+          page: {
+            type: 'string',
+          },
+          pageSize: {
+            type: 'string',
+          },
+        },
+      }
+    }
+  },
+  '/api/proj/product': {
+    put: {
+      body: {
+        type: 'object',
+        properties: {
+          product_id: {
+            type: 'string',
+          },
+          product_name:{
+            type: 'string',
+          },
+          product_price: {
+            type: 'number',
+          },
+          inventory: {
+            type: 'number',
+          },
+        },
+        required: ['product_id', 'product_name'],
+      }
+    },
+    post: {
+      body: {
+        type: 'object',
+        properties: {
+          product_name:{
+            type: 'string',
+          },
+          product_price: {
+            type: 'number',
+          },
+          inventory: {
+            type: 'number',
+          },
+        },
+        required: ['product_name'],
+      }
+    },
+    delete: {
+      body: {
+        type: 'object',
+        properties: {
+          product_id: {
+            type: 'string',
+          },
+        },
+        required: ['product_id'],
+      }
+    },
+    get: { 
+      query: {
+        type: 'object',
+        properties: {
+          product_id: {
+            type: 'string',
+          },
+        },
+        required: ['product_id'],
+      }
+    }
+  },
+  '/api/proj/product_enum/list': {
+    get: {}
+  }
+}

package/app/router-schema/project.js

@@ -0,0 +1,40 @@
+// API路由模式定义文件\
+
+// 用于定义和验证API接口的请求规范
+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,13 @@
+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,55 @@
+module.exports = (app) => {
+  const BaseService = require('./base')(app);
+  const modelList = require('../../model/index')(app);
+  // console.log(JSON.stringify(modelList));
+  return class projectService extends BaseService {
+    /**
+     * 获取项目配置
+     * @param {string} projectKey 项目键值，用于指定要获取的项目配置
+     */
+    async get(projectKey) {
+      let projConfig;
+
+
+    const foundModel = modelList.find(modelItem => {
+      const { project } = modelItem;
+      return project[projectKey];
+    });
+    if (foundModel) {
+      const { project } = foundModel;
+      projConfig = project[projectKey];
+      if (projConfig) {
+          projConfig.proj_key = projectKey;
+        }
+    }
+
+      return projConfig;
+    }
+
+    /**
+     * 获取统一模型下的项目列表，如果无 projectKey，则获取所有项目列表
+     * @param {string} proj_key 项目key
+     */
+    async getProjectList({ projectKey }) {
+     return  modelList.reduce((preList, modelItem) => {
+        const { project } = modelItem;
+        
+        // 如果有传 projectKey，但项目里面没有这个 projectKey，则返回
+        if (projectKey && !project[projectKey]) return preList;
+
+        for(const projKey in project) {
+          preList.push(project[projKey]);
+        }
+        return preList;
+      }, [])
+    }
+
+
+    /**
+     * 获取所有模型与项目的结构化数据
+     */
+    async getModelList() {
+      return modelList;
+    }
+  }
+}

package/app/view/entry.tpl

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-CN" >
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{name}}</title>
+  <link href="/static/normalize.css" rel="stylesheet" >
+  <link href="/static/logo.png" rel="icon" type="image/x-icon" >
+</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;" />
+
+<script>
+  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>
+</body>
+</html> 

package/app/webpack/config/blank.js

@@ -0,0 +1,3 @@
+module.exports = {
+    
+}

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

@@ -0,0 +1,269 @@
+const path = require("path");
+const { VueLoaderPlugin } = require('vue-loader');
+const  webpack = require("webpack");
+const  HtmlWebpackPlugin  = require('html-webpack-plugin');
+const  glob  = require("glob");
+const merge = require('webpack-merge');
+const fs = require("fs");
+
+// 动态构造 elpis下的 entry 和 HtmlWebpackPluginList
+const elpisEntries = {}
+const elpisHtmlWebpackPluginList = []
+// 获取 elpis/app/pages 目录下所有入口文件（entry.xx.js）
+const elpisEntryList = path.resolve(__dirname, '../../pages/**/entry.*.js');
+glob.sync(elpisEntryList).forEach(file=>handleFile(file,elpisEntries,elpisHtmlWebpackPluginList))
+
+// 动态构造 业务目录下的 entry 和 HtmlWebpackPluginList
+const businessEntries = {}
+const businessHtmlWebpackPluginList = []
+// 获取 elpis/app/pages 目录下所有入口文件（entry.xx.js）
+const businessEntryList = path.resolve(process.cwd(), './app/pages/**/entry.*.js');
+glob.sync(businessEntryList).forEach(file=>handleFile(file,businessEntries,businessHtmlWebpackPluginList))
+
+function handleFile(file,entires = {},HtmlWebpackPluginList = []) {
+  // 构造 entry
+  const entryName = path.basename(file, '.js')
+  entires[entryName] = file
+  // 构造 HtmlWebpackPlugin 最终渲染的页面文件
+  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.config.js的配置
+let businessWebpackConfig = {};
+try {
+  businessWebpackConfig = require(`${process.cwd()}/app/webpack.config.js`);
+} catch (e) {}
+
+/**
+ * webpack 基础配置
+ */
+module.exports = merge.smart({
+  // 添加 mode 配置以解决警告
+  mode: 'production',
+  
+  // entry（入口）：指定 webpack 构建依赖图的开始点
+  // webpack 会从这个点开始，递归地构建模块依赖关系图
+  entry: Object.assign({},elpisEntries,businessEntries),
+
+  // module（模块）：配置如何处理项目中的不同类型模块
+  // 例如如何处理 CSS、图片、字体等非 JavaScript 模块
+  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'),
+        options: {
+          sourceType: 'module',
+          // 添加配置以正确处理 ES6 模块
+        presets: [
+          [require.resolve('@babel/preset-env'), {
+            // 移除 modules: false 配置，让 Babel 自动处理模块转换
+            targets: {
+              browsers: ['last 2 versions', 'ie >= 11']
+            },
+          }]
+        ],
+        plugins: [
+          require.resolve('@babel/plugin-transform-runtime')
+        ]
+        }
+      }
+    }, {
+        test: /\.(mjs|js)$/,
+        type: 'javascript/auto', // 自动识别模块类型
+        include: [
+          path.resolve(process.cwd(), './app/pages')
+        ],
+        use: {
+          loader:require.resolve('babel-loader') // 复用已配置的 babel-loader
+        }
+      }, {
+      test: /\.(png|jpe?g|gif)(\?.+)?$/,
+      use: {
+        loader: require.resolve('url-loader'),
+        options: {
+          limit: 300,
+          esModule: false
+        }
+      }
+    }, {
+      test: /\.css$/,
+      use: [{
+        loader: require.resolve('style-loader')
+      }, {
+        loader: require.resolve('css-loader')
+      }]
+    }, {
+      test: /\.less$/,
+      use: [{
+        loader: require.resolve('style-loader')
+      }, {
+        loader: require.resolve('css-loader')
+      }, {
+        loader: require.resolve('less-loader')
+      }]
+    }, {
+      test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+      use: {
+        loader: require.resolve('file-loader')
+      }
+    }]
+  },
+  
+  // output（出口）：指定 webpack 如何输出编译后的文件以及输出到哪里
+  // 因为开发和生产环境输出不一致，所以在各自环境下配置
+  output: {},
+
+  // 配置 模块解析时的具体行为（定义在webpack在打包时，如何找到并解析具体模块的路径）
+  // 例如设置模块查找目录、文件扩展名、别名等
+  resolve: {
+    extensions: ['.js', '.vue', '.css', '.less'],
+    alias: (()=>{
+      // 由于webpack的构建是在编译时进行，所以当businessDashboardRouterConfig没配置router文件时，会报错，进行兼容
+      const blankAlias = {};
+      const blankPath = path.resolve(__dirname,"./blank.js");
+
+      // dashboard 路由扩展配置
+      const businessDashboardRouterConfig = path.resolve(process.cwd(),"./app/pages/dashboard/router.js")
+      blankAlias["$businessDashboardRouterConfig"] = fs.existsSync(businessDashboardRouterConfig)?businessDashboardRouterConfig:blankPath;
+
+      // 业务扩展 schema-view 的 component 配置
+      const businessComponentConfig = path.resolve(process.cwd(),"./app/pages/dashboard/complex-view/schema-view/components/component.config.js");
+      blankAlias["$businessComponentConfig"] = fs.existsSync(businessComponentConfig)?businessComponentConfig:blankPath;
+
+      // 业务扩展 schema-form 的 component 配置
+      const businessFormItemConfig = path.resolve(process.cwd(),"./app/pages/widgets/schema-form/form-item.config.js");
+      blankAlias["$businessFormItemConfig"] = fs.existsSync(businessFormItemConfig)?businessFormItemConfig:blankPath;
+
+      // 业务扩展 search-item 的 component 配置
+      const businessSearchItemConfig = path.resolve(process.cwd(),"./app/pages/widgets/schema-search-bar/search-item.config.js");
+      blankAlias["$businessSearchItemConfig"] = fs.existsSync(businessSearchItemConfig)?businessSearchItemConfig:blankPath;
+      console.log('%cdmq:::%s',`color:green;font-weight:bold;`,`哈哈哈哈`,businessSearchItemConfig,fs.existsSync(businessSearchItemConfig));
+
+      return {
+          // 外部pages的vue引用vue时（由elpis的boot.js使用）需要修改引用到内部的vue
+        "vue": path.resolve(__dirname,"../../../node_modules/vue"),
+        $elpisPage: path.resolve(__dirname, '../../pages'),
+        $elpisCommon: path.resolve(__dirname, '../../pages/common'),
+        $elpisCurl: path.resolve(__dirname, '../../pages/common/curl.js'),
+        $elpisUtils: path.resolve(__dirname, '../../pages/common/util.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"),
+        // 自定义dashboard路由页面使用
+        // $businessDashboardRouterConfig: path.resolve(process.cwd(),"./app/pages/dashboard/router.js")
+        ...blankAlias
+      }
+    })(),
+    // 添加 fallback 配置以解决 Node.js 核心模块在浏览器环境中的问题
+      fallback: {
+        "process": false
+      }
+  },
+
+
+  // plugins（插件）：用于执行更广泛的任务，比如打包优化、环境变量注入等
+  // 插件功能更强大，可以处理整个构建过程中的各种任务
+  plugins: [
+    // 处理 .vue 文件，这个插件时必须的
+    // 将你在 webpack 配置中定义的其他规则复制并应用到 .vue 文件
+    new VueLoaderPlugin(),
+
+    new webpack.ProvidePlugin({
+      // 配置第三方库暴露到 window context 下 
+      Vue: 'vue',
+      axios: 'axios',
+      _: 'lodash'
+    }),
+
+    new webpack.DefinePlugin({
+      // 定义全局变量
+      __VUE_OPTIONS_API__: 'true', // 支持 vue 解析Options API 
+      __VUE_PROD_DEVTOOLS__: 'false', // 禁用 vue 的调试工具
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false' // 禁用生产环境显示 "水合"信息
+    }),
+
+    // 构造最终渲染的页面模板
+    ...elpisHtmlWebpackPluginList,
+    ...businessHtmlWebpackPluginList
+  ],
+  
+
+  //  用于控制 webpack 的代码分割、压缩、作用域提升等优化功能
+  optimization: {
+    /**
+     * 把js代码打包成3种类型
+     * 1. vendor：第三方 lib 库，基本不会改动，除非依赖版本升级
+     * 2. common：业务组件代码的公共部分抽取出来，改动较少
+     * 2. entry.{page}: 不用页面 entry 里的业务组件代码的差异部分， 会经常改动
+     * 目的：把改动和引用频率不一样的 js文件区分出来，以达到更好利用浏览器缓存的效果
+     */
+    splitChunks: {
+      // 对所有类型的 chunks 进行代码分割优化（包括同步和异步加载的模块）
+      chunks: 'all', 
+      // 按需加载时的最大并行请求数为 10（控制动态导入时能同时加载的 chunk 数量）
+      maxAsyncRequests: 10,
+      // 入口点初始加载时的最大并行请求数为 10（控制首屏加载时能同时加载的 chunk 数量）
+      maxInitialRequests: 10,
+      // 缓存组配置（定义不同类型的模块如何分组打包）
+      cacheGroups: {
+        // 第三方库缓存组（处理 node_modules 中的第三方依赖）
+        vendor: {
+          // 匹配 node_modules 目录下的所有模块（跨平台兼容路径分隔符）
+          test: /[\\/]node_modules[\\/]/,
+          // 将匹配的模块打包到名为 vendor 的 chunk 中
+          name: 'vendor',
+          // 设置缓存组优先级为 20（数值越大优先级越高）
+          priority: 20,
+          // 强制执行此缓存组（忽略全局 minSize、minChunks 等限制条件）
+          enforce: true,
+          // 如果已存在包含相同模块的 chunk，则重用它而不是创建新的
+          reuseExistingChunk: true
+        },
+        common: { // 公共模块
+          test: /[\\/]common|widgets[\\/]/, // 匹配 common 或 widgets 目录下的模块为公共模块
+          name: 'common', // 模块名称
+          minChunks: 2, //  引用过两次即被归为公共模块
+          minSize: 1, // 最小分割文件
+          priority:   10, // 优先级
+          reuseExistingChunk: true // 复用已有的公共 chunk
+        }
+      }
+    },
+    // 将 webpack 运行时生成的代码打包到 runtime.js 中
+    runtimeChunk: true
+  },
+    // 添加实验性功能支持ES6模块
+    experiments: {
+    topLevelAwait: true,
+  },
+
+},businessWebpackConfig)

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

@@ -0,0 +1,61 @@
+const webpack = require('webpack')
+const path = require('path')
+const merge = require('webpack-merge')
+
+// 基类配置
+const baseConfig = require('./webpack.base.js')
+
+// deserver 配置
+const DEV_SERVER_CONFIG = {
+  HOST: '127.0.0.1',
+  PORT: 9002,
+  HMR_PATH: '/__webpack_hmr', // 默认
+  TIMEOUT: 20000
+}
+
+// 开发阶段的 entry 配置需要加入 hmr
+Object.keys(baseConfig.entry).forEach(v => {
+  // 第三方库不作为 hmr 入口
+  if ( v !== 'vendor' ){
+    baseConfig.entry[v] = [
+      baseConfig.entry[v],
+    `${require.resolve('webpack-hot-middleware/client')}?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}${DEV_SERVER_CONFIG.HMR_PATH}&timeout=${DEV_SERVER_CONFIG.TIMEOUT}&reload=true`
+    ]
+  }
+})
+
+// 生产环境 webpack 配置
+const webpackDevConfig = merge(baseConfig, {
+  // 指定开发环境配置
+  mode: 'development',
+
+  // 添加开发阶段插件，呈现代码的映射关系，便于在开发过程中调试代码
+  devtool: 'eval-cheap-module-source-map',
+
+  // 开发阶段 output 配置
+  output: { 
+    // 定义输出文件名格式：在 js 目录下生成固定名称的bundle.js
+    filename: 'js/[name].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: true  
+    })  
+  ]
+})
+
+module.exports = {
+  // 配置开发环境 webpack 配置
+  webpackDevConfig,
+  // devServer 配置 ,暴露给 dev.js使用
+  DEV_SERVER_CONFIG
+}