From 2abd7c82d4be8585fa6554c328a1fdf9c950df07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E8=B5=B5=E5=90=8C=E5=AD=A6?= Date: Wed, 16 Oct 2024 09:39:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=B8=A4=E4=B8=AA=E9=9D=99?= =?UTF-8?q?=E6=80=81=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/message.min.css | 1 + static/js/message.min.js | 1 + 2 files changed, 2 insertions(+) create mode 100644 static/css/message.min.css create mode 100644 static/js/message.min.js diff --git a/static/css/message.min.css b/static/css/message.min.css new file mode 100644 index 00000000..a0a2e48b --- /dev/null +++ b/static/css/message.min.css @@ -0,0 +1 @@ +.qmsg.qmsg-wrapper{position:fixed;top:20px;left:0;z-index:1010;width:100%;pointer-events:none;color:rgba(0,0,0,0.55);font-size:13px;font-variant:tabular-nums;font-feature-settings:"tnum"}.qmsg .qmsg-item{padding:8px;text-align:center;animation-duration:.3s}.qmsg .qmsg-item .qmsg-content{text-align:left;position:relative;display:inline-block;padding:10px 12px;background:#fff;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.15);pointer-events:all;max-width:80%;min-width:80px}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-]{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon{display:inline-block;height:16px}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child{margin-right:8px}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close{cursor:pointer;color:rgba(0,0,0,0.45);transition:color .3s;margin-left:6px}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover>svg path{stroke:#555}.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-count{display:inline-block;position:absolute;left:-8px;top:-8px;color:#fff;font-size:12px;text-align:center;height:16px;line-height:16px;border-radius:3px;min-width:16px;animation-duration:.3s}.qmsg .qmsg-item .qmsg-content-info{color:#909399}.qmsg .qmsg-item .qmsg-content-info .qmsg-count{background-color:#909399}.qmsg .qmsg-item .qmsg-content-warning{color:#e6a23c}.qmsg .qmsg-item .qmsg-content-warning .qmsg-count{background-color:#e6a23c}.qmsg .qmsg-item .qmsg-content-error{color:#f56c6c}.qmsg .qmsg-item .qmsg-content-error .qmsg-count{background-color:#f56c6c}.qmsg .qmsg-item .qmsg-content-success{color:#67c23a}.qmsg .qmsg-item .qmsg-content-success .qmsg-count{background-color:#67c23a}.qmsg .qmsg-item .qmsg-content-loading{color:#409eff}.qmsg .qmsg-item .qmsg-content-loading .qmsg-count{background-color:#409eff}.qmsg .animate-turn{animation:MessageTurn 1s linear infinite}@keyframes MessageTurn{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}@keyframes MessageMoveIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes MessageShake{0%,100%{transform:translateX(0px);opacity:1}25%,75%{transform:translateX(-4px);opacity:.75}50%{transform:translateX(4px);opacity:.25}} \ No newline at end of file diff --git a/static/js/message.min.js b/static/js/message.min.js new file mode 100644 index 00000000..1d7bd3ae --- /dev/null +++ b/static/js/message.min.js @@ -0,0 +1 @@ +!function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b:"function"==typeof define&&define.amd?define([],function(){return b(a)}):a.Qmsg=b(a)}(this,function(a){"use strict";function h(){var b,a=c;for(b=0;b=0)&&parseInt(g)<=Math.NEGATIVE_INFINITY?parseInt(g):e.timeout,b.timeout=g,b.settings.timeout=g,b.timer=null,i=document.createElement("div"),k=f[b.settings.type||"info"],l=h("content-"+b.settings.type||"info"),l+=b.settings.showClose?" "+h("content-with-close"):"",m=b.settings.content||"",o=f["close"],p=b.settings.showClose?''+o+"":"",q=document.createElement("span"),b.settings.html?q.innerHTML=m:q.innerText=m,i.innerHTML='
'+k+""+q.outerHTML+p+"
",i.classList.add(h("item")),i.style.textAlign=b.settings.position,r=document.querySelector("."+c),r||(r=document.createElement("div"),r.classList.add(c),r.classList.add(h("wrapper")),r.classList.add(h("is-initialized")),document.body.appendChild(r)),r.appendChild(i),b.$wrapper=r,b.$elem=i,j(b,"opening"),b.settings.showClose&&i.querySelector(".qmsg-icon-close").addEventListener("click",function(){b.close()}.bind(i)),i.addEventListener("animationend",function(a){var b=a.target,c=a.animationName;c===d["closing"]&&(clearInterval(this.timer),this.destroy()),b.style.animationName=""}.bind(b)),b.settings.autoClose&&(s=10,b.timer=setInterval(function(){this.timeout-=s,this.timeout<=0&&(clearInterval(this.timer),this.close())}.bind(b),s),b.$elem.addEventListener("mouseover",function(){clearInterval(this.timer)}.bind(b)),b.$elem.addEventListener("mouseout",function(){"closing"!==this.state&&(this.timer=setInterval(function(){this.timeout-=s,this.timeout<=0&&(clearInterval(this.timer),this.close())}.bind(b),s))}.bind(b)))}function j(a,b){b&&d[b]&&(a.state=b,a.$elem.style.animationName=d[b])}function k(a){var b=h("count"),c=a.$elem.querySelector('[class^="qmsg-content-"]'),d=c.querySelector("."+b);d||(d=document.createElement("span"),d.classList.add(b),c.appendChild(d)),d.innerHTML=a.count,d.style.animationName="",d.style.animationName="MessageShake",a.timeout=a.settings.timeout||e.timeout}function l(a,b){var c=Object.assign({},e);return 0===arguments.length?c:a instanceof Object?Object.assign(c,a):(c.content=a.toString(),b instanceof Object?Object.assign(c,b):c)}function m(a){var b,c,d,e,f,g,h,j,l,m;a=a||{},b=JSON.stringify(a),c=-1;for(e in this.oMsgs)if(f=this.oMsgs[e],f.config===b){c=e,d=f.inst;break}if(0>c){if(this.instanceCount++,g={},g.id=this.instanceCount,g.config=b,d=new i(a),d.id=this.instanceCount,d.count="",g.inst=d,this.oMsgs[this.instanceCount]=g,h=this.oMsgs.length,j=this.maxNums,h>j)for(l=0,m=this.oMsgs,l;h-j>l;l++)m[l]&&m[l].inst.settings.autoClose&&m[l].inst.close()}else d.count=d.count?d.count>=99?d.count:d.count+1:2,k(d);return d.$elem.setAttribute("data-count",d.count),d}var b,c,d,e,f,g,n;return"function"!=typeof Object.assign&&(Object.assign=function(a){var b,c,d;if(null==a)throw new TypeError("Cannot convert undefined or null to object");for(a=Object(a),b=1;b',warning:'',error:'',success:'',loading:'',close:''},g=function(){var a=document.createElement("div").style;return void 0!==a.animationName||void 0!==a.WebkitAnimationName||void 0!==a.MozAnimationName||void 0!==a.msAnimationName||void 0!==a.OAnimationName}(),i.prototype.destroy=function(){this.$elem.parentNode&&this.$elem.parentNode.removeChild(this.$elem),clearInterval(this.timer),n.remove(this.id)},i.prototype.close=function(){j(this,"closing"),g?n.remove(this.id):this.destroy();var a=this.settings.onClose;a&&a instanceof Function&&a.call(this)},n={version:"0.0.1",instanceCount:0,oMsgs:[],maxNums:e.maxNums||5,config:function(a){e=a&&a instanceof Object?Object.assign(e,a):e,this.maxNums=e.maxNums&&e.maxNums>0?parseInt(e.maxNums):3},info:function(a,b){var c=l(a,b);return c.type="info",m.call(this,c)},warning:function(a,b){var c=l(a,b);return c.type="warning",m.call(this,c)},success:function(a,b){var c=l(a,b);return c.type="success",m.call(this,c)},error:function(a,b){var c=l(a,b);return c.type="error",m.call(this,c)},loading:function(a,b){var c=l(a,b);return c.type="loading",c.autoClose=!1,m.call(this,c)},remove:function(a){this.oMsgs[a]&&delete this.oMsgs[a]},closeAll:function(){for(var a in this.oMsgs)this.oMsgs[a]&&this.oMsgs[a].inst.close()}}}); \ No newline at end of file