桌面右键菜单

skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/layui/lay/modules/contextMenu.js

+layui.define(["jquery"], function(exports) {
+	var jQuery = layui.jquery;
+	(function($) {
+		! function(t, n, e, i) {
+			var o = function(t, n) {
+				this.init(t, n)
+			};
+			o.prototype = {
+				init: function(t, n) {
+					this.ele = t, this.defaults = {
+						menu: [{
+							text: "菜单一",
+							callback: function() {}
+						}, {
+							text: "菜单二",
+							callback: function() {}
+						}],
+						target: function(t) {},
+						width: 100,
+						itemHeight: 28,
+						bgColor: "#fff",
+						color: "#333",
+						fontSize: 14,
+						hoverBgColor: "#f5f5f5"
+					}, this.opts = e.extend(!0, {}, this.defaults, n), this.random = (new Date).getTime() + parseInt(1e3 * Math.random()), this.eventBind()
+				},
+				renderMenu: function() {
+					var t = this,
+						n = "#uiContextMenu_" + this.random;
+					if(!(e(n).length > 0)) {
+						var t = this,
+							i = '<ul class="ul-context-menu" id="uiContextMenu_' + this.random + '">';
+						e.each(this.opts.menu, function(t, n) {
+							if(isNull(n.icon))
+								n.icon = "fa";
+							i += '<li class="';
+							if(!isNull(n.children)){
+								i += 'ui-context-mouse-menu-item';
+							}else{
+								i += 'ui-context-menu-item';
+							}
+							var id = _getRandomString(32);
+							n.id = id;
+							i += '" id="' + id + '"><a href="javascript:void(0);"><i class="' + n.icon + '"></i><span>' + n.text + '</span>';
+							if(!isNull(n.children)){
+								i += '<i class="fa fa-caret-right menu-right"></i>';
+							}
+							i += '</a>';
+							if(!isNull(n.children)){
+								i += '<ul class="child-context-menu" style="left: ' + n.width + '">';
+								e.each(n.children, function(index, item) {
+									var id = _getRandomString(32);
+									item.id = id;
+									i += '<li class="ui-context-menu-item';
+									i += '" id="' + id + '"><a href="javascript:void(0);"><i class="' + item.icon + '"></i><span>' + item.text + '</span>';
+									i += '</a></li>';
+								});
+								i += '</ul>';
+							}
+							i += '</li>';
+						}), 
+						i += "</ul>", 
+						e("body").append(i).find(".ul-context-menu").hide(), 
+						this.initStyle(n);
+						//添加点击事件
+						var menuClick = e(n).find(".ui-context-menu-item");
+						var menu = this.opts.menu;
+						e.each(menuClick, function(index, item) {
+							//遍历menu json串
+							e.each(menu, function(menuIndex, m) {
+								if(!isNull(m.children)){
+									//遍历子菜单
+									e.each(m.children, function(childIndex, child) {
+										if(child.id === $(item).attr("id")){
+											$(item).on('click', function(e){
+												child.callback();
+											});
+											return true;
+										}
+									});
+								}else{
+									if(m.id === $(item).attr("id")){
+										$(item).on('click', function(e){
+											m.callback();
+										});
+										return true;
+									}
+								}
+							});
+						});
+						e(n).on("mouseover", ".ui-context-mouse-menu-item", function(n) {
+							$(".child-context-menu").hide();
+							var child = $(this).find('.child-context-menu');
+							child.css({"left": $(this).css("width")});
+							child.show();
+						});
+					}
+				},
+				initStyle: function(t) {
+					var n = this.opts;
+					e(t).css({
+						width: n.width,
+						backgroundColor: n.bgColor
+					}).find(".ui-context-menu-item a").css({
+						color: n.color,
+						fontSize: n.fontSize,
+						height: n.itemHeight,
+						lineHeight: n.itemHeight + "px"
+					}).hover(function() {
+						e(this).css({
+							backgroundColor: n.hoverBgColor
+						})
+					}, function() {
+						e(this).css({
+							backgroundColor: n.bgColor
+						})
+					});
+					
+					e(t).css({
+						width: n.width,
+						backgroundColor: n.bgColor
+					}).find(".ui-context-mouse-menu-item a").css({
+						color: n.color,
+						fontSize: n.fontSize,
+						height: n.itemHeight,
+						lineHeight: n.itemHeight + "px"
+					}).hover(function() {
+						e(this).css({
+							backgroundColor: n.hoverBgColor
+						})
+					}, function() {
+						e(this).css({
+							backgroundColor: n.bgColor
+						})
+					})
+				},
+				menuItemClick: function(t) {
+					var n = this,
+						e = t.index();
+					t.parent(".ul-context-menu").hide(), 
+					n.opts.menu[e].callback && "function" == typeof n.opts.menu[e].callback && n.opts.menu[e].callback()
+				},
+				setPosition: function(t) {
+					if($(t.target).attr('class') === 'winui-desktop'){
+						$(".child-context-menu").hide();
+						var winHeight = $(window).height();
+						var winWidth = $(window).width();
+						var tHeight = t.clientY;
+						var tWidth = t.clientX;
+						var thisHeight = e("#uiContextMenu_" + this.random).height();
+						var thisWidth = e("#uiContextMenu_" + this.random).width();
+						var left = "";
+						var top = "";
+						if(winHeight - tHeight < thisHeight){
+							top = t.clientY - thisHeight;
+						}else{
+							top = t.clientY + 2;
+						}
+						if(winWidth - tWidth < thisWidth){
+							left = t.clientX - thisHeight;
+						}else{
+							left = t.clientX + 2;
+						}
+						e("#uiContextMenu_" + this.random).css({
+							left: left,
+							top: top
+						}).show();
+					}
+				},
+				eventBind: function() {
+					var t = this;
+					this.ele.on("contextmenu", function(n) {
+						n.preventDefault(), t.renderMenu(), t.setPosition(n), t.opts.target && "function" == typeof t.opts.target && t.opts.target(e(this))
+					}), e(n).on("click", function() {
+						e(".ul-context-menu").hide()
+					})
+				}
+			}, e.fn.contextMenu = function(t) {
+				return new o(this, t), this
+			}
+		}(window, document, jQuery);
+	})(jQuery);
+	exports('contextMenu', null);
+});
\ No newline at end of file

skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/layui/layui.js

@@ -133,6 +133,7 @@ function isNull(str){
 	    validate: 'modules/validate/jquery.validate',//验证
 	    ClipboardJS: 'modules/clipboard.min',//复制
 	    radialin: 'modules/radialindicator/radialindicator',//加载进度条
+	    contextMenu: 'modules/contextMenu',//右键
 	};
 
 	// 记录基础数据
@@ -1096,4 +1097,20 @@ function getFormatDate(){
     return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
 }
 
+/**
+ * 获取长度为len的随机字符串
+ * @param len
+ * @returns {String}
+ */
+function _getRandomString(len) {
+    len = len || 32;
+    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
+    var maxPos = $chars.length;
+    var pwd = '';
+    for (i = 0; i < len; i++) {
+        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return pwd;
+}
+
 

skyeye-promote/skyeye-web/src/main/resources/template/assets/lib/winui/css/winui.css

@@ -6331,6 +6331,180 @@ select option{
 	margin-top: 15px;
 }
 
+.ul-context-menu {
+	list-style: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 9999;
+	padding: 5px 0;
+	min-width: 80px;
+	margin: 0;
+	display: none;
+	font-family: "微软雅黑";
+	font-size: 14px;
+	background-color: #fff;
+	border: 1px solid rgba(0, 0, 0, .15);
+	box-sizing: border-box;
+	border-radius: 4px;
+	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/*父列表 第一类样式*/
+.ul-context-menu .ui-context-menu-item {
+	margin: 0;
+	padding: 0;
+	height: 30px;
+}
+
+.ul-context-menu .ui-context-menu-item a {
+	display: block;
+	padding: 0 10px;
+	color: #333;
+	white-space: nowrap;
+	text-decoration: none;
+}
+
+.ul-context-menu .ui-context-menu-item a:hover {
+	text-decoration: none;
+	color: #262626;
+}
+
+.ul-context-menu .ui-context-menu-item a i{
+	width: 12px;
+    height: 12px;
+}
+
+.ul-context-menu .ui-context-menu-item a .menu-right{
+    float: right;
+    line-height: 30px;
+    width: 12px;
+    height: 12px;
+}
+
+.ul-context-menu .ui-context-menu-item a span{
+	margin-left: 10px;
+}
+
+.ul-context-menu .ui-context-menu-item .icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 8px;
+	vertical-align: sub;
+	border: 0;
+}
+
+/*父列表 第二类样式*/
+.ul-context-menu .ui-context-mouse-menu-item {
+	margin: 0;
+	padding: 0;
+	height: 30px;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item a {
+	display: block;
+	padding: 0 10px;
+	color: #333;
+	white-space: nowrap;
+	text-decoration: none;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item a:hover {
+	text-decoration: none;
+	color: #262626;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item a i{
+	width: 12px;
+    height: 12px;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item a .menu-right{
+    float: right;
+    line-height: 30px;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item a span{
+	margin-left: 10px;
+}
+
+.ul-context-menu .ui-context-mouse-menu-item .icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 8px;
+	vertical-align: sub;
+	border: 0;
+}
+
+/*子列表*/
+.child-context-menu {
+	list-style: none;
+	position: relative;
+	top: -30px;
+	z-index: 9999;
+	padding: 5px 0;
+	min-width: 80px;
+	margin: 0;
+	display: none;
+	font-family: "微软雅黑";
+	font-size: 14px;
+	background-color: #fff;
+	border: 1px solid rgba(0, 0, 0, .15);
+	box-sizing: border-box;
+	border-radius: 4px;
+	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	-o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.child-context-menu .ui-context-menu-item {
+	margin: 0;
+	padding: 0;
+}
+
+.child-context-menu .ui-context-menu-item a {
+	display: block;
+	padding: 0 10px;
+	color: #333;
+	white-space: nowrap;
+	text-decoration: none;
+}
+
+.child-context-menu .ui-context-menu-item a:hover {
+	text-decoration: none;
+	color: #262626;
+}
+
+.child-context-menu .ui-context-menu-item a i{
+	width: 12px;
+    height: 12px;
+}
+
+.child-context-menu .ui-context-menu-item a .menu-right{
+    float: right;
+    line-height: 30px;
+    width: 12px;
+    height: 12px;
+}
+
+.child-context-menu .ui-context-menu-item a span{
+	margin-left: 10px;
+}
+
+.child-context-menu .ui-context-menu-item .icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 8px;
+	vertical-align: sub;
+	border: 0;
+}
+
 /*******************************************自定义样式end********************************************/
 
 

skyeye-promote/skyeye-web/src/main/resources/template/js/index/index.js

@@ -6,11 +6,25 @@
     desktop: 'js/winui.desktop',//桌面加载模块
     start: 'js/winui.start',//左下角开始菜单
     helper: 'js/winui.helper'
-}).define(['window', 'desktop', 'start', 'helper', 'layim', 'radialin'], function (exports) {
+}).define(['window', 'desktop', 'start', 'helper', 'layim', 'radialin', 'contextMenu'], function (exports) {
     var $ = layui.jquery,
     layim = layui.layim;
     var winuiLoad;
     
+    //自动回复
+    var autoReplay = [
+		'您好，我现在有事不在，一会再和您联系。',
+		'你没发错吧？face[微笑] ',
+		'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
+		'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
+		'face[威武] face[威武] face[威武] face[威武] ',
+		'<（@￣︶￣@）>',
+		'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
+		'face[黑线]  你慢慢说，别急……',
+		'(*^__^*) face[嘻嘻] ，是天眼吗？'
+	];
+    
+    //页面加载进度条
     winuiLoad = radialIndicator($('#winui-load'), {
     	barBgColor: '#E3E3E3',
         barColor: '#8A2BE2',
@@ -67,11 +81,15 @@
    				}else{
    					json.bean.winLockBgPicUrl = fileBasePath + json.bean.winLockBgPicUrl;
    				}
+   				//加载win系统内容
    		        initWinConfig(json);
    		        
    		        //加载聊天
    		        initTalk();
    		        
+   		        //加载右键
+   		        initRightMenu();
+   		        
 	   		    //扩展桌面助手工具
 	   		    winui.helper.addTool([{
 	   		         tips: '锁屏',
@@ -105,18 +123,65 @@
     	
     });
     
-    //自动回复
-    var autoReplay = [
-		'您好，我现在有事不在，一会再和您联系。',
-		'你没发错吧？face[微笑] ',
-		'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
-		'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
-		'face[威武] face[威武] face[威武] face[威武] ',
-		'<（@￣︶￣@）>',
-		'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
-		'face[黑线]  你慢慢说，别急……',
-		'(*^__^*) face[嘻嘻] ，是天眼吗？'
-	];
+    function initRightMenu(){
+    	$("body").contextMenu({
+			width: 110, // width
+			itemHeight: 30, // 菜单项height
+			bgColor: "#FFFFFF", // 背景颜色
+			color: "#0A0A0A", // 字体颜色
+			fontSize: 12, // 字体大小
+			hoverBgColor: "#99CC66", // hover背景颜色
+			target: function(ele) { // 当前元素
+			},
+			menu: [{ // 菜单项
+					text: "新建",
+					icon: "fa fa-plus-square",
+					children: [{
+						text: "新建Fill",
+						icon: "fa fa-copy",
+						callback: function() {
+							alert("新建Fill");
+						}
+					}, {
+						text: "新建Logo",
+						icon: "fa fa-copy",
+						callback: function() {
+							alert("新建Logo");
+						}
+					}]
+				}, {
+					text: "复制",
+					icon: "fa fa-copy",
+					callback: function() {
+						alert("复制");
+					}
+				}, {
+					text: "粘贴",
+					icon: "fa fa-paste",
+					children: [{
+						text: "粘贴Fill",
+						icon: "fa fa-copy",
+						callback: function() {
+							alert("粘贴Fill");
+						}
+					}, {
+						text: "粘贴Logo",
+						icon: "fa fa-copy",
+						callback: function() {
+							alert("粘贴Logo");
+						}
+					}]
+				}, {
+					text: "删除",
+					icon: "fa fa-trash-o",
+					callback: function() {
+						alert("删除");
+					}
+				}
+			]
+
+		});
+    }
     
     function initTalk(){
     	layim.config({