编辑器-导航：场景分组和场景的删除功能优化

src/components/sceneGroupInEditor.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="scene-group">
-    <div class="top-bar" @click="onClick"
-     :style="{
+    <div
+      class="top-bar"
+      :class="isConfirmingDeletion ? '' : 'show-icons-on-hover'"
+      @click="onClickTopBar"
+      :style="{
         paddingLeft: topBarPaddingLeft,
       }"
     >
@@ -9,26 +12,47 @@
       <i v-show="isExpanded" class="iconfont icon-editor_folder_on folder_expalded"></i>
       <i v-show="!isExpanded" class="iconfont icon-editor_folder_off folder_collapsed"></i>
       <span class="group-name" v-title="groupNode.name">{{groupNode.name}}</span>
-      <i v-show="level === 1" class="iconfont icon-editor_list_add icon-add" v-tool-tip-wrapper>
+      <i v-show="level === 1"
+        class="iconfont icon-editor_list_add icon-add"
+        v-tool-tip-wrapper
+      >
         <TooltipInEditor
           :text="'新增二级分组'"
         ></TooltipInEditor>
       </i>
-      <i class="iconfont icon-editor_list_image icon-image" v-tool-tip-wrapper>
+      <i
+        class="iconfont icon-editor_list_image icon-image"
+        v-tool-tip-wrapper
+      >
         <TooltipInEditor
           :text="'新增全景图或三维场景'"
         ></TooltipInEditor>
       </i>
-      <i class="iconfont icon-editor_list_edit icon-edit" v-tool-tip-wrapper>
+      <i
+        class="iconfont icon-editor_list_edit icon-edit"
+        v-tool-tip-wrapper
+      >
         <TooltipInEditor
           :text="'重命名'"
         ></TooltipInEditor>
       </i>
-      <i class="iconfont icon-editor_list_delete icon-delete" v-tool-tip-wrapper>
+      <i
+        class="iconfont icon-editor_list_delete icon-delete"
+        v-tool-tip-wrapper
+        @click.stop="onRequestForDelete"
+      >
         <TooltipInEditor
           :text="'删除'"
         ></TooltipInEditor>
       </i>
+      <div class="deletion-confirm-wrap">
+        <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
+          v-clickoutside="onRequestForCancelDelete"
+          @click.stop="onConfirmDelete"
+        >
+          删除
+        </div>
+      </div>
     </div>
 
     <div class="group-content" v-if="isExpanded">
