diff --git a/GEMINI.md b/GEMINI.md index 02271e1..784660b 100644 --- a/GEMINI.md +++ b/GEMINI.md @@ -69,4 +69,5 @@ vue3-mgt-template/ ### 规范 使用了删除线的就代表已执行完成 -### 任务列表 \ No newline at end of file +### 任务列表 +- 当我让你帮我实现某个功能的时候，如果有不明确的功能点，请先像我确认。 \ No newline at end of file diff --git a/chromePlugin/contentToQrCode/GEMINI.md b/chromePlugin/contentToQrCode/GEMINI.md new file mode 100644 index 0000000..a6c048a --- /dev/null +++ b/chromePlugin/contentToQrCode/GEMINI.md @@ -0,0 +1,10 @@ +## 项目简介 +- **子项目名称**：contentToQrCode +- **项目类型**：该项目属于vue3-mgt-template下的谷歌浏览器插件项目之一 +- **项目功能**：该项目开发完成后会作为插件安装到谷歌浏览器插件中，提供一个页面，当用户复制任何文本内容到该页面中，生成内容对应的二维码，因为二维码内容有长度限制，如果内容超长，请依次生成多个二维码并标示顺序 + +## 开发规范 +- **中文优先**：所有代码注释、日志输出（例如 `console.log`）、以及提交信息（Commit Message）**必须** 使用中文。 +- **谷歌浏览器插件**：该项目是一个谷歌浏览器插件项目，请严格按照谷歌浏览器插件的开发要求来开发功能 +- **文档和注释**：该项目是一个个人学习记录项目，请尽可能多提供文档和注释。 +- **第三方依赖**：允许使用第三方插件qrcode.js，请使用cdn地址。 \ No newline at end of file diff --git a/chromePlugin/contentToQrCode/background.js b/chromePlugin/contentToQrCode/background.js new file mode 100644 index 0000000..7c1e31f --- /dev/null +++ b/chromePlugin/contentToQrCode/background.js @@ -0,0 +1,19 @@ +// background.js + +// 监听插件图标的点击事件 +chrome.action.onClicked.addListener((tab) => { + // 定义我们插件页面的URL + const pluginPageUrl = chrome.runtime.getURL('index.html'); + + // 查询是否已经有打开的插件页面 + chrome.tabs.query({ url: pluginPageUrl }, (tabs) => { + if (tabs.length > 0) { + // 如果找到了，就激活第一个找到的标签页和它的窗口 + chrome.tabs.update(tabs[0].id, { active: true }); + chrome.windows.update(tabs[0].windowId, { focused: true }); + } else { + // 如果没找到，就创建一个新的标签页 + chrome.tabs.create({ url: pluginPageUrl }); + } + }); +}); diff --git a/chromePlugin/contentToQrCode/images/icon128.png b/chromePlugin/contentToQrCode/images/icon128.png new file mode 100644 index 0000000..e69de29 diff --git a/chromePlugin/contentToQrCode/images/icon16.png b/chromePlugin/contentToQrCode/images/icon16.png new file mode 100644 index 0000000..e69de29 diff --git a/chromePlugin/contentToQrCode/images/icon48.png b/chromePlugin/contentToQrCode/images/icon48.png new file mode 100644 index 0000000..e69de29 diff --git a/chromePlugin/contentToQrCode/index.html b/chromePlugin/contentToQrCode/index.html new file mode 100644 index 0000000..a43163b --- /dev/null +++ b/chromePlugin/contentToQrCode/index.html @@ -0,0 +1,29 @@ + + + + + + 内容转二维码 + + + + +
+

内容转二维码生成器

+

将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。

