移植适配云机功能

pages/rtcEngine/components/CloudPhoneClipboard.vue

@@ -0,0 +1,267 @@
+<template>
+  <van-dialog v-model="pasteVersionVisible" :show-confirm-button="false" class="paste-version-modal" v-cloak>
+    <template v-if="pasteVersionList.length">
+      <div class="tc paste-version-title pre">
+        <span class="pab">粘贴版</span>
+        <span class="pab paste-version-clear" @click="deletePasteVersion"> 清空 </span>
+      </div>
+      <div class="paste-version-list">
+          <div v-for="(item,index) in pasteVersionList" :key="index"
+              :class="[{'mb-1': index!==pasteVersionList.length - 1}]">
+            <van-swipe-cell>
+              <div :class="`copy-value-${index}, ellipsis`" @click="copyPasteVersiontext">
+                {{item.content}}
+              </div>
+              <template #right>
+                <div class="paste-version-delete" @click="deletePasteVersion(item.id)">删除</div>
+              </template>
+            </van-swipe-cell>
+          </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="paste-version-empty flex-center-all h100">
+        <div>
+          <img :src="jianqieban" alt="">
+          <div class="tc">剪贴板为空</div>
+        </div>
+      </div>
+    </template>
+    <img class="pab paste-version-close" :src="closePath" alt="" @click="pasteVersionVisible = false" />
+</van-dialog>
+</template>
+
+<script>
+import Qs from 'qs';
+
+export default {
+  name: 'CloudPhoneClipboard',
+  data() {
+    return {
+      jianqieban: '../rtcEngine/img/jianqieban_pic@2x.png',
+      closePath: '../rtcEngine/img/guanbi_icon@2x.png',
+
+      pasteVersionVisible: false, // 云机粘贴板弹窗
+      pasteVersionList: [], // 粘贴板列表云机的粘贴板内容
+    }
+  },
+  methods: {
+    // 粘贴版相关接口
+    shearContent({ type, params, queryStr }) {
+      let url = '/public/v5/shear/content'
+      if (queryStr) url += queryStr
+      return this.$axios[`$${type}`](url, params);
+    },
+    // 内容植入云机的粘贴板
+    init(text) {
+      // 判断是否有内容, 有内容先把内容植入云机的粘贴板, 否则直接读取云机的粘贴板
+      text ? this.openPasteboard(text) : this.getPasteVersion();
+    },
+    // 打开粘贴板
+    async openPasteboard(content, callBack = () => {}) {
+      try {
+        await this.shearContent({ type: 'post', params: { content } });
+      } catch (error) {
+        console.log('error', error);
+      } finally {
+        callBack();
+        // 获取剪切板
+        this.getPasteVersion(() => {
+          this.pasteVersionVisible = true;
+        })
+      }
+    },
+    // 获取云机粘贴板数据
+    async getPasteVersion(callBack = () => {}) {
+      try {
+        const res = await this.shearContent({ type: 'get' });
+        this.pasteVersionList = res.data;
+        callBack(true)
+      } catch (error) {
+        callBack(false)
+      }
+    },
+    // 清空全部 或 清除某条
+    deletePasteVersion(ids){
+      try {
+        if (!ids) {
+          this.$dialog.alert({
+            title: '提示',
+            message: '确定清空剪贴板？',
+            confirmButtonText: '确定',
+            confirmButtonColor: '#3cc51f',
+            showCancelButton: true,
+            beforeClose: (action, done) => {
+              if (action === 'cancel') done()
+              if (action === 'confirm') {
+                fun.bind(this)(done)
+              }
+            }
+          })
+          return
+        }
+
+        fun.bind(this)()
+        function fun(callBack = () => {}) {
+          this.shearContent({
+            type: 'delete', 
+            queryStr: Qs.stringify(
+              { ids: ids ? [ids] : this.pasteVersionList.map((v) => v.id) },
+              { arrayFormat: 'repeat', addQueryPrefix: true },
+            )
+          }).then(res => {
+            if (res.status === 0) {
+              // 删除成功后重新获取云机粘贴板数据
+              this.getPasteVersion()
+              callBack(true)
+            } else {
+              callBack(false)
+              this.$toast(res.msg)
+            }
+          }).catch(() => {
+            callBack(false)
+          })
+        }
+      } catch (error) {
+        console.log('error', error);
+      }
+    },
+    // 复制粘贴某条数据
+    copyPasteVersiontext(e) {
+      clickCopyText(e, (event) => {
+        // TODO: 复制成功后发送消息给云机
+        // this.doConnectDirectivesWs.send(JSON.stringify({
+        //   type: 'cutting',
+        //   data: {
+        //     str: event.text,
+        //   },
+        // }))
+        // this.$toast('复制成功')
+      }, () => {
+        Toast('复制失败')
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pre {
+  position: relative;
+}
+.pab {
+  position: absolute;
+}
+.tc {
+  text-align: center;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.paste-version-modal {
+  background-color: transparent;
+  overflow: visible;
+
+  ::v-deep .van-dialog__content {
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    height: 270px;
+    padding-bottom: 28px;
+    border-radius: 16px;
+
+    .paste-version-title {
+      height: 48px;
+      line-height: 48px;
+      font-size: 16px;
+      margin: 0 18px;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      & > span:first-child {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+      }
+
+      .paste-version-clear {
+        position: absolute;
+        top: 52%;
+        transform: translateY(-52%);
+        right: 0;
+        height: 20px;
+        line-height: 20px;
+        padding: 0 10px;
+        font-size: 12px;
+        background: #3666f2;
+        border-radius: 3px;
+        color: #ffffff;
+      }
+    }
+
+    .paste-version-list {
+      flex: 1;
+      overflow-y: auto;
+
+      .van-swipe-cell {
+        margin: 0 18px;
+        box-sizing: border-box;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 13px;
+        color: #666;
+        background-color: #fff;
+        border-radius: 5px;
+        overflow: hidden;
+
+        .van-swipe-cell__wrapper {
+          width: 100%;
+          height: 100%;
+        }
+
+        .ellipsis {
+          width: 100%;
+          height: 100%;
+          padding: 0 10px;
+          box-sizing: border-box;
+        }
+      }
+
+      .paste-version-delete {
+        width: 40px;
+        height: 100%;
+        border: none;
+        background: #f04646;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        border-radius: 0 5px 5px 0;
+      }
+    }
+
+    .paste-version-close {
+      width: 38px;
+      height: 38px;
+      bottom: -20%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .paste-version-empty img {
+      width: 128px;
+      height: 160px;
+    }
+
+    .paste-version-empty > div > div {
+      margin-top: 9px;
+      font-size: 15px;
+    }
+  }
+}
+</style>

pages/rtcEngine/components/FloatBtn.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="float-btn-wrap"
+    :style="levitatedSpherePositionData"
+    @mousedown.prevent="onSphereDown"
+    @mouseup.prevent.stop="onSphereUp"
+    @touchmove.prevent="touchmoveLevitatedSphere"
+    @mousemove.prevent="touchmoveLevitatedSphere"
+    @touchend="touchendLevitatedSphere"
+    @mouseup="touchendLevitatedSphere"
+    @mouseleave="touchendLevitatedSphere"
+    @click.prevent.stop="clickHandler"
+    >
+    <div class="round-outside">
+      <div class="round-small">
+        <div class="status"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FloatBtn',
+  props: {
+    // 窗口尺寸 高
+    width: {
+      type: Number,
+      default: 0
+    },
+    // 窗口尺寸 宽
+    height: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 悬浮球位置
+      levitatedSpherePositionData: {},
+    }
+  },
+  mounted() {
+    this.initLevitatedSpherePositionData();
+  },
+  methods: {
+    // 悬浮球初始化位置
+    initLevitatedSpherePositionData() {
+      // 从本地存储中获取悬浮球位置
+      let levitatedSpherePositionData = localStorage.getItem('levitatedSpherePositionData');
+      // 悬浮球位置
+      this.levitatedSpherePositionData = levitatedSpherePositionData ? JSON.parse(levitatedSpherePositionData) : { left: '15px', top: '15px' }
+    },
+    // 悬浮球按下事件
+    onSphereDown(e) {
+        // 给元素设置鼠标按下状态
+        e.target.isMousedown = true;
+        e.preventDefault();
+    },
+    // 悬浮球抬起事件
+    onSphereUp(e) {
+        // 给元素设置鼠标按下状态
+        e.target.isMousedown = false;
+        e.preventDefault();
+    },
+    // 悬浮球移动
+    touchmoveLevitatedSphere(e) {
+      // 过滤未按下时的移动事件
+      if (e.type === 'mousemove' && !e.target.isMousedown) return
+
+      let pageX, pageY;
+      if (e.type === 'mousemove' && e.target.isMousedown) {
+          pageX = e.pageX;
+          pageY = e.pageY;
+      } else if (e.type === 'touchmove') {
+          pageX = e.targetTouches[0].pageX;
+          pageY = e.targetTouches[0].pageY;
+      }
+
+      let min = 20
+      let MaxPageX = this.width - 20
+      let MaxPageY = this.height - 20
+      pageX = pageX <= min ? min : (pageX >= MaxPageX ? MaxPageX : pageX)
+      pageY = pageY <= min ? min : (pageY >= MaxPageY ? MaxPageY : pageY)
+
+      this.levitatedSpherePositionData = {
+          left: `${pageX}px`,
+          top: `${pageY}px`,
+          transform: 'translate(-50%, -50%)'
+      }
+      e.preventDefault();
+    },
+    touchendLevitatedSphere(e) {
+        localStorage.setItem('levitatedSpherePositionData', JSON.stringify(this.levitatedSpherePositionData))
+    },
+    // 点击悬浮球
+    clickHandler(e){
+      this.$emit('onClick');
+      e.preventDefault();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.float-btn-wrap{
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  z-index: 1;
+
+  .round-outside,
+  .round-small,
+  .status{
+    border-radius: 50%;
+  }
+
+  .round-outside{
+    padding: 4px;
+    background-color: #4D4D4D;
+    // 设置透明度
+    opacity: 0.8;
+    .round-small{
+      padding: 4px;
+      background-color: #A5A5A5;
+      opacity: 0.8;
+      .status{
+        width: 20px;
+        height: 20px;
+        background-color: #EDEDED;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>

pages/rtcEngine/components/InputCopy.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <!-- 本地读取失败的粘贴板 -->
+    <van-dialog v-model="copyTextVisible" class="copy-text-modal" confirm-button-text="确定" show-cancel-button confirm-button-color="#3cc51f" v-cloak :before-close="beforeCloseCopy">
+      <div class="tc">
+          读取剪贴板失败
+      </div>
+      <div>
+          <van-field v-model="copyTextValue" placeholder="请输入复制到剪切板的内容" />
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputCopy',
+  data() {
+    return {
+      copyTextVisible: false, // 读取粘贴板失败弹窗
+      copyTextValue: '',
+    }
+  },
+  methods: {
+    async pasteText() {
+      try {
+        this.copyTextValue = '';
+        // 获取剪贴板内容
+        let clipText = await navigator.clipboard.readText();
+
+        if (typeof clipText === 'boolean') throw new Error('读取失败');
+
+        // 打开云机粘贴板
+        this.$emit('openPasteboard', clipText);
+      } catch (error) {
+        // 读取失败, 打开粘贴板弹窗
+        this.copyTextVisible = true;
+      }
+    },
+    // 复制弹窗是否关闭回调
+    beforeCloseCopy(action, done){
+      // 取消
+      if (action !== 'confirm') {
+          done()
+          // 打开云机粘贴板
+          this.$emit('openPasteboard');
+          return
+      }
+
+      // 确定
+      if (!this.copyTextValue) {
+          this.$toast('请输入复制到粘贴板的内容')
+          done(false)
+          return
+      }
+
+      done()
+      // 打开云机粘贴板
+      this.$emit('openPasteboard', this.copyTextValue);
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.copy-text-modal {
+  color: #000;
+  padding: 10px;
+}
+
+.copy-text-modal .van-field__control {
+  border: 1px solid rgba(214, 209, 209, 0.4941176471);
+  border-radius: 0.16rem;
+  padding: 10px;
+}
+</style>

pages/rtcEngine/components/RightPopup.vue

@@ -0,0 +1,251 @@
+<template>
+  <!-- 右侧弹框 -->
+  <van-popup :value="levitatedSphereVisible" @input="showChange" position="right" class="levitated-sphere-drawer"
+      overlay-class="levitated-sphere-overlay" :overlay-style="{'background-color': 'transparent !important'}">
+      <div class="flex-column" style="min-width: 50px;">
+          <div class="flex-column-container">
+              <div>
+                  <div v-for="item in definitionList" :key="item.key"
+                      :class="['tc drawer-item mb-4', {active: actDefinition === item.name}]"
+                      @click.prevent="definitionFun(item)">
+                      {{item.name}}
+                  </div>
+                  <!-- <div class="tc drawer-item mb-4" @click.prevent="resolutionRatio">
+                      分辨率
+                  </div> -->
+                  <div class="tc drawer-item mb-4" @click.prevent="volumeControl(24)">
+                      音量 +
+                  </div>
+                  <div class="tc drawer-item" @click.prevent="volumeControl(25)">
+                      音量 -
+                  </div>
+              </div>
+          </div>
+          <div class="exit">
+              <template v-for="(item, index) in exitList">
+                  <div :key="item.key" :class="['tc', {'mb-4': index !== exitList.length - 1}, item.key]"
+                      @click.prevent="exitFun(item.key)">
+                      <img :src="item.img" alt="">
+                      <div class="drawer-item">
+                          {{item.name}}
+                      </div>
+                  </div>
+              </template>
+          </div>
+      </div>
+  </van-popup>
+</template>
+
+<script>
+export default {
+  name: 'RightPopup',
+  props: {
+    // 拉流渲染引擎实例
+    engine: {
+      type: Object,
+      default: () => ({})
+    },
+    // popup是否显示
+    levitatedSphereVisible: {
+      type: Boolean,
+      default: false
+    },
+    // 清晰度默认值
+    definitionValue: {
+      type: String,
+      default: ()=> localStorage.getItem('definitionValue') ?? '标清',
+    },
+    // 清晰度列表
+    definitionList: {
+      type: Array,
+      default: () => [{
+            name: '自动',
+            value: 2800
+        }, {
+            name: '高清',
+            value: 2800
+        }, {
+            name: '标清',
+            value: 1500,
+        }, {
+            name: '流畅',
+            value: 1000,
+        }]
+    },
+    // 清晰度对应分辨率和帧率列表
+    resolutionRatioList: {
+      type: Object,
+      default: () => ({
+          '自动': { width: 720, height: 1280, fps: 30 },
+          '高清': { width: 720, height: 1280, fps: 30 },
+          '标清': { width: 540, height: 960, fps: 25 },
+          '流畅': { width: 450, height: 800, fps: 20 },
+      })
+    },
+    // url中获取的参数, 父组件传递
+    parametersData: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      // 当前清晰度
+      actDefinition: this.definitionValue,
+    }
+  },
+  computed: {
+    // 右侧弹框退出相关按钮
+    exitList() {
+      let arr = [{
+          name: '剪贴版',
+          key: "shearplate",
+          img: '../static/img/wx/jianqieban_icon.png'
+      }, {
+          name: '退出',
+          key: 'signout',
+          img: '../static/img/wx/tuichu_icon.png'
+      }]
+      if ([1, 2, 3].includes(+this.parametersData.userCardType)) {
+          arr.push({
+              name: '退出并下机',
+              key: 'dormant',
+              img: '../static/img/wx/tuichu_icon.png'
+          })
+      }
+      return arr
+    }
+  },
+  methods: {
+    showChange(val){
+      this.$emit('update:levitatedSphereVisible', val);
+    },
+    // 清晰度 画质
+    definitionFun(item) {
+      try {
+        this.actDefinition = item.name;
+
+        // 设置日志参数 推流质量
+        // logReportObj.setParams({ imageQuality: item.name });
+        
+        localStorage.setItem('definitionValue', item.name);
+
+        // 设置码率
+        this.setBitrate(item);
+
+        this.$emit('update:levitatedSphereVisible', false);
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 设置码率
+    setBitrate(item) {
+      // 设置码率和是否允许自动
+      this.engine?.setCustomBitrate(item.value, item.name === '自动');
+  
+      // 获取并设置编码器分辨率和帧率
+      const config = this.resolutionRatioList[item.name];
+      if (config) {
+          this.engine?.setEncoderSize(config);
+      }
+    },
+    // 分辨率 已无用,2.0sdk只能固定的几个分辨率值 resolutionRatioList
+    resolutionRatio() {
+      request.get('/api/resources/v5/machine/resolution/getResolvingPower', { params: { userCardId: this.parametersData.userCardId } }).then(res => {
+        if (res.success) {
+          this.resolutionRatioList = res.data.map(item => {
+              item.height = item.high
+              return item
+          })
+        }
+      })
+    },
+    // 音量控制 24: 音量+ 25: 音量-
+    volumeControl(value) {
+      this.engine.sendKey && this.engine.sendKey(value)
+      // this.$refs.rtcMediaPlayer && (this.$refs.rtcMediaPlayer.muted = false)
+    },
+    // 退出相关按钮操作
+    exitFun(key) {
+      console.log(key)
+      switch (key) {
+        case 'dormant': // 退出并下机
+          this.$dialog.alert({
+              title: '提示',
+              message: '确定退出云手机并下机',
+              confirmButtonText: '确定',
+              confirmButtonColor: '#3cc51f',
+              showCancelButton: true,
+              beforeClose: (action, done) => {
+                  if (action === 'cancel') done()
+                  if (action === 'confirm') {
+                      // this.downline(done)
+                  }
+              }
+          })
+          break;
+        case 'shearplate': // 剪贴板
+          // 打开剪贴板
+          this.$emit('shearplate');
+          // 关闭popup
+          this.$emit('update:levitatedSphereVisible', false);
+          break;
+        case 'signout':
+          // 关闭popup
+          this.$emit('update:levitatedSphereVisible', false);
+          break;
+      }
+    },
+    close() {
+      
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.levitated-sphere-drawer {
+  height: 100%;
+  max-height: none !important;
+  min-width: 1rem;
+  color: #fff;
+  background-color: rgba(2, 2, 6, 0.5);
+  padding: 30px 10px 0;
+  box-sizing: border-box;
+}
+.levitated-sphere-drawer .drawer-item {
+  line-height: 30px;
+  border-radius: 3px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+}
+.levitated-sphere-drawer .drawer-item.active {
+  background: rgb(255, 255, 255);
+  color: #000;
+}
+.levitated-sphere-drawer .exit {
+  line-height: 30px;
+}
+.levitated-sphere-drawer .exit img {
+  width: 24px;
+  height: 24px;
+}
+
+.flex-column {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-column-container {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.tc {
+    text-align: center;
+}
+</style>

pages/rtcEngine/rtc.vue

@@ -2,18 +2,35 @@
   <div align="center" class="rtc-page cover-bg" :style="{height: pageData.height + 'px'}">
     <!-- video 容器 -->
     <div class="video-wrapper" id="videoRef" :style="{width: pageData.videoWidth + 'px', height: pageData.videoHeight + 'px'}"></div>
+    
     <!-- 三menu键 -->
-    <div id="foot-menu-wrap">
-      <div @click.stop=sendKey(187)><van-icon name="wap-nav" size="1rem"/></div>
-      <div @click.stop=sendKey(3)><van-icon name="wap-home-o" size="1rem"/></div>
-      <div @click.stop=sendKey(4)><van-icon name="arrow-left" size="1rem"/></div>
+    <div id="foot-menu-wrap" :style="`height: ${footMenuWrapHeight}px`">
+      <div @click.stop=sendKey(187)><van-icon name="wap-nav" size="24px"/></div>
+      <div @click.stop=sendKey(3)><van-icon name="wap-home-o" size="24px"/></div>
+      <div @click.stop=sendKey(4)><van-icon name="arrow-left" size="24px"/></div>
     </div>
+
+    <!-- 悬浮按钮 -->
+    <FloatBtn :width="pageData.width" :height="pageData.height" @onClick="levitatedSphereVisible = true"/>
+
+    <!-- 右侧popup -->
+    <RightPopup :engine="engine" :levitatedSphereVisible.sync="levitatedSphereVisible" @shearplate="shearplate"/>
+
+    <!-- 输入并复制到粘贴板 -->
+    <InputCopy ref="inputCopyRef" @openPasteboard="openPasteboard"/>
+
+    <!-- 云机内部的粘贴板内容 -->
+    <CloudPhoneClipboard ref="cloudPhoneClipboardRef"/>
   </div>
 </template>
 
 <script>
 import meta from './config/meta.js';
 import request from './config/request.js';
+import FloatBtn from './components/FloatBtn.vue';
+import RightPopup from './components/RightPopup.vue';
+import InputCopy from './components/InputCopy.vue';
+import CloudPhoneClipboard from './components/CloudPhoneClipboard.vue';
 
 /**
  * @description: 判断当前页面运行环境
@@ -48,6 +65,12 @@ export default {
   auth: false,
   name: 'webRTC',
   layout: 'cloudPhone',
+  components: {
+    FloatBtn,
+    RightPopup,
+    InputCopy,
+    CloudPhoneClipboard,
+  },
   head() {
     return {
       title: '云手机',
@@ -80,7 +103,7 @@ export default {
       pageData: {
         width: 0, // 页面宽度
         height: 0, // 页面高度
-        footMenuHeight: 0, // 底部菜单高度
+        footMenuHeight: 40, // 底部菜单高度
         videoWidth: 0, // 视频宽度
         videoHeight: 0, // 视频高度
       },
@@ -95,7 +118,9 @@ export default {
       // 卡的连接信息
       connectData: {},
       // 云手机引擎 播放器实例
-      engine: null, 
+      engine: null,
+      // 右侧popup显隐
+      levitatedSphereVisible: false,
     }
   },
   // 页面初始化后触发
@@ -119,6 +144,12 @@ export default {
     // 是否为微信浏览器环境
     isWeChatBrowser() {
       return this.$userAgent.isWx;
+    },
+    // 底部菜单高度
+    footMenuWrapHeight() {
+      let num = 40;
+      this.pageData.footMenuHeight = num;
+      return num;
     }
   },
   created() {
@@ -171,6 +202,9 @@ export default {
     this.destroyListener();
   },
   methods: {
+    inii(){
+      console.log('initi')
+    },
     // 初始化页面监听事件
     initListener() {
       // 禁止双击缩放
@@ -219,9 +253,6 @@ export default {
       // 获取窗口尺寸
       this.pageData.height = window.innerHeight;
       this.pageData.width = window.innerWidth;
-      // 获取底部菜单高度
-      let {clientHeight: h} = document.getElementById("foot-menu-wrap");
-      this.pageData.footMenuHeight = h;
 
       // 计算视频尺寸 webRTC需要做成16:9的画面
       let videoWidth = this.pageData.width;
@@ -430,6 +461,15 @@ export default {
       } catch (error) {
         console.log('sendKey error', error);
       }
+    },
+    // popup粘贴板按钮点击事件
+    shearplate(){
+      // 调用InputCopy组件的pasteText方法读取粘贴板
+      this.$refs.inputCopyRef.pasteText();
+    },
+    // 打开去取云机内的粘贴板内容
+    openPasteboard(text){
+      this.$refs.cloudPhoneClipboardRef.init(text);
     }
   }
 }
@@ -478,7 +518,7 @@ $-bg-yellow: rgb(255, 253, 241);
   left: 0px;
   bottom: 0px;
   width: 100%;
-  height: 40px;
+  // height: 40px; // 通过vue动态添加
   background: inherit;
   background-color: rgba(0, 12, 23, 1);
   border: none;
@@ -486,7 +526,7 @@ $-bg-yellow: rgb(255, 253, 241);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
-  z-index: 5;
+  z-index: 1;
   display: flex;
   justify-content: space-evenly;
   align-items: center;