bk-magic-vue 2.5.8-beta.6 → 2.5.8-beta.7

package/dist/bk-magic-vue.css

@@ -2957,6 +2957,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .icon-data-line:before{
 	content:"\e20b";
 }
+.icon-arrow-up:before{
+	content:"\e213";
+}
+.icon-arrow-down:before{
+	content:"\e214";
+}
 .icon-qiehuan:before{
 	content:"\e20c";
 }
@@ -2975,6 +2981,15 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .icon-fix-shape:before{
 	content:"\e212";
 }
+.icon-arrow-left:before{
+	content:"\e215";
+}
+.icon-arrow-right:before{
+	content:"\e216";
+}
+.icon-assistant:before{
+	content:"\e217";
+}
 .f10{
         font-size:10px!important;
     }
@@ -7217,6 +7232,14 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .bk-message-content.multi .message-detail .message-tree .message-row label::after{
                 content:':';
               }
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value{
+              padding:0px 4px
+            }
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover{
+                background:rgba(186, 188, 192, 0.2);
+                cursor:pointer;
+                border-radius:2px;
+              }
 .bk-message-content.multi .message-detail .message-copy{
           position:absolute;
           top:20px;
@@ -7227,68 +7250,67 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
 .bk-message-content.multi .message-detail .message-copy:hover span{
               color:#3a84ff;
             }
-.bk-message-content.multi .message-detail .message-copy .copy-status{
-            display:none;
-            padding-bottom:4px;
+.bk-message-content.multi .message-detail .copy-status{
+          display:none;
+          padding-bottom:4px;
+        }
+.bk-message-content.multi .message-detail .copy-status .inner{
+            position:relative;
+            display:-webkit-box;
+            display:-ms-flexbox;
+            display:flex;
+            padding:6px 8px;
+            font-size:12px;
+            line-height:20px;
+            color:#63656e;
+            background:#fff;
+            border:1px solid #dcdee5;
+            -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
+                    box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
+            -webkit-box-align:center;
+                -ms-flex-align:center;
+                    align-items:center;
           }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner{
-              position:relative;
-              display:-webkit-box;
-              display:-ms-flexbox;
-              display:flex;
-              padding:6px 8px;
-              font-size:12px;
-              line-height:20px;
-              color:#63656e;
+.bk-message-content.multi .message-detail .copy-status .inner span{
+              margin-right:4px;
+            }
+.bk-message-content.multi .message-detail .copy-status .inner::after{
+              position:absolute;
+              bottom:0;
+              left:50%;
+              width:8px;
+              height:8px;
               background:#fff;
-              border:1px solid #dcdee5;
-              -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
-                      box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
-              -webkit-box-align:center;
-                  -ms-flex-align:center;
-                      align-items:center;
-            }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner span{
-                margin-right:4px;
+              border-color:#dcdee5;
+              border-style:solid;
+              border-width:0px 1px 1px 0px;
+              content:'';
+              -webkit-transform:translate(0, 4px) rotate(45deg);
+                      transform:translate(0, 4px) rotate(45deg);
+              -webkit-box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
+                      box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
+              -webkit-box-sizing:border-box;
+                      box-sizing:border-box;
+            }
+.bk-message-content.multi .message-detail .copy-status.success .inner span{
+                color:#2dcb9d;
               }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after{
-                position:absolute;
-                bottom:0;
-                left:50%;
-                width:8px;
-                height:8px;
-                background:#fff;
-                border-color:#dcdee5;
-                border-style:solid;
-                border-width:0px 1px 1px 0px;
-                content:'';
-                -webkit-transform:translate(0, 4px) rotate(45deg);
-                        transform:translate(0, 4px) rotate(45deg);
-                -webkit-box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
-                        box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
-                -webkit-box-sizing:border-box;
-                        box-sizing:border-box;
+.bk-message-content.multi .message-detail .copy-status.error .inner span{
+                color:#ea3636;
               }
-.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span{
-                  color:#2dcb9d;
-                }
-.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span{
-                  color:#ea3636;
-                }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-show{
-              position:absolute;
-              top:0;
-              left:0;
-              display:-webkit-inline-box;
-              display:-ms-inline-flexbox;
-              display:inline-flex;
-              white-space:nowrap;
-              -webkit-transform:translate(-50%, -100%);
-                      transform:translate(-50%, -100%);
-            }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden{
-              display:none;
-            }
+.bk-message-content.multi .message-detail .copy-status.is-show{
+            position:absolute;
+            top:0;
+            left:0;
+            display:-webkit-inline-box;
+            display:-ms-inline-flexbox;
+            display:inline-flex;
+            white-space:nowrap;
+          }
+.bk-message-content.multi .message-detail .copy-status.is-hidden{
+            top:-9999;
+            left:-9999;
+          }
 .bk-notify{
     display:-webkit-box;
     display:-ms-flexbox;

package/dist/bk-magic-vue.js

@@ -30942,6 +30942,12 @@
         copyStatusTimer: null
       };
     },
+    mounted: function mounted() {
+      this.addMouseKeyEvent();
+    },
+    beforeDestroy: function beforeDestroy() {
+      this.addMouseKeyEvent(true);
+    },
     computed: {
       defActionList: function defActionList() {
         var _this = this,
@@ -30950,7 +30956,7 @@
           id: IMessageActionType.ASSISTANT,
           icon: function icon(h) {
             return h('span', {
-              class: 'bk-icon icon-weixin-pro'
+              class: 'bk-icon icon-assistant'
             });
           },
           text: function text() {
@@ -31045,6 +31051,19 @@
       }
     },
     methods: {
+      addMouseKeyEvent: function addMouseKeyEvent() {
+        var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        if (remove) {
+          document.removeEventListener('keydown', this.handleMouseKeyEvent);
+          return;
+        }
+        document.addEventListener('keydown', this.handleMouseKeyEvent);
+      },
+      handleMouseKeyEvent: function handleMouseKeyEvent(e) {
+        if (e.altKey && e.keyCode === 80) {
+          this.fixMesage(e);
+        }
+      },
       handleCloseClick: function handleCloseClick() {
         this.$emit('close');
       },
@@ -31057,15 +31076,24 @@
         var _this3 = this;
         this.toolOperation.isDetailShow = isShow !== undefined ? isShow : !this.toolOperation.isDetailShow;
         this.fixMesage(e, this.toolOperation.isDetailShow);
-        if (this.toolOperation.isDetailShow && _typeof(this.message) === 'object' && (this.message.type === MessageContentType.JSON || !this.message.type)) {
-          var targetJson = this.parseJson(this.message.details);
-          var formatter = new jsonFormatter_umd(targetJson);
-          setTimeout(function () {
-            if (_this3.$refs.refJsonContent) {
-              _this3.$refs.refJsonContent.innerHTML = '';
-              _this3.$refs.refJsonContent.append(formatter.render());
-            }
-          });
+        if (this.toolOperation.isDetailShow && _typeof(this.message) === 'object' && !this.message.hasOwnProperty('componentOptions')) {
+          if (this.message.type === MessageContentType.JSON || !this.message.type) {
+            var targetJson = this.parseJson(this.message.details);
+            var formatter = new jsonFormatter_umd(targetJson);
+            setTimeout(function () {
+              if (_this3.$refs.refJsonContent) {
+                _this3.$refs.refJsonContent.innerHTML = '';
+                _this3.$refs.refJsonContent.append(formatter.render());
+              }
+              _this3.copyMessage();
+            });
+          }
+          if (this.message.type === MessageContentType.KEY_VALUE) {
+            setTimeout(function () {
+              _this3.copyMessage();
+              _this3.setCopyValueItems();
+            });
+          }
         }
       },
       fixMesage: function fixMesage(e, isFix) {
@@ -31083,49 +31111,82 @@
         }
         return targetJson;
       },
-      copyMessage: function copyMessage() {
-        var _this4 = this;
-        if (this.isInstallClipboardJS) {
-          return;
-        }
-        var copyInstance = new ClipboardJS(this.$refs.refCopyMsgDiv, {
-          text: function text() {
-            return _this4.message.details;
+      setCopyValueItems: function setCopyValueItems() {
+        var copyInstance = new ClipboardJS(this.$refs.refJsonContent.querySelectorAll('span.copy-value'), {
+          text: function text(trigger) {
+            return trigger.innerHTML;
           }
         });
+        this.registerCopyCallback(copyInstance);
+      },
+      registerCopyCallback: function registerCopyCallback(copyInstance, complete) {
+        var _this4 = this;
         ['success', 'error'].forEach(function (theme) {
-          copyInstance.on(theme, function () {
+          copyInstance.on(theme, function (e) {
+            console.log('registerCopyCallback theme', theme);
             var target = _this4.$refs.refCopyStatus;
             _this4.copyStatus = theme;
-            if (target) {
-              var _target$classList, _target$classList2;
-              (_target$classList = target.classList).remove.apply(_target$classList, ['success', 'error', 'is-hidden']);
-              (_target$classList2 = target.classList).add.apply(_target$classList2, [theme, 'is-show']);
-              _this4.copyStatusTimer && clearTimeout(_this4.copyStatusTimer);
-              _this4.copyStatusTimer = setTimeout(function () {
-                var _target$classList3, _target$classList4;
-                (_target$classList3 = target.classList).remove.apply(_target$classList3, ['is-show']);
-                (_target$classList4 = target.classList).add.apply(_target$classList4, ['is-hidden']);
-              }, 2000);
-            }
-          });
-          _this4.isInstallClipboardJS = true;
-          setTimeout(function () {
-            _this4.$refs.refCopyMsgDiv.click();
+            _this4.$nextTick(function () {
+              if (target) {
+                var _target$classList, _target$classList2;
+                var _e$trigger = e.trigger,
+                  offsetLeft = _e$trigger.offsetLeft,
+                  offsetWidth = _e$trigger.offsetWidth,
+                  offsetTop = _e$trigger.offsetTop;
+                (_target$classList = target.classList).remove.apply(_target$classList, ['success', 'error', 'is-hidden']);
+                (_target$classList2 = target.classList).add.apply(_target$classList2, [theme, 'is-show']);
+                var msgTree = e.trigger.closest('.message-tree');
+                var msgTreeScrollTop = msgTree ? msgTree.scrollTop : 0;
+                var transX = offsetLeft + offsetWidth / 2 - 41;
+                var transY = offsetTop - msgTreeScrollTop - 40;
+                target.style.setProperty('transform', "translate(".concat(transX, "px, ").concat(transY, "px"));
+                _this4.copyStatusTimer && clearTimeout(_this4.copyStatusTimer);
+                _this4.copyStatusTimer = setTimeout(function () {
+                  var _target$classList3, _target$classList4;
+                  (_target$classList3 = target.classList).remove.apply(_target$classList3, ['is-show']);
+                  (_target$classList4 = target.classList).add.apply(_target$classList4, ['is-hidden']);
+                }, 2000);
+              }
+              if (typeof complete === 'function') {
+                complete();
+              }
+            });
           });
         });
+      },
+      parseToString: function parseToString(value) {
+        var targetStr = value;
+        if (_typeof(value) === 'object') {
+          try {
+            targetStr = stringify$1(value);
+          } catch (e) {
+            console.error("JSON.stringify Error: ".concat(e));
+          }
+        }
+        return targetStr;
+      },
+      copyMessage: function copyMessage() {
+        var _this5 = this;
+        var copyInstance = new ClipboardJS(this.$refs.refCopyMsgDiv, {
+          text: function text() {
+            return _this5.parseToString(_this5.message.details);
+          }
+        });
+        this.registerCopyCallback(copyInstance);
       }
     },
     render: function render(h) {
-      var _this5 = this;
+      var _this6 = this;
       var renderMsgDetail = function renderMsgDetail(msg) {
         if (msg.type === MessageContentType.KEY_VALUE) {
-          var target = _this5.parseJson(msg.details || {});
+          var target = _this6.parseJson(msg.details || {});
           var keys = keys$1(target);
           return keys.map(function (key) {
             return h('div', {
               class: 'message-row'
-            }, [h('label', key), target[key]]);
+            }, [h('label', key), h('span', {
+              class: 'copy-value'
+            }, target[key])]);
           });
         }
         return null;
@@ -31134,7 +31195,7 @@
         var renderIcon = function renderIcon(_ref2) {
           var icon = _ref2.icon;
           if (typeof icon === 'function') {
-            return apply$1(icon, _this5, [h]);
+            return apply$1(icon, _this6, [h]);
           }
           return h('span', {
             class: icon
@@ -31144,7 +31205,7 @@
           var text = _ref3.text;
           var content;
           if (typeof text === 'function') {
-            content = apply$1(text, _this5, [h]);
+            content = apply$1(text, _this6, [h]);
           }
           if (content === undefined) {
             return;
@@ -31161,16 +31222,16 @@
             return;
           }
           if (typeof action.onClick === 'function') {
-            apply$1(action.onClick, _this5, [e, action]);
+            apply$1(action.onClick, _this6, [e, action]);
           }
         };
         var renderActionList = function renderActionList() {
-          return _this5.actionList.map(function (action) {
+          return _this6.actionList.map(function (action) {
             if (action.disabled) {
               return null;
             }
             if (typeof action.render === 'function') {
-              return apply$1(action.render, _this5, []);
+              return apply$1(action.render, _this6, []);
             }
             var classList = isArray$1(action.classList) ? action.classList.join(' ') : action.classList;
             return h('div', {
@@ -31207,20 +31268,17 @@
         class: 'message-detail'
       }, [h('div', {
         class: 'message-copy',
-        ref: 'refCopyMsgDiv',
-        on: {
-          click: this.copyMessage
-        }
+        ref: 'refCopyMsgDiv'
       }, [h('span', {
         class: 'bk-icon icon-copy-shape'
-      }), h('div', {
+      })]), h('div', {
         class: ['copy-status', this.copyStatus],
         ref: 'refCopyStatus'
       }, [h('div', {
         class: 'inner'
       }, [h('span', {
         class: [iconMap[this.copyStatus], this.copyStatus]
-      }), this.copyStatus === 'success' ? this.t('bk.message.copySuccess') : this.t('bk.message.copyFailed')])])]), h('div', {
+      }), this.copyStatus === 'success' ? this.t('bk.message.copySuccess') : this.t('bk.message.copyFailed')])]), h('div', {
         class: 'message-tree',
         ref: 'refJsonContent'
       }, [renderMsgDetail(this.message)])]) : null]);