编辑器-导航：分组组件的展示功能

src/components/sceneGroupInEditor.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="scene-group">
-    <div class="top-bar" :class="level === 1 ? '' : 'indent-more'" @click="onClick">
+    <div class="top-bar" @click="onClick"
+     :style="{
+        paddingLeft: topBarPaddingLeft,
+      }"
+    >
       <i class="iconfont icon-edit_input_arrow icon-expand" :class="isExpanded ? '' : 'collapsed'"></i>
       <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="name">{{name}}</span>
+      <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>
         <TooltipInEditor
           :text="'新增二级分组'"
@@ -28,19 +32,51 @@
     </div>
 
     <div class="group-content" v-if="isExpanded">
-      <component
-        :is="'SceneGroup'"
-        v-if="level === 1"
-        :level="2"
-        id="testId2"
-        name="asdfsfd"
-      />
+      <div
+        v-for="(item) of groupNode.children"
+        :key=item.id
+      >
+        <component
+          :is="'SceneGroup'"
+          v-if="!item.type"
+          :groupNode="item"
+          :level="level + 1"
+        />
+        <div
+          v-else
+          class="scene-item"
+          :style="{
+            paddingLeft: sceneItemPaddingLeft,
+          }"
+        >
+          <img :src="item.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
+          <div class="right">
+            <span class="scene-title">{{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>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import TooltipInEditor from '@/components/TooltipInEditor.vue'
+import { ossImagePreviewUrlSuffix } from '@/utils/other.js'
 
 export default {
   name: 'SceneGroup',
@@ -48,14 +84,10 @@ export default {
     TooltipInEditor,
   },
   props: {
-    id: {
-      type: String,
+    groupNode: {
+      type: Object,
       required: true,
     },
-    name: {
-      type: String,
-      required: true
-    },
     level: {
       type: Number,
       default: 1,
@@ -66,18 +98,34 @@ export default {
       isExpanded: false,
     }
   },
+  computed: {
+    topBarPaddingLeft() {
+      return 12 + (this.level - 1) * 12 + 'px' 
+    },
+    sceneItemPaddingLeft() {
+      return 18 + this.level * 12 + 'px' 
+    },
+  },
   methods: {
     onClick() {
       this.isExpanded = !this.isExpanded
       if (this.isExpanded) {
-        this.$bus.emit('scene-group-expanded', this.id, this.level)
+        this.$bus.emit('scene-group-expanded', this.groupNode.id, this.level)
       }
     },
     onOtherSceneGroupExpanded(id, level) {
-      if (id !== this.id && level === this.level) {
+      if (id !== this.groupNode.id && level === this.level) {
         this.isExpanded = false
       }
     },
+    ossImagePreviewUrlSuffix,
+    translateSceneType(type) {
+      if (type === 'pano') {
+        return '全景'
+      } else {
+        return '三维'
+      }
+    }
   },
   mounted() {
     this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)
@@ -99,11 +147,7 @@ export default {
     align-items: center;
     margin-left: -12px;
     margin-right: -10px;
-    padding-left: 12px;
     padding-right: 10px;
-    &.indent-more {
-      padding-left: 22px;
-    }
     &:hover {
       background: #313131;
       > .group-name {
@@ -171,5 +215,76 @@ 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/utils/other.js

@@ -111,4 +111,8 @@ export function deepClone(target) {
   }
   // 返回最终结果
   return result
+}
+
+export function ossImagePreviewUrlSuffix(downScaleRate = 10) {
+  return `?x-oss-process=image/resize,p_${downScaleRate}&${Math.random()}`
 }

src/views/navigation/groupSettings.vue

@@ -15,10 +15,12 @@
     </button>
 
     <SceneGroupInEditor
-      id="testId"
-      name="testName testName testName testName"
+      v-for="(item) of catalogTopology"
+      :key=item.id
+      :groupNode="item"
+      :level="1"
     />
-    
+
     <div class="pano-con">
       <tabList
         :deviation="-35"
@@ -151,6 +153,7 @@ export default {
     ...mapGetters({
       vrlist: "vrlist",
       info: "info",
+      catalogTopology: 'catalogTopology',
     }),
     oneWidth() {
       let tmp = $("#tablist").width();

src/views/navigation/index.vue

@@ -367,7 +367,6 @@ export default {
 <style lang="less" scoped>
 .editor-navigation {
   height: 100%;
-  white-space: nowrap;
   display: flex;
   .group-settings-area {
     width: 300px;