Commit 4fbc553a5a2613511291c31b0c8b32fdf464fefe
1 parent
391c03d4
perf: add command field helpmessage
Showing
2 changed files
with
69 additions
and
5 deletions
@@ -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 | +} |