编辑器-导航：分组重命名功能

src/components/sceneGroupInEditor.vue

@@ -11,48 +11,58 @@
       <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="groupNode.name">{{groupNode.name}}</span>
-      <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
-      >
-        <TooltipInEditor
-          :text="'新增全景图或三维场景'"
-        ></TooltipInEditor>
-      </i>
-      <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
-        @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"
+      <template v-if="!isRenaming">
+        <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="'新增二级分组'"
+          ></TooltipInEditor>
+        </i>
+        <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
+          @click="onClickForRename"
+        >
+          <TooltipInEditor
+            :text="'重命名'"
+          ></TooltipInEditor>
+        </i>
+        <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>
+      </template>
+      <input v-if="isRenaming" class="group-title-input" v-model="newName"
+        ref="input-for-rename"
+        maxlength="50"
+        placeholder="输入名字"
+        @blur="onInputNewNameComplete"
+        @keydown.enter="onInputEnter"
+      />
     </div>
 
     <div class="group-content" v-if="isExpanded">
@@ -68,6 +78,7 @@
             :level="level + 1"
             @renameScene="onRenameScene"
             @deleteScene="onDeleteScene"
+            @renameGroup="onInnerGroupRename"
             @deleteGroup="onInnerGroupConfirmDelete"
           />
           <SceneInGroupInEditor
@@ -121,6 +132,8 @@ export default {
   data() {
     return {
       isExpanded: false,
+      isRenaming: false,
+      newName: '',
       isConfirmingDeletion: false,
     }
   },
@@ -147,12 +160,33 @@ export default {
         this.isExpanded = false
       }
     },
+
     onRenameScene(...params) {
       this.$emit('renameScene', ...params)
     },
     onDeleteScene(...params) {
       this.$emit('deleteScene', ...params)
     },
+
+    onClickForRename() {
+      this.isRenaming = true
+      this.newName = this.groupNode.name
+      this.$nextTick(() => {
+        this.$refs['input-for-rename'].focus()
+      })
+    },
+    onInputNewNameComplete() {
+      this.isRenaming = false
+      this.$emit('renameGroup', this.groupNode.id, this.level, this.newName)
+      this.newName = ''
+    },
+    onInputEnter() {
+      this.isRenaming = false // 会导致input blur，进而触发onInputNewNameComplete
+    },
+    onInnerGroupRename(...params) {
+      this.$emit('renameGroup', ...params)
+    },
+
     onRequestForDelete() {
       this.isConfirmingDeletion = true
     },
@@ -170,7 +204,6 @@ export default {
       this.isConfirmingDeletion = false
     },
     onInnerGroupConfirmDelete(...params) {
-      console.log('jlkjljlkj');
       this.$emit('deleteGroup', ...params)
     }
   },
@@ -264,7 +297,7 @@ export default {
         color: #fa5555;
       }
     }
-    .deletion-confirm-wrap {
+    > .deletion-confirm-wrap {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -300,6 +333,21 @@ export default {
         }
       }
     }
+    > .group-title-input {
+      margin-left: 6px;
+      flex: 1 1 auto;
+      width: 1px;
+      height: 30px;
+      background: #1A1B1D;
+      border-radius: 2px;
+      border: 1px solid #404040;
+      color: #fff;
+      font-size: 14px;
+      padding: 0 10px 0 16px;
+      &:focus {
+        border-color: #0076F6;
+      }
+    }
   }
 }
 </style>

src/views/navigation/groupSettings.vue

@@ -24,6 +24,7 @@
         :level="1"
         @renameScene="onRenameScene"
         @deleteScene="onDeleteScene"
+        @renameGroup="onRenameGroup"
         @deleteGroup="onDeleteGroup"
       />
 
@@ -268,6 +269,23 @@ export default {
       this.delFirstScene()
       this.$msg.success("删除成功")
     },
+    onRenameGroup(groupId, level, newName) {
+      if (level === 1) {
+        const target = this.info.catalogRoot.find((item) => {
+          return item.id === groupId
+        })
+        target.name = newName
+        this.$msg.success('操作成功')
+      } else if (level === 2) {
+        const target = this.info.catalogs.find((item) => {
+          return item.id === groupId
+        })
+        target.name = newName
+        this.$msg.success('操作成功')
+      } else {
+        console.error('invalid level!');
+      }
+    },
     onDeleteGroup(groupId, groupLevel) {
       const deleteGroupLevel2 = (groupId) => {
         // 删除所属一级分组中的children中元素