添加复制失败提示

Author: Linho1219

src/editor/output.vue

@@ -11,18 +11,15 @@
       </s-button>
 
       <s-tooltip align="right">
-        <s-icon-button
-          slot="trigger"
-          @click="copyCode"
-        >
+        <s-icon-button slot="trigger" @click="copyCode">
           <SIconCopy />
         </s-icon-button>
         {{ t("buttons.copy") }}
       </s-tooltip>
     </div>
     <s-fold :folded="folded">
       <s-scroll-view id="formattedCode">
-        <pre>{{ formatted }}</pre>
+        <pre ref="formattedCodePre">{{ formatted }}</pre>
       </s-scroll-view>
     </s-fold>
   </div>
@@ -60,12 +57,29 @@ watch(
 const folded = ref(true);
 
 import { Snackbar } from "sober";
+const formattedCodePre = ref<HTMLPreElement>();
 function copyCode() {
-  navigator.clipboard.writeText(formatted.value);
-  Snackbar.builder({
-    text: t("title.copySuccess"),
-    type: "success",
-  });
+  try {
+    navigator.clipboard.writeText(formatted.value);
+    Snackbar.builder({
+      text: t("title.copySuccess"),
+      type: "success",
+    });
+  } catch (e) {
+    if (e instanceof Error) console.error(e);
+    if (window.location.href.match(/^http:\/\//))
+      Snackbar.builder({
+        text:
+          t("title.copyFail") +
+          ": Pages over HTTP are not allowed to use clipboard API",
+        type: "error",
+      });
+    else
+      Snackbar.builder({
+        text: t("title.copyFail"),
+        type: "error",
+      });
+  }
 }
 </script>
 

src/i18n.ts

@@ -60,6 +60,7 @@ export default {
         copySuccess: "已复制",
         deleteSuccess: "已删除",
         moreOptions: "更多选项",
+        copyFail: "复制失败",
       },
     },
     "en-US": {
@@ -117,6 +118,7 @@ export default {
         copySuccess: "Copied",
         deleteSuccess: "Deleted",
         moreOptions: "More options",
+        copyFail: "Copy failed",
       },
     },
   },