@yukihong/schema-admin-x 1.0.0

package/.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+public/
+docs/

package/.eslintrc

@@ -0,0 +1,55 @@
+{
+  "extends": [
+    "plugin:vue/base",
+    "plugin:vue/recommended",
+  ],
+  "plugins": ["vue"],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "babel-eslint",
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": [2, {"args": "none"}],
+    "strict": "off",
+    "valid-jsdoc": "off",
+    "jsdoc/require-param-description": "off",
+    "jsdoc/require-param-type": "off",
+    "jsdoc/check-param-names": "off",
+    "jsdoc/require-param": "off",
+    "jsdoc/check-tag-names": "off",
+    "linebreak-style": "off",
+    "array-bracket-spacing": "off",
+    "prefer-promise-reject-errors": "off",
+    "comma-dangle": "off",
+    "newline-per-chained-call": "off",
+    "no-loop-func": "off",
+    "no-empty": "off",
+    "no-else-return": "off",
+    "no-unneeded-ternary": "off",
+    "no-eval": "off",
+    "prefer-destructuring": "off",
+    "no-param-reassign": "off",
+    "max-len": "off",
+    "no-restricted-syntax": "off",
+    "no-plusplus": "off",
+    "no-useless-escape": "off",
+    "no-nested-ternary": "off",
+    "radix": "off",
+    "arrow-body-style": "off",
+    "arrow-parens": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/valid-v-for": "off",
+    "vue/no-multiple-template-root": "off"
+  },
+  "globals": {
+    "$": true,
+    "axios": true,
+    "Vue": true
+  }
+}

package/README.md

