@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/components/common/base/Select.vue

@@ -0,0 +1,223 @@
+<template>
+  <div
+    ref="selectContainerRef"
+    v-click-outside="handleClickOutside"
+    :class="['select-container', themeClass]"
+  >
+    <div
+      :class="['select-content', { 'disabled': disabled }]"
+      @click="handleClickSelect"
+    >
+      <span class="select-text">
+        {{ selectedLabel || selectedValue }}
+      </span>
+      <svg-icon
+        :class="['arrow-icon', { 'reverse': showSelectDropdown }]"
+        :icon="ArrowStrokeSelectDownIcon"
+      ></svg-icon>
+    </div>
+    <Transition name="select-fade">
+      <div
+        v-show="showSelectDropdown"
+        ref="selectDropDownRef"
+        :style="dropDownStyle"
+        :class="['select-dropdown-container', dropDirection]"
+      >
+        <slot></slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, computed, reactive, watch } from 'vue';
+import SvgIcon from './SvgIcon.vue';
+import ArrowStrokeSelectDownIcon from '../icons/ArrowStrokeSelectDownIcon.vue';
+import useZIndex from '../../../hooks/useZIndex';
+import vClickOutside from '../../../directives/vClickOutside';
+import { roomService } from '../../../services';
+
+const { nextZIndex } = useZIndex();
+
+interface Props {
+  modelValue: string | number | boolean | object,
+  disabled?: boolean,
+  theme?: 'white' | 'black',
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const showSelectDropdown = ref(false);
+const optionObj = ref(new Map());
+const optionDataList = computed(() => Array.from(optionObj.value.values()));
+const selectedLabel = ref('');
+const selectedValue = ref(props.modelValue);
+const selectContainerRef = ref();
+const selectDropDownRef = ref();
+const dropDirection = ref('down');
+const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+
+watch(() => props.modelValue, (val) => {
+  selectedValue.value = val;
+  if (optionObj.value.get(val)) {
+    selectedLabel.value = optionObj.value.get(props.modelValue).label;
+  }
+});
+
+watch(optionDataList, () => {
+  if (optionObj.value.get(props.modelValue)) {
+    selectedLabel.value = optionObj.value.get(props.modelValue).label;
+  }
+});
+
+const dropDownStyle = ref({});
+
+interface OptionData {
+  label: string,
+  value: string | number | boolean | object,
+}
+
+function onOptionCreated(option: OptionData) {
+  optionObj.value.set(option.value, option);
+}
+
+function onOptionDestroyed(value: string | number | boolean | object) {
+  optionObj.value.delete(value);
+}
+
+function onOptionSelected(option: OptionData) {
+  selectedValue.value = option.value;
+  showSelectDropdown.value = false;
+  emits('update:modelValue', option.value);
+}
+
+watch(selectedValue, (val) => {
+  emits('change', val);
+});
+
+provide('select', reactive({
+  selectedValue,
+  optionObj,
+  optionDataList,
+  onOptionCreated,
+  onOptionDestroyed,
+  onOptionSelected,
+}));
+
+function handleClickSelect() {
+  if (props.disabled) {
+    return;
+  }
+  if (showSelectDropdown.value) {
+    showSelectDropdown.value = false;
+  } else {
+    handleDropDownPosition();
+    dropDownStyle.value = { zIndex: nextZIndex() };
+    showSelectDropdown.value = true;
+  }
+}
+
+// Determine the positioning of the drop-down box based on the page position
+function handleDropDownPosition() {
+  const { top, bottom } = selectContainerRef.value?.getBoundingClientRect();
+  const container = roomService.getRoomContainer();
+  const bottomSize = container instanceof HTMLElement ? container.offsetHeight - bottom : -1;
+  let dropDownContainerHeight = 0;
+  if (!showSelectDropdown.value) {
+    selectDropDownRef.value.style = 'display:block;position:absolute;z-index:-1000';
+    dropDownContainerHeight = selectDropDownRef.value.offsetHeight;
+    selectDropDownRef.value.style = '';
+  } else {
+    dropDownContainerHeight = selectDropDownRef.value?.offsetHeight;
+  }
+  if (bottomSize < top && bottomSize < dropDownContainerHeight) {
+    dropDirection.value = 'up';
+  }
+}
+
+function handleClickOutside() {
+  if (showSelectDropdown.value) {
+    showSelectDropdown.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.select-container {
+  position: relative;
+  .select-content {
+    box-sizing: border-box;
+    position: relative;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color-7);
+    color: var(--font-color-3);
+    border-radius: 8px;
+    height: 42px;
+    padding: 10px 16px;
+    cursor: pointer;
+    display: flex;
+    &.disabled {
+      background-color: rgba(255, 255, 255, 0.50);
+      color: #8F9AB2;
+      cursor: not-allowed;
+    }
+    .select-text {
+      width: 0;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .arrow-icon {
+      margin-left: 10px;
+      transition: transform 0.2s;
+      transform: rotate(0deg);
+      &.reverse {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .select-dropdown-container {
+    min-width: 100%;
+    max-height: 254px;
+    padding: 7px 0px;
+    position: absolute;
+    background-color: var(--background-color-7);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    overflow: auto;
+    &.down {
+      top: calc(100% + 6px);
+      left: 0;
+      transform-origin: 50% 0;
+    }
+    &.up {
+      bottom: calc(100% + 6px);
+      left: 0;
+      transform-origin: 50% 100%;
+    }
+  }
+}
+
+.select-fade-enter-active,
+.select-fade-leave-to {
+  transform: scaleY(0);
+  opacity: 0;
+  transition: all 0.2s ease;
+}
+
+.select-fade-enter-to,
+.select-fade-leave-from {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: all 0.2s ease;
+}
+</style>

package/src/TUIRoom/components/common/base/SvgIcon.vue

@@ -0,0 +1,45 @@
+<!--
+  * Name：SvgIcon
+  * @param name String required
+  * @param size String | number
+  * Usage:
+  * Use <svg-icon><chat-icon></chat-icon></svg-icon> in template
+-->
+<template>
+  <span class="svg-icon" :class="[customClass]" :style="customStyle" @click="handleClick">
+    <component :is="icon" v-if="icon"></component>
+    <slot></slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { addSuffix } from '../../../utils/utils';
+
+interface Props {
+  size?: string | number,
+  responseSize?: string | number,
+  customClass?: string,
+  icon?: Component,
+  color?: string,
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['click']);
+
+const customStyle = computed(() => (props.size ? `width: ${addSuffix(props.size)};height: ${addSuffix(props.size)};` : ''));
+
+function handleClick(event: Event) {
+  emit('click', event);
+}
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/TUIRoom/components/common/base/TuiSwitch.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :class="[props.modelValue ? 'switch-container' : 'switch-container-active']" @click="toggleSwitch">
+    <div class="switch-core"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  modelValue: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(['update:modelValue']);
+
+function toggleSwitch() {
+  emit('update:modelValue', !props.modelValue);
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-container,
+.switch-container-active {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: var(--active-color-1);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  .switch-core {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: 40%;
+    height: 80%;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s !important;
+    transform: translateX(20px);
+  }
+}
+
+.switch-container-active {
+  background-color: var(--background-color-6);
+  .switch-core {
+    transform: translateX(0);
+  }
+}
+</style>

package/src/TUIRoom/components/common/base/index.ts

@@ -0,0 +1,32 @@
+
+import TuiDialog from './Dialog/index.vue';
+import TuiMessage from './Message/index';
+import TuiMessageBox from './MessageBox';
+import TuiNotification from './Notification';
+import TuiBadge from './Badge.vue';
+import TuiButton from './Button.vue';
+import TuiDrawer from './Drawer.vue';
+import IconButton from './IconButton.vue';
+import TuiInput from './Input.vue';
+import TuiOption from './Option.vue';
+import TuiSelect from './Select.vue';
+import SvgIcon from './SvgIcon.vue';
+import TuiSwitch from './TuiSwitch.vue';
+import TuiCheckbox from './Checkbox.vue';
+
+export {
+  TuiDialog,
+  TuiMessage,
+  TuiMessageBox,
+  TuiNotification,
+  TuiBadge,
+  TuiButton,
+  TuiDrawer,
+  IconButton,
+  TuiInput,
+  TuiOption,
+  TuiSelect,
+  SvgIcon,
+  TuiSwitch,
+  TuiCheckbox,
+};

package/src/TUIRoom/components/common/icons/ApplyActiveIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
+    <g fill="none" fill-rule="evenodd">
+      <path d="M4,0 L28,0 C30.209139,-4.05812251e-16 32,1.790861 32,4 L32,28 C32,30.209139 30.209139,32 28,32 L7.95884232,32 L7.95884232,32 L4,32 C1.790861,32 2.705415e-16,30.209139 0,28 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" fill="#006EFF"/>
+      <path d="M26.4999959,10.0780055 C26.5007896,9.75418111 26.3722732,9.449585 26.1381666,9.22011315 C25.9041744,8.99067857 25.5926299,8.86409269 25.2609821,8.86372005 C24.5805967,8.86368279 24.0244552,9.40285591 24.0191147,10.0659692 C24.0158722,10.26876 24.0087006,12.6630851 24.0044282,14.0955514 C24.0030168,14.5672021 24.0019868,14.9161424 24.0016053,15.0117619 C24.0010331,15.1749038 23.8650018,15.3074519 23.6983387,15.3074519 C23.5301878,15.3069675 23.3945761,15.1736368 23.3950339,15.0102341 C23.4007177,12.9807982 23.4107885,9.87618351 23.4180745,7.6093013 L23.4206685,6.80093289 C23.4219273,6.47669864 23.2936017,6.17146904 23.0594569,5.94166182 C22.8253503,5.7118546 22.513577,5.5850824 22.181624,5.58467249 L22.1482074,5.58463523 C21.4652662,5.58463523 20.9087814,6.12630505 20.9062637,6.79213858 C20.9004654,8.2527019 20.8869996,12.4735231 20.8819642,14.0624609 L20.8816209,14.1657941 C20.881125,14.3286006 20.7451318,14.4610742 20.5784305,14.4610742 C20.4102797,14.4605897 20.274668,14.3273709 20.2750876,14.1640799 C20.2784827,12.7686914 20.2843954,11.0672162 20.2900793,9.42174877 C20.2940084,8.28527065 20.2978231,7.1764797 20.3006841,6.21588775 C20.3018285,5.89180256 20.1734647,5.58668475 19.9393962,5.3569148 C19.7052515,5.12714484 19.3935544,5.0004099 19.0616777,5 L19.0205936,5 C18.6883736,5 18.3771343,5.12569154 18.1429895,5.35393367 C17.908387,5.58254845 17.7790314,5.88669739 17.7786499,6.21037268 L17.7690751,14.1549502 C17.7688844,14.3181294 17.6328531,14.4508638 17.4658084,14.4508638 C17.3844796,14.4507893 17.3083768,14.4198974 17.2511567,14.3638523 C17.1939747,14.3078445 17.1625036,14.2334283 17.1626181,14.1542795 L17.1704,7.63605687 C17.1707433,7.31234432 17.0420362,7.00789726 16.8080441,6.7787608 C16.5740519,6.54962433 16.2626981,6.42322477 15.9313555,6.42285213 L15.9045765,6.42281486 C15.2199949,6.4227776 14.6638153,6.96575165 14.6630905,7.63326207 L14.6505021,18.2407266 C14.6503114,18.3729021 14.5592551,18.4900974 14.4289458,18.5257218 C14.4021668,18.5330256 14.3747011,18.5367147 14.3471973,18.5367147 C14.242103,18.5367147 14.1428452,18.4821975 14.088219,18.3944034 L11.1875784,13.7378913 C10.9224585,13.3122617 10.4598529,13.058121 9.95009788,13.0580838 C9.73830713,13.0580838 9.53296318,13.1025025 9.33982619,13.1901475 C9.18369155,13.2610236 9.04392186,13.3559351 8.92456068,13.4723106 C8.75579947,13.636794 8.63014408,13.8440192 8.56113661,14.0715534 C8.44139397,14.4664029 8.49872853,14.8760463 8.72264994,15.2249866 L8.96465292,15.6022848 C10.1676869,17.4775222 11.1440911,19.5839828 11.8667813,21.8631248 C12.3281662,23.3184712 13.2733663,24.6260284 14.5281655,25.5449219 C15.8254983,26.4949682 17.370823,26.9981443 18.9970952,27 L19.0060597,27 C20.9985407,27 22.8727286,26.2428771 24.2833191,24.8681701 C25.7002801,23.4853768 26.4784737,21.6509808 26.4781686,19.6993522 L26.4777489,17.3388255 L26.4999959,10.0780055 Z" fill="#FFF" transform="matrix(-1 0 0 1 34.999992 0)"/>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyLittleIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 32 32" class="design-iconfont">
+    <defs>
+      <path id="t3ru7xlifa" d="M0 0L20 0 20 24 0 24z"/>
+    </defs>
+    <g transform="translate(7.5 4)" fill="none" fill-rule="evenodd">
+      <mask id="5ue0x9043b" fill="#fff">
+        <use xlink:href="#t3ru7xlifa"/>
+      </mask>
+      <path d="M2.0462767,6.22817971 C2.0462767,6.10483933 2.09492364,5.98965368 2.18290215,5.90300961 C2.27191571,5.81636554 2.38887538,5.76845646 2.51411538,5.76845646 C2.76977058,5.76845646 2.97884893,5.97334421 2.98091901,6.22614103 L2.99230447,11.0343773 C2.99230447,11.3034836 3.09891372,11.5572998 3.29143141,11.7448587 C3.48498414,11.9354757 3.74167439,12.0404679 4.01389025,12.0404679 L4.01699538,12.0404679 C4.58005786,12.0394485 5.03858117,11.5868607 5.03858117,11.0313193 L5.02305555,3.04171657 C5.02305555,2.91837619 5.07170249,2.8021712 5.15864596,2.71552713 C5.24765951,2.62888306 5.36461918,2.58097398 5.52194546,2.58097398 C5.77863571,2.58097398 5.9887491,2.78688107 5.98978414,3.03967789 L6.00427472,10.2158457 C6.00530976,10.4839326 6.11295406,10.7357101 6.3044367,10.9253077 C6.50005951,11.116944 6.7526096,11.2637293 7.03000067,11.2198976 C7.59409819,11.2188782 8.0526215,10.7662904 8.05055142,10.210749 L8.0350258,2.47496241 C8.0350258,2.35264137 8.08367274,2.23643638 8.17165125,2.14979231 C8.32690745,1.99689101 8.66640101,1.94796259 8.87237423,2.14979231 C8.96035274,2.23643638 9.01003473,2.35264137 9.01003473,2.47496241 L9.01003473,10.2056523 C9.01003473,10.7611936 9.46855803,11.2137815 10.0326556,11.2137815 C10.5967531,11.2137815 11.0552764,10.7611936 11.0552764,10.2056523 L11.0552764,3.86330624 C11.0552764,3.73996585 11.1039233,3.6247802 11.1919018,3.53813613 C11.2809154,3.45047272 11.3978751,3.40358299 11.5489911,3.40358299 C11.8056813,3.40358299 12.0147597,3.60949007 12.0147597,3.86330624 L12.0147597,14.2014729 C12.0354605,14.6846411 12.3304473,15.0516042 12.7827604,15.1586351 C13.2381785,15.268724 13.701877,15.0770877 13.9109554,14.7101246 L16.7169524,10.1822074 C16.8939445,9.89577228 17.2593141,9.78772203 17.5677564,9.92839122 C17.7468185,10.0109579 17.8710235,10.1526465 17.9269157,10.3391861 C17.9817729,10.5216483 17.9547569,10.7122652 17.8523928,10.8743406 L17.6184734,11.2413037 C16.4209306,13.116893 15.4490268,15.2228536 14.7307081,17.5000637 C14.328077,18.7722025 13.5062542,19.9148849 12.4173908,20.7181264 C11.2912658,21.5468515 9.94985225,21.9861879 8.53909092,21.9861879 C6.80953687,21.9861879 5.18038183,21.3215769 3.95282282,20.1126373 C2.72733389,18.904717 2.05559207,17.3002727 2.05662711,15.5928748 L2.05973223,13.2962972 L2.0462767,6.22817971 Z M19.8893541,9.76937387 C19.6699253,9.03340893 19.1399842,8.42588109 18.4320159,8.10173033 C17.1785809,7.52580209 15.6912265,7.96921587 14.9687676,9.13330445 L14.0600013,10.5991183 L14.0600013,3.86330624 C14.0600013,2.49840728 12.9338764,1.38732448 11.521045,1.38732448 C11.2891957,1.38732448 11.0625217,1.41790474 10.8430929,1.47906526 C10.7178529,1.19874621 10.5408608,0.941872022 10.318327,0.724752172 C9.84324299,0.256874188 9.21290283,0 8.50182944,0 C7.83008762,0 7.19871241,0.25789353 6.72466348,0.726790857 C6.6925772,0.757371117 6.662561,0.788970719 6.63357985,0.820570322 C5.72688365,0.380214571 4.47965885,0.534135216 3.70958811,1.29252567 C3.23553918,1.76040366 2.97470877,2.38322163 2.97677885,3.04579394 L2.97781389,3.79501032 C2.1715167,3.64720573 1.32174777,3.90102189 0.735914381,4.47898881 C0.260830414,4.94584746 0,5.56866543 0,6.23021839 L0.0134555372,13.2962972 L0.0103504132,15.5908361 C0.00828033059,17.8364466 0.894275704,19.9485232 2.50894017,21.5397161 C4.11946447,23.1268316 6.26096497,24.0004077 8.53909092,24.0004077 C10.39492,24.0004077 12.1596655,23.4234602 13.6428797,22.3317449 C15.0753769,21.2767259 16.15596,19.7731964 16.6848661,18.0994368 C17.3493627,15.9904182 18.2467435,14.0444943 19.3500976,12.3146709 L19.5840169,11.9466884 C19.9990685,11.2983869 20.1098179,10.5033001 19.8893541,9.76937387 L19.8893541,9.76937387 Z" fill="#ADB6CC" mask="url(#5ue0x9043b)"/>
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyManageIcon.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="&#229;&#136;&#151;&#232;&#161;&#168;-list 1">
+      <path
+        id="Vector"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.42383 6.00391H4.42774V4H2.42383V6.00391Z"
+        fill="currentColor"
+      />
+      <path
+        id="Vector_2"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.42383 13.0039H4.42774V11H2.42383V13.0039Z"
+        fill="currentColor"
+      />
+      <path
+        id="Vector_3"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.42383 20.0039H4.42774V18H2.42383V20.0039Z"
+        fill="currentColor"
+      />
+      <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd" d="M7.42383 4H22.4238V6H7.42383V4Z" fill="currentColor" />
+      <path
+        id="Vector_5"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.42383 11H22.4238V13H7.42383V11Z"
+        fill="currentColor"
+      />
+      <path
+        id="Vector_6"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.42383 18H22.4238V20H7.42383V18Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyStageIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group 7805">
+      <g id="Union">
+        <mask id="path-1-inside-1_6891_44097" fill="white">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M21.5 1H12.5V10H21.5V8.99993L24 9.49993V1.49993L21.5 1.99993V1Z"
+          />
+        </mask>
+        <path
+          d="M12.5 1V-0.7H10.8V1H12.5ZM21.5 1H23.2V-0.7H21.5V1ZM12.5 10H10.8V11.7H12.5V10ZM21.5 10V11.7H23.2V10H21.5ZM21.5 8.99993L21.8334 7.33294L19.8 6.92627V8.99993H21.5ZM24 9.49993L23.6666 11.1669L25.7 11.5736V9.49993H24ZM24 1.49993H25.7V-0.573735L23.6666 -0.167055L24 1.49993ZM21.5 1.99993H19.8V4.0736L21.8334 3.66692L21.5 1.99993ZM12.5 2.7H21.5V-0.7H12.5V2.7ZM14.2 10V1H10.8V10H14.2ZM21.5 8.3H12.5V11.7H21.5V8.3ZM19.8 8.99993V10H23.2V8.99993H19.8ZM24.3334 7.83294L21.8334 7.33294L21.1666 10.6669L23.6666 11.1669L24.3334 7.83294ZM22.3 1.49993V9.49993H25.7V1.49993H22.3ZM21.8334 3.66692L24.3334 3.16692L23.6666 -0.167055L21.1666 0.332945L21.8334 3.66692ZM19.8 1V1.99993H23.2V1H19.8Z"
+          fill="currentColor"
+          mask="url(#path-1-inside-1_6891_44097)"
+        />
+      </g>
+      <path
+        id="Union_2"
+        d="M1.17189 10.0338C0.671481 8.58628 1.30494 7.03161 2.53696 6.12122C3.96149 5.06858 5.39589 4 5.39589 4L9.00949 8.24977L6.61893 11.0645C7.25661 12.197 7.93966 13.1284 8.90399 14.0924C9.87331 15.0614 10.8033 15.7279 11.9428 16.3669L14.7487 13.987L19 17.5993L16.8697 20.481C15.9665 21.7027 14.4238 22.324 12.9868 21.8296C10.3305 20.9158 7.83568 19.3991 5.71553 17.2797C3.60144 15.1664 2.08689 12.6807 1.17189 10.0338Z"
+        stroke="currentColor"
+        stroke-width="1.7"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyStageLabelIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Frame">
+      <path
+        id="Vector"
+        d="M27.3065 4H20.2C17.2564 4 14.8701 6.41766 14.8701 9.4C14.8701 11.4544 16.0024 13.2408 17.6692 14.1536C18.8315 14.7901 19.8445 16.0653 19.486 17.341L16.7606 27.041C16.5182 27.9038 15.7314 28.5 14.8352 28.5H7C5.89543 28.5 5 29.3954 5 30.5V36C5 37.1046 5.89543 38 7 38H14.5H16.276H31.724H33.5H41C42.1046 38 43 37.1046 43 36V30.5C43 29.3954 42.1046 28.5 41 28.5H33.1134C32.2417 28.5 31.4704 27.9354 31.2069 27.1044L28.1321 17.4044C27.7233 16.1149 28.7433 14.7788 29.9182 14.1084C31.5406 13.1826 32.6364 11.4209 32.6364 9.4C32.6364 6.41766 30.2501 4 27.3065 4Z"
+        fill="url(#paint0_linear_5456_14610)"
+      />
+      <path
+        id="Vector_2"
+        d="M31.724 38H33.5H41C42.1046 38 43 37.1046 43 36V30.5C43 29.3954 42.1046 28.5 41 28.5H33.1134C32.2417 28.5 31.4704 27.9354 31.2069 27.1044L28.1321 17.4044C27.7233 16.1149 28.7433 14.7788 29.9182 14.1084C31.5406 13.1826 32.6364 11.4209 32.6364 9.4C32.6364 6.41766 30.2501 4 27.3065 4H20.2C17.2564 4 14.8701 6.41766 14.8701 9.4C14.8701 11.4544 16.0024 13.2408 17.6692 14.1536C18.8315 14.7901 19.8445 16.0653 19.486 17.341L16.7606 27.041C16.5182 27.9038 15.7314 28.5 14.8352 28.5H7C5.89543 28.5 5 29.3954 5 30.5V36C5 37.1046 5.89543 38 7 38H14.5H16.276"
+        stroke="#B2BBD1"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <line
+        id="Line 43"
+        x1="8.75"
+        y1="43.25"
+        x2="39.25"
+        y2="43.25"
+        stroke="#B2BBD1"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <linearGradient id="paint0_linear_5456_14610" x1="24" y1="4" x2="24" y2="38" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#D5E0F2" />
+        <stop offset="1" stop-color="#D5E0F2" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyTipsIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Frame">
+      <path
+        id="Vector"
+        d="M17 10H7C6.44772 10 6 10.4477 6 11V18C6 18.5523 6.44772 19 7 19H17C17.5523 19 18 18.5523 18 18V11C18 10.4477 17.5523 10 17 10Z"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_2"
+        d="M9 10V7C9 5.15905 10.3431 4 12 4C12.9246 4 13.7516 4.36098 14.3019 5C14.5444 5.2817 14.7333 5.6174 14.853 6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+      <path id="Vector_3" d="M14.4004 14.3999H9.60039" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+      <path id="Vector_4" d="M3 9V15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+      <path id="Vector_5" d="M21 9V15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeBackIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.4518 10.0005L10.9273 2.77423C11.3679 2.34759 11.3679 1.6571 10.9273 1.23182C10.4867 0.805863 9.77185 0.805863 9.33127 1.23182L1.05846 9.22943C0.618535 9.65539 0.618535 10.3462 1.05846 10.7709L9.33127 18.7681C9.55225 18.9811 9.84106 19.0876 10.1299 19.0876C10.4188 19.0876 10.7076 18.9811 10.9273 18.7674C11.3679 18.3415 11.3679 17.652 10.9273 17.226L3.4518 10.0005Z" fill="currentColor"/>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeLeftIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.78516 0.932617L3.5621 6.00028L7.78516 11.0679L4.43791 11.0679L0.900766 6.82337L0.214854 6.00028L0.900766 5.17718L4.43791 0.932617L7.78516 0.932617Z" fill="currentColor" />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeSelectDownIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.86287 4.735C1.74876 4.61488 1.75363 4.42499 1.87375 4.31087L2.52625 3.691C2.64637 3.57688 2.83626 3.58175 2.95037 3.70188L5.99999 6.91199L9.04942 3.70189C9.16354 3.58177 9.35342 3.5769 9.47355 3.69101L10.1261 4.31087C10.2462 4.42498 10.2511 4.61487 10.1369 4.73499L6.36251 8.70828C6.16539 8.91579 5.83463 8.9158 5.6375 8.70829L1.86287 4.735Z" fill="currentColor" />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeTurnPageIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.667 3L7.54178 10L13.667 17H11.0094L5.46042 10.6585L4.8842 10L5.46042 9.34148L11.0094 3H13.667Z" fill="currentColor"/>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeUpIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="15" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.4707 4V14" stroke="currentColor" stroke-width="1.5" />
+    <path d="M8.4707 3L3.4707 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+    <path d="M13.4707 8L8.4707 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowUpIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.56473 8.20938L5.59313 2.56961C5.79254 2.29044 6.20746 2.29044 6.40687 2.56961L10.4353 8.20938C10.6717 8.54032 10.4351 9 10.0284 9H1.97159C1.56491 9 1.32835 8.54032 1.56473 8.20938Z" fill="currentColor"/>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/AudioCloseIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32448 17.3825C7.93362 17.603 8.57784 17.7502 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C9.36855 16.149 8.7626 16.0549 8.19196 15.88L7.32448 17.3825ZM9.0467 14.3995C9.35288 14.4653 9.67064 14.4999 9.99648 14.4999C12.4818 14.4999 14.4965 12.4852 14.4965 9.99994V5C14.4965 4.98684 14.4964 4.97368 14.4963 4.96055L12.7965 7.90473V9.99994C12.7965 11.5463 11.5429 12.7999 9.99648 12.7999C9.98774 12.7999 9.97901 12.7999 9.97029 12.7998L9.0467 14.3995ZM7.19828 10.1011L6.0293 12.1258C5.68933 11.4927 5.49648 10.7689 5.49648 9.99995V5C5.49648 2.51472 7.5112 0.5 9.99648 0.5C10.8618 0.5 11.6701 0.744232 12.3561 1.16752L11.5054 2.64096C11.0699 2.36184 10.5521 2.2 9.99648 2.2C8.45009 2.2 7.19648 3.4536 7.19648 5V9.99995C7.19648 10.0338 7.19709 10.0675 7.19828 10.1011ZM5.10485 13.727L4.20053 15.2933C2.92473 13.8974 2.14648 12.0391 2.14648 9.99897V9.16564H3.84648V9.99897C3.84648 11.4006 4.31537 12.6927 5.10485 13.727Z" fill="currentColor" />
+  <path d="M5.5 16.7939L14.5 1.20555" stroke="#ED414D" style="stroke:#ED414D;stroke:color(display-p3 0.9292 0.2555 0.3004);stroke-opacity:1;" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/AudioOpenIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7965 5.00098V10.0009C12.7965 11.5473 11.5429 12.8009 9.99648 12.8009C8.45009 12.8009 7.19648 11.5473 7.19648 10.0009V5.00098C7.19648 3.45458 8.45009 2.20098 9.99648 2.20098C11.5429 2.20098 12.7965 3.45458 12.7965 5.00098ZM5.49648 5.00098C5.49648 2.5157 7.5112 0.500977 9.99648 0.500977C12.4818 0.500977 14.4965 2.5157 14.4965 5.00098V10.0009C14.4965 12.4862 12.4818 14.5009 9.99648 14.5009C7.5112 14.5009 5.49648 12.4862 5.49648 10.0009V5.00098ZM2.14648 9.16564V9.99897C2.14648 14.0814 5.26287 17.436 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C6.59993 16.149 3.84648 13.3955 3.84648 9.99897V9.16564H2.14648Z" fill="currentColor" />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CameraOffIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.95377 20H16C16.5523 20 17 19.5523 17 19V16.293L21.3779 18.336C22.0409 18.6454 22.8008 18.1614 22.8008 17.4298V6.5702C22.8008 5.83858 22.0409 5.35462 21.3779 5.66401L17.258 7.58664L15.3 9.9454V18.3H8.36493L6.95377 20ZM13.9504 5.7H2.7V18.3H3.4913L2.08014 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H15.3616L13.9504 5.7ZM17.0008 9.58267L21.1008 7.66933V16.3307L17.0008 14.4173V9.58267Z" fill="currentColor"/>
+  <path d="M4.14339 20.6077L17.5022 4.47709" stroke="#ED414D" style="stroke:#ED414D;stroke:color(display-p3 0.9292 0.2555 0.3004);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 9H8.5" style="stroke:var(--active-color-2);stroke-opacity:1;" stroke-width="1.7"/>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CameraOnIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 4.44772 1.44772 4 2 4H16C16.5523 4 17 4.44772 17 5V7.7288L21.5859 5.6431C22.248 5.34196 22.9999 5.82599 22.9999 6.55338V17.4466C22.9999 18.174 22.248 18.658 21.5859 18.3569L17 16.2712V19C17 19.5523 16.5523 20 16 20H2C1.44772 20 1 19.5523 1 19V5ZM2.7 18.3V5.7H15.3V18.3H2.7ZM17.0043 9.59439L21.2999 7.64074V16.3593L17.0043 14.4056V9.59439Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.50007 9.85H5.00007V8.15H8.50007V9.85Z" style="fill:var(--active-color-2);fill-opacity:1;" />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CameraSwitchIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.96375 2.4375L6.08875 4.3125H2.5V15.5625H17.5V4.3125H13.9113L12.0363 2.4375H7.96375ZM7.1875 0.5625H12.8125L14.6875 2.4375H18.4375C18.6861 2.4375 18.9246 2.53627 19.1004 2.71209C19.2762 2.8879 19.375 3.12636 19.375 3.375V16.5C19.375 16.7486 19.2762 16.9871 19.1004 17.1629C18.9246 17.3387 18.6861 17.4375 18.4375 17.4375H1.5625C1.31386 17.4375 1.0754 17.3387 0.899587 17.1629C0.723772 16.9871 0.625 16.7486 0.625 16.5V3.375C0.625 3.12636 0.723772 2.8879 0.899587 2.71209C1.0754 2.53627 1.31386 2.4375 1.5625 2.4375H5.3125L7.1875 0.5625ZM7.7875 4.80937C8.89197 4.28367 10.1474 4.16773 11.3294 4.48226C12.5115 4.7968 13.5433 5.52132 14.2404 6.52641C14.9375 7.5315 15.2547 8.7517 15.1351 9.96905C15.0156 11.1864 14.4672 12.3216 13.5878 13.1719L11.6406 9.5625H13.2803L13.2812 9.46875C13.2813 8.92145 13.1445 8.38281 12.8833 7.9019C12.622 7.42097 12.2446 7.01304 11.7854 6.71524C11.3262 6.41744 10.7998 6.23923 10.2542 6.19683C9.70852 6.15443 9.16093 6.2492 8.66125 6.4725L7.7875 4.80937ZM12.1722 14.1469C11.0704 14.6596 9.82287 14.7667 8.64979 14.4493C7.47671 14.1319 6.45344 13.4103 5.76056 12.4119C5.06768 11.4135 4.74971 10.2024 4.86276 8.99241C4.9758 7.7824 5.5126 6.65121 6.37844 5.79844L8.35938 9.46875H6.71875C6.71858 10.0125 6.85351 10.5477 7.11143 11.0263C7.36935 11.505 7.74216 11.912 8.19636 12.2109C8.65056 12.5097 9.17191 12.6911 9.71354 12.7385C10.2552 12.786 10.8001 12.6981 11.2994 12.4828L12.1722 14.1459V14.1469Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CancelStageIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group 7805">
+      <g id="Union">
+        <mask id="path-1-inside-1_6891_44097" fill="white">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M21.5 1H12.5V10H21.5V8.99993L24 9.49993V1.49993L21.5 1.99993V1Z"
+          />
+        </mask>
+        <path
+          d="M12.5 1V-0.7H10.8V1H12.5ZM21.5 1H23.2V-0.7H21.5V1ZM12.5 10H10.8V11.7H12.5V10ZM21.5 10V11.7H23.2V10H21.5ZM21.5 8.99993L21.8334 7.33294L19.8 6.92627V8.99993H21.5ZM24 9.49993L23.6666 11.1669L25.7 11.5736V9.49993H24ZM24 1.49993H25.7V-0.573735L23.6666 -0.167055L24 1.49993ZM21.5 1.99993H19.8V4.0736L21.8334 3.66692L21.5 1.99993ZM12.5 2.7H21.5V-0.7H12.5V2.7ZM14.2 10V1H10.8V10H14.2ZM21.5 8.3H12.5V11.7H21.5V8.3ZM19.8 8.99993V10H23.2V8.99993H19.8ZM24.3334 7.83294L21.8334 7.33294L21.1666 10.6669L23.6666 11.1669L24.3334 7.83294ZM22.3 1.49993V9.49993H25.7V1.49993H22.3ZM21.8334 3.66692L24.3334 3.16692L23.6666 -0.167055L21.1666 0.332945L21.8334 3.66692ZM19.8 1V1.99993H23.2V1H19.8Z"
+          fill="currentColor"
+          mask="url(#path-1-inside-1_6891_44097)"
+        />
+      </g>
+      <path
+        id="Union_2"
+        d="M1.17189 10.0338C0.671481 8.58628 1.30494 7.03161 2.53696 6.12122C3.96149 5.06858 5.39589 4 5.39589 4L9.00949 8.24977L6.61893 11.0645C7.25661 12.197 7.93966 13.1284 8.90399 14.0924C9.87331 15.0614 10.8033 15.7279 11.9428 16.3669L14.7487 13.987L19 17.5993L16.8697 20.481C15.9665 21.7027 14.4238 22.324 12.9868 21.8296C10.3305 20.9158 7.83568 19.3991 5.71553 17.2797C3.60144 15.1664 2.08689 12.6807 1.17189 10.0338Z"
+        stroke="currentColor"
+        stroke-width="1.7"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ChatForbiddenIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.76623 16.3482C8.48048 16.4958 9.22891 16.5743 10 16.5743C11.1417 16.5743 12.2343 16.4016 13.2406 16.0884C13.4355 16.0278 13.646 16.0348 13.833 16.1165L16.5019 17.2823C17.2195 17.5957 18.0026 17.0001 17.8922 16.2249L17.5436 13.778C17.5039 13.499 17.5868 13.2184 17.753 12.9908C18.5455 11.9058 19 10.6397 19 9.28717C19 6.85166 17.5246 4.69532 15.258 3.37212L14.4115 4.83818C16.23 5.91439 17.3 7.61009 17.3 9.28717C17.3 10.2456 16.9808 11.1658 16.3802 11.9881C15.986 12.5279 15.7509 13.247 15.8606 14.0177L16.0322 15.222L14.5135 14.5587L14.5135 14.5587C13.9273 14.3026 13.2941 14.2913 12.7353 14.4653C11.8928 14.7275 10.9705 14.8743 10 14.8743C9.53959 14.8743 9.09539 14.8433 8.66906 14.7844L7.76623 16.3482ZM10.7235 3.72608C10.4871 3.70886 10.2459 3.7 10 3.7C5.61517 3.7 2.7 6.51896 2.7 9.28717C2.7 10.8144 3.58726 12.357 5.11905 13.4332L4.26868 14.9061C2.27214 13.5695 1 11.5487 1 9.28717C1 5.26241 5.02911 2 10 2C10.5634 2 11.1148 2.04191 11.6495 2.1221L10.7235 3.72608Z" fill="currentColor" />
+  <path d="M5.0625 17.2842L14.0625 1.69572" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>