【Web】update Web/vue2

Web/example/webpack-vue2.7-ts/README.zh.md

@@ -75,7 +75,7 @@
 2. 开发环境运行示例工程
 
    ```bash
-   npm run dev
+   npm run serve
    ```
 
 ### 第四步：示例体验

Web/example/webpack-vue2.7-ts/package.json

@@ -1,16 +1,17 @@
 {
   "name": "room-uikit-web-vue2",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
+    "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@tencentcloud/roomkit-web-vue2.7": "2.9.1",
-    "@tencentcloud/tuiroom-engine-js": "2.9.1",
-    "@tencentcloud/uikit-base-component-vue2": "0.3.1",
+    "@tencentcloud/roomkit-web-vue2.7": "~3.0.0",
+    "@tencentcloud/tuiroom-engine-js": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue2": "0.3.2",
     "core-js": "^3.8.3",
     "mitt": "^3.0.0",
     "pinia": "^2.1.7",

Web/roomkit/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-web-vue2.7",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -36,13 +36,13 @@
     "vue": "^2.7.16"
   },
   "dependencies": {
-    "@tencentcloud/chat": "latest",
-    "@tencentcloud/chat-uikit-engine": "2.3.3",
-    "@tencentcloud/chat-uikit-vue": "2.3.3",
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/chat-uikit-engine": "~2.3.3",
+    "@tencentcloud/chat-uikit-vue": "~2.3.3",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "2.9.1",
+    "@tencentcloud/tuiroom-engine-js": "~3.0.0",
+    "@tencentcloud/uikit-base-component-vue2": "0.3.2",
     "@tencentcloud/universal-api": "^2.0.9",
-    "@tencentcloud/uikit-base-component-vue2": "0.3.1",
     "@tiptap/core": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-image": "^2.6.6",

Web/roomkit/vue2/src/TUIRoom/components/Chat/index/indexPC.vue

@@ -5,9 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, onMounted } from 'vue';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-
 import Server from '../ChatKit/server';
 import { roomService, Theme, LanguageOption } from '../../../services';
 import { hideTUIChatFeatures } from '../ChatKit/components/TUIChat/config';
@@ -51,12 +50,11 @@ TUIConversationService.switchConversation(currentRoomId);
 hideTUIChatFeatures(defaultHideFeaturesButtons);
 roomService.setLanguage(basicStore.lang as LanguageOption);
 
-if (!theme.value) {
-  roomService.setTheme(basicStore.defaultTheme as Theme);
-} else {
-  setTheme(theme.value);
-  roomService.setTheme(theme.value as Theme);
-}
+onMounted(() => {
+  theme.value
+    ? setTheme(theme.value)
+    : roomService.setTheme(basicStore.defaultTheme as Theme);
+});
 </script>
 
 <style lang="scss" scoped>

Web/roomkit/vue2/src/TUIRoom/components/common/SwitchTheme.vue

@@ -21,11 +21,11 @@
         <span>{{ t('Theme Colours') }}</span>
         <div class="color-blocks two-blocks">
           <div
-            class="color-block black"
+            :class="['color-block black', { active: currentTheme === 'dark' }]"
             @click="toggleCustomTheme('dark')"
           ></div>
           <div
-            class="color-block white"
+            :class="['color-block white', { active: currentTheme === 'light' }]"
             @click="toggleCustomTheme('light')"
           ></div>
         </div>
@@ -34,16 +34,31 @@
         <span>{{ t('Custom Themes') }}</span>
         <div class="color-blocks four-blocks">
           <div
-            class="color-block theme"
+            :class="[
+              'color-block theme',
+              { active: currentCustomTheme === 'theme' },
+            ]"
             @click="toggleCustomTheme('theme')"
           ></div>
           <div
-            class="color-block green"
+            :class="[
+              'color-block green',
+              { active: currentCustomTheme === 'green' },
+            ]"
             @click="toggleCustomTheme('green')"
           ></div>
-          <div class="color-block red" @click="toggleCustomTheme('red')"></div>
           <div
