@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

package/es/preConference.vue2.mjs

@@ -1,163 +0,0 @@
-import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, createVNode, vShow, unref, createBlock } from "vue";
-import UserInfo from "./components/RoomHeader/UserInfo/index.vue.mjs";
-import RoomHomeControl from "./components/RoomHome/RoomControl/index.vue.mjs";
-import _sfc_main$2 from "./components/common/Language.vue.mjs";
-import _sfc_main$1 from "./components/common/SwitchTheme.vue.mjs";
-import "./services/main.mjs";
-import { roomService } from "./services/roomService.mjs";
-import { EventType } from "./services/types.mjs";
-import "./locales/index.mjs";
-import "@tencentcloud/tuiroom-engine-electron";
-import { isMobile } from "./utils/environment.mjs";
-import "mitt";
-import "./services/manager/roomActionManager.mjs";
-import "@tencentcloud/tui-core";
-import ScheduleRoomList from "./components/ScheduleConference/ScheduleRoomList.vue.mjs";
-import Logo from "./components/common/Logo.vue.mjs";
-import MessageBox from "./components/common/base/MessageBox/index.mjs";
-import renderMsg from "./components/common/base/Message/Message.mjs";
-import InvitationNotification from "./components/RoomInvite/InvitationNotification.vue.mjs";
-const _hoisted_1 = { class: "header" };
-const _hoisted_2 = { class: "left-header" };
-const _hoisted_3 = { class: "right-header" };
-const _hoisted_4 = {
-  key: 1,
-  class: "pre-home-control"
-};
-const _hoisted_5 = { class: "pre-home-control-container" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "preConference",
-  props: {
-    userInfo: { default: () => ({
-      userId: "",
-      userName: "",
-      avatarUrl: ""
-    }) },
-    showEditNameInPc: { type: Boolean, default: false },
-    roomId: { default: "" },
-    enableScheduledConference: { type: Boolean, default: true },
-    isShowLogo: { type: Boolean, default: true },
-    isShowHeaderInfo: { type: Boolean, default: true }
-  },
-  emits: [
-    "on-create-room",
-    "on-enter-room",
-    "on-update-user-name",
-    "on-logout"
-  ],
-  setup(__props, { emit: __emit }) {
-    const roomControlRef = ref();
-    const props = __props;
-    const emits = __emit;
-    const tuiRoomThemeClass = computed(
-      () => `tui-theme-${roomService.basicStore.defaultTheme}`
-    );
-    async function handleCreateRoom(roomOption) {
-      emits("on-create-room", roomOption);
-    }
-    async function handleEnterRoom(roomOption) {
-      emits("on-enter-room", roomOption);
-    }
-    function handleUpdateUserName(userName) {
-      emits("on-update-user-name", userName);
-    }
-    async function handleLogOut() {
-      emits("on-logout");
-    }
-    const showMessageBox = (data) => {
-      const {
-        message,
-        title = roomService.t("Note"),
-        duration,
-        cancelButtonText,
-        confirmButtonText = roomService.t("Sure"),
-        callback = () => {
-        }
-      } = data;
-      MessageBox({
-        title,
-        message,
-        duration,
-        cancelButtonText,
-        confirmButtonText,
-        callback
-      });
-    };
-    const showMessage = (data) => {
-      const { type, message, duration } = data;
-      renderMsg({
-        type,
-        message,
-        duration
-      });
-    };
-    onMounted(() => {
-      roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
-      roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
-    });
-    onUnmounted(() => {
-      roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
-      roomService.off(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        id: "pre-conference-container",
-        class: normalizeClass(["pre-conference-container", tuiRoomThemeClass.value])
-      }, [
-        withDirectives(createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", _hoisted_2, [
-            createVNode(_sfc_main$1, { class: "header-item" })
-          ]),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(_sfc_main$2, { class: "header-item language" }),
-            createVNode(UserInfo, {
-              class: "header-item user-info",
-              "user-id": props.userInfo.userId,
-              "user-name": props.userInfo.userName,
-              "avatar-url": props.userInfo.avatarUrl,
-              "is-show-edit-name": props.showEditNameInPc,
-              onUpdateUserName: handleUpdateUserName,
-              onLogOut: handleLogOut
-            }, null, 8, ["user-id", "user-name", "avatar-url", "is-show-edit-name"])
-          ])
-        ], 512), [
-          [vShow, props.isShowHeaderInfo]
-        ]),
-        unref(isMobile) ? (openBlock(), createBlock(RoomHomeControl, {
-          key: 0,
-          ref_key: "roomControlRef",
-          ref: roomControlRef,
-          "given-room-id": props.roomId,
-          "user-name": props.userInfo.userName,
-          onCreateRoom: handleCreateRoom,
-          onEnterRoom: handleEnterRoom,
-          onUpdateUserName: handleUpdateUserName
-        }, null, 8, ["given-room-id", "user-name"])) : (openBlock(), createElementBlock("div", _hoisted_4, [
-          withDirectives(createVNode(Logo, { class: "logo" }, null, 512), [
-            [vShow, props.isShowLogo]
-          ]),
-          createElementVNode("div", _hoisted_5, [
-            createVNode(RoomHomeControl, {
-              ref_key: "roomControlRef",
-              ref: roomControlRef,
-              "given-room-id": props.roomId,
-              "user-name": props.userInfo.userName,
-              "enable-scheduled-conference": props.enableScheduledConference,
-              onCreateRoom: handleCreateRoom,
-              onEnterRoom: handleEnterRoom,
-              onUpdateUserName: handleUpdateUserName
-            }, null, 8, ["given-room-id", "user-name", "enable-scheduled-conference"]),
-            createVNode(ScheduleRoomList, {
-              "is-show-scheduled-conference": props.enableScheduledConference,
-              onJoinConference: handleEnterRoom
-            }, null, 8, ["is-show-scheduled-conference"])
-          ])
-        ])),
-        createVNode(InvitationNotification, { onJoinConference: handleEnterRoom })
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/lib/components/RoomInvite/InvitationNotification.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "join-conference": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    "onJoin-conference"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;