@@ -0,0 +1,208 @@
+# Elpis
+## 一个面向后台管理系统的前后端一体化框架，内置 Koa 服务端和 Vue3 + Element Plus 前端模板，通过配置化 Schema 快速生成列表、表单、搜索等常见业务页面，并提供可插拔的自定义路由、组件和构建配置扩展能力，以 npm 包形式在多个项目中复用。
+
+### model配置
+```javascript
+{
+  mode: 'dashboard', // 模板类型，不同模板类型对应不一样的模板数据结构
+  name: '', // 名称
+  desc: '', // 描述
+  icon: '', // icon
+  homePage: '', // 首页（项目配置）
+  // 头部菜单
+  menu: [{
+    key: '', // 菜单唯一描述
+    name: '', // 菜单名称
+    menuType: '', // 枚举值 group/ module
+
+    // 当 menuType == group 时，可填
+    subMenu: [{
+      // 可递归 menuItem
+    }, ...],
+
+    // 当 menuType == module 时，可填
+    moduleType: '', // 枚举值 sider/iframe/custom/schema
+
+    // 当 moduleType == sider 时 (侧边菜单)
+    siderConfig: {
+      menu: [{
+        // 可递归 menuItem(除 moduleType == sider )
+      }, ...]
+    },
+
+    // 当 moduleType == iframe 时
+    iframeConfig: {
+      path: '', // iframe 路径
+    },
+
+    // 当 moduleType == custom 时
+    customConfig: {
+      path: '', // 自定义路由路径
+    },
+
+    // 当 moduleType == schema 时
+    schemaConfig: {
+      api: '', // 数据源API（遵循 RESTFUL 规范）
+      schema: { // 板块数据结构
+        type: 'object',
+        properties: {
+          key: {
+            ...schema, // 标准 schema 配置
+            type: '', // 字段类型
+            label: '', // 字段的中文名
+            // 字段在 table 中的相关配置
+            tableOption: {
+              ...elTableColumnConfig, // 标准的 el-table-column 配置
+              toFixed: 0, // 保留小数点后几位
+              visible: true, // 默认为 true （false 时，表示不在表单中显示）
+            },
+            // 字段在 search-bar 中的相关配置
+            searchOption: {
+              ...elComponentConfig, // 标准 el-component-column 配置
+
+              // 配置组件类型
+              // -- input/select/dynamicSelect/dateRange...
+              comType: '',
+              default: '', // 默认值
+
+              // comType === 'select'
+              enumList: [], // 下拉框可选项
+
+              // comType === 'dynamicSelect'
+              api: '',
+            },
+            // 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 中的键值
+            // 如：componentConfig.createForm,这里对应 createFormOption
+            // 字段在 createForm 中相关配置
+            createFormOption: {
+              ...elComponentConfig, // 标准 el-component-column 配置
+              comType: '', // 控件类型 input/select/input-number
+              visible: true, // 是否展示（true/false），默认为 true
+              disabled: false, // 是否禁用（true/false），默认为 false
+              default: '', // 默认值
+
+              // comType === 'select'
+              enumList: [], // 下拉框可选项
+            },
+            // 字段在 editForm 中相关配置
+            editFormOption: {
+              ...elComponentConfig, // 标准 el-component-column 配置
+              comType: '', // 控件类型 input/select/input-number
+              visible: true, // 是否展示（true/false），默认为 true
+              disabled: false, // 是否禁用（true/false），默认为 false
+              default: '', // 默认值
+            },
+            // 字段在 detail-panel 中相关配置
+            detailPanelOption: {
+              ...elComponentConfig, // 标准 el-component-column 配置
+            }
+          },
+          ...
+        },
+        required: [], // 标记哪些字段是必填项
+      },
+      // table 相关配置
+      tableConfig: {
+        headerButtons: [{
+          label: '', // 按钮中文名
+          eventKey: '', // 按钮事件名
+          // 按钮事件具体配置
+          eventOption: {
+            // 当 eventKey === 'showComponent'
+            comName: '', // 组件名称
+          },
+          ...elButtonConfig // 标准 el-button 配置
+        }, ...],
+        rowButtons: [{
+          label: '', // 按钮中文名
+          eventKey: '', // 按钮事件名
+          eventOption: { // 按钮事件具体配置
+            // 当 eventKey === 'showComponent'
+            comName: '', // 组件名称
+
+            // 当 eventKey === 'remove'
+            params: {
+              // paramKey = 参数的键值
+              // rowValueKey = 参数值，格式为 schema::tableKey 的时候，到 table 中找相应的字段）
+              //   例如：user_id:schema::user_id
+              paramKey: rowValueKey
+            }
+          },
+          ...elButtonConfig // 标准 el-button 配置
+        }, ...]
+      },
+      searchConfig: {}, // search-bar 相关配置
+
+      // 动态组件 相关配置
+      componentConfig: {
+        // create-from 表单相关配置
+        createForm: {
+          title: '', // 表单标题
+          saveBtnText: '', // 保存按钮文案
+        },
+        // edit-form 表单相关配置
+        editForm: {
+          mainKey: '', // 表单主键，用于唯一标识要修改的数据对象
+          title: '', // 表单标题
+          saveBtnText: '', // 保存按钮文案
+        },
+        // detail-panel 相关配置
+        detailPanel: {
+          mainKey: '', // 表单主键，用于唯一标识要修改的数据对象
+          title: '', // 表单标题
+          saveBtnText: '', // 保存按钮文案
+        }
+        // ... 支持用户动态扩展
+      }
+    }
+  }, ...]
+}
+```
+
+### 服务端启动
+```javascript
+const {
+  serverStart
+} = require('@yukihong/schema-admin-x');
+
+// 启动 elpis 服务
+const app = serverStart({});
+```
+
+### 自定义服务端
+- router-schema
+- router
+- controller
+- service
+- extend
+- config
+
+### 前端构建
+```javascript
+const { frontendBuild } = require('@yukihong/schema-admin-x');
+
+// 编译构建前端工程
+frontendBuild(process.env._ENV);
+```
+
+### 自定义页面扩展
+* 在 `app/pages/` 目录下写入入口 entry.xxx.js
+
+
+### dashboard /custom-view 自定义页面扩展
+* 在 `app/pages/dashboard/xxxx` 下写页面
+
+
+### dashboard / schema-view / components 动态组件扩展
+1. 在 `app/pages/dashboard/complex-view/schema-view/components` 下写组件
+2. 配置到 `app/pages/dashboard/complex-view/schema-view/components/component-config.js`
+
+
+### schema-form 控件扩展
+1. 在 `app/widgets/schema-form/complex-view` 下写控件
+2. 配置到 `app/widgets/schema-form/form-item-config.js`
+
+
+### schema-search-bar 控件扩展
+1. 在 `app/widgets/schema-search-bar/complex-view` 下写控件
+2. 配置到 `app/widgets/schema-search-bar/search-item-config.js`

