mm_os 2.7.4 → 2.7.6

package/core/com/component/component.html

@@ -1,16 +1,16 @@
-<div class="mm_col col-12 col-sm-6 col-md-3 col-lg-2">
-	<div class="component_demo">
-		<div class="title">示例组件标题</div>
+<div class="mm_col ${' ' + config.layout}">
+	<div id="${config.id}" class="component_demo ${' ' + config.class}">
+		<div class="title">${@config.options.xxx}</div>
 		<div class="description">示例组件描述</div>
 	</div>
 </div>
 
 <style scoped>
+	/*[config.style]*/
+
 	.component_demo {}
 
 	.component_demo .title {}
 
-	.component_demo .description {
-		
-	}
+	.component_demo .description {}
 </style>

package/core/com/component/config.tpl.json

@@ -12,7 +12,7 @@
 	// 分组, 可以将特有的分一个组, 方便用户查询
 	"group": "default",
 	// 分类, 例如: 查询生活类、监测类、便民类
-	"type": "监测",
+	"type": "默认",
 	// 脚本文件, 非必传，可和渲染文件二选一传
 	"func_file": "./component.js",
 	// 渲染, 非必传，可和脚本文件二选一传
@@ -23,8 +23,8 @@
 	"options": [],
 	// 定位 由后台指定的展示位置
 	"location": [{
-		"page": "/admin/index",
+		"path": "/admin/index",
 		"position": "main",
-		"onoff": true
+		"available": 1
 	}]
 }

package/core/com/component/drive.js

@@ -32,7 +32,7 @@ class Drive extends Item {
 			// 分组, 可以将特有的分一个组, 方便用户查询
 			"group": "default",
 			// 分类, 例如: 查询生活类、监测类、便民类
-			"type": "监测",
+			"type": "默认",
 			// 脚本文件
 			"func_file": "./component.js",
 			// 渲染
@@ -76,9 +76,9 @@ Drive.prototype.model = function() {
 		"options": [],
 		// 定位 由后台指定的展示位置
 		"location": [{
-			"page": "/admin/index",
+			"path": "/admin/index",
 			"position": "main",
-			"onoff": true
+			"available": 1
 		}]
 	}
 };
@@ -133,6 +133,17 @@ Drive.prototype.design_option = function(body) {
 	}
 }
 
