feat: qr code

2026-06-23 11:06:11 +08:00
parent 6cc393cd8a
commit e58e9d40d7
5 changed files with 660 additions and 222 deletions
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createQrCodeMatrix } from '@/utils/qrcode'
+
+const props = withDefaults(defineProps<{
+  value: string
+  size?: number
+}>(), {
+  size: 180,
+})
+
+const quietZone = 4
+
+const qrCode = computed(() => createQrCodeMatrix(props.value))
+const viewBoxSize = computed(() => qrCode.value.size + quietZone * 2)
+
+const darkModules = computed(() => {
+  return qrCode.value.modules.flatMap((row, y) => {
+    return row
+      .map((dark, x) => ({ dark, x: x + quietZone, y: y + quietZone }))
+      .filter(module => module.dark)
+  })
+})
+</script>
+
+<template>
+  <svg
+    aria-label="報到 QR Code"
+    class="qr-code"
+    :height="size"
+    role="img"
+    shape-rendering="crispEdges"
+    :viewBox="`0 0 ${viewBoxSize} ${viewBoxSize}`"
+    :width="size"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="#ffffff" height="100%" width="100%" />
+
+    <rect
+      v-for="module in darkModules"
+      :key="`${module.x}-${module.y}`"
+      fill="#000000"
+      height="1"
+      width="1"
+      :x="module.x"
+      :y="module.y"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.qr-code {
+  display: block;
+}
+</style>