package/app/controller/base.js

@@ -0,0 +1,39 @@
+module.exports = (app) => class BaseController {
+	/**
+	 * controller 基类
+	 * 统一收拢 controller 相关的公共方法
+	 */
+	constructor() {
+		this.app = app;
+		this.config = app.config;
+	}
+	
+	/**
+	 * API 处理成功时统一返回结构
+	 * @param {object} ctx 上下文
+	 * @param {object} data 核心数据
+	 * @param {object} metadata 附加数据
+	 */
+	success(ctx, data = {}, metadata = {}) {
+		ctx.status = 200;
+		ctx.body = {
+			success: true,
+			data,
+			metadata
+		}
+	}
+	
+	/**
+	 * API 处理失败时统一返回结构
+	 * @param {object} ctx 上下文
+	 * @param {string} message 错误新信息
+	 * @param {number} code 错误码
+	 */
+	fail(ctx, message, code) {
+		ctx.body = {
+			success: false,
+			message,
+			code
+		}
+	}
+}

package/app/controller/project.js

@@ -0,0 +1,80 @@
+module.exports = (app) => {
+	
+	const BaseController = require('./base.js')(app);
+	
+	return class ProjectController extends BaseController {
+		
+		/**
+		 * 根据 proj_key 获取项目配置
+		 */
+		get(ctx) {
+			const {
+				proj_key: projKey
+			} = ctx.request.query;
+			
+			const { project: projectService } = app.service;
+			const projConfig = projectService.get(projKey);
+
+			if(!projConfig) {
+				this.fail(ctx, '获取项目异常', 50000);
+				return;
+			}
+			
+			this.success(ctx, projConfig);
+		}
+		
+		/**
+		 * 获取当前 projectKey 对应模型下的项目列表（如果无 projectKey, 全量获取）
+		 */
+		async getList(ctx) {
+			const {
+				proj_key: projKey
+			} = ctx.request.query;
+			
+			const { project: projectService } = app.service;
+			const projectList = projectService.getList({projKey});
+			
+			// 构造关键数据 list
+			const dtoProjectList = projectList.map(item => {
+				const { modelKey, key, name, desc, homePage } = item;
+				return { modelKey, key, name, desc, homePage };
+			})
+			this.success(ctx, dtoProjectList);
+		}
+		
+		/**
+		 * 获取所有模型与项目的结构化数据
+		 * @param {Object} ctx 上下文 koa 框架自动传的
+		 */
+		async getModelList(ctx) {
+			const { project: projectService } = app.service;
+			const modelList = await projectService.getModelList();
+			
+			// 构造返回结果，只返回关键数据
+			const dtoModelList = modelList.reduce((preList, item) => {
+				const { model, project } = item;
+				
+				// 构造 model 关键数据
+				const { key, name, desc } = model;
+				const dtoModel = { key, name, desc };
+				
+				// 构造 project 关键数据
+				const dtoProject = Object.keys(project).reduce((preObj, projKey) => {
+					const { key, name, desc, homePage } = project[projKey];
+					preObj[projKey] = { key, name, desc, homePage };
+					return preObj;
+				}, {})
+				
+				// 整合返回结构
+				preList.push({
+					model: dtoModel,
+					project: dtoProject
+				})
+				
+				return preList;
+			}, [])
+			
+			this.success(ctx, dtoModelList)
+		}
+	}
+}

package/app/controller/view.js

@@ -0,0 +1,20 @@
+module.exports = (app) => {
+	return class ViewController {
+		/**
+		 * 渲染页面
+		 * @param {Object} ctx 上下文 koa 框架自动传的
+		 */
+		async renderPage(ctx) {
+			const { query, params } = ctx.request;
+			app.logger.info(`[ViewController] query:${JSON.stringify(query)}`);
+			app.logger.info(`[ViewController] params:${JSON.stringify(params)}`);
+		
+			await ctx.render(`dist/entry.${ctx.params.page}`, {
+				projKey:ctx.query?.proj_key,
+				name: app.options?.name,
+				env: app.env.get(),
+				options: JSON.stringify(app.options)
+			});
+		}
+	}
+}

