update

packages/qjkankan-editor/src/assets/style/component.less

@@ -1,16 +1,16 @@
-@color:#0076F6;
-@hoverclr:#1983F6;
-@activeclr:#0069DC;
+@color: #0076f6;
+@hoverclr: #1983f6;
+@activeclr: #0069dc;
 
-@cancelcolor:#EBEDF0;
-@cancelhoverclr:#EBEDF0;
-@cancelactiveclr:#D3D4D7;
+@cancelcolor: #ebedf0;
+@cancelhoverclr: #ebedf0;
+@cancelactiveclr: #d3d4d7;
 
-@deepcancelcolor:#313131;
-@deepcancelhoverclr:#3d3d3d;
-@deepcancelactiveclr:#3d3d3d;
+@deepcancelcolor: #313131;
+@deepcancelhoverclr: #3d3d3d;
+@deepcancelactiveclr: #3d3d3d;
 
-@fontcolor:#323233;
+@fontcolor: #323233;
 
 ::-webkit-scrollbar {
   width: 6px;
@@ -19,7 +19,7 @@
 
 ::-webkit-scrollbar-thumb {
   border-radius: 3px;
-  background: #DEDEDE;
+  background: #dedede;
   &:hover {
     background: #999;
   }
@@ -54,7 +54,6 @@ textarea:-ms-input-placeholder {
   font-weight: normal !important;
 }
 
-
 .disable {
   opacity: 0.5;
   pointer-events: none !important;
@@ -65,14 +64,15 @@ textarea:-ms-input-placeholder {
 }
 
 .hover-tips:hover {
-  color: #0076F6 !important;
+  color: #0076f6 !important;
 }
 
 .hover-tips-warn:hover {
-  color: #FA5555 !important;
+  color: #fa5555 !important;
 }
 
-.hover-tips, .hover-tips-warn {
+.hover-tips,
+.hover-tips-warn {
   position: relative;
   font-size: 18px;
 
@@ -84,9 +84,9 @@ textarea:-ms-input-placeholder {
 
   // tip的方框
   > div {
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-    border: 1px solid #EBEDF0;
+    border: 1px solid #ebedf0;
     cursor: default;
     display: none;
     z-index: 10000;
@@ -122,9 +122,11 @@ textarea:-ms-input-placeholder {
       color: #323233;
     }
   }
+  &.hover-bottom {
+  }
 }
 
-.shenglve{
+.shenglve {
   display: inline-block;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -132,16 +134,17 @@ textarea:-ms-input-placeholder {
   max-width: 100%;
 }
 
-.nodata{
+.nodata {
   width: 100%;
   min-height: 40%;
   text-align: center;
   margin: 80px auto;
   font-size: 14px;
-  >img{
+  > img {
     max-width: 100px;
   }
-  >div,>span{
+  > div,
+  > span {
     display: block;
     font-weight: 400;
     margin-top: 10px;
@@ -179,7 +182,7 @@ textarea:-ms-input-placeholder {
         }
       }
 
-      &:first-of-type{
+      &:first-of-type {
         margin-left: 0;
       }
 
@@ -213,13 +216,13 @@ textarea:-ms-input-placeholder {
             min-width: 98px;
             &:hover {
               color: @color;
-              
+
               background: #252828;
             }
           }
         }
       }
-      &.li-add{
+      &.li-add {
         background-color: @color;
         width: 30px;
         min-width: unset;
@@ -227,34 +230,32 @@ textarea:-ms-input-placeholder {
         height: 30px;
         color: #fff;
         padding: 0;
-        >i{
+        > i {
           position: absolute;
           top: 50%;
           left: 50%;
-          transform: translate(-50%,-50%);
+          transform: translate(-50%, -50%);
           font-size: 26px;
         }
       }
     }
-    
+
     .active {
       color: rgba(255, 255, 255, 0.88);
       background: rgba(255, 255, 255, 0.16);
-
     }
   }
 }
 
-.w-menu{
+.w-menu {
   > ul {
     > li {
       color: #909090;
-      background: #F7F7F7;
+      background: #f7f7f7;
     }
     .active {
       color: #202020;
-      background: #EBEBEB;
-
+      background: #ebebeb;
     }
   }
 }
@@ -327,7 +328,7 @@ textarea:-ms-input-placeholder {
           transform: translate(-50%, -50%);
         }
       }
-      
+
       .oper {
         top: auto;
         left: auto;
@@ -567,49 +568,49 @@ textarea:-ms-input-placeholder {
   color: @activeclr;
 
   &.submit {
-    color: #fff!important;
+    color: #fff !important;
     background-color: @color;
-    &:hover{
+    &:hover {
       background-color: @hoverclr!important;
-      border-color:  @hoverclr!important;
-      color: #fff!important;
+      border-color: @hoverclr!important;
+      color: #fff !important;
     }
-    &:active{
+    &:active {
       background-color: @activeclr!important;
-      border-color:  @activeclr!important;
-      color: #fff!important;
+      border-color: @activeclr!important;
+      color: #fff !important;
     }
   }
 
   &.cancel {
     background-color: @cancelcolor!important;
-    border-color:  @cancelcolor!important;
+    border-color: @cancelcolor!important;
     color: @fontcolor!important;
-    &:hover{
+    &:hover {
       background-color: @cancelhoverclr!important;
-      border-color:  @cancelhoverclr!important;
+      border-color: @cancelhoverclr!important;
       color: @fontcolor!important;
     }
-    &:active{
+    &:active {
       background-color: @cancelactiveclr!important;
-      border-color:  @cancelactiveclr!important;
+      border-color: @cancelactiveclr!important;
       color: @fontcolor!important;
     }
   }
 
   &.deepcancel {
     background-color: @deepcancelcolor!important;
-    border-color:  @deepcancelcolor!important;
-    color: #fff!important;
-    &:hover{
+    border-color: @deepcancelcolor!important;
+    color: #fff !important;
+    &:hover {
       background-color: @deepcancelhoverclr!important;
-      border-color:  @deepcancelhoverclr!important;
-      color: #fff!important;
+      border-color: @deepcancelhoverclr!important;
+      color: #fff !important;
     }
-    &:active{
+    &:active {
       background-color: @deepcancelactiveclr!important;
-      border-color:  @deepcancelactiveclr!important;
-      color: #fff!important;
+      border-color: @deepcancelactiveclr!important;
+      color: #fff !important;
     }
   }
 
@@ -627,15 +628,15 @@ textarea:-ms-input-placeholder {
     border-color: #c80303;
     color: #fff;
   }
-  &:hover{
-    background-color: transparent!important;
+  &:hover {
+    background-color: transparent !important;
     color: @hoverclr!important;
-    border-color:  @hoverclr!important;
+    border-color: @hoverclr!important;
   }
-  &:active{
-    background-color: transparent!important;
+  &:active {
+    background-color: transparent !important;
     color: @activeclr!important;
-    border-color:  @activeclr!important;
+    border-color: @activeclr!important;
   }
 }
 
@@ -720,10 +721,10 @@ textarea:-ms-input-placeholder {
   overflow: hidden;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
-  border: 1px solid #E4E7ED;
+  border: 1px solid #e4e7ed;
   padding: 26px;
   &.dark {
-    background: #1A1B1D;
+    background: #1a1b1d;
     color: rgba(255, 255, 255, 0.6);
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
     border: 1px solid #404040;
@@ -737,7 +738,7 @@ textarea:-ms-input-placeholder {
         }
       }
     }
-    .ui-message-main{
+    .ui-message-main {
       text-align: left;
       min-height: 80px;
       margin-top: 40px;
@@ -745,22 +746,22 @@ textarea:-ms-input-placeholder {
   }
 }
 
-.message-material{
+.message-material {
   border-radius: 4px;
-  @color:#0076F6;
+  @color: #0076f6;
   background: #fff;
   padding: 26px;
-  .header-material{
+  .header-material {
     border-bottom: none;
     line-height: 1;
     height: auto;
-    >span {
+    > span {
       font-size: 18px;
       margin-left: 0;
       &:last-child {
         width: auto;
         cursor: pointer;
-        >i{
+        > i {
           font-size: 20px;
           color: #909090;
         }
@@ -768,11 +769,12 @@ textarea:-ms-input-placeholder {
     }
   }
 
-  .main-material{
-    .ui-message-icon,.ui-message-title{
+  .main-material {
+    .ui-message-icon,
+    .ui-message-title {
       display: none;
     }
-    .ui-message-content{
+    .ui-message-content {
       line-height: 20px;
       font-size: 14px;
       color: #323233;
@@ -780,9 +782,8 @@ textarea:-ms-input-placeholder {
       margin: 40px 0;
     }
   }
-  
-  
-  .footer-material{
+
+  .footer-material {
     margin: 0;
     margin-top: 60px;
     padding: 0;
@@ -804,7 +805,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-
 .ui-message-footer {
   text-align: right;
   .ui-button {
@@ -812,7 +812,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-
 .ui-message-main {
   .ui-message-icon {
     height: 108px;
@@ -941,9 +940,13 @@ textarea:-ms-input-placeholder {
 }
 
 // 覆盖element-ui的默认样式
-.el-message--success, .el-message--info, .el-message--warning, .el-message--error {
-  background: #FFFFFF;
-  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+.el-message--success,
+.el-message--info,
+.el-message--warning,
+.el-message--error {
+  background: #ffffff;
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   border-radius: 2px;
 }
 .el-message__content {
@@ -951,4 +954,3 @@ textarea:-ms-input-placeholder {
   color: rgba(0, 0, 0, 0.65) !important;
   line-height: 22px;
 }
-

packages/qjkankan-editor/src/assets/style/style.pc.editor.less

@@ -1,12 +1,12 @@
-@import './base/normalize.css';
+@import "./base/normalize.css";
 
-@color: #0076F6;
-@hoverclr: #1983F6;
-@activeclr: #0069DC;
+@color: #0076f6;
+@hoverclr: #1983f6;
+@activeclr: #0069dc;
 
-@cancelcolor: #EBEDF0;
-@cancelhoverclr: #EBEDF0;
-@cancelactiveclr: #D3D4D7;
+@cancelcolor: #ebedf0;
+@cancelhoverclr: #ebedf0;
+@cancelactiveclr: #d3d4d7;
 
 @deepcancelcolor: #313131;
 @deepcancelhoverclr: #3d3d3d;
@@ -14,15 +14,29 @@
 
 @fontcolor: #323233;
 
-::-webkit-scrollbar { width: 6px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar {
+  width: 6px;
+  height: 0;
+} /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
 ::-webkit-scrollbar-thumb {
-  background: #47484A;
+  background: #47484a;
   border-radius: 3px;
 }
-::-webkit-scrollbar-button { background-color: transparent; height: 0; }
-::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
-::-webkit-scrollbar-corner { background: transparent; border-radius: 6px; }
-::-webkit-scrollbar-resizer { background: transparent;}
+::-webkit-scrollbar-button {
+  background-color: transparent;
+  height: 0;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 6px;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+  border-radius: 6px;
+}
+::-webkit-scrollbar-resizer {
+  background: transparent;
+}
 
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
@@ -48,7 +62,6 @@ textarea:-ms-input-placeholder {
   font-weight: normal !important;
 }
 
-
 .disable {
   opacity: 0.5;
   pointer-events: none !important;
@@ -59,14 +72,15 @@ textarea:-ms-input-placeholder {
 }
 
 .hover-tips:hover {
-  color: #0076F6 !important;
+  color: #0076f6 !important;
 }
 
 .hover-tips-warn:hover {
-  color: #FA5555 !important;
+  color: #fa5555 !important;
 }
 
-.hover-tips, .hover-tips-warn {
+.hover-tips,
+.hover-tips-warn {
   position: relative;
   font-size: 18px;
 
@@ -78,9 +92,9 @@ textarea:-ms-input-placeholder {
 
   // tip的方框
   > div {
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
-    border: 1px solid #EBEDF0;
+    border: 1px solid #ebedf0;
     cursor: default;
     display: none;
     z-index: 10000;
@@ -135,7 +149,8 @@ textarea:-ms-input-placeholder {
   > img {
     max-width: 100px;
   }
-  > div, > span {
+  > div,
+  > span {
     display: block;
     font-weight: 400;
     margin-top: 10px;
@@ -234,7 +249,6 @@ textarea:-ms-input-placeholder {
     .active {
       color: rgba(255, 255, 255, 0.88);
       background: rgba(255, 255, 255, 0.16);
-
     }
   }
 }
@@ -243,12 +257,11 @@ textarea:-ms-input-placeholder {
   > ul {
     > li {
       color: #909090;
-      background: #F7F7F7;
+      background: #f7f7f7;
     }
     .active {
       color: #202020;
-      background: #EBEBEB;
-
+      background: #ebebeb;
     }
   }
 }
@@ -680,7 +693,7 @@ textarea:-ms-input-placeholder {
   background: #fff;
   z-index: 10000;
   margin-top: 0px;
-  color: @color  !important;
+  color: @color !important;
   font-size: 14px;
   box-shadow: -1px 2px 8px 0px rgba(0, 0, 0, 0.25);
   transition: opacity 0.3s, transform 0.2s;
@@ -714,10 +727,10 @@ textarea:-ms-input-placeholder {
   overflow: hidden;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
-  border: 1px solid #E4E7ED;
+  border: 1px solid #e4e7ed;
   padding: 26px;
   &.dark {
-    background: #1A1B1D;
+    background: #1a1b1d;
     color: rgba(255, 255, 255, 0.6);
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
     border: 1px solid #404040;
@@ -752,7 +765,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-
 .ui-message-footer {
   text-align: right;
   .ui-button {
@@ -760,7 +772,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-
 .ui-message-main {
   .ui-message-icon {
     height: 108px;
@@ -888,7 +899,6 @@ textarea:-ms-input-placeholder {
   }
 }
 
-
 .widgets-design-option {
   width: 100%;
   height: 100%;
@@ -928,7 +938,7 @@ textarea:-ms-input-placeholder {
       position: absolute;
       right: -15px;
       top: 0;
-      content: '';
+      content: "";
       width: 0;
       height: 0;
       border-style: solid;
@@ -977,16 +987,26 @@ textarea:-ms-input-placeholder {
 }
 
 .widgets-rulers .ruler-line em {
-  background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, .5)), to(hsla(0, 0%, 100%, .3)));
-  background: linear-gradient(90deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .3));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(hsla(0, 0%, 100%, 0.5)),
+    to(hsla(0, 0%, 100%, 0.3))
+  );
+  background: linear-gradient(
+    90deg,
+    hsla(0, 0%, 100%, 0.5),
+    hsla(0, 0%, 100%, 0.3)
+  );
   display: block;
   height: 100%;
-  -webkit-animation: ruler-line .5s ease 1s;
-  animation: ruler-line .5s ease 1s;
+  -webkit-animation: ruler-line 0.5s ease 1s;
+  animation: ruler-line 0.5s ease 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
-  -webkit-box-shadow: 0 0 3.5px rgba(0, 0, 0, .6);
-  box-shadow: 0 0 3.5px rgba(0, 0, 0, .6);
+  -webkit-box-shadow: 0 0 3.5px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 3.5px rgba(0, 0, 0, 0.6);
 }
 
 .widgets-rulers .ruler-label {
@@ -1010,8 +1030,8 @@ textarea:-ms-input-placeholder {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   transform-origin: right center;
-  -webkit-animation: ruler-point .3s ease 1.3s;
-  animation: ruler-point .3s ease 1.3s;
+  -webkit-animation: ruler-point 0.3s ease 1.3s;
+  animation: ruler-point 0.3s ease 1.3s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
@@ -1030,7 +1050,7 @@ textarea:-ms-input-placeholder {
   animation: ruler-label 1s ease 1.6s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
-  text-shadow: 0 0 3.5px rgba(0, 0, 0, .6);
+  text-shadow: 0 0 3.5px rgba(0, 0, 0, 0.6);
 }
 
 .widgets-rulers .ruler-label.reverse .ruler-label-point {
@@ -1052,7 +1072,7 @@ textarea:-ms-input-placeholder {
 .widgets-rulers .ruler-intersection {
   position: absolute;
   width: 0;
-  height: 0
+  height: 0;
 }
 
 .widgets-rulers .ruler-intersection .ruler-intersection-point {
@@ -1064,7 +1084,7 @@ textarea:-ms-input-placeholder {
   //background-image: url(~/static/img/intersection-label.svg);
   background-repeat: no-repeat;
   background-size: 18.375px 7px;
-  background-position: 50%
+  background-position: 50%;
 }
 
 .widgets-rulers .ruler-intersection .ruler-intersection-text {
@@ -1075,14 +1095,13 @@ textarea:-ms-input-placeholder {
   line-height: 12px;
   white-space: nowrap;
   color: #12fffb;
-  text-shadow: 0 0 3.5px rgba(0, 0, 0, .3);
+  text-shadow: 0 0 3.5px rgba(0, 0, 0, 0.3);
   -webkit-transform-origin: left center;
   transform-origin: left center;
-  -webkit-transform: scale(.85);
-  transform: scale(.85)
+  -webkit-transform: scale(0.85);
+  transform: scale(0.85);
 }
 
-
 .measure .ruler-label .ruler-label-name {
   font-size: 14px;
   line-height: 14px;
@@ -1094,18 +1113,16 @@ textarea:-ms-input-placeholder {
 
 .measure .ruler-label .ruler-label-point {
   // background-image: url(~/static/img/ruler-point-yellow.svg);
-  animation-delay: .3s;
+  animation-delay: 0.3s;
 }
 
 .measure .ruler-label .ruler-label-name {
-  animation-delay: .6s;
+  animation-delay: 0.6s;
 }
 
-
-
-
 /* edit 界面 ruler立刻出现 */
-body[edit-mode="mobile"] .ruler-line em, body[edit-mode="pc"] .ruler-line em {
+body[edit-mode="mobile"] .ruler-line em,
+body[edit-mode="pc"] .ruler-line em {
   animation-delay: 0s;
 }
 
@@ -1118,20 +1135,11 @@ body[edit-mode="pc"] .ruler-label .ruler-label-point,
 body[edit-mode="mobile"] .ruler-label .ruler-label-name,
 body[edit-mode="pc"] .ruler-label .ruler-label-name,
 .wallLine .ruler-label .ruler-label-name {
-  animation-delay: .3s;
+  animation-delay: 0.3s;
 }
 
-
-
-
-
-
-
-
 /* widgets-doll-labels: */
 
-
-
 .widgets-doll-labels,
 .widgets-plan-labels {
   overflow: hidden;
@@ -1140,7 +1148,7 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   top: 0;
   left: 0;
   bottom: 0;
-  right: 0
+  right: 0;
 }
 
 .widgets-doll-labels .room-label {
@@ -1150,8 +1158,8 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   /*  display: none; */
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
-  -webkit-animation: room-label .3s ease .1s;
-  animation: room-label .3s ease .1s;
+  -webkit-animation: room-label 0.3s ease 0.1s;
+  animation: room-label 0.3s ease 0.1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   cursor: pointer;
@@ -1203,7 +1211,7 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
 // }
 
 .widgets-doll-labels .room-label.with-entrance:after {
-  display: none
+  display: none;
 }
 
 .widgets-doll-labels .room-label.with-entrance a {
@@ -1213,20 +1221,20 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   background-size: 38.5px 15.75px;
   //background-image: url(~/static/img/room-label-entrance.svg);
   -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%)
+  transform: translate(-50%, -50%);
 }
 
 .widgets-doll-labels .room-label.with-entrance a span {
   margin-left: -0.875px;
-  margin-top: -0.875px
+  margin-top: -0.875px;
 }
 
 .widgets-plan-labels .room-label {
   position: absolute;
-  -webkit-animation: room-label .3s ease .1s;
-  animation: room-label .3s ease .1s;
+  -webkit-animation: room-label 0.3s ease 0.1s;
+  animation: room-label 0.3s ease 0.1s;
   -webkit-animation-fill-mode: both;
-  animation-fill-mode: both
+  animation-fill-mode: both;
 }
 
 .widgets-plan-labels .room-label a {
@@ -1252,17 +1260,17 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   top: 0;
   left: 0;
   bottom: 0;
-  right: 0
+  right: 0;
 }
 
-.widgets-doors[data-camera-toward=forward] .door.show-arrow.right a:before {
+.widgets-doors[data-camera-toward="forward"] .door.show-arrow.right a:before {
   margin-right: 3.5px;
   -webkit-transform: rotate(180deg);
-  transform: rotate(180deg)
+  transform: rotate(180deg);
 }
 
-.widgets-doors[data-camera-toward=forward] .door.show-arrow.left a:after,
-.widgets-doors[data-camera-toward=forward] .door.show-arrow.right a:before {
+.widgets-doors[data-camera-toward="forward"] .door.show-arrow.left a:after,
+.widgets-doors[data-camera-toward="forward"] .door.show-arrow.right a:before {
   content: "";
   position: relative;
   display: inline-block;
@@ -1270,15 +1278,15 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   height: 10.5px;
   //background: url(../images/room-arrow-label.svg) no-repeat 50%;
   background-size: 100% 100%;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
-.widgets-doors[data-camera-toward=forward] .door.show-arrow.left a:after {
-  margin-left: 3.5px
+.widgets-doors[data-camera-toward="forward"] .door.show-arrow.left a:after {
+  margin-left: 3.5px;
 }
 
-.widgets-doors[data-camera-toward=forward] .door.show-arrow.back a:after,
-.widgets-doors[data-camera-toward=right] .door.show-arrow.left a:after {
+.widgets-doors[data-camera-toward="forward"] .door.show-arrow.back a:after,
+.widgets-doors[data-camera-toward="right"] .door.show-arrow.left a:after {
   content: "";
   display: inline-block;
   vertical-align: middle;
@@ -1288,17 +1296,17 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   background-size: 100% 100%;
   margin-left: 3.5px;
   -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg)
+  transform: rotate(-90deg);
 }
 
-.widgets-doors[data-camera-toward=right] .door.show-arrow.back a:before {
+.widgets-doors[data-camera-toward="right"] .door.show-arrow.back a:before {
   margin-right: 3.5px;
   -webkit-transform: rotate(180deg);
-  transform: rotate(180deg)
+  transform: rotate(180deg);
 }
 
-.widgets-doors[data-camera-toward=right] .door.show-arrow.back a:before,
-.widgets-doors[data-camera-toward=right] .door.show-arrow.forward a:after {
+.widgets-doors[data-camera-toward="right"] .door.show-arrow.back a:before,
+.widgets-doors[data-camera-toward="right"] .door.show-arrow.forward a:after {
   content: "";
   position: relative;
   display: inline-block;
@@ -1306,20 +1314,20 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   height: 10.5px;
   //background: url(../images/room-arrow-label.svg) no-repeat 50%;
   background-size: 100% 100%;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
-.widgets-doors[data-camera-toward=right] .door.show-arrow.forward a:after {
-  margin-left: 3.5px
+.widgets-doors[data-camera-toward="right"] .door.show-arrow.forward a:after {
+  margin-left: 3.5px;
 }
 
-.widgets-doors[data-camera-toward=left] .door.show-arrow.right a:after {
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.right a:after {
   -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg)
+  transform: rotate(-90deg);
 }
 
-.widgets-doors[data-camera-toward=left] .door.show-arrow.back a:after,
-.widgets-doors[data-camera-toward=left] .door.show-arrow.right a:after {
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.back a:after,
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.right a:after {
   content: "";
   display: inline-block;
   vertical-align: middle;
@@ -1327,43 +1335,43 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   height: 10.5px;
   //background: url(../images/room-arrow-label.svg) no-repeat 50%;
   background-size: 100% 100%;
-  margin-left: 3.5px
+  margin-left: 3.5px;
 }
 
-.widgets-doors[data-camera-toward=left] .door.show-arrow.back a:after {
-  position: relative
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.back a:after {
+  position: relative;
 }
 
-.widgets-doors[data-camera-toward=left] .door.show-arrow.forward a:before {
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.forward a:before {
   position: relative;
   margin-right: 3.5px;
   -webkit-transform: rotate(180deg);
-  transform: rotate(180deg)
+  transform: rotate(180deg);
 }
 
-.widgets-doors[data-camera-toward=back] .door.show-arrow.forward a:after,
-.widgets-doors[data-camera-toward=left] .door.show-arrow.forward a:before {
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.forward a:after,
+.widgets-doors[data-camera-toward="left"] .door.show-arrow.forward a:before {
   content: "";
   display: inline-block;
   width: 10.5px;
   height: 10.5px;
   //background: url(../images/room-arrow-label.svg) no-repeat 50%;
   background-size: 100% 100%;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
-.widgets-doors[data-camera-toward=back] .door.show-arrow.forward a:after {
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.forward a:after {
   margin-left: 3.5px;
   -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg)
+  transform: rotate(-90deg);
 }
 
-.widgets-doors[data-camera-toward=back] .door.show-arrow.right a:after {
-  margin-left: 3.5px
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.right a:after {
+  margin-left: 3.5px;
 }
 
-.widgets-doors[data-camera-toward=back] .door.show-arrow.left a:before,
-.widgets-doors[data-camera-toward=back] .door.show-arrow.right a:after {
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.left a:before,
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.right a:after {
   content: "";
   position: relative;
   display: inline-block;
@@ -1371,13 +1379,13 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   height: 10.5px;
   //background: url(../images/room-arrow-label.svg) no-repeat 50%;
   background-size: 100% 100%;
-  vertical-align: middle
+  vertical-align: middle;
 }
 
-.widgets-doors[data-camera-toward=back] .door.show-arrow.left a:before {
+.widgets-doors[data-camera-toward="back"] .door.show-arrow.left a:before {
   margin-right: 3.5px;
   -webkit-transform: rotate(180deg);
-  transform: rotate(180deg)
+  transform: rotate(180deg);
 }
 
 .widgets-doors .door {
@@ -1385,12 +1393,12 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   width: 0;
   height: 0;
   /* display: none; */
-  -webkit-animation: viewport-door-label .3s ease 1s;
-  animation: viewport-door-label .3s ease 1s;
+  -webkit-animation: viewport-door-label 0.3s ease 1s;
+  animation: viewport-door-label 0.3s ease 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-transform: translateZ(0);
-  transform: translateZ(0)
+  transform: translateZ(0);
 }
 
 /* .widgets-doors .door.visible {
@@ -1405,144 +1413,143 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   border-radius: 1.75px;
-  background: rgba(0, 0, 0, .3);
+  background: rgba(0, 0, 0, 0.3);
   line-height: 10.5px;
   padding: 3.5px 4.375px;
   white-space: nowrap;
   font-size: 10.5px;
   font-style: normal;
   pointer-events: auto;
-  -webkit-transition: background .3s ease, color .3s ease, -webkit-transform 1s ease;
-  transition: background .3s ease, color .3s ease, -webkit-transform 1s ease;
-  transition: transform 1s ease, background .3s ease, color .3s ease;
-  transition: transform 1s ease, background .3s ease, color .3s ease, -webkit-transform 1s ease
+  -webkit-transition: background 0.3s ease, color 0.3s ease,
+    -webkit-transform 1s ease;
+  transition: background 0.3s ease, color 0.3s ease, -webkit-transform 1s ease;
+  transition: transform 1s ease, background 0.3s ease, color 0.3s ease;
+  transition: transform 1s ease, background 0.3s ease, color 0.3s ease,
+    -webkit-transform 1s ease;
 }
 
 .widgets-doors .door a:after {
-  -webkit-transition: opacity .3s ease;
-  transition: opacity .3s ease
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
 }
 
 .widgets-doors .door a:active {
-  background: rgba(0, 0, 0, .5);
-  color: hsla(0, 0%, 100%, .5)
+  background: rgba(0, 0, 0, 0.5);
+  color: hsla(0, 0%, 100%, 0.5);
 }
 
 .widgets-doors .door a:active:after {
-  opacity: .5
+  opacity: 0.5;
 }
 
 @-webkit-keyframes ruler-point {
   0% {
-    height: 0
+    height: 0;
   }
 
   to {
-    height: 11.375px
+    height: 11.375px;
   }
 }
 
 @keyframes ruler-point {
   0% {
-    height: 0
+    height: 0;
   }
 
   to {
-    height: 11.375px
+    height: 11.375px;
   }
 }
 
 @-webkit-keyframes ruler-label {
   0% {
-    max-width: 0
+    max-width: 0;
   }
 
   to {
-    max-width: 131.25px
+    max-width: 131.25px;
   }
 }
 
 @keyframes ruler-label {
   0% {
-    max-width: 0
+    max-width: 0;
   }
 
   to {
-    max-width: 131.25px
+    max-width: 131.25px;
   }
 }
 
 @-webkit-keyframes door-label {
   0% {
     opacity: 0;
-    margin-top: 8.75px
+    margin-top: 8.75px;
   }
 
   to {
     opacity: 1;
-    margin-top: 0
+    margin-top: 0;
   }
 }
 
 @keyframes door-label {
   0% {
     opacity: 0;
-    margin-top: 8.75px
+    margin-top: 8.75px;
   }
 
   to {
     opacity: 1;
-    margin-top: 0
+    margin-top: 0;
   }
 }
 
 @-webkit-keyframes room-label {
   0% {
     opacity: 0;
-    margin-top: 8.75px
+    margin-top: 8.75px;
   }
 
   to {
     opacity: 1;
-    margin-top: 0
+    margin-top: 0;
   }
 }
 
 @keyframes room-label {
   0% {
     opacity: 0;
-    margin-top: 8.75px
+    margin-top: 8.75px;
   }
 
   to {
     opacity: 1;
-    margin-top: 0
+    margin-top: 0;
   }
 }
 
 @-webkit-keyframes ruler-line {
   0% {
-    width: 0
+    width: 0;
   }
 
   to {
-    width: 100%
+    width: 100%;
   }
 }
 
 @keyframes ruler-line {
   0% {
-    width: 0
+    width: 0;
   }
 
   to {
-    width: 100%
+    width: 100%;
   }
 }
 
-
-
-
 [app-border] {
   position: relative;
   &[dir-top],
@@ -1614,14 +1621,15 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
 }
 
 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
-  background-color: rgba(98, 102, 102, 0.75)
+  background-color: rgba(98, 102, 102, 0.75);
 }
 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
-  background-color: rgba(153, 153, 153, .85);
+  background-color: rgba(153, 153, 153, 0.85);
 }
 
-.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
-  background-color: rgba(153, 153, 153, .9);
+.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
+.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
+  background-color: rgba(153, 153, 153, 0.9);
 }
 
 .dialog {
@@ -1633,15 +1641,18 @@ body[edit-mode="pc"] .ruler-label .ruler-label-name,
   background: rgba(0, 0, 0, 0.5);
 }
 
-
 a {
   text-decoration: none;
 }
 
 // 覆盖element-ui的默认样式
-.el-message--success, .el-message--info, .el-message--warning, .el-message--error {
-  background: #1F1F1F !important;
-  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.32), 0px 3px 6px -4px rgba(0, 0, 0, 0.48) !important;
+.el-message--success,
+.el-message--info,
+.el-message--warning,
+.el-message--error {
+  background: #1f1f1f !important;
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.2),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.32), 0px 3px 6px -4px rgba(0, 0, 0, 0.48) !important;
   border-radius: 20px !important;
   border: 1px solid #333333 !important;
   min-width: 0;
@@ -1652,12 +1663,12 @@ a {
     font-size: 14px;
   }
   .el-icon-success {
-    color: #49AA19 !important;
+    color: #49aa19 !important;
   }
   .el-icon-warning {
-    color: #D89614 !important;
+    color: #d89614 !important;
   }
   .el-icon-error {
-    color: #A61D24 !important;
+    color: #a61d24 !important;
   }
-}
+}

packages/qjkankan-editor/src/components/table/index.vue

@@ -41,7 +41,7 @@
       <!-- 表格每一行 -->
       <ul
         class="t-item"
-        :class="{ 'bottom-line': showLine }"
+        :class="{ 'bottom-line': showLine, firstLine: i === 0 }"
         v-for="(lineData, i) in data"
         :key="i"
       >
@@ -274,22 +274,37 @@ export default {
     // flex: 1;
     position: relative;
     z-index: 100;
-    overflow: auto;
+    overflow: scroll;
     > i {
       position: relative;
       z-index: 100;
-      overflow: auto;
     }
     .t-item {
       display: flex;
       align-items: center;
       width: 100%;
       padding: 10px 16px 10px 16px;
+
+      &.firstLine {
+        .hover-tips,
+        .hover-tips-warn {
+          > div {
+            top: 46px;
+            &::before {
+ 
+              border: 7px solid transparent;
+              border-bottom: 7px solid #fff;
+              bottom: initial;
+              top: -14px;
+            
+              // transform: rotate(180deg);
+            }
+          }
+        }
+      }
       .showWhenHover {
         visibility: hidden;
-        overflow: auto;
-        // position: relative;
-        // z-index: 1;
+        overflow: visible;
       }
       &:hover {
         background: #f7f7f7;

packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -7,7 +7,9 @@
         :rootName="$i18n.t('gather.audio')"
         @click-path="onClickPath"
       />
-      <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.audio")}}</div>
+      <div v-if="lastestUsedSearchKey" class="">
+        {{ $i18n.t("gather.audio") }}
+      </div>
     </div>
     <div class="second-line">
       <template v-if="!searchKey">
@@ -17,11 +19,8 @@
             @click="onUploadFile"
             class="ui-button submit"
           >
-            <span>{{upload_material}}</span>
-            <i
-              class="iconfont icon-material_prompt"
-              v-tooltip="audio_size"
-            />
+            <span>{{ upload_material }}</span>
+            <i class="iconfont icon-material_prompt" v-tooltip="audio_size" />
             <upload
               ref="uploadFile"
               :failString="audio_fail"
@@ -33,29 +32,34 @@
             ></upload>
           </button>
         </div>
-        <button
-          class="ui-button submit"
-          @click="isShowNewFolder = true"
-        >
-          {{$i18n.t(`gather.new_folder`)}}
+        <button class="ui-button submit" @click="isShowNewFolder = true">
+          {{ $i18n.t(`gather.new_folder`) }}
         </button>
         <button
           class="ui-button cancel"
-          :class="{disable: selectedList.length === 0}"
+          :class="{ disable: selectedList.length === 0 }"
           @click="onClickMoveFolder"
         >
-          {{$i18n.t(`gather.move_folder`)}}
+          {{ $i18n.t(`gather.move_folder`) }}
         </button>
       </template>
       <div class="filter">
-        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
-          <i class="iconfont icon-works_search search" ></i>
+        <div
+          :class="{ active: isFilterFocus }"
+          @focusin="onFilterFocus"
+          @focusout="onFilterBlur"
+        >
+          <i class="iconfont icon-works_search search"></i>
           <input
             type="text"
             v-model="searchKey"
             :placeholder="serch_material"
           />
-          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
+          <i
+            v-if="searchKey"
+            @click="searchKey = ''"
+            class="iconfont icontoast_red del"
+          ></i>
         </div>
       </div>
     </div>
@@ -77,16 +81,20 @@
       >
         <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
         <div slot-scope="{ headerItem }" slot="header">
-          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`) }}
         </div>
-        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
+        <div
+          slot-scope="{ itemData, lineData, headerItem }"
+          slot="tableItem"
+          style="width: 100%"
+        >
           <div class="handle" v-if="headerItem.canclick">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
               @click="onClickRename(lineData)"
             >
               <div>
-                <div class="remark">{{rename}}</div>
+                <div class="remark">{{ rename }}</div>
               </div>
             </i>
             <i
@@ -94,7 +102,7 @@
               @click="del(lineData)"
             >
               <div>
-                <div class="remark">{{deltips}}</div>
+                <div class="remark">{{ deltips }}</div>
               </div>
             </i>
           </div>
@@ -120,18 +128,10 @@
             />
           </div>
 
-
-
           <!-- 文字型单元格 -->
-          <div
-            v-else
-            class="textItem"
-          >
-          
-          
+          <div v-else class="textItem">
             <!-- 名称 -->
             <div v-if="headerItem.key === 'name'" class="name">
-              
               <!-- 不是搜索出来的 -->
               <div v-if="!lastestUsedSearchKey" class="not-search-res">
                 <!-- 文件夹名称 -->
@@ -148,22 +148,25 @@
                 </div>
               </div>
               <!-- end of 不是搜索出来的 -->
-              
+
               <!-- 搜索出来的 -->
               <div v-if="lastestUsedSearchKey" class="search-res">
                 <!-- 文件夹名称 -->
-                <div
-                  v-if="lineData.type === 'dir'"
-                  class="dirName"
-                >
-                  <div
-                    class="self-name"
-                    @click="onClickFolder(lineData)"
-                  >
+                <div v-if="lineData.type === 'dir'" class="dirName">
+                  <div class="self-name" @click="onClickFolder(lineData)">
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    目录
+                    <span
+                      class="parent-name"
+                      @click="onClickParentFolder(lineData)"
+                      >{{
+                        lineData.dirId === 1
+                          ? $i18n.t("gather.root_dir")
+                          : lineData.dirName
+                      }}</span
+                    >
                   </div>
                 </div>
                 <!-- 素材名称 -->
@@ -172,28 +175,30 @@
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    目录
+                    <span
+                      class="parent-name"
+                      @click="onClickParentFolder(lineData)"
+                      >{{
+                        lineData.dirId === 1
+                          ? $i18n.t("gather.root_dir")
+                          : lineData.dirName
+                      }}</span
+                    >
                   </div>
                 </div>
               </div>
               <!-- end of 搜索出来的 -->
-              
             </div>
             <!-- end of 名称 -->
-            
-            
+
             <!-- 不是名称 -->
             <div v-else class="not-name">
               {{ itemData || "-" }}
             </div>
             <!-- end of 不是名称 -->
-
-            
           </div>
           <!-- end of 文字型单元格 -->
-
-
-
         </div>
       </tableList>
       <UploadTaskList
@@ -203,28 +208,38 @@
         :targetFolderId="lastestUsedSearchKey ? -1 : currentFolderId"
         @cancel-task="onCancelTask"
       />
-      <div class="total-number" v-if="list.length !== 0 || hasMoreData">{{had_load}}</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
+      <div class="total-number" v-if="list.length !== 0 || hasMoreData">
+        {{ had_load }}
+      </div>
+      <div
+        class="nodata"
+        v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey"
+      >
         <img :src="$noresult" alt="" />
-        <span>{{no_serch_result}}</span>
+        <span>{{ no_serch_result }}</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
+      <div
+        class="nodata"
+        v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey"
+      >
         <img :src="config.empty" alt="" />
-        <span>{{no_material_result}}</span>
-        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">{{upload_material}}</button>
+        <span>{{ no_material_result }}</span>
+        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">
+          {{ upload_material }}
+        </button>
       </div>
     </div>
 
     <CreateFolder
       v-if="isShowNewFolder"
-      :validate=validateNewFolderName
+      :validate="validateNewFolderName"
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
     <RenameFolder
       v-if="isShowRenameFolder"
       :oldName="popupItem.name"
-      :validate=validateRenameFolderName
+      :validate="validateRenameFolderName"
       @close="isShowRenameFolder = false"
       @submit="onSubmitRenameFolder"
     />
@@ -254,9 +269,9 @@ import vAudio from "@/components/audio/index.vue";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import UploadTaskList from "../components/uploadList1.1.0.vue";
-import { debounce } from "@/utils/other.js"
-import { mapState } from 'vuex';
-import {i18n} from "@/lang"
+import { debounce } from "@/utils/other.js";
+import { mapState } from "vuex";
+import { i18n } from "@/lang";
 import folderMixinFactory from "../folderMixinFactory.js";
 
 import {
@@ -264,17 +279,15 @@ import {
   uploadMaterial,
   editMaterial,
   delMaterial,
-  checkUserSize
+  checkUserSize,
 } from "@/api";
 
 const TYPE = "audio";
 
-const folderMixin = folderMixinFactory(TYPE)
+const folderMixin = folderMixinFactory(TYPE);
 
 export default {
-  mixins: [
-    folderMixin,
-  ],
+  mixins: [folderMixin],
   components: {
     tableList,
     crumbs,
@@ -295,15 +308,14 @@ export default {
       no_serch_result: i18n.t("gather.no_serch_result"),
       no_material_result: i18n.t("gather.no_material_result"),
 
-
       config,
       showRename: false,
       showList: false,
       popupItem: null,
       tabHeader: data,
-      
+
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
-      lastestUsedSearchKey: '',
+      lastestUsedSearchKey: "",
       isFilterFocus: false,
       searchKey: "",
       list: [],
@@ -313,45 +325,48 @@ export default {
   },
   computed: {
     ...mapState({
-      uploadListForUI: 'uploadStatusListAudio',
+      uploadListForUI: "uploadStatusListAudio",
     }),
-    had_load(){
-      return i18n.t("gather.had_load",{msg:this.list.length})
-    }
-  },
-  mounted() {
+    had_load() {
+      return i18n.t("gather.had_load", { msg: this.list.length });
+    },
   },
+  mounted() {},
   watch: {
     searchKey: {
       handler: function () {
-        this.refreshListDebounced()
+        this.refreshListDebounced();
       },
       immediate: false,
     },
   },
   methods: {
-    onUploadFile(){
-      checkUserSize({},(data)=>{
+    onUploadFile() {
+      checkUserSize({}, (data) => {
         //判断已用是否大于3G
-        if ((data.data / 1024 / 1024) > 3) {
+        if (data.data / 1024 / 1024 > 3) {
           this.$alert({ content: i18n.t("tips_code.FAILURE_3024") });
-        }else{
-          this.$refs.uploadFile.click()
+        } else {
+          this.$refs.uploadFile.click();
         }
-      })
+      });
     },
     onFilterFocus() {
-      this.isFilterFocus = true
+      this.isFilterFocus = true;
     },
     onFilterBlur() {
-      this.isFilterFocus = false
+      this.isFilterFocus = false;
     },
-    refreshListDebounced: debounce(function() {
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.$refs['table-list'].requestMoreData()
-    }, 500, false),
+    refreshListDebounced: debounce(
+      function () {
+        this.list = [];
+        this.isRequestingMoreData = false;
+        this.hasMoreData = true;
+        this.$refs["table-list"].requestMoreData();
+      },
+      500,
+      false
+    ),
     stopAllAudio() {
       Array.from($("audio")).forEach((item) => {
         if (!item.paused) {
@@ -368,12 +383,12 @@ export default {
         () => {
           this.$msg.success(i18n.t("gather.edit_success"));
           const index = this.list.findIndex((eachItem) => {
-            return eachItem.id === this.popupItem.id
-          })
+            return eachItem.id === this.popupItem.id;
+          });
           if (index >= 0) {
-            this.list[index].name = newName
+            this.list[index].name = newName;
           } else {
-            console.error('在素材列表里没找到要重命名的那一项！');
+            console.error("在素材列表里没找到要重命名的那一项！");
           }
           this.showRename = false;
           this.popupItem = null;
@@ -381,15 +396,15 @@ export default {
       );
     },
     onClickRename(lineData) {
-      this.popupItem = lineData
-      if (lineData.type !== 'dir') {
-        this.showRename = true
+      this.popupItem = lineData;
+      if (lineData.type !== "dir") {
+        this.showRename = true;
       } else {
-        this.isShowRenameFolder = true
+        this.isShowRenameFolder = true;
       }
     },
     del(item) {
-      if (item.type === 'dir') {
+      if (item.type === "dir") {
         this.delFolder(item.id, (lastestUsedSearchKey) => {
           getMaterialList(
             {
@@ -401,33 +416,32 @@ export default {
             },
             (data) => {
               const index = this.list.findIndex((eachItem) => {
-                return eachItem.id === item.id
-              })
+                return eachItem.id === item.id;
+              });
               if (index >= 0) {
-                this.list.splice(index, 1)
+                this.list.splice(index, 1);
                 const newData = data.data.list.map((i) => {
                   i.fileSize = changeByteUnit(Number(i.fileSize));
                   return i;
                 });
-                this.list = this.list.concat(newData)
+                this.list = this.list.concat(newData);
                 if (this.list.length === data.data.total) {
-                  this.hasMoreData = false
+                  this.hasMoreData = false;
                 }
-                this.$bus.emit('deletedAudio') // 各个Audio组件需要重新初始化
+                this.$bus.emit("deletedAudio"); // 各个Audio组件需要重新初始化
               } else {
-                console.error('在素材列表里没找到要删除的那一项！');
+                console.error("在素材列表里没找到要删除的那一项！");
               }
 
-              this.isRequestingMoreData = false
-              this.lastestUsedSearchKey = lastestUsedSearchKey
+              this.isRequestingMoreData = false;
+              this.lastestUsedSearchKey = lastestUsedSearchKey;
             },
             () => {
-              this.isRequestingMoreData = false
-              this.lastestUsedSearchKey = lastestUsedSearchKey
+              this.isRequestingMoreData = false;
+              this.lastestUsedSearchKey = lastestUsedSearchKey;
             }
-          )
-        })
-
+          );
+        });
       } else {
         this.$confirm({
           title: i18n.t("gather.delete_material"),
@@ -436,8 +450,8 @@ export default {
           ok: () => {
             delMaterial(item.id, () => {
               this.$msg.success(i18n.t("gather.delete_success"));
-              this.isRequestingMoreData = true
-              const lastestUsedSearchKey = this.searchKey
+              this.isRequestingMoreData = true;
+              const lastestUsedSearchKey = this.searchKey;
               getMaterialList(
                 {
                   dirId: this.currentFolderId,
@@ -448,34 +462,34 @@ export default {
                 },
                 (data) => {
                   const index = this.list.findIndex((eachItem) => {
-                    return eachItem.id === item.id
-                  })
+                    return eachItem.id === item.id;
+                  });
                   if (index >= 0) {
-                    this.list.splice(index, 1)
+                    this.list.splice(index, 1);
                     const newData = data.data.list.map((i) => {
                       i.fileSize = changeByteUnit(Number(i.fileSize));
                       return i;
                     });
-                    this.list = this.list.concat(newData)
+                    this.list = this.list.concat(newData);
                     if (this.list.length === data.data.total) {
-                      this.hasMoreData = false
+                      this.hasMoreData = false;
                     }
-                    this.$bus.emit('deletedAudio') // 各个Audio组件需要重新初始化
+                    this.$bus.emit("deletedAudio"); // 各个Audio组件需要重新初始化
                   } else {
-                    console.error('在素材列表里没找到要删除的那一项！');
+                    console.error("在素材列表里没找到要删除的那一项！");
                   }
 
-                  this.isRequestingMoreData = false
-                  this.lastestUsedSearchKey = lastestUsedSearchKey
+                  this.isRequestingMoreData = false;
+                  this.lastestUsedSearchKey = lastestUsedSearchKey;
                 },
                 () => {
-                  this.isRequestingMoreData = false
-                  this.lastestUsedSearchKey = lastestUsedSearchKey
+                  this.isRequestingMoreData = false;
+                  this.lastestUsedSearchKey = lastestUsedSearchKey;
                 }
-              )
+              );
             });
-          }
-        })
+          },
+        });
       }
     },
     onFileChange(e) {
@@ -490,10 +504,16 @@ export default {
           return;
         }
 
-        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
+        if (
+          eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50
+        ) {
           setTimeout(() => {
             this.$msg({
-              message: `“${eachFile.name}”${i18n.t("gather.too_long_word_audio")}`,
+              message: `“${
+                eachFile.name.substring(0, 50) +
+                "..." +
+                eachFile.name.split(".")[1]
+              }”${i18n.t("gather.too_long_word_audio")}`,
               type: "warning",
             });
           }, i * 100);
@@ -504,13 +524,13 @@ export default {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
-          status: 'LOADING',
+          status: "LOADING",
           statusText: i18n.t("gather.uploading_material"),
           uid: `u_${this.$randomWord(true, 8, 8)}`,
           abortHandler: null,
           parentFolderId: this.currentFolderId,
         };
-        
+
         itemInUploadList.abortHandler = uploadMaterial(
           {
             dirId: this.currentFolderId,
@@ -518,26 +538,30 @@ export default {
             temId: itemInUploadList.uid,
             type: TYPE,
           },
-          () => { // 上传成功
+          () => {
+            // 上传成功
             const index = this.uploadListForUI.findIndex((eachItem) => {
-              return eachItem.uid === itemInUploadList.uid
-            })
-            this.uploadListForUI.splice(index, 1)
-            this.refreshListDebounced()
+              return eachItem.uid === itemInUploadList.uid;
+            });
+            this.uploadListForUI.splice(index, 1);
+            this.refreshListDebounced();
           },
           (err) => {
-            if (err.statusText === 'abort') { // 用户取消了上传任务。
+            if (err.statusText === "abort") {
+              // 用户取消了上传任务。
               const index = this.uploadListForUI.findIndex((eachItem) => {
-                return eachItem.uid === itemInUploadList.uid
-              })
-              this.uploadListForUI.splice(index, 1)
+                return eachItem.uid === itemInUploadList.uid;
+              });
+              this.uploadListForUI.splice(index, 1);
             } else {
-              itemInUploadList.status = 'FAIL'
-              itemInUploadList.statusText = i18n.t("gather.material_upload_fail")
+              itemInUploadList.status = "FAIL";
+              itemInUploadList.statusText = i18n.t(
+                "gather.material_upload_fail"
+              );
             }
           },
           (progress) => {
-            itemInUploadList.progress = progress
+            itemInUploadList.progress = progress;
           }
         );
 
@@ -546,17 +570,17 @@ export default {
     },
     onCancelTask(uid) {
       const index = this.uploadListForUI.findIndex((eachItem) => {
-        return eachItem.uid === uid
-      })
-      if (this.uploadListForUI[index].status === 'LOADING') {
-        this.uploadListForUI[index].abortHandler.abort()
+        return eachItem.uid === uid;
+      });
+      if (this.uploadListForUI[index].status === "LOADING") {
+        this.uploadListForUI[index].abortHandler.abort();
       } else {
-        this.uploadListForUI.splice(index, 1)
+        this.uploadListForUI.splice(index, 1);
       }
     },
     getMoreMaterialItem() {
-      this.isRequestingMoreData = true
-      const lastestUsedSearchKey = this.searchKey
+      this.isRequestingMoreData = true;
+      const lastestUsedSearchKey = this.searchKey;
       getMaterialList(
         {
           dirId: this.currentFolderId,
@@ -567,21 +591,21 @@ export default {
         },
         (data) => {
           const newData = data.data.list.map((i) => {
-            if (i.type !== 'dir') {
+            if (i.type !== "dir") {
               i.fileSize = changeByteUnit(Number(i.fileSize));
             }
             return i;
           });
-          this.list = this.list.concat(newData)
+          this.list = this.list.concat(newData);
           if (this.list.length === data.data.total) {
-            this.hasMoreData = false
+            this.hasMoreData = false;
           }
-          this.isRequestingMoreData = false
-          this.lastestUsedSearchKey = lastestUsedSearchKey
+          this.isRequestingMoreData = false;
+          this.lastestUsedSearchKey = lastestUsedSearchKey;
         },
         () => {
-          this.isRequestingMoreData = false
-          this.lastestUsedSearchKey = lastestUsedSearchKey
+          this.isRequestingMoreData = false;
+          this.lastestUsedSearchKey = lastestUsedSearchKey;
         }
       );
     },
@@ -589,8 +613,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
 <style lang="less" scoped>
 @import "../style.less";
-</style>
+</style>

packages/qjkankan-editor/src/views/material/image/index.vue

@@ -7,7 +7,9 @@
         :list="folderPath"
         @click-path="onClickPath"
       />
-      <div v-if="lastestUsedSearchKey" class="">{{$i18n.t("gather.image")}}</div>
+      <div v-if="lastestUsedSearchKey" class="">
+        {{ $i18n.t("gather.image") }}
+      </div>
     </div>
     <div class="second-line">
       <template v-if="!searchKey">
@@ -17,45 +19,47 @@
             @click="onUploadFile"
             class="ui-button submit"
           >
-            <span>{{upload_material}}</span>
-            <i
-              class="iconfont icon-material_prompt"
-              v-tooltip="img_size"
-            />
+            <span>{{ upload_material }}</span>
+            <i class="iconfont icon-material_prompt" v-tooltip="img_size" />
             <upload
               ref="uploadFile"
               :failString="img_fail"
               :limitFailStr="img_limit"
-               accept-type="image/png,image/jpeg,image/jpg"
-               media-type="image"
+              accept-type="image/png,image/jpeg,image/jpg"
+              media-type="image"
               :limit="10"
               @file-change="onFileChange"
             ></upload>
           </button>
         </div>
-        <button
-          class="ui-button submit"
-          @click="isShowNewFolder = true"
-        >
-          {{$i18n.t(`gather.new_folder`)}}
+        <button class="ui-button submit" @click="isShowNewFolder = true">
+          {{ $i18n.t(`gather.new_folder`) }}
         </button>
         <button
           class="ui-button cancel"
-          :class="{disable: selectedList.length === 0}"
+          :class="{ disable: selectedList.length === 0 }"
           @click="onClickMoveFolder"
         >
-          {{$i18n.t(`gather.move_folder`)}}
+          {{ $i18n.t(`gather.move_folder`) }}
         </button>
       </template>
       <div class="filter">
-        <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
-          <i class="iconfont icon-works_search search" ></i>
+        <div
+          :class="{ active: isFilterFocus }"
+          @focusin="onFilterFocus"
+          @focusout="onFilterBlur"
+        >
+          <i class="iconfont icon-works_search search"></i>
           <input
             type="text"
             v-model="searchKey"
             :placeholder="serch_material"
           />
-          <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
+          <i
+            v-if="searchKey"
+            @click="searchKey = ''"
+            class="iconfont icontoast_red del"
+          ></i>
         </div>
       </div>
     </div>
@@ -77,17 +81,21 @@
       >
         <!-- 插到tableList组件各个header插槽，并通过插槽的headerItem作用域拿到表头各项 -->
         <div slot-scope="{ headerItem }" slot="header">
-          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`)  }}
+          {{ headerItem.name && $i18n.t(`zh_key.${headerItem.name}`) }}
         </div>
         <!-- 内容各单元格 -->
-        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
+        <div
+          slot-scope="{ itemData, lineData, headerItem }"
+          slot="tableItem"
+          style="width: 100%"
+        >
           <div v-if="headerItem.canclick" class="handle">
             <i
               class="iconfont icon-material_operation_editor hover-tips"
               @click="onClickRename(lineData)"
             >
               <div>
-                <div class="remark">{{rename}}</div>
+                <div class="remark">{{ rename }}</div>
               </div>
             </i>
             <i
@@ -95,7 +103,7 @@
               @click="del(lineData)"
             >
               <div>
-                <div class="remark">{{deltips}}</div>
+                <div class="remark">{{ deltips }}</div>
               </div>
             </i>
           </div>
@@ -103,29 +111,29 @@
             v-else-if="headerItem.type == 'image'"
             class="img"
             :class="{
-              dirIcon: lineData.type === 'dir'
+              dirIcon: lineData.type === 'dir',
             }"
           >
             <img
               :id="'img' + lineData.id"
-              :src="lineData.type === 'dir' ? require('@/assets/images/icons/folder-blue.png') : itemData + $imgsuffix"
+              :src="
+                lineData.type === 'dir'
+                  ? require('@/assets/images/icons/folder-blue.png')
+                  : itemData + $imgsuffix
+              "
               alt=""
-              @click="lineData.type === 'dir' ? onClickFolder(lineData) : previewImage(lineData)"
+              @click="
+                lineData.type === 'dir'
+                  ? onClickFolder(lineData)
+                  : previewImage(lineData)
+              "
             />
           </div>
 
-
-
           <!-- 文字型单元格 -->
-          <div
-            v-else
-            class="textItem"
-          >
-          
-          
+          <div v-else class="textItem">
             <!-- 名称 -->
             <div v-if="headerItem.key === 'name'" class="name">
-              
               <!-- 不是搜索出来的 -->
               <div v-if="!lastestUsedSearchKey" class="not-search-res">
                 <!-- 文件夹名称 -->
@@ -142,22 +150,25 @@
                 </div>
               </div>
               <!-- end of 不是搜索出来的 -->
-              
+
               <!-- 搜索出来的 -->
               <div v-if="lastestUsedSearchKey" class="search-res">
                 <!-- 文件夹名称 -->
-                <div
-                  v-if="lineData.type === 'dir'"
-                  class="dirName"
-                >
-                  <div
-                    class="self-name"
-                    @click="onClickFolder(lineData)"
-                  >
+                <div v-if="lineData.type === 'dir'" class="dirName">
+                  <div class="self-name" @click="onClickFolder(lineData)">
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    目录
+                    <span
+                      class="parent-name"
+                      @click="onClickParentFolder(lineData)"
+                      >{{
+                        lineData.dirId === 1
+                          ? $i18n.t("gather.root_dir")
+                          : lineData.dirName
+                      }}</span
+                    >
                   </div>
                 </div>
                 <!-- 素材名称 -->
@@ -166,28 +177,30 @@
                     {{ itemData || "-" }}
                   </div>
                   <div class="parent-name-wrap">
-                    目录 <span class="parent-name" @click="onClickParentFolder(lineData)">{{lineData.dirId === 1 ? $i18n.t('gather.root_dir') : lineData.dirName}}</span>
+                    目录
+                    <span
+                      class="parent-name"
+                      @click="onClickParentFolder(lineData)"
+                      >{{
+                        lineData.dirId === 1
+                          ? $i18n.t("gather.root_dir")
+                          : lineData.dirName
+                      }}</span
+                    >
                   </div>
                 </div>
               </div>
               <!-- end of 搜索出来的 -->
-              
             </div>
             <!-- end of 名称 -->
-            
-            
+
             <!-- 不是名称 -->
             <div v-else class="not-name">
               {{ itemData || "-" }}
             </div>
             <!-- end of 不是名称 -->
-
-            
           </div>
           <!-- end of 文字型单元格 -->
-
-
-
         </div>
       </tableList>
       <UploadTaskList
@@ -197,28 +210,38 @@
         :targetFolderId="lastestUsedSearchKey ? -1 : currentFolderId"
         @cancel-task="onCancelTask"
       />
-      <div class="total-number" v-if="list.length !== 0 || hasMoreData">{{had_load}}</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
+      <div class="total-number" v-if="list.length !== 0 || hasMoreData">
+        {{ had_load }}
+      </div>
+      <div
+        class="nodata"
+        v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey"
+      >
         <img :src="$noresult" alt="" />
-        <span>{{no_serch_result}}</span>
+        <span>{{ no_serch_result }}</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
+      <div
+        class="nodata"
+        v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey"
+      >
         <img :src="config.empty" alt="" />
-        <span>{{no_material_result}}</span>
-        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">{{upload_material}}</button>
+        <span>{{ no_material_result }}</span>
+        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">
+          {{ upload_material }}
+        </button>
       </div>
     </div>
 
     <CreateFolder
       v-if="isShowNewFolder"
-      :validate=validateNewFolderName
+      :validate="validateNewFolderName"
       @close="isShowNewFolder = false"
       @submit="onSubmitNewFolder"
     />
     <RenameFolder
       v-if="isShowRenameFolder"
       :oldName="popupItem.name"
-      :validate=validateRenameFolderName
+      :validate="validateRenameFolderName"
       @close="isShowRenameFolder = false"
       @submit="onSubmitRenameFolder"
     />
@@ -238,8 +261,8 @@
     <preview
       ref="image-previewer"
       :canFullScreen="false"
-      :imageList="list.map(item => item.icon)"
-      :imageTitleList="list.map(item => item.name)"
+      :imageList="list.map((item) => item.icon)"
+      :imageTitleList="list.map((item) => item.name)"
       @click-delete="onClickDeleteInPreview"
     />
   </div>
@@ -255,9 +278,9 @@ import UploadTaskList from "../components/uploadList1.1.0.vue";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/imagePreviewer.vue";
-import { debounce } from "@/utils/other.js"
-import { mapState } from 'vuex';
-import {i18n} from "@/lang"
+import { debounce } from "@/utils/other.js";
+import { mapState } from "vuex";
+import { i18n } from "@/lang";
 import folderMixinFactory from "../folderMixinFactory.js";
 
 import {
@@ -265,18 +288,15 @@ import {
   uploadMaterial,
   editMaterial,
   delMaterial,
-  checkUserSize
+  checkUserSize,
 } from "@/api";
 
-
 const TYPE = "image";
 
-const folderMixin = folderMixinFactory(TYPE)
+const folderMixin = folderMixinFactory(TYPE);
 
 export default {
-  mixins: [
-    folderMixin,
-  ],
+  mixins: [folderMixin],
   components: {
     tableList,
     crumbs,
@@ -303,7 +323,7 @@ export default {
       popupItem: null,
       tabHeader: data,
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
-      lastestUsedSearchKey: '',
+      lastestUsedSearchKey: "",
       isFilterFocus: false,
       searchKey: "",
       list: [],
@@ -313,45 +333,48 @@ export default {
   },
   computed: {
     ...mapState({
-      uploadListForUI: 'uploadStatusListImage',
+      uploadListForUI: "uploadStatusListImage",
     }),
-    had_load(){
-      return i18n.t("gather.had_load",{msg:this.list.length})
-    }
-  },
-  mounted() {
+    had_load() {
+      return i18n.t("gather.had_load", { msg: this.list.length });
+    },
   },
+  mounted() {},
   watch: {
     searchKey: {
       handler: function () {
-        this.refreshListDebounced()
+        this.refreshListDebounced();
       },
       immediate: false,
     },
   },
   methods: {
-    onUploadFile(){
-      checkUserSize({},(data)=>{
+    onUploadFile() {
+      checkUserSize({}, (data) => {
         //判断已用是否大于3G
-        if ((data.data / 1024 / 1024) > 3) {
+        if (data.data / 1024 / 1024 > 3) {
           this.$alert({ content: "空间已满" });
-        }else{
-          this.$refs.uploadFile.click()
+        } else {
+          this.$refs.uploadFile.click();
         }
-      })
+      });
     },
     onFilterFocus() {
-      this.isFilterFocus = true
+      this.isFilterFocus = true;
     },
     onFilterBlur() {
-      this.isFilterFocus = false
+      this.isFilterFocus = false;
     },
-    refreshListDebounced: debounce(function() {
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.$refs['table-list'].requestMoreData()
-    }, 500, false),
+    refreshListDebounced: debounce(
+      function () {
+        this.list = [];
+        this.isRequestingMoreData = false;
+        this.hasMoreData = true;
+        this.$refs["table-list"].requestMoreData();
+      },
+      500,
+      false
+    ),
     handleRename(newName) {
       editMaterial(
         {
@@ -361,12 +384,12 @@ export default {
         () => {
           this.$msg.success(i18n.t("gather.edit_success"));
           const index = this.list.findIndex((eachItem) => {
-            return eachItem.id === this.popupItem.id
-          })
+            return eachItem.id === this.popupItem.id;
+          });
           if (index >= 0) {
-            this.list[index].name = newName
+            this.list[index].name = newName;
           } else {
-            console.error('在素材列表里没找到要重命名的那一项！');
+            console.error("在素材列表里没找到要重命名的那一项！");
           }
           this.showRename = false;
           this.popupItem = null;
@@ -374,15 +397,15 @@ export default {
       );
     },
     onClickRename(lineData) {
-      this.popupItem = lineData
-      if (lineData.type !== 'dir') {
-        this.showRename = true
+      this.popupItem = lineData;
+      if (lineData.type !== "dir") {
+        this.showRename = true;
       } else {
-        this.isShowRenameFolder = true
+        this.isShowRenameFolder = true;
       }
     },
     del(item) {
-      if (item.type === 'dir') {
+      if (item.type === "dir") {
         this.delFolder(item.id, (lastestUsedSearchKey) => {
           getMaterialList(
             {
@@ -394,34 +417,34 @@ export default {
             },
             (data) => {
               const index = this.list.findIndex((eachItem) => {
-                return eachItem.id === item.id
-              })
+                return eachItem.id === item.id;
+              });
               if (index >= 0) {
-                this.list.splice(index, 1)
+                this.list.splice(index, 1);
                 const newData = data.data.list.map((i) => {
                   i.fileSize = changeByteUnit(Number(i.fileSize));
                   return i;
                 });
-                this.list = this.list.concat(newData)
+                this.list = this.list.concat(newData);
                 if (this.list.length === data.data.total) {
-                  this.hasMoreData = false
+                  this.hasMoreData = false;
                 }
                 if (this.list.length === 0) {
-                  this.$refs['image-previewer'].onClickClose()
+                  this.$refs["image-previewer"].onClickClose();
                 }
               } else {
-                console.error('在素材列表里没找到要删除的那一项！');
+                console.error("在素材列表里没找到要删除的那一项！");
               }
 
-              this.isRequestingMoreData = false
-              this.lastestUsedSearchKey = lastestUsedSearchKey
+              this.isRequestingMoreData = false;
+              this.lastestUsedSearchKey = lastestUsedSearchKey;
             },
             () => {
-              this.isRequestingMoreData = false
-              this.lastestUsedSearchKey = lastestUsedSearchKey
+              this.isRequestingMoreData = false;
+              this.lastestUsedSearchKey = lastestUsedSearchKey;
             }
-          )
-        })
+          );
+        });
       } else {
         this.$confirm({
           title: i18n.t("gather.delete_material"),
@@ -430,8 +453,8 @@ export default {
           ok: () => {
             delMaterial(item.id, () => {
               this.$msg.success(i18n.t("gather.delete_success"));
-              this.isRequestingMoreData = true
-              const lastestUsedSearchKey = this.searchKey
+              this.isRequestingMoreData = true;
+              const lastestUsedSearchKey = this.searchKey;
               getMaterialList(
                 {
                   dirId: this.currentFolderId,
@@ -442,33 +465,33 @@ export default {
                 },
                 (data) => {
                   const index = this.list.findIndex((eachItem) => {
-                    return eachItem.id === item.id
-                  })
+                    return eachItem.id === item.id;
+                  });
                   if (index >= 0) {
-                    this.list.splice(index, 1)
+                    this.list.splice(index, 1);
                     const newData = data.data.list.map((i) => {
                       i.fileSize = changeByteUnit(Number(i.fileSize));
                       return i;
                     });
-                    this.list = this.list.concat(newData)
+                    this.list = this.list.concat(newData);
                     if (this.list.length === data.data.total) {
-                      this.hasMoreData = false
+                      this.hasMoreData = false;
                     }
                     if (this.list.length === 0) {
-                      this.$refs['image-previewer'].onClickClose()
+                      this.$refs["image-previewer"].onClickClose();
                     }
                   } else {
-                    console.error('在素材列表里没找到要删除的那一项！');
+                    console.error("在素材列表里没找到要删除的那一项！");
                   }
-  
-                  this.isRequestingMoreData = false
-                  this.lastestUsedSearchKey = lastestUsedSearchKey
+
+                  this.isRequestingMoreData = false;
+                  this.lastestUsedSearchKey = lastestUsedSearchKey;
                 },
                 () => {
-                  this.isRequestingMoreData = false
-                  this.lastestUsedSearchKey = lastestUsedSearchKey
+                  this.isRequestingMoreData = false;
+                  this.lastestUsedSearchKey = lastestUsedSearchKey;
                 }
-              )
+              );
             });
           },
         });
@@ -476,9 +499,9 @@ export default {
     },
     previewImage(targetItem) {
       const index = this.list.findIndex((eachItem) => {
-        return eachItem.id === targetItem.id
-      })
-      this.$refs['image-previewer'].show(index)
+        return eachItem.id === targetItem.id;
+      });
+      this.$refs["image-previewer"].show(index);
     },
     onFileChange(e) {
       e.files.forEach((eachFile, i) => {
@@ -495,10 +518,16 @@ export default {
           return;
         }
 
-        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
+        if (
+          eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50
+        ) {
           setTimeout(() => {
             this.$msg({
-              message: `“${eachFile.name}”${i18n.t("gather.too_long_word")}`,
+              message: `“${
+                eachFile.name.substring(0, 50) +
+                "..." +
+                eachFile.name.split(".")[1]
+              }”${i18n.t("gather.too_long_word")}`,
               type: "warning",
             });
           }, i * 100);
@@ -509,13 +538,13 @@ export default {
           title: eachFile.name,
           ifKnowProgress: true,
           progress: 0,
-          status: 'LOADING',
+          status: "LOADING",
           statusText: i18n.t("gather.uploading_material"),
           uid: `u_${this.$randomWord(true, 8, 8)}`,
           abortHandler: null,
           parentFolderId: this.currentFolderId,
         };
-        
+
         itemInUploadList.abortHandler = uploadMaterial(
           {
             dirId: this.currentFolderId,
@@ -523,26 +552,30 @@ export default {
             temId: itemInUploadList.uid,
             type: TYPE,
           },
-          () => { // 上传成功
+          () => {
+            // 上传成功
             const index = this.uploadListForUI.findIndex((eachItem) => {
-              return eachItem.uid === itemInUploadList.uid
-            })
-            this.uploadListForUI.splice(index, 1)
-            this.refreshListDebounced()
+              return eachItem.uid === itemInUploadList.uid;
+            });
+            this.uploadListForUI.splice(index, 1);
+            this.refreshListDebounced();
           },
           (err) => {
-            if (err.statusText === 'abort') { // 用户取消了上传任务。
+            if (err.statusText === "abort") {
+              // 用户取消了上传任务。
               const index = this.uploadListForUI.findIndex((eachItem) => {
-                return eachItem.uid === itemInUploadList.uid
-              })
-              this.uploadListForUI.splice(index, 1)
+                return eachItem.uid === itemInUploadList.uid;
+              });
+              this.uploadListForUI.splice(index, 1);
             } else {
-              itemInUploadList.status = 'FAIL'
-              itemInUploadList.statusText = i18n.t("gather.material_upload_fail")
+              itemInUploadList.status = "FAIL";
+              itemInUploadList.statusText = i18n.t(
+                "gather.material_upload_fail"
+              );
             }
           },
           (progress) => {
-            itemInUploadList.progress = progress
+            itemInUploadList.progress = progress;
           }
         );
 
@@ -551,17 +584,17 @@ export default {
     },
     onCancelTask(uid) {
       const index = this.uploadListForUI.findIndex((eachItem) => {
-        return eachItem.uid === uid
-      })
-      if (this.uploadListForUI[index].status === 'LOADING') {
-        this.uploadListForUI[index].abortHandler.abort()
+        return eachItem.uid === uid;
+      });
+      if (this.uploadListForUI[index].status === "LOADING") {
+        this.uploadListForUI[index].abortHandler.abort();
       } else {
-        this.uploadListForUI.splice(index, 1)
+        this.uploadListForUI.splice(index, 1);
       }
     },
     getMoreMaterialItem() {
-      this.isRequestingMoreData = true
-      const lastestUsedSearchKey = this.searchKey
+      this.isRequestingMoreData = true;
+      const lastestUsedSearchKey = this.searchKey;
       getMaterialList(
         {
           dirId: this.currentFolderId,
@@ -572,33 +605,32 @@ export default {
         },
         (data) => {
           const newData = data.data.list.map((i) => {
-            if (i.type !== 'dir') {
+            if (i.type !== "dir") {
               i.fileSize = changeByteUnit(Number(i.fileSize));
             }
             return i;
           });
-          this.list = this.list.concat(newData)
+          this.list = this.list.concat(newData);
           if (this.list.length === data.data.total) {
-            this.hasMoreData = false
+            this.hasMoreData = false;
           }
-          this.isRequestingMoreData = false
-          this.lastestUsedSearchKey = lastestUsedSearchKey
+          this.isRequestingMoreData = false;
+          this.lastestUsedSearchKey = lastestUsedSearchKey;
         },
         () => {
-          this.isRequestingMoreData = false
-          this.lastestUsedSearchKey = lastestUsedSearchKey
+          this.isRequestingMoreData = false;
+          this.lastestUsedSearchKey = lastestUsedSearchKey;
         }
       );
     },
     onClickDeleteInPreview(index) {
-      this.del(this.list[index])
+      this.del(this.list[index]);
     },
   },
 };
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
 <style lang="less" scoped>
 @import "../style.less";
-</style>
+</style>

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -233,7 +233,7 @@
       >
         <img :src="config.empty" alt="" />
         <span>{{ no_material_result }}</span>
-        <button @click="$refs.uploadFile.click();" class="upload-btn-in-table">
+        <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">
           {{ upload_material }}
         </button>
       </div>
@@ -363,6 +363,11 @@ export default {
     had_load() {
       return i18n.t("gather.had_load", { msg: this.list.length });
     },
+    getSubstrName() {
+      return (name) => {
+        return name.length > 10 ? String(name).substring(0, 10) + "..." : name;
+      };
+    },
   },
   mounted() {},
   watch: {
@@ -648,7 +653,9 @@ export default {
         if (eachFile.type.indexOf("jpeg") <= -1) {
           setTimeout(() => {
             this.$msg({
-              message: `“${eachFile.name}”${i18n.t("gather.pano_fail")}`,
+              message: `“${eachFile.name}”${i18n.t(
+                "gather.pano_fail"
+              )}`,
               type: "warning",
             });
           }, i * 100);
@@ -660,10 +667,15 @@ export default {
         ) {
           setTimeout(() => {
             this.$msg({
-              message: `“${eachFile.name}”${i18n.t("gather.too_long_word")}`,
+              message: `“${
+                eachFile.name.substring(0, 50) +
+                "..." +
+                eachFile.name.split(".")[1]
+              }”${i18n.t("gather.too_long_word")}`,
               type: "warning",
             });
           }, i * 100);
+          
           return;
         }
 

packages/qjkankan-editor/src/views/material/video/index.vue

@@ -495,7 +495,11 @@ export default {
         if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
           setTimeout(() => {
             this.$msg({
-              message: `“${eachFile.name}”${i18n.t("gather.too_long_word_video")}`,
+              message: `“${
+                eachFile.name.substring(0, 50) +
+                "..." +
+                eachFile.name.split(".")[1]
+              }”${i18n.t("gather.too_long_word_video")}`,
               type: "warning",
             });
           }, i * 100);