编辑器-导航-场景重命名功能

src/Store/index.js

@@ -12,6 +12,7 @@ const store = new Vuex.Store({
     userNickName: '',
 
     info: '',
+    // todo: 新版本开发完毕后就不需要这个了
     backupInfo: '',
     showInfo: '',
     hotspot: '',

src/components/sceneGroupInEditor.vue

@@ -49,7 +49,8 @@
               paddingLeft: sceneItemPaddingLeft,
             }"
             :sceneInfo="item"
-          ></SceneInGroupInEditor>
+            @rename="onRenameScene"
+          />
         </div>
       </template>
       <template v-else>
@@ -62,7 +63,8 @@
             paddingLeft: sceneItemPaddingLeft,
           }"
           :sceneInfo="item"
-        ></SceneInGroupInEditor>
+          @rename="onRenameScene"
+        />
       </template>
     </div>
   </div>
@@ -113,6 +115,9 @@ export default {
         this.isExpanded = false
       }
     },
+    onRenameScene(...params) {
+      this.$emit('renameScene', ...params)
+    }
   },
   mounted() {
     this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)

src/components/sceneInGroupInEditor.vue

@@ -4,11 +4,20 @@
   >
     <img :src="sceneInfo.icon + ossImagePreviewUrlSuffix()" alt="" class="scene-image">
     <div class="right">
-      <span class="scene-title" v-title="sceneInfo.sceneTitle">{{sceneInfo.sceneTitle}}</span>
+      <span v-if="!isRenaming" class="scene-title" v-title="sceneInfo.sceneTitle">{{sceneInfo.sceneTitle}}</span>
+      <input v-if="isRenaming" class="scene-title-input" v-model="newName"
+        ref="input-for-rename"
+        maxlength="50"
+        placeholder="输入名字"
+        @blur="onInputNewNameComplete"
+        @keydown.enter="onInputEnter"
+      />
       <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>
+          <i class="iconfont icon-editor_list_edit icon-edit" v-tool-tip-wrapper
+            @click="onClickForRename"
+          >
             <TooltipInEditor
               :text="'重命名'"
             ></TooltipInEditor>
@@ -39,6 +48,12 @@ export default {
       require: true,
     },
   },
+  data() {
+    return {
+      isRenaming: false,
+      newName: '',
+    }
+  },
   methods: {
     ossImagePreviewUrlSuffix,
     translateSceneType(type) {
@@ -47,6 +62,21 @@ export default {
       } else {
         return '三维'
       }
+    },
+    onClickForRename() {
+      this.isRenaming = true
+      this.newName = this.sceneInfo.sceneTitle
+      this.$nextTick(() => {
+        this.$refs['input-for-rename'].focus()
+      })
+    },
+    onInputNewNameComplete() {
+      this.isRenaming = false
+      this.$emit('rename', this.sceneInfo.id, this.newName)
+      this.newName = ''
+    },
+    onInputEnter() {
+      this.isRenaming = false // 会导致input blur，进而触发onInputNewNameComplete
     }
   }
 }
@@ -92,10 +122,22 @@ export default {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.6);
     }
+    .scene-title-input {
+      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;
+      }
+    }
     .right-bottom {
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-end;
       .scene-type {
         color: #0076F6;
         line-height: 16px;

src/views/navigation/groupSettings.vue

@@ -19,6 +19,7 @@
       :key=item.id
       :groupNode="item"
       :level="1"
+      @renameScene="onRenameScene"
     />
 
     <div class="pano-con">
@@ -248,6 +249,12 @@ export default {
   },
 
   methods: {
+    onRenameScene(sceneId, newName) {
+      const renameTarget = this.info.scenes.find((item) => {
+        return item.id === sceneId
+      })
+      renameTarget.sceneTitle = newName
+    },
     hadnleAddGroup() {
       this.$emit("addGroup", { type: 1, oper: "add", item: {} });
     },