feat: add upload layer component

@@ -9,7 +9,8 @@
             this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, '变量', '变量', null, null, '变量'),
             this.createEdgeTemplateEntry('shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#BAFDFF;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;', 60, 40, '', '线条'),
             this.addEntry('real time', mxUtils.bind(this, function () {
-                const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">%date{HH:MM:ss}%</div></div>`
+                // const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">%date{HH:MM:ss}%</div></div>`
+                const template = `<div class="thingKit-component__real-time"><div class="real-time__date"></div> <div style="font-size:30px" class="real-time__now">时间</div></div>`
                 const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
                 cell.vertex = true;
                 this.graph.setAttributeForCell(cell, 'placeholders', '1');
@@ -22,14 +23,6 @@
                 this.setCellAttributes(cell, { componentType: 'variableImage' })
                 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
             }))
-            // this.addEntry('variableImage', mxUtils.bind(this, function () {
-            //     const imagePlaceholder = '/thingskit-drawio/images/thingskit/img-placeholder.png';
-            //     const template = `<div><img src="${imagePlaceholder}" alt=""></div>`;
-            //     const cell = new mxCell(template, new mxGeometry(0, 0, 194, 195), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
-            //     cell.vertex = true;
-            //     this.graph.setAttributeForCell(cell, 'componentType', 'variableImage');
-            //     return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
-            // }))
         ];
 
         this.addPaletteFunctions('component', '基础元件', true, fns);
@@ -46,4 +39,19 @@
         var day = date.getDay();
         return year + '年' + month + '月' + dates + '日 ' + arr[day];
     }
+
+    /**
+     * @description 初始化实时事件组件
+     */
+    function initRealTimeComponent() {
+        RAFSetInterval(() => {
+            const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
+            for (const time of allTimeNode) {
+                const date = new Date()
+                time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
+            }
+        }, 1000)
+    }
+
+    initRealTimeComponent()
 })();

@@ -4881,8 +4881,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 	const sidebarInstance = ui.sidebar
 	// console.log(this.editorUi)
 	console.log(vertices)
-	console.log(this)
+	console.log(ui)
 
+	const hasModifyNotSave = editor.status
 
 	// console.log(vertices[0]?.get('bindType'))
 	/**
@@ -4941,6 +4942,18 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 	let currentNodeData = null
 
 	/**
+	 * @description 保存页面信息
+	 */
+	async function autoSaveGraphInfo() {
+		if (!hasModifyNotSave) return
+		ui.actions.get(
+			(ui.currentFile.mode == null || !ui.currentFile.isEditable())
+				? 'saveAs'
+				: 'save')
+			.funct();
+	}
+
+	/**
 	 * @description 获取弹出层绑定信息
 	 * @param {'DOWN' | 'UP' | 'SINGLE' | 'DOUBLE' | 'DISPLAY' | 'FLASH' | 'ROTATE' | 'IMAGE'} type - 类型
 	 * @param {'event' | 'act' } category - 类别
@@ -5036,19 +5049,22 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 		GATEWAY: 'GATEWAY',
 	}
 
+	/**
+	 * @description 刷新页面
+	 */
 	function echoRefreshFn() {
 	}
 
 
 	// 获取url的请求参数函数
 	function getRequest() {
-		var url = location.search; //获取url中"?"符后的字串
-		var theRequest = new Object();
+		let url = location.search; //获取url中"?"符后的字串
+		let theRequest = new Object();
 		if (url.indexOf("?") != -1) {
 			var str = url.substring(1);
-			strs = str.split("&");
-			for (var i = 0; i < strs.length; i++) {
-				theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
+			string = str.split("&");
+			for (var i = 0; i < string.length; i++) {
+				theRequest[string[i].split("=")[0]] = decodeURI(string[i].split("=")[1]);
 			}
 		}
 		return theRequest;
@@ -5338,6 +5354,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 	//
 	// }
 
+	/**
+	 * @description 创建数据面板
+	 */
 	function createDataSourcePanel() {
 		const fragment = document.createDocumentFragment()
 		const defaultPanel = createPanel()
@@ -5482,6 +5501,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 					})
 				}
 			}
