imeik-bizui 2.0.3 → 2.0.5

package/dist/bizui/src/RequirementBall/components/RecordScreen.vue

@@ -1,452 +0,0 @@
-<template>
-  <!-- 录屏组件容器 -->
-  <div class="record-screen">
-    <!-- 预览列表区域 -->
-    <div class="preview-list">
-      <!-- 遍历已录制视频列表,显示预览项 -->
-      <div v-for="(recordingUrl, index) in recordings" :key="index" class="preview-item">
-        <!-- 如果有视频URL则显示视频预览 -->
-        <img
-          v-if="recordingUrl"
-          :src="`${recordingUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_1140,h_640`"
-          class="video-preview"
-        />
-        <!-- 加载中状态显示loading -->
-        <ImLoading v-else />
-        <!-- 播放按钮 -->
-        <div v-if="recordingUrl" class="play-btn" @click="playVideo(recordingUrl)">
-          <img src="https://udstatic.imeik.com/pcUploads/1732257019241/play-icon.png" alt="播放" />
-        </div>
-        <!-- 预览项操作按钮区域 -->
-        <div class="preview-actions">
-          <!-- 删除按钮 -->
-          <span class="close-btn" @click="removeRecording(index)">
-            <img src="https://udstatic.imeik.com/pcUploads/1732247355378/delete-icon.png" alt="删除" />
-          </span>
-        </div>
-      </div>
-      <!-- 录制按钮和上传按钮的容器 -->
-      <div v-if="recordings.length < maxRecordings" class="action-buttons">
-        <!-- 添加 v-if 判断是否支持录屏 -->
-        <div v-if="isScreenRecordingSupported" class="record-btn" @click="startRecording">
-          <img class="icon-record" src="https://udstatic.imeik.com/pcUploads/1732247683538/record-icon.png" alt="录屏" />
-          <span class="text">开始录制</span>
-        </div>
-        <div class="upload-btn" @click="triggerFileUpload">
-          <img class="icon-upload" src="https://udstatic.imeik.com/pcUploads/1732929953519/plus-icon.png" alt="上传" />
-          <span class="text">上传视频</span>
-          <input
-            ref="fileInput"
-            type="file"
-            accept="video/*"
-            style="display: none"
-            @change="handleFileUpload"
-          />
-        </div>
-      </div>
-    </div>
-    <!-- tips -->
-    <div class="tips">{{ tips }}</div>
-    <!-- 错误提示信息 -->
-    <div v-if="error" class="error-tip">{{ error }}</div>
-    <!-- 视频播放弹窗 -->
-    <ImDialog
-      title="视频播放"
-      :visible.sync="dialogVisible"
-      width="900px"
-      height="auto"
-      append-to-body
-      hide-footer
-    >
-      <!-- 视频播放器 -->
-      <video
-        v-if="currentVideoUrl"
-        :src="currentVideoUrl"
-        controls
-        autoplay
-        style="width: 100%; max-height: 70vh;"
-      >
-      </video>
-    </ImDialog>
-  </div>
-</template>
-
-<script>
-import { fnUploadRequest } from './upload'
-export default {
-  name: 'RecordScreen',
-  // 组件属性定义
-  props: {
-    value: {
-      type: Array,
-      default: () => [] // 默认空数组
-    },
-    maxRecordings: {
-      type: Number,
-      default: 3 // 默认最大录制数量
-    },
-    tips: {
-      type: String,
-      default: '请上传视频文件，每个文件不超过500M，最多上传3个视频'
-    }
-  },
-  // 组件内部数据
-  data() {
-    return {
-      recordings: [], // 录制视频列表
-      isRecording: false, // 是否正在录制
-      mediaRecorder: null, // 媒体录制器实例
-      recordedChunks: [], // 录制的视频数据块
-      error: '', // 错误信息
-      dialogVisible: false, // 视频播放弹窗显示状态
-      currentVideoUrl: '' // 当前播放的视频URL
-    }
-  },
-  computed: {
-    // 添加计算属性检查是否支持录屏
-    isScreenRecordingSupported() {
-      return !!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia)
-    }
-  },
-  // 监听属性变化
-  watch: {
-    value: {
-      handler(newVal) {
-        this.setMyValue(newVal)
-      },
-      immediate: true // 组件创建时立即执行一次
-    }
-  },
-  methods: {
-    // 设置组件内部的recordings值
-    setMyValue(newVal) {
-      try {
-        this.recordings = JSON.parse(JSON.stringify(newVal))
-      } catch (err) {
-        this.recordings = []
-      }
-    },
-
-    // 开始录制
-    async startRecording() {
-      if (this.isRecording) {
-        return
-      }
-      this.error = ''
-
-      try {
-        // 获取屏幕共享流
-        const stream = await navigator.mediaDevices.getDisplayMedia({
-          video: {
-            cursor: 'always', // 显示鼠标指针
-            displaySurface: 'window' // 可选择窗口
-          },
-          audio: false // 不录制音频
-        })
-
-        // 创建MediaRecorder实例
-        this.mediaRecorder = new MediaRecorder(stream)
-        this.recordedChunks = []
-
-        // 监听数据可用事件
-        this.mediaRecorder.ondataavailable = (event) => {
-          if (event.data.size > 0) {
-            this.recordedChunks.push(event.data)
-          }
-        }
-
-        // 通知父组件开始录制
-        this.mediaRecorder.onstart = () => {
-          this.$emit('startRecord')
-          this.isRecording = true
-        }
-
-        // 监听录制停止事件
-        this.mediaRecorder.onstop = () => {
-          this.isRecording = false
-          // 将录制的数据块合并为blob
-          const blob = new Blob(this.recordedChunks, { type: 'video/webm' })
-          const fileName = '录屏-' + new Date().getTime() + '.webm'
-          const file = new File([blob], fileName, { type: 'video/webm' })
-
-          this.recordings.push('') // 添加空占位
-          // 上传文件
-          fnUploadRequest({
-            file,
-            onSuccess: (res) => {
-              // 更新视频URL
-              this.$set(this.recordings, this.recordings.length - 1, res.url)
-              // 通知父组件值变化
-              this.onUpdate()
-              // 停止所有媒体轨道
-              stream.getTracks().forEach((track) => track.stop())
-            },
-            onError: (err) => {
-              this.error = err.message || '截屏失败，请重试'
-              stream.getTracks().forEach((track) => track.stop())
-              this.recordings.pop()
-            }
-          })
-        }
-
-        // 检查录制数量限制
-        if (this.recordings.length >= this.maxRecordings) {
-          throw new Error(`最多只能上传${this.maxRecordings}个录屏`)
-        } else {
-          // 开始录制
-          this.mediaRecorder.start()
-        }
-      } catch (err) {
-        this.$emit('endRecord')
-        if (err.message === 'Permission denied') {
-          this.error = '操作权限被阻止'
-        } else {
-          this.error = err.message || '录屏失败，请重试'
-        }
-        this.isRecording = false
-      }
-    },
-
-    // 停止录制
-    stopRecording() {
-      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-        this.mediaRecorder.stop()
-      }
-      this.$emit('endRecord') // 通知父组件录制结束
-    },
-
-    // 删除指定索引的录制视频
-    removeRecording(index) {
-      URL.revokeObjectURL(this.recordings[index].url) // 释放URL对象
-      this.recordings.splice(index, 1)
-      this.onUpdate() // 通知父组件值变化
-    },
-
-    // 更新父组件的值
-    onUpdate() {
-      console.log('this.recordings', this.recordings)
-      this.$emit('input', this.recordings)
-    },
-
-    // 播放视频
-    playVideo(videoUrl) {
-      this.currentVideoUrl = videoUrl
-      this.dialogVisible = true
-    },
-
-    // 关闭视频播放弹窗
-    handleClose() {
-      this.dialogVisible = false
-      this.currentVideoUrl = ''
-    },
-
-    // 添加新方法
-    triggerFileUpload() {
-      this.$refs.fileInput.click()
-    },
-
-    handleFileUpload(event) {
-      const file = event.target.files[0]
-      if (!file) return
-
-      // 检查文件类型
-      if (!file.type.startsWith('video/')) {
-        this.error = '请上传视频文件'
-        return
-      }
-
-      // 检查文件大小
-      const maxSize = 500 * 1024 * 1024
-      if (file.size > maxSize) {
-        this.error = '视频文件大小不能超过500M'
-        return
-      }
-
-      this.recordings.push('') // 添加空占位
-
-      // 使用现有的上传方法
-      fnUploadRequest({
-        file,
-        onSuccess: (res) => {
-          this.$set(this.recordings, this.recordings.length - 1, res.url)
-          this.onUpdate()
-        },
-        onError: (err) => {
-          this.error = err.message || '上传失败，请重试'
-          this.recordings.pop() // 移除空占位
-        }
-      })
-
-      // 清空input以允许重复上传相同文件
-      event.target.value = ''
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.record-screen {
-  // 预览列表样式
-  .preview-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 10px;
-
-    // 预览项样式
-    .preview-item {
-      position: relative;
-      width: 228px;
-      height: 128px;
-      border-radius: 5px;
-      border: 1px solid #d9d9d9;
-      text-align: center;
-      line-height: 128px;
-
-      // 视频预览样式
-      .video-preview {
-        position: relative;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      // 预览项遮罩层
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.3);
-        z-index: 1;
-        border-radius: 5px;
-      }
-
-      // 播放按钮样式
-      .play-btn {
-        position: absolute;
-        z-index: 3;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 45px;
-        height: 45px;
-        cursor: pointer;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.5);
-        }
-      }
-
-      // 预览项操作按钮样式
-      .preview-actions {
-        position: absolute;
-        z-index: 3;
-        top: -8px;
-        right: -8px;
-
-        // 删除按钮样式
-        .close-btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-          padding: 0;
-
-          img {
-            width: 16px;
-            height: 16px;
-          }
-
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-
-    // 录制按钮和上传按钮的容器
-    .action-buttons {
-      display: flex;
-      gap: 10px;
-
-      .record-btn,
-      .upload-btn {
-        display: flex;
-        flex-direction: column;
-        gap: 13px;
-        align-items: center;
-        justify-content: center;
-        width: 128px;
-        height: 128px;
-        border: 1px dashed #d9d9d9;
-        border-radius: 3px;
-        cursor: pointer;
-
-        &:hover {
-          border-color: #40a9ff;
-        }
-
-        .icon-record {
-          width: 26px;
-          height: 20px;
-        }
-
-        .icon-upload {
-          width: 26px;
-          height: 26px;
-        }
-
-        .text {
-          font-size: 12px;
-          color: #999999;
-          line-height: 14px;
-        }
-      }
-    }
-  }
-
-  // tips
-  .tips {
-    margin-top: 10px;
-    font-size: 12px;
-    color: #999999;
-    line-height: 12px;
-  }
-
-  // 错误提示样式
-  .error-tip {
-    margin-top: 8px;
-    color: #ff4d4f;
-    font-size: 12px;
-  }
-}
-
-// 录制中动画
-@keyframes pulse {
-  0% {
-    border-color: #ff4d4f;
-  }
-  50% {
-    border-color: #ffccc7;
-  }
-  100% {
-    border-color: #ff4d4f;
-  }
-}
-</style>

