feat: 完善

src/hooks/use-push.ts

@@ -58,6 +58,14 @@ export function usePush({
       type: MediaTypeEnum.microphone,
       txt: '麦克风',
     },
+    [MediaTypeEnum.txt]: {
+      type: MediaTypeEnum.txt,
+      txt: '文字',
+    },
+    [MediaTypeEnum.img]: {
+      type: MediaTypeEnum.img,
+      txt: '图片',
+    },
   };
 
   const {
@@ -189,7 +197,7 @@ export function usePush({
     });
     if (el) {
       const res1 = videoElArr.value.find(
-        (item) => item.getAttribute('track-id') === el.track.id
+        (item) => item.getAttribute('track-id') === el.track?.id
       );
       if (res1) {
         // canvas推流的话，不需要再设置预览图了

src/hooks/use-ws.ts

@@ -136,13 +136,13 @@ export const useWs = () => {
       label: '1080P',
       value: 1080,
     },
-    // {
-    //   label: '1440P',
-    //   value: 1440,
-    // },
+    {
+      label: '1440P',
+      value: 1440,
+    },
   ]);
   const currentMaxBitrate = ref(maxBitrate.value[2].value);
-  const currentResolutionRatio = ref(resolutionRatio.value[2].value);
+  const currentResolutionRatio = ref(resolutionRatio.value[3].value);
   const currentMaxFramerate = ref(maxFramerate.value[2].value);
 
   const damuList = ref<IDanmu[]>([]);
@@ -153,7 +153,9 @@ export const useWs = () => {
       console.log('appStore.allTrack变了');
       const mixedStream = new MediaStream();
       newTrack.forEach((item) => {
-        mixedStream.addTrack(item.track);
+        if (item.track) {
+          mixedStream.addTrack(item.track);
+        }
       });
       console.log('新的allTrack音频轨', mixedStream.getAudioTracks());
       console.log('新的allTrack视频轨', mixedStream.getVideoTracks());
@@ -187,7 +189,7 @@ export const useWs = () => {
         });
       } else {
         appStore.allTrack.forEach((info) => {
-          info.track.applyConstraints({
+          info.track?.applyConstraints({
             frameRate: { max: currentMaxFramerate.value },
             height: newVal,
           });
@@ -218,7 +220,7 @@ export const useWs = () => {
         });
       } else {
         appStore.allTrack.forEach((info) => {
-          info.track.applyConstraints({
+          info.track?.applyConstraints({
             frameRate: { max: newVal },
             height: currentResolutionRatio.value,
           });
@@ -264,7 +266,9 @@ export const useWs = () => {
     }
     const mixedStream = new MediaStream();
     appStore.allTrack.forEach((item) => {
-      mixedStream.addTrack(item.track);
+      if (item.track) {
+        mixedStream.addTrack(item.track);
+      }
     });
     console.log('addTrack后结果的音频轨', mixedStream.getAudioTracks());
     console.log('addTrack后结果的视频轨', mixedStream.getVideoTracks());
@@ -307,7 +311,7 @@ export const useWs = () => {
       networkStore.rtcMap.forEach((rtc) => {
         const sender = rtc.peerConnection
           ?.getSenders()
-          .find((sender) => sender.track?.id === delTrackInfo.track.id);
+          .find((sender) => sender.track?.id === delTrackInfo.track?.id);
         if (sender) {
           console.log('删除track', delTrackInfo, sender);
           rtc.peerConnection?.removeTrack(sender);
@@ -316,7 +320,9 @@ export const useWs = () => {
     }
     const mixedStream = new MediaStream();
     appStore.allTrack.forEach((item) => {
-      mixedStream.addTrack(item.track);
+      if (item.track) {
+        mixedStream.addTrack(item.track);
+      }
     });
     console.log('delTrack后结果的音频轨', mixedStream.getAudioTracks());
     console.log('delTrack后结果的视频轨', mixedStream.getVideoTracks());

src/interface.ts

@@ -324,6 +324,8 @@ export enum MediaTypeEnum {
   camera,
   screen,
   microphone,
+  txt,
+  img,
 }
 
 export enum DanmuMsgTypeEnum {

src/network/webRTC.ts

@@ -90,7 +90,7 @@ export class WebRTCClass {
       stream.onremovetrack = (event) => {
         console.log('onremovetrack事件', event);
         const res = appStore.allTrack.filter((info) => {
-          if (info.track.id === event.track.id) {
+          if (info.track?.id === event.track.id) {
             return false;
           }
           return true;
@@ -102,7 +102,7 @@ export class WebRTCClass {
     const addTrack: AppRootState['allTrack'] = [];
 
     this.localStream?.getVideoTracks().forEach((track) => {
-      if (!appStore.allTrack.find((info) => info.track.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -117,7 +117,7 @@ export class WebRTCClass {
       }
     });
     this.localStream?.getAudioTracks().forEach((track) => {
-      if (!appStore.allTrack.find((info) => info.track.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -132,7 +132,7 @@ export class WebRTCClass {
       }
     });
     stream.getVideoTracks().forEach((track) => {
-      if (!appStore.allTrack.find((info) => info.track.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,
@@ -147,7 +147,7 @@ export class WebRTCClass {
       }
     });
     stream.getAudioTracks().forEach((track) => {
-      if (!appStore.allTrack.find((info) => info.track.id === track.id)) {
+      if (!appStore.allTrack.find((info) => info.track?.id === track.id)) {
         addTrack.push({
           id: getRandomString(8),
           track,

src/store/app/index.ts

@@ -14,11 +14,12 @@ export type AppRootState = {
     id: string;
     mediaName: string;
     type: MediaTypeEnum;
-    track: MediaStreamTrack;
-    stream: MediaStream;
+    track?: MediaStreamTrack;
+    stream?: MediaStream;
     streamid: string;
     trackid: string;
-    canvasDom?: any;
+    canvasDom?: fabric.Image;
+    initScale?: number;
   }[];
 };
 
@@ -53,8 +54,10 @@ export const useAppStore = defineStore('app', {
     getTrackInfo() {
       const res = { audio: 0, video: 0 };
       this.allTrack.forEach((item) => {
-        res.audio += item.stream.getAudioTracks().length;
-        res.video += item.stream.getVideoTracks().length;
+        if (item.stream) {
+          res.audio += item.stream.getAudioTracks().length;
+          res.video += item.stream.getVideoTracks().length;
+        }
       });
       return res;
     },

src/views/pushByCanvas/index.vue

@@ -138,7 +138,7 @@
             class="item"
           >
             <span class="name">
-              ({{ item.audio === 1 ? '音频' : '视频' }}){{ item.mediaName }}
+              ({{ mediaTypeEnumMap[item.type] }}){{ item.mediaName }}
             </span>
             <div
               class="del"
@@ -230,6 +230,7 @@
 
 <script lang="ts" setup>
 import { fabric } from 'fabric';
+import { UploadFileInfo } from 'naive-ui';
 import { NODE_ENV } from 'script/constant';
 import { markRaw, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
@@ -257,7 +258,6 @@ const containerRef = ref<HTMLDivElement>();
 const pushCanvasRef = ref<HTMLCanvasElement>();
 const fabricCanvas = ref<fabric.Canvas>();
 const localVideoRef = ref<HTMLVideoElement>();
-const webAudioTrack = ref<MediaStreamTrack>();
 const audioCtx = ref<AudioContext>();
 const remoteVideoRef = ref<HTMLVideoElement[]>([]);
 const isSRS = route.query.liveType === liveTypeEnum.srsPush;
@@ -298,6 +298,14 @@ const {
   isSRS,
 });
 
+const mediaTypeEnumMap = {
+  [MediaTypeEnum.camera]: '摄像头',
+  [MediaTypeEnum.microphone]: '麦克风',
+  [MediaTypeEnum.screen]: '窗口',
+  [MediaTypeEnum.img]: '图片',
+  [MediaTypeEnum.txt]: '文字',
+};
+
 watch(
   () => damuList.value.length,
   () => {
@@ -332,33 +340,55 @@ function onPageVisibility() {
 
 function handleStartLive() {
   lastCoverImg.value = generateBase64(pushCanvasRef.value!);
-  // const video = createVideo({});
-  // document.body.appendChild(video);
-  audioCtx.value = new AudioContext();
-  const gainNode = audioCtx.value.createGain();
 
-  appStore.allTrack.forEach((item) => {
-    if (item.audio === 1) {
+  const allAudioTrack = appStore.allTrack.filter((item) => item.audio === 1);
+  if (allAudioTrack.length) {
+    audioCtx.value = new AudioContext();
+    const gainNode = audioCtx.value.createGain();
+    allAudioTrack.forEach((item) => {
       if (!audioCtx.value) return;
       // const destination = audioCtx.value.createMediaStreamDestination();
-      const audioInput = audioCtx.value.createMediaStreamSource(item.stream);
+      const audioInput = audioCtx.value.createMediaStreamSource(item.stream!);
       // gainNode.connect(destination);
       audioInput.connect(gainNode);
-    }
-  });
-  const destination = audioCtx.value.createMediaStreamDestination();
-  // video.srcObject = destination.stream;
-  gainNode.connect(destination);
-
-  // video.onloadeddata = () => {
-  // @ts-ignore
-  // webAudioTrack.value = video.srcObject!.getAudioTracks()[0];
-  // canvasVideoStream.value?.addTrack(webAudioTrack.value!);
-  if (destination.stream.getAudioTracks()[0]) {
+    });
+    const destination = audioCtx.value.createMediaStreamDestination();
+    // video.onloadeddata = () => {
+    // @ts-ignore
     canvasVideoStream.value?.addTrack(destination.stream.getAudioTracks()[0]);
+    // video.srcObject = destination.stream;
+    gainNode.connect(destination);
   }
   startLive();
-  // };
+}
+
+function handleScale({ width, height }: { width: number; height: number }) {
+  const resolutionHeight = currentResolutionRatio.value;
+  const resolutionWidth = currentResolutionRatio.value * videoRatio.value;
+  console.log('当前分辨率', { resolutionWidth, resolutionHeight });
+  let ratio = 1;
+  if (width > resolutionWidth) {
+    const r1 = resolutionWidth / width;
+    ratio = r1;
+  }
+  if (height > resolutionHeight) {
+    const r1 = resolutionHeight / height;
+    if (ratio > r1) {
+      ratio = r1;
+    }
+  }
+  // if (width > wrapSize.width) {
+  //   const r1 = wrapSize.width / width;
+  //   ratio = r1;
+  // }
+  // if (height > wrapSize.height) {
+  //   const r1 = wrapSize.height / height;
+  //   if (ratio > r1) {
+  //     ratio = r1;
+  //   }
+  // }
+
+  return ratio;
 }
 
 function autoCreateVideo({ stream }: { stream: MediaStream }) {
@@ -372,83 +402,175 @@ function autoCreateVideo({ stream }: { stream: MediaStream }) {
   video.style.opacity = '0';
   video.style.pointerEvents = 'none';
   document.body.appendChild(video);
-  return new Promise<any>((resolve) => {
-    video.onloadedmetadata = () => {
-      const width = stream.getVideoTracks()[0].getSettings().width!;
-      const height = stream.getVideoTracks()[0].getSettings().height!;
-      let ratio = 1;
-      if (width > wrapSize.width) {
-        const r1 = wrapSize.width / width;
-        ratio = r1;
-      }
-      if (height > wrapSize.height) {
-        const r1 = wrapSize.height / height;
-        if (ratio > r1) {
-          ratio = r1;
+  return new Promise<{ canvasDom: fabric.Image; initScale: number }>(
+    (resolve) => {
+      video.onloadedmetadata = () => {
+        const width = stream.getVideoTracks()[0].getSettings().width!;
+        const height = stream.getVideoTracks()[0].getSettings().height!;
+        const ratio = handleScale({ width, height });
+        const initScale = height / currentResolutionRatio.value;
+        video.width = width;
+        video.height = height;
+
+        const canvasDom = markRaw(
+          new fabric.Image(video, {
+            top: 0,
+            left: 0,
+            width,
+            height,
+          })
+        );
+        console.log(
+          '初始化',
+          ratio,
+          canvasDom.width,
+          canvasDom.height,
+          canvasDom
+        );
+
+        canvasDom.scale(ratio);
+        fabricCanvas.value!.add(canvasDom);
+        function renderFrame() {
+          fabricCanvas.value?.renderAll();
+          window.requestAnimationFrame(renderFrame);
         }
-      }
 
-      video.width = width;
-      video.height = height;
+        renderFrame();
 
-      const dom = markRaw(
-        new fabric.Image(video, {
-          top: 0,
-          left: 0,
-          width,
-          height,
-        })
-      );
-      dom.scale(ratio);
-      fabricCanvas.value!.add(dom);
-      function renderFrame() {
-        fabricCanvas.value?.renderAll();
-        window.requestAnimationFrame(renderFrame);
-      }
+        canvasVideoStream.value = pushCanvasRef.value!.captureStream();
+        resolve({ canvasDom, initScale });
+      };
+    }
+  );
+}
 
-      renderFrame();
+watch(
+  () => currentResolutionRatio.value,
+  (newHeight, oldHeight) => {
+    changeCanvasAttr({ newHeight, oldHeight });
+  }
+);
 
-      canvasVideoStream.value = pushCanvasRef.value!.captureStream();
-      resolve(dom);
-    };
-  });
+function changeCanvasAttr({
+  newHeight,
+  oldHeight,
+}: {
+  newHeight: number;
+  oldHeight: number;
+}) {
+  if (fabricCanvas.value) {
+    const resolutionHeight = currentResolutionRatio.value;
+    const resolutionWidth = currentResolutionRatio.value * videoRatio.value;
+    fabricCanvas.value.setWidth(resolutionWidth);
+    fabricCanvas.value.setHeight(resolutionHeight);
+    fabricCanvas.value.forEachObject((canvas) => {
+      canvas.setCoords();
+    });
+    changeCanvasStyle();
+
+    appStore.allTrack.forEach((item) => {
+      if (item.canvasDom) {
+        let ratio = 1;
+        if (newHeight < oldHeight) {
+          // 2560*1440==>640*480
+          // 1920*1080==>640*480
+          // 2560/1920=1.333333
+          ratio = newHeight / oldHeight;
+          const ratio1 = handleScale({
+            width: item.canvasDom.width!,
+            height: item.canvasDom.height!,
+          });
+          // item.canvasDom.width = 100;
+          // item.canvasDom.height = 100;
+          item.canvasDom.scale(ratio);
+          item.canvasDom.left = item.canvasDom.left! * ratio;
+          item.canvasDom.top = item.canvasDom.top! * ratio;
+          console.log(
+            '分辨率变小了',
+            { ratio, ratio1 },
+            item.canvasDom.width,
+            item.canvasDom.height,
+            item.canvasDom
+          );
+        } else {
+          ratio = newHeight / oldHeight;
+          item.canvasDom.scale(ratio);
+          const ratio1 = handleScale({
+            width: item.canvasDom.width!,
+            height: item.canvasDom.height!,
+          });
+          item.canvasDom.scale(ratio1);
+          item.canvasDom.left = item.canvasDom.left! * ratio;
+          item.canvasDom.top = item.canvasDom.top! * ratio;
+          console.log(
+            '分辨率变大了',
+            { ratio, ratio1 },
+            item.canvasDom.width,
+            item.canvasDom.height,
+            item.canvasDom
+          );
+        }
+
+        console.log(
+          item.canvasDom.width,
+          item.canvasDom.height,
+          ratio,
+          'kkkkkkkkkkkkkkkk'
+        );
+      }
+    });
+    changeCanvasStyle();
+  }
+}
+
+function changeCanvasStyle() {
+  // @ts-ignore
+  fabricCanvas.value.wrapperEl.style.width = `${wrapSize.width}px`;
+  // @ts-ignore
+  fabricCanvas.value.wrapperEl.style.height = `${wrapSize.height}px`;
+  // @ts-ignore
+  fabricCanvas.value.lowerCanvasEl.style.width = `${wrapSize.width}px`;
+  // @ts-ignore
+  fabricCanvas.value.lowerCanvasEl.style.height = `${wrapSize.height}px`;
+  // @ts-ignore
+  fabricCanvas.value.upperCanvasEl.style.width = `${wrapSize.width}px`;
+  // @ts-ignore
+  fabricCanvas.value.upperCanvasEl.style.height = `${wrapSize.height}px`;
 }
 
 function initCanvas() {
   const resolutionHeight = currentResolutionRatio.value;
   const resolutionWidth = currentResolutionRatio.value * videoRatio.value;
   const wrapWidth = containerRef.value!.getBoundingClientRect().width;
+  // const wrapWidth = 1920;
   const ratio = wrapWidth / resolutionWidth;
-  scaleRatio.value = ratio;
+  scaleRatio.value = resolutionWidth / wrapWidth;
   const wrapHeight = resolutionHeight * ratio;
+  // const wrapHeight = 1080;
   // lower-canvas: 实际的canvas画面，也就是pushCanvasRef
   // upper-canvas: 操作时候的canvas
   const ins = markRaw(new fabric.Canvas(pushCanvasRef.value!));
-  ins.setWidth(wrapWidth);
-  ins.setHeight(wrapHeight);
+  ins.setWidth(resolutionWidth);
+  ins.setHeight(resolutionHeight);
+
+  // ins.setWidth(wrapWidth);
+  // ins.setHeight(wrapHeight);
   ins.setBackgroundColor('black', () => {});
   wrapSize.width = wrapWidth;
   wrapSize.height = wrapHeight;
   fabricCanvas.value = ins;
+  changeCanvasStyle();
 }
 
 onMounted(() => {
   initCanvas();
   document.addEventListener('visibilitychange', onPageVisibility);
-  handleAudioTrack();
 });
 
 onUnmounted(() => {
   document.removeEventListener('visibilitychange', onPageVisibility);
 });
 
-function handleAudioTrack() {
-  audioCtx.value = new AudioContext();
-  // const destination = audioCtx.value.createMediaStreamDestination();
-  // const gainNode = audioCtx.value.createGain();
-  // gainNode.connect(destination);
-}
-
 function selectMediaOk(val: MediaTypeEnum) {
   showMediaModalCpt.value = true;
   showSelectMediaModalCpt.value = false;
@@ -459,6 +581,8 @@ async function addMediaOk(val: {
   type: MediaTypeEnum;
   deviceId: string;
   mediaName: string;
+  txtInfo?: { txt: string; color: string };
+  imgInfo?: UploadFileInfo[];
 }) {
   showMediaModalCpt.value = false;
   if (val.type === MediaTypeEnum.screen) {
@@ -480,13 +604,15 @@ async function addMediaOk(val: {
       stream: event,
       streamid: event.id,
       trackid: event.getVideoTracks()[0].id,
-      canvasDom: undefined,
     };
 
-    const canvasDom = await autoCreateVideo({
+    const { canvasDom, initScale } = await autoCreateVideo({
       stream: event,
     });
+    // @ts-ignore
     videoTrack.canvasDom = canvasDom;
+    // @ts-ignore
+    videoTrack.initScale = initScale;
 
     const audio = event.getAudioTracks();
     if (audio.length) {
@@ -527,12 +653,14 @@ async function addMediaOk(val: {
       stream: event,
       streamid: event.id,
       trackid: event.getVideoTracks()[0].id,
-      canvasDom: undefined,
     };
-    const canvasDom = await autoCreateVideo({
+    const { canvasDom, initScale } = await autoCreateVideo({
       stream: event,
     });
+    // @ts-ignore
     videoTrack.canvasDom = canvasDom;
+    // @ts-ignore
+    videoTrack.initScale = initScale;
 
     appStore.setAllTrack([...appStore.allTrack, videoTrack]);
     addTrack(videoTrack);
@@ -542,13 +670,6 @@ async function addMediaOk(val: {
       video: false,
       audio: { deviceId: val.deviceId },
     });
-    if (
-      isSRS &&
-      appStore.allTrack.filter((item) => item.audio === 1).length >= 1
-    ) {
-      // window.$message.error('srs模式最多只能有一个音频');
-      // return;
-    }
     const audioTrack = {
       id: getRandomEnglishString(8),
       audio: 1,
@@ -564,6 +685,98 @@ async function addMediaOk(val: {
     addTrack(audioTrack);
 
     console.log('获取麦克风成功');
+  } else if (val.type === MediaTypeEnum.txt) {
+    const txtTrack = {
+      id: getRandomEnglishString(8),
+      audio: 2,
+      video: 2,
+      mediaName: val.mediaName,
+      type: MediaTypeEnum.txt,
+      track: undefined,
+      stream: undefined,
+      streamid: undefined,
+      trackid: undefined,
+    };
+    if (fabricCanvas.value) {
+      const dom = markRaw(
+        new fabric.Text(val.txtInfo?.txt || '', {
+          top: 0,
+          left: 0,
+          fill: val.txtInfo?.color,
+        })
+      );
+      // @ts-ignore
+      txtTrack.canvasDom = dom;
+      fabricCanvas.value.add(dom);
+    }
+
+    // @ts-ignore
+    appStore.setAllTrack([...appStore.allTrack, txtTrack]);
+    addTrack(txtTrack);
+
+    console.log('获取文字成功', fabricCanvas.value);
+  } else if (val.type === MediaTypeEnum.img) {
+    const imgTrack = {
+      id: getRandomEnglishString(8),
+      audio: 2,
+      video: 2,
+      mediaName: val.mediaName,
+      type: MediaTypeEnum.img,
+      track: undefined,
+      stream: undefined,
+      streamid: undefined,
+      trackid: undefined,
+    };
+
+    if (fabricCanvas.value) {
+      const imgEl = await new Promise<HTMLImageElement>((resolve) => {
+        if (!val.imgInfo) return;
+        const file = val.imgInfo[0].file;
+        console.log(file);
+        const reader = new FileReader();
+        reader.addEventListener(
+          'load',
+          function () {
+            const img = document.createElement('img');
+            img.src = reader.result as string;
+            img.onload = () => {
+              resolve(img);
+            };
+          },
+          false
+        );
+        if (file) {
+          reader.readAsDataURL(file);
+        }
+      });
+
+      const canvasDom = markRaw(
+        new fabric.Image(imgEl, {
+          top: 0,
+          left: 0,
+          width: imgEl.width,
+          height: imgEl.height,
+        })
+      );
+      const ratio = handleScale({ width: imgEl.width, height: imgEl.height });
+      console.log(
+        '初始化',
+        ratio,
+        canvasDom.width,
+        canvasDom.height,
+        canvasDom
+      );
+      // @ts-ignore
+      imgTrack.canvasDom = canvasDom;
+      canvasDom.scale(ratio);
+      fabricCanvas.value.add(canvasDom);
+    }
+
+    // @ts-ignore
+    appStore.setAllTrack([...appStore.allTrack, imgTrack]);
+    addTrack(imgTrack);
+
+    console.log('获取图片成功', fabricCanvas.value);
   }
 }
 

src/views/pushByCanvas/mediaModal/index.vue

@@ -18,12 +18,42 @@
             />
           </div>
         </div>
+
         <div class="item">
           <div class="label">名称</div>
           <div class="value">
             <n-input v-model:value="mediaName" />
           </div>
         </div>
+        <template v-if="props.mediaType === MediaTypeEnum.txt && txtInfo">
+          <div class="item">
+            <div class="label">内容</div>
+            <div class="value">
+              <n-input v-model:value="txtInfo.txt" />
+            </div>
+          </div>
+          <div class="item">
+            <div class="label">颜色</div>
+            <div class="value">
+              <n-color-picker v-model:value="txtInfo.color" />
+            </div>
+          </div>
+        </template>
+        <template v-if="props.mediaType === MediaTypeEnum.img">
+          <div class="item">
+            <div class="label">图片</div>
+            <div class="value">
+              <n-upload
+                :max="1"
+                accept="image/png, image/jpeg, image/webp"
+                :on-update:file-list="changImg"
+              >
+                <n-button>选择文件</n-button>
+              </n-upload>
+              <!-- <input type="file" /> -->
+            </div>
+          </div>
+        </template>
       </div>
 
       <template #footer>
@@ -41,14 +71,13 @@
 </template>
 
 <script lang="ts" setup>
+import { UploadFileInfo } from 'naive-ui';
 import { defineEmits, defineProps, onMounted, ref, withDefaults } from 'vue';
 
 import { MediaTypeEnum } from '@/interface';
 import { useAppStore } from '@/store/app';
-import { useNetworkStore } from '@/store/network';
 
 const mediaName = ref('');
-const networkStore = useNetworkStore();
 const appStore = useAppStore();
 
 const props = withDefaults(
@@ -62,6 +91,8 @@ const props = withDefaults(
 const emits = defineEmits(['close', 'ok']);
 
 const inputOptions = ref<{ label: string; value: string }[]>([]);
+const txtInfo = ref<{ txt: string; color: string }>();
+const imgInfo = ref<UploadFileInfo[]>();
 const currentInput = ref<{
   type: MediaTypeEnum;
   deviceId: string;
@@ -74,8 +105,34 @@ onMounted(() => {
   init();
 });
 
+function changImg(list: UploadFileInfo[]) {
+  imgInfo.value = list;
+}
+
 function handleOk() {
-  emits('ok', { ...currentInput.value, mediaName: mediaName.value });
+  if (mediaName.value.length < 4 || mediaName.value.length > 10) {
+    window.$message.info('名称要求4-10个字符！');
+    return;
+  }
+  if (props.mediaType === MediaTypeEnum.txt) {
+    if (txtInfo.value?.txt?.length! < 3 || txtInfo.value?.txt?.length! > 100) {
+      window.$message.info('内容要求3-100个字符！');
+      return;
+    }
+  }
+  if (props.mediaType === MediaTypeEnum.img) {
+    if (imgInfo.value?.length! !== 1) {
+      window.$message.info('请选择图片！');
+      return;
+    }
+  }
+
+  emits('ok', {
+    ...currentInput.value,
+    mediaName: mediaName.value,
+    txtInfo: txtInfo.value,
+    imgInfo: imgInfo.value,
+  });
 }
 
 async function init() {
@@ -125,6 +182,26 @@ async function init() {
       appStore.allTrack.filter((item) => item.type === MediaTypeEnum.screen)
         .length + 1
     }`;
+  } else if (props.mediaType === MediaTypeEnum.txt) {
+    currentInput.value = {
+      ...currentInput.value,
+      type: MediaTypeEnum.txt,
+    };
+    txtInfo.value = { txt: '', color: 'rgba(255,215,0,1)' };
+    mediaName.value = `文字-${
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.txt)
+        .length + 1
+    }`;
+  } else if (props.mediaType === MediaTypeEnum.img) {
+    currentInput.value = {
+      ...currentInput.value,
+      type: MediaTypeEnum.img,
+    };
+    imgInfo.value = [];
+    mediaName.value = `图片-${
+      appStore.allTrack.filter((item) => item.type === MediaTypeEnum.img)
+        .length + 1
+    }`;
   }
 }
 </script>