+			await to(autoSaveGraphInfo())
 			const [err, res] = await to(ConfigurationNodeApi.updateNodeInfo(value))
 			if (err) return
 			UseLayUi.successMsg()
@@ -5491,7 +5511,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 	}
 
 	/**
-	 * @description
+	 * @description 处理设置变量图片
 	 */
 	function handleSettingVarImage(event) {
 
@@ -5557,66 +5577,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			DEL_ROW_EL: 'variableImageTableDelRow',
 
 			/**
-			 * @description 图片选中区域节点
-			 */
-			IMG_SELECT_CONTAINER_EL: 'imgSelectContainerEl',
-
-			/**
-			 * @description 切换图片来源控制
-			 */
-			SWITCH_IMG_ORIGIN_FILTER: 'switchImgOriginFilter',
-
-			/**
-			 * @description 图片选中侧边栏节点
-			 */
-			VAR_IMG_CONTAINER_SIDEBAR: 'var-image__container-sidebar',
-
-			/**
-			 * @description 图库图形选择区域
-			 */
-			VAR_IMG_CONTAINER_CONTENT: 'var-image__container-content',
-
-			/**
-			 * @description 图库图形项
-			 */
-			VAR_IMG_ITEM: 'var-image__img-item',
-
-			/**
-			 * @description 图库图形选中控制
-			 */
-			VAR_IMG_ITEM_CHECKED: 'var-image__img-item--checked',
-
-			/**
-			 * @description 图库图形类别节点
-			 */
-			VAR_IMG_CATEGORY: 'var-image__category',
-
-			/**
-			 * @description 图库图形类别选择状态
-			 */
-			VAR_IMG_CATEGORY_CHECKED: 'var-image__category--checked',
-
-			/**
-			 * @description 本地上传图片节点
-			 */
-			UPLOAD_LOCAL_FILE_EL: 'var-image__container--local',
-
-			/**
-			 * @description 本地上传图片状态
-			 */
-			IMAGE_UPLOAD_STATE_EL: 'var-image__upload-state',
-
-			/**
-			 * @description 预览图片状态
-			 */
-			IMAGE_PREVIEW_EL: 'preview__img--preview',
-
-			/**
-			 * @description 本地图片上传删除按钮
-			 */
-			IMAGE_DEL_PREVIEW_EL: 'var-image__del-icon',
-
-			/**
 			 * @description
 			 */
 			DATA_SOURCE_COMP_EL: 'varImgDataSourceEl',
@@ -5660,16 +5620,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
 		}
 
