初始化本地仓库

2026-08-31 11:33:59 +08:00
commit 663f74b633
2390 changed files with 402918 additions and 0 deletions
@@ -0,0 +1,130 @@
+<template>
+  <div class="page-content">
+    <ElRow :gutter="20">
+      <ElCol
+        :span="6"
+        :md="12"
+        :sm="12"
+        :xs="24"
+        v-for="preset in qrcodePresets"
+        :key="preset.title"
+      >
+        <ElCard class="mb-5" shadow="never">
+          <template #header>
+            <div>
+              <span class="text-base font-bold">{{ preset.title }}</span>
+            </div>
+          </template>
+
+          <div class="flex-cc p-5 rounded">
+            <QrcodeVue :value="qrValue" v-bind="preset.config" />
+          </div>
+        </ElCard>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import QrcodeVue from 'qrcode.vue'
+  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+
+  defineOptions({ name: 'WidgetsQrcode' })
+
+  /**
+   * 二维码内容
+   */
+  const qrValue = ref('https://www.artd.pro')
+  const isShowLogo = ref(false)
+
+  /**
+   * 预设二维码样式配置
+   */
+  const qrcodePresets = [
+    {
+      title: '渲染成 svg 标签',
+      config: {
+        size: 160,
+        level: 'H' as Level,
+        renderAs: 'svg' as RenderAs,
+        margin: 0,
+        background: '#ffffff',
+        foreground: '#000000'
+      }
+    },
+    {
+      title: '渲染成 canvas 标签',
+      config: {
+        size: 160,
+        level: 'H' as Level,
+        renderAs: 'canvas' as RenderAs,
+        margin: 0,
+        background: '#ffffff',
+        foreground: '#000000'
+      }
+    },
+    {
+      title: '自定义颜色',
+      config: {
+        size: 160,
+        level: 'H' as Level,
+        renderAs: 'canvas' as RenderAs,
+        margin: 0,
+        background: '#f0f0f0',
+        foreground: '#4080ff'
+      }
+    },
+    {
+      title: '带有Logo',
+      config: {
+        size: 160,
+        level: 'H' as Level,
+        renderAs: 'canvas' as RenderAs,
+        margin: 0,
+        background: '#ffffff',
+        foreground: '#000000',
+        imageSettings: {
+          src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
+          width: 40,
+          height: 40,
+          excavate: true
+        }
+      }
+    }
+  ]
+
+  /**
+   * 二维码配置
+   */
+  const qrcodeConfig = reactive({
+    size: 160,
+    level: 'H' as Level,
+    renderAs: 'canvas' as RenderAs,
+    margin: 0,
+    background: '#ffffff',
+    foreground: '#000000',
+    imageSettings: {
+      src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
+      width: 40,
+      height: 40,
+      excavate: true
+    } as ImageSettings
+  })
+
+  /**
+   * 监听是否显示 logo
+   * 根据状态动态设置二维码中心的 logo 图片
+   */
+  watch(isShowLogo, (val) => {
+    if (!val) {
+      qrcodeConfig.imageSettings = {} as ImageSettings
+    } else {
+      qrcodeConfig.imageSettings = {
+        src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
+        width: 40,
+        height: 40,
+        excavate: true
+      }
+    }
+  })
+</script>