package/lib/components/RoomInvite/InvitationNotification.vue.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const InvitationNotification_vue_vue_type_script_setup_true_lang = require("./InvitationNotification.vue2.js");
-;/* empty css                             */
-const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const InvitationNotification = /* @__PURE__ */ _pluginVue_exportHelper.default(InvitationNotification_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-381c2f12"]]);
-exports.default = InvitationNotification;

package/lib/components/RoomInvite/InvitationNotification.vue2.js

@@ -1,169 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const Avatar = require("../common/Avatar.vue.js");
-const index = require("../../locales/index.js");
-const EnterRoomIcon = require("../common/icons/EnterRoomIcon.vue.js");
-const SvgIcon = require("../common/base/SvgIcon.vue.js");
-const Button = require("../common/base/Button.vue.js");
-const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
-require("../../services/main.js");
-const roomService = require("../../services/roomService.js");
-require("../../utils/environment.js");
-require("mitt");
-require("../../services/manager/roomActionManager.js");
-require("@tencentcloud/tui-core");
-const _withScopeId = (n) => (Vue.pushScopeId("data-v-381c2f12"), n = n(), Vue.popScopeId(), n);
-const _hoisted_1 = {
-  key: 0,
-  class: "invitation-notification-container"
-};
-const _hoisted_2 = { class: "invitation-notification-inviter-container" };
-const _hoisted_3 = { class: "invitation-notification-inviter" };
-const _hoisted_4 = { class: "invitation-notification-title" };
-const _hoisted_5 = { class: "invitation-notification-room-name" };
-const _hoisted_6 = { class: "invitation-notification-room-info-container" };
-const _hoisted_7 = { class: "invitation-notification-room-text-container" };
-const _hoisted_8 = { class: "invitation-notification-room-text" };
-const _hoisted_9 = { class: "invitation-notification-room-text" };
-const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("i", { class: "invitation-notification-room-text-split" }, null, -1));
-const _hoisted_11 = { class: "invitation-notification-room-text" };
-const _hoisted_12 = { class: "invitation-notification-room-text" };
-const _hoisted_13 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("i", { class: "invitation-notification-bottom-split" }, null, -1));
-const _hoisted_14 = { class: "invitation-notification-bottom-container" };
-const _hoisted_15 = { class: "button-text" };
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "InvitationNotification",
-  emits: ["join-conference"],
-  setup(__props, { emit: __emit }) {
-    const invitationInfo = Vue.ref({
-      userId: "",
-      userName: "",
-      avatarUrl: "",
-      roomName: "",
-      roomMemberCount: 0,
-      roomOwner: "",
-      roomId: ""
-    });
-    const { t } = index.useI18n();
-    const showInvitation = Vue.ref(false);
-    const emits = __emit;
-    const onReceiveInvitation = (data) => {
-      const { roomInfo, invitation } = data;
-      invitationInfo.value.userId = invitation.inviter.userId;
-      invitationInfo.value.userName = invitation.inviter.userName;
-      invitationInfo.value.avatarUrl = invitation.inviter.avatarUrl;
-      invitationInfo.value.roomName = roomInfo.roomName;
-      invitationInfo.value.roomMemberCount = roomInfo.roomMemberCount;
-      invitationInfo.value.roomOwner = roomInfo.roomOwner;
-      invitationInfo.value.roomId = roomInfo.roomId;
-      setInvitationDisplay(true);
-    };
-    const handleEnterRoom = () => {
-      const { roomId } = invitationInfo.value;
-      roomService.roomService.conferenceInvitationManager.accept({ roomId });
-      setInvitationDisplay(false);
-      emits("join-conference", {
-        roomId,
-        roomParam: {
-          isOpenCamera: false,
-          isOpenMicrophone: true
-        }
-      });
-    };
-    const handleRejectInvitation = () => {
-      const { roomId } = invitationInfo.value;
-      roomService.roomService.conferenceInvitationManager.reject({
-        roomId,
-        reason: TUIRoomEngine.TUIInvitationRejectedReason.kRejectToEnter
-      });
-      setInvitationDisplay(false);
-    };
-    const onInvitationTimeout = () => {
-      setInvitationDisplay(false);
-    };
-    const onInvitationHandledByOtherDevice = () => {
-      setInvitationDisplay(false);
-    };
-    const setInvitationDisplay = (options) => {
-      showInvitation.value = options;
-    };
-    Vue.onMounted(() => {
-      roomService.roomService.conferenceInvitationManager.on(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-        onReceiveInvitation
-      );
-      roomService.roomService.conferenceInvitationManager.on(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-        onInvitationTimeout
-      );
-      roomService.roomService.conferenceInvitationManager.on(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-        onInvitationHandledByOtherDevice
-      );
-    });
-    Vue.onUnmounted(() => {
-      roomService.roomService.conferenceInvitationManager.off(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-        onReceiveInvitation
-      );
-      roomService.roomService.conferenceInvitationManager.off(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-        onInvitationTimeout
-      );
-      roomService.roomService.conferenceInvitationManager.off(
-        TUIRoomEngine.TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-        onInvitationHandledByOtherDevice
-      );
-    });
-    return (_ctx, _cache) => {
-      return showInvitation.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createElementVNode("div", _hoisted_2, [
-          Vue.createElementVNode("div", _hoisted_3, [
-            Vue.createVNode(Avatar.default, {
-              class: "avatar",
-              "img-src": invitationInfo.value.avatarUrl
-            }, null, 8, ["img-src"]),
-            Vue.createElementVNode("span", _hoisted_4, Vue.toDisplayString(Vue.unref(t)("sb invites you to join the conference", {
-              name: invitationInfo.value.userName || invitationInfo.value.userId
-            })), 1)
-          ]),
-          Vue.createElementVNode("span", _hoisted_5, Vue.toDisplayString(invitationInfo.value.roomName), 1),
-          Vue.createElementVNode("div", _hoisted_6, [
-            Vue.createElementVNode("div", _hoisted_7, [
-              Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(Vue.unref(t)("Host")) + ": ", 1),
-              Vue.createElementVNode("span", _hoisted_9, Vue.toDisplayString(invitationInfo.value.roomOwner), 1)
-            ]),
-            _hoisted_10,
-            Vue.createElementVNode("div", null, [
-              Vue.createElementVNode("span", _hoisted_11, Vue.toDisplayString(Vue.unref(t)("Attendees")) + ": ", 1),
-              Vue.createElementVNode("span", _hoisted_12, Vue.toDisplayString(`${invitationInfo.value.roomMemberCount} ${Vue.unref(t)("people")}`), 1)
-            ])
-          ])
-        ]),
-        _hoisted_13,
-        Vue.createElementVNode("div", _hoisted_14, [
-          Vue.createElementVNode("span", {
-            class: "invitation-notification-bottom",
-            onClick: handleRejectInvitation
-          }, Vue.toDisplayString(Vue.unref(t)("Not joining for now")), 1),
-          Vue.createVNode(Button.default, {
-            class: "button-item",
-            style: { "width": "110px" },
-            onClick: handleEnterRoom
-          }, {
-            default: Vue.withCtx(() => [
-              Vue.createVNode(SvgIcon.default, {
-                class: "icon",
-                icon: EnterRoomIcon.default
-              }),
-              Vue.createElementVNode("span", _hoisted_15, Vue.toDisplayString(Vue.unref(t)("Enter Now")), 1)
-            ]),
-            _: 1
-          })
-        ])
-      ])) : Vue.createCommentVNode("", true);
-    };
-  }
-});
-exports.default = _sfc_main;

