udpate

package.json

@@ -29,6 +29,7 @@
     "vite": "^3.2.0",
     "vite-plugin-html-env": "^1.2.7",
     "vite-plugin-mkcert": "^1.10.1",
+    "vite-plugin-require-transform": "^1.0.4",
     "vite-plugin-windicss": "^1.8.8",
     "vue-tsc": "^1.0.9",
     "windicss": "^3.5.6"

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   vite: ^3.2.0
   vite-plugin-html-env: ^1.2.7
   vite-plugin-mkcert: ^1.10.1
+  vite-plugin-require-transform: ^1.0.4
   vite-plugin-windicss: ^1.8.8
   vue: ^3.2.41
   vue-tsc: ^1.0.9
@@ -44,6 +45,7 @@ devDependencies:
   vite: 3.2.0_sass@1.55.0
   vite-plugin-html-env: 1.2.7_vite@3.2.0
   vite-plugin-mkcert: 1.10.1_vite@3.2.0
+  vite-plugin-require-transform: 1.0.4
   vite-plugin-windicss: 1.8.8_vite@3.2.0
   vue-tsc: 1.0.9_typescript@4.8.4
   windicss: 3.5.6
@@ -60,7 +62,42 @@ packages:
     dependencies:
       '@babel/highlight': 7.18.6
     dev: true
