编辑器-导航：场景删除功能

src/components/sceneGroupInEditor.vue

@@ -42,6 +42,8 @@
             v-if="!item.type"
             :groupNode="item"
             :level="level + 1"
+            @renameScene="onRenameScene"
+            @deleteScene="onDeleteScene"
           />
           <SceneInGroupInEditor
             v-else
@@ -50,6 +52,7 @@
             }"
             :sceneInfo="item"
             @rename="onRenameScene"
+            @delete="onDeleteScene"
           />
         </div>
       </template>
@@ -58,12 +61,12 @@
         <SceneInGroupInEditor
           v-for="(item) of groupNode.children[0].children"
           :key=item.id
-          class="scene-item"
           :style="{
             paddingLeft: sceneItemPaddingLeft,
           }"
           :sceneInfo="item"
           @rename="onRenameScene"
+          @delete="onDeleteScene"
         />
       </template>
     </div>
@@ -117,6 +120,9 @@ export default {
     },
     onRenameScene(...params) {
       this.$emit('renameScene', ...params)
+    },
+    onDeleteScene(...params) {
+      this.$emit('deleteScene', ...params)
     }
   },
   mounted() {

src/components/sceneInGroupInEditor.vue

@@ -14,15 +14,17 @@
       />
       <div class="right-bottom">
         <span class="scene-type">{{translateSceneType(sceneInfo.type)}}</span>
-        <div class="icons">
+        <div class="icons" :class="isConfirmingDeletion ? '' : 'show-on-hover'">
           <i class="iconfont icon-editor_list_edit icon-edit" v-tool-tip-wrapper
-            @click="onClickForRename"
+            @click="onRequestForRename"
           >
             <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="onRequestForDelete"
+          >
             <TooltipInEditor
               :text="'删除'"
             ></TooltipInEditor>
@@ -30,6 +32,12 @@
         </div>
       </div>
     </div>
+    <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
+      v-clickoutside="onRequestForCancelDelete"
+      @click="onConfirmDelete"
+    >
+      删除
+    </div>
   </div>
 </template>
 
@@ -52,6 +60,7 @@ export default {
     return {
       isRenaming: false,
       newName: '',
+      isConfirmingDeletion: false,
     }
   },
   methods: {
@@ -63,7 +72,7 @@ export default {
         return '三维'
       }
     },
-    onClickForRename() {
+    onRequestForRename() {
       this.isRenaming = true
       this.newName = this.sceneInfo.sceneTitle
       this.$nextTick(() => {
@@ -77,6 +86,16 @@ export default {
     },
     onInputEnter() {
       this.isRenaming = false // 会导致input blur，进而触发onInputNewNameComplete
+    },
+    onRequestForDelete() {
+      this.isConfirmingDeletion = true
+    },
+    onRequestForCancelDelete() {
+      this.isConfirmingDeletion = false
+    },
+    onConfirmDelete() {
+      this.$emit('delete', this.sceneInfo.id)
+      this.isConfirmingDeletion = false
     }
   }
 }
@@ -84,6 +103,8 @@ export default {
 
 <style lang="less" scoped>
 .scene-item {
+  position: relative;
+  overflow: hidden;
   margin-top: 6px;
   margin-left: -12px;
   margin-right: -10px;
@@ -94,7 +115,7 @@ export default {
   border-radius: 4px;
   &:hover {
     background: #313131;
-    .icons {
+    .icons.show-on-hover {
       display: block !important;
     }
   }
@@ -163,5 +184,29 @@ export default {
       }
     }
   }
+  .deletion-confirm {
+    position: absolute;
+    top: 0;
+    bottom: 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;
+    }
+  }
 }
 </style>

src/views/navigation/groupSettings.vue

@@ -20,6 +20,7 @@
       :groupNode="item"
       :level="1"
       @renameScene="onRenameScene"
+      @deleteScene="onDeleteScene"
     />
 
     <div class="pano-con">
@@ -255,6 +256,15 @@ export default {
       })
       renameTarget.sceneTitle = newName
     },
+    onDeleteScene(sceneId) {
+      const deleteTargetIdx = this.info.scenes.findIndex((item) => {
+        return item.id === sceneId
+      })
+      this.info.scenes.splice(deleteTargetIdx, 1)
+      this.delFirstScene()
+      this.$msg.success("删除成功")
+    },
+    
     hadnleAddGroup() {
       this.$emit("addGroup", { type: 1, oper: "add", item: {} });
     },