package/lib/preConference.vue2.js

@@ -1,163 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const index = require("./components/RoomHeader/UserInfo/index.vue.js");
-const index$1 = require("./components/RoomHome/RoomControl/index.vue.js");
-const Language_vue_vue_type_script_setup_true_lang = require("./components/common/Language.vue.js");
-const SwitchTheme_vue_vue_type_script_setup_true_lang = require("./components/common/SwitchTheme.vue.js");
-require("./services/main.js");
-const roomService = require("./services/roomService.js");
-const types = require("./services/types.js");
-require("./locales/index.js");
-require("@tencentcloud/tuiroom-engine-electron");
-const environment = require("./utils/environment.js");
-require("mitt");
-require("./services/manager/roomActionManager.js");
-require("@tencentcloud/tui-core");
-const ScheduleRoomList = require("./components/ScheduleConference/ScheduleRoomList.vue.js");
-const Logo = require("./components/common/Logo.vue.js");
-const index$2 = require("./components/common/base/MessageBox/index.js");
-const Message = require("./components/common/base/Message/Message.js");
-const InvitationNotification = require("./components/RoomInvite/InvitationNotification.vue.js");
-const _hoisted_1 = { class: "header" };
-const _hoisted_2 = { class: "left-header" };
-const _hoisted_3 = { class: "right-header" };
-const _hoisted_4 = {
-  key: 1,
-  class: "pre-home-control"
-};
-const _hoisted_5 = { class: "pre-home-control-container" };
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "preConference",
-  props: {
-    userInfo: { default: () => ({
-      userId: "",
-      userName: "",
-      avatarUrl: ""
-    }) },
-    showEditNameInPc: { type: Boolean, default: false },
-    roomId: { default: "" },
-    enableScheduledConference: { type: Boolean, default: true },
-    isShowLogo: { type: Boolean, default: true },
-    isShowHeaderInfo: { type: Boolean, default: true }
-  },
-  emits: [
-    "on-create-room",
-    "on-enter-room",
-    "on-update-user-name",
-    "on-logout"
-  ],
-  setup(__props, { emit: __emit }) {
-    const roomControlRef = Vue.ref();
-    const props = __props;
-    const emits = __emit;
-    const tuiRoomThemeClass = Vue.computed(
-      () => `tui-theme-${roomService.roomService.basicStore.defaultTheme}`
-    );
-    async function handleCreateRoom(roomOption) {
-      emits("on-create-room", roomOption);
-    }
-    async function handleEnterRoom(roomOption) {
-      emits("on-enter-room", roomOption);
-    }
-    function handleUpdateUserName(userName) {
-      emits("on-update-user-name", userName);
-    }
-    async function handleLogOut() {
-      emits("on-logout");
-    }
-    const showMessageBox = (data) => {
-      const {
-        message,
-        title = roomService.roomService.t("Note"),
-        duration,
-        cancelButtonText,
-        confirmButtonText = roomService.roomService.t("Sure"),
-        callback = () => {
-        }
-      } = data;
-      index$2.default({
-        title,
-        message,
-        duration,
-        cancelButtonText,
-        confirmButtonText,
-        callback
-      });
-    };
-    const showMessage = (data) => {
-      const { type, message, duration } = data;
-      Message.default({
-        type,
-        message,
-        duration
-      });
-    };
-    Vue.onMounted(() => {
-      roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
-      roomService.roomService.on(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
-    });
-    Vue.onUnmounted(() => {
-      roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE, showMessage);
-      roomService.roomService.off(types.EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
-    });
-    return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", {
-        id: "pre-conference-container",
-        class: Vue.normalizeClass(["pre-conference-container", tuiRoomThemeClass.value])
-      }, [
-        Vue.withDirectives(Vue.createElementVNode("div", _hoisted_1, [
-          Vue.createElementVNode("div", _hoisted_2, [
-            Vue.createVNode(SwitchTheme_vue_vue_type_script_setup_true_lang.default, { class: "header-item" })
-          ]),
-          Vue.createElementVNode("div", _hoisted_3, [
-            Vue.createVNode(Language_vue_vue_type_script_setup_true_lang.default, { class: "header-item language" }),
-            Vue.createVNode(index.default, {
-              class: "header-item user-info",
-              "user-id": props.userInfo.userId,
-              "user-name": props.userInfo.userName,
-              "avatar-url": props.userInfo.avatarUrl,
-              "is-show-edit-name": props.showEditNameInPc,
-              onUpdateUserName: handleUpdateUserName,
-              onLogOut: handleLogOut
-            }, null, 8, ["user-id", "user-name", "avatar-url", "is-show-edit-name"])
-          ])
-        ], 512), [
-          [Vue.vShow, props.isShowHeaderInfo]
-        ]),
-        Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createBlock(index$1.default, {
-          key: 0,
-          ref_key: "roomControlRef",
-          ref: roomControlRef,
-          "given-room-id": props.roomId,
-          "user-name": props.userInfo.userName,
-          onCreateRoom: handleCreateRoom,
-          onEnterRoom: handleEnterRoom,
-          onUpdateUserName: handleUpdateUserName
-        }, null, 8, ["given-room-id", "user-name"])) : (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
-          Vue.withDirectives(Vue.createVNode(Logo.default, { class: "logo" }, null, 512), [
-            [Vue.vShow, props.isShowLogo]
-          ]),
-          Vue.createElementVNode("div", _hoisted_5, [
-            Vue.createVNode(index$1.default, {
-              ref_key: "roomControlRef",
-              ref: roomControlRef,
-              "given-room-id": props.roomId,
-              "user-name": props.userInfo.userName,
-              "enable-scheduled-conference": props.enableScheduledConference,
-              onCreateRoom: handleCreateRoom,
-              onEnterRoom: handleEnterRoom,
-              onUpdateUserName: handleUpdateUserName
-            }, null, 8, ["given-room-id", "user-name", "enable-scheduled-conference"]),
-            Vue.createVNode(ScheduleRoomList.default, {
-              "is-show-scheduled-conference": props.enableScheduledConference,
-              onJoinConference: handleEnterRoom
-            }, null, 8, ["is-show-scheduled-conference"])
-          ])
-        ])),
-        Vue.createVNode(InvitationNotification.default, { onJoinConference: handleEnterRoom })
-      ], 2);
-    };
-  }
-});
-exports.default = _sfc_main;

