minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 二维码生成插件

Browse Source
master
lichaojun 1 week ago
parent 3dd9324308
commit 075ca62f7e
5 changed files with 120 additions and 115 deletions
Show Stats Download Patch File Download Diff File

59
chromePlugin/contentToQrCode/index.html
Unescape Escape View File

@ -1,29 +1,38 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
<title>内容转二维码</title> name="viewport"
<link rel="stylesheet" href="style.css"> content="width=device-width, initial-scale=1.0"
</head> />
<body> <title>内容转二维码</title>
<link
rel="stylesheet"
href="style.css"
/>
</head>
<body>
<div class="container">
<h1>内容转二维码生成器</h1>
<p>将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。</p>
<div class="container"> <textarea
<h1>内容转二维码生成器</h1> id="text-input"
<p>将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。</p> rows="10"
placeholder="请在此处粘贴您的文本内容..."
<textarea id="text-input" rows="10" placeholder="请在此处粘贴您的文本内容..."></textarea> ></textarea>
<button id="generate-btn">生成二维码</button>
<div id="qrcode-container">
<!-- 二维码将在这里生成 -->
</div>
</div>
<!-- 引入 qrcode.js 库 --> <button id="generate-btn">生成二维码</button>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<!-- 引入我们自己的逻辑脚本 --> <div id="qrcode-container">
<script src="main.js"></script> <!-- 二维码将在这里生成 -->
</body> </div>
</div>
<!-- 引入 qrcode.js 库 -->
<script src="qrcode.min.js"></script>
<!-- 引入我们自己的逻辑脚本 -->
<script src="main.js"></script>
</body>
</html> </html>

118
chromePlugin/contentToQrCode/main.js
Unescape Escape View File

