save

.eslintignore

@@ -0,0 +1,9 @@
+
+*.sh
+node_modules
+# 
+src/components/basic/button
+src/components/basic/dialog
+src/components/chatRoom/dialog
+
+

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   '@types/node': ^18.11.7
@@ -46,7 +46,7 @@ dependencies:
   clipboard: 2.0.11
   consola: 2.15.3
   lodash-es: 4.17.21
-  pinia: 2.0.23_typescript@4.8.4+vue@3.2.41
+  pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
   pinia-plugin-persistedstate: 2.3.0_pinia@2.0.23
   trtc-js-sdk: 4.14.6
   uuid: 9.0.0
@@ -56,8 +56,8 @@ dependencies:
 devDependencies:
   '@types/node': 18.11.7
   '@types/uuid': 8.3.4
-  '@typescript-eslint/eslint-plugin': 5.42.1_d506b9be61cb4ac2646ecbc6e0680464
-  '@typescript-eslint/parser': 5.42.1_eslint@8.27.0+typescript@4.8.4
+  '@typescript-eslint/eslint-plugin': 5.42.1_2udltptbznfmezdozpdoa2aemq
+  '@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
   '@vitejs/plugin-vue': 3.2.0_vite@3.2.0+vue@3.2.41
   add: 2.0.6
   commitizen: 4.2.5
@@ -65,8 +65,8 @@ devDependencies:
   eslint: 8.27.0
   eslint-config-prettier: 8.5.0_eslint@8.27.0
   eslint-define-config: 1.12.0
-  eslint-plugin-jest: 25.7.0_e9f236be91a35b5561f1d06aac506953
-  eslint-plugin-prettier: 4.2.1_afddd95fb7dd832efd05cfac2e17feb1
+  eslint-plugin-jest: 25.7.0_5hzdnpurunnvkypr2bvkyudjkm
+  eslint-plugin-prettier: 4.2.1_v7o5sx5x3wbs57ifz6wc4f76we
   eslint-plugin-vue: 8.7.1_eslint@8.27.0
   jest: 27.5.1
   lint-staged: 12.1.4
@@ -459,10 +459,10 @@ packages:
       '@types/node': 14.18.33
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 4.2.0_30426e062a60145f33ada27f2111796e
+      cosmiconfig-typescript-loader: 4.2.0_gbbg4brkmakf6m5nuj7scelzny
       lodash: 4.17.21
       resolve-from: 5.0.0
-      ts-node: 10.9.1_c386e8b7aaca4ce6057194a7156a4f00
+      ts-node: 10.9.1_yodorn5kzjgomblrsstrk2spaa
       typescript: 4.8.4
     transitivePeerDependencies:
       - '@swc/core'
@@ -1087,7 +1087,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.42.1_d506b9be61cb4ac2646ecbc6e0680464:
+  /@typescript-eslint/eslint-plugin/5.42.1_2udltptbznfmezdozpdoa2aemq:
     resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1098,10 +1098,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.42.1_eslint@8.27.0+typescript@4.8.4
+      '@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       '@typescript-eslint/scope-manager': 5.42.1
-      '@typescript-eslint/type-utils': 5.42.1_eslint@8.27.0+typescript@4.8.4
-      '@typescript-eslint/utils': 5.42.1_eslint@8.27.0+typescript@4.8.4
+      '@typescript-eslint/type-utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
+      '@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       debug: 4.3.4
       eslint: 8.27.0
       ignore: 5.2.0
@@ -1114,20 +1114,20 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/experimental-utils/5.42.1_eslint@8.27.0+typescript@4.8.4:
+  /@typescript-eslint/experimental-utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-qona75z2MLpeZADEuCet5Pwvh1g/0cWScEEDy43chuUPc4klgDiwz5hLFk5dHcjFEETSYQHRPYiiHKW24EMPjw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@typescript-eslint/utils': 5.42.1_eslint@8.27.0+typescript@4.8.4
+      '@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       eslint: 8.27.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/parser/5.42.1_eslint@8.27.0+typescript@4.8.4:
+  /@typescript-eslint/parser/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1155,7 +1155,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.42.1
     dev: true
 
-  /@typescript-eslint/type-utils/5.42.1_eslint@8.27.0+typescript@4.8.4:
+  /@typescript-eslint/type-utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1166,7 +1166,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4
-      '@typescript-eslint/utils': 5.42.1_eslint@8.27.0+typescript@4.8.4
+      '@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       debug: 4.3.4
       eslint: 8.27.0
       tsutils: 3.21.0_typescript@4.8.4
@@ -1201,7 +1201,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.42.1_eslint@8.27.0+typescript@4.8.4:
+  /@typescript-eslint/utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy:
     resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1337,7 +1337,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.41
       '@vue/shared': 3.2.41
-    dev: false
 
   /@vue/runtime-dom/3.2.41:
     resolution: {integrity: sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==}
@@ -1345,7 +1344,6 @@ packages:
       '@vue/runtime-core': 3.2.41
       '@vue/shared': 3.2.41
       csstype: 2.6.21
-    dev: false
 
   /@vue/server-renderer/3.2.41_vue@3.2.41:
     resolution: {integrity: sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==}
@@ -1355,7 +1353,6 @@ packages:
       '@vue/compiler-ssr': 3.2.41
       '@vue/shared': 3.2.41
       vue: 3.2.41
-    dev: false
 
   /@vue/shared/3.2.41:
     resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
@@ -1970,7 +1967,7 @@ packages:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: true
 