package/src/TUIRoom/assets/style/black-theme.scss

@@ -1,164 +0,0 @@
-.tui-theme-black {
-  --background-color-1: #0F1014;
-  --background-color-2: #22262E;
-  --background-color-3: #4F586B;
-  --background-color-4: #D5E0F2;
-  --background-color-5: transparent;
-  --background-color-6: #373942;
-  --background-color-7: #2E323D;
-  --background-color-8: #22262E;
-  --background-color-9: #2E323D;
-  --background-color-10: #2B2F38;
-  --background-color-11: #2B303A;
-  --background-color-12: #4F586B;
-  --background-color-13: #F9FAFD;
-  --hover-background-colo-1: rgba(213, 224, 242, 0.5);
-  --font-color-1: #D5E0F2;
-  --font-color-2: #6B758A;
-  --font-color-3: #B3B8C8;
-  --font-color-4: #4F586B;
-  --font-color-5: #7C85A6;
-  --font-color-6: #CFD5E6;
-  --font-color-7: #FFF;
-  --font-color-8: #8F9AB2;
-  --font-color-9: #969EB4;
-  --font-color-10: #FF643D;
-  --title-color: #000;
-  --stroke-color: rgba(79, 88, 107, 0.30);
-  --stroke-color-2: #434956;
-  --border-color: #2E323D;
-  --border-color-2: #E4E8EE;
-  --disable-color: #2B2F38;
-  --active-color-1: #1C66E5;
-  --active-color-2: #4791FF;
-  --green-color: #27C39F;
-  --orange-color: #F06C4B;
-  --white-color: #FFF;
-  --black-color: #000;
-  --red-color: #ED414D;
-  --red-color-2: #F23C5B;
-  --red-color-3: #E5395C;
-  --color-font: #D5E0F2;
-  --control-content: rgba(27, 30, 38, 0.9);
-  --background-image-color: rgba(61,119,255,0.53);
-  --input-color: rgba(27,30,38,0.90);
-  --create-room-mode-color-bg:#1D2437;
-  --user-control-container-color-bg: rgba(46,50,61,0.60);
-  --user-control-container-shadow: none;
-  --stream-container-flatten-bg-color: #0D0F15;
-  --room-header-bg-color: #1D2029;
-  --room-footer-bg-color: #1D2029;
-  --room-network-bg-color: #1D2029;
-  --room-audiotab-bg-color: #1D2029;
-  --room-videotab-bg-color: #1D2029;
-  --stop-share-region-bg-color: #1D2029;
-  --setting-dialog-bg-color: #1D2029;
-  --icon-arrow-hover: rgba(46,50,61,0.70);
-  --el-dialog-bg-color: #1D2029;
-  --tabs-title-font-color: #7C85A6;
-  --center-user-info-container-bg-color: #0D0F15;
-  --stream-info-bg-color: #0D0F15;
-  --el-dialog-bg-color-select: #1D2029;
-  --el-text-color-primary-select: #CFD4E6;
-  --el-text-color-regular-select: #7C85A6;
-  --el-fill-color-blank-select: #2E323D;
-  --el-border-color-select: #2E323D;
-  --setting-name-color: #CFD4E6;
-  --el-drawer-header-color: #CFD4E6;
-  --user-extra-info-bg-color: #4D70FF;
-  --user-extra-info-color: #2E323D;
-  --check-select-color: #FFF;
-  --member-item-container-hover-bg-color: rgba(46,50,61,0.70);
-  --el-bg-color-select: #1D2029;
-  --el-bg-color-overlay-select: #1D2029;
-  --el-border-color-light-select: #2E323D;
-  --el-fill-color-light-select: #2E323D;
-  --input-bg-color: #2E323D;
-  --input-font-color: #CFD5E6;
-  --input-border-color: #2E323D;
-  --invite-title-color: #CFD4E6;
-  --chat-editor-bg-color: #2E323D;
-  --chat-editor-input-color:#292D38;
-  --message-list-color: #1D2029;
-  --textarea-color: #fff;
-  --send-btn-color: #3D4352;
-  --message-color: #3D4352;
-  --background-color-style: #010101;
-  --stream-container-border: #1B1E26;
-  --apply-list-container-bg-color: #1D2029;
-  --apply-list-container-color: #CFD4E6;
-  --room-sidebar-bg-color: #1D2029;
-  --create-room-option: rgba(50,59,84,0.60);
-  --create-room-option-color: #EEE;
-  --create-room-option-tab: #006EFF;
-  --create-room-option-icon: #EEE;
-  --create-room-option-icon-color:#EEE;
-  --control-region-bg-color: rgba(13,16,21,0.60);
-  --dialog-tabs-bg-color: rgba(0,0,0,0.20);
-  --divide-line-color: #2E323D;
-  --divice-line: #CFD4E6;
-  --el-drawer-divide: #0D0F15;
-  --send-btn: #CFD4E6;
-  --invite-region: #FFF;
-  --layout-list: #1D2029;
-  --layout-item: #2E323D;
-  --stream-list-container: #1D2029;
-  --more-btn-background: rgba(173,182,204,0.10);
-  --user-operate-list: #2E323D;
-  --user-operate-item: #CFD4E6;
-  --active-blur-background-color: rgba(27,93,172,0.85);
-  --divide-line-color-setting: transparent;
-  --el-disabled-background: #606266;
-  --el-disabled-border: #909399;
-  --el-border-lighter: #2E323D;
-  --title-active: #B3B8C8;
-  --mic-bar-color: #2E323D;
-  --more-notice-color: #7C85A6;
-  --setting-dialog: none;
-  --caret-color: #fff;
-  --apply-container-primary: #CFD4E6;
-  --apply-container-outline: #CFD4E6;
-  --el-drawer-body: #1D2029;
-  --input-color-setting: #1D2029;
-  --input-color-setting-hover: #2E323D;
-  --switch-core-bg: #2E323D;
-  --input-color-font: #CFD4E6;
-  --input-color-setting-border: #2E323D;
-  --el-message-box: #1D2029;
-  --el-message-box-title: #CFD4E6;
-  --el-button-text-color: #7C85A6;
-  --selected-screen-share-dialog: #006EFF;
-
-  /* H5 New Content */
-  --log-out-mobile: rgba(0, 0, 0, 0.7);
-  --log-out: #2C2C2E;
-  --log-out-cancel: #2C2C2E;
-  --room-detail: #292D38;
-  --room-detail-background: black;
-  --room-detail-title: white;
-  --choose-type: #4F515A;
-  --emoji-background-color:#2f313b;
-  --chat-editor-input-color-h5:#292D38;
-  --chat-editor-bg-color-h5: #0D1015;
-  --message-list-color-h5: #1B1E26;
-  --popup-mute-background-color-h5: #FFF;
-  --mute-button-color-h5: #CFD5E6;
-  --member-control-background-color-h5: #1B1E26;
-  --member-border-color-h5:rgba(207, 212, 230, 0.1);
-  --member-title-content-h5: #CFD5E6;
-  --end-control-text-h5: #292D38;
-  --end-control-title-h5: #CACACB;
-  --end-control-cancel-h5: #FFF;
-  --transfer-input-color-h5: #292D38;
-  --popup-background-color-h5: #1B1E26;
-  --popup-title-color-h5: #CFD4E6;
-  --popup-content-color-h5: #7C85A6;
-  --close-cancel-h5: #5a5a5e;
-  --dialog-title-h5: #FFF;
-  --manage-member-button-h5:#292D38;
-  --message-body-h5: #292D38;
-  --user-extra-info-bg-color-h5: #0565FA;
-  --user-extra-info-color-h5: #FFF;
-  --apply-container-background-outline-h5: #292D38;
-  --apply-container-outline-h5: #CFD5E6;
-}