QRCode 二维码

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    FormField,
    Inline,
    QRCode,
    SegmentedControl,
    Slider,
    Stack,
    Switch,
    Text,
    type QRCodeLevel,
  } from '@hina-ui/vue'
  const size = ref(192)
  const logo = ref(true)
  const brand = ref(false)
  const level = ref<QRCodeLevel>('H')
  const levels = ['L', 'M', 'Q', 'H'].map(value => ({ value, label: value }))
</script>
<template>
  <Stack align="center" class="w-full max-w-sm" data-demo-qr-appearance>
    <QRCode
      value="https://hinaui.dev"
      :size="size"
      :level="level"
      :logo="logo ? '/favicon.png' : undefined"
      :color="brand ? 'var(--color-brand-800)' : undefined"
    />
    <Stack class="w-full">
      <FormField label="尺寸">
        <Inline :wrap="false" gap="sm">
          <Slider v-model="size" :min="128" :max="256" :step="8" class="flex-1" />
          <Text size="sm" tone="muted" class="w-14 shrink-0 tabular-nums">{{ size }}px</Text>
        </Inline>
      </FormField>
      <FormField label="纠错等级">
        <SegmentedControl v-model="level" :options="levels" block />
      </FormField>
      <Inline justify="between">
        <Switch v-model="logo">中心标志</Switch>
        <Switch v-model="brand">品牌色</Switch>
      </Inline>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { onScopeDispose, ref } from 'vue'
  import { QRCode, Select, Stack, Text, type QRCodeStatus } from '@hina-ui/vue'
  const status = ref<QRCodeStatus>('expired')
  const options = [
    { value: 'active', label: '可扫描' },
    { value: 'loading', label: '加载中' },
    { value: 'expired', label: '已过期' },
    { value: 'scanned', label: '已扫描' },
  ]
  let timer: ReturnType<typeof setTimeout> | undefined
  function refresh() {
    clearTimeout(timer)
    status.value = 'loading'
    timer = setTimeout(() => {
      status.value = 'active'
    }, 800)
  }
  function change(value: unknown) {
    clearTimeout(timer)
    status.value = value as QRCodeStatus
  }
  onScopeDispose(() => clearTimeout(timer))
</script>
<template>
  <Stack align="center" class="w-full max-w-sm" data-demo-qr-status>
    <QRCode value="https://hinaui.dev" :status="status" @refresh="refresh" />
    <Select
      :model-value="status"
      :options="options"
      aria-label="二维码状态"
      class="w-48"
      @update:model-value="change"
    />
    <Text size="sm" tone="muted" class="text-center">
      刷新在这里模拟一次异步请求，状态由调用方控制。
    </Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, QRCode, Stack, Text } from '@hina-ui/vue'
  const expired = ref(true)
</script>
<template>
  <Stack align="center" data-demo-qr-custom>
    <QRCode
      value="https://hinaui.dev"
      :status="expired ? 'expired' : 'active'"
      :size="224"
      @refresh="expired = false"
    >
      <template #status="{ refresh }">
        <Text weight="medium">分享链接已过期</Text>
        <Text size="xs" tone="muted">重新生成后再扫码打开</Text>
        <Button size="sm" variant="outline" @click="refresh">重新生成</Button>
      </template>
    </QRCode>
    <Button variant="ghost" size="sm" :disabled="expired" @click="expired = true">模拟过期</Button>
  </Stack>
</template>

<script setup lang="ts">
  import { onScopeDispose, ref } from 'vue'
  import { Download } from '@lucide/vue'
  import { Button, Inline, QRCode, Stack, Text, type QRCodeExpose } from '@hina-ui/vue'
  const code = ref<QRCodeExpose>()
  const busy = ref(false)
  const error = ref(false)
  const urls = new Set<string>()
  async function save(type: 'image/png' | 'image/svg+xml') {
    if (!code.value || busy.value) return
    busy.value = true
    error.value = false
    try {
      const blob = await code.value.toBlob({ type, scale: 3 })
      const url = URL.createObjectURL(blob)
      urls.add(url)
      const link = document.createElement('a')
      link.href = url
      link.download = type === 'image/png' ? 'hina-ui.png' : 'hina-ui.svg'
      link.click()
      setTimeout(() => {
        URL.revokeObjectURL(url)
        urls.delete(url)
      }, 1000)
    } catch {
      error.value = true
    } finally {
      busy.value = false
    }
  }
  onScopeDispose(() => urls.forEach(url => URL.revokeObjectURL(url)))
</script>
<template>
  <Stack align="center" data-demo-qr-export>
    <QRCode ref="code" value="https://hinaui.dev" logo="/favicon.png" label="Hina UI 文档站" />
    <Inline gap="sm">
      <Button variant="outline" size="sm" :disabled="busy" @click="save('image/png')">
        <template #icon><Download /></template>
        PNG
      </Button>
      <Button variant="outline" size="sm" :disabled="busy" @click="save('image/svg+xml')">
        <template #icon><Download /></template>
        SVG
      </Button>
    </Inline>
    <Text v-if="error" tone="danger" size="sm" role="alert">导出失败，请重试。</Text>
  </Stack>
</template>