Commit 4fbc553a5a2613511291c31b0c8b32fdf464fefe

Authored by ww
1 parent 391c03d4

perf: add command field helpmessage

@@ -7066,7 +7066,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -7066,7 +7066,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7066 </div> 7066 </div>
7067 </div> 7067 </div>
7068 <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;"> 7068 <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
7069 - <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令</div> 7069 + <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令 ${createHelpMessage('用户预览模式下,点击参数设置后。输入的变量值将作为"attrPlaceholder"的值,并以JSON格式下发给服务器。', 'command')}</div>
7070 <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div> 7070 <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
7071 <textarea name="${enumConst.COMMAND}" style="display: none;" /> 7071 <textarea name="${enumConst.COMMAND}" style="display: none;" />
7072 </div> 7072 </div>
@@ -8273,8 +8273,16 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -8273,8 +8273,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8273 return { getValue, setValue } 8273 return { getValue, setValue }
8274 } 8274 }
8275 8275
8276 - function createHelpMessage() {  
8277 - return `<span class="thingskit-help-message"><img src="${Proxy_Prefix}/images/thingskit/question.svg" /></span>` 8276 + function createHelpMessage(message, className) {
  8277 + return `
  8278 + <div class="thingskit-help-message ${className}">
  8279 + <img src="${Proxy_Prefix}/images/thingskit/question.svg"/>
  8280 + <div class="thingskit-help-container">
  8281 + <div class="thingskit-help-content">${message}</div>
  8282 + <div class="thingskit-help-arrow"></div>
  8283 + </div>
  8284 + </div>
  8285 + `
8278 } 8286 }
8279 8287
8280 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定 8288 // 异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
@@ -8309,7 +8317,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -8309,7 +8317,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
8309 8317
8310 $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting)) 8318 $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
8311 8319
8312 -  
8313 }); 8320 });
8314 }; 8321 };
8315 8322
@@ -12534,7 +12541,7 @@ class UseLayUi { @@ -12534,7 +12541,7 @@ class UseLayUi {
12534 this.topMsg(msg, options, 5) 12541 this.topMsg(msg, options, 5)
12535 } 12542 }
12536 12543
12537 - static topInfoMsg(msg = '提示', options) { 12544 + static topInfoMsg(msg = '提示', options) {
12538 this.topMsg(msg, options, 0) 12545 this.topMsg(msg, options, 0)
12539 } 12546 }
12540 } 12547 }
@@ -532,3 +532,60 @@ @@ -532,3 +532,60 @@
532 font-size: 14px; 532 font-size: 14px;
533 border-radius: 2px; 533 border-radius: 2px;
534 } 534 }
  535 +
  536 +/* ========== help message ========== */
  537 +.thingskit-help-message {
  538 + cursor: pointer;
  539 + position: relative;
  540 + display: inline-block;
  541 +}
  542 +
  543 +.thingskit-help-message:hover .thingskit-help-container {
  544 + display: block;
  545 +}
  546 +
  547 +.thingskit-help-message:hover .thingskit-help-arrow {
  548 + display: block;
  549 +}
  550 +
  551 +.thingskit-help-container {
  552 + display: none;
  553 + position: absolute;
  554 + top: 0;
  555 + left: 0;
  556 + min-width: 30px;
  557 + min-height: 20px;
  558 + max-width: 200px;
  559 + border-radius: 5px;
  560 + background-color: #1c1e21;
  561 +}
  562 +
  563 +.thingskit-help-arrow {
  564 + /* display: none; */
  565 + position: absolute;
  566 + top: 98%;
  567 + left: 0;
  568 + width: 0;
  569 + height: 0;
  570 + border-top: 7px solid #1c1e21;
  571 + border-left: 7px solid transparent;
  572 + border-right: 7px solid transparent;
  573 + border-bottom: 7px solid transparent;
  574 +}
  575 +
  576 +.thingskit-help-message img {
  577 + width: 16px;
  578 + height: auto;
  579 +}
  580 +
  581 +.thingskit-help-content {
  582 + padding: 5px;
  583 + color: #fff;
  584 + font-size: 14px;
  585 +}
  586 +
  587 +.command .thingskit-help-container {
  588 + width: 150px;
  589 + top: -130px;
  590 + z-index: 99;
  591 +}