-		const enumImageOriginType = {
-			LOCAL: 'local',
-			GALLERY: 'gallery',
-		}
-
-		/**
-		 * @description 图片状态保存
-		 */
-		let imageState = {}
-
 		let addRowNumber = 0
 
 		let getDataSourceValue = () => {
@@ -5731,212 +5681,19 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 			$(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
 				if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
 				const rowFilter = $(event.target).parents('tr').attr('lay-filter')
-				createUploadImgLayer(rowFilter)
-			})
-		}
+				// createUploadImgLayer(rowFilter)
+				generatorUploadLayerComponent((imageState) => {
 
-		/**
-		 * @description 创建本地图片上传区域
-		 */
-		function createLocalFileContainer() {
-			return `
-				<div id="${enumActionEl.UPLOAD_LOCAL_FILE_EL}" class="layui-upload">
-					<div class="preview__img">
-						<img src="" class="layui-upload-img" id="${enumActionEl.IMAGE_PREVIEW_EL}">
-						<div class="var_image__add-icon">+</div>
-						<div class="var-image__del-icon">x</div>
-					</div>
-					<div class="layui-upload-list"></div>
-				</div>
-				<div id="${enumActionEl.IMAGE_UPLOAD_STATE_EL}"></div>
-				<div style="margin-top: 30px;">图片格式支持png、jpg(jpeg)、gif，大小不能超过5M</div>
-			`
-		}
-
-		/**
-		 * @description 上传
-		 */
-		function uploadFileEvent() {
-			$(`.${enumActionEl.IMAGE_DEL_PREVIEW_EL}`).on('click', (event) => {
-				event.stopPropagation()
-				$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', '')
-				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
-			})
-			const uploadInst = upload.render({
-				elem: `#${enumActionEl.UPLOAD_LOCAL_FILE_EL}`,
-				auto: false,
-				size: 1024 * 5,
-				url: '/yt/oss/upload',
-				method: 'post',
-				choose(obj) {
-					obj.preview(async function (index, file, result) {
-						const formData = new FormData()
-						formData.set('file', file)
-						const [err, res] = await to(ConfigurationNodeApi.uploadImg(formData))
-						if (!err) {
-							$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', result)
-							const { fileStaticUri = '' } = res
-							imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = fileStaticUri
-						}
-					});
-				},
-			});
-		}
+					$(`#${enumActionEl.TABLE_BODY_EL}`)
+						.find(`tr[lay-filter="${rowFilter}"]`)
+						.find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
 
-		/**
-		 * @description 设置选中样式
-		 * @param event
-		 * @param nodeClass
-		 * @param styleClass
-		 */
-		function setImageSelectedStyle(event, nodeClass, styleClass) {
-			if (!$(event.target).hasClass(nodeClass)) return
-			$(`.${nodeClass}`).each(function () {
-				$(this).removeClass(styleClass)
-			})
-			$(event.target).addClass(styleClass)
-		}
-
-		/**
-		 * @description 切换图库图形
-		 * @param event
-		 */
-		function switchGalleryLib(event) {
-			const key = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
-			const category = sidebarInstance.getVariableImageLib(key)
-			if (key && category) {
-				$(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).html(
-					category.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, ''),
-				)
-			}
-		}
-
-		/**
-		 * @description 图片来源事件监听
-		 */
-		function generatorSelectImgEventListener() {
-			$(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).on('click', event => {
-				setImageSelectedStyle(event, enumActionEl.VAR_IMG_ITEM, enumActionEl.VAR_IMG_ITEM_CHECKED)
-				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = $(event.target).find('img').attr('src')
-			})
-			$(`#${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}`).on('click', event => {
-				setImageSelectedStyle(event, enumActionEl.VAR_IMG_CATEGORY, enumActionEl.VAR_IMG_CATEGORY_CHECKED)
-				imageState[enumConst.IMAGE_GALLERY_CATEGORY] = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
-				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
-				switchGalleryLib(event)
-			})
-		}
-
-		/**
-		 * @description 创建图库图形上传区域
-		 */
-		function createGalleryFileContainer() {
-			const category = sidebarInstance.getAllVariableImageLib()
-			const defaultShow = category[0] || { lib: [] }
-			return `
-				<div class="var-image__container--gallery">
-				    <div id="${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}">
-				     ${category.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_CATEGORY}" ${enumConst.IMAGE_GALLERY_CATEGORY}="${next.key}">${next.label}</div>`, '')}
-				    </div>
-				    <div id="${enumActionEl.VAR_IMG_CONTAINER_CONTENT}">
-						${defaultShow.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, '')}
-				    </div>
-				  </div>
-			`
-		}
-
-		/**
-		 * @description 切换
-		 */
-		function switchUploadImgTypeEventListener() {
-			form.on(`radio(${enumActionEl.SWITCH_IMG_ORIGIN_FILTER})`, event => {
-				const { value } = event
-				imageState = {}
-				if (value === enumImageOriginType.LOCAL) {
-					$(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createLocalFileContainer())
-					imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
-					uploadFileEvent()
-				} else if (value === enumImageOriginType.GALLERY) {
-					$(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createGalleryFileContainer())
-					const defaultChecked = $(`.${enumActionEl.VAR_IMG_CATEGORY}`).eq(0)
-					defaultChecked.addClass(enumActionEl.VAR_IMG_CATEGORY_CHECKED)
-					imageState[enumConst.IMAGE_GALLERY_CATEGORY] = defaultChecked.attr(enumConst.IMAGE_GALLERY_CATEGORY)
-					imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.GALLERY
-					generatorSelectImgEventListener()
-				}
-			})
-		}
-
-		/**
-		 * @description 设置选中图片及绑定参数
-		 * @param rowFilter
-		 */
-		function setCheckedImg(rowFilter) {
-			$(`#${enumActionEl.TABLE_BODY_EL}`)
-				.find(`tr[lay-filter="${rowFilter}"]`)
-				.find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-
-			form.val(rowFilter, {
-				[enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
-				[enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
-				[enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
-			})
-
-		}
-
-		/**
-		 * @description 初始化并设置默认值
-		 */
-		function initSelectImg() {
-			switchUploadImgTypeEventListener()
-			uploadFileEvent()
-			imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
-			form.render()
-		}
-
-		/**
-		 * @description 创建上传图片layer
-		 */
-		function createUploadImgLayer(rowFilter) {
-			const content = `
-				<div class="layui-form">
-					  <div class="layui-form-item">
-					    <div class="var-image__radio">
-					      <input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.LOCAL}" title="本地图片" checked="">
-					      <input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.GALLERY}" title="图库图形">
-					    </div>
-					  </div>
-				</div>
-				<div id="${enumActionEl.IMG_SELECT_CONTAINER_EL}">
-					${createLocalFileContainer()}
-				</div>
-			`
-
-			layer.open({
-				title: '图片',
-				type: 1,
-				content,
-				skin: 'event-layer__override',
-				area: '600px',
-				btn: ["应用", "取消"],
-				shade: ["0.7", "#fafafa"],
-				yes(index) {
-					layer.close(index)
-					setCheckedImg(rowFilter)
-				},
-				but2(index, layero) {
-					imageState = {}
-					layer.close(index)
-				},
-				zIndex: layer.zIndex,
-				async success(layero, index) {
-					layer.setTop(layero);
-					$(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-						'lay-submit': '',
-						'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
+					form.val(rowFilter, {
+						[enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
+						[enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
+						[enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
 					})
-					initSelectImg()
-				},
+				})
 			})
 		}
 
@@ -6068,6 +5825,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 				condition: data,
 				type: event.data.type,
 			}
+			await to(autoSaveGraphInfo())
 			const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
 			if (err) return
 			UseLayUi.successMsg()
@@ -6555,6 +6313,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 				},
 				type: event.data.type,
 			};
+			await to(autoSaveGraphInfo())
 			const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(formModal))
 			if (err) return
 			UseLayUi.successMsg()
