bkui-vue 1.0.3-beta.26 → 1.0.3-beta.27

package/lib/message/index.js

@@ -1,10 +1,8 @@
-import "../styles/reset.css";
-import "./message.less";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
 /******/ var __webpack_modules__ = ({
 
 /***/ 7647:
@@ -1022,9 +1020,9 @@ var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
 const external_vue_namespaceObject = x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["render"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.render, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: external "../shared"
-var shared_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var shared_y = x => () => x
-const shared_namespaceObject = shared_x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isElement });
+var external_shared_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_shared_y = x => () => x
+const external_shared_namespaceObject = external_shared_x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.isElement });
 ;// CONCATENATED MODULE: ../../packages/hooks/use-message.ts
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -1115,7 +1113,7 @@ var Message = function Message(constructor, options) {
   (0,external_vue_namespaceObject.render)(vm, container);
   instances[position].push(vm);
   var target;
-  if (vm.props.getContainer && (0,shared_namespaceObject.isElement)(vm.props.getContainer)) {
+  if (vm.props.getContainer && (0,external_shared_namespaceObject.isElement)(vm.props.getContainer)) {
     target = vm.props.getContainer;
   } else {
     target = document.body;
@@ -1189,13 +1187,13 @@ var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); retur
 var external_vue_types_y = x => () => x
 const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
 ;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["useLocale"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.useLocale, ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["useLocale"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.useLocale, ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
 ;// CONCATENATED MODULE: external "../icon"
-var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["AngleDoubleDownLine"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleDoubleDownLine, ["AngleDoubleUpLine"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.AngleDoubleUpLine, ["Assistant"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Assistant, ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["CopyShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.CopyShape, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error, ["FixLine"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.FixLine, ["FixShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.FixShape, ["Info"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Info, ["Success"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Success, ["Warn"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Warn });
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["AngleDoubleDownLine"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleDoubleDownLine, ["AngleDoubleUpLine"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleDoubleUpLine, ["Assistant"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Assistant, ["Close"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Close, ["CopyShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.CopyShape, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Error, ["FixLine"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.FixLine, ["FixShape"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.FixShape, ["Info"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Info, ["Success"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Success, ["Warn"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Warn });
 ;// CONCATENATED MODULE: ../../packages/message/src/messageConstructor.tsx
 
 
@@ -1267,19 +1265,19 @@ var IMessageActionType;
   IMessageActionType["CLOSE"] = "close";
 })(IMessageActionType || (IMessageActionType = {}));
 var messageProps = {
-  id: shared_namespaceObject.PropTypes.string.def(''),
+  id: external_shared_namespaceObject.PropTypes.string.def(''),
   message: (0,external_vue_types_namespaceObject.toType)('IMessage', {}),
   theme: (0,external_vue_types_namespaceObject.toType)('messageTheme', {}).def(MessageThemeEnum.PRIMARY),
-  delay: shared_namespaceObject.PropTypes.number,
-  dismissable: shared_namespaceObject.PropTypes.bool.def(true),
-  offsetY: shared_namespaceObject.PropTypes.number.def(30),
-  spacing: shared_namespaceObject.PropTypes.number.def(10),
-  extCls: shared_namespaceObject.PropTypes.string.def(''),
-  onClose: shared_namespaceObject.PropTypes.func,
-  getContainer: shared_namespaceObject.PropTypes.instanceOf(HTMLElement),
-  width: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.string]),
-  minWidth: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.string]).def(100),
-  maxWidth: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.string]).def('100%'),
+  delay: external_shared_namespaceObject.PropTypes.number,
+  dismissable: external_shared_namespaceObject.PropTypes.bool.def(true),
+  offsetY: external_shared_namespaceObject.PropTypes.number.def(30),
+  spacing: external_shared_namespaceObject.PropTypes.number.def(10),
+  extCls: external_shared_namespaceObject.PropTypes.string.def(''),
+  onClose: external_shared_namespaceObject.PropTypes.func,
+  getContainer: external_shared_namespaceObject.PropTypes.instanceOf(HTMLElement),
+  width: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.number, external_shared_namespaceObject.PropTypes.string]),
+  minWidth: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.number, external_shared_namespaceObject.PropTypes.string]).def(100),
+  maxWidth: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.number, external_shared_namespaceObject.PropTypes.string]).def('100%'),
   actions: (0,external_vue_types_namespaceObject.toType)('IMessageAction', {})
 };
 /* harmony default export */ const messageConstructor = ((0,external_vue_namespaceObject.defineComponent)({
@@ -1291,13 +1289,13 @@ var messageProps = {
     var emit = _ref.emit,
       slots = _ref.slots,
       expose = _ref.expose;
-    var t = (0,config_provider_namespaceObject.useLocale)('message');
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var t = (0,external_config_provider_namespaceObject.useLocale)('message');
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var classNames = (0,external_vue_namespaceObject.computed)(function () {
       return ["".concat(resolveClassName('message')), "".concat(resolveClassName("message-".concat(props.theme))), "".concat(props.extCls)];
     });
-    var zIndex = shared_namespaceObject.bkZIndexManager.getMessageNextIndex();
+    var zIndex = external_shared_namespaceObject.bkZIndexManager.getMessageNextIndex();
     var singleLineWidth = 560;
     var advanceWidth = 800;
     var singleLineDelay = 3000;
@@ -1342,7 +1340,7 @@ var messageProps = {
       };
     });
     var isGetContainer = (0,external_vue_namespaceObject.computed)(function () {
-      return props.getContainer && (0,shared_namespaceObject.isElement)(props.getContainer);
+      return props.getContainer && (0,external_shared_namespaceObject.isElement)(props.getContainer);
     });
     var styles = (0,external_vue_namespaceObject.computed)(function () {
       return Object.assign({
@@ -1517,7 +1515,7 @@ var messageProps = {
       return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, IMessageActionType.ASSISTANT, {
         id: IMessageActionType.ASSISTANT,
         icon: function icon() {
-          return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Assistant, null, null);
+          return (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Assistant, null, null);
         },
         text: function text() {
           return t.value.assistant;
@@ -1528,7 +1526,7 @@ var messageProps = {
       }), IMessageActionType.DETAILS, {
         id: IMessageActionType.DETAILS,
         icon: function icon() {
-          return toolOperation.isDetailShow ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleDoubleUpLine, null, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.AngleDoubleDownLine, null, null);
+          return toolOperation.isDetailShow ? (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleDoubleUpLine, null, null) : (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleDoubleDownLine, null, null);
         },
         text: function text() {
           return t.value.details;
@@ -1539,7 +1537,7 @@ var messageProps = {
       }), IMessageActionType.FIX, {
         id: IMessageActionType.FIX,
         icon: function icon() {
-          return toolOperation.isFix ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.FixShape, null, null) : (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.FixLine, null, null);
+          return toolOperation.isFix ? (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.FixShape, null, null) : (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.FixLine, null, null);
         },
         classList: toolOperation.isFix ? 'fixed' : '',
         onClick: function onClick(e) {
@@ -1549,7 +1547,7 @@ var messageProps = {
         id: IMessageActionType.CLOSE,
         classList: 'normal-color',
         icon: function icon() {
-          return props.dismissable && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
+          return props.dismissable && (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Error, {
             "class": "".concat(resolveClassName('message-close')),
             "onClick": close
           }, null);
@@ -1684,10 +1682,10 @@ var messageProps = {
     var _this2 = this;
     var renderIcon = function renderIcon(theme) {
       var iconMap = {
-        primary: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Info, null, null),
-        warning: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Warn, null, null),
-        success: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Success, null, null),
-        error: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, null, null)
+        primary: (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Info, null, null),
+        warning: (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Warn, null, null),
+        success: (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Success, null, null),
+        error: (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Close, null, null)
       };
       return iconMap[theme !== null && theme !== void 0 ? theme : _this2.theme];
     };
@@ -1724,7 +1722,7 @@ var messageProps = {
         }, [(0,external_vue_namespaceObject.createVNode)("div", {
           "class": "message-copy",
           "ref": "refCopyMsgDiv"
-        }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.CopyShape, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
+        }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.CopyShape, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": "copy-status",
           "ref": "refCopyStatus"
         }, [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -1738,7 +1736,7 @@ var messageProps = {
         "class": "".concat(_this2.resolveClassName('message-content'))
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "".concat(_this2.resolveClassName('message-icon'))
-      }, [renderIcon()]), _this2.message]), _this2.dismissable && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
+      }, [renderIcon()]), _this2.message]), _this2.dismissable && (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Error, {
         "class": "".concat(_this2.resolveClassName('message-close')),
         "onClick": _this2.close
       }, null)]);

