编辑器-导航：分组中的场景相关代码提取为组件

src/components/sceneGroupInEditor.vue

@@ -43,65 +43,26 @@
             :groupNode="item"
             :level="level + 1"
           />
-          <div
+          <SceneInGroupInEditor
             v-else
-            class="scene-item"
             :style="{
               paddingLeft: sceneItemPaddingLeft,
             }"
-          >
-            <img :src="item.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
-            <div class="right">
-              <span class="scene-title" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
-              <div class="right-bottom">
-                <span class="scene-type">{{translateSceneType(item.type)}}</span>
-                <div class="icons">
-                  <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>
-                    <TooltipInEditor
-                      :text="'删除'"
-                    ></TooltipInEditor>
-                  </i>
-                </div>
-              </div>
-            </div>
-          </div>
+            :sceneInfo="item"
+          ></SceneInGroupInEditor>
         </div>
       </template>
       <template v-else>
         <!-- 自动生成的默认二级分组不显示，里边的内容显示成直属于一级分组的效果。 -->
-        <div
+        <SceneInGroupInEditor
           v-for="(item) of groupNode.children[0].children"
           :key=item.id
           class="scene-item"
           :style="{
             paddingLeft: sceneItemPaddingLeft,
           }"
-        >
-          <img :src="item.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
-          <div class="right">
-            <span class="scene-title" v-title="item.sceneTitle">{{item.sceneTitle}}</span>
-            <div class="right-bottom">
-              <span class="scene-type">{{translateSceneType(item.type)}}</span>
-              <div class="icons">
-                <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>
-                  <TooltipInEditor
-                    :text="'删除'"
-                  ></TooltipInEditor>
-                </i>
-              </div>
-            </div>
-          </div>
-        </div>
+          :sceneInfo="item"
+        ></SceneInGroupInEditor>
       </template>
     </div>
   </div>
@@ -109,12 +70,13 @@
 
 <script>
 import TooltipInEditor from '@/components/TooltipInEditor.vue'
-import { ossImagePreviewUrlSuffix } from '@/utils/other.js'
+import SceneInGroupInEditor from "@/components/sceneInGroupInEditor.vue";
 
 export default {
   name: 'SceneGroup',
   components: {
     TooltipInEditor,
+    SceneInGroupInEditor,
   },
   props: {
     groupNode: {
@@ -151,14 +113,6 @@ export default {
         this.isExpanded = false
       }
     },
-    ossImagePreviewUrlSuffix,
-    translateSceneType(type) {
-      if (type === 'pano') {
-        return '全景'
-      } else {
-        return '三维'
-      }
-    }
   },
   mounted() {
     this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)
@@ -248,76 +202,5 @@ export default {
       }
     }
   }
-  .group-content {
-    .scene-item {
-      margin-top: 6px;
-      margin-left: -12px;
-      margin-right: -10px;
-      padding-right: 10px;
-      padding-top: 10px;
-      padding-bottom: 10px;
-      display: flex;
-      border-radius: 4px;
-      &:hover {
-        background: #313131;
-        .icons {
-          display: block !important;
-        }
-      }
-      .scene-image {
-        flex: 0 0 auto;
-        width: 64px;
-        height: 64px;
-        background: #B0B0B0;
-        border-radius: 2px;
-        object-fit: cover;
-      }
-      .right {
-        margin-left: 10px;
-        width: 0px;
-        flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .scene-title {
-          word-break: break-all;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          font-size: 14px;
-          color: rgba(255, 255, 255, 0.6);
-        }
-        .right-bottom {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .scene-type {
-            color: #0076F6;
-            line-height: 16px;
-          }
-          .icons {
-            display: none;
-            i {
-              font-size: 16px;
-              cursor: pointer;
-              color: rgba(255, 255, 255, 0.6);
-            }
-            .icon-edit {
-              &:hover {
-                color: #0076F6;
-              }
-            }
-            .icon-delete {
-              margin-left: 11px;
-              &:hover {
-                color: #fa5555;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }
 </style>

src/components/sceneInGroupInEditor.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    class="scene-item"
+  >
+    <img :src="sceneInfo.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
+    <div class="right">
+      <span class="scene-title" v-title="sceneInfo.sceneTitle">{{sceneInfo.sceneTitle}}</span>
+      <div class="right-bottom">
+        <span class="scene-type">{{translateSceneType(sceneInfo.type)}}</span>
+        <div class="icons">
+          <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>
+            <TooltipInEditor
+              :text="'删除'"
+            ></TooltipInEditor>
+          </i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
+import { ossImagePreviewUrlSuffix } from '@/utils/other.js'
+
+export default {
+  name: 'SceneInGroupInEditor', 
+  components: {
+    TooltipInEditor,
+  },
+  props: {
+    sceneInfo: {
+      type: Object,
+      require: true,
+    },
+  },
+  methods: {
+    ossImagePreviewUrlSuffix,
+    translateSceneType(type) {
+      if (type === 'pano') {
+        return '全景'
+      } else {
+        return '三维'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.scene-item {
+  margin-top: 6px;
+  margin-left: -12px;
+  margin-right: -10px;
+  padding-right: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  display: flex;
+  border-radius: 4px;
+  &:hover {
+    background: #313131;
+    .icons {
+      display: block !important;
+    }
+  }
+  .scene-image {
+    flex: 0 0 auto;
+    width: 64px;
+    height: 64px;
+    background: #B0B0B0;
+    border-radius: 2px;
+    object-fit: cover;
+  }
+  .right {
+    margin-left: 10px;
+    width: 0px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .scene-title {
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .right-bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .scene-type {
+        color: #0076F6;
+        line-height: 16px;
+      }
+      .icons {
+        display: none;
+        i {
+          font-size: 16px;
+          cursor: pointer;
+          color: rgba(255, 255, 255, 0.6);
+        }
+        .icon-edit {
+          &:hover {
+            color: #0076F6;
+          }
+        }
+        .icon-delete {
+          margin-left: 11px;
+          &:hover {
+            color: #fa5555;
+          }
+        }
+      }
+    }
+  }
+}
+</style>