feat: import QR code method

AtWhuhu · May 20, 2024 · 8017bff · 8017bff
1 parent ae73b57
commit 8017bff
Show file tree

Hide file tree

Showing 6 changed files with 243 additions and 67 deletions.
diff --git a/components/Export/IReadNote.vue b/components/Export/IReadNote.vue
@@ -0,0 +1,80 @@
+<template>
+  <UButton
+    color="gray"
+    variant="solid"
+    class="mr-1"
+    icon="i-mingcute-copy-2-line"
+    @click="copyAiyueConfig"
+  >
+    复制配置
+  </UButton>
+  <UButton
+    color="gray"
+    variant="solid"
+    class="mr-1"
+    icon="i-mingcute-file-import-line"
+    @click="import2Aiyue"
+  >
+    导入
+  </UButton>
+  <UButton
+    color="gray"
+    variant="solid"
+    to="/help/ireadnote"
+    icon="i-mingcute-book-2-line"
+  >
+    教程
+  </UButton>
+  <UModal v-model="showImportModal">
+    <UCard>
+      <img :src="directUrlQR" alt="二维码" />
+      <span>用 iOS 系统相机扫码即可自动导入</span>
+      <UButton
+        :to="importUrl"
+        icon="i-mingcute-arrow-right-up-line"
+        color="gray"
+        target="_blank"
+        >查看配置</UButton
+      >
+      <UTextarea :value="importUrl" readonly />
+      <UButton icon="i-mingcute-copy-2-line" @click="useCopy(importUrl)"
+        >复制一键导入链接</UButton
+      >
+      <UButton :to="directUrl" icon="i-mingcute-file-import-line"
+        >一键导入</UButton
+      >
+    </UCard>
+  </UModal>
+</template>
+
+<script lang="ts" setup>
+import { useQRCode } from "@vueuse/integrations/useQRCode";
+const toast = useToast();
+const voiceChoice = useVoiceChoiceStore();
+const settings = useSettingsStore();
+const importUrl = ref("");
+const directUrl = computed(() => {
+  return `iReadNote://import/itts=${importUrl.value}`;
+});
+const directUrlQR = useQRCode(directUrl);
+const showImportModal = ref(false);
+function copyAiyueConfig() {
+  const config = voiceChoice.ifreetimeCfg;
+  if (config) useCopy(config);
+}
+
+function import2Aiyue() {
+  if (!voiceChoice.voice) {
+    toast.add({
+      title: "请先选择声音",
+    });
+    return {};
+  }
+  const config = JSON.stringify({
+    api: settings,
+    vconfig: voiceChoice.stringify,
+  });
+  importUrl.value = `${window.location.protocol}//${window.location.host}/api/ireadnote?config=${encodeURIComponent(config)}`;
+  showImportModal.value = true;
+}
+</script>
diff --git a/components/ExportPanel.vue b/components/ExportPanel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const toast = useToast();
 const voiceChoice = useVoiceChoiceStore();
-const settings = useSettingsStore();
 
 function copyText(text: string) {
   try {
@@ -40,24 +39,6 @@ function import2Legado() {
   window.open(legadoLink, "_blank");
 }
 
-function copyAiyueConfig() {
-  const config = voiceChoice.ifreetimeCfg;
-  if (config) copyText(config);
-}
-
-function import2Aiyue() {
-  if (!voiceChoice.voice) {
-    toast.add({
-      title: "请先选择声音",
-    });
-    return {};
-  }
-  const config = JSON.stringify({ api: settings, vconfig: voiceChoice });
-  const link = `${window.location.protocol}//${window.location.host}/api/ireadnote?config=${encodeURIComponent(config)}`;
-  const aiyueLink = `iReadNote://import/itts=${link}`;
-  window.open(aiyueLink, "_blank");
-}
-
 function copySourceReaderLink() {
   const config = voiceChoice.sourceReaderCfg;
   if (!config) return;
@@ -132,23 +113,8 @@ function downloadSourceReaderFile() {
     </div>
     <div class="mb-4">
       <label for="AiyueButton" class="label-general">爱阅记</label>
-      <div id="AiyueButton">
-        <UButton
-          color="gray"
-          variant="solid"
-          class="mr-1"
-          @click="copyAiyueConfig"
-          >复制配置</UButton
-        >
-        <UButton color="gray" variant="solid" class="mr-1" @click="import2Aiyue"
-          >一键导入</UButton
-        >
-        <UButton color="white" variant="solid" to="/help/ireadnote" size="xs">
-          查看导入教程
-          <template #trailing>
-            <UIcon name="i-heroicons-arrow-right-20-solid" class="h-5 w-5" />
-          </template>
-        </UButton>
+      <div id="AiyueButton" class="*:align-middle">
+        <ClientOnly> <ExportIReadNote /></ClientOnly>
       </div>
     </div>
     <div class="mb-4">

diff --git a/composables/copy.ts b/composables/copy.ts
@@ -0,0 +1,17 @@
+export const useCopy = (text: string) => {
+  const toast = useToast();
+  try {
+    navigator.clipboard.writeText(text);
+  } catch (err) {
+    console.error(err);
+    toast.add({
+      title: "复制失败",
+      description: "请使用更现代的浏览器",
+    });
+    return;
+  }
+  toast.add({
+    title: "复制成功",
+    description: "已复制配置到剪贴板",
+  });
+};
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
   "dependencies": {
     "@iconify-json/mingcute": "^1.1.17",
     "@vercel/analytics": "^1.2.2",
-    "pinia": "^2.1.7"
+    "@vueuse/integrations": "^10.9.0",
+    "pinia": "^2.1.7",
+    "qrcode": "^1"
   }
 }