fix: 集成陶工版本

package-lock.json

@@ -1956,6 +1956,87 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -13751,87 +13832,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-matomo": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/vue-matomo/-/vue-matomo-4.1.0.tgz",

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

@@ -1,46 +1,61 @@
 import { reactive } from 'vue'
 import { api } from '../../../shelves-vue/api/baseApi'
 
+// #20221223, uv2 to uvGroup 暂时不启用 通过 texture中的 @relUvGroup m:n 关联
+// #20221223, 通过 1:n 与 texture中的 @relCommodityId关联
+
 export const commodities = reactive({
     list: [
         {
+            id: "vB8DxY",
             name: "can-1",
             url: `${api.storePrefix}/commodity/4w2sNH/can-1.glb`,
             urlThumb: `${api.storePrefix}/commodity/4w2sNH/can-t.png`,
-            uv2: "uv0001",
+            uvGroup: "uv0001",
-        },
-        {
-            name: "box-1",
-            url: `${api.storePrefix}/commodity/Ddv0so/box-1.glb`,
-            urlThumb: `${api.storePrefix}/commodity/Ddv0so/box-t.png`,
-            uv2: "uv0001",
-        },
-        {
-            name: "pillow-1",
-            url: `${api.storePrefix}/commodity/ejZCVf/pillow-1.glb`,
-            urlThumb: `${api.storePrefix}/commodity/ejZCVf/pillow-t.png`,
-            uv2: "uv0001",
         },
+        // 暂时不启用，用于uvGroup时，还可以用来做测试
+        // {
+        //     id: "bmJZrV",
+        //     name: "box-1",
+        //     url: `${api.storePrefix}/commodity/Ddv0so/box-1.glb`,
+        //     urlThumb: `${api.storePrefix}/commodity/Ddv0so/box-t.png`,
+        //     uvGroup: "uv0001",
+        // },
+        // {
+        //     id: "I23LAF",
+        //     name: "pillow-1",
+        //     url: `${api.storePrefix}/commodity/ejZCVf/pillow-1.glb`,
+        //     urlThumb: `${api.storePrefix}/commodity/ejZCVf/pillow-t.png`,
+        //     uvGroup: "uv0001",
+        // },
 
         // v2
         {
+            id: "aV4P66",
             name: "box-2",
             url: `${api.storePrefix}/commodity/RJvhDw/box-2.glb`,
             urlThumb: `${api.storePrefix}/commodity/RJvhDw/box2-t.png`,
-            uv2: "uv0002",
+            uvGroup: "uv0002",
-        },
-        {
-            name: "box-3",
-            url: `${api.storePrefix}/commodity/yW34DQ/box-3.glb`,
-            urlThumb: `${api.storePrefix}/commodity/yW34DQ/box3-t.png`,
-            uv2: "uv0002",
-        },
-        {
-            name: "bottle-1",
-            url: `${api.storePrefix}/commodity/bK1OvY/bottle-1.glb`,
-            urlThumb: `${api.storePrefix}/commodity/bK1OvY/bottle-t.png`,
-            uv2: "uv0002",
         },
+        // 暂时不启用，用于uvGroup时，还可以用来做测试
+        // {
+        //     id: "ZxBj5x",
+        //     name: "box-3",
+        //     url: `${api.storePrefix}/commodity/yW34DQ/box-3.glb`,
+        //     urlThumb: `${api.storePrefix}/commodity/yW34DQ/box3-t.png`,
+        //     uvGroup: "uv0002",
+        // },
+        // {
+        //     id: "lNIfW5",
+        //     name: "bottle-1",
+        //     url: `${api.storePrefix}/commodity/bK1OvY/bottle-1.glb`,
+        //     urlThumb: `${api.storePrefix}/commodity/bK1OvY/bottle-t.png`,
+        //     uvGroup: "uv0002",
+        // },
+
+        // v5
+
+
 
     ]
 })

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

@@ -38,7 +38,7 @@ export const panoramas = reactive({
             urlShelfExr: `${api.storePrefix}/v3.5/panorama/shop1-yo-2-shelf-1k.exr`, // #20221009
             urlHoldExr: `${api.storePrefix}/v3.5/panorama/shop1-yo-2-hold-1k.exr`, // #20221011
             rotationY: 0,
-            multiply: 2,
+            multiply: 3, // #20221223 2 to 3
         },
     ],
 }) 

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

@@ -1,46 +1,62 @@
 import { reactive } from 'vue'
 import { api } from '../../../shelves-vue/api/baseApi'
 
+// #20221223, uv2 to relUvGroup 暂时不启用
+// #20221223, 通过 1:n 与 texture中的 @relCommodityId关联
+
 export const textures = reactive({
     list: [
         {
+            id: "AgcvT1",
             name: "香蕉",
-            uv2: "uv0001",
+            relUvGroup: "uv0001",
             url: `${api.storePrefix}/texture/qh5BZs/2k/design-1-nologo-20220520-gen-00000--logo-mn-banana.jpg`,
             urlSmall: `${api.storePrefix}/texture/qh5BZs/1k/design-1-nologo-20220520-gen-00000--logo-mn-banana.jpg`,
+            relCommodityId: "vB8DxY",
         },
         {
+            id: "yKd1vp",
             name: "蓝莓",
-            uv2: "uv0001",
+            relUvGroup: "uv0001",
             url: `${api.storePrefix}/texture/qh5BZs/2k/design-1-nologo-20220520-gen-00000--logo-mn-blueberry.jpg`,
             urlSmall: `${api.storePrefix}/texture/qh5BZs/1k/design-1-nologo-20220520-gen-00000--logo-mn-blueberry.jpg`,
+            relCommodityId: "vB8DxY",
         },
         {
+            id: "DJgALu",
             name: "草莓",
-            uv2: "uv0001",
+            relUvGroup: "uv0001",
             url: `${api.storePrefix}/texture/qh5BZs/2k/design-1-nologo-20220520-gen-00000--logo-mn-strawberry.jpg`,
             urlSmall: `${api.storePrefix}/texture/qh5BZs/1k/design-1-nologo-20220520-gen-00000--logo-mn-strawberry.jpg`,
+            relCommodityId: "vB8DxY",
         },
 
         // v2
         {
+            id: "x6T3xv",
             name: "刺角瓜",
-            uv2: "uv0002",
+            relUvGroup: "uv0002",
             url: `${api.storePrefix}/texture/ykvH9u/2k/design-2-nologo-20220503-gen-00000--logo-mn-v2-a.jpg`,
             urlSmall: `${api.storePrefix}/texture/ykvH9u/1k/design-2-nologo-20220503-gen-00000--logo-mn-v2-a.jpg`,
+            relCommodityId: "aV4P66",
         },
         {
+            id: "73aWPv",
             name: "冰晶蓝",
-            uv2: "uv0002",
+            relUvGroup: "uv0002",
             url: `${api.storePrefix}/texture/ykvH9u/2k/design-2-nologo-20220503-gen-00000--logo-mn-v2-b.jpg`,
             urlSmall: `${api.storePrefix}/texture/ykvH9u/1k/design-2-nologo-20220503-gen-00000--logo-mn-v2-b.jpg`,
+            relCommodityId: "aV4P66",
         },
         {
+            id: "U9wSV2",
             name: "奇亚籽",
-            uv2: "uv0002",
+            relUvGroup: "uv0002",
             url: `${api.storePrefix}/texture/ykvH9u/2k/design-2-nologo-20220503-gen-00000--logo-mn-v2-c.jpg`,
             urlSmall: `${api.storePrefix}/texture/ykvH9u/1k/design-2-nologo-20220503-gen-00000--logo-mn-v2-c.jpg`,
+            relCommodityId: "aV4P66",
         },
 
+
     ]
 })