@ -2,74 +2,74 @@
// 当整个页面的HTML内容加载完成后，执行此函数 // 当整个页面的HTML内容加载完成后，执行此函数
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// 获取页面上的关键元素 // 获取页面上的关键元素
const textInput = document.getElementById('text-input'); const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn'); const generateBtn = document.getElementById('generate-btn');
const qrcodeContainer = document.getElementById('qrcode-container'); const qrcodeContainer = document.getElementById('qrcode-container');
// 为“生成二维码”按钮添加点击事件监听器 // 为“生成二维码”按钮添加点击事件监听器
generateBtn.addEventListener('click', () => { generateBtn.addEventListener('click', () => {
// 获取输入框中的文本，并用 trim() 清除前后的空白字符 // 获取输入框中的文本，并用 trim() 清除前后的空白字符
const text = textInput.value.trim(); const text = textInput.value.trim();
// 在生成新的二维码之前，清空之前可能存在的旧二维码 // 在生成新的二维码之前，清空之前可能存在的旧二维码
qrcodeContainer.innerHTML = ''; qrcodeContainer.innerHTML = '';
// 如果文本为空，则不执行任何操作 // 如果文本为空，则不执行任何操作
if (!text) { if (!text) {
console.log('输入内容为空，已中止生成。'); console.log('输入内容为空，已中止生成。');
return; return;
} }
// 定义每个二维码的最大字符数 // 定义每个二维码的最大字符数
const chunkSize = 2000; const chunkSize = 1000;
// 计算需要生成多少个二维码 // 计算需要生成多少个二维码
const totalChunks = Math.ceil(text.length / chunkSize); const totalChunks = Math.ceil(text.length / chunkSize);
console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`); console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);
// 循环处理每一块文本 // 循环处理每一块文本
for (let i = 0; i < totalChunks; i++) { for (let i = 0; i < totalChunks; i++) {
// 计算当前块的起始和结束位置 // 计算当前块的起始和结束位置
const start = i * chunkSize; const start = i * chunkSize;
const end = start + chunkSize; const end = start + chunkSize;
// 从总文本中截取当前块的文本 // 从总文本中截取当前块的文本
const chunk = text.substring(start, end); const chunk = text.substring(start, end);
// --- 创建包裹单个二维码及其标签的容器 --- // --- 创建包裹单个二维码及其标签的容器 ---
const itemDiv = document.createElement('div'); const itemDiv = document.createElement('div');
itemDiv.className = 'qrcode-item'; itemDiv.className = 'qrcode-item';
// --- 创建并添加序号标签 --- // --- 创建并添加序号标签 ---
const label = document.createElement('p'); const label = document.createElement('p');
label.className = 'qrcode-label'; label.className = 'qrcode-label';
// 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码" // 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码'; label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
itemDiv.appendChild(label); itemDiv.appendChild(label);
// --- 创建用于生成二维码的占位符元素 --- // --- 创建用于生成二维码的占位符元素 ---
const qrcodeDiv = document.createElement('div'); const qrcodeDiv = document.createElement('div');
// 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象 // 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
qrcodeDiv.id = `qrcode-${i}`; qrcodeDiv.id = `qrcode-${i}`;
itemDiv.appendChild(qrcodeDiv); itemDiv.appendChild(qrcodeDiv);
// --- 将完整的二维码项（标签+占位符）添加到主容器中 --- // --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
qrcodeContainer.appendChild(itemDiv); qrcodeContainer.appendChild(itemDiv);
// --- 使用 qrcode.js 库生成二维码 --- // --- 使用 qrcode.js 库生成二维码 ---
// 实例化 QRCode 对象 // 实例化 QRCode 对象
// 第一个参数是二维码要渲染到的DOM元素 // 第一个参数是二维码要渲染到的DOM元素
// 第二个参数是配置对象 // 第二个参数是配置对象
new QRCode(qrcodeDiv, { new QRCode(qrcodeDiv, {
text: chunk, // 当前块的文本内容 text: chunk, // 当前块的文本内容
width: 400, // 二维码宽度 width: 400, // 二维码宽度
height: 400, // 二维码高度 height: 400, // 二维码高度
colorDark: '#000000', // 二维码颜色 colorDark: '#000000', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色 colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.H // 纠错级别，H是最高级 correctLevel: QRCode.CorrectLevel.H, // 纠错级别，H是最高级
}); });
console.log(`已为第 ${i + 1} 块内容生成二维码。`); console.log(`已为第 ${i + 1} 块内容生成二维码。`);
} }
}); });
}); });

25
chromePlugin/contentToQrCode/manifest.json
Unescape Escape View File

@ -1,17 +1,12 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "内容转二维码", "name": "内容转二维码",
"version": "1.0", "version": "1.0",
"description": "将长文本内容分割并生成一个或多个二维码的页面。", "description": "将长文本内容分割并生成一个或多个二维码的页面。",
"action": { "action": {
"default_title": "内容转二维码" "default_title": "内容转二维码"
}, },
"background": { "background": {
"service_worker": "background.js" "service_worker": "background.js"
}, }
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
} }

1
chromePlugin/contentToQrCode/qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
src/views/welcome/config.json
Unescape Escape View File

@ -1,12 +1,12 @@
{ {
"totalNotes": 74, "totalNotes": 76,
"categories": 5, "categories": 5,
"lastUpdated": "2025-10-15T08:30:23.764Z", "lastUpdated": "2025-10-17T12:02:18.785Z",
"weeklyAdded": 8, "weeklyAdded": 20,
"categoryChartData": [ "categoryChartData": [
{ {
"name": "demo", "name": "demo",
"value": 63 "value": 65
}, },
{ {
"name": "python", "name": "python",
@ -27,16 +27,16 @@
], ],
"recentNotes": [ "recentNotes": [
{ {
"path": "demo/scssLiveTranslate/index.vue", "path": "demo/messageBoxWithHtml.vue",
"title": "SCSS → CSS 实时翻译器", "title": "messageBoxWithHtml",
"category": "demo", "category": "demo",
"date": "2025-10-15" "date": "2025-10-17"
}, },
{ {
"path": "demo/cssDemo.vue", "path": "demo/base64Tool.vue",
"title": "cssDemo", "title": "base64编码解码工具",
"category": "demo", "category": "demo",
"date": "2025-10-15" "date": "2025-10-17"
}, },
{ {
"path": "demo/tuiImageEditor/index.vue", "path": "demo/tuiImageEditor/index.vue",
@ -45,16 +45,16 @@
"date": "2025-10-15" "date": "2025-10-15"
}, },
{ {
"path": "demo/deletdNodeModules/index.vue", "path": "demo/scssLiveTranslate/index.vue",
"title": "删除 node_modules 文件夹非常耗时解决办法", "title": "SCSS → CSS 实时翻译器",
"category": "demo", "category": "demo",
"date": "2025-10-14" "date": "2025-10-15"
}, },
{ {
"path": "demo/asyncDynComp/index.vue", "path": "demo/cssDemo.vue",
"title": "异步动态加载组件", "title": "cssDemo",
"category": "demo", "category": "demo",
"date": "2025-10-11" "date": "2025-10-15"
} }
] ]
} }
Write Preview
Loading…
Cancel
Save