各页面添加全景图预览功能，具体细节还没做

packages/code/src/components/Snapshot.vue

@@ -6,7 +6,7 @@
             enter-active-class="animated fadeIn faster"
             leave-active-class="animated fadeOut faster"
         >
-            <div class="flash" v-if="showFlash"></div>
+        <div class="flash" v-if="showFlash"></div>
         </transition>
         <div class="frame show">
             <div class="corner left-top"></div>

packages/code/src/framework/EditorMain.vue

@@ -40,20 +40,4 @@ export default {
     height: 100%;
   }
 }
-
-.app-view-toolbar {
-  display: flex;
-  position: fixed !important;
-  left: 58px;
-  right: 236px;
-  bottom: 0;
-  height: 260px;
-  overflow: hidden;
-}
-
-.app-view-full-toolbar {
-  height: 100%;
-  padding: 10px;
-  display: block;
-}
 </style>

packages/code/src/framework/SettingPC.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .pc-setting {
-  width: 100%;
+  // width: 100%;
   .view-setting {
     padding: 10px;
     > li {

packages/code/src/framework/Toolbar.vue

@@ -176,7 +176,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .app-view-toolbar {
-  overflow: visible;
+  background: green;
   a {
     color: #fff;
     text-decoration: none;
@@ -226,15 +226,4 @@ export default {
     justify-content: center;
   }
 }
-.unable {
-  &::before {
-    content: "";
-    z-index: 22;
-    position: absolute;
-    width: 100%;
-    top: -10px;
-    height: calc(100% + 10px);
-    background: rgba(0, 0, 0, 0.4);
-  }
-}
 </style>

packages/code/src/framework/core/core-v1.2.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="pano-body">
+    <div class="none-center" v-show="!activeItem">请先上传或添加场景素材</div>
+
+    <div v-show="activeItem" id="pano"></div>
+    <template v-if="showSnapshot&&activeItem">
+      <snapshot></snapshot>
+      <button class="ui-button submit" @click="onClick">将当前视角设为初始画面</button>
+    </template>
+  </div>
+</template>
+
+<script>
+// 会广播initView，用于初始-右侧初始化面组件screen/setting.vue里面更新画面截图。
+// 会广播toggleFlash，用于初始-场景预览界面取景框组件snapshot.vue呈现闪白效果。
+// 会监听currentPcode广播，用于与下方的toolbar里切换选中场景事件做同步。
+// 会监听addhotspot广播，用于与热点页面的添加热点事件做同步。
+
+import * as krfn from "@/core/index.js";
+import { uploadCover } from "@/api";
+import { $waiting } from '@/components/shared/loading'
+import { mapGetters } from "vuex";
+
+import Snapshot from "@/components/Snapshot";
+
+let __krfn = krfn.default;
+export default {
+  components: { Snapshot },
+  data() {
+    return {
+      activeItem: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      info: "info",
+    }),
+    //用于确保只在初始画面设置页面显示取景框
+    showSnapshot() {
+      return this.$route.name == "screen";
+    },
+  },
+  methods: {
+    // 找到info.scenes中与当前选中场景对应的那一个场景，把当前选中场景的数据拷贝进去。
+    updateInfo(){
+      let iidx = this.info.scenes.findIndex(item=>this.activeItem.sceneCode == item.sceneCode)
+      if (iidx>-1) {
+        this.info.scenes[iidx] = {
+          ...this.activeItem
+        }
+      }
+      this.$store.commit("SetInfo", this.info);
+    },
+    onClick() {
+      this.$bus.emit('toggleFlash',true)
+      let canvas = $("#krpanoSWFObject canvas")[0];
+      let krpano = document.getElementById('krpanoSWFObject');
+      let data = __krfn.utils.setInitView(krpano, canvas);
+
+      console.log(data.url);
+
+      uploadCover(
+        { file: data.url, filename: "initCover.jpg" },
+        res => {
+          if (res.code==0) {
+            this.activeItem.icon = res.data
+            this.activeItem.initVisual= {
+              hlookat: data.hlookat,
+              vlookat: data.vlookat
+            }
+            this.$bus.emit('toggleFlash',false)
+            this.$bus.emit("initView", res.data);
+            this.updateInfo()
+            this.$msg.success("设置成功")
+            this.$store.commit("SetInfo", this.info);
+          }
+        });
+    },
+    // 间接被热点设置页面的添加热点事件导致的addhotspot广播触发。
+    addhotspot(param) {
+      let krpano = document.getElementById('krpanoSWFObject');
+      __krfn.utils.addhotspot(krpano, param, true);
+    }
+  },
+  watch:{
+    // 控制切换路由时全景图中热点的显隐
+    '$route.name':function(newVal){
+        let krpano = document.getElementById('krpanoSWFObject');
+        __krfn.utils.toggleHotspot(krpano,newVal!='screen');
+    },
+    // 会被currentPcode广播间接触发，导致全景图更新。
+    activeItem:{
+      handler(newVal) {
+        if (newVal) {
+          this.$nextTick(()=>{
+            this.$bus.emit("initView", newVal.icon);
+          })
+        }
+        $('#pano').empty();
+        window.vrInitFn = ()=>{
+            $waiting.hide()
+              var krpano = document.getElementById('krpanoSWFObject');
+            __krfn.utils.initHotspot(krpano,newVal&&newVal.someData,true);
+            __krfn.utils.toggleHotspot(krpano,this.$route.name!='screen');
+        }
+        window.vrViewFn = ()=>{
+          try {
+            let tmp = newVal.initVisual
+            var krpano = document.getElementById('krpanoSWFObject');
+            krpano.set('view.vlookat',tmp.vlookat);
+            krpano.set('view.hlookat',tmp.hlookat);
+          } catch (error) {
+            error
+          }
+        }
+               
+        var settings = {
+          'events[skin_events].onxmlcomplete':'js(window.vrViewFn());',
+          'events[skin_events].onloadcomplete': 'js(window.vrInitFn());'
+        };
+        if(newVal){
+            removepano('#pano')
+            $waiting.show()
+            embedpano({
+            // http://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fd720_Va0LrkXW3/vtour/tour.xml
+            // xml: "%HTMLPATH%/static/template/tour.xml",
+            xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
+            swf: "%HTMLPATH%/static/template/tour.swf",
+            target: "pano",
+            html5: "auto",
+            mobilescale: 1,
+            vars:settings,
+            webglsettings: { preserveDrawingBuffer: true },
+            passQueryParameters: true,
+          });
+          // $waiting.hide()
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    window.__krfn = __krfn;
+   
+    this.$bus.on('currentPcode',data=>{
+      this.activeItem = data
+    })
+    
+    this.$bus.on("addhotspot", data => {
+      this.addhotspot(data);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pano-body {
+  background: blue;
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .none-center{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+  #pano {
+    width: 100%;
+    height: 100%;
+  }
+  .btn {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: #000;
+    cursor: pointer;
+  }
+  .ui-button {
+    position: absolute;
+    bottom: 20px;
+    min-width: 200px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99;
+  }
+}
+</style>

packages/code/src/views/explanation/index.vue

@@ -1,17 +1,27 @@
 <template>
   <div class="editor-explanation">
-    <div class="preview-area"></div>
+    <div
+      class="app-player"
+      ref="layer"
+    >
+      <Core/>
+      <Toolbar class="navigation-toolbar"></Toolbar>
+    </div>
     <ExplanationSettings class="explanation-settings"></ExplanationSettings>
   </div>
 </template>
 
 <script>
 import ExplanationSettings from "./explanationSettings.vue";
+import Core from "@/framework/core/core-v1.2.vue";
+import Toolbar from "@/framework/Toolbar.vue";
 
 export default {
   name: "EditorExplanation",
   components: {
     ExplanationSettings,
+    Core,
+    Toolbar,
   },
 };
 </script>
@@ -20,9 +30,18 @@ export default {
 .editor-explanation {
   height: 100%;
   display: flex;
-  .preview-area {
-    background: red;
-    flex: 1 0 1px;
+  .app-player {
+    flex: 1 1 auto;
+    padding: 10px;
+    position: relative;
+    height: 100%;
+    .navigation-toolbar {
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      top: 70%;
+      bottom: 10%;
+    }
   }
   .explanation-settings {
     width: 274px;

packages/code/src/views/hotspot/index.vue

@@ -1,19 +1,18 @@
 <template>
   <!-- 编辑器-热点 -->
-  <div>
+  <div class="editor-hotspot">
     <!-- 内嵌的全景场景预览区域 -->
     <div
       class="app-player"
       ref="layer"
     >
       <Core/>
+      <toolbar class="navigation-toolbar"></toolbar>
     </div>
-    <!-- 初始和热点 底部的 全景场景列表 -->
-    <toolbar></toolbar>
     <setting @select="handleSelectScene"></setting>
     <!-- <toolbar></toolbar> -->
     <div class="dialog" v-if="show">
-        <Select
+      <Select
         @updateList="undatePano"
         :panos="list"
         :current="activeItem"
@@ -52,7 +51,7 @@
 <script>
 import Setting from "./Setting";
 import Select from "@/components/select";
-import Core from "@/framework/core/index.vue";
+import Core from "@/framework/core/core-v1.2.vue";
 import Toolbar from "@/framework/Toolbar.vue";
 
 export default {
@@ -118,17 +117,23 @@ export default {
 
 
 <style lang="less" scoped>
-.app-player {
-  padding: 10px;
-  position: relative;
+.editor-hotspot {
+  height: 100%;
   display: flex;
-  height: calc(100% - 260px); // 260: 底部toolbar的高度
-  flex-direction: column;
-  &.page-guide {
-    height: calc(100% - 210px);
+  .app-player {
+    flex: 1 1 auto;
+    padding: 10px;
+    position: relative;
+    height: 100%;
+    .navigation-toolbar {
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      top: 70%;
+      bottom: 10%;
+    }
   }
-}
-.dialog {
+  .dialog {
     position: fixed;
     z-index: 30;
     left: 0;
@@ -136,15 +141,14 @@ export default {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-}
-
-.pano-con{
-  height: auto;
-  background: none;
-  padding: 10px 0;
-  .ui-remark{
-    padding-left: 10px;
+    .pano-con{
+      height: auto;
+      background: none;
+      padding: 10px 0;
+      .ui-remark{
+        padding-left: 10px;
+      }
+    }
   }
 }
-
 </style>

packages/code/src/views/navigation/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="editor-navigation">
     <GroupSettings class="group-settings-area"/>
-    <div class="preview-area"></div>
+    <div
+      class="app-player"
+      ref="layer"
+    >
+      <Core/>
+      <Toolbar class="navigation-toolbar"></Toolbar>
+    </div>
     <InitialSceneSettings class="initial-scene-settings-area"></InitialSceneSettings>
   </div>
 </template>
@@ -9,12 +15,16 @@
 <script>
 import InitialSceneSettings from "./initialSceneSettings.vue";
 import GroupSettings from "./groupSettings.vue";
+import Core from "@/framework/core/core-v1.2.vue";
+import Toolbar from "@/framework/Toolbar.vue";
 
 export default {
   name: "EditorNavigation",
   components: {
     InitialSceneSettings,
     GroupSettings,
+    Core,
+    Toolbar,
   },
 };
 </script>
@@ -27,34 +37,22 @@ export default {
     width: 300px;
     flex: 0 0 auto;
   }
-  .preview-area {
-    background: red;
-    flex: 1 0 auto;
+  .app-player {
+    flex: 1 1 auto;
+    padding: 10px;
+    position: relative;
+    height: 100%;
+    .navigation-toolbar {
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      top: 70%;
+      bottom: 10%;
+    }
   }
   .initial-scene-settings-area {
     width: 274px;
     flex: 0 0 auto;
   }
-  // todo: 有用吗？
-  .pano-con {
-    height: auto;
-    background: none;
-    padding: 10px 0;
-    .ui-remark {
-      padding-left: 10px;
-    }
-    > ul {
-      > li {
-        cursor: pointer;
-      }
-    }
-  }
-  // todo: 有用吗？
-  .add-vr {
-    text-align: left;
-    .ui-remark {
-      margin: 10px 0;
-    }
-  }
 }
 </style>

packages/code/src/views/screen/index.vue

@@ -7,6 +7,7 @@
       ref="layer"
     >
       <Core/>
+      <Toolbar class="navigation-toolbar"></Toolbar>
     </div>
     <!-- 初始和热点 底部的 全景场景列表 -->
     <!-- <toolbar></toolbar> -->
@@ -15,7 +16,7 @@
 </template>
 <script>
 import Setting from "./Setting";
-import Core from "@/framework/core/index.vue";
+import Core from "@/framework/core/core-v1.2.vue";
 import Toolbar from "@/framework/Toolbar.vue";
 
 export default {
@@ -33,12 +34,17 @@ export default {
   height: 100%;
   display: flex;
   .app-player {
+    flex: 1 1 auto;
     padding: 10px;
     position: relative;
-    height: 100%; // 260: 底部toolbar的高度
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
+    height: 100%;
+    .navigation-toolbar {
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      top: 70%;
+      bottom: 10%;
+    }
   }
   .setting-panel {
     width: 274px;