src/views/Creative/3d/crossyo/shelves-vue-demo/api/mockApi.js

@@ -143,6 +143,17 @@ export const setupMockApi = (store) => {
         })
     }
 
+    api.listTexturesByRelCommodityId = (relCommodityId) => {
+        // console.log('MOCK API listTexturesByRelCommodityId',
+        //     relCommodityId,
+        //     textures.list,
+        //     textures.list.filter(itm => itm.relCommodityId == relCommodityId)
+        // )
+        return new Promise(resolve => {
+            resolve(wrap_result_(textures.list.filter(itm => itm.relCommodityId == relCommodityId)))
+        })
+    }
+
     api.addTexture = data => {
         return new Promise(resolve => {
             let data2 = Object.assign({}, data, {

src/views/Creative/3d/crossyo/shelves-vue-demo/api/util/surveyData-generator.js

@@ -169,6 +169,7 @@ export const generate_v5_ = opts => {
         '4': 0,
     }
 
+
     let pages = []
     for (let i = 0; i < opts.PAGE_MAX; i++) {
         // console.log(sr.next())
@@ -177,6 +178,12 @@ export const generate_v5_ = opts => {
 
         if (opts.shopData.shelves) {
             opts.shopData.shelves.forEach(shelf => {
+
+                let forcePileNumber = null
+                if (shelf.hideWhenSurvey) { // 测试用，可能是，大超市货架 4x4 
+                    forcePileNumber = 6
+                }
+
                 shelf.cells.forEach((cell, idx) => {
                     let col = cell.name.substring(2)
                     // console.log('col', col)
@@ -186,8 +193,8 @@ export const generate_v5_ = opts => {
                         sign: cell.sign,
                         logo: cell.logo,
                         //
-                        pileNumber: opts.forcePileNumber || cell.pileNumber,
+                        pileNumber: forcePileNumber || cell.pileNumber || 2,
-                        pileRotationY: cell.pileRotationY,
+                        pileRotationY: cell.pileRotationY || 0,
                         //
                         // surveyWare: sr.nextFromArray(wares_v3_5_),
                         surveyWare: opts.wares_v3_5_[col_2_ware_i[col]],

src/views/Creative/3d/crossyo/shelves-vue-demo/asset/flow1.svg

@@ -45,7 +45,7 @@
 </g>
 </g>
 </g>
-<path d="M962 321.127H1097C1101.14 321.127 1104.5 324.485 1104.5 328.627V344.127H954.5V328.627C954.5 324.485 957.858 321.127 962 321.127Z" stroke="#2097F6"/>
+<path d="M954.5 328.627C954.5 324.485 957.858 321.127 962 321.127H1097C1101.14 321.127 1104.5 324.485 1104.5 328.627V344.127H954.5V328.627Z" stroke="#2097F6"/>
 </g>
 <g id="Group 8" filter="url(#filter3_d_2_2)">
 <g id="Frame 4" filter="url(#filter4_d_2_2)">
@@ -67,7 +67,7 @@
 </g>
 </g>
 </g>
-<path d="M1148 322.5H1283C1287.14 322.5 1290.5 325.858 1290.5 330V345.5H1140.5V330C1140.5 325.858 1143.86 322.5 1148 322.5Z" stroke="#2097F6"/>
+<path d="M1140.5 330C1140.5 325.858 1143.86 322.5 1148 322.5H1283C1287.14 322.5 1290.5 325.858 1290.5 330V345.5H1140.5V330Z" stroke="#2097F6"/>
 </g>
 <g id="Group 8_2" filter="url(#filter7_d_2_2)">
 <g id="Frame 4_2" filter="url(#filter8_d_2_2)">
@@ -131,7 +131,7 @@
 </g>
 </g>
 </g>
-<path d="M962 856.5H1097C1101.14 856.5 1104.5 859.858 1104.5 864V879.5H954.5V864C954.5 859.858 957.858 856.5 962 856.5Z" stroke="#65BF73"/>
+<path d="M954.5 864C954.5 859.858 957.858 856.5 962 856.5H1097C1101.14 856.5 1104.5 859.858 1104.5 864V879.5H954.5V864Z" stroke="#65BF73"/>
 </g>
 <g id="Group 8_3">
 <g id="Frame 4_3" filter="url(#filter13_d_2_2)">
@@ -153,7 +153,7 @@
 </g>
 </g>
 </g>
-<path d="M1148 856.873H1283C1287.14 856.873 1290.5 860.23 1290.5 864.373V879.873H1140.5V864.373C1140.5 860.23 1143.86 856.873 1148 856.873Z" stroke="#65BF73"/>
+<path d="M1140.5 864.373C1140.5 860.23 1143.86 856.873 1148 856.873H1283C1287.14 856.873 1290.5 860.23 1290.5 864.373V879.873H1140.5V864.373Z" stroke="#65BF73"/>
 </g>
 <g id="Group 8_4">
 <g id="Frame 4_4" filter="url(#filter15_d_2_2)">
@@ -175,7 +175,7 @@
 </g>
 </g>
 </g>
-<path d="M962 694.5H1097C1101.14 694.5 1104.5 697.858 1104.5 702V717.5H954.5V702C954.5 697.858 957.858 694.5 962 694.5Z" stroke="#65BF73"/>
+<path d="M954.5 702C954.5 697.858 957.858 694.5 962 694.5H1097C1101.14 694.5 1104.5 697.858 1104.5 702V717.5H954.5V702Z" stroke="#65BF73"/>
 </g>
 <g id="Group 8_5">
 <g id="Frame 4_5" filter="url(#filter17_d_2_2)">
@@ -197,7 +197,7 @@
 </g>
 </g>
 </g>
-<path d="M1148 694.873H1283C1287.14 694.873 1290.5 698.23 1290.5 702.373V717.873H1140.5V702.373C1140.5 698.23 1143.86 694.873 1148 694.873Z" stroke="#65BF73"/>
+<path d="M1140.5 702.373C1140.5 698.23 1143.86 694.873 1148 694.873H1283C1287.14 694.873 1290.5 698.23 1290.5 702.373V717.873H1140.5V702.373Z" stroke="#65BF73"/>
 </g>
 <g id="Group 8_6">
 <g id="Frame 4_6" filter="url(#filter19_d_2_2)">
@@ -326,8 +326,8 @@
 <text id="&#231;&#142;&#175;&#229;&#162;&#131;_2" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="1362" y="111.969">&#x73af;&#x5883;</tspan></text>
 <text id="&#230;&#140;&#130;&#232;&#189;&#189;" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="1316" y="262.969">&#x6302;&#x8f7d;</tspan></text>
 <text id="&#230;&#140;&#130;&#232;&#189;&#189;_2" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="1316" y="362.969">&#x6302;&#x8f7d;</tspan></text>
-<text id="&#230;&#140;&#130;&#232;&#189;&#189;_3" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="908" y="549.969">&#x6302;&#x8f7d;</tspan></text>
+<text id="&#230;&#140;&#130;&#232;&#189;&#189;_3" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="908" y="594.969">&#x6302;&#x8f7d;</tspan></text>
-<text id="1.&#229;&#174;&#140;&#230;&#149;&#180;&#230;&#168;&#161;&#229;&#158;&#139; 2.&#230;&#168;&#161;&#229;&#158;&#139;+&#231;&#186;&#185;&#231;&#144;&#134;" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="855" y="501.969">1.&#x5b8c;&#x6574;&#x6a21;&#x578b; &#10;</tspan><tspan x="855" y="520.969">2.&#x6a21;&#x578b;+&#x7eb9;&#x7406;</tspan></text>
+<text id="1.&#229;&#174;&#140;&#230;&#149;&#180;&#230;&#168;&#161;&#229;&#158;&#139; 2.&#230;&#168;&#161;&#229;&#158;&#139;+&#231;&#186;&#185;&#231;&#144;&#134;" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="855" y="501.969">1.&#x5b8c;&#x6574;&#x6a21;&#x578b; &#10;</tspan><tspan x="855" y="520.969">&#10;</tspan><tspan x="855" y="539.969">2.&#x6a21;&#x578b;+&#x7eb9;&#x7406;</tspan></text>
 <text id="&#229;&#174;&#185;&#229;&#153;&#168;" fill="#5452F6" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="16" letter-spacing="0em"><tspan x="1054" y="111.969">&#x5bb9;&#x5668;</tspan></text>
 <g id="action-generator-seed" filter="url(#filter33_d_2_2)">
 <rect x="284" y="959.627" width="100" height="40" rx="20" fill="white"/>
@@ -683,14 +683,14 @@
 <g id="action-ware-add">
 <g id="Group 39_31">
 <g id="Ellipse 4_31" filter="url(#filter65_d_2_2)">
-<circle cx="977.627" cy="497.627" r="16" transform="rotate(45 977.627 497.627)" fill="white"/>
+<circle cx="977.627" cy="492.627" r="16" transform="rotate(45 977.627 492.627)" fill="white"/>
-<circle cx="977.627" cy="497.627" r="15.5" transform="rotate(45 977.627 497.627)" stroke="#5452F6"/>
+<circle cx="977.627" cy="492.627" r="15.5" transform="rotate(45 977.627 492.627)" stroke="#5452F6"/>
 </g>
 </g>
 <g id="Group 18_11">
 <g id="Group 17_11">
-<path id="Line 2_11" d="M977.089 489.142V506.113" stroke="#5452F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Line 2_11" d="M977.089 484.142V501.113" stroke="#5452F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Line 3_11" d="M985.574 497.627L968.603 497.627" stroke="#5452F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Line 3_11" d="M985.574 492.627L968.603 492.627" stroke="#5452F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </g>
 </g>
@@ -1234,7 +1234,7 @@
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_2"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_2" result="shape"/>
 </filter>
-<filter id="filter65_d_2_2" x="961.627" y="481.627" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter65_d_2_2" x="961.627" y="476.627" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dx="4" dy="4"/>

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

@@ -1,17 +1,32 @@
 <template>
-    <div>
+    <div class="ui">
-        <DatePicker />
+        <div class="all">
-        <Button>数据</Button>
+            <div class="top">
-        <a-layout>
+
-            <a-layout-header theme="light">Header</a-layout-header>
+                <Toolbar @back="back" @save="save" />
-            <a-layout>
+
-                <a-layout-sider theme="light">Sider</a-layout-sider>
+            </div>
-                <a-layout-content>Content</a-layout-content>
+
-                <a-layout-sider theme="light">Sider</a-layout-sider>
+            <div class="yo-container">
-            </a-layout>
+                <div class="left">
-        </a-layout>
+                    <TabListCommodity @clickThumb="clickThumbCommodity" @add="addCommodity" @remove="removeCommodity" />
+                </div>
+                <div class="yo-main">
+                    <SceneSeparateTexturePreviewer :selCommodity="selCommodity" :selTexture="selTexture" />
+                </div>
+                <div class="right">
+                    <TabListCommodityRelTexture :relCommodity="selCommodity" @clickThumb="clickThumbTexture"
+                        @add="addTexture" @remove="removeTexture" />
+                </div>
+            </div>
+        </div>
     </div>
 
+    <CommodityUploader :isOpen="isOpenCommodityUploader" @close="closeCommodityUploader"
+        @success="commodityAddSuccess" />
+    <TextureUploader :isOpen="isOpenTextureUploader" @close="closeTextureUploader" @success="textureAddSuccess"
+        :relCommodityId="selCommodity ? selCommodity.id : null" />
+
 </template>
 
 <script setup>
@@ -20,10 +35,172 @@
 
 // https://share.lanhuapp.com/#/invite?sid=lXPuKlJa
 
-import { DatePicker, Button } from 'ant-design-vue'
+import Toolbar from '../../shelves-vue/components/editor/Toolbar.vue'
-
+import TabListCommodity from '../../shelves-vue/components/editor/TabListCommodity.vue'
+import TabListCommodityRelTexture from '../../shelves-vue/components/editor/TabListCommodityRelTexture.vue'
+import CommodityUploader from '../../shelves-vue/view/CommodityUploader.vue'
+import TextureUploader from '../../shelves-vue/view/TextureUploader.vue'
+import SceneSeparateTexturePreviewer from '../../shelves-vue/components/SceneSeparateTexturePreviewer.vue'
 
 </script>
 
-<style>
+<script>
+
+export default {
+    data() {
+        return {
+            isOpenCommodityUploader: false,
+            isOpenTextureUploader: false,
+
+            selCommodity: null,
+            selTexture: null,
+        }
+    },
+    methods: {
+        back() {
+            this.$router.push("/")
+        },
+        save() {
+            // create new ware
+
+            if (this.selCommodity && this.selTexture) {
+
+                this.$store.dispatch('wares/add', {
+                    type: 1,
+                    commodity: this.selCommodity,
+                    texture: this.selTexture,
+                    urlThumb: this.selCommodity.urlThumb,
+                }).then(data2 => {
+
+                })
+
+            }
+
+
+        },
+
+        //
+        addCommodity() {
+            this.isOpenCommodityUploader = true
+        },
+        clickThumbCommodity(itm) {
+            // console.log(itm) 
+            this.selCommodity = itm
+
+        },
+        removeCommodity() {
+            this.selCommodity = null
+        },
+        //
+
+        //
+        addTexture() {
+            this.isOpenTextureUploader = true
+        },
+        clickThumbTexture(itm) {
+            this.selTexture = itm
+        },
+        removeTexture() {
+            this.selTexture = null
+        },
+        //
+
+        closeCommodityUploader() {
+            this.isOpenCommodityUploader = false
+
+
+
+        },
+        commodityAddSuccess(data) {
+            this.clickThumbCommodity(data)
+        },
+
+        closeTextureUploader() {
+            this.isOpenTextureUploader = false
+
+
+        },
+        textureAddSuccess(data) {
+            this.clickThumbTexture(data)
+        },
+
+    },
+}
+
+</script>
+
+<style scoped>
+div.ui {
+    position: fixed;
+    width: 100vw;
+    /* height: 100vh; */
+}
+
+.all {
+    height: 100vh;
+    /* background-color: beige; */
+}
+
+.yo-tabs {
+    position: absolute;
+    top: 90px;
+    left: 24px;
+    right: 24px;
+    bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    flex-basis: auto;
+    box-sizing: border-box;
+    min-width: 0;
+    border-radius: 6px;
+    background: transparent;
+}
+
+.yo-container {
+    position: absolute;
+    top: 135px;
+    left: 24px;
+    right: 24px;
+    bottom: 20px;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    flex-basis: auto;
+    box-sizing: border-box;
+    min-width: 0;
+    /* margin: 21px 24px; */
+    border-radius: 0 6px 6px 6px;
+    background: #FFFFFF;
+    box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.yo-main {
+    display: block;
+    flex: 1;
+    flex-basis: auto;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.top {
+    /* background-color: burlywood; */
+    height: auto;
+    padding: 0;
+}
+
+.left {
+    width: 280px;
+    background-color: #ffffff;
+}
+
+.main {
+    padding: 0px;
+}
+
+.right {
+    width: 280px;
+    background-color: #ffffff;
+}
 </style>

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

@@ -107,7 +107,7 @@ import {
 } from '../api/util/surveyData-generator'
 import { behaviors } from '../api/mock-data/behaviors-mock-data'
 
-import { api } from '@/crossyo/shelves-vue/api/baseApi'
+import { api } from '@/views/Creative/3d/crossyo/shelves-vue/api/baseApi'
 
 export default {
     components: {

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

@@ -8,7 +8,7 @@ import { wares } from '../api/mock-data/wares-mock-data'
 import { behaviors } from '../api/mock-data/behaviors-mock-data'
 import { rotSprites } from '../api/mock-data/rotSprites-mock-data'
 import { tags } from '../api/mock-data/tags-mock-data'
-// import { api } from "@/crossyo/shelves-vue/api/baseApi"
+import { api } from "@/views/Creative/3d/crossyo/shelves-vue/api/baseApi"
 
 const setup = function () {
 

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

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-// import { api } from "@/crossyo/shelves-vue/api/baseApi";
+import { api } from "@/views/Creative/3d/crossyo/shelves-vue/api/baseApi";
 import SceneShopSurveyViewer from "../../shelves-vue/components/SceneShopSurveyViewer.vue"
 
 export default {
@@ -76,41 +76,41 @@ export default {
     mounted() {
         let surveyId = this.$route.params.surveyId
 
-        // api.getSurveyData(surveyId).then(resp => {
+        api.getSurveyData(surveyId).then(resp => {
-        //     // console.log(resp)
+            // console.log(resp)
-        //     if (resp.data && resp.data.success) {
+            if (resp.data && resp.data.success) {
-        //         let surveyData = resp.data.result
+                let surveyData = resp.data.result
 
-        //         let qs_option = this.$route.params.option // #20221022, 用于测试，例如
+                let qs_option = this.$route.params.option // #20221022, 用于测试，例如
-        //         // console.log(`qs_option := ${qs_option}`) // showLogo=false
+                // console.log(`qs_option := ${qs_option}`) // showLogo=false
-        //         if (qs_option) {
+                if (qs_option) {
-        //             let option = new URLSearchParams(qs_option)
+                    let option = new URLSearchParams(qs_option)
-        //             // console.log(option.get('overWriteShowLogo') == 'false', option.get('overWriteShowSign') == 'false')
+                    // console.log(option.get('overWriteShowLogo') == 'false', option.get('overWriteShowSign') == 'false')
-        //             let overWriteShowLogo = option.get('overWriteShowLogo')
+                    let overWriteShowLogo = option.get('overWriteShowLogo')
-        //             let overWriteShowSign = option.get('overWriteShowSign')
+                    let overWriteShowSign = option.get('overWriteShowSign')
-        //             surveyData.pages.forEach(page => {
+                    surveyData.pages.forEach(page => {
-        //                 page.cells.forEach(cell => {
+                        page.cells.forEach(cell => {
-        //                     if (overWriteShowLogo) {
+                            if (overWriteShowLogo) {
-        //                         cell.showLogo = overWriteShowLogo == 'false' ? false : true
+                                cell.showLogo = overWriteShowLogo == 'false' ? false : true
-        //                     }
+                            }
-        //                     if (overWriteShowSign) {
+                            if (overWriteShowSign) {
-        //                         cell.showSign = overWriteShowSign == 'false' ? false : true
+                                cell.showSign = overWriteShowSign == 'false' ? false : true
-        //                     }
+                            }
-        //                 })
+                        })
-        //             })
+                    })
-        //         }
+                }
 
-        //         // console.log(surveyData)
+                // console.log(surveyData)
 
-        //         this.surveyId = surveyId
+                this.surveyId = surveyId
-        //         this.shopData = surveyData // .arrangementData
+                this.shopData = surveyData // .arrangementData
-        //         let pages = surveyData.pages
+                let pages = surveyData.pages
-        //         this.pages = pages
+                this.pages = pages
-        //         if (pages) {
+                if (pages) {
-        //             this.PAGE_MAX = pages.length
+                    this.PAGE_MAX = pages.length
-        //         }
+                }
-        //     }
+            }
-        // })
+        })
     },
 
     methods: {
@@ -124,7 +124,9 @@ export default {
                 // this.page = test_pages[this.pageIndex]
                 this.page = this.pages[this.pageIndex]
                 console.log("设置调查数据页", this.page)
-                this.cartState = this.page.cartState
+                if (this.page) {
+                    this.cartState = this.page.cartState
+                }
             }
         },
 

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

@@ -1,41 +1,23 @@
 <template>
-    <SceneShopSurveyViewer v-if="shopData" :surveyId="surveyId" :shopData="shopData"
+    <SceneShopSurveyViewer v-if="shopData" :shopData="shopData" :surveyId="null"
-        @onLoadingCompletion="onLoadingCompletion" :page="page" @onPageCompletion="onPageCompletion" @onHold="onHold"
+        @onLoadingCompletion="onLoadingCompletion" @onHold="onHold" :sceneAction="sceneAction"
-        @onFromSceneHoldToShelf="onFromSceneHoldToShelf" :sceneAction="sceneAction" :elCart="elCart"
         :frostFarScene="frostFarScene" :flyAnimation="flyAnimation" />
+    <!--  :page="page" @onPageCompletion="onPageCompletion" @onFromSceneHoldToShelf="onFromSceneHoldToShelf"  -->
 
     <div v-if="loaded" class="ui-root-">
-        <div class="yo-navi">
-            <button @click="onUiAction('prev')" :style="{ left: '1em' }">
-                Prev
-            </button>
-            <button @click="onUiAction('next')" :style="{ right: '1em' }">
-                Next
-            </button>
-        </div>
-        <div class="yo-typography-1" :style="{ right: '0' }">
-            {{ pageIndex + 1 }}/{{ PAGE_MAX }}
-        </div>
-        <div class="yo-shop-bar">
-            <!-- 需要计算购物车的位置 -->
-            <button ref="btnCart" @click="onUiHoldToCart">
-                Cart {{ "" + Math.max(0, cartState) }}
-            </button>
-            <button :class="cartState == 0 ? 'active' : ''" @click="onUiChoiceNone">
-                Empty
-            </button>
-        </div>
         <!-- #20221122, add frostFarScene toggle button -->
-        <button :style="{ position: 'absolute', left: '1em', backgroundColor: (frostFarScene ? '#C671D5' : 'rgba(255,255,255,.7)') }"
+        <button
+            :style="{ position: 'absolute', left: '1em', backgroundColor: (frostFarScene ? '#C671D5' : 'rgba(255,255,255,.7)') }"
             @click="onToggleFrostFarScene">frostFarScene</button>
         <!-- #20221123, add flyAnimation toggle button -->
-        <button :style="{ position: 'absolute', left: '1em', top:'3em', backgroundColor: (flyAnimation ? '#C671D5' : 'rgba(255,255,255,.7)') }"
+        <button
+            :style="{ position: 'absolute', left: '1em', top: '3em', backgroundColor: (flyAnimation ? '#C671D5' : 'rgba(255,255,255,.7)') }"
             @click="onToggleFlyAnimation">flyAnimation</button>
     </div>
 </template>
 
 <script>
-// import { api } from "@/crossyo/shelves-vue/api/baseApi";
+import { api } from "@/views/Creative/3d/crossyo/shelves-vue/api/baseApi";
 import SceneShopSurveyViewer from "../../shelves-vue/components/SceneShopSurveyViewer.vue"
 
 export default {
@@ -43,26 +25,14 @@ export default {
         SceneShopSurveyViewer,
     },
     data() {
-        // let pages = this.$store.state.surveyData.data.pages
         let data = {
 
-            surveyId: null,
+            shopData: null,
-            shopData: null, // this.$store.state.surveyData.data.arrangementData,
-
-            // v3, 无需 commodity, texture 预定义，这些数据组成 goods之后，直接挂在每个商品展示位置上了
-            pages: null,
-            // PAGE_MAX: pages ? pages.length : 0,
-            PAGE_MAX: 0,
-
-            pageIndex: -1,
-            page: null, // 每页的商品信息
 
             loaded: false,
             pageLoading: false,
             hold: null,
             sceneAction: null,
-            cartState: -1, // -1 未选择，0 不选, n>0 选择n个
-            elCart: null,
 
             message: {}, //  {text:''}
 
@@ -74,70 +44,61 @@ export default {
     },
 
     mounted() {
-        let surveyId = this.$route.params.surveyId
+        let shopId = this.$route.params.shopId
 
-        // api.getSurveyData(surveyId).then(resp => {
+        api.getShopData(shopId).then(resp => {
-        //     // console.log(resp)
+            if (resp.data && resp.data.success) {
-        //     if (resp.data && resp.data.success) {
+                let shopData = resp.data.result
-        //         let surveyData = resp.data.result
 
-        //         let qs_option = this.$route.params.option // #20221022, 用于测试，例如
+                let qs_option = this.$route.params.option // #20221022, 用于测试，例如
-        //         // console.log(`qs_option := ${qs_option}`) // showLogo=false
+                // console.log(`qs_option := ${qs_option}`) // showLogo=false
-        //         if (qs_option) {
+                if (qs_option) {
-        //             let option = new URLSearchParams(qs_option)
+                    let option = new URLSearchParams(qs_option)
-        //             // console.log(option.get('overWriteShowLogo') == 'false', option.get('overWriteShowSign') == 'false')
+                    // console.log(option.get('overWriteShowLogo') == 'false', option.get('overWriteShowSign') == 'false')
-        //             let overWriteShowLogo = option.get('overWriteShowLogo')
+                    let overWriteShowLogo = option.get('overWriteShowLogo')
-        //             let overWriteShowSign = option.get('overWriteShowSign')
+                    let overWriteShowSign = option.get('overWriteShowSign')
-        //             surveyData.pages.forEach(page => {
+                    // surveyData.pages.forEach(page => {
-        //                 page.cells.forEach(cell => {
+                    //     page.cells.forEach(cell => {
-        //                     if (overWriteShowLogo) {
+                    //         if (overWriteShowLogo) {
-        //                         cell.showLogo = overWriteShowLogo == 'false' ? false : true
+                    //             cell.showLogo = overWriteShowLogo == 'false' ? false : true
-        //                     }
+                    //         }
-        //                     if (overWriteShowSign) {
+                    //         if (overWriteShowSign) {
-        //                         cell.showSign = overWriteShowSign == 'false' ? false : true
+                    //             cell.showSign = overWriteShowSign == 'false' ? false : true
-        //                     }
+                    //         }
-        //                 })
+                    //     })
-        //             })
+                    // })
-        //         }
+                }
 
-        //         // console.log(surveyData)
+                // console.log(surveyData)
 
-        //         this.surveyId = surveyId
+                this.shopData = shopData
-        //         this.shopData = surveyData // .arrangementData
+            }
-        //         let pages = surveyData.pages
+        })
-        //         this.pages = pages
-        //         if (pages) {
-        //             this.PAGE_MAX = pages.length
-        //         }
-        //     }
-        // })
     },
 
     methods: {
-        init_page_(pi) {
+        // init_page_(pi) {
-            if (this.pages) {
+        //     if (this.pages) {
-                this.pageIndex = pi
+        //         this.pageIndex = pi
-                this.pageLoading = true
+        //         this.pageLoading = true
-                this.hold = null
+        //         this.hold = null
-                this.sceneAction = null
+        //         this.sceneAction = null
-                // 设置某页调查数据
+        //         // 设置某页调查数据
-                // this.page = test_pages[this.pageIndex]
+        //         // this.page = test_pages[this.pageIndex]
-                this.page = this.pages[this.pageIndex]
+        //         this.page = this.pages[this.pageIndex]
-                console.log("设置调查数据页", this.page)
+        //         console.log("设置调查数据页", this.page)
-                this.cartState = this.page.cartState
+        //         this.cartState = this.page.cartState
-            }
+        //     }
-        },
+        // },
 
         onLoadingCompletion() {
             this.loaded = true
-            this.init_page_(0)
+            // this.init_page_(0)
         },
 
         onPageCompletion() {
             this.pageLoading = false
 
-            // console.log(this.$refs.btnCart)
-            this.elCart = this.$refs.btnCart
         },
 
         // 从货架上选择一个商品，并持有
@@ -147,47 +108,47 @@ export default {
         },
 
         // 场景中点击别的商品，导致持有的商品放回货架
-        onFromSceneHoldToShelf() {
+        // onFromSceneHoldToShelf() {
-            this.hold = null
+        //     this.hold = null
-            this.sceneAction = {
+        //     this.sceneAction = {
-                action: "hold_to_shelf",
+        //         action: "hold_to_shelf",
-            }
+        //     }
-            // console.log('## onFromSceneHoldToShelf')
+        //     // console.log('## onFromSceneHoldToShelf')
-        },
+        // },
 
-        onUiHoldToCart() {
+        // onUiHoldToCart() {
-            if (this.hold != null) {
+        //     if (this.hold != null) {
-                this.cartState = 1
+        //         this.cartState = 1
-                this.hold = null
+        //         this.hold = null
-                this.sceneAction = {
+        //         this.sceneAction = {
-                    action: "hold_to_cart",
+        //             action: "hold_to_cart",
-                }
+        //         }
-            }
+        //     }
-        },
+        // },
 
-        onUiChoiceNone() {
+        // onUiChoiceNone() {
-            this.cartState = 0
+        //     this.cartState = 0
-            this.sceneAction = {
+        //     this.sceneAction = {
-                action: "try_cart_to_shelf",
+        //         action: "try_cart_to_shelf",
-            }
+        //     }
-        },
+        // },
 
-        onUiAction(action) {
+        // onUiAction(action) {
-            // console.log("## onUiAction", action)
+        //     // console.log("## onUiAction", action)
-            if (action == "prev") {
+        //     if (action == "prev") {
-                let pi = this.pageIndex - 1
+        //         let pi = this.pageIndex - 1
-                this.init_page_(pi < 0 ? this.PAGE_MAX - 1 : pi)
+        //         this.init_page_(pi < 0 ? this.PAGE_MAX - 1 : pi)
-            } else if (action == "next") {
+        //     } else if (action == "next") {
-                if (this.cartState >= 0) {
+        //         if (this.cartState >= 0) {
-                    let pi = this.pageIndex + 1
+        //             let pi = this.pageIndex + 1
-                    this.init_page_(pi >= this.PAGE_MAX ? 0 : pi)
+        //             this.init_page_(pi >= this.PAGE_MAX ? 0 : pi)
-                } else {
+        //         } else {
-                    this.message = {
+        //             this.message = {
-                        text: "您没有对该问题进行回答，回答后可继续做答！",
+        //                 text: "您没有对该问题进行回答，回答后可继续做答！",
-                    }
+        //             }
-                }
+        //         }
-            }
+        //     }
-        },
+        // },
 
         onToggleFrostFarScene() {
             this.frostFarScene = !this.frostFarScene

src/views/Creative/3d/crossyo/shelves-vue/api/baseApi.js

@@ -120,7 +120,7 @@ export class BaseApi {
    * @apiBody {String} name
    * @apiBody {String} url
    * @apiBody {String} urlThumb
-   * @apiBody {String} uv2 uv展开类型
+   * @apiBody {String} uvGroup uv展开类型
    */
     addSCommodity(data) {
         return axios({
@@ -152,7 +152,20 @@ export class BaseApi {
     listTextures() {
         return axios({
             method: 'get',
-            url: `${this.apiPrefix}/list-textures`,
+            url: `${this.apiPrefix}/list-textures`
+        })
+    }
+
+    /**
+    * @api {get} /shelves-v5-api/list-textures-by-rel-commodity-id 纹理/列表
+    * @apiGroup Asset Library
+    * @apiBody {String} relCommodityId
+    */
+    listTexturesByRelCommodityId(relCommodityId) {
+        return axios({
+            method: 'get',
+            url: `${this.apiPrefix}/list-textures-by-rel-commodity-id`,
+            data: { relCommodityId }
         })
     }
 
@@ -162,7 +175,8 @@ export class BaseApi {
    * @apiBody {String} name
    * @apiBody {String} url
    * @apiBody {String} urlSmall
-   * @apiBody {String} uv2 uv展开类型
+   * @apiBody {String} relUvGroup uv展开类型
+   * @apiBody {String} relCommodityId
    */
     addTexture(data) {
         return axios({

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

@@ -0,0 +1,30 @@
+<?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="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="#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
+		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="#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
+		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
+		C184.826,70.949,184.686,69.599,184.516,68.269z"/>
+	<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
+		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-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
+		C219.246,96.719,210.096,90.089,202.496,93.049z"/>
+	<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.03C199.056,102.019,200.916,99.369,203.516,98.209z"/>
+	<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
+		C221.296,143.149,235.586,129.319,249.626,115.249z"/>
+	<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.44
+		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/components/ScenePreviewer.vue

@@ -5,6 +5,23 @@
 <script>
 import { Previewer } from "../../../../lib/shelves.module"
 
+// class Ref1 {
+//     constructor() {
+//         let current_ = null
+//         this.setCurrent = v => {
+//             current_ = v
+//         }
+//         this.getCurrent = () => {
+//             return current_
+//         }
+//         this.useCurrent = cb => {
+//             if (current_) {
+//                 cb(current_)
+//             }
+//         }
+//     }
+// }
+
 export default {
     props: ["isOpen", "model", "brightness"],
 
@@ -26,7 +43,7 @@ export default {
                 this.previewer_.model = newVal
             }
         },
-        brightness (oldV,newV) {
+        brightness(oldV, newV) {
             // console.log('#brightness', oldV, newV)
             if (this.previewer_) {
                 this.previewer_.brightness = newV
@@ -34,7 +51,7 @@ export default {
         }
     },
 
-    beforeUnmount () {
+    beforeUnmount() {
         console.log("## Previewer beforeUnmount")
         if (this.previewer_) {
             this.previewer_.dispose()
@@ -50,14 +67,16 @@ export default {
                 let container = this.$el
                 // console.log(container.clientWidth, container.clientHeight)
 
-                this.previewer_ = new Previewer({
+                let v = new Previewer({
                     container
                 })
-                this.previewer_.on("loadingCompletion", () => {
+                v.on("loadingCompletion", () => {
                     console.log('## Previewer loadingCompletion')
                     this.$emit("onLoadingCompletion")
                 })
-                this.previewer_.startup()
+                v.startup()
+
+                this.previewer_ = v
             }
             return this.previewer_
         },

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

@@ -0,0 +1,109 @@
+<template>
+    <div class="container-previewer-1-"></div>
+</template>
+
+<script>
+import { SeparateTexturePreviewer } from "../../../../lib/shelves.module"
+
+// class Ref1 {
+//     constructor() {
+//         let current_ = null
+//         this.setCurrent = v => {
+//             current_ = v
+//         }
+//         this.getCurrent = () => {
+//             return current_
+//         }
+//         this.useCurrent = cb => {
+//             if (current_) {
+//                 cb(current_)
+//             }
+//         }
+//     }
+// }
+
+export default {
+    props: ["isOpen", "selCommodity", "selTexture"],
+
+    mounted() {
+        console.log("## SeparateTexturePreviewer mounted", this.$el.clientWidth)
+        this.$nextTick(() => {
+            console.log("## SeparateTexturePreviewer mounted - nt", this.$el.clientWidth)
+            this.tryInitView()
+        })
+    },
+
+    watch: {
+        selCommodity(newVal, oldVal) {
+            if (this.previewer_) {
+                this.previewer_.selCommodity = newVal
+            }
+        },
+        selTexture(newVal, oldVal) {
+            if (this.previewer_) {
+                this.previewer_.selTexture = newVal
+            }
+        },
+        // brightness(oldV, newV) {
+        //     // console.log('#brightness', oldV, newV)
+        //     if (this.previewer_) {
+        //         this.previewer_.brightness = newV
+        //     }
+        // }
+    },
+
+    beforeUnmount() {
+        console.log("## SeparateTexturePreviewer beforeUnmount")
+        if (this.previewer_) {
+            this.previewer_.dispose()
+            this.previewer_ = null
+        }
+    },
+
+    methods: {
+        tryInitView() {
+            if (!this.previewer_) {
+                // let search = new URLSearchParams(document.location.search)
+
+                let container = this.$el
+                // console.log(container.clientWidth, container.clientHeight)
+
+                let v = new SeparateTexturePreviewer({
+                    container
+                })
+                v.on("loadingCompletion", () => {
+                    console.log('## SeparateTexturePreviewer loadingCompletion')
+                    this.$emit("onLoadingCompletion")
+                })
+                v.startup()
+
+                this.previewer_ = v
+            }
+            return this.previewer_
+        },
+        snapshot() {
+            if (this.previewer_) {
+                return this.previewer_.snapshot()
+            } else {
+                return null
+            }
+        },
+    },
+
+};
+</script>
+
+<style scoped>
+div.container-previewer-1- {
+    width: 100%;
+    height: 100%;
+}
+
+div.container-previewer-1-:focus {
+    outline: none;
+}
+
+div.container-previewer-1->>>canvas:focus {
+    outline: none;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+    <div class="yo-scrollbar" style="height: calc(100vh - 155px)">
+        <div class="yo-title-s16">白模库</div>
+        <a-input placeholder="请输入白模名" v-model:value="searchText">
+            <template #prefix>
+                <img :src="SearchSvg" />
+            </template>
+        </a-input>
+        <div class="yo-thumb" @click="add">
+            <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>
+</template>
+
+<script setup>
+
+import ImageSvg from '../../asset/icon2/image-add-model.svg'
+import SearchSvg from '../../asset/icon2/search.svg'
+</script>
+
+<script>
+
+export default {
+    data() {
+        return {
+            searchText: '',
+            list: []
+        }
+    },
+    mounted() {
+        this.$store.dispatch('commodities/list').then(list => {
+            this.list = list
+        })
+    },
+    methods: {
+        clickThumb(itm) {
+            // console.log('clickThumb', itm)
+            this.$emit('clickThumb', itm)
+        },
+        add() {
+            this.$emit('add')
+        },
+        remove() {
+            this.$emit('remove')
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+    <div class="yo-scrollbar" style="height: calc(100vh - 155px)">
+        <div class="yo-title-s16">关联纹理</div>
+        <!-- <a-input placeholder="请输入纹理名" v-model:value="searchText">
+            <template #prefix>
+                <img :src="SearchSvg" />
+            </template>
+        </a-input> -->
+        <div v-if="relCommodity" class="yo-thumb" @click="add">
+            <img :src="ImageSvg" />
+        </div>
+        <div class="yo-thumb" v-for="itm in list" @click="clickThumb(itm)">
+            <!-- <img class="yo-obj-fit-cover" :src="itm.urlThumb" /> -->
+            <img class="yo-obj-fit-cover" :src="itm.url" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ImageSvg from '../../asset/icon2/image.svg'
+// import SearchSvg from '../../asset/icon2/search.svg'
+</script>
+
+<script>
+
+export default {
+    props: ['relCommodity'],
+    data() {
+        return {
+            searchText: '',
+            list: []
+        }
+    },
+    // mounted() {
+    // },
+    watch: {
+        relCommodity(newV, oldV) {
+            if (newV) {
+                // api.listTexturesByRelCommodityId(newV.id).then(list => {
+                //     console.log('xx list', list)
+                //     this.list = list
+                // })
+                this.$store.dispatch('textures/listByRelCommodityId', { relCommodityId: newV.id }).then(list => {
+                    this.list = list
+                    // console.log('COMMODITY fetch list', newV.id, list)
+                })
+
+            } else {
+                this.list = []
+            }
+        }
+    },
+    methods: {
+        clickThumb(itm) {
+            // console.log('clickThumb', itm)
+            this.$emit('clickThumb', itm)
+        },
+        add() {
+            this.$emit('add')
+        },
+        remove() {
+            this.$emit('remove')
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Creative/3d/crossyo/shelves-vue/store/textures.js

@@ -10,6 +10,7 @@ export default {
             state.list = list
         },
         add(state, data) {
+            // console.log('STORE textures add', data)
             state.list.unshift(data)
         }
     },
@@ -25,6 +26,17 @@ export default {
                 })
             })
         },
+        listByRelCommodityId({ commit }, { relCommodityId }) {
+            return new Promise(resolve => {
+                api.listTexturesByRelCommodityId(relCommodityId).then(resp => {
+                    if (resp.data && resp.data.success) {
+                        let list = resp.data.result
+                        commit('save', list)
+                        resolve(list)
+                    }
+                })
+            })
+        },
         add({ commit }, data) {
             return new Promise(resolve => {
                 api.addTexture(data).then(resp => {

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

@@ -3,7 +3,7 @@
     <!-- :before-close="close" -->
     <el-dialog v-model="isOpen_" title="上传模型" width="75vw" draggable>
 
-        <ScenePreviewer v-if="isOpen_" :model="model" />
+        <ScenePreviewer ref="preview" v-if="isOpen_" :model="model" />
 
         <el-upload ref="upload" :action="`${api.uploaderPrefix}/upload-model`" :auto-upload="false"
             :show-file-list="false" :on-change="handleChange" :on-exceed="handleExceed" multiple :limit="1"
@@ -18,6 +18,10 @@
             </template> -->
         </el-upload>
 
+        <el-upload ref="uploadThumb" :action="`${api.uploaderPrefix}/upload-image`" :auto-upload="false"
+            :show-file-list="false" multiple :limit="1" :on-success="handleSuccessThumb" :style="{ display: 'none' }">
+        </el-upload>
+
         <!-- <el-upload ref="upload" class="upload-demo" drag :action="`${api.uploaderPrefix}/upload-model`" multiple
             :show-file-list="false" :auto-upload="false" :on-change="handleChange" :on-exceed="handleExceed" :limit="1">
             <el-icon class="el-icon--upload">
@@ -36,7 +40,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="close1">取消</el-button>
-                <el-button type="primary" @click="upload">上传</el-button>
+                <el-button type="primary" @click="upload" :loading="uploadLoading">上传</el-button>
             </span>
         </template>
     </el-dialog>
@@ -64,6 +68,7 @@ export default {
         return {
             isOpen_: false,
             model: null,
+            uploadLoading: false,
         }
     },
     watch: {
@@ -109,6 +114,7 @@ export default {
             }
 
         },
+
         handleExceed(files, uploadFiles) {
             // console.log('exceed', files, uploadFiles)
             this.$refs.upload.clearFiles()
@@ -119,20 +125,83 @@ export default {
 
         upload() {
 
+            // console.log(this.$refs.upload)
+
+            this.uploadLoading = true
+
+            let snapshot = this.$refs.preview.snapshot()
+            if (snapshot) {
+                snapshot.then(blob => {
+                    // console.log(blob)
+
+                    blob.name = 'thumb.jpg'
+
+                    if (false) {
+                        this.$refs.uploadThumb.clearFiles()
+                        this.$refs.uploadThumb.handleStart(blob)
+                        this.$refs.uploadThumb.submit()
+
+                        console.log('this.$refs.uploadThumb.submit() ..')
+                    } else {
+
+                        const xhr = new XMLHttpRequest()
+                        const formData = new FormData()
+                        // formData.append('name', blob, blob.name)
+                        formData.append('file', blob, blob.name)
+
+                        // console.log(xhr, formData, this.handleSuccessThumb)
+
+                        xhr.addEventListener('load', () => {
+                            if (xhr.status >= 200 && xhr.status < 300) {
+                                // console.log('##success', xhr)
+
+                                let ret = JSON.parse(xhr.responseText)
+                                if (ret.status) {
+                                    this.urlThumb__ = ret.data.urlThumb
+                                    this.$refs.upload.submit()
+                                    return
+                                }
+
+                            }
+
+                            this.uploadLoading = false
+                            console.log('upload response error!', xhr)
+
+                        })
+                        xhr.open('POST', `${api.uploaderPrefix}/upload-image`, true)
+                        // xhr.setRequestHeader("Content-Type", "multipart/form-data")
+                        xhr.send(formData)
+                    }
+
+                })
+            }
+
+        },
+
+        handleSuccessThumb(response, file, uploadFiles) {
+            console.log('#### success response thumb', response, file, uploadFiles)
+
+            this.urlThumb__ = response.data.urlThumb
+
             this.$refs.upload.submit()
 
-            // this.close1()
         },
 
         handleSuccess(response, file, uploadFiles) {
             // console.log(response, file, uploadFiles)
             // TODO test success
-            this.$store.dispatch('commodities/add', {
+
+            let data = {
                 url: response.data.url,
                 urlSmall: '', // TODO
-                urlThumb: '', // TODO
+                urlThumb: this.urlThumb__,
-            }).then(data2 => {
+            }
 
+            this.$store.dispatch('commodities/add', data).then(data2 => {
+
+                this.$emit('success', data2)
+
+                this.uploadLoading = false
                 this.isOpen_ = false
             })
 

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

@@ -36,7 +36,7 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="close1">取消</el-button>
-                <el-button type="primary" @click="upload">上传</el-button>
+                <el-button type="primary" @click="upload" :loading="uploadLoading">上传</el-button>
             </span>
         </template>
     </el-dialog>
@@ -53,7 +53,7 @@ import { genFileId, ElMessage } from 'element-plus'
 
 export default {
     // name: 'PanoramaUpload',
-    props: ['isOpen'],
+    props: ['isOpen', 'relCommodityId'],
     components: {
         UploadFilled,
     },
@@ -62,6 +62,7 @@ export default {
         return {
             isOpen_: false,
             imgSrc: "",
+            uploadLoading: false,
         }
     },
     watch: {
@@ -115,6 +116,8 @@ export default {
 
             this.$refs.upload.submit()
 
+            this.uploadLoading = true
+
             // this.close1()
         },
 
@@ -126,9 +129,13 @@ export default {
                 url: response.data.url,
                 urlSmall: '', // TODO
                 urlThumb: '', // TODO
+                relCommodityId: this.relCommodityId
             }).then(data2 => {
-                
+
+                this.$emit('success', data2)
+                this.uploadLoading = false
                 this.isOpen_ = false
+
             })