fix: 新增创作联调

src/views/Creative/3d/crossyo/shelves-vue-demo/api/mock-data/data/shop-hall-survey-data-1.json

@@ -12,13 +12,55 @@
 		"multiply": 7.7
 	},
 	"objects": [
+		
 		{
 			"type": "rotSprite",
+			"relRotSpriteId": "fRwV2h",
+			"url": "/shelves-v5-store/rotSprite/fRwV2h/c-ada61/pano_$2.webp",
+            "urlSmall": "/shelves-v5-store/rotSprite/fRwV2h/c-ada61/pano_$2.webp",
+			"urlThumb": "/shelves-v5-store/rotSprie/fRwV2h/c-ada61/pano_00.webp",
+			"rsFrames": 36,
+			"rsClockwise": true,
+			"rsFirstRotY": -30,
+			"rsWidth": 5.8,
+			"rsHeight": 3.8,
+			"rsCenterY": 0.26,
+			"rsPlaceRotateY": 180,
 			"position": {
+				"x": -4.5,
+				"y": 0,
+				"z": -2
+			},
+			"rotation": {
 				"x": 0,
 				"y": 0,
 				"z": 0
 			},
+			"scale": {
+				"x": 1,
+				"y": 1,
+				"z": 1
+			}
+		},
+
+		{
+			"type": "rotSprite",
+			"relRotSpriteId": "fRwV2h",
+			"url": "/shelves-v5-store/rotSprite/fRwV2h/c-ada61/pano_$2.webp",
+            "urlSmall": "/shelves-v5-store/rotSprite/fRwV2h/c-ada61/pano_$2.webp",
+			"urlThumb": "/shelves-v5-store/rotSprie/fRwV2h/c-ada61/pano_00.webp",
+			"rsFrames": 36,
+			"rsClockwise": true,
+			"rsFirstRotY": -30,
+			"rsWidth": 5.8,
+			"rsHeight": 3.8,
+			"rsCenterY": 0.26,
+			"rsPlaceRotateY": 180,
+			"position": {
+				"x": 2,
+				"y": 0,
+				"z": -10
+			},
 			"rotation": {
 				"x": 0,
 				"y": 0,

src/views/Creative/3d/crossyo/shelves-vue-demo/api/mock-data/rotSprites-mock-data.js

@@ -5,10 +5,29 @@ export const rotSprites = reactive({
     list: [
         {
 			id: 'fRwV2h',
-            name: "xx",
+            name: "c-ada6l",
-            url: `${api.storePrefix}/rotSprites/fRwV2h/seq1`,
+            url: `${api.storePrefix}/rotSprite/fRwV2h/c-ada61/pano_$2.webp`,
-            urlSmall: `${api.storePrefix}/rotSprites/fRwV2h/seq1-small`,
+            urlSmall: `${api.storePrefix}/rotSprite/fRwV2h/c-ada61/pano_$2.webp`,
-			urlThumb: `${api.storePrefix}/rotSpries/fRwV2h/seq1-t.png`,
+			urlThumb: `${api.storePrefix}/rotSprie/fRwV2h/c-ada61/pano_00.webp`,
+			rsFrames: 36,
+			rsClockwise: true,
+			rsFirstRotY: -30,
+			rsWidth: 5.8, // 5m*1200/1034
+			rsHeight: 3.8, // 800/1200
+			rsCenterY: .26, // 214/800
+        },
+		{
+			id: 'LR2fN8',
+            name: "c-cba",
+            url: `${api.storePrefix}/rotSprite/LR2fN8/c-cba/pano_$2.webp`,
+            urlSmall: `${api.storePrefix}/rotSprite/LR2fN8/c-cba/pano_$2.webp`,
+			urlThumb: `${api.storePrefix}/rotSprie/LR2fN8/c-cba/pano_00.webp`,
+			rsFrames: 36,
+			rsClockwise: true,
+			rsFirstRotY: -30,
+			rsWidth: 4.78, // 4.6m*1200/1155
+			rsHeight: 3.19, // 800/1200
+			rsCenterY: .27, // 218/800
         },
     ]
 })

src/views/Creative/3d/crossyo/shelves-vue-demo/index.vue

@@ -24,13 +24,283 @@ body {
     /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 
     /* font-family: "Microsoft YaHei"; */
-    font-family: monospace;
+    /* font-family: monospace; */
+    font-family: "Microsoft YaHei";
+}
+
+/* Works on Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #ECECEC rgba(0, 0, 0, 0);
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background: rgba(0, 0, 0, 0);
+    border-radius: 0;
+}
+
+/* *::-webkit-scrollbar-track {
+  } */
+
+*::-webkit-scrollbar-thumb {
+    width: 4px;
+    height: 4px;
+    background: #ECECEC;
+    border-radius: 0;
+}
+
+/* Code for Firefox */
+::-moz-selection { 
+  color: #fff;
+  background: #70B936;
+}
+
+/* Code for Chrome, Edge, and Safari */
+::selection {
+  color: #fff;
+  background: #70B936;
 }
 
 #app {
     margin: 0px;
 }
 
+.yo-scrollbar {
+    display: grid;
+    flex-wrap: wrap;
+    gap: 25px;
+    padding: 25px;
+    overflow-y: auto;
+    grid-template-columns: repeat(1, 1fr);
+}
+
+.yo-scrollbar2 {
+    display: flex;
+    flex-flow: column;
+    /* gap: 25px; */
+    padding: 25px;
+    overflow-y: auto;
+}
+
+.yo-content {
+    display: flex;
+    flex-flow: column;
+    gap: 25px;
+    padding-top: 25px;
+}
+
+.yo-thumb {
+    display: inline-block;
+    width: auto;
+    height: 130px;
+    /* color: #70B936; */
+    background-color: rgba(245, 245, 245, 0.6);
+    border: none;
+    box-sizing: border-box;
+    border-radius: 10px;
+    margin: 0;
+    text-align: center;
+}
+
+.yo-thumb:hover,
+.yo-thumb:focus {
+    border: none;
+    cursor: pointer;
+    transform: scale(1.05);
+}
+
+.yo-thumb:active {
+    border: none;
+    cursor: pointer;
+    transform: scale(0.95);
+}
+
+.yo-thumb img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+}
+
+.yo-obj-fit-cover {
+    object-fit: cover;
+}
+
+.yo-obj-fit-contain {
+    object-fit: contain;
+}
+
+.ant-input {
+    color: #434343;
+}
+
+.ant-input-affix-wrapper {
+    color: #434343;
+    border-color: #DFE0E3;
+    background: #FEFFFE;
+    border-radius: 6px;
+    padding-left: 4px;
+}
+
+.ant-input-affix-wrapper:hover {
+    border-color: #70B936;
+}
+
+.ant-input-affix-wrapper img {
+    width: 24px;
+}
+
+.ant-input-affix-wrapper-focused {
+    box-shadow: none;
+}
+
+.ant-input-affix-wrapper .ant-input-prefix,
+.ant-input-affix-wrapper .ant-input-suffix {
+    color: #7E7E7E;
+    font-size: 12px;
+}
+
+.ant-select-selection-item{
+   background-color: red;
+}
+
+.ant-slider-rail {
+    height: 6px;
+    background: #ECECEC;
+    border-radius: 3px;
+}
+
+.ant-slider-track {
+    height: 6px;
+    background: #7EC04A;
+    border-radius: 3px;
+}
+
+.ant-slider-handle {
+    width: 20px;
+    height: 20px;
+    margin-top: -7px;
+    background: #7EC04A;
+    border: 4px solid #DFF4D0;
+}
+
+.ant-slider-handle:focus {
+    border-color: #DFF4D0;
+    box-shadow: none;
+}
+
+.ant-slider-handle.ant-tooltip-open {
+    border-color: #DFF4D0;
+}
+
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+    border-color: #DFF4D0;
+}
+
+.ant-slider-step {
+    height: 6px;
+}
+
+.ant-slider:hover .ant-slider-rail {
+    background: #ECECEC;
+}
+
+.ant-slider:hover .ant-slider-track {
+    background: #7EC04A;
+}
+
+.ant-tooltip-inner {
+    color: #fff;
+    background: #808080;
+    border-radius: 2px;
+    font-size: 12px;
+    line-height: 18px;
+    box-shadow: none;
+}
+
+.ant-radio-button-wrapper {
+    color: #434343;
+    border: none;
+    background: #f9f9f9;
+}
+
+.ant-radio-button-wrapper:hover {
+    color: #7EC04A;
+    background: #f9f9f9;
+}
+
+/* .ant-radio-button-wrapper:active {
+    color: #7EC04A;
+    background: #f9f9f9;
+} */
+
+.ant-radio-button-wrapper:first-child {
+    border: none;
+    border-radius: 6px 0 0 6px;
+}
+
+.ant-radio-button-wrapper:last-child {
+    border: none;
+    border-radius: 0 6px 6px 0;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+    color: #ffffff;
+    background: #7EC04A;
+    border: none;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+    color: #ffffff;
+    background: #7EC04A;
+    border: none;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+    box-shadow: none;
+}
+
+.ant-radio-button-wrapper:not(:first-child)::before {
+    background: none;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+    background: none;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
+    background: none;
+}
+
+.ant-divider {
+    color: #F5F5F5;
+    margin: 0;
+}
+
+.empty1 {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 2px;
+    color: #434343;
+    text-align: center;
+}
+
+.yo-title-s16 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    color: #434343;
+}
+
+.yo-title-s14 {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 2px;
+    color: #434343;
+}
+
 .yo-icon img {
     width: 100%;
     height: 100%;
@@ -120,7 +390,8 @@ body {
     padding-right: 24px;
 }
 
-.el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__increase {
+.el-input-number--small .el-input-number__decrease,
+.el-input-number--small .el-input-number__increase {
     width: 16px;
     font-size: 11px;
 }
@@ -146,5 +417,4 @@ body {
 }
 
 /* antdv */
-
 </style>

src/views/Creative/3d/crossyo/shelves-vue-demo/view/ShopEditorDemo.vue

@@ -44,7 +44,7 @@
                             </span>
                         </template>
                     </a-tab-pane>
-                    <a-tab-pane key="element">
+                    <a-tab-pane key="schema">
                         <template #tab>
                             <span>
                                 <img :src="ItemSvg" />
@@ -63,27 +63,32 @@
                         @remove="removeHall" />
                     <TabListShelf v-if="activeTabName == 'shelf'" @clickThumb="clickThumbShelf" @add="addShelf"
                         @remove="removeShelf" />
-                    <TabListWare v-if="activeTabName == 'ware'" />
+                    <TabListWare v-if="activeTabName == 'ware'" @clickThumb="clickThumbWare" @add="addWare"
+                        @remove="removeWare" />
                 </div>
                 <div class="yo-main">
-                    <SceneShopEditor v-if="shopData" ref="se" :shopData="shopData" :updateAction="updateAction" />
+                    <SceneShopEditor v-if="shopData" ref="se" :shopData="shopData" :updateAction0="updateAction0"
+                        :updateAction="updateAction" :activePropName="activePropName"
+                        @selectCell="selectedCell = $event" />
                 </div>
                 <div class="right">
-                    <TabPropPanorama v-if="shopData && activeTabName == 'panorama'" :shopData="shopData"
+                    <TabPropPanorama v-if="shopData && activePropName == 'panorama'" :shopData="shopData"
                         @updateAction="updateAction = $event" />
-                    <TabPropHall v-if="shopData && activeTabName == 'hall'" :shopData="shopData"
+                    <TabPropHall v-if="shopData && activePropName == 'hall'" :shopData="shopData"
                         @updateAction="updateAction = $event" />
-                    <TabPropShelf v-if="shopData && activeTabName == 'shelf'" :shopData="shopData"
+                    <TabPropShelf v-if="shopData && activePropName == 'shelf'" :shopData="shopData"
                         @updateAction="updateAction = $event" />
-                    <TabPropCellWare v-if="shopData && activeTabName == 'ware'" />
+                    <TabPropCellWare v-if="shopData && activePropName == 'ware'" :cell="selectedCell"
-                    <TabPropSchema v-if="shopData && activeTabName == 'schema'" />
+                        @changeCellPileNumber="changeCellPileNumber"
+                        @changeCellPileRotationY="changeCellPileRotationY" />
+                    <TabPropSchema v-if="shopData && activePropName == 'schema'" />
                 </div>
             </div>
         </div>
     </div>
     <PanoramaUploader :isOpen="isOpenPanoramaUploader" @close="closePanoramaUploader" @success="panoramaAddSuccess" />
     <ShelfUploader :isOpen="isOpenShelfUploader" @close="closeShelfUploader" @success="shelfAddSuccess" />
-
+    <WareUploader :isOpen="isOpenWareUploader" @close="closeWareUploader" @success="wareAddSuccess" />
 </template>
 
 <script setup>
@@ -104,6 +109,7 @@ import TabPropSchema from '../../shelves-vue/components/editor/TabPropSchema.vue
 
 import PanoramaUploader from '../../shelves-vue/view/PanoramaUploader.vue'
 import ShelfUploader from '../../shelves-vue/view/ShelfUploader.vue'
+import WareUploader from '../../shelves-vue/view/WareUploader.vue'
 
 import ShopSvg from '../../shelves-vue/asset/icon2/shop.svg'
 import WareSvg from '../../shelves-vue/asset/icon2/ware.svg'
@@ -113,8 +119,11 @@ import ItemSvg from '../../shelves-vue/asset/icon2/item.svg'
 </script>
 
 <script>
-import { ShopEditor, use_ext, clone_except_ext, get_is_hall_ } from "../../../../lib/shelves.module"
+import { ShopEditor, use_ext, clone_except_ext, get_is_hall_, append_default_shop_data_ } from "../../../../lib/shelves.module"
-// import { api } from '../../../crossyo/shelves-vue/api/baseApi'
+// import { api } from '@/crossyo/shelves-vue/api/baseApi'
+
+import { ElMessage } from 'element-plus'
+
 
 export default {
     props: {
@@ -131,12 +140,24 @@ export default {
             shopData: null,
             isHall: false,
             activeTabName: null, // "panorama",
+            updateAction0: null,
             updateAction: null,
             isOpenPanoramaUploader: false,
             isOpenShelfUploader: false,
             // viewMode: 1, // 1 - lookAt, 2 - orbit
+            isOpenWareUploader: false,
+
+            // arrangementData: JSON.parse(JSON.stringify(this.$store.state.arrangementData.data)),
+            selectedCell: null,
+
+            activePropName: null,
         }
     },
+    watch: {
+        activeTabName(newV, oldV) {
+            this.activePropName = newV
+        },
+    },
     // beforeMount() {
     // },
     mounted() {
@@ -145,35 +166,38 @@ export default {
         //     // console.log(resp)
         //     if (resp.data && resp.data.success) {
         //         let shopData = resp.data.result
+        //         append_default_shop_data_(shopData)
         //         use_ext(shopData)
         //         this.isHall = get_is_hall_(shopData)
         //         this.shopData = shopData
         //         this.activeTabName = this.isHall ? 'hall' : 'panorama'
         //     }
         // })
-
         let shopData = this.currentShopData;
+        append_default_shop_data_(shopData)
         use_ext(shopData)
         this.isHall = get_is_hall_(shopData)
         this.shopData = shopData
         this.activeTabName = this.isHall ? 'hall' : 'panorama'
-
     },
     // beforeUnmount() {
     // },
     methods: {
         back() {
-            this.$router.back();
+            this.$router.go(-1);
         },
         save() {
+            // console.log(this.$refs, this.$refs.se)
             this.$refs.se.editor_.commitToShopData()
             // 减少与新增数据的关联
             // let clone = JSON.parse(JSON.stringify(this.shopData))
             let clone = clone_except_ext(this.shopData)
-            this.$store.dispatch("shopData/save", clone).then(data => {
+
-                // TODO
+            console.log(clone)
-                console.warn("save response!");
+            // this.$store.dispatch("shopData/save", clone).then(data => {
-            })
+            //     // TODO
+            //     console.warn("save response!");
+            // })
         },
         //
         addPanorama() {
@@ -182,7 +206,7 @@ export default {
         clickThumbPanorama(itm) {
             // console.log(itm)
             this.shopData.panorama = itm
-            this.updateAction = {
+            this.updateAction0 = {
                 action: "updatePanorama"
             }
         },
@@ -237,6 +261,74 @@ export default {
         // closeTextureUploader() {
         //     this.isOpenTextureUploader = false
         // },
+
+        // save() {
+        //     this.$store.commit('arrangementData/save', clone_except_ext(this.arrangementData))
+        // },
+
+        addWare() {
+            this.isOpenWareUploader = true
+        },
+        clickThumbWare(itm) {
+
+            let cell = this.selectedCell
+
+            console.log('clickThumbWare', itm, cell)
+
+            if (cell) {
+                cell.pileWare = itm
+                this.updateAction = {
+                    action: 'bindCellWare',
+                    cell,
+                    // commodity: itm,
+                    ware: itm,
+                }
+
+            } else {
+
+                ElMessage({
+                    showClose: true,
+                    message: '请先选择一个货位！',
+                    // type: 'warning',
+                })
+
+            }
+
+        },
+        removeWare() {
+
+            // unbind cell ware!
+            let cell = this.selectedCell
+            if (cell) {
+                this.updateAction = {
+                    action: 'unbindCellWare',
+                    cell
+                }
+            }
+
+        },
+        closeWareUploader() {
+            // console.log('closeWareUploader')
+            this.isOpenWareUploader = false
+        },
+        wareAddSuccess(data) {
+            this.clickThumbWare(data)
+        },
+
+
+        changeCellPileNumber() {
+            this.updateAction = {
+                action: 'updateCellPileNumber',
+                cell: this.selectedCell,
+            }
+        },
+        changeCellPileRotationY() {
+            this.updateAction = {
+                action: 'updateCellPileRotationY',
+                cell: this.selectedCell,
+            }
+        },
+
     },
 };
 </script>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/cube.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="_x23_767676ff">
+	<path fill="#767676" d="M12.54,15.51c3.64-2.72,7.52-5.17,11.55-7.3c3.8,2.59,7.75,4.93,11.48,7.62c0.06,4.08,0.11,8.17-0.13,12.24
+		c-3.8,2.58-7.72,4.98-11.5,7.57c-3.92-2.34-7.72-4.88-11.55-7.37C12.27,24.03,11.74,19.7,12.54,15.51 M17.1,16.91
+		c2.16,1.42,4.25,3.4,6.87,3.83c2.81-0.7,4.96-2.85,7.17-4.6c-2.46-1.46-4.87-2.99-7.19-4.68C21.78,13.3,17.92,13.97,17.1,16.91
+		 M15.38,19.09c-0.11,2.54-0.49,5.15,0.11,7.65c2.01,1.83,4.5,2.96,6.87,4.22c0.04-2.35,0.04-4.7,0.04-7.06
+		C20.06,22.3,17.71,20.7,15.38,19.09 M25.41,23.65c-0.01,2.46,0,4.91,0.05,7.37c2.4-1.49,5.1-2.65,7.05-4.74
+		c0.21-2.39,0.08-4.8-0.02-7.19C30.13,20.6,27.77,22.13,25.41,23.65z"/>
+	<path fill="#767676" d="M7.23,31.52c1.82-0.43,3.45,0.09,4.65,1.52c5.14,5.08,13.68,6.34,19.95,2.69c2.59-1.35,4.77-3.95,7.96-3.59
+		c-0.03,2.17-0.01,4.36-0.47,6.49c-1.98,0.47-2.98-0.35-3-2.46c-5.61,4.7-13.87,6.01-20.53,2.84C12.37,37.34,8.75,35.21,7.23,31.52z
+		"/>
+</g>
+</svg>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/home.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="_x23_787878ff">
+	<path fill="#787878" d="M12.5,12.29c7.62,0.06,15.25-0.13,22.87,0.11c0.52,4.61,4.43,11.02-0.67,14.35
+		c-2.76,2.26-5.93-1.31-8.84,0.25c-2.92,1.56-5.99-1.91-8.77,0.38c-0.84,0.05-2.53,0.14-3.38,0.18c-1.29-1.38-3.33-2.56-3.29-4.7
+		C10.45,19.24,11.56,15.75,12.5,12.29 M14.85,15.47c-0.55,2.48-1.34,4.96-1.24,7.52c0.79,1.35,1.92,1.76,3.4,1.24
+		c0.67-1.22,1.21-2.5,1.88-3.73c2.56-0.65,3.13,2.23,3.86,3.97c0.79-0.07,1.59-0.15,2.38-0.23c0.53-1.27,1.04-2.55,1.71-3.75
+		c2.6-0.65,3.18,2.21,3.91,3.98c0.9-0.04,1.8-0.09,2.7-0.14c0.66-2.98,0.26-6.01-0.63-8.9C26.83,15.5,20.84,15.45,14.85,15.47z"/>
+	<path fill="#787878" d="M33.5,28.43c0.95,0.06,1.9,0.14,2.85,0.21c0.04,3.23,0.04,6.45,0.13,9.68c-2.6,1.47-5.63,0.95-8.48,1
+		c-5.44-0.02-10.88,0-16.31-0.02c-0.48-3.67-0.36-7.37-0.12-11.05c0.65,0.13,1.95,0.4,2.6,0.53c0.32,2.29,0.26,4.61,0.26,6.91
+		c6.31-0.01,12.62,0.07,18.93-0.06C33.41,33.23,33.43,30.83,33.5,28.43z"/>
+</g>
+</svg>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/image.svg

@@ -2,25 +2,29 @@
 <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+	 width="460px" height="260px" viewBox="0 0 460 260" enable-background="new 0 0 460 260" xml:space="preserve">
+<rect x="-8.673" y="-8.692" fill="#6FB944" fill-opacity="0.06" stroke="#000000" stroke-miterlimit="10" width="473.558" height="275.481"/>
 <g id="_x23_c3e1abff">
-	<path fill="#C3E1AB" d="M25.3,13.42c24.89-0.19,49.79,0.01,74.68-0.1c1.48,0.25,3.57-0.45,4.5,1.09c0.2,1.31-1.09,2.09-1.74,3.05
+	<path fill="#C4E0AC" d="M189.556,58.319c24.89-0.19,49.79,0.01,74.68-0.1c1.48,0.25,3.57-0.45,4.5,1.09
-		c-25.71-0.17-51.42,0.11-77.12-0.14C25.59,16.02,25.49,14.71,25.3,13.42z"/>
+		c0.2,1.31-1.09,2.09-1.74,3.05c-25.71-0.17-51.42,0.11-77.12-0.14C189.846,60.919,189.746,59.609,189.556,58.319z"/>
-	<path fill="#C3E1AB" d="M20.26,23.37c9.92-0.04,71.77,0.42,83.73-0.58c1.79,0.08,3.53,0.55,5.27,0.9c0.08,0.48,0.24,1.43,0.31,1.91
+	<path fill="#C4E0AC" d="M184.516,68.269c9.92-0.04,71.77,0.42,83.73-0.58c1.79,0.08,3.53,0.55,5.27,0.9
-		c-0.62,0.63-1.25,1.25-1.9,1.85c-29.01-0.03-58.02,0.1-87.02-0.06C20.57,26.05,20.43,24.7,20.26,23.37z"/>
+		c0.08,0.48,0.24,1.43,0.31,1.91c-0.62,0.63-1.25,1.25-1.9,1.85c-29.01-0.03-58.02,0.1-87.02-0.06
-	<path fill="#C3E1AB" d="M16.18,35.17c1.56-2.08,4.37-2.43,6.78-2.49c27.68,0.02,55.35,0.05,83.03-0.01c2.47,0,5.29,0.24,7.02,2.25
+		C184.826,70.949,184.686,69.599,184.516,68.269z"/>
-		c1.56,1.59,1.56,3.94,1.6,6.01c-0.07,15.77,0.22,31.55,0.09,47.33c-3.43-1.81-5.69-5.03-8.45-7.63c-4.85-4.78-9.46-9.8-14.42-14.45
+	<path fill="#C4E0AC" d="M180.436,80.069c1.56-2.08,4.37-2.43,6.78-2.49c27.68,0.02,55.35,0.05,83.03-0.01
-		c-2.26-2.37-6.65-2.77-8.95-0.26c-8.61,8.5-16.94,17.3-25.7,25.65c-3.79-3.46-7.06-7.44-10.97-10.74c-2.23-2.02-6.09-2.06-8.2,0.15
+		c2.47,0,5.29,0.24,7.02,2.25c1.56,1.59,1.56,3.94,1.6,6.01c-0.07,15.77,0.22,31.55,0.09,47.33c-3.43-1.81-5.69-5.03-8.45-7.63
-		c-7.88,7.51-15.27,15.55-23.21,23c-0.44-20.32,0.07-40.66-0.12-60.99C14.77,40.35,14.56,37.42,16.18,35.17 M38.24,48.15
+		c-4.85-4.78-9.46-9.8-14.42-14.45c-2.26-2.37-6.65-2.77-8.95-0.26c-8.61,8.5-16.94,17.3-25.7,25.65
+		c-3.79-3.46-7.06-7.44-10.97-10.74c-2.23-2.02-6.09-2.06-8.2,0.15c-7.88,7.51-15.27,15.55-23.21,23
+		c-0.44-20.32,0.07-40.66-0.12-60.99C179.026,85.249,178.816,82.319,180.436,80.069 M202.496,93.049
 		c-4.57,1.62-8.01,5.93-8.57,10.73c-0.68,6.91,5.27,13.8,12.31,13.73c6.75,0.24,13.05-5.88,12.71-12.69
-		C54.99,51.82,45.84,45.19,38.24,48.15z"/>
+		C219.246,96.719,210.096,90.089,202.496,93.049z"/>
-	<path fill="#C3E1AB" d="M39.26,53.31c4.8-2.47,11.32,2.36,10.37,7.69c-0.34,4.88-6.18,8.19-10.54,6.01
+	<path fill="#C4E0AC" d="M203.516,98.209c4.8-2.47,11.32,2.36,10.37,7.69c-0.34,4.88-6.18,8.19-10.54,6.01
-		c-2.55-1.37-4.4-4.11-4.44-7.03C34.8,57.12,36.66,54.47,39.26,53.31z"/>
+		c-2.55-1.37-4.4-4.11-4.44-7.03C199.056,102.019,200.916,99.369,203.516,98.209z"/>
-	<path fill="#C3E1AB" d="M85.37,70.35c1.08-1.6,2.95-0.92,3.9,0.4c8.29,8.36,16.85,16.46,24.98,24.96
+	<path fill="#C4E0AC" d="M249.626,115.249c1.08-1.6,2.95-0.92,3.9,0.4c8.29,8.36,16.85,16.46,24.98,24.96
 		c1.17,3.22,0.48,6.95,0.56,10.36c0.34,3.71-3.01,7.01-6.7,6.7c-18.7,0.08-37.41-0.01-56.11,0.04c-2.98,0.08-5.97,0.04-8.92-0.4
-		C57.04,98.25,71.33,84.42,85.37,70.35z"/>
+		C221.296,143.149,235.586,129.319,249.626,115.249z"/>
-	<path fill="#C3E1AB" d="M42.2,83.89c4.09,3.47,7.76,7.39,11.5,11.23c-5.5,5.7-11.11,11.32-16.77,16.86
+	<path fill="#C4E0AC" d="M206.456,128.789c4.09,3.47,7.76,7.39,11.5,11.23c-5.5,5.7-11.11,11.32-16.77,16.86
-		c-2.27,1.58-5.38,0.54-7.98,0.84c-4.4-0.22-9.35,0.94-13.1-2.02c0.92-1.66,2.09-3.17,3.49-4.44C27.06,98.97,34.38,91.17,42.2,83.89
+		c-2.27,1.58-5.38,0.54-7.98,0.84c-4.4-0.22-9.35,0.94-13.1-2.02c0.92-1.66,2.09-3.17,3.49-4.44
-		z"/>
+		C191.316,143.869,198.636,136.069,206.456,128.789z"/>
 </g>
+<text transform="matrix(1 0 0 1 173.1057 201.5)" fill="#6FB944" font-family="'AdobeHeitiStd-Regular-GBpc-EUC-H'" font-size="28">上传图片</text>
 </svg>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/item.svg

@@ -4,17 +4,14 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 <g id="_x23_545454ff">
-	<path fill="#545454" d="M10.87,20.361c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
+	<path fill="#545454" d="M10.29,10.12c5.51-0.98,11.17-0.34,16.74-0.49c2.11,0.23,5.23-0.36,6.27,2.06
-		c-2.69-1.09-1.98-4.29-2.16-6.58C9.87,22.071,10.53,20.931,10.87,20.361 M14.75,23.731c-0.55,1.62,0,2.18,1.64,1.67
+		c0.91,3.69,0.4,7.55,0.49,11.32c-0.15,4.84,0.45,9.74-0.3,14.55c-0.44,2.51-3.44,2.58-5.44,2.67c-5.34,0.06-10.71,0.25-16.04-0.16
-		C16.92,23.761,16.38,23.211,14.75,23.731 M21.49,25.561c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
+		c-1.84,0.02-3.71-1.26-3.69-3.24c-0.53-6.61-0.03-13.26-0.25-19.89C8.28,14.65,7.62,11.21,10.29,10.12 M14.09,18.01
-		c-3.67,0-7.35,0-11.02,0.01C21.56,24.001,21.51,25.041,21.49,25.561z"/>
+		c-0.01,0.47-0.03,1.42-0.04,1.9c4.59,0.58,9.27,0.57,13.86-0.01c-0.01-0.47-0.03-1.41-0.04-1.89
-	<path fill="#545454" d="M10.87,9.46c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
+		C23.31,17.39,18.65,17.39,14.09,18.01 M14.12,24c0,0.47-0.01,1.41-0.02,1.88c4.56,0.62,9.22,0.62,13.77,0
-		C9,17.23,9.71,14.03,9.53,11.74C9.87,11.17,10.53,10.03,10.87,9.46 M14.75,12.83c-0.55,1.62,0,2.18,1.64,1.67
+		c-0.01-0.47-0.02-1.4-0.03-1.86C23.3,23.39,18.66,23.39,14.12,24 M14.05,29.96c0.02,0.48,0.05,1.43,0.07,1.91
-		C16.92,12.86,16.38,12.31,14.75,12.83 M21.49,14.66c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
+		c4.53,0.63,9.18,0.65,13.7-0.02c0.03-0.47,0.09-1.41,0.11-1.88C23.34,29.41,18.65,29.41,14.05,29.96z"/>
-		c-3.67,0-7.35,0-11.02,0.01C21.56,13.1,21.51,14.14,21.49,14.66z"/>
+	<path fill="#545454" d="M36.17,25.27c0.66-2.16,3.93-1.33,3.81,0.79c0.43,4.58,0.39,9.23-0.3,13.78c-1.12,0.08-2.24,0.06-3.36-0.05
-	<path fill="#545454" d="M10.87,31.269c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
+		C35.52,35.02,35.31,30.04,36.17,25.27z"/>
-		c-2.69-1.09-1.98-4.29-2.16-6.58C9.87,32.979,10.53,31.839,10.87,31.269 M14.75,34.639c-0.55,1.62,0,2.18,1.64,1.67
-		C16.92,34.669,16.38,34.119,14.75,34.639 M21.49,36.469c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
-		c-3.67,0-7.35,0-11.02,0.01C21.56,34.909,21.51,35.949,21.49,36.469z"/>
 </g>
 </svg>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/search.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="_x23_cfcfcfff">
+	<path fill="#CFCFCF" d="M12.17,19.99c1.18-4.46,5.13-8.21,9.84-8.48c6.02-0.77,11.85,4.43,12.1,10.42
+		c0.21,2.87-1.05,5.54-2.11,8.13c1.84,1.8,3.82,3.56,4.98,5.91l-0.92,0.74c-2.3-1.22-4.08-3.14-5.89-4.96
+		c-2.62,1.14-5.36,2.45-8.3,2.06C15.37,33.46,10.33,26.21,12.17,19.99 M20.35,14.34c-2.84,0.87-5.16,3.2-5.87,6.1
+		c-1.26,4.56,1.75,9.72,6.35,10.83c5.19,1.51,10.95-2.92,10.99-8.28C32.26,17.19,25.8,12.3,20.35,14.34z"/>
+	<path fill="#CFCFCF" d="M20.11,16.07c5.23-2.63,11.82,3.32,9.63,8.82c-1.3,5.57-9.77,6.73-12.6,1.81
+		C14.42,23.14,16.27,17.93,20.11,16.07 M21.18,18.3c-3.18,1.11-3.95,5.78-1.33,7.89c2.61,3.05,7.81,0.4,7.94-3.25
+		C28.17,19.62,24.16,16.78,21.18,18.3z"/>
+</g>
+</svg>

src/views/Creative/3d/crossyo/shelves-vue/asset/icon2/ware.svg

@@ -4,14 +4,17 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 <g id="_x23_545454ff">
-	<path fill="#545454" d="M10.29,10.12c5.51-0.98,11.17-0.34,16.74-0.49c2.11,0.23,5.23-0.36,6.27,2.06
+	<path fill="#545454" d="M10.87,20.361c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
-		c0.91,3.69,0.4,7.55,0.49,11.32c-0.15,4.84,0.45,9.74-0.3,14.55c-0.44,2.51-3.44,2.58-5.44,2.67c-5.34,0.06-10.71,0.25-16.04-0.16
+		c-2.69-1.09-1.98-4.29-2.16-6.58C9.87,22.071,10.53,20.931,10.87,20.361 M14.75,23.731c-0.55,1.62,0,2.18,1.64,1.67
-		c-1.84,0.02-3.71-1.26-3.69-3.24c-0.53-6.61-0.03-13.26-0.25-19.89C8.28,14.65,7.62,11.21,10.29,10.12 M14.09,18.01
+		C16.92,23.761,16.38,23.211,14.75,23.731 M21.49,25.561c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
-		c-0.01,0.47-0.03,1.42-0.04,1.9c4.59,0.58,9.27,0.57,13.86-0.01c-0.01-0.47-0.03-1.41-0.04-1.89
+		c-3.67,0-7.35,0-11.02,0.01C21.56,24.001,21.51,25.041,21.49,25.561z"/>
-		C23.31,17.39,18.65,17.39,14.09,18.01 M14.12,24c0,0.47-0.01,1.41-0.02,1.88c4.56,0.62,9.22,0.62,13.77,0
+	<path fill="#545454" d="M10.87,9.46c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
-		c-0.01-0.47-0.02-1.4-0.03-1.86C23.3,23.39,18.66,23.39,14.12,24 M14.05,29.96c0.02,0.48,0.05,1.43,0.07,1.91
+		C9,17.23,9.71,14.03,9.53,11.74C9.87,11.17,10.53,10.03,10.87,9.46 M14.75,12.83c-0.55,1.62,0,2.18,1.64,1.67
-		c4.53,0.63,9.18,0.65,13.7-0.02c0.03-0.47,0.09-1.41,0.11-1.88C23.34,29.41,18.65,29.41,14.05,29.96z"/>
+		C16.92,12.86,16.38,12.31,14.75,12.83 M21.49,14.66c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
-	<path fill="#545454" d="M36.17,25.27c0.66-2.16,3.93-1.33,3.81,0.79c0.43,4.58,0.39,9.23-0.3,13.78c-1.12,0.08-2.24,0.06-3.36-0.05
+		c-3.67,0-7.35,0-11.02,0.01C21.56,13.1,21.51,14.14,21.49,14.66z"/>
-		C35.52,35.02,35.31,30.04,36.17,25.27z"/>
+	<path fill="#545454" d="M10.87,31.269c8.45-0.18,16.96-0.48,25.4,0.1c2.31,2.3,2.08,7.14-0.8,9c-7.92-0.37-15.86,0.12-23.78-0.24
+		c-2.69-1.09-1.98-4.29-2.16-6.58C9.87,32.979,10.53,31.839,10.87,31.269 M14.75,34.639c-0.55,1.62,0,2.18,1.64,1.67
+		C16.92,34.669,16.38,34.119,14.75,34.639 M21.49,36.469c3.74,0.03,7.48,0.03,11.22,0c-0.03-0.52-0.08-1.57-0.11-2.09
+		c-3.67,0-7.35,0-11.02,0.01C21.56,34.909,21.51,35.949,21.49,36.469z"/>
 </g>
 </svg>

src/views/Creative/3d/crossyo/shelves-vue/components/comp/Vec3Comp.vue

@@ -1,18 +1,20 @@
 <template>
     <div class="yo-shelf-position">
-        <el-icon class="yo-icon"><img :src="ICONS[icon]" /></el-icon>
+        <!-- <div class="yo-special-input">
-        <div class="yo-special-input">
             <el-input class="yo-input-small" v-model="vec3.x" disabled />
             <span>X</span>
-        </div>
+        </div> -->
-        <div class="yo-special-input">
+        <a-input v-model:value="vec3.x" suffix="X" disabled/>
+        <!-- <div class="yo-special-input">
             <el-input class="yo-input-small" v-model="vec3.y" disabled />
             <span>Y</span>
-        </div>
+        </div> -->
-        <div class="yo-special-input">
+        <a-input v-model:value="vec3.y" suffix="Y" disabled/>
+        <!-- <div class="yo-special-input">
             <el-input class="yo-input-small" v-model="vec3.z" disabled />
             <span>Z</span>
-        </div>
+        </div> -->
+        <a-input v-model:value="vec3.z" suffix="Z" disabled/>
     </div>
 </template>
 

src/views/Creative/3d/crossyo/shelves-vue/components/editor/SceneShopEditor.vue

@@ -3,7 +3,7 @@
         <div ref="c1" class="container-editor-1-" />
 
         <div class="container-tools-1-">
-            <el-button-group>
+            <!-- <el-button-group>
 
                 <el-button v-if="showTranslate" class="yo-btn-rect yo-btn-tool" text :disabled="!enableTranslate"
                     @click="update_action_({ action: 'transformTranslate' })">
@@ -18,11 +18,21 @@
                     <el-icon class="yo-icon"><img :src="IconScaleRect" /></el-icon>
                 </el-button>
 
-            </el-button-group>
+            </el-button-group> -->
+
+            <!-- TODO 如何多重disabled radio -->
+            <a-radio-group button-style="solid" v-model:value="v_trans_action_">
+                <a-radio-button v-if="showTranslate" :disabled="!enableTranslate"
+                    value="transformTranslate">移动</a-radio-button>
+                <a-radio-button v-if="showRotation" :disabled="!enableRotation"
+                    value="transformRotate">旋转</a-radio-button>
+                <a-radio-button v-if="showResize" :disabled="!enableResize" value="transformResize">缩放</a-radio-button>
+            </a-radio-group>
+
         </div>
 
         <div class="container-tools-2-">
-            <el-button-group class="yo-btn-grp ml-4">
+            <!-- <el-button-group class="yo-btn-grp ml-4">
                 <el-tooltip content="全景图模式" placement="top">
                     <el-button plain :class="viewMode == 1 ? 'selected' : ''" @click="changeViewMode(1)">
                         <el-icon class="yo-icon"><img :src="IconPanoramic" /></el-icon>
@@ -33,13 +43,18 @@
                         <el-icon class="yo-icon"><img :src="Icon360" /></el-icon>
                     </el-button>
                 </el-tooltip>
-            </el-button-group>
+            </el-button-group> -->
+
+            <a-radio-group button-style="solid" v-model:value="viewMode">
+                <a-radio-button :value="1">全景</a-radio-button>
+                <a-radio-button :value="2">环绕</a-radio-button>
+            </a-radio-group>
         </div>
     </div>
 </template>
 
 <!-- dont use setup here, cause $refs cant visit member -->
-<script setup>
+<!-- <script setup>
 
 import IconMove from '../../asset/icon/001-move.svg'
 import IconScaleRect from '../../asset/icon/004-selection-1.svg'
@@ -48,14 +63,14 @@ import IconScaleCircle from '../../asset/icon/002-selection.svg'
 import IconPanoramic from '../../asset/icon/001-panoramic.svg'
 import Icon360 from '../../asset/icon/002-360.svg'
 
-</script>
+</script> -->
 
 <script>
 
-import { ShopEditor } from "../../../../../lib/shelves.module"
+import { ShopEditor, activePropName_to_activeEditModeName } from "../../../../../lib/shelves.module"
 
 export default {
-    props: ["shopData", "updateAction", "relProp"],
+    props: ["shopData", "updateAction0", "updateAction", "activePropName"],
     // updateAction from TabShopPano
 
     data() {
@@ -70,6 +85,7 @@ export default {
             showRotation: true,
             showResize: true,
 
+            v_trans_action_: '', // for antdv
         }
     },
     computed: {
@@ -93,14 +109,25 @@ export default {
         extSelectedCellSubName(v) {
             this.update_tranform_buttons_(this.extSelectedShelf, this.extSelectedCell, v)
         },
+        updateAction0(newV, oldV) {
+            this.update_action_(newV)
+        },
         updateAction(newV, oldV) {
             this.update_action_(newV)
         },
-        relProp(newV, oldV) {
+        activePropName(newV, oldV) {
             if (this.editor_) {
-                this.editor_.relProp(newV)
+                this.editor_.activeEditModeName = activePropName_to_activeEditModeName(newV)
             }
         },
+        v_trans_action_(newV) {
+            // console.log('watch trans_action_', newV)
+            this.update_action_({ action: newV })
+        },
+        viewMode(newV) {
+            // console.log('watch viewMode', newV)
+            this.changeViewMode(newV)
+        }
     },
 
     mounted: function () {
@@ -122,6 +149,7 @@ export default {
                 this.editor_ = new ShopEditor({
                     container: this.$refs.c1,
                     shopData: this.shopData,
+                    activeEditModeName: activePropName_to_activeEditModeName(this.activePropName), // #20221216
                 })
                 this.editor_.on("loadingCompletion", () => {
                     this.viewMode = this.editor_.viewMode
@@ -132,6 +160,10 @@ export default {
                     this.viewMode = viewMode
                 })
 
+                this.editor_.on('arrange.selectCell', cell => {
+                    this.$emit('selectCell', cell)
+                })
+
                 this.editor_.startup()
             }
             return this.editor_
@@ -147,7 +179,6 @@ export default {
                 this.editor_.updateAction(v)
             }
         },
-
         update_tranform_buttons_(isShelf, cell, sub) {
             // console.log('update transform buttons_', isShelf, cell, sub)
             if (isShelf) {

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListPanorama.vue

@@ -1,21 +1,27 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar" style="height: calc(100vh - 155px)">
-        <el-button class="yo-thumb" @click="add" >
+        <div class="yo-title-s16">环境库</div>
-            <el-icon class="yo-icon"><img :src="IconPlus" /></el-icon>
+        <a-input placeholder="请输入环境名" v-model:value="searchText">
-        </el-button>
+            <template #prefix>
-        <el-button class="yo-thumb" @click="remove" >
+                <img :src="SearchSvg" />
-            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+            </template>
-        </el-button>
+        </a-input>
-        <div class="yo-thumb" v-for="(itm, index) in list" @click="clickThumb(itm)" :key="index">
+        <div class="yo-thumb" @click="add">
-            <img :src="itm.urlThumb" />
+            <img :src="ImageSvg" />
+        </div>
+        <!-- <el-button class="yo-thumb" @click="remove">
+            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+        </el-button> -->
+        <div class="yo-thumb" v-for="itm in list" @click="clickThumb(itm)">
+            <img class="yo-obj-fit-cover" :src="itm.urlThumb" />
+        </div>
     </div>
-    </el-scrollbar>
 </template>
 
 <script setup>
-import { Plus, Remove } from '@element-plus/icons-vue'
+
-import IconPlus from '../../asset/icon/002-plus.svg'
+import ImageSvg from '../../asset/icon2/image.svg'
-import IconNull from '../../asset/icon/001-null.svg'
+import SearchSvg from '../../asset/icon2/search.svg'
 </script>
 
 <script>
@@ -23,15 +29,21 @@ import IconNull from '../../asset/icon/001-null.svg'
 export default {
     data() {
         return {
+            searchText: '',
             list: []
         }
     },
-    mounted() {
+    async mounted() {
-        // this.$store.dispatch('panoramas/list').then(list=>{
+        // this.$store.dispatch('panoramas/list').then(list => {
         //     this.list = list
         // })
         
-        this.list = [];
+        // 环境类型
+        var type0 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "test";
+        var type1 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "uat";
+        // 默认的模型接口
+        var res = await fetch(`https://${type0}-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/${type1}-yls/3D/shelves/scenes_data/panorama.json`).then(res => res.json());
+        this.list = res;
     },
     methods: {
         clickThumb(itm) {
@@ -49,36 +61,5 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 80px);
-}
 
-.yo-thumb {
-    display: inline-block;
-    width: 104px;
-    height: 78px;
-    background-color: #efefef;
-    border: none;
-    box-sizing: border-box;
-    border-radius: 4px;
-    margin: 8px 8px 8px 8px;
-    text-align: center;
-}
-
-.yo-thumb:hover, .yo-thumb:active, .yo-thumb:focus {
-    /* border-color: #c6e2ff;
-    background-color: #ecf5ff; */
-    color: #303133;
-    background-color: #efefef;
-    border: none;
-    /* opacity: 0.8; */
-    cursor: pointer;
-    transform: scale(1.05);
-}
-
-.yo-thumb img {
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-}
 </style>

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListShelf.vue

@@ -1,20 +1,26 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar" style="height: calc(100vh - 155px)">
-        <el-button class="yo-thumb" @click="add">
+        <div class="yo-title-s16">货架库</div>
-            <el-icon class="yo-icon"><img :src="IconPlus" /></el-icon>
+        <a-input placeholder="请输入货架名" v-model:value="searchText">
-        </el-button>
+            <template #prefix>
-        <el-button class="yo-thumb" @click="remove">
+                <img :src="SearchSvg" />
-            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+            </template>
-        </el-button>
+        </a-input>
-        <div class="yo-thumb" v-for="(itm, index) in list" :key="index" @click="clickThumb(itm)">
+        <div class="yo-thumb" @click="add">
-            <img :src="itm.urlThumb" />
+            <img :src="ImageSvg" />
+        </div>
+        <!-- <el-button class="yo-thumb" @click="remove">
+            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+        </el-button> -->
+        <div class="yo-thumb" v-for="itm in list" @click="clickThumb(itm)">
+            <img class="yo-obj-fit-contain" :src="itm.urlThumb" />
+        </div>
     </div>
-    </el-scrollbar>
 </template>
 
 <script setup>
-import IconPlus from '../../asset/icon/002-plus.svg'
+import ImageSvg from '../../asset/icon2/image.svg'
-import IconNull from '../../asset/icon/001-null.svg'
+import SearchSvg from '../../asset/icon2/search.svg'
 </script>
 
 <script>
@@ -22,15 +28,21 @@ import IconNull from '../../asset/icon/001-null.svg'
 export default {
     data() {
         return {
+            searchText: '',
             list: []
         }
     },
-    mounted() {
+    async mounted() {
         // this.$store.dispatch('shelves/list').then(list => {
         //     this.list = list
         // })
 
-        this.list = []
+        // 环境类型
+        var type0 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "test";
+        var type1 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "uat";
+        // 默认的模型接口
+        var res = await fetch(`https://${type0}-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/${type1}-yls/3D/shelves/scenes_data/shelf.json`).then(res => res.json());
+        this.list = res;
     },
     methods: {
         clickThumb(itm) {
@@ -48,38 +60,5 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 80px);
-}
 
-.yo-thumb {
-    display: inline-block;
-    width: 104px;
-    height: 78px;
-    background-color: #efefef;
-    border: none;
-    box-sizing: border-box;
-    border-radius: 4px;
-    margin: 8px 8px 8px 8px;
-    text-align: center;
-}
-
-.yo-thumb:hover,
-.yo-thumb:active,
-.yo-thumb:focus {
-    /* border-color: #c6e2ff;
-    background-color: #ecf5ff; */
-    color: #303133;
-    background-color: #efefef;
-    border: none;
-    /* opacity: 0.8; */
-    cursor: pointer;
-    transform: scale(1.05);
-}
-
-.yo-thumb img {
-    width: fit-content;
-    height: 100%;
-    border-radius: 4px;
-}
 </style>

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListWare.vue

@@ -1,20 +1,27 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar" style="height: calc(100vh - 155px)">
-        <el-button class="yo-thumb" @click="add">
+        <div class="yo-title-s16">商品库</div>
-            <el-icon class="yo-icon"><img :src="IconPlus" /></el-icon>
+        <a-input placeholder="请输入商品名" v-model:value="searchText">
-        </el-button>
+            <template #prefix>
-        <el-button class="yo-thumb" @click="remove">
+                <img :src="SearchSvg" />
-            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+            </template>
-        </el-button>
+        </a-input>
-        <div class="yo-thumb" v-for="(itm, index) in list" :key="index" @click="clickThumb(itm)">
+        <div class="yo-thumb" @click="add">
-            <img :src="itm.urlThumb" />
+            <img :src="ImageSvg" />
+        </div>
+        <!-- <el-button class="yo-thumb" @click="remove">
+            <el-icon class="yo-icon"><img :src="IconNull" /></el-icon>
+        </el-button> -->
+        <div class="yo-thumb" v-for="itm in list" @click="clickThumb(itm)">
+            <img class="yo-obj-fit-contain" :src="itm.urlThumb" />
+        </div>
     </div>
-    </el-scrollbar>
 </template>
 
 <script setup>
-import IconPlus from '../../asset/icon/002-plus.svg'
+
-import IconNull from '../../asset/icon/001-null.svg'
+import ImageSvg from '../../asset/icon2/image.svg'
+import SearchSvg from '../../asset/icon2/search.svg'
 </script>
 
 <script>
@@ -22,15 +29,22 @@ import IconNull from '../../asset/icon/001-null.svg'
 export default {
     data() {
         return {
+            searchText: '',
             list: []
         }
     },
-    mounted() {
+    async mounted() {
         // this.$store.dispatch('wares/list').then(list => {
         //     this.list = list
         // })
 
-        this.list = [];
+        // 环境类型
+        var type0 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "test";
+        var type1 = process.env.VUE_APP_CURRENTMODE == "prod" ? "prod" : "uat";
+        // 默认的模型接口
+        var res = await fetch(`https://${type0}-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/${type1}-yls/3D/shelves/scenes_data/ware.json`).then(res => res.json());
+        res = res.map(x => x.surveyWare);
+        this.list = res;
     },
     methods: {
         clickThumb(itm) {
@@ -48,38 +62,5 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 40px);
-}
 
-.yo-thumb {
-    display: inline-block;
-    width: 104px;
-    height: 78px;
-    background-color: #efefef;
-    border: none;
-    box-sizing: border-box;
-    border-radius: 4px;
-    margin: 8px 8px 8px 8px;
-    text-align: center;
-}
-
-.yo-thumb:hover,
-.yo-thumb:active,
-.yo-thumb:focus {
-    /* border-color: #c6e2ff;
-    background-color: #ecf5ff; */
-    color: #303133;
-    background-color: #efefef;
-    border: none;
-    /* opacity: 0.8; */
-    cursor: pointer;
-    transform: scale(1.05);
-}
-
-.yo-thumb img {
-    width: fit-content;
-    height: 100%;
-    border-radius: 4px;
-}
 </style>

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabPropCellWare.vue

@@ -1,10 +1,8 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar2" style="height: calc(100vh - 155px)">
-        <el-collapse v-model="activeNames">
+        <div class="yo-title-s16">商品设置</div>
-            <el-collapse-item title="货位堆放" name="cell">
+        <div v-if="cell" class="yo-content">
-                <div v-if="cell">
             <div>{{ cell.name }}</div>
-                    <div class="yo-v-gap"></div>
             <div class="yo-object-number">
                 <span>数量</span>
                 <el-input-number class="yo-input-number-small" v-model="cell.pileNumber" :min="1" :max="5" :step="1"
@@ -13,16 +11,12 @@
             </div>
             <div>
                 <span>旋转</span>
-                    <el-slider class="yo-slider" v-model="cell.pileRotationY" :min="-180" :max="180"
+                <el-slider class="yo-slider" v-model="cell.pileRotationY" :min="-180" :max="180" :show-tooltip="false"
-                        :show-tooltip="false" @input="$emit('changeCellPileRotationY')" />
+                    @input="$emit('changeCellPileRotationY')" />
             </div>
         </div>
         <div v-else class="empty1">请先选择一个货位</div>
-
+    </div>
-
-            </el-collapse-item>
-        </el-collapse>
-    </el-scrollbar>
 </template>
 
 <script setup>
@@ -53,16 +47,6 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 40px);
-    padding: 8px 16px;
-}
-
-.empty1 {
-    color: var(--el-color-info-dark-2);
-    text-align: center;
-}
-
 .yo-object-number {
     display: inline-block;
 }

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabPropPanorama.vue

@@ -1,20 +1,16 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar2" style="height: calc(100vh - 155px)">
-        <el-collapse v-model="activeNames">
+        <div class="yo-title-s16">环境设置</div>
-            <el-collapse-item title="环境" name="panorama">
+        <div v-if="panorama" class="yo-content">
-                <div v-if="panorama">
+            <div class="yo-title-s14">环境方向</div>
-                    <span>环境方向</span>
+            <a-slider v-model:value="panoramaRotationY" :min="-180" :max="180" />
-                    <el-slider class="yo-slider" v-model="panoramaRotationY" :min="-180" :max="180"
+            <a-divider />
-                        :show-tooltip="false" @input="changePanoramaRotationY" />
+            <div class="yo-title-s14">环境光强度</div>
-                    <div class="yo-v-gap"></div>
+            <a-slider v-model:value="panoramaMultiply" :min="0" :max="4" :step=".1"/>
-                    <span>环境光强度</span>
+            <a-divider />
-                    <el-slider class="yo-slider" v-model="panoramaMultiply" :min="0" :max="4" :step=".1"
-                        :show-tooltip="false" @input="changePanoramaMultiply" />
         </div>
         <div v-else class="empty1">请先选择一个环境</div>
-            </el-collapse-item>
+    </div>
-        </el-collapse>
-    </el-scrollbar>
 </template>
 
 <script setup>
@@ -75,6 +71,13 @@ export default {
         //     }
         // },
 
+        panoramaRotationY(newVal) {
+            this.changePanoramaRotationY(newVal)
+        },
+        panoramaMultiply(newVal) {
+            this.changePanoramaMultiply(newVal)
+        },
+
     },
     mounted() {
         // show panorama?
@@ -122,15 +125,6 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 40px);
-    padding: 8px 16px;
-}
-
-.empty1 {
-    color: var(--el-color-info-dark-2);
-    text-align: center;
-}
 
 .yo-shelf-name {
     display: inline-flex;
@@ -169,7 +163,6 @@ export default {
     display: inline-block;
     gap: 8px;
     align-items: center;
-    /* height: 36px; */
     margin-bottom: 12px;
 }
 
@@ -199,11 +192,6 @@ export default {
     margin: 0 4px;
 }
 
-.yo-slider {
-    width: 195px;
-    margin-left: 5px;
-}
-
 .yo-btn-add {
     min-width: 10px;
     height: 24px;

src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabPropShelf.vue

@@ -1,19 +1,21 @@
 <template>
-    <el-scrollbar class="yo-scrollbar">
+    <div class="yo-scrollbar2" style="height: calc(100vh - 155px)">
-        <el-collapse v-model="activeNames">
+        <div class="yo-title-s16">货架设置</div>
-            <el-collapse-item title="货架" name="shelf">
+        <div v-if="shelf" class="yo-content">
-                <div v-if="shelf">
+            <div class="yo-title-s14">货架位置</div>
             <Vec3Comp :vec3="shelf.position" icon="position" />
-                    <div class="yo-v-gap"></div>
+            <a-divider />
+            <div class="yo-title-s14">货架方向</div>
             <Vec3Comp :vec3="shelf.rotation" icon="rotation" />
+            <a-divider />
         </div>
         <div v-else class="empty1">请先选择一个货架</div>
-            </el-collapse-item>
+
-            <div class="yo-line"></div>
+        <el-collapse v-model="activeNames">
             <el-collapse-item title="货位" name="cells">
                 <div v-if="shelf">
                     <el-row :class="`yo-shelf-cells-position ${cell == extSelectedCell ? 'active' : ''}`"
-                        v-for="(cell, idx) in cells" :key="idx">
+                        v-for="(cell, idx) in cells">
                         <div class="yo-shelf-name">
                             {{ idx + 1 }}
                             <el-input class="yo-input-small" v-model="cell.name" />
@@ -60,13 +62,14 @@
                 <div v-else class="empty1">请先选择一个货架</div>
             </el-collapse-item>
         </el-collapse>
-    </el-scrollbar>
+    </div>
 </template>
 
 <script setup>
 import { Delete } from '@element-plus/icons-vue'
 import Vec3Comp from '../comp/Vec3Comp.vue'
-import { MAX_CELLS } from '../../../../crossyo/shelves-vue/store/shelves'
+// import { MAX_CELLS } from '@/crossyo/shelves-vue/store/shelves'
+const MAX_CELLS = 16
 </script>
 
 <script>
@@ -173,15 +176,6 @@ export default {
 </script>
 
 <style scoped>
-.yo-scrollbar {
-    height: calc(100vh - 40px);
-    padding: 8px 16px;
-}
-
-.empty1 {
-    color: var(--el-color-info-dark-2);
-    text-align: center;
-}
 
 .yo-shelf-name {
     display: inline-flex;
@@ -250,11 +244,6 @@ export default {
     margin: 0 4px;
 }
 
-.yo-slider {
-    width: 195px;
-    margin-left: 5px;
-}
-
 .yo-btn-add {
     min-width: 10px;
     height: 24px;

src/views/Creative/3d/crossyo/shelves-vue/components/editor/Toolbar.vue

@@ -14,8 +14,7 @@
 
         <a-button class="yo-btn-right yo-btn-blue" type="primary" @click="$emit('save')">
             <template #icon>
-                <!-- <SendOutlined /> -->
+                <img :src="SendSvg" />
-                <img :src="SendSvg" style="width: 24px" />
             </template>
             发送
         </a-button>
@@ -53,11 +52,12 @@ import SendSvg from '../../asset/icon2/send.svg'
     height: 40px;
     width: 100px;
     min-width: 10px;
-    /* line-height: 24px; */
+    line-height: 28px;
     color: #FFFFFF;
     background: #1C6FFF;
     border-color: #1C6FFF;
-    font-size: 15px;
+    font-size: 16px;
+    font-weight: 400;
     border-radius: 6px;
     letter-spacing: 2px;
     /* padding: 4px 20px; */
@@ -71,17 +71,10 @@ import SendSvg from '../../asset/icon2/send.svg'
     border: #1C6FFF;
 }
 
-.yo-btn-back {
+.yo-btn-right img {
-    position: absolute;
+    width: 24px;
-    left: 16px;
+    margin-right: 6px;
-    align-self: center;
+    padding-bottom: 2px;
-    height: 40px;
-    min-width: 10px;
-    /* line-height: 24px; */
-    color: #434343;
-    font-size: 16px;
-    letter-spacing: 2px;
-    /* padding: 4px 20px; */
 }
 
 .yo-btn-back {
@@ -93,7 +86,13 @@ import SendSvg from '../../asset/icon2/send.svg'
     /* line-height: 24px; */
     color: #434343;
     font-size: 16px;
+    font-weight: 400;
     letter-spacing: 2px;
     /* padding: 4px 20px; */
 }
+
+.yo-btn-back img {
+    width: 24px;
+    margin-right: 6px;
+}
 </style>

src/views/Creative/Creation.vue

@@ -30,6 +30,8 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 
+@import url("./utils.default.scss");
+
 :deep(img){
   width: 100%;
 }

src/views/Creative/Material.vue

@@ -16,7 +16,7 @@
             </span>
           </template>
         </a-input>
-        <a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
+        <a-button :disabled="!current.find(x => x)" type="primary" @click="createMaterialRef.show(current.find(x => x))">
           <PlusOutlined/> 新增
         </a-button>
       </div>
@@ -29,11 +29,12 @@
               <div class="pit-row" style="color: #262626;">
                 {{row.title}}
                 <div class="pit-tag" style="color: #0CC126; ">
-                  三维环境
+                  {{THREE_D_TYPE_S.find(x => x.type == row.type)?.name}}
                 </div>
               </div>
               <div class="pit-row" style="color: #8A8A8A;">
-                2022-08-08
+                <!-- 2022-08-08 -->
+                --
                 <div class="pit-more">
                   <a-dropdown placement="bottomCenter">
                     <a class="ant-dropdown-link" @click.prevent>

src/views/Creative/MyCreation.vue

@@ -4,9 +4,7 @@
       <div class="search">
         <a-menu v-model:selectedKeys="current" mode="horizontal">
           <a-menu-item :key="0">全部 </a-menu-item>
-          <a-menu-item :key="1">3D虚拟门店</a-menu-item>
+          <a-menu-item v-for="(item) in CREATIVE_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
-          <a-menu-item :key="2">3D环物</a-menu-item>
-          <a-menu-item :key="3">3D商品模型</a-menu-item>
         </a-menu>
         <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
           <template v-slot:prefix>
@@ -18,7 +16,7 @@
             </span>
           </template>
         </a-input>
-        <a-button type="primary">
+        <a-button :disabled="!current.find(x => x)" type="primary" @click="create3DRef.show(current.find(x => x))">
           <PlusOutlined/> 新增
         </a-button>
       </div>
@@ -30,18 +28,13 @@
             <div class="page-item-title">
               <div class="pit-row" style="color: #262626;">
                 {{row.title}}
-                <div v-if="row.type==1" class="pit-tag" style="color: #0CC126; ">
+                <div class="pit-tag" style="color: #0CC126; ">
-                  3D虚拟门店
+                  {{CREATIVE_TYPE_S.find(x => x.type == row.type)?.name}}
-                </div>
-                <div v-if="row.type==2" class="pit-tag" style="color: #0CC126; ">
-                  3D环物
-                </div>
-                <div v-if="row.type==3" class="pit-tag" style="color: #0CC126; ">
-                  3D商品模型
                 </div>
               </div>
               <div class="pit-row" style="color: #8A8A8A;">
-                2022-08-08
+                <!-- 2022-08-08 -->
+                --
                 <div class="pit-more">
                   <a-dropdown placement="bottomCenter">
                     <a class="ant-dropdown-link" @click.prevent>
@@ -106,6 +99,7 @@
         </div>
       </div>
       <RenameCreation ref="renameCreationRef" @complete="query" />
+      <Create3D ref="create3DRef" @complete="query"/>
     </div>
   </a-spin>
 </template>
@@ -116,7 +110,9 @@ import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
 import { computed, onMounted, ref, watch } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import RenameCreation from "./components/RenameCreation.vue";
+import Create3D from "./components/Create3D.vue";
 import { currentMock } from "./creation.mock";
+import { CREATIVE_TYPE, CREATIVE_TYPE_S } from "./components/Create3D.constant";
 import { getMaterials, delMaterialCenter } from "./api";
 import { useRouter } from "vue-router";
 
@@ -124,6 +120,8 @@ const router = useRouter();
 
 const renameCreationRef = ref();
 
+const create3DRef = ref();
+
 const current = ref([0]);
 
 const rows = ref([]);

src/views/Creative/api.js

@@ -34,6 +34,16 @@ export function delMaterialCenter(id) {
   })
 }
 
+
+/* 3D场景新增 */
+export function createMaterialCenter(data) {
+  return request({
+    url: `/console/material_center`,
+    method: 'POST',
+    data
+  })
+}
+
 /* 素材库列表 */
 export function getMaterialLibrary(params) {
   return request({

src/views/Creative/components/ChooseMarerial.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="item" v-for="(item, index) in list" :key="index" :class="current.includes(item) ? 'selected' : ''" @click="toggle(item)">
+      <div class="cover">
+        <img src="" alt="">
+      </div>
+      <div class="title">
+        作品名称
+      </div>
+    </div>
+    <div style="clear: both;"></div>
+  </div>
+</template>
+
+<script setup>
+const { ref }=require("@vue/reactivity");
+const { onMounted }=require("@vue/runtime-core");
+import { getMaterialLibrary } from "../api";
+
+const props = defineProps(["type"])
+
+const list = ref([]);
+
+const current = ref([]);
+
+const toggle = (item) => {
+  if(current.value.includes(item)){
+    current.value = current.value.filter(x => x != item);
+  }
+  else{
+    current.value.push(item);
+  }
+};
+
+onMounted(async () => {
+  const res = await getMaterialLibrary({
+    type: props.type, title: ""
+  });
+  list.value = res.data;
+});
+
+</script>
+
+<style scoped lang="scss">
+
+.item{
+  width: 31%;
+  border: solid 1px #eee;
+  outline: solid 1px #fff;
+  border-radius: 5px;
+  float: left;
+  margin: 5px 1%;
+  .cover{
+    width: 100%;
+    height: 120px;
+  }
+  .title{
+    line-height: 30px;
+    text-align: center;
+  }
+}
+.selected{
+  outline: solid 1px green;
+}
+</style>

src/views/Creative/components/Create3D.constant.js

@@ -0,0 +1,945 @@
+export const CREATIVE_TYPE = {
+  THREE_D: 1,
+  RING_360: 2,
+  MODEL_3D: 3,
+};
+
+export const CREATIVE_TYPE_S = [
+  {
+    type: CREATIVE_TYPE.THREE_D,
+    name: "3D虚拟门店"
+  },
+  {
+    type: CREATIVE_TYPE.RING_360,
+    name: "3D环物"
+  },
+  {
+    type: CREATIVE_TYPE.MODEL_3D,
+    name: "3D商品模型"
+  },
+];
+
+
+const factorys = [
+  {
+    type: CREATIVE_TYPE.THREE_D,
+    build: (data) => {
+      return {
+        "planetid": "scene1",
+        "name": "场景1",
+
+        "arrangementId": "bsld2da4",
+        "relShopId": "sllqkj4l",
+        "panorama": {
+          "url": "",
+          "urlSmall": "",
+          "urlThumb": "",
+          "urlDepth": "",
+          "urlShelfExr": "",
+          "rotationY": 0,
+          "multiply": 3
+        },
+        "shelves": [
+          {
+            "name": "货架1",
+            "planetid": "shelf1",
+
+            "id": "shelf1",
+            "url": "",
+            "urlThumb": "",
+            "hideWhenSurvey": true,
+            "cells": [
+
+              {
+                "name": "0-1",
+                "box": {
+                  "position": {
+                    "x": -0.6093719155636137,
+                    "y": 1.1925115714503842,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.029369916622918046,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "0-2",
+                "box": {
+                  "position": {
+                    "x": -0.18520626992561548,
+                    "y": 1.1908614160723439,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.03174731410176801,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "0-3",
+                "box": {
+                  "position": {
+                    "x": 0.2287325535366465,
+                    "y": 1.1892382329257407,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.028571714546698213,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "0-4",
+                "box": {
+                  "position": {
+                    "x": 0.661393068886308,
+                    "y": 1.1909523674363642,
+                    "z": 0.4537964589333506
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.03136253199426353,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "1-1",
+                "box": {
+                  "position": {
+                    "x": -0.605500512913119,
+                    "y": 0.8538858659191146,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.0027324557304382324,
+                        "y": -0.03184773059511403,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.1499999999999999,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "1-2",
+                "box": {
+                  "position": {
+                    "x": -0.18658027999214435,
+                    "y": 0.8512643658064176,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": 0,
+                        "y": -0.02759083972388149,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.1499999999999999,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "1-3",
+                "box": {
+                  "position": {
+                    "x": 0.2230628973331703,
+                    "y": 0.8511807287232012,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.005585700273513794,
+                        "y": -0.032213962561231047,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.1499999999999999,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "1-4",
+                "box": {
+                  "position": {
+                    "x": 0.6551478924840007,
+                    "y": 0.8483097259524031,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.02673691703609271,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "2-1",
+                "box": {
+                  "position": {
+                    "x": -0.60433011332925,
+                    "y": 0.5125224579062782,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.0027324557304382324,
+                        "y": -0.034508354476310954,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "2-2",
+                "box": {
+                  "position": {
+                    "x": -0.1914175066620415,
+                    "y": 0.5095275839341008,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": 0,
+                        "y": -0.027170852492222397,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "2-3",
+                "box": {
+                  "position": {
+                    "x": 0.22360906333448538,
+                    "y": 0.5101818344822482,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.005585700273513794,
+                        "y": -0.030842453533999448,
+                        "z": 0.1743204391002655
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "2-4",
+                "box": {
+                  "position": {
+                    "x": 0.6482247451401058,
+                    "y": 0.504394091002413,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.02471250348374021,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "3-1",
+                "box": {
+                  "position": {
+                    "x": -0.6134215690979794,
+                    "y": 0.1945505440235138,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.0027324557304382324,
+                        "y": -0.024228371171756358,
+                        "z": 0.1846828854084015
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "3-2",
+                "box": {
+                  "position": {
+                    "x": -0.19111044416229633,
+                    "y": 0.1945505440235138,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": 0,
+                        "y": -0.021009267483951266,
+                        "z": 0.1846828854084015
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "3-3",
+                "box": {
+                  "position": {
+                    "x": 0.21581759477578777,
+                    "y": 0.1945505440235138,
+                    "z": 0.45017966628074646
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "size": {
+                    "x": 0.37358155846595764,
+                    "y": 0.225911445915699,
+                    "z": 0.21794167160987854
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.005585700273513794,
+                        "y": -0.020448554878266023,
+                        "z": 0.1846828854084015
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 0.7393795847892761,
+                        "y": 0.05661093816161156,
+                        "z": 0.05661093816161156
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15000000000000002,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              },
+              {
+                "name": "3-4",
+                "box": {
+                  "position": {
+                    "x": 0.6432047193626257,
+                    "y": 0.19147498005043284,
+                    "z": 0.45
+                  },
+                  "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                  },
+                  "rotation": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                  },
+                  "size": {
+                    "x": 0.3736,
+                    "y": 0.2259,
+                    "z": 0.2179
+                  },
+                  "child": {
+                    "sign": {
+                      "position": {
+                        "x": -0.006,
+                        "y": -0.013996807328698846,
+                        "z": 0.1847
+                      },
+                      "rotation": {
+                        "x": 0,
+                        "y": 0,
+                        "z": 0
+                      },
+                      "scale": {
+                        "x": 1,
+                        "y": 1,
+                        "z": 1
+                      }
+                    },
+                    "logo": {
+                      "position": {
+                        "x": 0,
+                        "y": 0.15,
+                        "z": 0
+                      }
+                    }
+                  }
+                },
+                "pileNumber": 2,
+                "pileRotationY": 0
+              }
+            ],
+            "position": {
+              "x": 2.5193034425825944,
+              "y": -1.0605054800098004,
+              "z": 4.5102810375396984e-17
+            },
+            "rotation": {
+              "x": 0,
+              "y": -1.5707963267948966,
+              "z": 0
+            },
+            "scale": {
+              "x": 1,
+              "y": 1,
+              "z": 1
+            },
+
+            "wares": []
+          }
+        ]
+      }
+    }
+  },
+  {
+    type: CREATIVE_TYPE.RING_360,
+    build: (data) => {
+
+    }
+  },
+  {
+    type: CREATIVE_TYPE.MODEL_3D,
+    build: (data) => {
+
+    }
+  },
+];
+
+export const buildData = (data) => {
+
+  var factory = factorys.find(x => x.type == data.type);
+
+  if (!factory) throw new Error("Create3D.constant: 未找到素材数据构造方法");
+
+  return factory.build(data);
+};

src/views/Creative/components/Create3D.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-modal v-model:visible="visible" :title="title" width="800px" @ok="ok">
+    <a-steps v-if="formData.type==CREATIVE_TYPE.THREE_D" :current="step" size="small" style="margin: 0 auto; width: 80%;">
+      <a-step title="素材信息" />
+      <a-step title="选择环境" />
+      <a-step title="选择货架" />
+      <a-step title="选择商品" />
+    </a-steps>
+    <a-steps v-else :current="step" size="small" style="margin: 0 auto; width: 60%;">
+      <a-step title="素材信息" />
+      <a-step title="选择素材" />
+    </a-steps>
+    <a-form v-if="step==0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin: 40px 0;">
+      <a-form-item label="素材名称">
+        <a-input v-model:value="formData.title" placeholder="请输入素材名称" />
+      </a-form-item>
+    </a-form>
+    <div v-if="formData.type==CREATIVE_TYPE.THREE_D" style="margin: 20px 0;">
+      <div v-if="step==1">
+        <ChooseMarerial :type="THREE_D_TYPE.PANORAMA" v-model="formData.data.panorama"/>
+      </div>
+      <div v-if="step==2">
+        <ChooseMarerial :type="THREE_D_TYPE.SHELF" v-model="formData.data.shelves"/>
+      </div>
+      <div v-if="step==3">
+        <ChooseMarerial :type="THREE_D_TYPE.WARE" v-model="formData.data.wares"/>
+      </div>
+    </div>
+    <div v-if="formData.type==CREATIVE_TYPE.MODEL_3D" style="margin: 20px 0;">
+      <div v-if="step==1">
+        <ChooseMarerial :type="THREE_D_TYPE.CHARTLET" v-model="formData.data.panorama"/>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { UploadOutlined, InboxOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
+import { CREATIVE_TYPE_S, CREATIVE_TYPE, buildData } from "./Create3D.constant";
+import { THREE_D_TYPE } from "./CreateMaterial.constant";
+import ChooseMarerial from "./ChooseMarerial.vue"
+const { ref, reactive }=require("@vue/reactivity");
+import { createMaterialCenter } from "../api";
+
+const emit = defineEmits(["complete"]);
+
+const title = ref("");
+
+const visible = ref(false);
+
+const step = ref(0);
+
+const formData = ref({
+  type: 1,
+  title: '',
+  cover: '',
+  data: {}
+});
+
+const show = (type) => {
+  
+  const obj = CREATIVE_TYPE_S.find(x => x.type == type);
+  if(!obj) return;
+
+  title.value = obj.name;
+
+  var target = JSON.parse(JSON.stringify(obj));
+  target.title = "";
+  target.cover = "";
+  target.data = {};
+  formData.value = target;
+  step.value = 0;
+  visible.value = true;
+}
+
+const ok = async () => {
+  step.value++;
+  if(formData.value.type == CREATIVE_TYPE.THREE_D) {
+    if(step.value >= 4) {
+      formData.value.data = buildData(formData.value)
+      await createMaterialCenter(formData.value);
+      visible.value = false;
+      emit("complete");
+    }
+  }
+  else {
+    if(step.value >= 2) {
+      formData.value.data = buildData(formData.value)
+      await createMaterialCenter(formData.value);
+      visible.value = false;
+      emit("complete");
+    }
+  }
+}
+
+defineExpose({
+  show
+})
+
+</script>
+
+<style scoped lang="scss">
+.back{
+  cursor: pointer;
+}
+.ant-upload-drag-icon{
+  :deep(svg){
+    font-size: 50px!important;
+  }
+}
+.image-list{
+  .image-list-item{
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    margin-right: 10px;
+    position: relative;
+    font-size: 40px;
+    img{
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .del{
+      color: red;
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      :deep(*){
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/Creative/components/Header.vue

@@ -1,27 +0,0 @@
-<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>

src/views/Creative/utils.default.scss

@@ -0,0 +1,387 @@
+
+/* Works on Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #ECECEC rgba(0, 0, 0, 0);
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0);
+  border-radius: 0;
+}
+
+/* *::-webkit-scrollbar-track {
+} */
+
+*::-webkit-scrollbar-thumb {
+  width: 4px;
+  height: 4px;
+  background: #ECECEC;
+  border-radius: 0;
+}
+
+/* Code for Firefox */
+::-moz-selection { 
+color: #fff;
+background: #70B936;
+}
+
+/* Code for Chrome, Edge, and Safari */
+::selection {
+color: #fff;
+background: #70B936;
+}
+
+#app {
+  margin: 0px;
+}
+
+.yo-scrollbar {
+  display: flex;
+  flex-flow: column;
+  flex-wrap: wrap;
+  gap: 25px;
+  padding: 25px;
+  overflow-y: auto;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.yo-scrollbar2 {
+  display: flex;
+  flex-flow: column;
+  /* gap: 25px; */
+  padding: 25px;
+  overflow-y: auto;
+}
+
+.yo-content {
+  display: flex;
+  flex-flow: column;
+  gap: 25px;
+  padding-top: 25px;
+}
+
+.yo-thumb {
+  display: inline-block;
+  width: auto;
+  height: 130px;
+  /* color: #70B936; */
+  background-color: rgba(245, 245, 245, 0.6);
+  border: none;
+  box-sizing: border-box;
+  border-radius: 10px;
+  margin: 0;
+  text-align: center;
+}
+
+.yo-thumb:hover,
+.yo-thumb:focus {
+  border: none;
+  cursor: pointer;
+  transform: scale(1.05);
+}
+
+.yo-thumb:active {
+  border: none;
+  cursor: pointer;
+  transform: scale(0.95);
+}
+
+.yo-thumb img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.yo-obj-fit-cover {
+  object-fit: cover;
+}
+
+.yo-obj-fit-contain {
+  object-fit: contain;
+}
+
+.ant-input {
+  color: #434343;
+}
+
+.ant-input-affix-wrapper {
+  color: #434343;
+  border-color: #DFE0E3;
+  background: #FEFFFE;
+  border-radius: 6px;
+  padding-left: 4px;
+}
+
+.ant-input-affix-wrapper:hover {
+  border-color: #70B936;
+}
+
+.ant-input-affix-wrapper img {
+  width: 24px;
+}
+
+.ant-input-affix-wrapper-focused {
+  box-shadow: none;
+}
+
+.ant-input-affix-wrapper .ant-input-prefix,
+.ant-input-affix-wrapper .ant-input-suffix {
+  color: #7E7E7E;
+  font-size: 12px;
+}
+
+.ant-slider-rail {
+  height: 6px;
+  background: #ECECEC;
+  border-radius: 3px;
+}
+
+.ant-slider-track {
+  height: 6px;
+  background: #7EC04A;
+  border-radius: 3px;
+}
+
+.ant-slider-handle {
+  width: 20px;
+  height: 20px;
+  margin-top: -7px;
+  background: #7EC04A;
+  border: 4px solid #DFF4D0;
+}
+
+.ant-slider-handle:focus {
+  border-color: #DFF4D0;
+  box-shadow: none;
+}
+
+.ant-slider-handle.ant-tooltip-open {
+  border-color: #DFF4D0;
+}
+
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+  border-color: #DFF4D0;
+}
+
+.ant-slider-step {
+  height: 6px;
+}
+
+.ant-slider:hover .ant-slider-rail {
+  background: #ECECEC;
+}
+
+.ant-slider:hover .ant-slider-track {
+  background: #7EC04A;
+}
+
+.ant-tooltip-inner {
+  color: #fff;
+  background: #808080;
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  box-shadow: none;
+}
+
+.ant-radio-button-wrapper {
+  color: #434343;
+  border: none;
+  background: #f9f9f9;
+}
+
+.ant-radio-button-wrapper:hover {
+  color: #7EC04A;
+  background: #f9f9f9;
+}
+
+/* .ant-radio-button-wrapper:active {
+  color: #7EC04A;
+  background: #f9f9f9;
+} */
+
+.ant-radio-button-wrapper:first-child {
+  border: none;
+  border-radius: 6px 0 0 6px;
+}
+
+.ant-radio-button-wrapper:last-child {
+  border: none;
+  border-radius: 0 6px 6px 0;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  color: #ffffff;
+  background: #7EC04A;
+  border: none;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+  color: #ffffff;
+  background: #7EC04A;
+  border: none;
+}
+
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
+}
+
+.ant-radio-button-wrapper:not(:first-child)::before {
+  background: none;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+  background: none;
+}
+
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
+  background: none;
+}
+
+.ant-divider {
+  color: #F5F5F5;
+  margin: 0;
+}
+
+.empty1 {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  color: #434343;
+  text-align: center;
+}
+
+.yo-title-s16 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #434343;
+}
+
+.yo-title-s14 {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  color: #434343;
+}
+
+.yo-icon img {
+  width: 100%;
+  height: 100%;
+}
+
+/* element plus */
+
+.el-button {
+  min-width: 88px;
+}
+
+.el-button--small {
+  font-size: 11px;
+}
+
+.el-scrollbar__bar.is-vertical {
+  width: 4px;
+  top: 0;
+}
+
+.el-scrollbar__bar {
+  right: 0;
+  bottom: 0;
+  border-radius: 0;
+}
+
+.el-dialog__headerbtn {
+  font-size: 20px;
+}
+
+.el-dialog__footer {
+  text-align: center;
+}
+
+.dialog-footer button:first-child {
+  margin-right: 40px;
+}
+
+.el-collapse {
+  border: none;
+  background: none;
+}
+
+.el-collapse-item__header {
+  border: none;
+  background: none;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.el-collapse-item__wrap {
+  border: none;
+  background: none;
+}
+
+.el-collapse-item__content {
+  font-size: 11px;
+}
+
+.el-slider {
+  height: 24px;
+  --el-slider-border-radius: 3px;
+  --el-slider-height: 1px;
+  --el-slider-button-size: 10px;
+  --el-slider-button-wrapper-size: 8px;
+  --el-slider-button-wrapper-offset: -8px;
+}
+
+.el-slider__button {
+  border: solid 1px var(--el-slider-main-bg-color);
+}
+
+.el-slider__bar {
+  background: none;
+}
+
+.el-input.is-disabled .el-input__wrapper {
+  background-color: #ffffff;
+}
+
+.yo-special-input .yo-input-small .el-input__wrapper {
+  padding: 1px 16px 1px 8px;
+}
+
+.el-input-number.is-controls-right .el-input__wrapper {
+  padding-left: 8px;
+  padding-right: 24px;
+}
+
+.el-input-number--small .el-input-number__decrease,
+.el-input-number--small .el-input-number__increase {
+  width: 16px;
+  font-size: 11px;
+}
+
+.yo-input-number-small {
+  width: 56px;
+}
+
+.yo-input-small {
+  font-size: 11px;
+  height: 24px;
+}
+
+.yo-line {
+  width: 100%;
+  height: 1px;
+  background-color: #efefef;
+}
+
+.yo-v-gap {
+  width: 100%;
+  height: 8px;
+}
+
+/* antdv */