package/app/extend/logger.js

@@ -0,0 +1,39 @@
+const log4js = require('log4js');
+
+/**
+ * 日志工具
+ * 外部调用 app.logger.log  app.logger.error
+ */
+module.exports = (app) => {
+	let logger;
+	
+	if(app.env.isLocal()) {
+		// 打印在控制台即可
+		logger = console;
+	} else {
+		// 把日志输出并落地到磁盘（日志落盘）
+		log4js.configure({
+			appenders: {
+				console: {
+					type: 'console'
+				},
+				// 日志文件切分
+				dateFile: {
+					type: 'dateFile',
+					filename: './logs/application.log',
+					pattern: '.yyy-MM-dd'
+				}
+			},
+			categories: {
+				default: {
+					appenders: [ 'console', 'dateFile' ],
+					level: 'trace'
+				}
+			}
+		});
+		
+		logger = log4js.getLogger();
+	}
+	
+	return logger
+}

package/app/middleware/api-params-verify.js

@@ -0,0 +1,79 @@
+const Ajv = require('ajv');
+const ajv = new Ajv();
+
+/**
+ * API 参数校验
+ */
+module.exports = (app) => {
+	const $schema =  "http://json-schema.org/draft-07/schema#";
+	
+	return async (ctx,next) => {
+		
+		// 只对 API 参数做校验
+		if(ctx.path.indexOf('/api/') < 0) {
+			return await next();
+		}
+		
+		// 获取请求参数
+		const { body, query, headers } = ctx.request;
+		const { params, path, method } = ctx;
+		
+		app.logger.info(`[${method}] ${path} body:${JSON.stringify(body)}`);
+		app.logger.info(`[${method}] ${path} query:${JSON.stringify(query)}`);
+		app.logger.info(`[${method}] ${path} params:${JSON.stringify(params)}`);
+		app.logger.info(`[${method}] ${path} headers:${JSON.stringify(headers)}`);
+		
+		// app.logger.info('当前 roterSchema 结构：', JSON.stringify(app.routerSchema, null, 2));
+		const schema = app.routerSchema[path]?.[method.toLowerCase()];
+		app.logger.info('schema：', JSON.stringify(schema, null, 2));
+		
+		if(!schema) {
+			return await next();
+		}
+		
+		let valid = true;
+		
+		// ajv 校验器
+		let validate;
+		
+		// 校验 headers
+		if(valid && headers && schema.headers) {
+			schema.headers.$schema = $schema;
+			validate = ajv.compile(schema.headers);
+			valid = validate(headers);
+		}
+		
+		// 校验 body
+		if(valid && headers && schema.body) {
+			schema.body.$schema = $schema;
+			validate = ajv.compile(schema.body);
+			valid = validate(body);
+		}
+		
+		// 校验 query
+		if(valid && query && schema.query) {
+			schema.query.$schema = $schema;
+			validate = ajv.compile(schema.query);
+			valid = validate(query);
+		}
+		
+		// 校验 params
+		if(valid && params && schema.params) {
+			schema.params.$schema = $schema;
+			validate = ajv.compile(schema.params);
+			valid = validate(params);
+		}
+		
+		if(!valid) {
+			ctx.status = 200;
+			ctx.body = {
+				success: false,
+				message: `request validate fail:${ajv.errorsText(validate.errors)}`,
+				code: 442
+			}
+			return;
+		}
+		
+		await next();
+	}
+}

package/app/middleware/api-sign-verify.js

