fix: 接入3D编辑器

src/router/index.js

@@ -42,6 +42,12 @@ const constantRoutes = [
     component: () => import(/* webpackChunkName: 'home' */ '@views/Home/Index.vue'),
     children: [...ProjectManage, ...TemplateMarket, ...Contact, ...DocumentLibrary, ...DataStatistics, ...Creative]
   },
+  
+  {
+    path: '/edit-creative',
+    name: 'editCreative',
+    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Creation.vue')
+  },
   {
     path: '/luck',
     name: 'luck',

src/router/route.creative.js

@@ -1,7 +1,6 @@
-const Creative = () => import(/* webpackChunkName: 'creative' */ '@views/Creative/index.vue');
-const MyCreation = () => import(/* webpackChunkName: 'creative' */ '@views/Creative/MyCreation.vue');
-const Material = () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Material.vue');
-const Creation = () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Creation.vue');
+const Creative = () => import(/* webpackChunkName: 'home' */ '@views/Creative/index.vue');
+const MyCreation = () => import(/* webpackChunkName: 'home' */ '@views/Creative/MyCreation.vue');
+const Material = () => import(/* webpackChunkName: 'home' */ '@views/Creative/Material.vue');
 
 const router = [
   {
@@ -24,11 +23,5 @@ const router = [
       },
     ]
   },
-  {
-    path: 'edit-creative',
-    name: 'material',
-    meta: { title: '我的作品' },
-    component: Creation
-  }
 ];
 export default router;

src/views/Creative/Creation.vue

@@ -1,25 +1,36 @@
 <template>
-  <div>
-    <a-modal v-model:visible="visible" title="Basic Modal" width="1200px" @ok="handleOk">
-      <div style="width: 100%; height: 600px;">
-        <SceneShopPanoEditor v-if="visible" />
+  <div style="height: 100%;">
+    <Header />
+    <div style="height: calc(100% - 70px); display: flex; flex-direction: row;">
+      <div style="width: 370px;">
+        <CreationResource />
       </div>
-    </a-modal>
-    
+      <div style="flex: 1;">
+        <SceneShopPanoEditor :shopData="creationMock"/>
+      </div>
+      <div style="width: 300px;">
+        <CreationProperty />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "@vue/reactivity"
+import { reactive, ref } from "@vue/reactivity"
+import Header from "./components/Header.vue"
 import SceneShopPanoEditor from "./lib/SceneShopPanoEditor.vue"
+import CreationProperty from "./components/CreationProperty.vue"
+import CreationResource from "./components/CreationResource.vue"
 
-const visible = ref(false);
+import mockData from "./creation.mock";
 
-defineExpose({
-  show(){
-    visible.value = true;
-  },
-});
+const creative = JSON.parse(JSON.stringify(mockData[0]));
+
+creative.shelf = creative.shelves[0];
+
+creative.ext__ = {};
+
+const creationMock = reactive(creative);
 
 </script>
 

src/views/Creative/MyCreation.vue

@@ -43,7 +43,7 @@
                   <template #overlay>
                     <a-menu>
                       <a-menu-item>
-                        <a href="javascript:;" @click="creationRef.show()">编辑</a>
+                        <a href="javascript:;" @click="$router.push('/edit-creative')">编辑</a>
                       </a-menu-item>
                       <a-menu-item>
                         <a href="javascript:;" @click="renameCreationRef.show()">重命名</a>
@@ -99,7 +99,6 @@
       </div>
     </div>
     <RenameCreation ref="renameCreationRef" />
-    <Creation ref="creationRef" />
   </div>
 </template>
 
@@ -110,10 +109,8 @@ import { computed, ref } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import RenameCreation from "./components/RenameCreation.vue";
 import creationMock from "./creation.mock";
-import Creation from "./Creation.vue";
 
 const renameCreationRef = ref();
-const creationRef = ref();
 
 const search = () => {
   alert();

src/views/Creative/components/CreationProperty.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="height: 100%;">
+    环境设置
+  </div>
+</template>
+
+<script setup>
+const { useRouter }=require("vue-router")
+
+const router = useRouter();
+
+const back = () => {
+  router.back();
+}
+</script>
+
+<style scoped lang="scss">
+.back{
+  cursor: pointer;
+}
+</style>

src/views/Creative/components/CreationResource.vue

@@ -0,0 +1,62 @@
+<template>
+  <div style="height: 100%; display: flex; flex-direction: row;">
+    <div style="width: 70px; border-right: solid 1px #eee;">
+      <ul>
+        <li @click="viewType='envirionment'">
+          环境
+        </li>
+        <li @click="viewType='shelf'">
+          货架
+        </li>
+        <li @click="viewType='ware'">
+          商品
+        </li>
+        <li @click="viewType='element'">
+          元素
+        </li>
+      </ul>
+    </div>
+    <div style="flex: 1;">
+      <div v-if="viewType=='envirionment'">
+        环境库
+      </div>
+      <div v-if="viewType=='shelf'">
+        货架库
+      </div>
+      <div v-if="viewType=='ware'">
+        商品库
+      </div>
+      <div v-if="viewType=='element'">
+        元素
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { ref }=require("@vue/reactivity");
+const { useRouter }=require("vue-router")
+
+const router = useRouter();
+
+const viewType = ref("envirionment");
+
+const back = () => {
+  router.back();
+}
+</script>
+
+<style scoped lang="scss">
+.back{
+  cursor: pointer;
+}
+
+ul{
+  padding: 10px 0;
+  li{
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+</style>

src/views/Creative/components/Header.vue

@@ -0,0 +1,27 @@
+<template>
+  <div style="height: 70px; padding: 0 34px; line-height: 70px; border-bottom: solid 1px #eee;">
+    <span @click="back" class="back">
+      <i class="iconfont icon-xiangzuo-moren"></i>
+      <span>3D虚拟门店</span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+const { useRouter }=require("vue-router")
+
+const router = useRouter();
+
+const back = () => {
+  router.back();
+}
+</script>
+
+<style scoped lang="scss">
+.back{
+  cursor: pointer;
+  .icon-xiangzuo-moren {
+    font-size: 10px;
+  }
+}
+</style>