From abb1fed1efda3242ba49645cc0e763e6c9f230c2 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Fri, 21 Feb 2025 22:33:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E7=AE=B1):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E2=80=9C=E4=BA=8C=E7=BB=B4=E7=A0=81=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E5=92=8C=E7=94=9F=E6=88=90=E2=80=9D=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/toolbox-data.js                 |  11 ++
 .../Conversion/QrcodeReaderAndGenerator.vue   | 165 ++++++++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 src/views/ToolboxView/Conversion/QrcodeReaderAndGenerator.vue

diff --git a/src/assets/js/toolbox-data.js b/src/assets/js/toolbox-data.js
index 5689ada..37498a0 100644
--- a/src/assets/js/toolbox-data.js
+++ b/src/assets/js/toolbox-data.js
@@ -63,6 +63,17 @@ export const toolList = [
         version: '0',
         enabled: false,
       },
+      {
+        id: 'qrcode-reader-and-generator',
+        component: 'Conversion/QrcodeReaderAndGenerator',
+        title: '二维码解析和生成',
+        iconClass: 'mdi mdi-qrcode',
+        desc: '解析二维码、生成二维码',
+        createdAt: '2025-02-21',
+        updatedAt: '2025-02-21',
+        version: '1',
+        enabled: true,
+      },
       {
         id: 'convert-text-structure',
         component: 'Conversion/ConvertTextStructure',
diff --git a/src/views/ToolboxView/Conversion/QrcodeReaderAndGenerator.vue b/src/views/ToolboxView/Conversion/QrcodeReaderAndGenerator.vue
new file mode 100644
index 0000000..87325ce
--- /dev/null
+++ b/src/views/ToolboxView/Conversion/QrcodeReaderAndGenerator.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="tool-detail-page">
+
+    <!-- 解析二维码 -->
+    <n-card size="small" title="解析二维码">
+      <n-form
+        class="form-no-feedback"
+        label-align="left"
+        label-placement="top"
+        label-width="auto"
+      >
+
+        <n-form-item label="选择图片">
+          <n-upload
+            accept="image/jpeg,image/png"
+            :default-upload="false"
+            :file-list="readerData.fileList"
+            :show-file-list="false"
+            @change="handleSelectQrImage"
+          >
+            <n-upload-dragger>
+              <span>点击选择图片 / 拖拽图片到此区域</span>
+            </n-upload-dragger>
+          </n-upload>
+        </n-form-item>
+
+        <n-form-item label="解析结果">
+          <n-flex
+            class="reader-result"
+            :wrap="true"
+          >
+            <div class="reader-result__image-preview">
+              <n-image
+                v-show="readerData.dataURL"
+                object-fit="contain"
+                width="100%"
+                height="100%"
+                :preview-disabled="true"
+                :src="readerData.dataURL"
+              />
+            </div>
+            <n-flex
+              class="reader-result__text-list"
+              :vertical="true"
+            >
+              <n-ol v-if="readerData.results.length > 0">
+                <n-li
+                  v-for="(value, index) in readerData.results"
+                  :key="index"
+                >{{ value }}</n-li>
+              </n-ol>
+              <span v-else>请选择二维码图片以进行解析</span>
+            </n-flex>
+          </n-flex>
+        </n-form-item>
+
+      </n-form>
+    </n-card>
+
+    <!-- 生成二维码 -->
+    <n-card v-if="false" size="small" title="生成二维码">
+      <n-form
+        class="form-no-feedback"
+        label-align="right"
+        label-placement="top"
+        label-width="auto"
+      ></n-form>
+    </n-card>
+
+  </div>
+</template>
+
+<script setup>
+import {
+  NCard, NFlex, NForm, NFormItem,
+  NImage, NLi, NOl,
+  NUpload, NUploadDragger,
+} from 'naive-ui';
+
+import {
+  reactive,
+} from 'vue';
+
+import {
+  $message,
+} from '@/assets/js/naive-ui';
+
+import {
+  readQrCodeImage,
+} from '@/assets/js/qr-code';
+
+/** 二维码解析相关数据 */
+const readerData = reactive({
+
+  /** 图片 DataURL */
+  dataURL: '',
+
+  /** 选择文件列表 */
+  fileList: [],
+
+  /** 解析结果 */
+  results: [],
+
+});
+
+// /** 二维码生成相关数据 */
+// const writerData = reactive({
+// });
+
+/**
+ * @description 处理选择图片
+ * @type { import('naive-ui').UploadOnChange }
+ */
+function handleSelectQrImage(options) {
+
+  let file = options.file.file;
+
+  return readQrCodeImage(file).then((result) => {
+
+    let { error, image, textList } = result;
+
+    if (error) {
+      $message.error(error);
+      readerData.dataURL = '';
+      readerData.results = [];
+    } else {
+      if (textList.length === 0) {
+        $message.warning('未识别到有效的二维码');
+      } else {
+        $message.success('识别成功');
+      }
+      readerData.dataURL = image;
+      readerData.results = textList;
+    }
+
+  });
+
+}
+</script>
+
+<style lang="less" scoped>
+.reader-result {
+  width: 100%;
+
+  .reader-result__image-preview {
+    display: flex;
+    padding: 16px;
+    width: 256px;
+    height: 256px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+
+    .n-image {
+      margin: auto;
+    }
+  }
+
+  .reader-result__text-list {
+    flex-grow: 1;
+    min-width: 256px;
+    width: 0;
+    user-select: text;
+  }
+}
+</style>