改善代码可读性；编辑器-导航-分组管理组件开始修改

src/framework/EditorMain.vue

@@ -68,9 +68,8 @@ export default {
 
   .app-view {
     display: flex;
-    width: 236px;
+    width: 100%;
     height: 100%;
-    z-index: 1000;
     > div {
       display: flex;
       width: 100%;

src/framework/Toolbar.vue

@@ -47,6 +47,7 @@ import tabList from "@/components/tablist";
 let frame;
 let $scroll = null;
 export default {
+  name: 'whatisthis',
   components: {tabList},
   data() {
     return {

src/views/navigation/Toolbar.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="app-view-toolbar app-view-full-toolbar">
+  <div class="group-settings">
+    <div class="ui-title-big">场景导航
+      <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
+        <TooltipInEditor
+          :text="'开场提示仅适用于全景图。若初始场景为三维模\n型，以下开场提示不适用。'"
+          :framePosLeft="'30px'"
+          :arrowPosLeft="'calc(50% - 24px)'"
+        ></TooltipInEditor>
+      </i>
+    </div>
     <div class="tips">
       <div class="ui-remark">
         1、请自定义分组并添加全景素材或四维看看相机拍摄的场景素材；
@@ -124,6 +133,7 @@
 </template>
 
 <script>
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
 import tabList from "@/components/tablist";
 import browser from "@/utils/browser";
 
@@ -131,6 +141,11 @@ import draggable from "vuedraggable";
 import { mapGetters } from "vuex";
 
 export default {
+  components: {
+    TooltipInEditor,
+    draggable,
+    tabList,
+  },
   computed: {
     ...mapGetters({
       vrlist: "vrlist",
@@ -229,7 +244,6 @@ export default {
   },
 
   methods: {
-
     hadnleAddGroup() {
       this.$emit("addGroup", { type: 1, oper: "add", item: {} });
     },
@@ -346,13 +360,15 @@ export default {
       }
     })
   },
-  components: {
-    draggable,
-    tabList,
-  },
 };
 </script>
 <style lang="less" scoped>
+.group-settings {
+  .ui-title-big {
+    margin-top: 24px;
+    margin-left: 20px;
+  }
+}
 .tips {
   width: 100%;
   .ui-remark {

src/views/navigation/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
-    <setting @select="handleInitScene"></setting>
-    <toolbar
+    <GroupSettings
+      class="group-settings-area"
       @catalog="data=>activeCataLog = data"
       @addPano="onAddPano"
       @addGroup="onAddGroup"
       @addScene="onAddScene"
       @rename="onRename"
-    ></toolbar>
+    ></GroupSettings>
+    <InitialSceneSettings class="initial-scene-settings-area" @select="handleInitScene"></InitialSceneSettings>
     <popup v-show="showAddGroup" :can-close="false">
       <div class="ui-message ui-message-confirm dark" style="width: 400px">
         <div class="ui-message-header">
@@ -99,8 +100,8 @@
   </div>
 </template>
 <script>
-import Setting from "./Setting";
-import Toolbar from "./Toolbar";
+import InitialSceneSettings from "./initialSceneSettings";
+import GroupSettings from "./groupSettings";
 import Popup from "@/components/shared/popup";
 import {
   getSceneList,
@@ -114,8 +115,8 @@ import { changeByteUnit } from '@/utils/file'
 export default {
   name: "EditorNavigation",
   components: {
-    Setting,
-    Toolbar,
+    InitialSceneSettings,
+    GroupSettings,
     Popup,
     Table,
   },
@@ -363,6 +364,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.group-settings-area {
+  width: calc(100% - 236px);
+}
+.initial-scene-settings-area {
+  width: 236px;
+}
 .dialog {
   position: fixed;
   z-index: 30;

src/views/navigation/Setting.vue

@@ -78,35 +78,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.dialog {
-  position: fixed;
-  z-index: 30;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-}
 .view-setting {
   padding: 10px;
   width: 100%;
-}
-.preview {
-  width: 100%;
-  height: 102px;
-  overflow: hidden;
-  >img{
+  .preview {
     width: 100%;
-    height: 100%;
+    height: 102px;
+    overflow: hidden;
+    >img{
+      width: 100%;
+      height: 100%;
+    }
   }
-}
-.setinit {
-  width: 100%;
-  margin: 15px 0;
-  display: flex;
-  justify-content: space-between;
-  .ui-button {
-    width: 48%;
+  .setinit {
+    width: 100%;
+    margin: 15px 0;
+    display: flex;
+    justify-content: space-between;
+    .ui-button {
+      width: 48%;
+    }
+  }
+  .dialog {
+    position: fixed;
+    z-index: 30;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
   }
 }
 </style>