-            class="color-block orange"
+            :class="[
+              'color-block red',
+              { active: currentCustomTheme === 'red' },
+            ]"
+            @click="toggleCustomTheme('red')"
+          ></div>
+          <div
+            :class="[
+              'color-block orange',
+              { active: currentCustomTheme === 'orange' },
+            ]"
             @click="toggleCustomTheme('orange')"
           ></div>
         </div>
@@ -53,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps, ref } from 'vue';
+import { withDefaults, defineProps, ref, computed } from 'vue';
 import IconButton from './base/IconButton.vue';
 import SwitchThemeIcon from './icons/SwitchThemeIcon.vue';
 import { IconButtonLayout } from '../../constants/room';
@@ -70,6 +85,8 @@ const basicStore = useBasicStore();
 const { theme, setTheme } = useUIKit();
 const isShowThemeColorContainer = ref(false);
 const switchThemeConfig = roomService.getComponentConfig('SwitchTheme');
+const currentCustomTheme = ref('theme');
+const currentTheme = computed(() => theme.value || basicStore.defaultTheme);
 
 interface Props {
   visible?: boolean;
@@ -84,14 +101,8 @@ function handleSwitchTheme() {
     isShowThemeColorContainer.value = !isShowThemeColorContainer.value;
     return;
   }
-  const currentTheme = theme.value || basicStore.defaultTheme;
-  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-
-  if (theme.value) {
-    setTheme(newTheme);
-  } else {
-    roomService.setTheme(newTheme);
-  }
+  const newTheme = currentTheme.value === 'light' ? 'dark' : 'light';
+  theme.value ? setTheme(newTheme) : roomService.setTheme(newTheme);
 }
 
 function toggleCustomTheme(newTheme: string) {
@@ -105,6 +116,10 @@ function toggleCustomTheme(newTheme: string) {
     ? newTheme
     : { themeStyle: theme.value, primaryColor: newTheme };
   setTheme(themeConfig);
+
+  if (!isBaseTheme) {
+    currentCustomTheme.value = newTheme;
+  }
 }
 
 function handleClickOutSide() {
@@ -153,23 +168,44 @@ function handleClickOutSide() {
       .color-block {
         cursor: pointer;
         border-radius: 6px;
+        &.active {
+          outline-offset: 2px;
+        }
         &.black {
           background-color: var(--uikit-color-black-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.white {
           background-color: var(--uikit-color-white-1);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
         &.red {
           background-color: var(--uikit-color-red-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-red-6);
+          }
         }
         &.green {
           background-color: var(--uikit-color-green-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-green-6);
+          }
         }
         &.orange {
           background-color: var(--uikit-color-orange-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-orange-6);
+          }
         }
         &.theme {
           background-color: var(--uikit-color-theme-6);
+          &.active {
+            outline: 1px solid var(--uikit-color-theme-6);
+          }
         }
       }
     }

Web/roomkit/vue2/src/TUIRoom/services/manager/roomActionManager.ts

@@ -20,9 +20,6 @@ smallParam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
 smallParam.videoFps = 10;
 smallParam.videoBitrate = 550;
 
-export enum FetchRoomInfoErrorCode {
-  ROOM_NOT_EXIST = -2100,
-}
 export interface DeviceParams {
   isOpenCamera?: boolean;
   isOpenMicrophone?: boolean;

Web/roomkit/vue2/src/TUIRoom/services/manager/scheduleConferenceManager.ts

@@ -7,10 +7,10 @@ import {
   TUIUserInfo,
   TUIConferenceStatus,
   TUIConferenceModifyInfo,
+  TUIErrorCode,
 } from '@tencentcloud/tuiroom-engine-js';
 import { EventType, IRoomService } from '../types';
 import mitt from 'mitt';
-import { FetchRoomInfoErrorCode } from './roomActionManager.ts';
 export * from '@tencentcloud/tuiroom-engine-js';
 interface IScheduleConferenceManager {
   on(
@@ -255,7 +255,7 @@ export class ScheduleConferenceManager implements IScheduleConferenceManager {
       });
       return await this.generateRoomId(attempt + 1);
     } catch (err: any) {
-      if (err?.code === FetchRoomInfoErrorCode.ROOM_NOT_EXIST) {
+      if (err?.code === TUIErrorCode.ERR_ROOM_ID_NOT_EXIST) {
         return roomId;
       }
       throw err;