package/dist/bizui/src/RequirementBall/components/upload.js

@@ -1,52 +0,0 @@
-import { findAliToken } from '../../../api/user.js'
-import Vue from 'vue'
-const vue = new Vue()
-const OSS = require('ali-oss')
-
-const VUE_APP_CDN_DOMAIN = 'https://udstatic.imeik.com'
-
-export function beforeUpload(file, maxSize = 20) {
-  if (file.size > maxSize * 1024 * 1024) {
-    vue.$message.error(`上传文件[${file.name}]大小不能超过 ${maxSize}MB!`)
-    return false
-  }
-  return true
-}
-
-export async function fnUploadRequest(options) {
-  try {
-    const res = await findAliToken()
-    const resData = res.data
-    const client = new OSS({
-      accessKeyId: resData.accessKeyId, // 查看你自己的阿里云KEY
-      accessKeySecret: resData.accessKeySecret, // 查看自己的阿里云KEYSECRET
-      stsToken: resData.securityToken,
-      bucket: resData.bucket, // 你的 OSS bucket 名称
-      region: 'oss-cn-beijing', // bucket 所在地址，我的是 华北2 北京
-      endpoint: 'oss-cn-beijing.aliyuncs.com', // 自己的域名
-      timeout: 600000
-      // cname: 'udstatic.imeik.com'
-    })
-    const file = options.file // 拿到 file
-    const fileName = file.name // .substr(0, file.name.lastIndexOf('.'))
-    if (encodeURIComponent(fileName).length > 300) {
-      vue.$message.warning('文件名称长度太长可能导致错误,请重新命名!')
-    }
-    const date = new Date().getTime()
-    const fileNames = `${date}/${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
-    // 上传文件,这里是上传到OSS的 uploads文件夹下
-    client.put('pcUploads/' + fileNames, file).then(res => {
-      if (res.res.statusCode === 200) {
-        res.url = res.url.replace('http://imeikud.oss-cn-beijing.aliyuncs.com', VUE_APP_CDN_DOMAIN)
-        res.url = res.url.replace('https://imeikud.oss-cn-beijing.aliyuncs.com', VUE_APP_CDN_DOMAIN)
-        const nameArr = res.name.split('/')
-        res.name = nameArr[nameArr.length - 1]
-        options.onSuccess(res)
-      } else {
-        options.onError('上传失败')
-      }
-    })
-  } catch (e) {
-    options.onError('上传失败')
-  }
-}