{"id":2292,"date":"2026-03-23T01:33:29","date_gmt":"2026-03-23T01:33:29","guid":{"rendered":"https:\/\/www.label.tw\/tw\/?page_id=2292"},"modified":"2026-07-01T04:12:43","modified_gmt":"2026-07-01T04:12:43","slug":"%e5%b0%8f%e5%b7%a5%e5%85%b7","status":"publish","type":"page","link":"https:\/\/www.label.tw\/tw\/?page_id=2292","title":{"rendered":"\u689d\u78bc\u7522\u751f\u5668"},"content":{"rendered":"\n<style>\n    \/* \u5efa\u7acb\u7368\u7acb\u547d\u540d\u7a7a\u9593\uff0c\u78ba\u4fdd\u4e0d\u5e72\u64fe WordPress \u5168\u57df *\/\n    .tc-wrapper {\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        background-color: #f1f5f9;\n        padding: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-height: 100vh;\n        box-sizing: border-box;\n    }\n    .tc-wrapper * {\n        box-sizing: border-box;\n    }\n    .tc-card {\n        background: #ffffff;\n        border-radius: 16px;\n        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n        width: 100%;\n        max-w: 768px;\n        overflow: hidden;\n        border: 1px solid #e2e8f0;\n    }\n    .tc-header {\n        background-color: #0061b7;\n        padding: 20px;\n        text-align: center;\n    }\n    \/* \u9019\u88e1\u660e\u78ba\u8a2d\u5b9a\u7522\u751f\u5668\u5167\u90e8\u7684 H1 \u5927\u5c0f\uff0c\u4e0d\u5f71\u97ff\u5916\u90e8 *\/\n    .tc-header h1 {\n        font-size: 24px !important;\n        font-weight: bold !important;\n        color: #ffffff !important;\n        margin: 0 !important;\n        letter-spacing: 0.05em;\n    }\n    .tc-content {\n        padding: 24px;\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n    }\n    \/* \u6a21\u5f0f\u5207\u63db\u6309\u9215\u5340 *\/\n    .tc-tabs {\n        display: flex;\n        background: #ffffff;\n        padding: 4px;\n        border-radius: 8px;\n        border: 1px solid #0061b7;\n        gap: 4px;\n        overflow-x: auto;\n    }\n    .tc-tabs button {\n        flex: 1;\n        padding: 12px 16px;\n        font-size: 18px !important; \/* \u5fae\u8abf\u70ba\u9069\u4e2d\u5927\u5c0f\uff0c\u82e5\u8981\u539f\u672c\u7684\u8d85\u5927\u5b57\u53ef\u6539 24px *\/\n        font-weight: bold !important;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        white-space: nowrap;\n        border: none !important;\n    }\n    .tc-btn-active {\n        background-color: #0061b7 !important;\n        color: #ffffff !important;\n    }\n    .tc-btn-inactive {\n        background-color: #ffffff !important;\n        color: #0061b7 !important;\n    }\n    .tc-btn-inactive:hover {\n        background-color: #eff6ff !important;\n    }\n    \/* \u986f\u793a\u5340\u57df *\/\n    .tc-display-zone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        background-color: #f8fafc;\n        border-radius: 12px;\n        padding: 24px;\n        border: 2px dashed #cbd5e1;\n        min-height: 300px;\n    }\n    .tc-canvas-container {\n        background: #ffffff;\n        padding: 16px;\n        border-radius: 12px;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n        min-width: 250px;\n        min-height: 250px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    .tc-canvas-container img {\n        margin: auto;\n    }\n    .tc-hidden {\n        display: none !important;\n    }\n    \/* \u9810\u89bd\u8207\u4e0b\u8f09 *\/\n    .tc-preview-bar {\n        margin-top: 20px;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        width: 100%;\n        max-width: 512px;\n    }\n    @media (min-width: 640px) {\n        .tc-preview-bar { flex-direction: row; }\n    }\n    .tc-url-preview {\n        flex: 1;\n        text-align: center;\n        font-size: 20px !important;\n        font-family: monospace;\n        color: #1e293b;\n        background-color: rgba(226, 232, 240, 0.5);\n        padding: 10px 14px;\n        border-radius: 8px;\n        word-break: break-all;\n    }\n    .tc-url-error {\n        color: #ef4444 !important;\n    }\n    .tc-download-btn {\n        height: 40px;\n        padding: 0 24px;\n        background-color: #0061b7 !important;\n        color: #ffffff !important;\n        font-weight: 500;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        cursor: pointer;\n        transition: transform 0.1s ease;\n        border: none !important;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    }\n    .tc-download-btn:active { transform: scale(0.95); }\n    .tc-download-btn:hover { background-color: #004c8f !important; }\n    \n    \/* \u8f38\u5165\u5340 *\/\n    .tc-input-group {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n    .tc-input-group label {\n        font-size: 20px !important;\n        font-weight: bold !important;\n        color: #334155;\n    }\n    .tc-textarea-container {\n        position: relative;\n    }\n    .tc-textarea {\n        width: 100%;\n        padding: 16px;\n        background: #ffffff;\n        border: 1px solid #cbd5e1;\n        border-radius: 12px;\n        color: #334155;\n        font-size: 16px !important;\n        resize: none;\n        transition: all 0.2s;\n    }\n    .tc-textarea:focus {\n        outline: none;\n        border-color: #0061b7;\n        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n    }\n    .tc-paste-btn {\n        position: absolute;\n        bottom: 12px;\n        right: 12px;\n        background-color: #0061b7 !important;\n        color: #ffffff !important;\n        padding: 6px 12px;\n        border-radius: 8px;\n        font-size: 12px !important;\n        font-weight: 500;\n        cursor: pointer;\n        border: none !important;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n    }\n    .tc-paste-btn:hover { background-color: #004c8f !important; }\n<\/style>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.0\/dist\/JsBarcode.all.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bwip-js\/3.3.0\/bwip-js-min.js\"><\/script>\n\n<div class=\"tc-wrapper\">\n    <div class=\"tc-card\">\n        <div class=\"tc-header\">\n            <h1>\u689d\u78bc\u7522\u751f\u5668<\/h1>\n        <\/div>\n\n        <div class=\"tc-content\">\n            <div class=\"tc-tabs\">\n                <button id=\"btn-qr\" onclick=\"switchMode('qr')\" class=\"tc-btn-active\">QR Code<\/button>\n                <button id=\"btn-barcode\" onclick=\"switchMode('barcode')\" class=\"tc-btn-inactive\">\u4e00\u7dad\u689d\u78bc<\/button>\n                <button id=\"btn-ean\" onclick=\"switchMode('ean')\" class=\"tc-btn-inactive\">EAN<\/button>\n                <button id=\"btn-datamatrix\" onclick=\"switchMode('datamatrix')\" class=\"tc-btn-inactive\">DataMatrix<\/button>\n            <\/div>\n\n            <div class=\"tc-display-zone\">\n                <div id=\"qr-container\" class=\"tc-canvas-container\"><\/div>\n                <canvas id=\"barcode-container\" class=\"tc-canvas-container tc-hidden\"><\/canvas>\n                <canvas id=\"ean-container\" class=\"tc-canvas-container tc-hidden\"><\/canvas>\n                <canvas id=\"datamatrix-container\" class=\"tc-canvas-container tc-hidden\"><\/canvas>\n\n                <div class=\"tc-preview-bar\">\n                    <div class=\"tc-url-preview\" id=\"url-preview\" title=\"\u6e96\u5099\u751f\u6210...\">\u6e96\u5099\u751f\u6210&#8230;<\/div>\n                    <button id=\"downloadBtn\" onclick=\"downloadCode()\" class=\"tc-download-btn\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:16px;height:16px;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/>\n                        <\/svg>\n                        \u4e0b\u8f09\u5716\u7247\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"tc-input-group\">\n                <label>\u8acb\u8cbc\u4e0a\u7db2\u5740\u6216\u6587\u5b57\uff1a<\/label>\n                <div class=\"tc-textarea-container\">\n                    <textarea id=\"qr-input\" rows=\"3\" placeholder=\"\u5728\u6b64\u8cbc\u4e0a\u60a8\u8907\u88fd\u7684\u7db2\u5740\u6216\u6587\u5b57\" class=\"tc-textarea\"><\/textarea>\n                    <button onclick=\"pasteFromClipboard()\" class=\"tc-paste-btn\" title=\"\u4e00\u9375\u8cbc\u4e0a\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:16px;height:16px;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/>\n                        <\/svg>\n                        \u8cbc\u4e0a\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    let qrcode = null;\n    let currentMode = 'qr';\n\n    function switchMode(mode) {\n        currentMode = mode;\n        const modes = ['qr', 'barcode', 'ean', 'datamatrix'];\n        \n        modes.forEach(m => {\n            const btn = document.getElementById(`btn-${m}`);\n            const container = document.getElementById(`${m}-container`);\n            \n            if (m === mode) {\n                btn.className = \"tc-btn-active\";\n                container.classList.remove('tc-hidden');\n            } else {\n                btn.className = \"tc-btn-inactive\";\n                container.classList.add('tc-hidden');\n            }\n        });\n        generateCode();\n    }\n\n    function generateCode() {\n        const fullText = document.getElementById('qr-input').value.trim();\n        const previewEl = document.getElementById('url-preview');\n        previewEl.textContent = fullText ? fullText : '\u8acb\u8f38\u5165\u6216\u8cbc\u4e0a\u5167\u5bb9...';\n        previewEl.title = fullText;\n\n        if (fullText.length === 0) {\n            document.getElementById('qr-container').innerHTML = '';\n            ['barcode-container', 'ean-container', 'datamatrix-container'].forEach(id => {\n                const canvas = document.getElementById(id);\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n            });\n            previewEl.classList.remove('tc-url-error');\n            return;\n        }\n\n        if (currentMode === 'qr') {\n            const container = document.getElementById('qr-container');\n            container.innerHTML = '';\n            qrcode = new QRCode(container, {\n                text: fullText,\n                width: 220, \n                height: 220,\n                colorDark : \"#000000\",\n                colorLight : \"#ffffff\",\n                correctLevel : QRCode.CorrectLevel.M\n            });\n            previewEl.classList.remove('tc-url-error');\n        } else if (currentMode === 'barcode') {\n            try {\n                JsBarcode(\"#barcode-container\", fullText, {\n                    format: \"CODE128\",\n                    lineColor: \"#000000\",\n                    width: 2,\n                    height: 100,\n                    displayValue: true,\n                    margin: 10\n                });\n                previewEl.classList.remove('tc-url-error');\n            } catch (error) {\n                const canvas = document.getElementById('barcode-container');\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                previewEl.textContent = '\u26a0\ufe0f \u4e00\u7dad\u689d\u78bc\u4e0d\u652f\u63f4\u6b64\u5167\u5bb9 (\u5efa\u8b70\u4f7f\u7528\u7d14\u82f1\u6578)';\n                previewEl.classList.add('tc-url-error');\n            }\n        } else if (currentMode === 'ean') {\n            try {\n                let eanFormat = \"EAN13\";\n                if (fullText.length === 7 || fullText.length === 8) {\n                    eanFormat = \"EAN8\";\n                }\n                \n                JsBarcode(\"#ean-container\", fullText, {\n                    format: eanFormat,\n                    lineColor: \"#000000\",\n                    width: 2,\n                    height: 100,\n                    displayValue: true,\n                    margin: 10\n                });\n                previewEl.classList.remove('tc-url-error');\n            } catch (error) {\n                const canvas = document.getElementById('ean-container');\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                previewEl.textContent = '\u26a0\ufe0f EAN \u683c\u5f0f\u932f\u8aa4 (\u901a\u5e38\u9700\u70ba 8\u300112 \u6216 13 \u4f4d\u7d14\u6578\u5b57)';\n                previewEl.classList.add('tc-url-error');\n            }\n        } else if (currentMode === 'datamatrix') {\n            try {\n                bwipjs.toCanvas('datamatrix-container', {\n                    bcid: 'datamatrix',\n                    text: fullText,\n                    scale: 5,\n                    padding: 2,\n                    backgroundcolor: 'ffffff',\n                    barcolor: '000000'\n                });\n                previewEl.classList.remove('tc-url-error');\n            } catch (error) {\n                const canvas = document.getElementById('datamatrix-container');\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                previewEl.textContent = '\u26a0\ufe0f DataMatrix \u7522\u751f\u5931\u6557';\n                previewEl.classList.add('tc-url-error');\n            }\n        }\n    }\n\n    async function pasteFromClipboard() {\n        try {\n            const text = await navigator.clipboard.readText();\n            if (text) {\n                document.getElementById('qr-input').value = text;\n                generateCode();\n            }\n        } catch (err) {\n            const inputEl = document.getElementById('qr-input');\n            inputEl.focus();\n            inputEl.placeholder = \"\u8acb\u6309 Ctrl+V \u6216 Cmd+V \u624b\u52d5\u8cbc\u4e0a\";\n        }\n    }\n\n    function downloadCode() {\n        let imageUrl = '';\n        if (currentMode === 'qr') {\n            const container = document.getElementById('qr-container');\n            const canvas = container.querySelector('canvas');\n            const img = container.querySelector('img');\n            if (img && img.src && img.src.includes('data:image')) {\n                imageUrl = img.src;\n            } else if (canvas) {\n                imageUrl = canvas.toDataURL(\"image\/png\");\n            }\n        } else {\n            const canvas = document.getElementById(`${currentMode}-container`);\n            if (canvas && canvas.width > 0) {\n                imageUrl = canvas.toDataURL(\"image\/png\");\n            }\n        }\n\n        if (imageUrl && imageUrl !== 'data:,') {\n            const link = document.createElement('a');\n            link.href = imageUrl;\n            const prefix = currentMode === 'qr' ? 'qrcode' : currentMode;\n            const timestamp = new Date().getTime();\n            link.download = `${prefix}_${timestamp}.png`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        } else {\n            alert('\u689d\u78bc\u5c1a\u672a\u7522\u751f\u6216\u4e0d\u652f\u63f4\u8a72\u5167\u5bb9\uff0c\u7121\u6cd5\u4e0b\u8f09\u3002');\n        }\n    }\n\n    const inputEl = document.getElementById('qr-input');\n    inputEl.addEventListener('input', generateCode);\n    inputEl.addEventListener('paste', () => {\n        setTimeout(generateCode, 50);\n    });\n\n    window.onload = generateCode;\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u689d\u78bc\u7522\u751f\u5668 QR Code \u4e00\u7dad\u689d\u78bc EAN DataMatrix \u6e96\u5099\u751f\u6210&#8230; \u4e0b\u8f09\u5716\u7247 \u8acb\u8cbc\u4e0a\u7db2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2292"}],"version-history":[{"count":19,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions"}],"predecessor-version":[{"id":2863,"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=\/wp\/v2\/pages\/2292\/revisions\/2863"}],"wp:attachment":[{"href":"https:\/\/www.label.tw\/tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}