tuikit-atomicx-vue3 0.1.0

package/src/components/LiveScenePanel/MaterialItem.vue

@@ -0,0 +1,331 @@
+<template>
+  <div
+    class="material-item"
+    :class="{ active: activeMediaSource === material, 'show-dropdown': showDropdown }"
+    @click="handleSelectMaterial"
+  >
+    <component class="material-icon" :is="getMaterialIcon(material.type)" />
+    <div class="material-info">
+      <span class="material-name">{{ material.name }}</span>
+    </div>
+    <div class="material-controls">
+      <div class="control-button mirror-control" @click.stop="handleMirrorToggle" :title="t('Mirror')">
+        <svg-icon
+          @click="toggleMirror"
+          :icon="
+            material.layout.mirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable ? CameraMirror : CameraUnMirror
+          "
+        />
+      </div>
+      <div
+        class="control-button more-control"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        :title="t('More')"
+      >
+        <MoreIcon />
+        <div
+          class="dropdown-menu"
+          v-if="showDropdown"
+          @click.stop
+          @mouseenter="handleMouseEnter"
+          @mouseleave="handleMouseLeave"
+        >
+          <div
+            class="dropdown-item"
+            v-for="control in getMaterialControls(material.type)"
+            :key="control.key"
+            @click="handleControlClick(control, material)"
+          >
+            <span class="dropdown-label">{{ control.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from 'vue';
+import { MediaSource } from '../../types';
+import { TRTCMediaSourceType, TRTCVideoMirrorType } from '@tencentcloud/tuiroom-engine-js';
+import { IconEdit, IconSetting, IconDelIcon, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useVideoMixerState } from '../../states/VideoMixerState';
+import SvgIcon from '../../baseComp/SvgIcon.vue';
+import CameraMirror from './icons/CameraMirror.vue';
+import CameraUnMirror from './icons/CameraUnmirror.vue';
+import ImageIcon from './icons/ImageIcon.vue';
+import ScreenIcon from './icons/ScreenIcon.vue';
+import MoreIcon from './icons/MoreIcon.vue';
+import CameraIcon from './icons/CameraIcon.vue';
+
+const { t } = useUIKit();
+
+const props = defineProps<{
+  material: MediaSource;
+}>();
+
+const emits = defineEmits<{
+  cameraSetting: [material: MediaSource];
+  rename: [material: MediaSource];
+}>();
+
+const { updateMediaSource, removeMediaSource, activeMediaSource } = useVideoMixerState();
+
+const showDropdown = ref(false);
+let hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function toggleMirror() {
+  const currentMirror = props.material?.layout.mirror;
+  const newMirror =
+    currentMirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+      ? TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+      : TRTCVideoMirrorType.TRTCVideoMirrorType_Enable;
+  updateMediaSource(props.material, {
+    layout: {
+      mirror: newMirror,
+    },
+  });
+}
+
+// 处理鼠标离开事件
+const handleMouseLeave = () => {
+  // 添加延迟，防止鼠标快速移动时菜单闪烁
+  hideTimeout = setTimeout(() => {
+    showDropdown.value = false;
+  }, 150);
+};
+
+// 处理鼠标进入事件
+const handleMouseEnter = () => {
+  // 清除隐藏定时器
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+    hideTimeout = null;
+  }
+  showDropdown.value = true;
+};
+
+// 处理材料选择
+const handleSelectMaterial = () => {
+  updateMediaSource(props.material, { isSelected: true });
+};
+
+// 处理镜像切换
+const handleMirrorToggle = () => {
+  // 实现镜像切换逻辑
+  console.log('切换镜像:', props.material);
+};
+
+// 获取材料图标
+const getMaterialIcon = (mediaSourceType: TRTCMediaSourceType) => {
+  const iconMap = {
+    [TRTCMediaSourceType.kCamera]: CameraIcon,
+    [TRTCMediaSourceType.kImage]: ImageIcon,
+    [TRTCMediaSourceType.kScreen]: ScreenIcon,
+  };
+  return iconMap[mediaSourceType];
+};
+
+// 获取材料类型名称
+const getMaterialTypeName = (mediaSourceType: TRTCMediaSourceType) => {
+  const typeNames = {
+    [TRTCMediaSourceType.kCamera]: t('Camera'),
+    [TRTCMediaSourceType.kScreen]: t('Screen Share'),
+  };
+  return typeNames[mediaSourceType] || t('Unknown');
+};
+
+// 重命名材料
+const renameMaterial = (material: MediaSource) => {
+  emits('rename', material);
+};
+
+// 获取材料控制选项
+const getMaterialControls = (mediaSourceType: TRTCMediaSourceType) => {
+  const commonControls = [
+    {
+      key: 'rename',
+      label: t('Rename'),
+      icon: IconEdit,
+      onClick: renameMaterial,
+    },
+    {
+      key: 'delete',
+      label: t('Delete'),
+      icon: IconDelIcon,
+      onClick: handleDeleteMaterial,
+      dangerous: true,
+    },
+  ];
+
+  const cameraControls = [
+    {
+      key: 'setting',
+      label: t('Settings'),
+      icon: IconSetting,
+      onClick: handleCameraSetting,
+    },
+    ...commonControls,
+  ];
+
+  const controlsMap = {
+    [TRTCMediaSourceType.kCamera]: cameraControls,
+    [TRTCMediaSourceType.kScreen]: commonControls,
+  };
+
+  return controlsMap[mediaSourceType] || commonControls;
+};
+
+// 处理删除材料
+const handleDeleteMaterial = (material: MediaSource) => {
+  removeMediaSource(material);
+  showDropdown.value = false;
+};
+
+// 摄像头设置
+const handleCameraSetting = (material: MediaSource) => {
+  emits('cameraSetting', material);
+  showDropdown.value = false;
+};
+
+// 处理控制选项点击
+const handleControlClick = (control: any, material: MediaSource) => {
+  control.onClick(material);
+};
+</script>
+
+<style scoped lang="scss">
+.material-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 6px;
+  cursor: pointer;
+  padding: 4px 8px;
+  z-index: 1;
+  // 当显示下拉菜单时，提升层级
+  &.show-dropdown {
+    z-index: 1000;
+  }
+
+  .material-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #d5e0f2;
+    transition: all 0.2s ease;
+    margin-right: 10px;
+  }
+
+  .material-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    height: 20px;
+
+    .material-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #d5e0f2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 20px;
+    }
+  }
+
+  .material-controls {
+    display: flex;
+    align-items: center;
+  }
+
+  .control-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+    color: #d5e0f2;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 8px;
+    padding: 4px;
+    min-width: 100px;
+    background: rgba(45, 50, 62, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px);
+    z-index: 1001;
+    overflow: hidden;
+    animation: fadeInScale 0.15s ease-out;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -6px;
+      right: 12px;
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 6px solid rgba(45, 50, 62, 0.95);
+    }
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    color: #d5e0f2;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    &:hover {
+      background: rgba(209, 217, 236, 0.1);
+    }
+  }
+
+  .dropdown-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .dropdown-label {
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+// 动画
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+</style>

package/src/components/LiveScenePanel/MaterialRenameDialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <TUIDialog
+    :visible="true"
+    :title="t('Rename')"
+    :confirmText="t('保存为新名称')"
+    @confirm="handleRename"
+    @close="closeMaterialRenameDialog"
+    @cancel="closeMaterialRenameDialog"
+    :customClasses="['material-rename-dialog']"
+  >
+    <TUIInput v-model="materialName" />
+  </TUIDialog>
+</template>
+
+<script lang="ts" setup>
+import { TUIDialog, TUIInput, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { MediaSource } from '../../types';
+import { ref } from 'vue';
+
+const { t } = useUIKit();
+
+const props = defineProps<{
+  material: MediaSource;
+}>();
+
+const materialName = ref(props.material.name);
+const emits = defineEmits(['close', 'rename']);
+
+const handleRename = () => {
+  emits('rename', materialName.value);
+};
+
+const closeMaterialRenameDialog = () => {
+  emits('close');
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/LiveScenePanel/i18n/en-US/index.ts

@@ -0,0 +1,47 @@
+export const resource = {
+  // 原有的翻译
+  'Online audience': 'Online audience',
+  'No audience yet': 'No audience yet',
+  Mute: 'Mute',
+  Unmute: 'Unmute',
+  'Kick out': 'Kick out',
+  'Invite to seat': 'Invite to seat',
+  'Cancel invitation': 'Cancel invitation',
+  'Accept invitation': 'Accept invitation',
+  'Reject invitation': 'Reject invitation',
+
+  // LiveScenePanel 相关翻译
+  // CameraSettingDialog
+  Mirror: 'Mirror',
+  Camera: 'Camera',
+  Resolution: 'Resolution',
+  'Update Camera': 'Update Camera',
+  'Add Camera': 'Add Camera',
+
+  // LiveSceneSelect
+  'We support you to add rich sources': 'We support you to add rich sources',
+  Add: 'Add',
+  'Add Screen Share': 'Add Screen Share',
+  'Add Image': 'Add Image',
+
+  // index.vue
+  Screen: 'Screen',
+  Image: 'Image',
+  Video: 'Video',
+  Text: 'Text',
+  'This type of material is not supported yet': 'This type of material is not supported yet',
+
+  // MaterialItem
+  More: 'More',
+  'Screen Share': 'Screen Share',
+  Unknown: 'Unknown',
+  Rename: 'Rename',
+  Delete: 'Delete',
+  Settings: 'Settings',
+
+  // MaterialDialog
+  'Add Material': 'Add Material',
+  'External Devices': 'External Devices',
+  Multimedia: 'Multimedia',
+  'Screen Capture': 'Screen Capture',
+};

package/src/components/LiveScenePanel/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/LiveScenePanel/i18n/zh-CN/index.ts

@@ -0,0 +1,47 @@
+export const resource = {
+  // 原有的翻译
+  'Online audience': '在线观众',
+  'No audience yet': '暂无观众',
+  Mute: '禁言',
+  Unmute: '解除禁言',
+  'Kick out': '踢出麦位',
+  'Invite to seat': '邀请上麦',
+  'Cancel invitation': '取消邀请',
+  'Accept invitation': '同意上麦申请',
+  'Reject invitation': '拒绝上麦申请',
+
+  // LiveScenePanel 相关翻译
+  // CameraSettingDialog
+  Mirror: '镜像',
+  Camera: '摄像头',
+  Resolution: '分辨率',
+  'Update Camera': '更新摄像头',
+  'Add Camera': '添加摄像头',
+
+  // LiveSceneSelect
+  'We support you to add rich sources': '我们支持您添加形式丰富的画面源',
+  Add: '添加',
+  'Add Screen Share': '添加屏幕共享',
+  'Add Image': '添加图片',
+
+  // index.vue
+  Screen: '屏幕',
+  Image: '图片',
+  Video: '视频',
+  Text: '文本',
+  'This type of material is not supported yet': '暂不支持该类型素材',
+
+  // MaterialItem
+  More: '更多',
+  'Screen Share': '屏幕共享',
+  Unknown: '未知',
+  Rename: '重命名',
+  Delete: '删除',
+  Settings: '设置',
+
+  // MaterialDialog
+  'Add Material': '添加素材',
+  'External Devices': '外接设备',
+  Multimedia: '多媒体',
+  'Screen Capture': '画面捕捉',
+};

package/src/components/LiveScenePanel/icons/AddIcon.vue

@@ -0,0 +1,7 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M8 5V11" stroke="currentColor" stroke-width="1.2"/>
+<path d="M5 8L11 8" stroke="currentColor" stroke-width="1.2"/>
+<circle cx="8" cy="8" r="6.4" stroke="currentColor" stroke-width="1.2"/>
+</svg>
+</template>

package/src/components/LiveScenePanel/icons/CameraIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M2.66667 6H5.33333V4.66667H2.66667V6Z" fill="#D1D4DE" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.6667 4.87037L16 3.66667V12.3333L12.6667 11.1296V14H0V2H12.6667V4.87037ZM14.6667 5.56575V10.4342L11.3333 9.23054V12.6667H1.33333V3.33333H11.3333V6.76946L14.6667 5.56575Z"
+      fill="#D1D4DE"
+    />
+  </svg>
+</template>

package/src/components/LiveScenePanel/icons/CameraMirror.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M7.5 1H8.5V15H7.5V1Z" fill="black" fill-opacity="0.9" style="fill: #ffffff; fill-opacity: 0.9" />
+    <path
+      d="M14.7193 12.4367C14.7501 12.6777 14.6031 12.906 14.3709 12.9777C14.2988 13 14.196 13 13.9904 13H10.6499C10.5104 13 10.4407 13 10.3831 12.9862C10.2003 12.9423 10.0576 12.7995 10.0137 12.6167C9.99986 12.5592 9.99986 12.4895 9.99986 12.35V5.0008C9.99986 4.47031 9.99986 4.20506 10.0408 4.11027C10.1766 3.79537 10.5819 3.70757 10.8359 3.93804C10.9123 4.00742 11.0221 4.24889 11.2416 4.73183L14.5821 12.081C14.6672 12.2682 14.7098 12.3618 14.7193 12.4367ZM10.9999 12H13.4469L10.9999 6.61661V12Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+    <path
+      d="M1.62882 12.9777C1.70093 13 1.80374 13 2.00935 13H5.3499C5.48935 13 5.55908 13 5.61662 12.9862C5.79944 12.9423 5.94219 12.7995 5.98608 12.6167C5.9999 12.5592 5.9999 12.4895 5.9999 12.35V5.0008C5.9999 4.47031 5.9999 4.20506 5.95901 4.11027C5.82317 3.79537 5.41786 3.70757 5.16389 3.93804C5.08744 4.00742 4.97768 4.24889 4.75816 4.73183L1.41761 12.081C1.33253 12.2682 1.28999 12.3618 1.28043 12.4367C1.24964 12.6777 1.39664 12.906 1.62882 12.9777ZM4.9999 6.61661V12H2.5529L4.9999 6.61661Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/LiveScenePanel/icons/CameraUnmirror.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.15332 3L14.4715 14.322" stroke="#1A1A1A" style="stroke: #ffffff; stroke-opacity: 1" />
+    <path
+      d="M8.50015 7.65332V15H7.50015V6.65332L8.50015 7.65332ZM6.00015 5.15332V12.3496C6.00015 12.4891 6.00029 12.5596 5.98647 12.6172C5.94249 12.7997 5.79984 12.9424 5.61733 12.9863C5.55979 13.0001 5.48921 13 5.34976 13H2.00991C1.8043 13 1.70116 12.9998 1.62905 12.9775C1.39693 12.9058 1.24964 12.6775 1.28042 12.4365C1.29 12.3617 1.33307 12.2682 1.41811 12.0811L4.75893 4.73145C4.87082 4.48529 4.95373 4.30169 5.0187 4.17188L6.00015 5.15332ZM11.0001 10.1533V12H12.8468L13.8468 13H10.6505C10.5111 13 10.4405 13.0001 10.383 12.9863C10.2005 12.9424 10.0578 12.7997 10.0138 12.6172C10 12.5596 10.0001 12.4891 10.0001 12.3496V9.15332L11.0001 10.1533ZM10.0412 4.11035C10.177 3.79545 10.5821 3.70801 10.8361 3.93848C10.9125 4.00806 11.023 4.24898 11.2423 4.73145L14.5822 12.0811C14.6672 12.2681 14.7103 12.3617 14.7199 12.4365C14.7208 12.4439 14.7193 12.4516 14.7199 12.459L12.7687 10.5078L11.0001 6.61621V8.73926L10.0001 7.73926V5.00098C10.0001 4.47054 10.0003 4.20518 10.0412 4.11035ZM2.55288 12H5.00015V6.61621L2.55288 12ZM8.50015 6.23926L7.50015 5.23926V1H8.50015V6.23926Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/LiveScenePanel/icons/ImageIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg t="1752222201352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4934" width="16" height="16">
+    <path
+      d="M509.887896 135.642307c120.842229 0 241.684458-0.038886 362.526687 0.016373 40.700981 0.021489 74.195839 26.924209 82.769099 66.542532 1.329275 6.166443 1.819438 12.627598 1.823532 18.945491 0.093121 185.126324 0.127913 370.247532 0.047072 555.372833-0.020466 48.373731-36.548404 85.290525-84.897575 85.315084-241.300718 0.13917-482.59632 0.135076-723.897038 0-48.357358-0.029676-84.931345-36.953633-84.951811-85.297688-0.076748-185.122231-0.068562-370.246509-0.008186-555.36874 0.017396-49.007157 36.746926-85.518722 85.801155-85.531002 120.264061-0.013303 240.528122 0 360.79116 0l0 0L509.887896 135.642307zM510.517229 191.376679L303.759235 191.376679c-51.355645 0-102.703103 0.037862-154.058748-0.037862-9.831926-0.016373-18.139126 2.981914-24.490787 10.744715-5.233188 6.389524-6.052856 13.873985-6.052856 21.779026 0.059352 183.208649 0.046049 366.413204 0.051165 549.621852 0 2.124384 0.013303 4.247744 0.130983 6.363941 0.485047 8.890484 4.620227 15.791661 11.69025 20.990057 6.241145 4.587482 13.467733 5.207605 20.934798 5.207605 219.883943-0.037862 439.771979-0.029676 659.655921-0.029676 19.882839 0 39.766702-0.030699 59.653635 0.007163 7.379061 0.017396 14.141068-1.731434 19.883863-6.575766 7.876388-6.631024 10.220782-15.364943 10.220782-25.326828-0.071631-183.209672-0.051165-366.413204-0.055259-549.620829 0-22.370497-10.67206-33.123398-32.887015-33.128515L510.521323 191.371562l0 0L510.517229 191.376679zM510.517229 191.376679M753.7346 498.974335c-18.72241 0-37.453007-0.397043-56.167231 0.089028-31.966039 0.837064-59.256592 13.481036-83.756589 33.55421-18.329461 15.019065-36.722366 30.134321-56.298214 43.423999-25.098631 17.041118-52.92642 28.478612-83.245959 32.828686-6.664793 0.957815-13.446243 1.490957-20.178575 1.537006-25.479301 0.177032-50.979068 0.603751-76.44609-0.089028-22.180162-0.599657-42.258453 5.438872-61.283762 16.074094-15.09479 8.429996-28.566616 18.87386-40.413432 31.586392-17.506722 18.780739-35.319413 37.274952-53.28253 55.620785-10.971889 11.20418-28.037567 11.360745-39.111786 0.937348-10.879792-10.242272-12.222369-27.523867-1.744737-38.60525 22.932292-24.26259 45.561685-48.931432 69.972655-71.64883 29.018917-27.004027 63.633273-43.943838 103.526865-48.653093 6.305613-0.743944 12.703323-0.916882 19.064194-0.945535 24.709775-0.101307 49.433876-0.469698 74.131371 0.100284 18.021445 0.418532 34.770921-3.656273 50.958602-10.997472 23.51967-10.663874 45.274136-24.00574 64.312748-41.645492 25.196869-23.350824 52.990888-42.774199 86.667895-51.504024 15.566534-4.03285 31.806403-6.997368 47.824215-7.445576 38.774095-1.081635 77.595262-0.490164 116.40415-0.38374 12.307304 0.033769 21.606087 5.621021 26.539446 17.07898 4.6366 10.751878 2.676969 20.85498-4.975315 29.626761-5.819542 6.67298-13.497409 9.207709-22.261003 9.16473-20.077268-0.101307-40.154535-0.030699-60.231803-0.030699l0 0.334621 0 0L753.7346 498.974335zM753.7346 498.974335M342.600869 303.278281c30.919197 0.030699 56.005548 25.125237 55.917544 55.939033-0.089028 30.800493-25.285896 55.755862-56.216349 55.667857-30.547737-0.089028-55.490825-25.061792-55.638181-55.689347C286.515502 328.441381 311.719534 303.248605 342.600869 303.278281L342.600869 303.278281 342.600869 303.278281zM342.600869 303.278281"
+      fill="#D5E0F2"
+      p-id="4935"
+    />
+  </svg>
+</template>

package/src/components/LiveScenePanel/icons/MoreIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M8 4C8.55225 4 9 3.55228 9 3C9 2.44772 8.55225 2 8 2C7.44775 2 7 2.44772 7 3C7 3.55228 7.44775 4 8 4Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+    <path
+      d="M8 9C8.55225 9 9 8.55228 9 8C9 7.44772 8.55225 7 8 7C7.44775 7 7 7.44772 7 8C7 8.55228 7.44775 9 8 9Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+    <path
+      d="M9 13C9 13.5523 8.55225 14 8 14C7.44775 14 7 13.5523 7 13C7 12.4477 7.44775 12 8 12C8.55225 12 9 12.4477 9 13Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: #ffffff; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/LiveScenePanel/icons/ScreenIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <mask id="path-1-inside-1_973_32142" fill="white">
+      <path
+        d="M4.90384 11.4823C4.95994 11.2019 5.20619 11 5.49218 11H10.5084C10.7944 11 11.0407 11.2019 11.0968 11.4824L11.5233 13.6157C11.5976 13.987 11.3136 14.3333 10.935 14.3333H5.06541C4.68677 14.3333 4.4028 13.9869 4.47707 13.6156L4.90384 11.4823Z"
+      />
+    </mask>
+    <path
+      d="M4.90384 11.4823C4.95994 11.2019 5.20619 11 5.49218 11H10.5084C10.7944 11 11.0407 11.2019 11.0968 11.4824L11.5233 13.6157C11.5976 13.987 11.3136 14.3333 10.935 14.3333H5.06541C4.68677 14.3333 4.4028 13.9869 4.47707 13.6156L4.90384 11.4823Z"
+      fill="url(#paint0_linear_973_32142)"
+    />
+    <path
+      d="M4.47707 13.6156L3.30039 13.3802L4.47707 13.6156ZM11.5233 13.6157L10.3466 13.851L11.5233 13.6157ZM11.0968 11.4824L12.2735 11.2471L11.0968 11.4824ZM4.90384 11.4823L6.08053 11.7177L4.90384 11.4823ZM5.49218 12.2H10.5084V9.8H5.49218V12.2ZM9.92007 11.7176L10.3466 13.851L12.7 13.3804L12.2735 11.2471L9.92007 11.7176ZM10.935 13.1333H5.06541V15.5333H10.935V13.1333ZM5.65376 13.851L6.08053 11.7177L3.72716 11.2469L3.30039 13.3802L5.65376 13.851ZM5.06541 13.1333C5.44405 13.1333 5.72803 13.4797 5.65376 13.851L3.30039 13.3802C3.07756 14.4941 3.9295 15.5333 5.06541 15.5333V13.1333ZM10.3466 13.851C10.2724 13.4797 10.5564 13.1333 10.935 13.1333V15.5333C12.0708 15.5333 12.9228 14.4942 12.7 13.3804L10.3466 13.851ZM10.5084 12.2C10.2224 12.2 9.97615 11.9981 9.92007 11.7176L12.2735 11.2471C12.1052 10.4057 11.3665 9.8 10.5084 9.8V12.2ZM5.49218 9.8C4.63419 9.8 3.89546 10.4056 3.72716 11.2469L6.08053 11.7177C6.02443 11.9981 5.77818 12.2 5.49218 12.2V9.8Z"
+      fill="#D5E0F2"
+      mask="url(#path-1-inside-1_973_32142)"
+    />
+    <path
+      d="M1.93337 2.6V2.6H14.0667V11.4H1.93337L1.93337 2.6Z"
+      fill="url(#paint1_linear_973_32142)"
+      stroke="#D5E0F2"
+      stroke-width="1.2"
+      stroke-linejoin="round"
+    />
+    <path d="M10 6.66699L8.17072 5.14259C8.07182 5.06018 7.92818 5.06018 7.82928 5.14259L6 6.66699" stroke="#D5E0F2" stroke-width="1.2" />
+    <path d="M10 9L8.17072 7.4756C8.07182 7.39319 7.92818 7.39319 7.82928 7.4756L6 9" stroke="#D5E0F2" stroke-width="1.2" />
+    <defs>
+      <linearGradient id="paint0_linear_973_32142" x1="15.0702" y1="17.0606" x2="11.0184" y2="4.26977" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#4F586B" />
+        <stop offset="1" stop-color="#4F586B" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient id="paint1_linear_973_32142" x1="21.3334" y1="20.1818" x2="4.36545" y2="-13.491" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#4F586B" />
+        <stop offset="1" stop-color="#4F586B" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/src/components/LiveScenePanel/index.ts

@@ -0,0 +1,7 @@
+import LiveScenePanel from './index.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export { LiveScenePanel };