-  /cosmiconfig-typescript-loader/4.2.0_30426e062a60145f33ada27f2111796e:
+  /cosmiconfig-typescript-loader/4.2.0_gbbg4brkmakf6m5nuj7scelzny:
     resolution: {integrity: sha512-NkANeMnaHrlaSSlpKGyvn2R4rqUDeE/9E5YHx+b4nwo0R8dZyAqcih8/gxpCZvqWP9Vf6xuLpMSzSgdVEIM78g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -1981,7 +1978,7 @@ packages:
     dependencies:
       '@types/node': 14.18.33
       cosmiconfig: 7.0.1
-      ts-node: 10.9.1_c386e8b7aaca4ce6057194a7156a4f00
+      ts-node: 10.9.1_yodorn5kzjgomblrsstrk2spaa
       typescript: 4.8.4
     dev: true
     optional: true
@@ -2046,7 +2043,6 @@ packages:
 
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
-    dev: false
 
   /cz-conventional-changelog/3.3.0:
     resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
@@ -2532,7 +2528,7 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13', pnpm: '>= 7.0.0'}
     dev: true
 
-  /eslint-plugin-jest/25.7.0_e9f236be91a35b5561f1d06aac506953:
+  /eslint-plugin-jest/25.7.0_5hzdnpurunnvkypr2bvkyudjkm:
     resolution: {integrity: sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -2545,8 +2541,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.42.1_d506b9be61cb4ac2646ecbc6e0680464
-      '@typescript-eslint/experimental-utils': 5.42.1_eslint@8.27.0+typescript@4.8.4
+      '@typescript-eslint/eslint-plugin': 5.42.1_2udltptbznfmezdozpdoa2aemq
+      '@typescript-eslint/experimental-utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       eslint: 8.27.0
       jest: 27.5.1
     transitivePeerDependencies:
@@ -2554,7 +2550,7 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-prettier/4.2.1_afddd95fb7dd832efd05cfac2e17feb1:
+  /eslint-plugin-prettier/4.2.1_v7o5sx5x3wbs57ifz6wc4f76we:
     resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -4658,10 +4654,10 @@ packages:
       pinia:
         optional: true
     dependencies:
-      pinia: 2.0.23_typescript@4.8.4+vue@3.2.41
+      pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
     dev: false
 
-  /pinia/2.0.23_typescript@4.8.4+vue@3.2.41:
+  /pinia/2.0.23_l7r24p6nevbtlimqmqcwa3ouhu:
     resolution: {integrity: sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -5379,7 +5375,7 @@ packages:
     resolution: {integrity: sha512-ERjHQMWY6rmVVAlNTIxaL1PPKjEfewZZDLcEvjDGyGmr0jLYkX3n579A3CfCThTtcBHHpDjsbI2Ac3xnAx1h6g==}
     dev: false
 
-  /ts-node/10.9.1_c386e8b7aaca4ce6057194a7156a4f00:
+  /ts-node/10.9.1_yodorn5kzjgomblrsstrk2spaa:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -5468,7 +5464,6 @@ packages:
     resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
 
   /unbox-primitive/1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
@@ -5735,7 +5730,6 @@ packages:
       '@vue/runtime-dom': 3.2.41
       '@vue/server-renderer': 3.2.41_vue@3.2.41
       '@vue/shared': 3.2.41
-    dev: false
 
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}

src/App.vue

@@ -16,7 +16,7 @@
   import browser from '/@/utils/browser';
   import { useRtcStore } from './store/modules/rtc';
   import { useTourPlayer } from './hooks/userTourPlayer';
-import { KankanMetaDataType } from '/#/sdk';
+  import { KankanMetaDataType } from '/#/sdk';
 
   const { createTourPlayer } = useTourPlayer();
 

src/app.scss

@@ -1,10 +1,9 @@
-
-@import "/@/assets/_base.scss";
-@import "/@/assets/_base-vars.scss";
-@import "/@/assets/theme.editor.scss";
-@import "/@/components//basic/dialog/dialog.scss";
-@import "/@/components//basic/dialog/toast.scss";
-@import "/@/components//basic/button/button.scss";
+@import '/@/assets/_base.scss';
+@import '/@/assets/_base-vars.scss';
+@import '/@/assets/theme.editor.scss';
+@import '/@/components//basic/dialog/dialog.scss';
+@import '/@/components//basic/dialog/toast.scss';
+@import '/@/components//basic/button/button.scss';
 .tab-layer {
   width: 100%;
   text-align: center;
@@ -87,18 +86,14 @@
       position: relative;
       margin-bottom: 30px;
       &::before {
-        content: "";
+        content: '';
         display: inline-block;
         left: 50%;
         transform: translateX(-50%);
         width: 2px;
         height: 28px;
         bottom: -30px;
-        background: linear-gradient(
-          145deg,
-          rgba(255, 255, 255, 0.8),
-          rgba(255, 255, 255, 0)
-        );
+        background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
         position: absolute;
       }
       .tag-avatar {

src/assets/_base-vars.scss

@@ -1,4 +1,3 @@
-
 :root {
   --colors-primary-fill: 255, 255, 255;
   --colors-primary-base-fill: 237, 93, 1;
@@ -7,12 +6,11 @@
   // --colors-primary-hover: #008B7A;
   --colors-primary-active: #f3550a;
   --colors-primary-click: #db5313;
-  --colors-warn: #FA3F48;
+  --colors-warn: #fa3f48;
   --colors-color: #999;
   --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
   --colors-content-color: rgb(--colors-primary-fill);
-  
-  
+
   --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
   --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
   --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
@@ -24,12 +22,11 @@
   --colors-normal-fill-click: var(--colors-primary-click);
 
   --colors-error-fill: 250, 63, 72;
-  
+
   --small-size: 12px;
   --medium-size: 14px;
   --big-size: 16px;
 
-
   // 正常
   --color-main-normal: var(--colors-primary-base);
   // 悬停
@@ -37,10 +34,9 @@
   // 点击
   --color-main-focus: var(--colors-primary-click);
 
-
   --editor-head-filter: blur(0px);
   --editor-head-height: 50px;
-  
+
   --editor-head-back: rgba(20, 20, 20, 0.86);
 
   --editor-menu-filter: var(--editor-head-filter);
@@ -51,8 +47,7 @@
   --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
   --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
   --editor-menu-color: #999;
-  --editor-menu-active: rgba(255,255,255,0.06);;
-
+  --editor-menu-active: rgba(255, 255, 255, 0.06);
 
   --editor-toolbox-top: var(--editor-head-height);
   --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
@@ -60,4 +55,4 @@
   --editor-toolbox-back: var(--editor-menu-back);
   --editor-toolbox-padding: 20px;
   --editor-toolbar-height: 60px;
-}
+}

src/assets/_base.scss

@@ -9,33 +9,33 @@
    # ================================================================= */
 
 html {
-    box-sizing: border-box;
-    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
-    word-break: normal;
-    -moz-tab-size: 4;
-    tab-size: 4;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+  word-break: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
 }
 
 *,
 ::before,
 ::after {
-    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
-    box-sizing: inherit;
-    appearance: none;
-    -webkit-tap-highlight-color: rgba(255,255,255,0);
-    text-rendering: optimizeLegibility!important;
-    -webkit-font-smoothing: antialiased!important;
+  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+  box-sizing: inherit;
+  appearance: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
 }
 
 ::before,
 ::after {
-    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
-    vertical-align: inherit;
+  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+  vertical-align: inherit;
 }
 
 * {
-    padding: 0; /* Reset `padding` and `margin` of all elements */
-    margin: 0;
+  padding: 0; /* Reset `padding` and `margin` of all elements */
+  margin: 0;
 }
 
 /* # =================================================================
@@ -43,80 +43,80 @@ html {
      # ================================================================= */
 
 hr {
-    overflow: visible; /* Show the overflow in Edge and IE */
-    height: 0; /* Add the correct box sizing in Firefox */
-    color: inherit; /* Correct border color in Firefox. */
+  overflow: visible; /* Show the overflow in Edge and IE */
+  height: 0; /* Add the correct box sizing in Firefox */
+  color: inherit; /* Correct border color in Firefox. */
 }
 
 details,
 main {
-    display: block; /* Render the `main` element consistently in IE. */
+  display: block; /* Render the `main` element consistently in IE. */
 }
 
 summary {
-    display: list-item; /* Add the correct display in all browsers */
+  display: list-item; /* Add the correct display in all browsers */
 }
 
 small {
-    font-size: 80%; /* Set font-size to 80% in `small` elements */
+  font-size: 80%; /* Set font-size to 80% in `small` elements */
 }
 
 [hidden] {
-    display: none; /* Add the correct display in IE */
+  display: none; /* Add the correct display in IE */
 }
 
 abbr[title] {
-    border-bottom: none; /* Remove the bottom border in Chrome 57 */
-    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
-    text-decoration: underline;
-    text-decoration: underline dotted;
+  border-bottom: none; /* Remove the bottom border in Chrome 57 */
+  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+  text-decoration: underline;
+  text-decoration: underline dotted;
 }
 
 a {
-    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+  background-color: transparent; /* Remove the gray background on active links in IE 10 */
 }
 
 a:active,
 a:hover {
-    outline-width: 0; /* Remove the outline when hovering in all browsers */
+  outline-width: 0; /* Remove the outline when hovering in all browsers */
 }
 
 code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace; /* Specify the font family of code elements */
+  font-family: monospace, monospace; /* Specify the font family of code elements */
 }
 
 pre {
-    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
 }
 
 b,
 strong {
-    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
 }
 
 /* https://gist.github.com/unruthless/413930 */
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 table {
-    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
-    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+  border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+  text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
 }
 
 /* # =================================================================
@@ -124,32 +124,32 @@ table {
      # ================================================================= */
 
 input {
-    border-radius: 0;
+  border-radius: 0;
 }
 
 /* Replace pointer cursor in disabled elements */
 [disabled] {
-    cursor: default;
-    user-select: none;
+  cursor: default;
+  user-select: none;
 }
 
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
-    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
 }
 
 [type='search'] {
-    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
-    outline-offset: -2px; /* Correct the outline style in Safari */
+  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+  outline-offset: -2px; /* Correct the outline style in Safari */
 }
 
 [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
 }
 
 textarea {
-    overflow: auto; /* Internet Explorer 11+ */
-    resize: vertical; /* Specify textarea resizability */
+  overflow: auto; /* Internet Explorer 11+ */
+  resize: vertical; /* Specify textarea resizability */
 }
 
 button,
@@ -157,20 +157,20 @@ input,
 optgroup,
 select,
 textarea {
-    font: inherit; /* Specify font inheritance of form elements */
+  font: inherit; /* Specify font inheritance of form elements */
 }
 
 optgroup {
-    font-weight: bold; /* Restore the font weight unset by the previous rule */
+  font-weight: bold; /* Restore the font weight unset by the previous rule */
 }
 
 button {
-    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
 }
 
 button,
 select {
-    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
 }
 
 /* Apply cursor pointer to button elements */
@@ -179,8 +179,8 @@ button,
 [type='reset'],
 [type='submit'],
 [role='button'] {
-    cursor: pointer;
-    color: inherit;
+  cursor: pointer;
+  color: inherit;
 }
 
 /* Remove inner padding and border in Firefox 4+ */
@@ -188,8 +188,8 @@ button::-moz-focus-inner,
 [type='button']::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
+  border-style: none;
+  padding: 0;
 }
 
 /* Replace focus style removed in the border reset above */
@@ -197,14 +197,14 @@ button:-moz-focusring,
 [type='button']::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
-    outline: 1px dotted #ccc;
+  outline: 1px dotted #ccc;
 }
 
 button,
   html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
   [type='reset'],
   [type='submit'] {
-    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
 }
 
 /* Remove the default button styling in all browsers */
@@ -212,8 +212,8 @@ button,
 input,
 select,
 textarea {
-    background-color: transparent;
-    border-style: none;
+  background-color: transparent;
+  border-style: none;
 }
 
 a:focus,
@@ -221,37 +221,37 @@ button:focus,
 input:focus,
 select:focus,
 textarea:focus {
-    outline-width: 0;
+  outline-width: 0;
 }
 
 /* Style select like a standard input */
 select {
-    -moz-appearance: none; /* Firefox 36+ */
-    -webkit-appearance: none; /* Chrome 41+ */
+  -moz-appearance: none; /* Firefox 36+ */
+  -webkit-appearance: none; /* Chrome 41+ */
 }
 
 select::-ms-expand {
-    display: none; /* Internet Explorer 11+ */
+  display: none; /* Internet Explorer 11+ */
 }
 
 select::-ms-value {
-    color: currentColor; /* Internet Explorer 11+ */
+  color: currentColor; /* Internet Explorer 11+ */
 }
 
 legend {
-    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
-    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
-    display: table; /* Correct the text wrapping in Edge and IE */
-    max-width: 100%; /* Correct the text wrapping in Edge and IE */
-    white-space: normal; /* Correct the text wrapping in Edge and IE */
-    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+  display: table; /* Correct the text wrapping in Edge and IE */
+  max-width: 100%; /* Correct the text wrapping in Edge and IE */
+  white-space: normal; /* Correct the text wrapping in Edge and IE */
+  max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
 }
 
 ::-webkit-file-upload-button {
-    /* Correct the inability to style clickable types in iOS and Safari */
-    -webkit-appearance: button;
-    color: inherit;
-    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+  /* Correct the inability to style clickable types in iOS and Safari */
+  -webkit-appearance: button;
+  color: inherit;
+  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
 }
 
 /* # =================================================================
@@ -259,12 +259,12 @@ legend {
      # ================================================================= */
 
 img {
-    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
 }
 
 /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
 progress {
-    vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 /* # =================================================================
@@ -273,21 +273,21 @@ progress {
 
 /* Specify the progress cursor of updating elements */
 [aria-busy='true'] {
-    cursor: progress;
+  cursor: progress;
 }
 
 /* Specify the pointer cursor of trigger elements */
 [aria-controls] {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
 [aria-disabled='true'] {
-    cursor: default;
+  cursor: default;
 }
 
 .disabled,
-:disabled{
-    opacity: 0.3 !important;
-    pointer-events: none !important;
+:disabled {
+  opacity: 0.3 !important;
+  pointer-events: none !important;
 }

src/assets/theme.editor.scss

@@ -3,111 +3,111 @@ $img-base-path: '/@/assets/images/';
 // @import '~@/global_components/assets/scss/theme-editor.scss';
 
 :root {
-    --editor-main-color: #ED5D18;
-    --editor-font-color: #999;
+  --editor-main-color: #ed5d18;
+  --editor-font-color: #999;
 
-    --editor-toolbox-top: 0;
-    --editor-toolbox-left: 0;
-    --editor-toolbox-width: 240px;
-    --editor-toolbox-padding: 0 10px;
-    --editor-menu-active: rgba(219, 83, 19, 0.16);
+  --editor-toolbox-top: 0;
+  --editor-toolbox-left: 0;
+  --editor-toolbox-width: 240px;
+  --editor-toolbox-padding: 0 10px;
+  --editor-menu-active: rgba(219, 83, 19, 0.16);
 
-    --colors-primary-base: var(--editor-main-color);
-    --colors-primary-click: #db5313;
+  --colors-primary-base: var(--editor-main-color);
+  --colors-primary-click: #db5313;
 }
 
 ::-webkit-scrollbar {
-    width: 4px;
-    height: 1px;
+  width: 4px;
+  height: 1px;
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #ccc;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #999;
+  background: #999;
 }
 
 ::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    background: #000000;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background: #000000;
 }
 ul,
 li {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 html {
-    line-height: 1.15;
-    -webkit-text-size-adjust: 100%;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
 }
 html,
 body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    font-size: 14px;
-    overflow: hidden;
-    user-select: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-size: 14px;
+  overflow: hidden;
+  user-select: none;
 }
 #app {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: #fff;
-    background-color: #232323;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: #fff;
+  background-color: #232323;
 }
 
 .disable * {
-    opacity: 0.85;
-    pointer-events: none;
+  opacity: 0.85;
+  pointer-events: none;
 }
 
 .enable {
+  opacity: 1 !important;
+  pointer-events: all !important;
+  * {
     opacity: 1 !important;
     pointer-events: all !important;
-    * {
-        opacity: 1 !important;
-        pointer-events: all !important;
-    }
+  }
 }
 
 .hidden {
-    visibility: hidden !important;
-    pointer-events: none !important;
-    z-index: -1;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  z-index: -1;
 }
 
 .scene {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
 }
 .slide-right-enter-active,
 .slide-right-leave-active {
-    will-change: transform;
-    transition: all 0.2s ease-in-out;
+  will-change: transform;
+  transition: all 0.2s ease-in-out;
 }
 .slide-right-enter-from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
 }
 .slide-right-enter {
-    opacity: 1;
-    transform: translate3d(-100%, 0, 0);
+  opacity: 1;
+  transform: translate3d(-100%, 0, 0);
 }
 .slide-right-leave-active {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
 }
 // .slide-right-enter-active,
 // .slide-right-leave-active,