+ + + + + +
+ +
+
+ + + + + + + diff --git a/chromePlugin/contentToQrCode/main.js b/chromePlugin/contentToQrCode/main.js new file mode 100644 index 0000000..6c9e3ce --- /dev/null +++ b/chromePlugin/contentToQrCode/main.js @@ -0,0 +1,75 @@ +// main.js + +// 当整个页面的HTML内容加载完成后，执行此函数 +document.addEventListener('DOMContentLoaded', () => { + // 获取页面上的关键元素 + const textInput = document.getElementById('text-input'); + const generateBtn = document.getElementById('generate-btn'); + const qrcodeContainer = document.getElementById('qrcode-container'); + + // 为“生成二维码”按钮添加点击事件监听器 + generateBtn.addEventListener('click', () => { + // 获取输入框中的文本，并用 trim() 清除前后的空白字符 + const text = textInput.value.trim(); + + // 在生成新的二维码之前，清空之前可能存在的旧二维码 + qrcodeContainer.innerHTML = ''; + + // 如果文本为空，则不执行任何操作 + if (!text) { + console.log('输入内容为空，已中止生成。'); + return; + } + + // 定义每个二维码的最大字符数 + const chunkSize = 2000; + // 计算需要生成多少个二维码 + const totalChunks = Math.ceil(text.length / chunkSize); + + console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`); + + // 循环处理每一块文本 + for (let i = 0; i < totalChunks; i++) { + // 计算当前块的起始和结束位置 + const start = i * chunkSize; + const end = start + chunkSize; + // 从总文本中截取当前块的文本 + const chunk = text.substring(start, end); + + // --- 创建包裹单个二维码及其标签的容器 --- + const itemDiv = document.createElement('div'); + itemDiv.className = 'qrcode-item'; + + // --- 创建并添加序号标签 --- + const label = document.createElement('p'); + label.className = 'qrcode-label'; + // 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码" + label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码'; + itemDiv.appendChild(label); + + // --- 创建用于生成二维码的占位符元素 --- + const qrcodeDiv = document.createElement('div'); + // 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象 + qrcodeDiv.id = `qrcode-${i}`; + itemDiv.appendChild(qrcodeDiv); + + // --- 将完整的二维码项（标签+占位符）添加到主容器中 --- + qrcodeContainer.appendChild(itemDiv); + + // --- 使用 qrcode.js 库生成二维码 --- + // 实例化 QRCode 对象 + // 第一个参数是二维码要渲染到的DOM元素 + // 第二个参数是配置对象 + new QRCode(qrcodeDiv, { + text: chunk, // 当前块的文本内容 + width: 400, // 二维码宽度 + height: 400, // 二维码高度 + colorDark: '#000000', // 二维码颜色 + colorLight: '#ffffff', // 二维码背景色 + correctLevel: QRCode.CorrectLevel.H // 纠错级别，H是最高级 + }); + + console.log(`已为第 ${i + 1} 块内容生成二维码。`); + } + }); +}); diff --git a/chromePlugin/contentToQrCode/manifest.json b/chromePlugin/contentToQrCode/manifest.json new file mode 100644 index 0000000..8163d9f --- /dev/null +++ b/chromePlugin/contentToQrCode/manifest.json @@ -0,0 +1,17 @@ +{ + "manifest_version": 3, + "name": "内容转二维码", + "version": "1.0", + "description": "将长文本内容分割并生成一个或多个二维码的页面。", + "action": { + "default_title": "内容转二维码" + }, + "background": { + "service_worker": "background.js" + }, + "icons": { + "16": "images/icon16.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + } +} diff --git a/chromePlugin/contentToQrCode/style.css b/chromePlugin/contentToQrCode/style.css new file mode 100644 index 0000000..1624133 --- /dev/null +++ b/chromePlugin/contentToQrCode/style.css @@ -0,0 +1,113 @@ +/* style.css */ + +/* 全局样式和基础布局 */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + background-color: #f4f5f7; + color: #172b4d; + margin: 0; + padding: 20px; + display: flex; + justify-content: center; +} + +.container { + width: 100%; + max-width: 800px; + background-color: #ffffff; + padding: 24px 48px; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +h1 { + color: #091e42; + text-align: center; +} + +p { + text-align: center; + color: #5e6c84; + margin-bottom: 24px; +} + +/* 文本输入框样式 */ +textarea#text-input { + width: 100%; + padding: 12px; + border: 2px solid #dfe1e6; + border-radius: 4px; + font-size: 14px; + box-sizing: border-box; + resize: vertical; /* 允许用户垂直调整大小 */ + transition: border-color 0.2s, box-shadow 0.2s; +} + +textarea#text-input:focus { + outline: none; + border-color: #4c9aff; + box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.3); +} + +/* 按钮样式 */ +button#generate-btn { + display: block; + width: 100%; + padding: 12px; + margin: 20px 0; + background-color: #0052cc; + color: white; + border: none; + border-radius: 4px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.2s; +} + +button#generate-btn:hover { + background-color: #0065ff; +} + +button#generate-btn:active { + background-color: #0747a6; +} + +/* 二维码容器和项目样式 */ +#qrcode-container { + margin-top: 24px; + display: flex; + flex-direction: column; /* 垂直排列 */ + align-items: center; /* 居中对齐 */ + gap: 30px; /* 二维码之间的间距 */ +} + +.qrcode-item { + display: flex; + flex-direction: column; + align-items: center; + padding: 15px; + background-color: #fafbfc; + border: 1px solid #dfe1e6; + border-radius: 4px; +} + +.qrcode-label { + font-size: 14px; + font-weight: bold; + color: #5e6c84; + margin-bottom: 10px; +} + +/* + 通过 CSS 限制二维码图片的最大宽度，以防其在页面上过大。 + 高度设为 auto 以保持其宽高比。 +*/ +.qrcode-item img { + max-width: 400px; + height: auto; + background-color: white; + padding: 10px; + border: 1px solid #ccc; +}