package/lib/message/message.css

@@ -1,4 +1,4 @@
-:where(.bk-message) {
+.bk-message {
   position: fixed;
   top: 20px;
   left: 50%;
@@ -14,78 +14,78 @@
   box-shadow: 0px 2px 4px 0px #e1e8f4;
   justify-content: space-between;
 }
-:where(.bk-message) .bk-message-close {
+.bk-message .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
   font-size: 14px;
   color: #c4c6cc;
   cursor: pointer;
 }
-:where(.bk-message) .bk-message-close:hover {
+.bk-message .bk-message-close:hover {
   color: #979ba5;
 }
-:where(.bk-message-icon) {
+.bk-message-icon {
   display: inline-block;
   height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: #3a84ff;
 }
-:where(.bk-message-primary) {
+.bk-message-primary {
   background: #f0f8ff;
   border: 1px solid #e1ecff;
 }
-:where(.bk-message-warning) {
+.bk-message-warning {
   background: #fff4e2;
   border: 1px solid #ffe8c3;
   box-shadow: 0px 2px 4px 0px #ede6db;
 }
-:where(.bk-message-warning) .bk-message-icon {
+.bk-message-warning .bk-message-icon {
   color: #ff9c01;
 }
-:where(.bk-message-success) {
+.bk-message-success {
   background: #f2fff4;
   border: 1px solid #dcffe2;
   box-shadow: 0px 2px 4px 0px #cef0d7;
 }
-:where(.bk-message-success) .bk-message-icon {
+.bk-message-success .bk-message-icon {
   color: #2dcb56;
 }
-:where(.bk-message-error) {
+.bk-message-error {
   background: #ffeded;
   border: 1px solid #ffdddd;
   box-shadow: 0px 2px 4px 0px #f6dada;
 }
-:where(.bk-message-error) .bk-message-icon {
+.bk-message-error .bk-message-icon {
   color: #ea3636;
 }
-:where(.bk-message-fade-enter-active),
-:where(.bk-message-fade-leave-active) {
+.bk-message-fade-enter-active,
+.bk-message-fade-leave-active {
   transition: margin 0.2s linear;
 }
-:where(.bk-message-fade-enter-from),
-:where(.bk-message-fade-leave-to) {
+.bk-message-fade-enter-from,
+.bk-message-fade-leave-to {
   margin-top: -50px;
   opacity: 0;
 }
-:where(.bk-message-content) {
+.bk-message-content {
   display: flex;
   width: 100%;
   word-break: break-all;
 }
-:where(.bk-message-content).multi {
+.bk-message-content.multi {
   flex-direction: column;
   position: relative;
 }
-:where(.bk-message-content).multi .overview {
+.bk-message-content.multi .overview {
   display: flex;
   justify-content: space-between;
   align-items: self-start;
 }
-:where(.bk-message-content).multi .overview .left-content {
+.bk-message-content.multi .overview .left-content {
   display: flex;
 }
-:where(.bk-message-content).multi .overview .left-content .describe {
+.bk-message-content.multi .overview .left-content .describe {
   display: box;
   max-width: 560px;
   max-height: 60px;
@@ -94,64 +94,64 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
-:where(.bk-message-content).multi .overview .tools {
+.bk-message-content.multi .overview .tools {
   display: flex;
   align-items: center;
 }
-:where(.bk-message-content).multi .overview .tools .tool {
+.bk-message-content.multi .overview .tools .tool {
   display: flex;
   padding: 0 5px;
   font-size: 14px;
   cursor: pointer;
   align-items: center;
 }
-:where(.bk-message-content).multi .overview .tools .tool .bk-message-close {
+.bk-message-content.multi .overview .tools .tool .bk-message-close {
   padding-left: 0;
 }
-:where(.bk-message-content).multi .overview .tools .tool .message-action-text {
+.bk-message-content.multi .overview .tools .tool .message-action-text {
   padding-left: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:where(.bk-message-content).multi .overview .tools .tool:not(.fix) span {
+.bk-message-content.multi .overview .tools .tool:not(.fix) span {
   color: #3a84ff;
 }
-:where(.bk-message-content).multi .overview .tools .tool.fix.fixed span {
+.bk-message-content.multi .overview .tools .tool.fix.fixed span {
   color: #3a84ff;
 }
-:where(.bk-message-content).multi .overview .tools .tool.fix span {
+.bk-message-content.multi .overview .tools .tool.fix span {
   color: #979ba5;
 }
-:where(.bk-message-content).multi .overview .tools .tool.fix:hover span {
+.bk-message-content.multi .overview .tools .tool.fix:hover span {
   color: #3a84ff;
 }
-:where(.bk-message-content).multi .overview .tools .tool.close span {
+.bk-message-content.multi .overview .tools .tool.close span {
   color: #c4c6cc;
 }
-:where(.bk-message-content).multi .overview .tools .tool.close span:hover {
+.bk-message-content.multi .overview .tools .tool.close span:hover {
   color: #979ba5;
 }
-:where(.bk-message-content).multi .message-detail {
+.bk-message-content.multi .message-detail {
   position: relative;
   margin-top: 10px;
 }
-:where(.bk-message-content).multi .message-detail .message-tree {
-  display: flex;
+.bk-message-content.multi .message-detail .message-tree {
   max-height: 480px;
   padding: 14px 32px;
   overflow: auto;
   background: #fff;
   border-radius: 2px;
+  display: flex;
   flex-direction: column;
 }
-:where(.bk-message-content).multi .message-detail .message-tree .message-row {
+.bk-message-content.multi .message-detail .message-tree .message-row {
   display: inline-flex;
   font-size: 14px;
   line-height: 34px;
   color: #313238;
 }
-:where(.bk-message-content).multi .message-detail .message-tree .message-row label {
+.bk-message-content.multi .message-detail .message-tree .message-row label {
   display: inline-block;
   width: 94px;
   min-width: 94px;
@@ -162,46 +162,46 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:where(.bk-message-content).multi .message-detail .message-tree .message-row label::after {
+.bk-message-content.multi .message-detail .message-tree .message-row label::after {
   content: ':';
 }
-:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value {
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value {
   padding-left: 4px;
 }
-:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value:hover {
-  cursor: pointer;
+.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;
 }
-:where(.bk-message-content).multi .message-detail .message-copy {
+.bk-message-content.multi .message-detail .message-copy {
   position: absolute;
   top: 20px;
-  top: 0px;
   right: 40px;
+  font-size: 16px;
+  top: 0px;
   right: 0px;
-  display: flex;
+  font-size: 18px;
   width: 24px;
   height: 24px;
-  font-size: 16px;
-  font-size: 18px;
-  color: #9fa3ae;
-  cursor: pointer;
-  background: #f5f7fa;
-  border-radius: 0 2px 0 6px;
+  display: flex;
   align-items: center;
+  border-radius: 0 2px 0 6px;
+  cursor: pointer;
   justify-content: center;
+  background: #F5F7FA;
+  color: #9FA3AE;
 }
-:where(.bk-message-content).multi .message-detail .message-copy:hover {
-  background: #f0f5ff;
+.bk-message-content.multi .message-detail .message-copy:hover {
+  background: #F0F5FF;
 }
-:where(.bk-message-content).multi .message-detail .message-copy:hover span {
+.bk-message-content.multi .message-detail .message-copy:hover span {
   color: #3a84ff;
 }
-:where(.bk-message-content).multi .message-detail .copy-status {
+.bk-message-content.multi .message-detail .copy-status {
   display: none;
   padding-bottom: 4px;
 }
-:where(.bk-message-content).multi .message-detail .copy-status .inner {
+.bk-message-content.multi .message-detail .copy-status .inner {
   position: relative;
   display: flex;
   padding: 6px 8px;
@@ -213,10 +213,10 @@
   box-shadow: 0 2px 6px 0 #0000001a;
   align-items: center;
 }
-:where(.bk-message-content).multi .message-detail .copy-status .inner span {
+.bk-message-content.multi .message-detail .copy-status .inner span {
   margin-right: 4px;
 }
-:where(.bk-message-content).multi .message-detail .copy-status .inner::after {
+.bk-message-content.multi .message-detail .copy-status .inner::after {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -231,13 +231,13 @@
   box-shadow: 5px 3px 6px 0 #0000001a;
   box-sizing: border-box;
 }
-:where(.bk-message-content).multi .message-detail .copy-status.success .inner span {
+.bk-message-content.multi .message-detail .copy-status.success .inner span {
   color: #2dcb9d;
 }
-:where(.bk-message-content).multi .message-detail .copy-status.error .inner span {
+.bk-message-content.multi .message-detail .copy-status.error .inner span {
   color: #ea3636;
 }
-:where(.bk-message-content).multi .message-detail .copy-status.is-show {
+.bk-message-content.multi .message-detail .copy-status.is-show {
   position: absolute;
   top: 0;
   left: 0;
@@ -245,6 +245,6 @@
   white-space: nowrap;
   transform: translate(-50%, -100%);
 }
-:where(.bk-message-content).multi .message-detail .copy-status.is-hidden {
+.bk-message-content.multi .message-detail .copy-status.is-hidden {
   display: none;
 }

package/lib/message/message.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-:where(.@{bk-prefix}-message) {
+.@{bk-prefix}-message {
   position: fixed;
   top: 20px;
   left: 50%;
@@ -29,7 +29,7 @@
   }
 }
 
-:where(.@{bk-prefix}-message-icon) {
+.@{bk-prefix}-message-icon {
   display: inline-block;
   height: 18px;
   margin-right: 10px;
@@ -37,12 +37,12 @@
   color: @primary-color;
 }
 
-:where(.@{bk-prefix}-message-primary) {
+.@{bk-prefix}-message-primary {
   background: @message-primary-bg-color;
   border: 1px solid @message-primary-border-color;
 }
 
-:where(.@{bk-prefix}-message-warning) {
+.@{bk-prefix}-message-warning {
   background: @message-warning-bg-color;
   border: 1px solid @message-warning-border-color;
   box-shadow: 0px 2px 4px 0px @message-warning-shadow-color;
@@ -51,7 +51,7 @@
   }
 }
 
-:where(.@{bk-prefix}-message-success) {
+.@{bk-prefix}-message-success {
   background: @message-success-bg-color;
   border: 1px solid @message-success-border-color;
   box-shadow: 0px 2px 4px 0px @message-success-shadow-color;
@@ -60,7 +60,7 @@
   }
 }
 
-:where(.@{bk-prefix}-message-error) {
+.@{bk-prefix}-message-error {
   background: @message-danger-bg-color;
   border: 1px solid @message-danger-border-color;
   box-shadow: 0px 2px 4px 0px @message-danger-shadow-color;
@@ -69,18 +69,18 @@
   }
 }
 
-:where(.@{bk-prefix}-message-fade-enter-active),
-:where(.@{bk-prefix}-message-fade-leave-active) {
-  transition: margin 0.2s linear;
+.@{bk-prefix}-message-fade-enter-active,
+.@{bk-prefix}-message-fade-leave-active {
+  transition: margin .2s linear;
 }
 
-:where(.@{bk-prefix}-message-fade-enter-from),
-:where(.@{bk-prefix}-message-fade-leave-to) {
+.@{bk-prefix}-message-fade-enter-from,
+.@{bk-prefix}-message-fade-leave-to {
   margin-top: -50px;
   opacity: 0;
 }
 
-:where(.@{bk-prefix}-message-content) {
+.@{bk-prefix}-message-content {
   display: flex;
   width: 100%;
   word-break: break-all;
@@ -172,12 +172,12 @@
       margin-top: 10px;
 
       .message-tree {
-        display: flex;
         max-height: 480px;
         padding: 14px 32px;
         overflow: auto;
         background: #fff;
         border-radius: 2px;
+        display: flex;
         flex-direction: column;
 
         .message-row {
@@ -204,10 +204,10 @@
 
           .copy-value {
             padding-left: 4px;
-
+            
             &:hover {
-              cursor: pointer;
               background: rgba(186, 188, 192, 0.2);
+              cursor: pointer;
               border-radius: 2px;
             }
           }
@@ -217,24 +217,23 @@
       .message-copy {
         position: absolute;
         top: 20px;
-        top: 0px;
         right: 40px;
+        font-size: 16px;
+        top: 0px;
         right: 0px;
-        display: flex;
+        font-size: 18px;
         width: 24px;
         height: 24px;
-        font-size: 16px;
-        font-size: 18px;
-        color: #9fa3ae;
-        cursor: pointer;
-        background: #f5f7fa;
-        border-radius: 0 2px 0 6px;
+        display: flex;
         align-items: center;
+        border-radius: 0 2px 0 6px;
+        cursor: pointer;
         justify-content: center;
+        background: #F5F7FA;
+        color: #9FA3AE;
 
         &:hover {
-          background: #f0f5ff;
-
+          background: #F0F5FF;
           span {
             color: #3a84ff;
           }