+/**
+ * 挂件模板
+ * @param {Object} ctx 请求上下文
+ * @param {Object} db 数据管理器,如: { next: async function{}, ret: {} }
+ * @return {Object} 执行结果
+ */
+Drive.prototype.tpl = async function(ctx, db) {
+	var html_file = this.config.template || "./component.html";
+	return html_file.fullname(this.dir).loadText();
+};
+
 /**
  * 组件主函数
  * @param {Object} ctx 请求上下文

package/core/com/component/index.js

@@ -71,16 +71,186 @@ Component.prototype.sort = function() {
 	});
 };
 
+/**
+ * 配置模型
+ * @param {Object} option 配置
+ * @param {Object} ctx 请求上下文
+ * @param {Object} db 数据管理器,如: { next: async function{}, ret: {} }
+ * @return {String} 返回html代码
+ */
+Component.prototype.option_model = function(block) {
+	var id = block.id || block.name;
+	var style = "";
+	if (block.style) {
+		var o = block.style.toJson();
+		style += `#${id} {`;
+
+		// 字体
+		if (o.font_size) {
+			style += `\n	font-size: ${o.font_size};`;
+		}
+		if (o.font_color) {
+			style += `\n	color: ${o.font_color};`;
+		}
+
+		// 边框
+		if (o.border_top_style !== 'none') {
+			style +=
+				`\n	border-top: ${o.border_top_size || 0} ${o.border_top_style || 'solid'} ${o.border_top_color || '#dbdbdb'};`;
+		}
+		if (o.border_right_style !== 'none') {
+			style +=
+				`\n	border-right: ${o.border_right_size || 0} ${o.border_right_style || 'solid'} ${o.border_right_color || '#dbdbdb'};`;
+		}
+		if (o.border_bottom_style !== 'none') {
+			style +=
+				`\n	border-bottom: ${o.border_bottom_size || 0} ${o.border_bottom_style || 'solid'} ${o.border_bottom_color || '#dbdbdb'};`;
+		}
+		if (o.border_left_style !== 'none') {
+			style +=
+				`\n	border-left: ${o.border_left_size || 0} ${o.border_left_style || 'solid'} ${o.border_left_color || '#dbdbdb'};`;
+		}
+
+		// 边距
+		if (o.margin_top) {
+			style += `\n	margin-top: ${o.margin_top};`;
+		}
+		if (o.margin_right) {
+			style += `\n	margin-right: ${o.margin_right};`;
+		}
+		if (o.margin_bottom) {
+			style += `\n	margin-bottom: ${o.margin_bottom};`;
+		}
+		if (o.margin_left) {
+			style += `\n	margin-left: ${o.margin_left};`;
+		}
+
+		// 填充
+		if (o.padding_top) {
+			style += `\n	padding-top: ${o.padding_top};`;
+		}
+		if (o.padding_right) {
+			style += `\n	padding-right: ${o.padding_right};`;
+		}
+		if (o.padding_bottom) {
+			style += `\n	padding-bottom: ${o.padding_bottom};`;
+		}
+		if (o.padding_left) {
+			style += `\n	padding-left: ${o.padding_left};`;
+		}
+
+		// 圆角
+		if (o.radius_top_right) {
+			style += `\n	border-top-right-radius: ${o.radius_top_right};`;
+		}
+		if (o.radius_top_left) {
+			style += `\n	border-top-left-radius: ${o.radius_top_left};`;
+		}
+		if (o.radius_bottom_right) {
+			style += `\n	border-bottom-right-radius: ${o.radius_bottom_right};`;
+		}
+		if (o.radius_bottom_left) {
+			style += `\n	border-bottom-left-radius: ${o.radius_bottom_left};`;
+		}
+
+		// 背景
+		if (o.bg_url) {
+			style += `\n	background-image: url(${o.bg_url});`;
+			style += `\n	background-size: 100% auto;`;
+			style += `\n	background-repeat: ${o.bg_repeat || 'no-repeat'};`;
+		}
+		if (o.bg_color) {
+			style +=
+				`\n	background-color: ${o.bg_color || ''};`;
+		}
+		style += `\n}`;
+
+		// 设置A样式
+		if (o.a_size || o.a_color) {
+			style += `\n#${id} a {`;
+			if (o.a_size) {
+				style += `\n	font-size: ${o.a_size};`;
+			}
+			if (o.a_color) {
+				style += `\n	color: ${o.a_color};`;
+			}
+			style += `\n}`;
+		}
+	} else {
+		style = "";
+	}
+
+	var layout = "";
+	if (block.layout) {
+		var o = block.layout.toJson();
+		if (o.default) {
+			layout += " col-" + o.default;
+		}
+		if (o.pc) {
+			layout += " col-xxl-" + o.pc;
+		}
+		if (o.note) {
+			layout += " col-xl-" + o.note;
+		}
+		if (o.pad) {
+			layout += " col-lg-" + o.pad;
+		}
+		if (o.pad_mini) {
+			layout += " col-sm-" + o.pad_mini;
+		}
+		if (o.phone) {
+			layout += " col-xs-" + o.phone;
+		}
+		layout = layout.trim();
+	}
+
+	var data = (block.data || '[]').toJson();
+	var attr = (block.attr || '{}').toJson();
+	var options = (block.options || '{}').toJson();
+
+	return {
+		id,
+		class: block.class,
+		style,
+		data,
+		attr,
+		layout,
+		options
+	};
+}
+
+/**
+ * 渲染模块
+ * @param {Object} ctx 请求上下文
+ * @param {Object} db 数据管理器,如: { next: async function{}, ret: {} }
+ * @param {Array} blocks 模块
+ */
+Component.prototype.render_block = async function(ctx, db, blocks) {
+	var html = "";
+	for (var i = 0; i < blocks.length; i++) {
+		var block = blocks[i];
+		var o = this.get(block.component);
+		if (o) {
+			var option = this.option_model(block);
+			var ret = await o.run('main', ctx, db, option);
+			if (ret) {
+				html += "\n" + ret;
+			}
+		}
+	}
+	return html;
+}
+
 /**
  * 执行渲染
- * @param {String} page 页面
- * @param {String} position 位置
- * @param {String} position position
  * @param {Object} ctx 请求上下文
  * @param {Object} db 数据管理器,如: { next: async function{}, ret: {} }
- * @return {String}
+ * @param {String} path 页面
+ * @param {String} position 位置
+ * @param {String} position position
+ * @return {String} 返回html代码
  */
-Component.prototype.render = async function(page, position, ctx, db) {
+Component.prototype.render = async function(ctx, db, path, position) {
 	var html = "";
 	var list = this.list;
 	for (var i = 0; i < list.length; i++) {
@@ -88,10 +258,10 @@ Component.prototype.render = async function(page, position, ctx, db) {
 		var cg = o.config;
 		if (cg.state) {
 			var obj = cg.location.getObj({
-				page,
+				path,
 				position
 			});
-			if (obj && obj.onoff) {
+			if (obj && obj.available) {
 				var ret = await o.run('main', ctx, db);
 				if (ret) {
 					html += "\n" + ret;

package/core/com/component/script.js

@@ -3,10 +3,16 @@ module.exports = {
 	 * 组件主函数
 	 * @param {Object} ctx 请求上下文
 	 * @param {Object} db 数据管理器,如: { next: async function{}, ret: {} }
+	 * @param {Object} config 模块配置 
 	 * @return {Object} 执行结果
 	 */
-	async main(ctx, db) {
-		var model = {};
+	async main(ctx, db, config) {
+		var model = {
+			config
+		};
+		if (config.diy) {
+			return db.tpl.render(config.diy, model);
+		}
 		return db.tpl.view("./component.html".fullname(__dirname), model);
 	}
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mm_os",
-  "version": "2.7.4",
+  "version": "2.7.6",
   "description": "这是超级美眉服务端框架，用于快速构建应用程序。",
   "main": "index.js",
   "scripts": {