feat: qrcode

package.json

@@ -27,6 +27,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.19",
+    "@types/qrcode": "^1.5.5",
     "@vitejs/plugin-legacy": "^5.3.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
@@ -56,6 +57,7 @@
     "p-limit": "^5.0.0",
     "pinia": "^2.1.7",
     "prettier": "^3.2.5",
+    "qrcode": "^1.5.3",
     "sass": "^1.71.0",
     "simple-git": "^3.22.0",
     "simple-git-hooks": "^2.9.0",

src/components/BuildShareDlg.vue

@@ -7,6 +7,7 @@ import JSON5 from 'json5';
 import { NButton, NInput, NModal } from 'naive-ui';
 import { shallowRef, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
+import QRCode from 'qrcode';
 
 const router = useRouter();
 
@@ -33,6 +34,16 @@ watchEffect(() => {
 
 const linkDlgShow = shallowRef(false);
 const shareLink = shallowRef('');
+const shareLinkQr = shallowRef('');
+watchEffect(() => {
+  if (shareLink.value) {
+    QRCode.toDataURL(shareLink.value, { width: 256, margin: 2 }).then((url) => {
+      shareLinkQr.value = url;
+    });
+  } else {
+    shareLinkQr.value = '';
+  }
+});
 const copyLink = () => {
   copy(shareLink.value);
   linkDlgShow.value = false;
@@ -95,8 +106,11 @@ const buildShare = useTask(async () => {
     "
     @afterLeave="shareLink = ''"
   >
-    <NButton text tag="a" :href="shareLink" target="_blank" type="primary">
-      {{ shareLink }}
-    </NButton>
+    <div>
+      <NButton text tag="a" :href="shareLink" target="_blank" type="primary">
+        {{ shareLink }}
+      </NButton>
+      <img v-if="shareLinkQr" :src="shareLinkQr" size-200px block />
+    </div>
   </NModal>
 </template>