Merge branch 'ww' into 'main'

perf: add command field helpmessage

See merge request huang/thingskit-drawio!37

@@ -7066,7 +7066,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         </div>
                         </div>
                     </div>
                     </div>
                     <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
                     <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
-                        <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令</div>
+                        <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令 ${createHelpMessage('用户预览模式下，点击参数设置后。输入的变量值将作为"attrPlaceholder"的值,并以JSON格式下发给服务器。', 'command')}</div>
                         <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
                         <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
                         <textarea name="${enumConst.COMMAND}" style="display: none;" />
                         <textarea name="${enumConst.COMMAND}" style="display: none;" />
                     </div>
                     </div>
@@ -8273,8 +8273,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         return { getValue, setValue }
         return { getValue, setValue }
     }
     }
 
 
-    function createHelpMessage() {
-        return `<span class="thingskit-help-message"><img src="${Proxy_Prefix}/images/thingskit/question.svg" /></span>`
+    function createHelpMessage(message, className) {
+        return `
+        <div class="thingskit-help-message ${className}">
+            <img src="${Proxy_Prefix}/images/thingskit/question.svg"/>
+            <div class="thingskit-help-container">
+            <div class="thingskit-help-content">${message}</div>
+            <div class="thingskit-help-arrow"></div>
+            </div>
+        </div>
+        `
     }
     }
 
 
     //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
     //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
@@ -8309,7 +8317,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 
 
         $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
         $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
 
 
-
     });
     });
 };
 };
 
 
@@ -12534,7 +12541,7 @@ class UseLayUi {
         this.topMsg(msg, options, 5)
         this.topMsg(msg, options, 5)
     }
     }
 
 
-    static topInfoMsg(msg = '提示', options) { 
+    static topInfoMsg(msg = '提示', options) {
         this.topMsg(msg, options, 0)
         this.topMsg(msg, options, 0)
     }
     }
 }
 }

@@ -532,3 +532,60 @@
   font-size: 14px;
   font-size: 14px;
   border-radius: 2px;
   border-radius: 2px;
 }
 }
+
+/* ========== help message ========== */
+.thingskit-help-message {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+}
+
+.thingskit-help-message:hover .thingskit-help-container {
+  display: block;
+}
+
+.thingskit-help-message:hover .thingskit-help-arrow {
+  display: block;
+}
+
+.thingskit-help-container {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 30px;
+  min-height: 20px;
+  max-width: 200px;
+  border-radius: 5px;
+  background-color: #1c1e21;
+}
+
+.thingskit-help-arrow {
+  /* display: none; */
+  position: absolute;
+  top: 98%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-top: 7px solid #1c1e21;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+}
+
+.thingskit-help-message img {
+  width: 16px;
+  height: auto;
+}
+
+.thingskit-help-content {
+  padding: 5px;
+  color: #fff;
+  font-size: 14px;
+}
+
+.command .thingskit-help-container {
+  width: 150px;
+  top: -130px;
+  z-index: 99;
+}