@@ -120,213 +120,212 @@ body {
 
 .fade-enter,
 .fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 .fade-enter-to,
 .fade-leave {
-    opacity: 1;
+  opacity: 1;
 }
 .fade-enter-active,
 .fade-leave-active {
-    transition: all 3s;
+  transition: all 3s;
 }
 
 .slide-right-enter {
-    opacity: 1;
-    transform: translate3d(-100%, 0, 0);
+  opacity: 1;
+  transform: translate3d(-100%, 0, 0);
 }
 .slide-right-leave-active {
-    opacity: 1;
-    transform: translate3d(100%, 0, 0);
+  opacity: 1;
+  transform: translate3d(100%, 0, 0);
 }
 .slide-left-enter {
-    opacity: 1;
-    transform: translate3d(-100%, 0, 0);
+  opacity: 1;
+  transform: translate3d(-100%, 0, 0);
 }
 .slide-left-leave-active {
-    opacity: 1;
-    transform: translate3d(100%, 0, 0);
+  opacity: 1;
+  transform: translate3d(100%, 0, 0);
 }
 
 .ui-view-layout {
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    &.show {
-        visibility: visible;
-    }
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  &.show {
+    visibility: visible;
+  }
 }
-input[type="password"]::-ms-reveal{
-  display:none
+input[type='password']::-ms-reveal {
+  display: none;
 }
 .ui-editor-toolbox {
-    .edit-list {
-        li {
-            margin-top: 20px;
-            color: var(--editor-font-color);
-            border-bottom: solid 1px rgba(255, 255, 255, 0.16);
-            &:last-child {
-                border-bottom: none;
-            }
-            > div {
-                margin-bottom: 14px;
-            }
-            label {
-                color: #fff;
-                i {
-                    cursor: pointer;
-                }
-            }
-            .title {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                span {
-                    font-weight: bold;
-                    font-size: 16px;
-                }
-            }
-
-            .between {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
+  .edit-list {
+    li {
+      margin-top: 20px;
+      color: var(--editor-font-color);
+      border-bottom: solid 1px rgba(255, 255, 255, 0.16);
+      &:last-child {
+        border-bottom: none;
+      }
+      > div {
+        margin-bottom: 14px;
+      }
+      label {
+        color: #fff;
+        i {
+          cursor: pointer;
         }
+      }
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span {
+          font-weight: bold;
+          font-size: 16px;
+        }
+      }
+
+      .between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
     }
+  }
 }
 
 .ql-editor {
-    padding: 0;
+  padding: 0;
 }
 a {
-    color: #ED5D18;
+  color: #ed5d18;
 }
 
 [xui_min_map] {
-    top: 20px !important;
-    right: 20px !important;
+  top: 20px !important;
+  right: 20px !important;
 }
 .slider-box {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: var(--editor-toolbox-width);
-    height: 100%;
-    background: rgba(20, 20, 20, 1);
-    z-index: 1;
-    .slider-content {
-        color: rgba(255, 255, 255, 0.6);
-        .content-item {
-            padding: 20px 10px;
-            box-sizing: border-box;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
-            box-sizing: border-box;
-            &:last-of-type {
-                border-bottom: 1px solid transparent;
-            }
-        }
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: var(--editor-toolbox-width);
+  height: 100%;
+  background: rgba(20, 20, 20, 1);
+  z-index: 1;
+  .slider-content {
+    color: rgba(255, 255, 255, 0.6);
+    .content-item {
+      padding: 20px 10px;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+      box-sizing: border-box;
+      &:last-of-type {
+        border-bottom: 1px solid transparent;
+      }
+    }
 
-        .item-title {
-            font-size: 16px;
-            font-weight: bold;
-            color: #999;
-            margin-bottom: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
+    .item-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #999;
+      margin-bottom: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
-    .slider-title {
-        height: 64px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
-        color: #999;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 20px 10px;
-        box-sizing: border-box;
-        span {
-            font-size: 18px;
-            color: #999;
-            font-weight: bold;
-        }
-        i {
-            cursor: pointer;
-        }
+  }
+  .slider-title {
+    height: 64px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+    color: #999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 10px;
+    box-sizing: border-box;
+    span {
+      font-size: 18px;
+      color: #999;
+      font-weight: bold;
+    }
+    i {
+      cursor: pointer;
     }
+  }
 }
 
 [is-mobile] {
-    [xui_min_map] {
-        width: 100px;
-        height: 100px;
-        top: 2.3rem !important;
-        right: 15px !important;
-        background-color: rgba(0, 0, 0, 0.2) !important;
-        border-radius: 4px 4px 0 0  !important;
-        border-top-left-radius: 0 !important;
-        transition: all .3s;
-        &.collapse{
-          transform: translateX(calc(100% + 15px));
-          .button-switch{
-            >.iconfont{
-              font-size: 12px;
-              transform: rotate(180deg) scale(.7);
-            }
-       
-          }
-        }
-        .button-switch {
-            position: absolute;
-            top: 0;
-            left: -16px;
-            background-color: rgba(0, 0, 0, 0.2);
-            height: 32px;
-            width: 16px;
-            border-radius: 32px 0 0 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: rotate .3s;
-            >.iconfont{
-              font-size: 12px;
-              transform: scale(.7);
-            }
-        }
-        .change{
-            position: absolute;
-            bottom: -29px;
-            left: 0;
-            height: 28px;
-            background-color: rgba(0, 0, 0, 0.2);
-            width: 100%;
-            text-align: center;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 0 0 4px 4px!important;
-            >i{
-                margin-right: 4px;
-            }
+  [xui_min_map] {
+    width: 100px;
+    height: 100px;
+    top: 2.3rem !important;
+    right: 15px !important;
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    border-radius: 4px 4px 0 0 !important;
+    border-top-left-radius: 0 !important;
+    transition: all 0.3s;
+    &.collapse {
+      transform: translateX(calc(100% + 15px));
+      .button-switch {
+        > .iconfont {
+          font-size: 12px;
+          transform: rotate(180deg) scale(0.7);
         }
+      }
     }
-    .ui-dialog{
-        .ui-dialog__box{
-            min-width: 100px;
-            width: 90%;
-        }
+    .button-switch {
+      position: absolute;
+      top: 0;
+      left: -16px;
+      background-color: rgba(0, 0, 0, 0.2);
+      height: 32px;
+      width: 16px;
+      border-radius: 32px 0 0 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: rotate 0.3s;
+      > .iconfont {
+        font-size: 12px;
+        transform: scale(0.7);
+      }
+    }
+    .change {
+      position: absolute;
+      bottom: -29px;
+      left: 0;
+      height: 28px;
+      background-color: rgba(0, 0, 0, 0.2);
+      width: 100%;
+      text-align: center;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0 0 4px 4px !important;
+      > i {
+        margin-right: 4px;
+      }
+    }
+  }
+  .ui-dialog {
+    .ui-dialog__box {
+      min-width: 100px;
+      width: 90%;
     }
+  }
 }
 
 .v-enter,
 .v-leave-to {
-    opacity: 0;
-    transform: translateY(100px);
+  opacity: 0;
+  transform: translateY(100px);
 }
 
 .v-enter-active,
 .v-leave-active {
-    transition: all 0.25s ease;
+  transition: all 0.25s ease;
 }

src/components/basic/FloorSwitch.vue

@@ -23,6 +23,7 @@
     </ul>
   </div>
 </template>
+
 <script setup lang="ts">
   import { computed } from 'vue';
   import { useApp } from '/@/hooks/userApp';
@@ -34,6 +35,7 @@
   const tourStore = useTourStore();
   const mode = computed(() => appStore.mode);
   const flying = computed(() => appStore.flying);
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
   const floors = computed(() => sceneStore.floors.reverse());
   const floorId = computed(() => appStore.floorId);
   const showTours = computed(() => tourStore.showTours);

src/components/basic/button/_button.scss

@@ -1,79 +1,79 @@
-@use "sass:map";
+@use 'sass:map';
 
 .ui-button {
-    width: 100%;
-    height: 34px;
-    border: none;
-    outline: none;
-    border-radius: 4px;
-    font-size: 14px;
-    background: none !important;
+  width: 100%;
+  height: 34px;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  font-size: 14px;
+  background: none !important;
 
-    transition: all .3s ease;
+  transition: all 0.3s ease;
 
-    .ui-button-icon {
-        margin-right: 0.6em;
-    }
+  .ui-button-icon {
+    margin-right: 0.6em;
+  }
 }
 
 .ui-button.customize {
-    background: none;
-    color: rgba(var(--color), 0.8);
-    border: 1px solid rgba(var(--color), 0.6);
+  background: none;
+  color: rgba(var(--color), 0.8);
+  border: 1px solid rgba(var(--color), 0.6);
 }
 
-.ui-button.normal{
-    color: var(--colors-color);
-    border: 1px solid var(--colors-normal-base);
-    &:hover {
-        color: var(--colors-normal-hover);
-        border: 1px solid var(--colors-normal-hover);
-    }
-    &:active {
-        color: var(--colors-normal-click);
-        border: 1px solid var(--colors-normal-click);
-    }
+.ui-button.normal {
+  color: var(--colors-color);
+  border: 1px solid var(--colors-normal-base);
+  &:hover {
+    color: var(--colors-normal-hover);
+    border: 1px solid var(--colors-normal-hover);
+  }
+  &:active {
+    color: var(--colors-normal-click);
+    border: 1px solid var(--colors-normal-click);
+  }
 }
 
 .ui-button.submit {
-    color: var( --color-main-hover);
-    border: 1px solid var( --color-main-normal);
-    background-color: var( --color-main-normal);
-    &:hover {
-        border-color: var( --color-main-hover);
-        background-color: var( --color-main-hover);
-    }
-    &:active {
-        border-color: var( --color-main-focus);
-        background-color: var( --color-main-focus);
-    }
+  color: var(--color-main-hover);
+  border: 1px solid var(--color-main-normal);
+  background-color: var(--color-main-normal);
+  &:hover {
+    border-color: var(--color-main-hover);
+    background-color: var(--color-main-hover);
+  }
+  &:active {
+    border-color: var(--color-main-focus);
+    background-color: var(--color-main-focus);
+  }
 }
 
 .ui-button.cancel {
-    color: var( --color-main-normal);
-    border: 1px solid var( --color-main-normal);
-    &:hover {
-        border-color: var( --color-main-hover);
-    }
-    &:active {
-        border-color: var( --color-main-focus);
-    }
+  color: var(--color-main-normal);
+  border: 1px solid var(--color-main-normal);
+  &:hover {
+    border-color: var(--color-main-hover);
+  }
+  &:active {
+    border-color: var(--color-main-focus);
+  }
 }
 
 .ui-button.primary {
-    background-color: var(--colors-primary-base) !important;
-    color: var(--colors-normal-fill-hover);
-    border: none;
-    opacity: 1;
+  background-color: var(--colors-primary-base) !important;
+  color: var(--colors-normal-fill-hover);
+  border: none;
+  opacity: 1;
 
-    // &:active,
-    &:hover {
-        // opacity: 0.8;
-        // background: var(--colors-primary-hover) !important;
-        // background: #4DD8C7 !important;
-    }
-    &:active {
-        background-color: var(--colors-primary-active) !important;
-        color: rgba(255,255,255,0.6);
-    }
-}
+  // &:active,
+  &:hover {
+    // opacity: 0.8;
+    // background: var(--colors-primary-hover) !important;
+    // background: #4DD8C7 !important;
+  }
+  &:active {
+    background-color: var(--colors-primary-active) !important;
+    color: rgba(255, 255, 255, 0.6);
+  }
+}

src/components/basic/dialog/Confirm.vue

@@ -46,7 +46,7 @@
       destroy: Function,
       showCloseIcon: Function,
     },
-    setup: function (props, ctx) {
+    setup: function (props, _) {
       const close = (result) => {
         if (isFunction(props.func) && props.func(result) === false) {
           return;

src/components/basic/dialog/Toast.vue

@@ -12,7 +12,7 @@
   </teleport>
 </template>
 <script>
-  import { defineComponent, onMounted, nextTick, ref } from 'vue';
+  import { defineComponent, nextTick, ref } from 'vue';
   import { getZIndex } from './utils';
   export default defineComponent({
     name: 'UiToast',

src/components/basic/dialog/dialog.scss

@@ -1,77 +1,76 @@
 .ui-dialog {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    color: #fff;
-    background-color: rgba($color: #000000, $alpha: 0.3);
-    backdrop-filter: blur(1px);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: #fff;
+  background-color: rgba($color: #000000, $alpha: 0.3);
+  backdrop-filter: blur(1px);
 }
 .ui-dialog__box {
-    position: relative;
-    display: inline-block;
-    min-width: 400px;
-    min-height: 100px;
-    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+  position: relative;
+  display: inline-block;
+  min-width: 400px;
+  min-height: 100px;
+  background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  border: 1px solid #000000;
+  backdrop-filter: blur(4px);
+  &::after {
+    content: '';
+    position: absolute;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    top: 1px;
+    border: 1px solid rgba($color: #fff, $alpha: 0.1);
     border-radius: 4px;
-    border: 1px solid #000000;
-    backdrop-filter: blur(4px);
-    &::after {
-        content: '';
-        position: absolute;
-        left: 1px;
-        right: 1px;
-        bottom: 1px;
-        top: 1px;
-        border: 1px solid rgba($color: #fff, $alpha: 0.1);
-        border-radius: 4px;
-        z-index: 0;
-        pointer-events: none;
-    }
-    header {
-        color: #999999;
-        padding: 0 20px;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: solid 1px rgba($color: #ffffff, $alpha: 0.16);
-        font-weight: bold;
-        i {
-            cursor: pointer;
-        }
+    z-index: 0;
+    pointer-events: none;
+  }
+  header {
+    color: #999999;
+    padding: 0 20px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px rgba($color: #ffffff, $alpha: 0.16);
+    font-weight: bold;
+    i {
+      cursor: pointer;
     }
-    section {
-        padding: 40px 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .message {
-            text-align: center;
-            line-height: 1.7;
-        }
+  }
+  section {
+    padding: 40px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .message {
+      text-align: center;
+      line-height: 1.7;
     }
-    footer {
-        padding: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: solid 1px rgba($color: #ffffff, $alpha: 0.16);
-        button {
-            width: 105px;
-            margin-left: 10px;
-            margin-right: 10px;
-        }
+  }
+  footer {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: solid 1px rgba($color: #ffffff, $alpha: 0.16);
+    button {
+      width: 105px;
+      margin-left: 10px;
+      margin-right: 10px;
     }
+  }
+}
+[is-mobile] {
+  .ui-dialog__box {
+  }
 }
-[is-mobile]{
-  .ui-dialog__box{
-
-  } 
-} 

src/components/basic/dialog/index.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+
 import Dialog from './Dialog.vue';
 import Window from './Window.vue';
 import Toast from './Toast.vue';

src/components/basic/dialog/toast.scss

@@ -1,90 +1,90 @@
 .ui-toast {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 30px;
-    left: 0;
-    right: 0;
-    min-width: 100px;
-    height: 100px;
-    overflow: hidden;
-    pointer-events:none;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 30px;
+  left: 0;
+  right: 0;
+  min-width: 100px;
+  height: 100px;
+  overflow: hidden;
+  pointer-events: none;
 }
 .ui-toast__box {
-    color: #fff;
-    font-size: 14px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
-    border-radius: 4px;
-    border: 1px solid #000000;
-    padding: 8px 20px;
-    pointer-events: all;
+  color: #fff;
+  font-size: 14px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  border: 1px solid #000000;
+  padding: 8px 20px;
+  pointer-events: all;
 
-    &.fixed,
-    &.success,
-    &.error,
-    &.warn{
-        i{
-            display:inline-block;
-        }
-    }
-    &.success {
-        .icon {
-            background-image: url('#{$img-base-path}icons/toast-success.png');
-        }
+  &.fixed,
+  &.success,
+  &.error,
+  &.warn {
+    i {
+      display: inline-block;
     }
-    &.error {
-        .icon {
-            background-image: url('#{$img-base-path}icons/toast-error.png');
-        }
+  }
+  &.success {
+    .icon {
+      background-image: url('#{$img-base-path}icons/toast-success.png');
     }
-    &.warn {
-        .icon {
-            background-image: url('#{$img-base-path}icons/toast-warn.png');
-        }
+  }
+  &.error {
+    .icon {
+      background-image: url('#{$img-base-path}icons/toast-error.png');
     }
-    &::after {
-        content: '';
-        position: absolute;
-        left: 1px;
-        right: 1px;
-        bottom: 1px;
-        top: 1px;
-        border: 1px solid rgba($color: #fff, $alpha: 0.1);
-        border-radius: 4px;
-        z-index: 0;
-        pointer-events: none;
+  }
+  &.warn {
+    .icon {
+      background-image: url('#{$img-base-path}icons/toast-warn.png');
     }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    top: 1px;
+    border: 1px solid rgba($color: #fff, $alpha: 0.1);
+    border-radius: 4px;
+    z-index: 0;
+    pointer-events: none;
+  }
 
-    // >i{
-    //     display: none;
-    // }
+  // >i{
+  //     display: none;
+  // }
 
-    .icon{
-        margin-right: 10px;
-        font-size: 0;
-        width: 16px;
-        height: 16px;
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: contain;
-    }
-    .close{
-        cursor: pointer;
-        font-size: 14px;
-        margin-left: 20px;
-    }
+  .icon {
+    margin-right: 10px;
+    font-size: 0;
+    width: 16px;
+    height: 16px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+  }
+  .close {
+    cursor: pointer;
+    font-size: 14px;
+    margin-left: 20px;
+  }
 }
-.ui-toast__msg{
+.ui-toast__msg {
   display: flex;
   align-items: center;
-  img{
-    width:24px;
+  img {
+    width: 24px;
     height: 24px;
   }
-}
+}

src/components/basic/title.vue

@@ -83,7 +83,7 @@
   // const controls = computed(() => {
   //   return sceneStore.metadata.controls;
   // });
-  const showMusicPlaying = ref(false);
+  // const showMusicPlaying = ref(false);
   // const showMusic = computed(() => sceneStore.metadata.music);
   const player = computed(() => appStore.player);
 
@@ -180,37 +180,37 @@
       showDescription: show,
     });
   };
-  const onMusicClick = () => {
-    showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
-  };
-  const onMenuClick = (name) => {
-    appStore.setPlayerOptions({
-      showMore: false,
-      showDescription: false,
-      showMap: true,
-      showToolbar: true,
-    });
+  // const onMusicClick = () => {
+  //   showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
+  // };
+  // const onMenuClick = (name) => {
+  //   appStore.setPlayerOptions({
+  //     showMore: false,
+  //     showDescription: false,
+  //     showMap: true,
+  //     showToolbar: true,
+  //   });
 
-    // nextTick(() => {
-    //   if (name == "music") {
-    //     onMusicClick();
-    //   } else if (name == "share") {
-    //     showCopy.value = true;
-    //   } else if (name === "measure") {
-    //     this.$bus.emit("measure/Handle", "start");
-    //   } else if (name == "vr") {
-    //     store.commit("showVR");
-    //   }
-    // });
-  };
-  const onShare = (name) => {
-    if (name == 'copy') {
-      showShare.value = false;
-      this.$nextTick(() => {
-        showCopy.value = true;
-      });
-    }
-  };
+  // nextTick(() => {
+  //   if (name == "music") {
+  //     onMusicClick();
+  //   } else if (name == "share") {
+  //     showCopy.value = true;
+  //   } else if (name === "measure") {
+  //     this.$bus.emit("measure/Handle", "start");
+  //   } else if (name == "vr") {
+  //     store.commit("showVR");
+  //   }
+  // });
+  // };
+  // const onShare = (name) => {
+  //   if (name == 'copy') {
+  //     showShare.value = false;
+  //     this.$nextTick(() => {
+  //       showCopy.value = true;
+  //     });
+  //   }
+  // };
   const onChangeMode = () => {
     //   store.commit("setMode", "panorama");
     appStore.setMode('panorama');

src/components/chatRoom/chatroom.scss

@@ -105,13 +105,11 @@
       .disSpeakBtn {
         width: 0.533333rem;
         height: 0.533333rem;
-        background: url(/@/assets/images/rtcLive/pop-up_screen_on@2x.png)
-          no-repeat;
+        background: url(/@/assets/images/rtcLive/pop-up_screen_on@2x.png) no-repeat;
         background-size: 100% 100%;
         cursor: pointer;
         &.dis {
-          background: url(/@/assets/images/rtcLive/pop-up_screen_off@2x.png)
-            no-repeat;
+          background: url(/@/assets/images/rtcLive/pop-up_screen_off@2x.png) no-repeat;
           background-size: 100% 100%;
         }
       }

src/components/chatRoom/controls/actions.ts

@@ -1,7 +1,7 @@
 import { useRtcStore } from '/@/store/modules/rtc';
 import type { ChatContentType, UserInfoType } from '/@/store/modules/rtc';
 import Dialog from '/@/components/basic/dialog';
-import { getApp, useApp } from '/@/hooks/userApp';
+import { useApp } from '/@/hooks/userApp';
 import consola from 'consola';
 import { useSocket } from '/@/hooks/userSocket';
 import { useRoom } from '/@/hooks/useRoom';
@@ -43,6 +43,7 @@ export function handleActions({
       handleUserJoin(members, user);
       break;
     case 'user-leave':
+      handleUserLeave(user, members);
       break;
 
     case 'users-muted':
@@ -53,7 +54,7 @@ export function handleActions({
       handleUserSetWords(userId, words, members);
       break;
     case 'leader-dismiss':
-      handleUserLeave(user, members);
+      handleLeaderDismiss(user, members);
       break;
     case 'user-paint':
       handleUserPaint(open);
@@ -171,15 +172,19 @@ async function handleUserPaint(open: boolean | undefined) {
 
 const handleChangeScene = (data) => {
   const { changeScene } = useRoom();
-  // debugger
   changeScene(data);
 };
 //
-const handleAskCurrentscene = (data) => {};
+const handleAskCurrentscene = (data) => {
+  console.log('data', data);
+};
 
-const handleTagImageIndex = (data) => {};
+const handleTagImageIndex = (data) => {
+  console.log('data', data);
+};
 
 const handleUserSetWords = (UserId?: string, words?: boolean, members?: UserInfoType[]) => {
+  console.log('members', members);
   const rtcStore = useRtcStore();
   console.log('handleUserSetWords', UserId, words);
   UserId &&
@@ -194,6 +199,7 @@ const handleUserSetWords = (UserId?: string, words?: boolean, members?: UserInfo
 };
 const handleUserMuted = (UserId?: string, muted?: boolean, members?: UserInfoType[]) => {
   const rtcStore = useRtcStore();
+  console.log('members', members);
   console.log('handleUserSetWords', UserId, muted);
   UserId &&
     rtcStore.updateMemberDatabyId(UserId, {
@@ -205,4 +211,10 @@ const handleUserMuted = (UserId?: string, muted?: boolean, members?: UserInfoTyp
 };
 
 //被动处理用离开
-const handleUserLeave = (user, members) => {};
+const handleUserLeave = (user, members) => {
+  console.log('members', user, members);
+};
+//被动处理用离开
+const handleLeaderDismiss = (user, members) => {
+  console.log('members', user, members);
+};

src/components/chatRoom/controls/join.ts

@@ -1,6 +1,6 @@
 import consolaGlobalInstance from 'consola';
-import Dialog from '/@/components/basic/dialog';
-import { getApp } from '/@/hooks/userApp';
+// import Dialog from '/@/components/basic/dialog';
+// import { getApp } from '/@/hooks/userApp';
 import { useRoom } from '/@/hooks/useRoom';
 import { useSocket } from '/@/hooks/userSocket';
 import { UserInfoType, useRtcStore } from '/@/store/modules/rtc';
@@ -8,10 +8,10 @@ const { enterRoom } = useRoom();
 
 // 自已join的方法
 export function handleJoin(data: any) {
-  const app = getApp();
+  // const app = getApp();
   const { socket } = useSocket();
   const members = data?.members as any as UserInfoType[];
-  const user = data?.user as any as UserInfoType;
+  // const user = data?.user as any as UserInfoType;
   enterRoom();
 
   const rtcStore = useRtcStore();

src/components/chatRoom/dialog/checkBrowser.vue

@@ -3,11 +3,11 @@
     <i class="iconfont iconshow_cancel" @click="closeCheckBrowser"></i>
     <p class="title">建議使用以下最新版本的瀏覽器用於通話</p>
     <div class="browser_list">
-      <div class="item" v-for="i,index in browserList" :key="index">
+      <div class="item" v-for="(i, index) in browserList" :key="index">
         <div class="browser_icon">
-          <img :src="$config.getStaticResource(`img/apps/rtcLive/${i.icon}.png`)" alt="">
+          <img :src="$config.getStaticResource(`img/apps/rtcLive/${i.icon}.png`)" alt="" />
         </div>
-        <div class="browser_name">{{i.name}}</div>
+        <div class="browser_name">{{ i.name }}</div>
         <!-- <div class="browser_version ">{{i.version}}</div> -->
       </div>
     </div>
@@ -15,80 +15,80 @@
 </template>
 
 <script lang="ts">
-export default {
-  data() {
-    return {
-      browserList: [
-        {
-          icon: "chrome",
-          name: "Chrome",
-          version: "60",
-        },
-        {
-          icon: "firefox",
-          name: "Firefox",
-          version: "55",
-        },
-        {
-          icon: "edge",
-          name: "Edge",
-          version: "40",
-        },
-        {
-          icon: "safari",
-          name: "Safari",
-          version: "11",
-        },
-      ],
-    };
-  },
-  components: {},
-  methods: {
-    closeCheckBrowser() {
-      this.$parent.showCheckBrowser = false;
+  export default {
+    components: {},
+    data() {
+      return {
+        browserList: [
+          {
+            icon: 'chrome',
+            name: 'Chrome',
+            version: '60',
+          },
+          {
+            icon: 'firefox',
+            name: 'Firefox',
+            version: '55',
+          },
+          {
+            icon: 'edge',
+            name: 'Edge',
+            version: '40',
+          },
+          {
+            icon: 'safari',
+            name: 'Safari',
+            version: '11',
+          },
+        ],
+      };
     },
-  },
-};
+    methods: {
+      closeCheckBrowser() {
+        this.$parent.showCheckBrowser = false;
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-#checkBrowser {
-  position: fixed;
+  #checkBrowser {
+    position: fixed;
 
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 1.11rem;
-  border-radius: 0.14rem;
-  text-align: center;
-  z-index: 10000;
-  .iconshow_cancel {
-    font-size: 0.42rem;
-    position: absolute;
-    right: 0.33rem;
-    top: 0.33rem;
-  }
-  .title {
-    font-size: 0.28rem;
-    color: #fff;
-  }
-  .browser_list {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0.42rem 0 0 0;
-    .item {
-      img {
-        width: 1.39rem;
-        height: auto;
-      }
-      margin-right: 0.28rem;
-      &:last-of-type {
-        margin-right: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 1.11rem;
+    border-radius: 0.14rem;
+    text-align: center;
+    z-index: 10000;
+    .iconshow_cancel {
+      font-size: 0.42rem;
+      position: absolute;
+      right: 0.33rem;
+      top: 0.33rem;
+    }
+    .title {
+      font-size: 0.28rem;
+      color: #fff;
+    }
+    .browser_list {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0.42rem 0 0 0;
+      .item {
+        img {
+          width: 1.39rem;
+          height: auto;
+        }
+        margin-right: 0.28rem;
+        &:last-of-type {
+          margin-right: 0;
+        }
       }
     }
   }
-}
 </style>

src/components/chatRoom/dialog/createdRoom.vue

@@ -5,12 +5,22 @@
       <div class="content">
         <div class="dialog_title" v-if="role == 'leader'">创建一起逛</div>
         <div class="dialog_title" v-else>进入一起逛</div>
-        <div class="avatar-box" v-if="role == 'leader'" :style="`background-image:url(${avatar || defaultAvatar});`">
+        <div
+          class="avatar-box"
+          v-if="role == 'leader'"
+          :style="`background-image:url(${avatar || defaultAvatar});`"
+        >
           <input type="file" @change="changeFile($event)" accept=".jpg,.png" />
           <div class="tips">更换</div>
         </div>
         <div class="user_name">
-          <input class="input_name" maxlength="20" v-model.trim="userName" type="text" :placeholder="role == 'leader' ? ' 请输入发起人昵称' : '请输入您的昵称'" />
+          <input
+            class="input_name"
+            maxlength="20"
+            v-model.trim="userName"
+            type="text"
+            :placeholder="role == 'leader' ? ' 请输入发起人昵称' : '请输入您的昵称'"
+          />
           <span class="limitNum">{{ userName.length }}/20</span>
         </div>
         <!-- <div v-if="role!='customer'" class="mode_btn">
@@ -27,331 +37,329 @@
 </template>
 
 <script lang="ts">
-import Dialog from '/@/components/basic/dialog';
-import browser from '/@/utils/browser';
-import { useStore } from 'vuex';
-import Cropper from '@/components/cropper/cropper.vue';
-export default {
-  data() {
-    return {
-      role: browser.getURLParam('role') || 'leader',
-      mode: browser.getURLParam('mode') || 2,
-      modeList: [
-        {
-          mode: 1,
-          title: '1V1',
-        },
-        {
-          mode: 2,
-          title: '多人模式',
+  import Dialog from '/@/components/basic/dialog';
+  import browser from '/@/utils/browser';
+  import { useStore } from 'vuex';
+  import Cropper from '@/components/cropper/cropper.vue';
+  export default {
+    components: { Cropper },
+    data() {
+      return {
+        role: browser.getURLParam('role') || 'leader',
+        mode: browser.getURLParam('mode') || 2,
+        modeList: [
+          {
+            mode: 1,
+            title: '1V1',
+          },
+          {
+            mode: 2,
+            title: '多人模式',
+          },
+        ],
+        store: useStore(),
+        userName: '',
+        roomId: browser.getURLParam('roomId'),
+        showCrop: false,
+        // base64: null,
+        defaultAvatar: require('@/assets/images/avatar_default.png'),
+        // avatar: null,
+        option: {
+          // img: 'https://4dkk.4dage.com/scene_edit_data/KK-t-SfG2Xcb8QX/user/thumb-1k.jpg?_=1661768330305',
+          img: '',
         },
-      ],
-      store: useStore(),
-      userName: '',
-      roomId: browser.getURLParam('roomId'),
-      showCrop: false,
-      // base64: null,
-      defaultAvatar: require('@/assets/images/avatar_default.png'),
-      // avatar: null,
-      option: {
-        // img: 'https://4dkk.4dage.com/scene_edit_data/KK-t-SfG2Xcb8QX/user/thumb-1k.jpg?_=1661768330305',
-        img: '',
+      };
+    },
+    computed: {
+      avatar: function () {
+        return this.$store.getters['rtc/avatar'];
       },
-    };
-  },
-
-  mounted() {
-   
-  },
-  computed: {
-    avatar: function () {
-      return this.$store.getters['rtc/avatar']
     },
-  },
-  components: { Cropper },
-  // created: {},
-  // mounted:{},
-  methods: {
-    changeFile(e) {
-      let file = e.target.files[0];
 
-      let blob = window.URL.createObjectURL(file);
-      console.log(blob);
-      this.option.img = blob;
-      this.openCrop();
-      e.target.value = '';
-    },
-    confirmCrop(base64) {
-      this.$store.commit('rtc/setAvatar', base64);
-    },
-    openCrop() {
-      this.showCrop = true;
-    },
-    closeCrop() {
-      this.showCrop = false;
-    },
-    getUrl(href, queryArr) {
-      queryArr.forEach((item) => {
-        if (!browser.hasURLParam(item.key)) {
-          let ttt = href.split('index.html?');
-          href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
-        } else {
-          href = browser.replaceQueryString(href, item.key, item.val);
-        }
-      });
+    mounted() {},
+    // created: {},
+    // mounted:{},
+    methods: {
+      changeFile(e) {
+        let file = e.target.files[0];
 
-      return href;
-    },
+        let blob = window.URL.createObjectURL(file);
+        console.log(blob);
+        this.option.img = blob;
+        this.openCrop();
+        e.target.value = '';
+      },
+      confirmCrop(base64) {
+        this.$store.commit('rtc/setAvatar', base64);
+      },
+      openCrop() {
+        this.showCrop = true;
+      },
+      closeCrop() {
+        this.showCrop = false;
+      },
+      getUrl(href, queryArr) {
+        queryArr.forEach((item) => {
+          if (!browser.hasURLParam(item.key)) {
+            let ttt = href.split('index.html?');
+            href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
+          } else {
+            href = browser.replaceQueryString(href, item.key, item.val);
+          }
+        });
 
-    chooseMode(mode) {
-      this.mode = mode;
-    },
-    closeCreated() {
-      this.$emit('closeCreated');
-    },
-    createdConfirm() {
-      if (this.userName == '') {
-        Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
-        return;
-      }
-      let name = encodeURIComponent(this.userName);
-      let hh = window.location.href;
+        return href;
+      },
 
-      if (this.role == 'customer') {
-        let tempUrl = this.getUrl(hh, [
-          {
-            key: 'mode',
-            val: this.mode,
-          },
-          {
-            key: 'name',
-            val: name,
-          },
-          {
-            key: 'role',
-            val: 'customer',
-          },
-          {
-            key: 'roomId',
-            val: this.roomId,
-          },
-        ]);
-        // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
-        history.replaceState(null, null, tempUrl);
-      } else {
-        let tempUrl = this.getUrl(hh, [
-          {
-            key: 'mode',
-            val: this.mode,
-          },
-          {
-            key: 'name',
-            val: name,
-          },
-          {
-            key: 'role',
-            val: 'leader',
-          },
-        ]);
+      chooseMode(mode) {
+        this.mode = mode;
+      },
+      closeCreated() {
+        this.$emit('closeCreated');
+      },
+      createdConfirm() {
+        if (this.userName == '') {
+          Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
+          return;
+        }
+        let name = encodeURIComponent(this.userName);
+        let hh = window.location.href;
 
-        // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
-        history.replaceState(null, null, tempUrl);
-        console.log(tempUrl);
-      }
-      this.store.commit('rtc/setRole', this.role);
+        if (this.role == 'customer') {
+          let tempUrl = this.getUrl(hh, [
+            {
+              key: 'mode',
+              val: this.mode,
+            },
+            {
+              key: 'name',
+              val: name,
+            },
+            {
+              key: 'role',
+              val: 'customer',
+            },
+            {
+              key: 'roomId',
+              val: this.roomId,
+            },
+          ]);
+          // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
+          history.replaceState(null, null, tempUrl);
+        } else {
+          let tempUrl = this.getUrl(hh, [
+            {
+              key: 'mode',
+              val: this.mode,
+            },
+            {
+              key: 'name',
+              val: name,
+            },
+            {
+              key: 'role',
+              val: 'leader',
+            },
+          ]);
 
-      this.$nextTick(() => {
-        this.$emit('createdConfirm');
-      });
+          // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
+          history.replaceState(null, null, tempUrl);
+          console.log(tempUrl);
+        }
+        this.store.commit('rtc/setRole', this.role);
+
+        this.$nextTick(() => {
+          this.$emit('createdConfirm');
+        });
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-#createdRoom {
-  width: 100vw;
-  height: 100%;
-  // background: rgba(0, 0, 0, 0.5);
-  background: transparent;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 1000000;
-  // pointer-events: none;
-  .created_dialog {
-    width: 8.64rem;
-    min-height: 5rem;
-    // background: #ffffff;
-    pointer-events: auto;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    // overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-
-    .blurBox {
+  #createdRoom {
+    width: 100vw;
+    height: 100%;
+    // background: rgba(0, 0, 0, 0.5);
+    background: transparent;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000000;
+    // pointer-events: none;
+    .created_dialog {
+      width: 8.64rem;
+      min-height: 5rem;
+      // background: #ffffff;
+      pointer-events: auto;
       position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      filter: blur(1px);
-    }
-    .content {
-      position: relative;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .avatar-box {
-      width: 1.7067rem;
-      height: 1.7067rem;
-      margin: 0.56rem auto 0;
-      border: 1px #fff solid;
-      border-radius: 50%;
-      // background-image: url('@/assets/images/avatar_default.jpg');
-      background-size: 100%;
-      background-repeat: no-repeat;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      &:hover {
-        border: 1px #ed5d18 solid;
-        .tips {
-          color: #ed5d18;
-        }
-      }
-      .tips {
-        width: 100%;
-        height: 0.5rem;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      // overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+
+      .blurBox {
         position: absolute;
-        background: rgba(0, 0, 0, 0.5);
-        bottom: 0;
+        z-index: 1;
+        top: 0;
         left: 0;
-        text-align: center;
-        line-height: 0.5rem;
-        font-size: 0.22rem;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        filter: blur(1px);
       }
-      input {
+      .content {
+        position: relative;
+        z-index: 2;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        opacity: 0;
+      }
+      .avatar-box {
+        width: 1.7067rem;
+        height: 1.7067rem;
+        margin: 0.56rem auto 0;
+        border: 1px #fff solid;
+        border-radius: 50%;
+        // background-image: url('@/assets/images/avatar_default.jpg');
+        background-size: 100%;
+        background-repeat: no-repeat;
         position: relative;
-        z-index: 10;
+        overflow: hidden;
         cursor: pointer;
+        &:hover {
+          border: 1px #ed5d18 solid;
+          .tips {
+            color: #ed5d18;
+          }
+        }
+        .tips {
+          width: 100%;
+          height: 0.5rem;
+          position: absolute;
+          background: rgba(0, 0, 0, 0.5);
+          bottom: 0;
+          left: 0;
+          text-align: center;
+          line-height: 0.5rem;
+          font-size: 0.22rem;
+        }
+        input {
+          width: 100%;
+          height: 100%;
+          opacity: 0;
+          position: relative;
+          z-index: 10;
+          cursor: pointer;
+        }
       }
-    }
-    .dialog_title {
-      font-size: 0.39rem;
-      width: 100%;
-      height: 1.39rem;
-      padding: 0 0.56rem;
-      box-sizing: border-box;
-      font-size: 0.39rem;
-      color: #fff;
-      line-height: 1.39rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      border-bottom-color: rgba(255, 255, 255, 0.1);
-    }
-    .user_name {
-      width: 100%;
-      height: 1.11rem;
-      padding: 0 0.56rem;
-      box-sizing: border-box;
-      font-size: 0.39rem;
-      line-height: 1.11rem;
-      margin: 0.56rem 0;
-      position: relative;
-      .limitNum {
-        position: absolute;
-        right: 0.64rem;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 0.33rem;
-        color: #b9bdbc;
-      }
-      .input_name {
+      .dialog_title {
         font-size: 0.39rem;
         width: 100%;
-        height: 100%;
-        line-height: 1.11rem;
-        padding: 0 1.066667rem 0 0.28rem;
+        height: 1.39rem;
+        padding: 0 0.56rem;
         box-sizing: border-box;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 4px;
+        font-size: 0.39rem;
         color: #fff;
-        border: none;
-        outline: none;
-        &::placeholder {
-          color: rgba(255, 255, 255, 0.3);
-        }
+        line-height: 1.39rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: rgba(255, 255, 255, 0.1);
       }
-    }
-    .mode_btn {
-      width: 100%;
-      height: 1.11rem;
-      padding: 0 0.56rem;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 0.56rem;
-      > div.mode {
-        width: 3.61rem;
-        height: 100%;
-        border-radius: 0.65rem;
-        border: 0.03rem solid #fff;
-        color: #fff;
+      .user_name {
+        width: 100%;
+        height: 1.11rem;
+        padding: 0 0.56rem;
+        box-sizing: border-box;
         font-size: 0.39rem;
         line-height: 1.11rem;
-        text-align: center;
-        box-sizing: border-box;
-        &.active {
-          color: #ed5d18;
-          border: 0.03rem solid #ed5d18;
+        margin: 0.56rem 0;
+        position: relative;
+        .limitNum {
+          position: absolute;
+          right: 0.64rem;
+          top: 50%;
+          transform: translateY(-50%);
+          font-size: 0.33rem;
+          color: #b9bdbc;
+        }
+        .input_name {
+          font-size: 0.39rem;
+          width: 100%;
+          height: 100%;
+          line-height: 1.11rem;
+          padding: 0 1.066667rem 0 0.28rem;
+          box-sizing: border-box;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 4px;
+          color: #fff;
+          border: none;
+          outline: none;
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.3);
+          }
         }
       }
-    }
-    .created_btn {
-      width: 100%;
-      height: 1.36rem;
-      border-top-style: solid;
-      border-top-width: 1px;
-      border-top-color: rgba(255, 255, 255, 0.1);
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.39rem;
-      > div {
-        width: 50%;
-        height: 1.36rem;
-        text-align: center;
-        line-height: 1.36rem;
-        font-size: 0.39rem;
+      .mode_btn {
+        width: 100%;
+        height: 1.11rem;
+        padding: 0 0.56rem;
         box-sizing: border-box;
-        &.created_cancel {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.56rem;
+        > div.mode {
+          width: 3.61rem;
+          height: 100%;
+          border-radius: 0.65rem;
+          border: 0.03rem solid #fff;
           color: #fff;
-          border-right-style: solid;
-          border-right-width: 1px;
-          border-right-color: rgba(255, 255, 255, 0.1);
+          font-size: 0.39rem;
+          line-height: 1.11rem;
+          text-align: center;
+          box-sizing: border-box;
+          &.active {
+            color: #ed5d18;
+            border: 0.03rem solid #ed5d18;
+          }
         }
-        &.created_confirm {
-          color: #ed5d18;
+      }
+      .created_btn {
+        width: 100%;
+        height: 1.36rem;
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-top-color: rgba(255, 255, 255, 0.1);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.39rem;
+        > div {
+          width: 50%;
+          height: 1.36rem;
+          text-align: center;
+          line-height: 1.36rem;
+          font-size: 0.39rem;
+          box-sizing: border-box;
+          &.created_cancel {
+            color: #fff;
+            border-right-style: solid;
+            border-right-width: 1px;
+            border-right-color: rgba(255, 255, 255, 0.1);
+          }
+          &.created_confirm {
+            color: #ed5d18;
+          }
         }
       }
     }
   }
-}
 </style>

src/components/chatRoom/dialog/index.vue

@@ -15,129 +15,128 @@
 </template>
 
 <script setup>
-import browser from "@/utils/browser";
-import { onMounted, watch, defineProps, defineEmits, ref, computed } from "vue";
-import { useStore } from "vuex";
-const store = useStore();
+  import browser from '@/utils/browser';
+  import { onMounted, watch, defineProps, defineEmits, ref, computed } from 'vue';
+  import { useStore } from 'vuex';
+  const store = useStore();
 
-const emit = defineEmits(["closeDialog","confirmDialog"]);
+  const emit = defineEmits(['closeDialog', 'confirmDialog']);
 
-const role = ref(browser.urlHashValue("role"));
-const socket = computed(() => store.getters["rtc/socket"]);
+  const role = ref(browser.urlHashValue('role'));
+  const socket = computed(() => store.getters['rtc/socket']);
 
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '温馨提示',
+    },
+    desc: {
+      type: String,
+      default: '是否结束带看？',
+    },
+  });
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: "温馨提示",
-  },
-  desc: {
-    type: String,
-    default: "是否结束带看？",
-  },
-});
+  const endLiveCancel = () => {
+    emit('closeDialog');
+  };
 
-const endLiveCancel = () => {
-  emit("closeDialog");
-};
-
-const endLiveConfirm = () => {
-  // socket.value.emit("disconnect");
-  emit("confirmDialog");
-};
+  const endLiveConfirm = () => {
+    // socket.value.emit("disconnect");
+    emit('confirmDialog');
+  };
 </script>
 
 <style scoped lang="scss">
-#dialog_index {
-  width: 100vw;
-  height: 100%;
-  // background: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 100000;
-  pointer-events: none;
-  .created_dialog {
-    pointer-events: auto;
-    width: 8.64rem;
-    // min-height: 5rem;
-    // background: #ffffff;
-    border-radius: 8px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-    .blurBox {
+  #dialog_index {
+    width: 100vw;
+    height: 100%;
+    // background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100000;
+    pointer-events: none;
+    .created_dialog {
+      pointer-events: auto;
+      width: 8.64rem;
+      // min-height: 5rem;
+      // background: #ffffff;
+      border-radius: 8px;
       position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      filter: blur(1px);
-    }
-    .content {
-      position: relative;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .dialog_title {
-      width: 100%;
-      height: 1.39rem;
-      padding: 0 0.56rem;
-      box-sizing: border-box;
-      font-size: 0.39rem;
-      color: #fff;
-      line-height: 1.39rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      border-bottom-color: rgba(255, 255, 255, 0.1);
-    }
-    .dialog_desc {
-      font-size: 0.42rem;
-      color: #fff;
-      padding: 0.56rem 0;
-      text-align: center;
-    }
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      .blurBox {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        filter: blur(1px);
+      }
+      .content {
+        position: relative;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .dialog_title {
+        width: 100%;
+        height: 1.39rem;
+        padding: 0 0.56rem;
+        box-sizing: border-box;
+        font-size: 0.39rem;
+        color: #fff;
+        line-height: 1.39rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+      }
+      .dialog_desc {
+        font-size: 0.42rem;
+        color: #fff;
+        padding: 0.56rem 0;
+        text-align: center;
+      }
 
-    .created_btn {
-      width: 100%;
-      height: 1.36rem;
-      border-top-style: solid;
-      border-top-width: 1px;
-      border-top-color: rgba(255, 255, 255, 0.1);
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.39rem;
-      > div {
-        width: 50%;
+      .created_btn {
+        width: 100%;
         height: 1.36rem;
-        text-align: center;
-        line-height: 1.36rem;
-        font-size: 0.39rem;
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-top-color: rgba(255, 255, 255, 0.1);
         box-sizing: border-box;
-        &.end_cancel {
-          color: #fff;
-          border-right-style: solid;
-          border-right-width: 1px;
-          border-right-color: rgba(255, 255, 255, 0.1);
-        }
-        &.end_confirm {
-          color: #ed5d18;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.39rem;
+        > div {
+          width: 50%;
+          height: 1.36rem;
+          text-align: center;
+          line-height: 1.36rem;
+          font-size: 0.39rem;
+          box-sizing: border-box;
+          &.end_cancel {
+            color: #fff;
+            border-right-style: solid;
+            border-right-width: 1px;
+            border-right-color: rgba(255, 255, 255, 0.1);
+          }
+          &.end_confirm {
+            color: #ed5d18;
+          }
         }
       }
     }
   }
-}
 </style>

src/components/chatRoom/dialog/share.vue

@@ -12,7 +12,13 @@
 
         <div class="created_btn">
           <div class="created_cancel" @click="closeCreated">取消</div>
-          <div class="created_confirm"  ref="copylink$" :data-clipboard-text="shareLink" @click="createdConfirm">复制分享</div>
+          <div
+            class="created_confirm"
+            ref="copylink$"
+            :data-clipboard-text="shareLink"
+            @click="createdConfirm"
+            >复制分享</div
+          >
         </div>
       </div>
     </div>
@@ -20,150 +26,149 @@
 </template>
 
 <script setup>
-import { onMounted, watch, defineProps, defineEmits, ref, nextTick } from "vue";
-import ClipboardJS from 'clipboard'
-import { Dialog } from '@/global_components/'
+  import { onMounted, defineProps, defineEmits, ref, nextTick } from 'vue';
+  import ClipboardJS from 'clipboard';
+  import { Dialog } from '@/global_components/';
 
-const emit = defineEmits(["closeDialog"]);
+  const emit = defineEmits(['closeDialog']);
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: "邀请好友",
-  },
-  shareLink: {
-    type: String,
-    default: "",
-  },
-});
-const copylink$ = ref(null)
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '邀请好友',
+    },
+    shareLink: {
+      type: String,
+      default: '',
+    },
+  });
+  const copylink$ = ref(null);
 
-const closeCreated = () => {
-  emit("closeDialog");
-};
+  const closeCreated = () => {
+    emit('closeDialog');
+  };
 
-const createdConfirm = () => {
-  emit("closeDialog");
-};
-
-onMounted(() => {
-   nextTick(()=>{
-     new ClipboardJS(copylink$.value).on('success', function (e) {
-        e.clearSelection()
-        Dialog.toast({ content: '链接复制成功', type: 'success' })
-    })
-   })
-})
+  const createdConfirm = () => {
+    emit('closeDialog');
+  };
 
+  onMounted(() => {
+    nextTick(() => {
+      new ClipboardJS(copylink$.value).on('success', function (e) {
+        e.clearSelection();
+        Dialog.toast({ content: '链接复制成功', type: 'success' });
+      });
+    });
+  });
 </script>
 
 <style scoped lang="scss">
-#dialog_index {
-  width: 100vw;
-  height: 100%;
-  // background: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 100000;
-  pointer-events: none;
-  .created_dialog {
-    width: 8.64rem;
-    // min-height: 5rem;
-    // background: #ffffff;
-    border-radius: 8px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    pointer-events: auto;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-    .blurBox {
+  #dialog_index {
+    width: 100vw;
+    height: 100%;
+    // background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100000;
+    pointer-events: none;
+    .created_dialog {
+      width: 8.64rem;
+      // min-height: 5rem;
+      // background: #ffffff;
+      border-radius: 8px;
       position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      filter: blur(1px);
-    }
-    .content {
-      position: relative;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .dialog_title {
-      width: 100%;
-      height: 1.39rem;
-      padding: 0 0.56rem;
-      box-sizing: border-box;
-      font-size: 0.39rem;
-      color: #fff;
-      line-height: 1.39rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      border-bottom-color: rgba(255, 255, 255, 0.1);
-    }
-    .dialog_link {
-      width: 100%;
-      font-size: 0.39rem;
-      color: rgba(255, 255, 255, 0.5);
-      padding: 0.53rem 0.56rem;
-      box-sizing: border-box;
-      text-align: justify;
-      text-align: left;
-      > p {
-        background: rgba(0, 0, 0, 0.5);
-        padding: 0.15rem 0.28rem;
-        word-break: break-all;
-        word-wrap: break-word;
-        text-overflow: -o-ellipsis-lastline;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: auto;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      .blurBox {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        filter: blur(1px);
+      }
+      .content {
+        position: relative;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .dialog_title {
+        width: 100%;
+        height: 1.39rem;
+        padding: 0 0.56rem;
+        box-sizing: border-box;
+        font-size: 0.39rem;
+        color: #fff;
+        line-height: 1.39rem;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 0.72rem;
+        white-space: nowrap;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: rgba(255, 255, 255, 0.1);
       }
-    }
-
-    .created_btn {
-      width: 100%;
-      height: 1.36rem;
-      border-top-style: solid;
-      border-top-width: 1px;
-      border-top-color: rgba(255, 255, 255, 0.1);
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      > div {
-        width: 50%;
-        height: 1.36rem;
-        text-align: center;
-        line-height: 1.36rem;
+      .dialog_link {
+        width: 100%;
         font-size: 0.39rem;
+        color: rgba(255, 255, 255, 0.5);
+        padding: 0.53rem 0.56rem;
         box-sizing: border-box;
-        &.created_cancel {
-          color: #fff;
-          border-right-style: solid;
-          border-right-width: 1px;
-          border-right-color: rgba(0, 0, 0, 0.05);
+        text-align: justify;
+        text-align: left;
+        > p {
+          background: rgba(0, 0, 0, 0.5);
+          padding: 0.15rem 0.28rem;
+          word-break: break-all;
+          word-wrap: break-word;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+          line-height: 0.72rem;
         }
-        &.created_confirm {
-          color: #ed5d18;
+      }
+
+      .created_btn {
+        width: 100%;
+        height: 1.36rem;
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-top-color: rgba(255, 255, 255, 0.1);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > div {
+          width: 50%;
+          height: 1.36rem;
+          text-align: center;
+          line-height: 1.36rem;
+          font-size: 0.39rem;
+          box-sizing: border-box;
+          &.created_cancel {
+            color: #fff;
+            border-right-style: solid;
+            border-right-width: 1px;
+            border-right-color: rgba(0, 0, 0, 0.05);
+          }
+          &.created_confirm {
+            color: #ed5d18;
+          }
         }
       }
     }
   }
-}
 </style>

src/components/chatRoom/index.vue

@@ -92,7 +92,7 @@
     </div>
   </teleport> -->
   <!-- 场景列表 start -->
-  <SceneList v-if="showScenes" @close="showScenes = false" @changeScene="" />
+  <SceneList v-if="showScenes" @close="showScenes = false" @changeScene="changeScene" />
   <!-- 场景列表 end -->
   <!-- trtc相关 start -->
   <div class="local" id="local" v-if="isJoined"></div>
@@ -121,7 +121,7 @@
   import { useRoom } from '/@/hooks/useRoom';
   import consola from 'consola';
   import Dialog from '../basic/dialog';
-  import { storeToRefs } from 'pinia';
+  // import { storeToRefs } from 'pinia';
   import ShareContainer from './share.vue';
   // hook
   const { isDrawing, setDraw, setCloseDraw } = useDraw();
@@ -330,6 +330,10 @@
   const handleCreateShare = () => {
     shareLink.value = location.href;
   };
+
+  const changeScene = () => {
+    console.log('changeScene');
+  };
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/memberList.vue

@@ -11,10 +11,7 @@
           <div class="memberItem" v-for="(i, idx) in data" :key="idx">
             <div class="userMsg">
               <div class="avatar" :class="`${role}`">
-                <img
-                  :src="i?.Avatar || defaultAvatar"
-                  alt=""
-                />
+                <img :src="i?.Avatar || defaultAvatar" alt="" />
                 <div class="avatar-crown" v-show="i.Role === 'leader'"></div>
               </div>
               <div class="name">{{ i.Nickname }}</div>
@@ -52,7 +49,7 @@
 <script lang="ts" setup>
   import { propTypes } from '/@/utils/propTypes';
   import { UserInfoType, useRtcStore } from '/@/store/modules/rtc';
-  import defaultAvatar from "/@/assets/images/rtcLive/avatar_small@2x.png";
+  import defaultAvatar from '/@/assets/images/rtcLive/avatar_small@2x.png';
   import { computed, watchEffect } from 'vue';
   import { useSocket } from '/@/hooks/userSocket';
   const rtcStore = useRtcStore();

src/hooks/useTRTC.ts

@@ -61,6 +61,7 @@ async function createRTCSocket(): Promise<void> {
     const rtcStore = useRtcStore();
     await checkoutIsExistAudioInput();
     await updateDevice();
+    console.log('rtcStore', rtcStore);
     // const microphoneItems = await TRTC.getMicrophones();
 
     // if (microphoneItems?.length) {
@@ -106,8 +107,8 @@ async function handleJoin() {
         tag: 'rtc:audio',
       });
     })
-    .catch((e) => {
-      console.log(localStream);
+    .catch((error) => {
+      console.log(localStream, error);
     });
 
   localStream.on('error', (error) => {

src/hooks/userSocket.ts

@@ -30,7 +30,7 @@ async function closeSocket() {
   const appStore = useAppStore();
   await getApp().Connect.follow.exit();
   await leaveRoom();
-  appStore.setIsTourMode(true)
+  appStore.setIsTourMode(true);
   if (rtcStore.isLeader) {
     socket.emit('action', { type: 'leader-dismiss' });
   }

src/store/modules/app.ts

@@ -106,6 +106,7 @@ export const useAppStore = defineStore({
       }
       if (!this.player.showToolbar || this.player.showVR) {
         const tourStore = useTourStore();
+        console.log('tourStore', tourStore);
         // debugger
         // this.commit('tour/setData', { showTours: false })
         // tourStore.setData({ showTours: false })

src/style/app.scss

@@ -1,162 +1,158 @@
 .tab-layer {
-    width: 100%;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 2.3rem;
-    pointer-events: none;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.3rem;
+  pointer-events: none;
+}
+.tabs {
+  pointer-events: auto;
+  position: relative;
+  display: flex;
+  background: #222222;
+  border-radius: 6px;
+  padding: 2px;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+  .background {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    bottom: 2px;
+    width: 50%;
+    border-radius: 4px;
+    background: #444444;
+    box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
+    z-index: 0;
+    transition: left 0.3s;
   }
-  .tabs {
-    pointer-events: auto;
-    position: relative;
-    display: flex;
-    background: #222222;
+  span {
+    flex: 1;
+    color: #fff;
+    opacity: 0.5;
     border-radius: 6px;
-    padding: 2px;
-    justify-content: center;
+    height: 0.94737rem;
+    font-size: 0.36842rem;
+    transition: all 0.3s ease;
+    display: flex;
     align-items: center;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
-    .background {
-      position: absolute;
-      left: 2px;
-      top: 2px;
-      bottom: 2px;
-      width: 50%;
-      border-radius: 4px;
-      background: #444444;
-      box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.3);
-      z-index: 0;
-      transition: left 0.3s;
-    }
-    span {
-      flex: 1;
-      color: #fff;
-      opacity: 0.5;
-      border-radius: 6px;
-      height: 0.94737rem;
-      font-size: 0.36842rem;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding-left: 10px;
-      padding-right: 10px;
-      white-space: nowrap;
-      z-index: 1;
-      i {
-        font-size: 0.47368rem;
-        margin-right: 4px;
-        pointer-events: none;
-      }
-    }
-  
-    span.active {
-      opacity: 1;
+    justify-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    white-space: nowrap;
+    z-index: 1;
+    i {
+      font-size: 0.47368rem;
+      margin-right: 4px;
+      pointer-events: none;
     }
   }
-  
-  [xui_tags_view] {
-    .tag-body {
-      /* display: none; */
-      position: absolute;
-      left: 50%;
-      bottom: 50px;
-      transform: translateX(-50%) scale(0);
-      transform-origin: bottom;
-      transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
-      // pointer-events: none;
-      .tag-commodity {
-        min-width: 230px;
-        height: 76px;
-        background: rgba(255, 255, 255, 0.8);
-        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+
+  span.active {
+    opacity: 1;
+  }
+}
+
+[xui_tags_view] {
+  .tag-body {
+    /* display: none; */
+    position: absolute;
+    left: 50%;
+    bottom: 50px;
+    transform: translateX(-50%) scale(0);
+    transform-origin: bottom;
+    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
+    // pointer-events: none;
+    .tag-commodity {
+      min-width: 230px;
+      height: 76px;
+      background: rgba(255, 255, 255, 0.8);
+      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+      border-radius: 2px;
+      position: relative;
+      margin-bottom: 30px;
+      &::before {
+        content: '';
+        display: inline-block;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 2px;
+        height: 28px;
+        bottom: -30px;
+        background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+        position: absolute;
+      }
+      .tag-avatar {
+        position: absolute;
+        z-index: 99;
+        width: 80px;
+        height: 80px;
+        background: #ffffff;
+        box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
         border-radius: 2px;
-        position: relative;
-        margin-bottom: 30px;
-        &::before {
-          content: "";
-          display: inline-block;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 2px;
-          height: 28px;
-          bottom: -30px;
-          background: linear-gradient(
-            145deg,
-            rgba(255, 255, 255, 0.8),
-            rgba(255, 255, 255, 0)
-          );
-          position: absolute;
-        }
-        .tag-avatar {
-          position: absolute;
-          z-index: 99;
-          width: 80px;
-          height: 80px;
-          background: #ffffff;
-          box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 16%);
-          border-radius: 2px;
-          top: -14px;
-          left: -12px;
-          background-size: cover;
-          pointer-events: none;
-        }
-        > p {
-          color: #131d34;
-          font-size: 16px;
-          pointer-events: none;
-        }
-        .tag-title {
-          font-weight: bold;
-          color: #131d34;
-          padding: 10px 10px 10px 76px;
+        top: -14px;
+        left: -12px;
+        background-size: cover;
+        pointer-events: none;
+      }
+      > p {
+        color: #131d34;
+        font-size: 16px;
+        pointer-events: none;
+      }
+      .tag-title {
+        font-weight: bold;
+        color: #131d34;
+        padding: 10px 10px 10px 76px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 240px;
+        font-size: 14px;
+      }
+      .tag-info {
+        color: #444444;
+        padding: 0 20px 0 76px;
+        font-size: 12px;
+        width: 240px;
+        > div {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          width: 240px;
-          font-size: 14px;
-        }
-        .tag-info {
-          color: #444444;
-          padding: 0 20px 0 76px;
-          font-size: 12px;
-          width: 240px;
-          > div {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            max-width: 240px;
-          }
+          max-width: 240px;
         }
       }
-      &.show {
-        transform: translateX(-50%) scale(1);
-      }
+    }
+    &.show {
+      transform: translateX(-50%) scale(1);
     }
   }
-  
-  .gudieDisabled {
+}
+
+.gudieDisabled {
+  pointer-events: none !important;
+  * {
     pointer-events: none !important;
-    * {
-      pointer-events: none !important;
-    }
   }
-  
-  @media (orientation: landscape) {
-    .tab-layer {
-      top: 1.2rem;
-      .tabs {
+}
+
+@media (orientation: landscape) {
+  .tab-layer {
+    top: 1.2rem;
+    .tabs {
+      height: 0.7rem;
+      > span {
         height: 0.7rem;
-        > span {
-          height: 0.7rem;
-          font-size: 0.25rem;
-        }
+        font-size: 0.25rem;
       }
     }
-  }
+  }
+}

src/utils/browser.ts

@@ -3,7 +3,7 @@
 
 function mobileVersion(e, t) {
   //ios的版本
-  let i = window.navigator.userAgent,
+  const i = window.navigator.userAgent,
     n = i.match(e);
   return (
     (n = n ? n[1].split(t) : []),
@@ -14,7 +14,7 @@ function mobileVersion(e, t) {
     }
   );
 }
-var browser = {
+const browser = {
   isFullscreen: function () {
     return (
       document.fullscreenElement ||