feat(云机): 读取剪贴板

package.json

@@ -48,6 +48,7 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
+    "@babel/core": "^7",
     "@babel/eslint-parser": "^7.16.3",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",

pages/test/clipboard.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="">
+    <div v-if="hasClipboard" class="">
+      <div class="">window.navigator.clipboard</div>
+      <v-btn @click="writeText()">写入剪贴板</v-btn>
+      <v-btn @click="readText()">读取剪贴板</v-btn>
+    </div>
+    <div v-else class="">
+      <span>当前环境不支持 window.navigator.clipboard</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  data() {
+    return {
+      hasClipboard: false,
+    };
+  },
+  mounted() {
+    this.hasClipboard = !!window.navigator.clipboard;
+  },
+  methods: {
+    async writeText() {
+      try {
+        const now = Date.now();
+        await navigator.clipboard.writeText(now);
+        this.$toast.success(`写入成功 ${now}`);
+      } catch (error) {
+        this.$toast.error(`写入失败 ${error.message}`);
+      }
+    },
+    async readText() {
+      try {
+        const clipText = await navigator.clipboard.readText();
+        this.$toast.success(`读取成功 ${clipText}`);
+      } catch (error) {
+        this.$toast.error(`读取失败 ${error.message}`);
+      }
+    },
+  },
+};
+</script>

static/screenAndroid/WXtrialInterface.html

@@ -783,46 +783,75 @@
           return;
         }
         stopManyClick(() => {
-          $('.box-shear-plate').empty();
-          $.ajax({
-            url: baseUrl + '/api/public/v5/shear/content',
-            headers: {
-              Authorization: token,
-            },
-            type: 'get',
-            dataType: 'json',
-            success: function (res) {
-              if (res.status === 0) {
-                if (res.data.length) {
-                  cutList = array_unique(res.data);
-                  var str =
-                    '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
-                  cutList.forEach(function (item) {
-                    str +=
-                      "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
-                      item.content +
-                      '")\'>' +
-                      item.content +
-                      "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
-                      item.id +
-                      ")'>删除</button></div></div></div>";
-                  });
-                  str += '</div>';
-                  $('.box-shear-plate').append(str);
+          new Promise((resolve, reject) => {
+            if (window.navigator.clipboard) {
+              window.navigator.clipboard
+                .readText()
+                .then(
+                  function (content) {
+                    return $.ajax({
+                      url: baseUrl + '/api/public/v5/shear/content',
+                      type: 'post',
+                      dataType: 'json',
+                      data: JSON.stringify({
+                        content: content,
+                      }),
+                      headers: {
+                        'content-Type': 'application/json',
+                        Authorization: token,
+                      },
+                    });
+                  },
+                  function (err) {
+                    $.toast('读取剪贴板失败', 'text');
+                  },
+                )
+                .finally(resolve);
+            } else {
+              resolve();
+            }
+          }).then(function () {
+            $('.box-shear-plate').empty();
+            $.ajax({
+              url: baseUrl + '/api/public/v5/shear/content',
+              headers: {
+                Authorization: token,
+              },
+              type: 'get',
+              dataType: 'json',
+              success: function (res) {
+                if (res.status === 0) {
+                  if (res.data.length) {
+                    cutList = array_unique(res.data);
+                    var str =
+                      '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
+                    cutList.forEach(function (item) {
+                      str +=
+                        "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
+                        item.content +
+                        '")\'>' +
+                        item.content +
+                        "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
+                        item.id +
+                        ")'>删除</button></div></div></div>";
+                    });
+                    str += '</div>';
+                    $('.box-shear-plate').append(str);
+                  } else {
+                    $('.box-shear-plate').append(
+                      '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
+                    );
+                  }
+                  $('.mask').show();
+                  initSlider();
                 } else {
                   $('.box-shear-plate').append(
                     '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
                   );
+                  $('.mask').show();
                 }
-                $('.mask').show();
-                initSlider();
-              } else {
-                $('.box-shear-plate').append(
-                  '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                );
-                $('.mask').show();
-              }
-            },
+              },
+            });
           });
         });
       }

static/screenIos/WXtrialInterface.html

@@ -527,47 +527,76 @@
       let timer,
         isFlag = true;
       function showShearPlate() {
-        stopManyClick(() => {
-          $('.box-shear-plate').empty();
-          $.ajax({
-            url: baseUrl + '/api/public/v5/shear/content',
-            headers: {
-              Authorization: token,
-            },
-            type: 'get',
-            dataType: 'json',
-            success: function (res) {
-              if (res.status === 0) {
-                if (res.data.length) {
-                  cutList = array_unique(res.data);
-                  var str =
-                    '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
-                  cutList.forEach(function (item) {
-                    str +=
-                      "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
-                      item.content +
-                      '")\'>' +
-                      item.content +
-                      "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
-                      item.id +
-                      ")'>删除</button></div></div></div>";
-                  });
-                  str += '</div>';
-                  $('.box-shear-plate').append(str);
+        stopManyClick(function () {
+          new Promise((resolve, reject) => {
+            if (window.navigator.clipboard) {
+              window.navigator.clipboard
+                .readText()
+                .then(
+                  function (content) {
+                    return $.ajax({
+                      url: baseUrl + '/api/public/v5/shear/content',
+                      type: 'post',
+                      dataType: 'json',
+                      data: JSON.stringify({
+                        content: content,
+                      }),
+                      headers: {
+                        'content-Type': 'application/json',
+                        Authorization: token,
+                      },
+                    });
+                  },
+                  function (err) {
+                    $.toast('读取剪贴板失败', 'text');
+                  },
+                )
+                .finally(resolve);
+            } else {
+              resolve();
+            }
+          }).then(function () {
+            $('.box-shear-plate').empty();
+            return $.ajax({
+              url: baseUrl + '/api/public/v5/shear/content',
+              headers: {
+                Authorization: token,
+              },
+              type: 'get',
+              dataType: 'json',
+              success: function (res) {
+                if (res.status === 0) {
+                  if (res.data.length) {
+                    cutList = array_unique(res.data);
+                    var str =
+                      '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
+                    cutList.forEach(function (item) {
+                      str +=
+                        "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
+                        item.content +
+                        '")\'>' +
+                        item.content +
+                        "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
+                        item.id +
+                        ")'>删除</button></div></div></div>";
+                    });
+                    str += '</div>';
+                    $('.box-shear-plate').append(str);
+                  } else {
+                    $('.box-shear-plate').append(
+                      '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
+                    );
+                  }
+                  $('.mask').show();
+                  initSlider();
                 } else {
                   $('.box-shear-plate').append(
                     '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
                   );
+                  $('.mask').show();
                 }
-                $('.mask').show();
-                initSlider();
-              } else {
-                $('.box-shear-plate').append(
-                  '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
-                );
-                $('.mask').show();
-              }
-            },
+              },
+            });
           });
         });
       }