-    optional: true
+
+  /@babel/generator/7.20.3:
+    resolution: {integrity: sha512-Wl5ilw2UD1+ZYprHVprxHZJCFeBWlzZYOovE4SDYLZnqCOD11j+0QzNeEWKLLTWM7nixrZEh7vNIyb76MyJg3A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.20.2
+    dev: true
+
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.2
+    dev: true
 
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
@@ -78,7 +115,6 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
     dev: true
-    optional: true
 
   /@babel/parser/7.19.6:
     resolution: {integrity: sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==}
@@ -87,6 +123,41 @@ packages:
     dependencies:
       '@babel/types': 7.19.4
 
+  /@babel/parser/7.20.3:
+    resolution: {integrity: sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.2
+    dev: true
+
+  /@babel/template/7.18.10:
+    resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.20.3
+      '@babel/types': 7.20.2
+    dev: true
+
+  /@babel/traverse/7.20.1:
+    resolution: {integrity: sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.20.3
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.20.3
+      '@babel/types': 7.20.2
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/types/7.19.4:
     resolution: {integrity: sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==}
     engines: {node: '>=6.9.0'}
@@ -95,6 +166,15 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@babel/types/7.20.2:
+    resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@commitlint/config-validator/17.1.0:
     resolution: {integrity: sha512-Q1rRRSU09ngrTgeTXHq6ePJs2KrI+axPTgkNYDWSJIuS1Op4w3J30vUfSXjwn5YEJHklK3fSqWNHmBhmTR7Vdg==}
     engines: {node: '>=v14'}
@@ -180,16 +260,28 @@ packages:
     dev: true
     optional: true
 
+  /@jridgewell/gen-mapping/0.3.2:
+    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
     dev: true
-    optional: true
+
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
 
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
-    optional: true
 
   /@jridgewell/trace-mapping/0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
@@ -197,7 +289,6 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
-    optional: true
 
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -1364,6 +1455,11 @@ packages:
       which: 1.3.1
     dev: true
 
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /good-listener/1.2.2:
     resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
     dependencies:
@@ -1562,7 +1658,12 @@ packages:
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
-    optional: true
+
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
@@ -2249,6 +2350,17 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-require-transform/1.0.4:
+    resolution: {integrity: sha512-YeIayGG2QYyl4mw8qdiqDqnjPRr2Cq7K2CFKCMX7mWuc3qZZP4eKdY3Exj3s3f7JblwlRmzmpSuWDTSN0BSofQ==}
+    dependencies:
+      '@babel/generator': 7.20.3
+      '@babel/parser': 7.19.6
+      '@babel/traverse': 7.20.1
+      '@babel/types': 7.19.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite-plugin-windicss/1.8.8_vite@3.2.0:
     resolution: {integrity: sha512-iyu+ZX0NmhNEUaLPv7xtC+EFRBpWMmw0nhd9a9upayfuNG/thwslKiQKmRB7U/dG0k/2oWLvPDvN/B9i7oRgSA==}
     peerDependencies:

src/App.vue

@@ -11,6 +11,7 @@ import { useAppStore } from "./store/modules/app";
 import Guideline from "/@/components/basic/guide.vue";
 import ChatRoom from "/@/components/chatRoom/index.vue";
 import Title from "/@/components/basic/title.vue";
+import FloorSwitch from "/@/components/basic/FloorSwitch.vue";
 import browser from "/@/utils/browser";
 
 const sceneStore = useSceneStore();
@@ -147,8 +148,12 @@ const changeMode = (name: string) => {
         @change-mode="changeMode"
       />
       <!-- 平面图 end -->
-
+      <!-- 聊天 start-->
       <ChatRoom />
+      <!-- 聊天 end -->
+      <!-- 多楼层 start-->
+      <FloorSwitch />
+      <!-- 多楼层 end -->
     </template>
   </div>
 </template>

src/components/basic/FloorSwitch.vue

@@ -0,0 +1,307 @@
+<template>
+  <div
+    class="floor-switch"
+    :class="{ disable: flying, showTours: showTours }"
+    v-if="floors.length > 1 && mode != 'panorama'"
+  >
+    <ul>
+      <li
+        v-if="mode != 'floorplan'"
+        :class="{ active: 'all' == floorId }"
+        @click.stop="onGotoFloor('all')"
+      >
+        <b></b><span>全部</span>
+      </li>
+      <li
+        v-for="item in floors"
+        :key="item.id"
+        :class="{ active: item.id == floorId }"
+        @click.stop="onGotoFloor(item.id)"
+      >
+        <b></b><span>{{ item.name }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { useApp } from "/@/hooks/userApp";
+import { useAppStore } from "/@/store/modules/app";
+import { useSceneStore } from "/@/store/modules/scene";
+import { useTourStore } from "/@/store/modules/tour";
+const appStore = useAppStore();
+const sceneStore = useSceneStore();
+const tourStore = useTourStore();
+const mode = computed(() => appStore.mode);
+const flying = computed(() => appStore.flying);
+const floors = computed(() => sceneStore.floors.reverse());
+const floorId = computed(() => appStore.floorId);
+const showTours = computed(() => tourStore.showTours);
+
+const onGotoFloor = (id) => {
+  //   store.commit("setFloor", id);
+  appStore.setFloor(id);
+};
+useApp().then((sdk) =>
+  sdk.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
+    // store.commit("mode", toMode);
+    appStore.setMode(toMode);
+    if (toMode != "dollhouse") {
+      //   store.commit("setFloorId", floorIndex);
+      appStore.setFloorId(floorIndex);
+    }
+  })
+);
+</script>
+
+<style lang="scss" scoped>
+.floor-switch {
+  pointer-events: all;
+  position: absolute;
+  bottom: calc(100% + 5px);
+  left: 20px;
+  z-index: 10;
+  transition: bottom 0.1s;
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+  }
+  ul {
+    position: relative;
+    z-index: 2;
+  }
+  li {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 50px;
+    &:first-child {
+      b {
+        &::before {
+          display: none;
+        }
+      }
+      &.active {
+        b {
+          &::after {
+            bottom: -10px;
+          }
+        }
+      }
+    }
+    &:last-child {
+      b {
+        &::after {
+          display: none;
+        }
+      }
+      &.active {
+        b {
+          &::before {
+            top: -10px;
+          }
+        }
+      }
+    }
+    b {
+      position: relative;
+      width: 16px;
+      height: 16px;
+      background-color: #1c1c1c;
+      border-radius: 50%;
+      box-shadow: 0px 0px 2px 1px #404040;
+      cursor: pointer;
+      &::before {
+        content: "";
+        position: absolute;
+        top: -5px;
+        left: 50%;
+        margin-left: -3px;
+        background: #1c1c1c;
+        width: 6px;
+        height: 6px;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -5px;
+        left: 50%;
+        margin-left: -3px;
+        background: #1c1c1c;
+        width: 6px;
+        height: 6px;
+      }
+    }
+    span {
+      margin-left: 10px;
+      font-size: 14px;
+      //color: #939393;
+      cursor: pointer;
+      color: #eeeeee;
+      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+    }
+    &.active {
+      b {
+        left: -6px;
+        width: 28px;
+        height: 28px;
+        border: solid 6px #1c1c1c;
+        background-color: #404040;
+        box-shadow: 0px 0px 2px 1px #404040;
+        &::before {
+          top: -10px;
+        }
+        &::after {
+          bottom: -10px;
+        }
+      }
+      span {
+        margin-left: 0;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        color: rgba(255, 255, 255, 0.88);
+        border: solid 4px #1c1c1c;
+        background-color: #404040;
+        border-radius: 32px;
+        box-shadow: 0px 0px 2px 1px #404040;
+        padding: 0px 10px;
+        text-shadow: none;
+        &::before {
+          content: "";
+          position: absolute;
+          left: -10px;
+          background: #1c1c1c;
+          width: 7px;
+          height: 4px;
+          box-shadow: -2px 0px 2px 1px #404040;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          left: -16px;
+          background: #1c1c1c;
+          width: 6px;
+          height: 11px;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 20px;
+    bottom: 20px;
+    width: 6px;
+    background: #1c1c1c;
+    box-shadow: 0px 0px 2px 1px #404040;
+    z-index: 1;
+  }
+}
+[is-mobile] {
+  .floor-switch {
+    bottom: 2.5rem;
+    &.showTours {
+      bottom: 5rem;
+    }
+    li {
+      height: 45px;
+      &:first-child {
+        &.active {
+          b {
+            &::after {
+              bottom: -6px;
+            }
+          }
+        }
+      }
+      &:last-child {
+        &.active {
+          b {
+            &::before {
+              top: -6px;
+            }
+          }
+        }
+      }
+      b {
+        width: 14px;
+        height: 14px;
+        &::before {
+          top: -3px;
+          left: 50%;
+          margin-left: -2px;
+          width: 4px;
+          height: 4px;
+        }
+        &::after {
+          bottom: -3px;
+          left: 50%;
+          margin-left: -2px;
+          width: 4px;
+          height: 4px;
+        }
+      }
+      span {
+        font-size: 0.36842rem;
+      }
+      &.active {
+        b {
+          left: -3px;
+          width: 20px;
+          height: 20px;
+          border: solid 4px #1c1c1c;
+          &::before {
+            top: -6px;
+          }
+          &::after {
+            bottom: -6px;
+          }
+        }
+        span {
+          height: 30px;
+          border: solid 3px #1c1c1c;
+          border-radius: 30px;
+          padding: 0px 10px;
+          margin-left: 5px;
+          &::before {
+            left: -11px;
+            width: 10px;
+            height: 4px;
+            box-shadow: -2px 0px 1px 1px #404040;
+          }
+          &::after {
+            left: -14px;
+            width: 3px;
+            height: 6px;
+            border-radius: 40%;
+          }
+        }
+      }
+    }
+    &::after {
+      left: 5px;
+      top: 20px;
+      bottom: 20px;
+      width: 4px;
+    }
+  }
+
+  @media (orientation: landscape) {
+    .floor-switch {
+      bottom: 1rem;
+      li {
+        span {
+          font-size: 0.25rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/basic/icon/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="iii-icon">
+    <img :src="imageUrl" alt="" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({ type: { default: "" } });
+const imageUrl = computed(
+  () => `./images/${props.type}.png`
+);
+</script>
+
+<style scoped lang="scss">
+.iii-icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+}
+</style>

src/components/chatRoom/index.vue

@@ -41,9 +41,9 @@
           <div class="mic_no" v-if="!unref(disableMic)"></div>
         </template>
 
-        <!-- <div style="font-size: 0.65rem">
-          <Icon type="scene" />
-        </div> -->
+        <div style="font-size: 0.65rem">
+          <ImageIcon type="scene" />
+        </div>
         <div class="exit"></div>
       </div>
     </div>
@@ -82,17 +82,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, unref } from "vue";
+import { computed, nextTick, ref, unref } from "vue";
 import { getApp, useApp } from "/@/hooks/userApp";
 import { initSocketEvent } from "./roomControl";
 import { createSocket } from "/@/hooks/userSocket";
 import { useRtcSdk } from "/@/hooks/useTRTC";
 
 import browser from "/@/utils/browser";
+import ImageIcon from "/@/components/basic/icon/index.vue";
 import { useRtcStore } from "/@/store/modules/rtc";
 import type { SocketParams, RoleType } from "/@/store/modules/rtc";
 import chat from "./chat.vue";
 import memberList from "./memberList.vue";
+
 import consola from "consola";
 
 const rtcStore = useRtcStore();

src/hooks/useTRTC.ts

@@ -25,7 +25,7 @@ const checkoutIsExistAudioInput = async () => {
 async function createRTCSocket(): Promise<void> {
     try {
         console.log('Dialog', Dialog)
-        Dialog.alert("该场景正在计算中，请稍后再试");
+        // Dialog.alert("该场景正在计算中，请稍后再试");
         const rtcStore = useRtcStore()
         await checkoutIsExistAudioInput();
         const microphoneItems = await TRTC.getMicrophones();

vite.config.ts

@@ -5,14 +5,18 @@ import { resolve } from 'path'
 import WindiCSS from "vite-plugin-windicss";
 import consola from 'consola'
 import mkcert from "vite-plugin-mkcert";
+// import requireTransform from 'vite-plugin-require-transform'
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir);
 }
 
+
+
 // https://vitejs.dev/config/
 export default ({ mode }) => defineConfig({
   plugins: [
+
     mkcert(),
     vue(),
     WindiCSS(),