feat(工具箱): 添加“二维码解析和生成”工具

This commit is contained in:
2025-02-21 22:33:34 +08:00
parent 85a7f66af4
commit abb1fed1ef
2 changed files with 176 additions and 0 deletions

View File

@@ -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',

View File

@@ -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>