@@ -0,0 +1,34 @@
+const md5 = require("md5");
+
+/**
+ *  API 签名合法性校验
+ */
+module.exports = (app) => {
+	return async (ctx,next) => {
+		
+		// 只对 API 请求做校验
+		if(ctx.path.indexOf('api') < 0) {
+			return await next();
+		}
+		
+		const { path, method } = ctx;
+		const { headers } = ctx.request;
+		const { s_sign: sSign, s_t: st } = headers;
+		
+		const signKey = 'asd23fhakjs25dhaksdh5kjashcjk';
+		const signature = md5(`${signKey}_${st}`);
+		app.logger.info(`[${method} ${path}] signature: ${signature}`);
+		
+		if(!sSign || !st || signature !== sSign.toLowerCase() || Date.now() - st > 600000 ){
+			ctx.status = 200;
+			ctx.body = {
+				success: false,
+				message: 'signature not correct or api timeout!!!',
+				code: 445
+			}
+			return;
+		}
+		
+		await next();
+	}
+}

package/app/middleware/error-handler.js

@@ -0,0 +1,34 @@
+
+/**
+ * 运行时异常错误处理，兜底所有异常
+ * @param {[object]} app koa 实例
+ */
+module.exports = (app) => {
+	return async (ctx, next) => {
+		try {
+			await next();
+		} catch(err) {
+			// 异常处理
+			const { status, message, detail } = err;
+			
+			app.logger.info(JSON.stringify(err));
+			app.logger.error('[-- exception --]:',  status, message, detail);
+			
+			if( message && message.indexOf('template not found') > -1) {
+				// 页面重定向
+				ctx.status = 302; // 临时重定向
+				ctx.redirect(`${app.options?.homePage}`)
+				return;
+			}
+			
+			const resBody = {
+				success: false,
+				code: 50000,
+				message: '网络异常，请稍后重试'
+			}
+			
+			ctx.status = 200;
+			ctx.body = resBody;
+		}
+	}
+}

package/app/middleware/project-handler.js

@@ -0,0 +1,27 @@
+/**
+ * projectHandler 处理项目相关内容
+ */
+module.exports = (app) => {
+	return async (ctx, next) => {
+		// 只对 业务 API 进行 proj_key 处理
+		if(ctx.path.indexOf('/api/proj/') < 0) {
+			return await next();
+		}
+		
+		// 获取 projKey
+		const { proj_key: projKey } = ctx.request.headers;
+		if(!projKey) {
+			ctx.status = 200;
+			ctx.body = {
+				success: false,
+				message: 'proj_key not found',
+				code: 446
+			}
+			return;
+		}
+		
+		ctx.projKey = projKey;
+		
+		await next();
+	}
+}

package/app/middleware.js

@@ -0,0 +1,40 @@
+const path = require('path');
+
+// 当有 HTTP 请求到达时，Koa 会按照中间件注册的顺序，
+// 自动调用队列里的每一个中间件函数，并传入 ctx（上下文）和 next（下一个中间件的引用）。
+module.exports = (app) => {
+	
+	// 配置静态根目录
+	const koaStatic = require('koa-static');
+	app.use( koaStatic( path.resolve(process.cwd(), './app/public' )) );
+	
+	// 模板渲染引擎
+	const koaNunjucks = require('koa-nunjucks-2');
+	app.use(koaNunjucks({
+		ext: 'tpl',
+		path: path.join(process.cwd(), './app/public'),
+		nunjucksConfig: {
+			noCache: false,
+			trimBlocks: true
+		}
+	}));
+	
+	// 引入 ctx.body 解析中间件
+	const bdyParser = require('koa-bodyparser');
+	app.use(bdyParser({
+		formList: '1000ms',
+		enableTypes: ['form', 'json', 'text']
+	}))
+	
+	// 引入异常捕获中间件
+	app.use(app.middlewares.errorHandler);
+	
+	// 签名合法性校验
+	app.use(app.middlewares.apiSignVerify);
+	
+	// 引入 API 参数校验
+	app.use(app.middlewares.apiParamsVerify);
+	
+	// 引入 项目处理中间件
+	app.use(app.middlewares.projectHandler);
+}

package/app/pages/asserts/custom.css

@@ -0,0 +1,13 @@
+html,body {
+	height: 100%;
+}
+
+#root {
+	height: 100%;
+	color: #fff;
+}
+
+input:-webkit-autofill {
+	/* 覆盖自动填充背景颜色 */
+	-webkit-box-shadow: 0 0 0px 1000px #121212 inset;
+}