@@ -6748,6 +6507,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 					value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
 				},
 			}
+			await to(autoSaveGraphInfo())
 			const [err] = await to(ConfigurationNodeApi.updateNodeEvent(data))
 			if (err) return
 			UseLayUi.successMsg()
@@ -7051,6 +6811,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 				condition: tableData,
 				type: event.data.type,
 			}
+			await to(autoSaveGraphInfo())
 			const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
 			if (err) return
 			UseLayUi.successMsg()
@@ -7360,6 +7121,296 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 		return { component, getValue, componentId, componentFilter, echoDataSource }
 	}
 
+	/**
+	 * @description 生成上传弹出层组件
+	 */
+	function generatorUploadLayerComponent(callback) {
+
+		const enumActionEl = {
+			/**
+			 * @description 图片选中区域节点
+			 */
+			IMG_SELECT_CONTAINER_EL: 'imgSelectContainerEl',
+
+			/**
+			 * @description 切换图片来源控制
+			 */
+			SWITCH_IMG_ORIGIN_FILTER: 'switchImgOriginFilter',
+
+			/**
+			 * @description 图片选中侧边栏节点
+			 */
+			VAR_IMG_CONTAINER_SIDEBAR: 'var-image__container-sidebar',
+
+			/**
+			 * @description 图库图形选择区域
+			 */
+			VAR_IMG_CONTAINER_CONTENT: 'var-image__container-content',
+
+			/**
+			 * @description 图库图形项
+			 */
+			VAR_IMG_ITEM: 'var-image__img-item',
+
+			/**
+			 * @description 图库图形选中控制
+			 */
+			VAR_IMG_ITEM_CHECKED: 'var-image__img-item--checked',
+
+			/**
+			 * @description 图库图形类别节点
+			 */
+			VAR_IMG_CATEGORY: 'var-image__category',
+
+			/**
+			 * @description 图库图形类别选择状态
+			 */
+			VAR_IMG_CATEGORY_CHECKED: 'var-image__category--checked',
+
+			/**
+			 * @description 本地上传图片节点
+			 */
+			UPLOAD_LOCAL_FILE_EL: 'var-image__container--local',
+
+			/**
+			 * @description 本地上传图片状态
+			 */
+			IMAGE_UPLOAD_STATE_EL: 'var-image__upload-state',
+
+			/**
+			 * @description 预览图片状态
+			 */
+			IMAGE_PREVIEW_EL: 'preview__img--preview',
+
+			/**
+			 * @description 本地图片上传删除按钮
+			 */
+			IMAGE_DEL_PREVIEW_EL: 'var-image__del-icon',
+		}
+
+		const enumConst = {
+			/**
+			 * @description 图片来源
+			 */
+			IMAGE_ORIGIN: 'imageOrigin',
+
+			/**
+			 * @description 图库图形类别
+			 */
+			IMAGE_GALLERY_CATEGORY: 'category',
+
+			/**
+			 * @description 图表图形路径
+			 */
+			IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
+		}
+
+		/**
+		 * @description 图片来源枚举类型
+		 */
+		const enumImageOriginType = {
+			LOCAL: 'local',
+			GALLERY: 'gallery',
+		}
+
+		let imageState = {}
+
+		/**
+		 * @description 设置选中样式
+		 * @param event
+		 * @param nodeClass
+		 * @param styleClass
+		 */
+		function setImageSelectedStyle(event, nodeClass, styleClass) {
+			if (!$(event.target).hasClass(nodeClass)) return
+			$(`.${nodeClass}`).each(function () {
+				$(this).removeClass(styleClass)
+			})
+			$(event.target).addClass(styleClass)
+		}
+
+		/**
+		 * @description 切换图库图形
+		 * @param event
+		 */
+		function switchGalleryLib(event) {
+			const key = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
+			const category = sidebarInstance.getVariableImageLib(key)
+			if (key && category) {
+				$(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).html(
+					category.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, ''),
+				)
+			}
+		}
+
+		/**
+		 * @description 图片来源事件监听
+		 */
+		function generatorSelectImgEventListener() {
+			$(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).on('click', event => {
+				setImageSelectedStyle(event, enumActionEl.VAR_IMG_ITEM, enumActionEl.VAR_IMG_ITEM_CHECKED)
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = $(event.target).find('img').attr('src')
+			})
+			$(`#${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}`).on('click', event => {
+				setImageSelectedStyle(event, enumActionEl.VAR_IMG_CATEGORY, enumActionEl.VAR_IMG_CATEGORY_CHECKED)
+				imageState[enumConst.IMAGE_GALLERY_CATEGORY] = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
+				switchGalleryLib(event)
+			})
+		}
+
+
+		/**
+		 * @description 创建本地图片上传区域
+		 */
+		function createLocalFileContainer() {
+			return `
+						<div id="${enumActionEl.UPLOAD_LOCAL_FILE_EL}" class="layui-upload">
+							<div class="preview__img">
+								<img src="" class="layui-upload-img" id="${enumActionEl.IMAGE_PREVIEW_EL}">
+								<div class="var_image__add-icon">+</div>
+								<div class="var-image__del-icon">x</div>
+							</div>
+							<div class="layui-upload-list"></div>
+						</div>
+						<div id="${enumActionEl.IMAGE_UPLOAD_STATE_EL}"></div>
+						<div style="margin-top: 30px;">图片格式支持png、jpg(jpeg)、gif, 大小不能超过5M</div>
+					`
+		}
+
+		/**
+	 * @description 创建图库图形上传区域
+	 */
+		function createGalleryFileContainer() {
+			const category = sidebarInstance.getAllVariableImageLib()
+			const defaultShow = category[0] || { lib: [] }
+			return `
+					<div class="var-image__container--gallery">
+							<div id="${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}">
+							 ${category.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_CATEGORY}" ${enumConst.IMAGE_GALLERY_CATEGORY}="${next.key}">${next.label}</div>`, '')}
+							</div>
+							<div id="${enumActionEl.VAR_IMG_CONTAINER_CONTENT}">
+							${defaultShow.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, '')}
+							</div>
+						</div>
+				`
+		}
+
+		/**
+		 * @description 上传
+		 */
+		function uploadFileEvent() {
+			$(`.${enumActionEl.IMAGE_DEL_PREVIEW_EL}`).on('click', (event) => {
+				event.stopPropagation()
+				$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', '')
+				imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
+			})
+			upload.render({
+				elem: `#${enumActionEl.UPLOAD_LOCAL_FILE_EL}`,
+				auto: false,
+				size: 1024 * 5,
+				url: '/yt/oss/upload',
+				method: 'post',
+				choose(obj) {
+					obj.preview(async function (index, file, result) {
+						const formData = new FormData()
+						formData.set('file', file)
+						const [err, res] = await to(ConfigurationNodeApi.uploadImg(formData))
+						if (!err) {
+							$(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', result)
+							const { fileStaticUri = '' } = res
+							imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = fileStaticUri
+						}
+					});
+				},
+			});
+		}
+
+		/**
+		 * @description 切换
+		 */
+		function switchUploadImgTypeEventListener() {
+			form.on(`radio(${enumActionEl.SWITCH_IMG_ORIGIN_FILTER})`, event => {
+				const { value } = event
+				console.log('event', event)
+				imageState = {}
+				if (value === enumImageOriginType.LOCAL) {
+					$(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createLocalFileContainer())
+					imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
+					uploadFileEvent()
+				} else if (value === enumImageOriginType.GALLERY) {
+					$(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createGalleryFileContainer())
+					const defaultChecked = $(`.${enumActionEl.VAR_IMG_CATEGORY}`).eq(0)
+					defaultChecked.addClass(enumActionEl.VAR_IMG_CATEGORY_CHECKED)
+					imageState[enumConst.IMAGE_GALLERY_CATEGORY] = defaultChecked.attr(enumConst.IMAGE_GALLERY_CATEGORY)
+					imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.GALLERY
+					generatorSelectImgEventListener()
+				}
+			})
+		}
+
+
+		/**
+		 * @description 初始化并设置默认值
+		 */
+		function initSelectImg() {
+			switchUploadImgTypeEventListener()
+			uploadFileEvent()
+			imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
+			form.render()
+		}
+
+		/**
+		 * @description 创建上传图片layer
+		 */
+		function createUploadImgLayer() {
+			const content = `
+			<div class="layui-form">
+					<div class="layui-form-item">
+						<div class="var-image__radio">
+							<input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.LOCAL}" title="本地图片" checked="">
+							<input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.GALLERY}" title="图库图形">
+						</div>
+					</div>
+			</div>
+			<div id="${enumActionEl.IMG_SELECT_CONTAINER_EL}">
+				${createLocalFileContainer()}
+			</div>
+		`
+
+			layer.open({
+				title: '图片',
+				type: 1,
+				content,
+				skin: 'event-layer__override',
+				area: '600px',
+				btn: ["应用", "取消"],
+				shade: ["0.7", "#fafafa"],
+				yes(index) {
+					layer.close(index)
+					if (callback && typeof callback === 'function') callback(imageState)
+				},
+				but2(index, layero) {
+					imageState = {}
+					layer.close(index)
+				},
+				zIndex: layer.zIndex,
+				async success(layero, index) {
+					layer.setTop(layero);
+					$(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
+						'lay-submit': '',
+						'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
+					})
+					initSelectImg()
+				},
+			})
+		}
+
+		createUploadImgLayer()
+
+		return { record: imageState }
+	}
+
 	//  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
 	setTimeout(() => {
 
@@ -12906,22 +12957,3 @@ function RAFSetInterval(callback, time) {
 }
 
 
-function globalInit() {
-	init()
-
-	function init() {
-		initRealTime()
-	}
-
-	function initRealTime() {
-		RAFSetInterval(() => {
-			const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
-			for (const time of allTimeNode) {
-				const date = new Date()
-				time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
-			}
-		}, 1000)
-	}
-}
-
-globalInit()