@@ -96,6 +120,7 @@ export default {
   data() {
     return {
       isExpanded: false,
+      isConfirmingDeletion: false,
     }
   },
   computed: {
@@ -107,7 +132,10 @@ export default {
     },
   },
   methods: {
-    onClick() {
+    onClickTopBar() {
+      if (this.isConfirmingDeletion) {
+        return
+      }
       this.isExpanded = !this.isExpanded
       if (this.isExpanded) {
         this.$bus.emit('scene-group-expanded', this.groupNode.id, this.level)
@@ -123,7 +151,23 @@ export default {
     },
     onDeleteScene(...params) {
       this.$emit('deleteScene', ...params)
-    }
+    },
+    onRequestForDelete() {
+      this.isConfirmingDeletion = true
+    },
+    onRequestForCancelDelete() {
+      if (!this.isConfirmingDeletion) {
+        return
+      }
+      // 先保持isConfirmingDeletion不变，因为onClickTopBar可能要用到
+      setTimeout(() => {
+        this.isConfirmingDeletion = false
+      }, 0);
+    },
+    onConfirmDelete() {
+      // this.$emit('delete', this.sceneInfo.id)
+      this.isConfirmingDeletion = false
+    },
   },
   mounted() {
     this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)
@@ -138,6 +182,7 @@ export default {
 .scene-group {
   margin-top: 6px;
   .top-bar {
+    position: relative;
     color: rgba(255, 255, 255, 0.6);
     height: 40px;
     border-radius: 4px;
@@ -151,6 +196,8 @@ export default {
       > .group-name {
         width: 120px;
       }
+    }
+    &.show-icons-on-hover:hover {
       > .icon-add, .icon-image, .icon-edit, .icon-delete {
         display: block;
       }
@@ -212,6 +259,42 @@ export default {
         color: #fa5555;
       }
     }
+    .deletion-confirm-wrap {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: 44px;
+      overflow: hidden;
+      pointer-events: none;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      > .deletion-confirm {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        background: #FA5555;
+        transition: right 0.3s;
+        cursor: pointer;
+        text-align: center;
+        font-size: 12px;
+        color: #fff;
+        pointer-events: auto;
+        &::after {
+          content: '';
+          height: 100%;
+          vertical-align: middle;
+          display: inline-block;
+        }
+        &.show {
+          right: 0;
+        }
+        &.hide {
+          right: -44px;
+        }
+      }
+    }
   }
 }
 </style>

src/components/sceneInGroupInEditor.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="scene-item"
+    :class="isConfirmingDeletion ? '' : 'not-confirming-deletion'"
   >
     <img :src="sceneInfo.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
     <div class="right">
@@ -14,7 +15,7 @@
       />
       <div class="right-bottom">
         <span class="scene-type">{{translateSceneType(sceneInfo.type)}}</span>
-        <div class="icons" :class="isConfirmingDeletion ? '' : 'show-on-hover'">
+        <div class="icons">
           <i class="iconfont icon-editor_list_edit icon-edit" v-tool-tip-wrapper
             @click="onRequestForRename"
           >
@@ -32,11 +33,13 @@
         </div>
       </div>
     </div>
-    <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
-      v-clickoutside="onRequestForCancelDelete"
-      @click="onConfirmDelete"
-    >
-      删除
+    <div class="deletion-confirm-wrap">
+      <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
+        v-clickoutside="onRequestForCancelDelete"
+        @click="onConfirmDelete"
+      >
+        删除
+      </div>
     </div>
   </div>
 </template>
@@ -104,7 +107,6 @@ export default {
 <style lang="less" scoped>
 .scene-item {
   position: relative;
-  overflow: hidden;
   margin-top: 6px;
   margin-left: -12px;
   margin-right: -10px;
@@ -115,7 +117,9 @@ export default {
   border-radius: 4px;
   &:hover {
     background: #313131;
-    .icons.show-on-hover {
+  }
+  &.not-confirming-deletion:hover {
+    .icons {
       display: block !important;
     }
   }
@@ -184,28 +188,40 @@ export default {
       }
     }
   }
-  .deletion-confirm {
+  .deletion-confirm-wrap {
     position: absolute;
     top: 0;
     bottom: 0;
+    right: 0;
     width: 44px;
-    background: #FA5555;
-    transition: right 0.3s;
-    cursor: pointer;
-    text-align: center;
-    font-size: 12px;
-    color: #fff;
-    &::after {
-      content: '';
-      height: 100%;
-      vertical-align: middle;
-      display: inline-block;
-    }
-    &.show {
-      right: 0;
-    }
-    &.hide {
-      right: -44px;
+    overflow: hidden;
+    pointer-events: none;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    > .deletion-confirm {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: #FA5555;
+      transition: right 0.3s;
+      cursor: pointer;
+      text-align: center;
+      font-size: 12px;
+      color: #fff;
+      pointer-events: auto;
+      &::after {
+        content: '';
+        height: 100%;
+        vertical-align: middle;
+        display: inline-block;
+      }
+      &.show {
+        right: 0;
+      }
+      &.hide {
+        right: -44px;
+      }
     }
   }
 }

src/views/navigation/groupSettings.vue

@@ -386,6 +386,7 @@ export default {
 <style lang="less" scoped>
 .group-settings {
   padding: 24px 20px;
+  overflow: auto;
   > .ui-title-big {
     margin-bottom: 0;
     > .tool-tip-for-editor {